rsuite 5.44.0 → 5.46.0

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/Picker/PickerToggle.js

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

package/esm/Picker/utils.js

@@ -182,6 +182,12 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
   var _useState3 = useState([]),
     keys = _useState3[0],
     setKeys = _useState3[1];
+  var focusCallback = useCallback(function (value, event) {
+    var menu = isFunction(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 = useCallback(function () {
     var menu = isFunction(target) ? target() : target;
 
@@ -267,11 +273,11 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
       var focusItem = items[nextIndex];
       if (!isUndefined(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 = useCallback(function (event) {
     findFocusItemIndex(function (items, index) {
       var willOverflow = index === 0;
@@ -279,11 +285,11 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
       var focusItem = items[nextIndex];
       if (!isUndefined(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 = useCallback(function (nextLayer) {
     var menu = isFunction(target) ? target() : target;
     var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + nextLayer + "\"]");
@@ -303,9 +309,9 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
       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 = useCallback(function (event) {
     var nextLayer = layer - 1;
     var nextKeys = getSubMenuKeys(nextLayer);
@@ -319,10 +325,10 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
       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 = useCallback(function (event) {
     var _onMenuKeyDown;
     onMenuKeyDown(event, (_onMenuKeyDown = {
@@ -363,10 +369,13 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
     onMenuPressEnter = props.onMenuPressEnter,
     onMenuPressBackspace = props.onMenuPressBackspace;
   var handleClose = 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 = 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);
@@ -527,8 +536,8 @@ export 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/esm/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.44.0",
+  "version": "5.46.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.16.0",
+    "rsuite-table": "^5.18.1",
     "schema-typed": "^2.1.3"
   },
   "peerDependencies": {

package/styles/color-modes/dark.less

@@ -363,44 +363,4 @@
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-
-  // CSS relative color syntax is not supported
-  // https://developer.chrome.com/blog/css-relative-color-syntax/
-  @supports not (color: rgb(from white r g b)) {
-    // Misc
-    --rs-bg-backdrop: fade(@B900-dark, 80%);
-    --rs-color-focus-ring: 0 0 0 3px fade(@H500-dark, 25%);
-    --rs-state-focus-shadow: 0 0 0 3px fade(@H500-dark, 25%);
-    --rs-state-focus-outline: 3px solid fade(@H500-dark, 25%);
-
-    // Loader
-    --rs-loader-ring: fade(@B050-dark, 30);
-    --rs-loader-backdrop: fade(@B900-dark, 83%);
-    --rs-loader-ring-inverse: fade(@B050-dark, 80);
-    --rs-loader-backdrop-inverse: fade(@B000-dark, 90);
-
-    // Dropdown
-    --rs-dropdown-item-bg-active: fade(@H900-dark, 20);
-
-    // ARIA Listboxes
-    --rs-listbox-option-selected-bg: fade(@H900-dark, 20%);
-
-    // Slider
-    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500-dark, 25);
-
-    // Uploader
-    --rs-uploader-overlay-bg: fade(@B600-dark, 80);
-
-    // Carousel
-    --rs-carousel-indicator: fade(@B000-dark, 40);
-
-    // List
-    --rs-list-placeholder-bg: fade(@H900-dark, 20%);
-
-    // Calendar
-    --rs-calendar-range-bg: fade(@H900-dark, 50%);
-
-    // Placeholder
-    --rs-placeholder-active: lighten(@B600-dark, 5%);
-  }
 }

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

@@ -379,39 +379,4 @@
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-
-  // CSS relative color syntax is not supported
-  // https://developer.chrome.com/blog/css-relative-color-syntax/
-  @supports not (color: rgb(from white r g b)) {
-    // Misc
-    --rs-bg-backdrop: fade(@B900-high-contrast, 80%);
-    --rs-state-focus-outline: 3px solid fade(@H500-high-contrast, 25%);
-
-    // Loader
-    --rs-loader-ring: fade(@B050-high-contrast, 30);
-    --rs-loader-backdrop: fade(@B900-high-contrast, 83%);
-    --rs-loader-ring-inverse: fade(@B050-high-contrast, 80);
-    --rs-loader-backdrop-inverse: fade(@B000-high-contrast, 90);
-
-    // Dropdown
-    --rs-dropdown-item-bg-active: fade(@H900-high-contrast, 20);
-
-    // Slider
-    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500-high-contrast, 25);
-
-    // Uploader
-    --rs-uploader-overlay-bg: fade(@B600-high-contrast, 80);
-
-    // Carousel
-    --rs-carousel-indicator: fade(@B000-high-contrast, 40);
-
-    // List
-    --rs-list-placeholder-bg: fade(@H900-high-contrast, 20%);
-
-    // Calendar
-    --rs-calendar-range-bg: fade(@H900-high-contrast, 50%);
-
-    // Placeholder
-    --rs-placeholder-active: lighten(@B600-high-contrast, 5%);
-  }
 }

package/styles/color-modes/light.less

@@ -373,50 +373,4 @@
 
   // Popover
   --rs-popover-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
-
-  // CSS relative color syntax is not supported
-  // https://developer.chrome.com/blog/css-relative-color-syntax/
-  @supports not (color: rgb(from white r g b)) {
-    // Misc
-    --rs-bg-backdrop: fade(@B900, 30%);
-    --rs-color-focus-ring: fade(@H500, 25%);
-    --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
-    --rs-state-focus-outline: 3px solid fade(@H500, 25%);
-
-    // Loader
-    --rs-loader-ring: fade(@B050, 80);
-    --rs-loader-backdrop: fade(@B000, 90%);
-    --rs-loader-ring-inverse: fade(@B050, 30%);
-    --rs-loader-backdrop-inverse: fade(@B900, 83%);
-
-    // Dropdown
-    --rs-dropdown-item-bg-hover: fade(@H100, 50%);
-
-    // ARIA menu
-    --rs-menuitem-active-bg: fade(@H100, 50);
-
-    // ARIA Listboxes
-    --rs-listbox-option-hover-bg: fade(@H100, 50%);
-
-    // Toggle
-    --rs-toggle-loader-ring: fade(@B050, 30%);
-
-    // Slider
-    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500, 25%);
-
-    // Uploader
-    --rs-uploader-overlay-bg: fade(#fff, 80);
-
-    // Carousel
-    --rs-carousel-indicator: fade(@B000, 40);
-
-    // List
-    --rs-list-placeholder-bg: fade(@H050, 50%);
-
-    // Table
-    --rs-table-scrollbar-vertical-track: fade(@B200, 40%);
-
-    // Calendar
-    --rs-calendar-range-bg: fade(@H100, 50%);
-  }
 }