rsuite 5.3.0 → 5.4.3

package/esm/Steps/StepItem.js

@@ -12,7 +12,7 @@ var STEP_STATUS_ICON = {
   error: /*#__PURE__*/React.createElement(Close, null)
 };
 var StepItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _withClassPrefix;
+  var _withClassPrefix, _STEP_STATUS_ICON$sta;
 
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -43,7 +43,7 @@ var StepItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var iconNode = /*#__PURE__*/React.createElement("span", {
     className: prefix('icon', "icon-" + status)
-  }, status ? STEP_STATUS_ICON[status] : stepNumber);
+  }, status ? (_STEP_STATUS_ICON$sta = STEP_STATUS_ICON[status]) !== null && _STEP_STATUS_ICON$sta !== void 0 ? _STEP_STATUS_ICON$sta : stepNumber : stepNumber);
 
   if (icon) {
     iconNode = /*#__PURE__*/React.createElement("span", {

package/esm/Toggle/Toggle.js

@@ -47,14 +47,14 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var inner = checked ? checkedChildren : unCheckedChildren;
   var label = checked ? locale.on : locale.off;
   var handleInputChange = useCallback(function (e) {
-    if (disabled || readOnly) {
+    if (disabled || readOnly || loading) {
       return;
     }
 
     var checked = e.target.checked;
     setChecked(checked);
     onChange === null || onChange === void 0 ? void 0 : onChange(checked, e);
-  }, [disabled, readOnly, setChecked, onChange]);
+  }, [disabled, readOnly, loading, setChecked, onChange]);
 
   if (plaintext) {
     return /*#__PURE__*/React.createElement(Plaintext, null, inner || label);
@@ -66,7 +66,8 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, rest), /*#__PURE__*/React.createElement("input", {
     ref: inputRef,
     type: "checkbox",
-    checked: checked,
+    checked: checkedProp,
+    defaultChecked: defaultChecked,
     disabled: disabled,
     readOnly: readOnly,
     onChange: handleInputChange,

package/esm/Tree/Tree.d.ts

@@ -36,7 +36,6 @@ export interface TreeDragProps<ItemDataType = Record<string, any>> {
     onDragEnd?: (nodeData: ItemDataType, e: React.DragEvent) => void;
     /** Called when node drop */
     onDrop?: (dropData: DropData<ItemDataType>, e: React.DragEvent) => void;
-    renderDragNode?: (dragNode: ItemDataType) => React.ReactNode;
 }
 export interface TreeBaseProps<ValueType = string | number, ItemDataType = Record<string, any>> extends StandardProps {
     /** The height of Dropdown */

package/esm/Tree/Tree.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useRef } from 'react';
+import React, { useMemo } from 'react';
 import TreePicker from '../TreePicker';
 import TreeContext from './TreeContext';
 
@@ -15,12 +15,13 @@ export var TREE_NODE_DROP_POSITION;
 })(TREE_NODE_DROP_POSITION || (TREE_NODE_DROP_POSITION = {}));
 
 var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var dragNodeRef = useRef();
+  var contextValue = useMemo(function () {
+    return {
+      inline: true
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(TreeContext.Provider, {
-    value: {
-      inline: true,
-      dragNodeRef: dragNodeRef
-    }
+    value: contextValue
   }, /*#__PURE__*/React.createElement(TreePicker, _extends({
     ref: ref
   }, props)));

package/esm/Tree/TreeContext.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 export interface TreeContextProps {
     inline?: boolean;
-    dragNodeRef?: React.MutableRefObject<any>;
 }
 declare const TreeContext: React.Context<TreeContextProps>;
 export default TreeContext;

package/esm/TreePicker/TreeNode.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { forwardRef, useCallback, useContext } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import hasClass from 'dom-lib/hasClass';
 import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
 import Spinner from '@rsuite/icons/legacy/Spinner';
-import TreeContext from '../Tree/TreeContext';
 import reactToString from '../utils/reactToString';
 import { useClassNames } from '../utils';
 import { getTreeNodeIndent } from '../utils/treeUtils';
@@ -50,9 +49,6 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       merge = _useClassNames.merge,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  var _useContext = useContext(TreeContext),
-      dragNodeRef = _useContext.dragNodeRef;
-
   var getTitle = useCallback(function () {
     if (typeof label === 'string') {
       return label;
@@ -82,16 +78,8 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, event);
   }, [nodeData, disabled, prefix, onSelect]);
   var handleDragStart = useCallback(function (event) {
-    var dragNode = dragNodeRef === null || dragNodeRef === void 0 ? void 0 : dragNodeRef.current;
-
-    if (dragNode) {
-      var _event$dataTransfer;
-
-      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragNode, 0, 0);
-    }
-
     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
-  }, [dragNodeRef, nodeData, onDragStart]);
+  }, [nodeData, onDragStart]);
   var handleDragEnter = useCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();

package/esm/TreePicker/TreePicker.js

@@ -87,8 +87,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderExtraFooter = props.renderExtraFooter,
       renderMenu = props.renderMenu,
       renderValue = props.renderValue,
-      renderDragNode = props.renderDragNode,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "className", "disabled", "placement", "cleanable", "menuStyle", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onOpen", "onSearch", "onSelect", "onChange", "onEntered", "onClose", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue", "renderDragNode"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "className", "disabled", "placement", "cleanable", "menuStyle", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onOpen", "onSearch", "onSelect", "onChange", "onEntered", "onClose", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue"]);
 
   var triggerRef = useRef(null);
   var targetRef = useRef(null);
