rsuite 5.5.0 → 5.6.1

package/cjs/InputPicker/InputPicker.js

@@ -417,7 +417,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var allData = getAllData();
     var focusItem = allData.find(function (item) {
       return (0, _shallowEqual.default)(item[valueKey], focusItemValue);
-    });
+    }); // FIXME Bad state flow
 
     if (!focusItem && focusItemValue === searchKeyword) {
       focusItem = createOption(searchKeyword);
@@ -425,7 +425,11 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     setValue(focusItemValue);
     setSearchKeyword('');
-    handleSelect(focusItemValue, focusItem, event);
+
+    if (focusItem) {
+      handleSelect(focusItemValue, focusItem, event);
+    }
+
     handleChange(focusItemValue, event);
     handleClose();
   }, [setValue, disabledItemValues, controlledData, focusItemValue, valueKey, searchKeyword, handleClose, setSearchKeyword, createOption, getAllData, handleChange, handleSelect]);

package/cjs/List/ListItem.js

@@ -43,18 +43,20 @@ var ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var listItemRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    var _register = register({
-      node: listItemRef.current,
-      edgeOffset: null,
-      info: {
-        collection: collection,
-        disabled: disabled,
-        index: index
-      }
-    }),
-        unregister = _register.unregister;
+    if (listItemRef.current) {
+      var _register = register({
+        node: listItemRef.current,
+        edgeOffset: null,
+        info: {
+          collection: collection,
+          disabled: disabled,
+          index: index
+        }
+      }),
+          unregister = _register.unregister;
 
-    return unregister;
+      return unregister;
+    }
   }, [collection, disabled, index, register]);
   var classes = merge(className, withClassPrefix(size, {
     disabled: disabled,

package/cjs/Menu/MenuItem.js

@@ -74,19 +74,22 @@ function MenuItem(props) {
   }, [dispatch]);
   (0, _react.useEffect)(function () {
     var menuitemElement = menuitemRef.current;
-    dispatch({
-      type: _MenuContext.MenuActionTypes.RegisterItem,
-      element: menuitemElement,
-      props: {
-        disabled: disabled
-      }
-    });
-    return function () {
+
+    if (menuitemElement) {
       dispatch({
-        type: _MenuContext.MenuActionTypes.UnregisterItem,
-        id: menuitemElement.id
+        type: _MenuContext.MenuActionTypes.RegisterItem,
+        element: menuitemElement,
+        props: {
+          disabled: disabled
+        }
       });
-    };
+      return function () {
+        dispatch({
+          type: _MenuContext.MenuActionTypes.UnregisterItem,
+          id: menuitemElement.id
+        });
+      };
+    }
   }, [menuitemRef, disabled, dispatch]);
   var menuitemProps = {
     id: menuitemId,

package/cjs/Picker/PickerOverlay.js

@@ -53,7 +53,10 @@ var PickerOverlay = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       // Get the width value of the button,
       // and then set it to the menu to make their width consistent.
       var width = (0, _getWidth.default)((0, _utils.getDOMNode)(toggle.root));
-      (0, _addStyle.default)(overlayRef.current, 'min-width', width + "px");
+
+      if (overlayRef.current) {
+        (0, _addStyle.default)(overlayRef.current, 'min-width', width + "px");
+      }
     }
   }, [autoWidth, target, overlayRef]);
 

package/cjs/Picker/index.d.ts

@@ -1,4 +1,5 @@
 import { pickTriggerPropKeys, omitTriggerPropKeys, OverlayTriggerInstance, PositionChildProps } from './PickerToggleTrigger';
+import { PickerToggleProps } from './PickerToggle';
 import { PickerInstance, PickerComponent } from './types';
 export { default as DropdownMenu } from './DropdownMenu';
 export { default as DropdownMenuCheckItem } from './DropdownMenuCheckItem';
@@ -10,6 +11,6 @@ export { default as PickerToggleTrigger } from './PickerToggleTrigger';
 export { default as SearchBar } from './SearchBar';
 export { default as SelectedElement } from './SelectedElement';
 export { pickTriggerPropKeys, omitTriggerPropKeys };
-export type { OverlayTriggerInstance, PositionChildProps, PickerInstance, PickerComponent };
+export type { OverlayTriggerInstance, PositionChildProps, PickerInstance, PickerComponent, PickerToggleProps };
 export * from './utils';
 export * from './propTypes';

package/cjs/Ripple/Ripple.js

