rsuite 5.44.0 → 5.46.0

package/cjs/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/cjs/Modal/ModalHeader.js

@@ -14,7 +14,9 @@ var _ModalContext = require("./ModalContext");
 var _CloseButton = _interopRequireDefault(require("../CloseButton"));
 var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _DrawerContext = _interopRequireDefault(require("../Drawer/DrawerContext"));
 var ModalHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _useContext, _useContext2;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -30,16 +32,17 @@ var ModalHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
   var classes = merge(className, withClassPrefix());
-  var context = (0, _react.useContext)(_ModalContext.ModalContext);
-  var buttonElement = !(context !== null && context !== void 0 && context.isDrawer) ? /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
-    className: prefix('close'),
-    onClick: (0, _utils.createChainedFunction)(onClose, context === null || context === void 0 ? void 0 : context.onModalClose)
-  }) : /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  var onModalClose = (_useContext = (0, _react.useContext)(_ModalContext.ModalContext)) === null || _useContext === void 0 ? void 0 : _useContext.onModalClose;
+  var isDrawer = (_useContext2 = (0, _react.useContext)(_DrawerContext.default)) === null || _useContext2 === void 0 ? void 0 : _useContext2.isDrawer;
+  var buttonElement = isDrawer ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     icon: /*#__PURE__*/_react.default.createElement(_Close.default, null),
     appearance: "subtle",
     size: "sm",
     className: prefix('close'),
-    onClick: (0, _utils.createChainedFunction)(onClose, context === null || context === void 0 ? void 0 : context.onModalClose)
+    onClick: (0, _utils.createChainedFunction)(onClose, onModalClose)
+  }) : /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
+    className: prefix('close'),
+    onClick: (0, _utils.createChainedFunction)(onClose, onModalClose)
   });
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,

package/cjs/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/cjs/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/cjs/Modal/utils.js

@@ -14,7 +14,8 @@ 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 = (0, _react.useRef)();
   var contentElement = (0, _react.useRef)(null);
   var contentElementResizeObserver = (0, _react.useRef)();
@@ -51,7 +52,11 @@ var useBodyStyles = function useBodyStyles(ref, options) {
     contentElementResizeObserver.current = null;
   }, []);
   var onChangeBodyStyles = (0, _react.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) {
@@ -64,11 +69,11 @@ var useBodyStyles = function useBodyStyles(ref, options) {
         contentElementResizeObserver.current.observe(contentElement.current);
       }
     }
-  }, [drawer, overflow, prefix, ref, updateBodyStyles]);
+  }, [drawer, overflow, prefix, ref, size, updateBodyStyles]);
   (0, _react.useEffect)(function () {
     return onDestroyEvents;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return [overflow ? bodyStyles : {}, onChangeBodyStyles, onDestroyEvents];
+  return [overflow ? bodyStyles : null, onChangeBodyStyles, onDestroyEvents];
 };
 exports.useBodyStyles = useBodyStyles;

package/cjs/Picker/PickerToggle.js

@@ -148,6 +148,8 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }, [editable, onInputPressEnter, onInputBackspace]);
   var renderInput = (0, _react.useCallback)(function (ref, props) {
     return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+      type: "text",
+      autoComplete: "off",
       ref: (0, _utils.mergeRefs)(inputRef, ref),
       name: name,
       style: {
@@ -197,6 +199,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     },
     "data-testid": "spinner"
   }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextMask.default, {
+    keepCharPositions: true,
     mask: inputMask,
     value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,
     onBlur: handleInputBlur,

package/cjs/Picker/utils.js

@@ -194,6 +194,12 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
   var _useState3 = (0, _react.useState)([]),
     keys = _useState3[0],
     setKeys = _useState3[1];
+  var focusCallback = (0, _react.useCallback)(function (value, event) {
+    var menu = (0, _isFunction.default)(target) ? target() : target;
+    var focusElement = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-key=\"" + value + "\"]");
+    focusElement === null || focusElement === void 0 ? void 0 : focusElement.focus();
+    callback === null || callback === void 0 ? void 0 : callback(value, event);
+  }, [callback, target]);
   var getScrollContainer = (0, _react.useCallback)(function () {
     var menu = (0, _isFunction.default)(target) ? target() : target;
 
@@ -279,11 +285,11 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
       var focusItem = items[nextIndex];
       if (!(0, _isUndefined.default)(focusItem)) {
         setFocusItemValue(focusItem[valueKey]);
-        callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);
+        focusCallback(focusItem[valueKey], event);
         scrollListItem('bottom', focusItem[valueKey], willOverflow);
       }
     });