@@ -102,8 +101,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       locale = _useCustom.locale;
 
   var _useContext = useContext(TreeContext),
-      inline = _useContext.inline,
-      dragNodeRef = _useContext.dragNodeRef;
+      inline = _useContext.inline;
 
   var _useControlled = useControlled(controlledValue, defaultValue),
       value = _useControlled[0],
@@ -225,14 +223,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useEffect(function () {
     setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');
   }, [searchKeyword, setSearchKeyword]);
-  useEffect(function () {
-    if (dragNodeRef) {
-      var _treeViewRef$current;
-
-      dragNodeRef.current = (_treeViewRef$current = treeViewRef.current) === null || _treeViewRef$current === void 0 ? void 0 : _treeViewRef$current.querySelector("." + treePrefix('drag-node-mover'));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
   var getDropData = useCallback(function (nodeData) {
     var options = {
       valueKey: valueKey,
@@ -610,22 +600,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   };
 
-  var renderDefaultDragNode = function renderDefaultDragNode() {
-    if (draggable && !_isNil(dragNode)) {
-      var dragNodeContent = dragNode === null || dragNode === void 0 ? void 0 : dragNode[labelKey];
-
-      if (_isFunction(renderDragNode)) {
-        dragNodeContent = renderDragNode(dragNode);
-      }
-
-      return /*#__PURE__*/React.createElement("span", {
-        className: treePrefix('drag-node-mover')
-      }, dragNodeContent);
-    }
-
-    return null;
-  };
-
   var renderTree = function renderTree() {
     var _withTreeClassPrefix;
 
@@ -661,7 +635,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         rowRenderer: renderVirtualListNode(formattedNodes),
         scrollToAlignment: "center"
       }, listProps));
-    }) : formattedNodes), renderDefaultDragNode());
+    }) : formattedNodes));
   };
 
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {

package/esm/index.d.ts

@@ -24,8 +24,6 @@ export { default as Loader } from './Loader';
 export type { LoaderProps } from './Loader';
 export { default as SafeAnchor } from './SafeAnchor';
 export type { SafeAnchorProps } from './SafeAnchor';
-export { default as Divider } from './Divider';
-export type { DividerProps } from './Divider';
 export { default as Placeholder } from './Placeholder';
 export type { PlaceholderGraphProps, PlaceholderGridProps, PlaceholderParagraphProps } from './Placeholder';
 export { default as Badge } from './Badge';
@@ -144,6 +142,10 @@ export { default as Sidebar } from './Sidebar';
 export type { SidebarProps } from './Sidebar';
 export { default as Footer } from './Footer';
 export type { FooterProps } from './Footer';
+export { default as Divider } from './Divider';
+export type { DividerProps } from './Divider';
+export { default as Stack } from './Stack';
+export type { StackProps } from './Stack';
 export { default as Schema } from './Schema';
 export { default as Animation } from './Animation';
 export type { TransitionProps, SlideProps, CollapseProps, FadeProps, BounceProps } from './Animation';

package/esm/index.js

@@ -12,7 +12,6 @@ export { default as Message } from './Message';
 export { default as Drawer } from './Drawer';
 export { default as Loader } from './Loader';
 export { default as SafeAnchor } from './SafeAnchor';
-export { default as Divider } from './Divider';
 export { default as Placeholder } from './Placeholder';
 export { default as Badge } from './Badge';
 export { default as Avatar } from './Avatar';
@@ -76,6 +75,8 @@ export { default as Content } from './Content';
 export { default as Header } from './Header';
 export { default as Sidebar } from './Sidebar';
 export { default as Footer } from './Footer';
+export { default as Divider } from './Divider';
+export { default as Stack } from './Stack';
 // Utils
 export { default as Schema } from './Schema';
 export { default as Animation } from './Animation';

package/esm/utils/index.d.ts

@@ -40,3 +40,4 @@ 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';

package/esm/utils/index.js

@@ -42,4 +42,5 @@ export { default as useEventCallback } from './useEventCallback';
 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 useIsMounted } from './useIsMounted';