@@ -68,17 +68,25 @@ var Ripple = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   };
 
   var handleMouseDown = (0, _react.useCallback)(function (event) {
-    var position = getPosition(triggerRef.current, event);
-    setRippling(true);
-    setPosition(position);
-    onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(position, event);
+    if (triggerRef.current) {
+      var _position = getPosition(triggerRef.current, event);
+
+      setRippling(true);
+      setPosition(_position);
+      onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(_position, event);
+    }
   }, [onMouseDown]);
   (0, _react.useEffect)(function () {
-    var parentNode = triggerRef.current.parentNode;
-    var mousedownListener = (0, _on.default)(parentNode, 'mousedown', handleMouseDown);
-    return function () {
-      mousedownListener === null || mousedownListener === void 0 ? void 0 : mousedownListener.off();
-    };
+    var _triggerRef$current;
+
+    var parentNode = (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.parentNode;
+
+    if (parentNode) {
+      var mousedownListener = (0, _on.default)(parentNode, 'mousedown', handleMouseDown);
+      return function () {
+        mousedownListener === null || mousedownListener === void 0 ? void 0 : mousedownListener.off();
+      };
+    }
   }, [handleMouseDown]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     className: classes,

package/cjs/TreePicker/TreePicker.js

@@ -83,11 +83,13 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       _props$childrenKey = props.childrenKey,
       childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
       draggable = props.draggable,
-      defaultExpandAll = props.defaultExpandAll,
+      _props$defaultExpandA = props.defaultExpandAll,
+      defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,
       _props$disabledItemVa = props.disabledItemValues,
       disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
       controlledExpandItemValues = props.expandItemValues,
-      defaultExpandItemValues = props.defaultExpandItemValues,
+      _props$defaultExpandI = props.defaultExpandItemValues,
+      defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,
       id = props.id,
       listProps = props.listProps,
       getChildren = props.getChildren,
@@ -222,15 +224,17 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     });
   }, [searchKeywordState, expandItemValues, filteredData, flattenNodes, formatVirtualizedTreeData, virtualized]);
   var focusActiveNode = (0, _react.useCallback)(function () {
-    (0, _treeUtils.focusToActiveTreeNode)({
-      list: listRef.current,
-      valueKey: valueKey,
-      selector: "." + treePrefix('node-active'),
-      activeNode: activeNode,
-      virtualized: virtualized,
-      container: treeViewRef.current,
-      formattedNodes: getFormattedNodes()
-    });
+    if (listRef.current) {
+      (0, _treeUtils.focusToActiveTreeNode)({
+        list: listRef.current,
+        valueKey: valueKey,
+        selector: "." + treePrefix('node-active'),
+        activeNode: activeNode,
+        virtualized: virtualized,
+        container: treeViewRef.current,
+        formattedNodes: getFormattedNodes()
+      });
+    }
   }, [treePrefix, activeNode, getFormattedNodes, valueKey, virtualized]);
   (0, _react.useEffect)(function () {
     setFilteredData(data, searchKeywordState);

package/cjs/Uploader/UploadTrigger.js

@@ -69,7 +69,9 @@ var UploadTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
   }, []);
   var handleClearInput = (0, _react.useCallback)(function () {
-    inputRef.current.value = '';
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
   }, []);
   var handleDragEnter = (0, _react.useCallback)(function (event) {
     if (draggable) {

package/cjs/Uploader/Uploader.js

@@ -205,7 +205,9 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    */
 
   var cleanInputValue = (0, _react.useCallback)(function () {
-    trigger.current.clearInput();
+    var _trigger$current;
+
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.clearInput();
   }, []);
   /**
    * Callback for successful file upload.

package/cjs/toaster/toaster.d.ts

@@ -8,7 +8,7 @@ export interface Toaster {
      * @param message
      * @param options
      */
-    push(message: React.ReactNode, options?: ToastContainerProps): string;
+    push(message: React.ReactNode, options?: ToastContainerProps): string | undefined;
     /**
      * Remove a message by key
      * @param key

package/cjs/toaster/toaster.js

@@ -41,6 +41,8 @@ var toaster = function toaster(message) {
 };
 
 toaster.push = function (message, options) {
+  var _container$current;
+
   if (options === void 0) {
     options = {};
   }
@@ -53,18 +55,22 @@ toaster.push = function (message, options) {
     container = createContainer((_options$placement = options.placement) !== null && _options$placement !== void 0 ? _options$placement : '', options);
   }
 
-  return container.current.push(message);
+  return (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.push(message);
 };
 
 toaster.remove = function (key) {
   containers.forEach(function (c) {
-    return c.current.remove(key);
+    var _c$current;
+
+    return (_c$current = c.current) === null || _c$current === void 0 ? void 0 : _c$current.remove(key);
   });
 };
 
 toaster.clear = function () {
   containers.forEach(function (c) {
-    return c.current.clear();
+    var _c$current2;
+
+    return (_c$current2 = c.current) === null || _c$current2 === void 0 ? void 0 : _c$current2.clear();
   });
 };
 

package/cjs/utils/treeUtils.d.ts

@@ -38,7 +38,7 @@ export declare function hasVisibleChildren(node: TreeNodeType, childrenKey: stri
  * @param b
  */
 export declare function compareArray(a: any[], b: any[]): boolean;
-export declare function getDefaultExpandItemValues(data: ItemDataType[], props: Pick<TreePickerProps, 'defaultExpandAll' | 'valueKey' | 'childrenKey' | 'defaultExpandItemValues'>): any[];
+export declare function getDefaultExpandItemValues(data: ItemDataType[], props: Required<Pick<TreePickerProps, 'defaultExpandAll' | 'valueKey' | 'childrenKey' | 'defaultExpandItemValues'>>): any[];
 /**
  * 获取 expandItemValues 的 value
  * @param props
@@ -70,7 +70,7 @@ export declare function filterNodesOfTree(data: any, check: any): TreeNodeType[]
  * @param isSearching - component is in Searching
  * @returns
  */
-export declare const getFocusableItems: (filteredData: ItemDataType[], props: PartialTreeProps, isSearching?: boolean | undefined) => TreeNodeType[];
+export declare const getFocusableItems: (filteredData: ItemDataType[], props: Required<Pick<PartialTreeProps, 'disabledItemValues' | 'valueKey' | 'childrenKey' | 'expandItemValues'>>, isSearching?: boolean | undefined) => TreeNodeType[];
 /**
  * return all focusable Item and active Element index
  * @param focusItemValue
@@ -235,7 +235,7 @@ export interface FocusToTreeNodeProps {
     valueKey: string;
     activeNode: any;
     virtualized: boolean;
-    container: HTMLDivElement;
+    container: HTMLElement | null;
     list: ListInstance;
     formattedNodes: TreeNodeType[];
 }

package/cjs/utils/useElementResize.d.ts

@@ -5,4 +5,4 @@
  * @param eventTarget The target to listen for events on
  * @param listener An event handler
  */
-export default function useElementResize(eventTarget: Element | (() => Element), listener: ResizeObserverCallback): void;
+export default function useElementResize(eventTarget: Element | null | (() => Element | null), listener: ResizeObserverCallback): void;

package/cjs/utils/useElementResize.js

@@ -19,8 +19,11 @@ function useElementResize(eventTarget, listener) {
   (0, _react.useEffect)(function () {
     if (!resizeObserver.current) {
       var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
-      resizeObserver.current = new _resizeObserver.ResizeObserver(listener);
-      resizeObserver.current.observe(target);
+
+      if (target) {
+        resizeObserver.current = new _resizeObserver.ResizeObserver(listener);
+        resizeObserver.current.observe(target);
+      }
     }
 
     return function () {

package/cjs/utils/useTimeout.d.ts

@@ -6,7 +6,7 @@ export interface UseTimeoutFnReturn {
  * A timer hook
  * @param fn Timer callback function
  * @param ms Milliseconds of the timer
- * @param open Whether to open the timer
+ * @param enabled Whether to open the timer
  */
-declare function useTimeout(fn: (() => void) | undefined, ms?: number, open?: boolean): UseTimeoutFnReturn;
+declare function useTimeout(fn: (() => void) | undefined, ms?: number, enabled?: boolean): UseTimeoutFnReturn;
 export default useTimeout;

package/cjs/utils/useTimeout.js

@@ -9,32 +9,41 @@ var _react = require("react");
  * A timer hook
  * @param fn Timer callback function
  * @param ms Milliseconds of the timer
- * @param open Whether to open the timer
+ * @param enabled Whether to open the timer
  */
-function useTimeout(fn, ms, open) {
+function useTimeout(fn, ms, enabled) {
   if (ms === void 0) {
     ms = 0;
   }
 
-  if (open === void 0) {
-    open = true;
+  if (enabled === void 0) {
+    enabled = true;
   }
 
   var timeout = (0, _react.useRef)();
+  var callback = (0, _react.useRef)(fn);
   var clear = (0, _react.useCallback)(function () {
     timeout.current && clearTimeout(timeout.current);
   }, []);
   var set = (0, _react.useCallback)(function () {
-    if (open) {
+    timeout.current && clearTimeout(timeout.current);
+
+    if (enabled) {
       timeout.current = setTimeout(function () {
-        return fn === null || fn === void 0 ? void 0 : fn();
+        var _callback$current;
+
+        (_callback$current = callback.current) === null || _callback$current === void 0 ? void 0 : _callback$current.call(callback);
       }, ms);
     }
-  }, [ms, fn, open]);
+  }, [ms, enabled]); // update ref when function changes
+
+  (0, _react.useEffect)(function () {
+    callback.current = fn;
+  }, [fn]);
   (0, _react.useEffect)(function () {
     set();
     return clear;
-  }, [fn, ms, open, clear, set]);
+  }, [ms, enabled, set, clear]);
   return {
     clear: clear,
     reset: set

package/dist/rsuite-rtl.css

@@ -3529,6 +3529,8 @@ tbody.rs-anim-collapse.rs-anim-in {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -4159,7 +4161,7 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   position: relative;
   margin: 0;
   padding: 8px 12px;
-  padding-right: 58px;
+  padding-right: 50px;
 }
 .rs-check-tree .rs-check-item .rs-checkbox-checker > label::before {
   content: '';
@@ -4167,17 +4169,17 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   width: 46px;
   height: 100%;
   top: 0;
-  margin-right: -58px;
+  margin-right: -52px;
 }
 .rs-check-tree .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
   right: 20px;
 }
 .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker > label {
-  padding-right: 34px;
+  padding-right: 32px;
 }
 .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker > label::before {
   width: 28px;
-  margin-right: -36px;
+  margin-right: -34px;
 }
 .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
   right: 0;
@@ -8753,18 +8755,23 @@ textarea.rs-picker-search-input {
 }
 .rs-modal-lg {
   width: 968px;
+  max-width: calc(100% - 10px);
 }
 .rs-modal-md {
   width: 800px;
+  max-width: calc(100% - 10px);
 }
 .rs-modal-sm {
   width: 600px;
+  max-width: calc(100% - 10px);
 }
 .rs-modal-xs {
   width: 400px;
+  max-width: calc(100% - 10px);
 }
 .rs-modal-full {
   width: calc(100% - 120px);
+  max-width: calc(100% - 10px);
 }
 .rs-modal-shake .rs-modal-dialog {
   -webkit-animation: 0.3s linear shakeHead;
@@ -12594,14 +12601,14 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   width: 100%;
   white-space: normal;
 }
-.rs-sidenav-nav > .rs-sidenav-item:focus,
-.rs-sidenav-nav > .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-sidenav-nav > .rs-sidenav-item:focus-visible,
+.rs-sidenav-nav > .rs-dropdown .rs-dropdown-toggle:focus-visible {
   outline: 3px solid rgba(52, 152, 255, 0.25);
   outline: 3px solid var(--rs-color-focus-ring);
   outline-offset: -3px;
 }
-.rs-theme-high-contrast .rs-sidenav-nav > .rs-sidenav-item:focus,
-.rs-theme-high-contrast .rs-sidenav-nav > .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-theme-high-contrast .rs-sidenav-nav > .rs-sidenav-item:focus-visible,
+.rs-theme-high-contrast .rs-sidenav-nav > .rs-dropdown .rs-dropdown-toggle:focus-visible {
   outline-offset: 2px;
 }
 .rs-sidenav-nav > .rs-sidenav-item > .rs-icon:not(.rs-dropdown-toggle-caret),
@@ -12823,24 +12830,24 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   height: 50px;
   padding-right: 56px;
 }
-.rs-sidenav-collapse-out .rs-sidenav-item:focus,
-.rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-sidenav-collapse-out .rs-sidenav-item:focus-visible,
+.rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus-visible {
   outline: 3px solid rgba(52, 152, 255, 0.25);
   outline: 3px solid var(--rs-color-focus-ring);
 }
-.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus,
-.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus-visible,
+.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus-visible {
   outline-offset: 2px;
 }
-.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus,
-.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus-visible,
+.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus-visible {
   outline: 3px solid rgba(52, 152, 255, 0.25);
   outline: 3px solid var(--rs-color-focus-ring);
   outline-offset: -3px;
   outline-width: 2px;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus-visible,
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus-visible {
   outline-offset: 2px;
 }
 .rs-sidenav-collapse-out .rs-dropdown-item {