-  }, [callback, findFocusItemIndex, scrollListItem, valueKey]);
+  }, [focusCallback, findFocusItemIndex, scrollListItem, valueKey]);
   var focusPrevMenuItem = (0, _react.useCallback)(function (event) {
     findFocusItemIndex(function (items, index) {
       var willOverflow = index === 0;
@@ -291,11 +297,11 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
       var focusItem = items[nextIndex];
       if (!(0, _isUndefined.default)(focusItem)) {
         setFocusItemValue(focusItem[valueKey]);
-        callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);
+        focusCallback(focusItem[valueKey], event);
         scrollListItem('top', focusItem[valueKey], willOverflow);
       }
     });
-  }, [callback, findFocusItemIndex, scrollListItem, valueKey]);
+  }, [focusCallback, findFocusItemIndex, scrollListItem, valueKey]);
   var getSubMenuKeys = (0, _react.useCallback)(function (nextLayer) {
     var menu = (0, _isFunction.default)(target) ? target() : target;
     var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + nextLayer + "\"]");
@@ -315,9 +321,9 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
       setKeys(nextKeys);
       setLayer(nextLayer);
       setFocusItemValue(nextKeys[0]);
-      callback === null || callback === void 0 ? void 0 : callback(nextKeys[0], event);
+      focusCallback(nextKeys[0], event);
     }
-  }, [callback, getSubMenuKeys, layer]);
+  }, [focusCallback, getSubMenuKeys, layer]);
   var focusPrevLevelMenu = (0, _react.useCallback)(function (event) {
     var nextLayer = layer - 1;
     var nextKeys = getSubMenuKeys(nextLayer);
@@ -331,10 +337,10 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
       var parentItemValue = (_getParent = getParent(focusItem)) === null || _getParent === void 0 ? void 0 : _getParent[valueKey];
       if (parentItemValue) {
         setFocusItemValue(parentItemValue);
-        callback === null || callback === void 0 ? void 0 : callback(parentItemValue, event);
+        focusCallback(parentItemValue, event);
       }
     }
-  }, [callback, data, focusItemValue, getParent, getSubMenuKeys, layer, valueKey]);
+  }, [focusCallback, data, focusItemValue, getParent, getSubMenuKeys, layer, valueKey]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var _onMenuKeyDown;
     onMenuKeyDown(event, (_onMenuKeyDown = {
@@ -376,10 +382,13 @@ var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
     onMenuPressEnter = props.onMenuPressEnter,
     onMenuPressBackspace = props.onMenuPressBackspace;
   var handleClose = (0, _react.useCallback)(function () {
-    var _triggerRef$current, _triggerRef$current$c;
+    var _triggerRef$current, _triggerRef$current$c, _targetRef$current, _targetRef$current$fo;
     (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
+
+    // The focus is on the trigger button after closing
+    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$fo = _targetRef$current.focus) === null || _targetRef$current$fo === void 0 ? void 0 : _targetRef$current$fo.call(_targetRef$current);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, triggerRef]);
+  }, [onClose, targetRef, triggerRef]);
   var handleOpen = (0, _react.useCallback)(function () {
     var _triggerRef$current2, _triggerRef$current2$;
     (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
@@ -541,8 +550,8 @@ function usePublicMethods(ref, parmas) {
         return (_overlayRef$current = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) !== null && _overlayRef$current !== void 0 ? _overlayRef$current : null;
       },
       get target() {
-        var _targetRef$current;
-        return (_targetRef$current = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _targetRef$current !== void 0 ? _targetRef$current : null;
+        var _targetRef$current2;
+        return (_targetRef$current2 = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _targetRef$current2 !== void 0 ? _targetRef$current2 : null;
       },
       get list() {
         if (!(listRef !== null && listRef !== void 0 && listRef.current)) {

package/cjs/Table/Table.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Column, TableProps, RowDataType, TableInstance, CellProps as TableCellProps } from 'rsuite-table';
-export interface CellProps<T = any> extends Omit<TableCellProps, 'rowData' | 'dataKey'> {
+import { Column, TableProps, RowDataType, TableInstance, CellProps as TableCellProps, RowKeyType } from 'rsuite-table';
+export interface CellProps<Row extends RowDataType> extends Omit<TableCellProps<Row>, 'rowData' | 'dataKey'> {
     /** Data binding key, but also a sort of key */
-    dataKey?: string | keyof T;
+    dataKey?: string | keyof Row;
     /** Row Data */
-    rowData?: T;
+    rowData?: Row;
 }
-declare const _default: (<Row extends RowDataType<never>, Key>(props: TableProps<Row, Key> & React.RefAttributes<TableInstance<Row, Key>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
-    Cell: React.ForwardRefExoticComponent<import("rsuite-table/lib/Cell").InnerCellProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: (<Row extends RowDataType<never>, Key extends RowKeyType>(props: TableProps<Row, Key> & React.RefAttributes<TableInstance<Row, Key>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    Cell: <Row_1 extends RowDataType<never>, Key_1 extends RowKeyType>(props: import("rsuite-table/lib/Cell").InnerCellProps<Row_1, Key_1> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     Column: typeof Column;
-    HeaderCell: React.ForwardRefExoticComponent<import("rsuite-table").HeaderCellProps & React.RefAttributes<HTMLDivElement>>;
+    HeaderCell: <Row_2 extends RowDataType<never>, Key_2 extends RowKeyType>(props: import("rsuite-table").HeaderCellProps<Row_2, Key_2> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     ColumnGroup: React.ForwardRefExoticComponent<import("rsuite-table").ColumnGroupProps & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;