+export { default as useMount } from './useMount';

package/esm/utils/treeUtils.d.ts

@@ -150,7 +150,7 @@ export { getTreeActiveNode };
  * toggle tree node
  * @param param0
  */
-export declare function toggleExpand({ node, isExpand, expandItemValues, valueKey }: any): ItemDataType[];
+export declare function toggleExpand({ node, isExpand, expandItemValues, valueKey }: any): ItemDataType<string | number>[];
 export declare function getTreeNodeTitle(label: any): string | undefined;
 /**
  * get all children from flattenNodes object by given parent node
@@ -159,7 +159,7 @@ export declare function getTreeNodeTitle(label: any): string | undefined;
  */
 export declare function getChildrenByFlattenNodes(nodes: TreeNodesType, parent: TreeNodeType): TreeNodeType[];
 export declare function useTreeDrag(): {
-    dragNode: ItemDataType | null;
+    dragNode: ItemDataType<string | number> | null;
     dragOverNodeKey: null;
     dragNodeKeys: (string | number)[];
     dropNodePosition: TREE_NODE_DROP_POSITION | null;
@@ -219,14 +219,14 @@ interface TreeSearchProps {
  */
 export declare function useTreeSearch<T extends HTMLElement = HTMLInputElement>(props: TreeSearchProps): {
     searchKeywordState: string;
-    filteredData: ItemDataType[];
+    filteredData: ItemDataType<string | number>[];
     setFilteredData: (data: ItemDataType[], searchKeyword: string) => void;
     setSearchKeyword: React.Dispatch<React.SetStateAction<string>>;
     handleSearch: (searchKeyword: string, event: React.ChangeEvent<T>) => void;
 };
 export declare function useGetTreeNodeChildren(treeData: ItemDataType[], valueKey: string, childrenKey: string): {
-    data: ItemDataType[];
-    setData: React.Dispatch<React.SetStateAction<ItemDataType[]>>;
+    data: ItemDataType<string | number>[];
+    setData: React.Dispatch<React.SetStateAction<ItemDataType<string | number>[]>>;
     loadingNodeValues: never[];
     loadChildren: (node: any, getChildren: any) => void;
 };

package/esm/utils/useMount.d.ts

@@ -0,0 +1,2 @@
+declare const useMount: (callback: () => void) => void;
+export default useMount;

package/esm/utils/useMount.js

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react';
+
+var useMount = function useMount(callback) {
+  var mountRef = useRef(callback);
+  mountRef.current = callback;
+  useEffect(function () {
+    var _mountRef$current;
+
+    (_mountRef$current = mountRef.current) === null || _mountRef$current === void 0 ? void 0 : _mountRef$current.call(mountRef);
+  }, []);
+};
+
+export default useMount;

package/esm/utils/usePortal.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface PortalProps {
     id?: string;
-    container?: HTMLElement | (() => HTMLElement);
+    container?: HTMLElement | (() => HTMLElement | null) | null;
 }
 declare function usePortal(props?: PortalProps): {
     target: HTMLElement | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.3.0",
+  "version": "5.4.3",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -37,7 +37,7 @@
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react-virtualized": "^9.22.3",
-    "rsuite-table": "^5.2.2",
+    "rsuite-table": "^5.3.0",
     "schema-typed": "^2.0.2"
   },
   "peerDependencies": {

package/styles/color-modes/dark.less

@@ -27,6 +27,7 @@
   --rs-bg-active: @H700;
   --rs-bg-backdrop: fade(@B900, 80%);
   --rs-state-hover-bg: @B600;
+  --rs-color-focus-ring: 0 0 0 3px fade(@H500, 25%);
   --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
   --rs-state-focus-outline: 3px solid fade(@H500, 25%);
   --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);

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

@@ -27,6 +27,7 @@
   --rs-bg-active: @H500;
   --rs-bg-backdrop: fade(@B900, 80%);
   --rs-state-hover-bg: @B600;
+  --rs-color-focus-ring: @B000;
   --rs-state-focus-shadow: 0 0 0 3px @B900, 0 0 0 5px @B000;
   --rs-state-focus-shadow-slim: 0 0 0 2px @B000;
   --rs-state-focus-outline: 3px solid fade(@H500, 25%);

package/styles/color-modes/light.less

@@ -34,6 +34,7 @@
   --rs-bg-active: @H500;
   --rs-bg-backdrop: fade(@B900, 30%);
   --rs-state-hover-bg: @H050;
+  --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%);
   --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);

