rsuite 5.43.0 → 5.45.0

package/esm/Modal/ModalBody.js

@@ -7,8 +7,9 @@ import { useClassNames } from '../utils';
 import { ModalContext } from './ModalContext';
 import IconButton from '../IconButton';
 import Close from '@rsuite/icons/Close';
+import DrawerContext from '../Drawer/DrawerContext';
 var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _context$getBodyStyle;
+  var _context$getBodyStyle, _useContext;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -24,17 +25,22 @@ var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix());
   var context = useContext(ModalContext);
   var bodyStyles = context === null || context === void 0 ? void 0 : (_context$getBodyStyle = context.getBodyStyles) === null || _context$getBodyStyle === void 0 ? void 0 : _context$getBodyStyle.call(context);
+  var closeButton = (_useContext = useContext(DrawerContext)) === null || _useContext === void 0 ? void 0 : _useContext.closeButton;
+  var buttonElement = null;
+  if (closeButton) {
+    buttonElement = typeof closeButton === 'boolean' ? /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(Close, null),
+      appearance: "subtle",
+      size: "sm",
+      className: prefix('close'),
+      onClick: context === null || context === void 0 ? void 0 : context.onModalClose
+    }) : closeButton;
+  }
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     style: _extends({}, bodyStyles, style),
     className: classes
-  }), (context === null || context === void 0 ? void 0 : context.isDrawer) && /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(Close, null),
-    appearance: "subtle",
-    size: "sm",
-    className: prefix('close'),
-    onClick: context === null || context === void 0 ? void 0 : context.onModalClose
-  }), children);
+  }), buttonElement, children);
 });
 ModalBody.displayName = 'ModalBody';
 ModalBody.propTypes = {

package/esm/Modal/ModalContext.d.ts

@@ -5,8 +5,6 @@ export interface ModalContextProps {
     /** Pass the close event callback to the header close button. */
     onModalClose?: (event: React.MouseEvent<Element, MouseEvent>) => void;
     /** Pass the latest style to body. */
-    getBodyStyles?: () => React.CSSProperties;
-    /** Whether this Modal is a Drawer */
-    isDrawer: boolean;
+    getBodyStyles?: () => React.CSSProperties | null;
 }
 export declare const ModalContext: React.Context<ModalContextProps | null>;

package/esm/Modal/ModalHeader.js

@@ -8,7 +8,9 @@ import { ModalContext } from './ModalContext';
 import CloseButton from '../CloseButton';
 import Close from '@rsuite/icons/Close';
 import IconButton from '../IconButton';
+import DrawerContext from '../Drawer/DrawerContext';
 var ModalHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useContext, _useContext2;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -24,16 +26,17 @@ var ModalHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
   var classes = merge(className, withClassPrefix());
-  var context = useContext(ModalContext);
-  var buttonElement = !(context !== null && context !== void 0 && context.isDrawer) ? /*#__PURE__*/React.createElement(CloseButton, {
-    className: prefix('close'),
-    onClick: createChainedFunction(onClose, context === null || context === void 0 ? void 0 : context.onModalClose)
-  }) : /*#__PURE__*/React.createElement(IconButton, {
+  var onModalClose = (_useContext = useContext(ModalContext)) === null || _useContext === void 0 ? void 0 : _useContext.onModalClose;
+  var isDrawer = (_useContext2 = useContext(DrawerContext)) === null || _useContext2 === void 0 ? void 0 : _useContext2.isDrawer;
+  var buttonElement = isDrawer ? /*#__PURE__*/React.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(Close, null),
     appearance: "subtle",
     size: "sm",
     className: prefix('close'),
-    onClick: createChainedFunction(onClose, context === null || context === void 0 ? void 0 : context.onModalClose)
+    onClick: createChainedFunction(onClose, onModalClose)
+  }) : /*#__PURE__*/React.createElement(CloseButton, {
+    className: prefix('close'),
+    onClick: createChainedFunction(onClose, onModalClose)
   });
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,

package/esm/Modal/index.d.ts

@@ -5,4 +5,5 @@ export type { ModalDialogProps } from './ModalDialog';
 export type { ModalFooterProps } from './ModalFooter';
 export type { ModalHeaderProps } from './ModalHeader';
 export type { ModalTitleProps } from './ModalTitle';
+export type { ModalSize } from './utils';
 export default Modal;

package/esm/Modal/utils.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
+import { TypeAttributes } from '../@types/common';
+export declare 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, (entering?: boolean) => void, () => void];
+}) => [import("react").CSSProperties | null, (entering?: boolean) => void, () => void];

package/esm/Modal/utils.js

@@ -9,7 +9,8 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
     setBodyStyles = _useState[1];
   var overflow = options.overflow,
     drawer = options.drawer,
-    prefix = options.prefix;
+    prefix = options.prefix,
+    size = options.size;
   var windowResizeListener = useRef();
   var contentElement = useRef(null);
   var contentElementResizeObserver = useRef();
@@ -46,7 +47,11 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
     contentElementResizeObserver.current = null;
   }, []);
   var onChangeBodyStyles = useCallback(function (entering) {
-    if (overflow && !drawer && ref.current) {
+    if (drawer || size === 'full') {
+      setBodyStyles(null);
+      return;
+    }
+    if (overflow && ref.current) {
       updateBodyStyles(undefined, entering);
       contentElement.current = ref.current.querySelector("." + prefix('content'));
       if (!windowResizeListener.current) {
@@ -59,10 +64,10 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
         contentElementResizeObserver.current.observe(contentElement.current);
       }
     }
-  }, [drawer, overflow, prefix, ref, updateBodyStyles]);
+  }, [drawer, overflow, prefix, ref, size, updateBodyStyles]);
   useEffect(function () {
     return onDestroyEvents;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return [overflow ? bodyStyles : {}, onChangeBodyStyles, onDestroyEvents];
+  return [overflow ? bodyStyles : null, onChangeBodyStyles, onDestroyEvents];
 };

package/esm/MultiCascader/MultiCascader.d.ts

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

package/esm/Picker/PickerToggle.d.ts

@@ -15,6 +15,7 @@ export interface PickerToggleProps extends ToggleButtonProps {
     readOnly?: boolean;
     plaintext?: boolean;
     tabIndex?: number;
+    /** Whether to display an loading indicator on toggle button */
     loading?: boolean;
     editable?: boolean;
     name?: string;
@@ -22,6 +23,7 @@ export interface PickerToggleProps extends ToggleButtonProps {
     inputMask?: (string | RegExp)[];
     onInputChange?: (value: string, event: React.ChangeEvent) => void;
     onInputPressEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onInputBackspace?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onInputBlur?: (event: React.FocusEvent<HTMLElement>) => void;
     onInputFocus?: (event: React.FocusEvent<HTMLElement>) => void;
     placement?: TypeAttributes.Placement;

package/esm/Picker/PickerToggle.js

@@ -44,6 +44,7 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     inputMask = _props$inputMask === void 0 ? defaultInputMask : _props$inputMask,
     onInputChange = props.onInputChange,
     onInputPressEnter = props.onInputPressEnter,
+    onInputBackspace = props.onInputBackspace,
     onInputBlur = props.onInputBlur,
     onInputFocus = props.onInputFocus,
     onClean = props.onClean,
@@ -56,7 +57,7 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
     label = props.label,
     name = props.name,
-    rest = _objectWithoutPropertiesLoose(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label", "name"]);
+    rest = _objectWithoutPropertiesLoose(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBackspace", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label", "name"]);
   var inputRef = useRef(null);
   var comboboxRef = useRef(null);
   var _useState = useState(false),
@@ -130,10 +131,15 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(value, event);
   }, [onInputChange]);
   var handleInputKeyDown = useCallback(function (event) {
-    if (editable && event.key === KEY_VALUES.ENTER) {
-      onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);
+    if (editable) {
+      if (event.key === KEY_VALUES.ENTER) {
+        onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);
+      }
+      if (event.key === KEY_VALUES.BACKSPACE) {
+        onInputBackspace === null || onInputBackspace === void 0 ? void 0 : onInputBackspace(event);
+      }
     }
-  }, [onInputPressEnter, editable]);
+  }, [editable, onInputPressEnter, onInputBackspace]);
   var renderInput = useCallback(function (ref, props) {
     return /*#__PURE__*/React.createElement("input", _extends({
       ref: mergeRefs(inputRef, ref),

package/esm/Picker/utils.js

@@ -354,6 +354,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
     active = props.active,
     readOnly = props.readOnly,
     disabled = props.disabled,
+    loading = props.loading,
     onExit = props.onExit,
     onOpen = props.onOpen,
     onClose = props.onClose,
@@ -380,7 +381,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
   }, [active, handleOpen, handleClose]);
   var onToggle = useCallback(function (event) {
     // Keyboard events should not be processed when readOnly and disabled are set.
-    if (readOnly || disabled) {
+    if (readOnly || disabled || loading) {
       return;
     }
     if (event.target === (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current)) {
@@ -426,7 +427,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
 
     // Native event callback
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  }, [readOnly, disabled, targetRef, overlayRef, onKeyDown, toggle, handleToggleDropdown, onExit, onMenuKeyDown, searchInputRef, onMenuPressEnter, onMenuPressBackspace, handleClose]);
+  }, [readOnly, disabled, loading, targetRef, overlayRef, onKeyDown, toggle, handleToggleDropdown, onExit, onMenuKeyDown, searchInputRef, onMenuPressEnter, onMenuPressBackspace, handleClose]);
   return onToggle;
 };
 /**

package/esm/SelectPicker/SelectPicker.d.ts

@@ -6,8 +6,6 @@ import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export interface SelectProps<T> {
     /** Set group condition key in data */
     groupBy?: string;
-    /** Whether to display an loading indicator on toggle button */
-    loading?: boolean;
     /** Whether dispaly search input box */
     searchable?: boolean;
     /** Whether using virtualized list */
@@ -41,7 +39,7 @@ export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValu
     /** Custom render selected items */
     renderValue?: (value: T[], item: ItemDataType<T>[], selectedElement: React.ReactNode) => React.ReactNode;
 }
-export interface SelectPickerProps<T> extends Omit<FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, 'value' | 'defaultValue' | 'onChange'>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs' | 'label'> {
+export interface SelectPickerProps<T> extends Omit<FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, 'value' | 'defaultValue' | 'onChange'>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs' | 'label' | 'loading'> {
     /** Initial value */
     defaultValue?: T;
     /** Current value of the component. Creates a controlled component */

package/esm/TreePicker/TreePicker.d.ts

@@ -3,7 +3,7 @@ import { PickerLocale } from '../locales';
 import { PickerComponent, PickerToggleProps } from '../Picker';
 import { TreeDragProps, TreeBaseProps } from '../Tree/Tree';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
-export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, ItemDataType>, TreeDragProps, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs'> {
+export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, ItemDataType>, TreeDragProps, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
     /** The height of Dropdown */
     height?: number;
     /** Tree node cascade */

package/esm/toaster/useToaster.js

@@ -1,4 +1,5 @@
 'use client';
+import { useMemo } from 'react';
 import toaster from './toaster';
 import { useCustom } from '../utils';
 
@@ -9,24 +10,26 @@ import { useCustom } from '../utils';
 var useToaster = function useToaster() {
   var _useCustom = useCustom(),
     toasters = _useCustom.toasters;
-  return {
-    push: function push(message, options) {
-      var _toasters$current;
-      var customToaster = toasters === null || toasters === void 0 ? void 0 : (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');
-      return customToaster ? customToaster.push(message, options) : toaster.push(message, options);
-    },
-    remove: function remove(key) {
-      toasters ? Array.from(toasters.current).forEach(function (_ref) {
-        var c = _ref[1];
-        return c === null || c === void 0 ? void 0 : c.remove(key);
-      }) : toaster.remove(key);
-    },
-    clear: function clear() {
-      toasters ? Array.from(toasters.current).forEach(function (_ref2) {
-        var c = _ref2[1];
-        return c === null || c === void 0 ? void 0 : c.clear();
-      }) : toaster.clear();
-    }
-  };
+  return useMemo(function () {
+    return {
+      push: function push(message, options) {
+        var _toasters$current;
+        var customToaster = toasters === null || toasters === void 0 ? void 0 : (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');
+        return customToaster ? customToaster.push(message, options) : toaster.push(message, options);
+      },
+      remove: function remove(key) {
+        toasters ? Array.from(toasters.current).forEach(function (_ref) {
+          var c = _ref[1];
+          return c === null || c === void 0 ? void 0 : c.remove(key);
+        }) : toaster.remove(key);
+      },
+      clear: function clear() {
+        toasters ? Array.from(toasters.current).forEach(function (_ref2) {
+          var c = _ref2[1];
+          return c === null || c === void 0 ? void 0 : c.clear();
+        }) : toaster.clear();
+      }
+    };
+  }, [toasters]);
 };
 export default useToaster;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.43.0",
+  "version": "5.45.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -38,7 +38,7 @@
     "prop-types": "^15.8.1",
     "react-use-set": "^1.0.0",
     "react-window": "^1.8.8",
-    "rsuite-table": "^5.15.0",
+    "rsuite-table": "^5.17.0",
     "schema-typed": "^2.1.3"
   },
   "peerDependencies": {