package/styles/index.less

@@ -75,3 +75,4 @@
 @import '../Rate/styles/index';
 @import '../toaster/styles/index';
 @import '../CloseButton/styles/index';
+@import '../Stack/styles/index';

package/styles/mixins/utilities.less

@@ -122,26 +122,38 @@
 
 // Useful when adding focus ring to an element
 .with-focus-ring() {
-  &:focus {
+  &:focus-visible {
     .focus-ring();
   }
 }
 
 // Useful when appending the ring into an existing :focus rule
 .focus-ring() {
-  box-shadow: var(--rs-state-focus-shadow);
+  outline: 3px solid var(--rs-color-focus-ring);
+  // box-shadow: var(--rs-state-focus-shadow);
+
+  .high-contrast-mode({
+    outline-offset: 2px;
+  });
 }
 
 .focus-ring(slim) {
-  box-shadow: var(--rs-state-focus-shadow-slim);
+  .focus-ring();
+
+  outline-width: 2px;
+  outline-offset: 0;
 }
 
 .focus-ring(inset) {
-  box-shadow: inset var(--rs-state-focus-shadow);
+  .focus-ring();
+
+  outline-offset: -3px;
 }
 
 .focus-ring(slim-inset) {
-  box-shadow: inset var(--rs-state-focus-shadow-slim);
+  .focus-ring(inset);
+
+  outline-width: 2px;
 }
 
 .focus-ring(outline) {