rsuite 5.23.2 → 5.24.0

package/cjs/Sidenav/ExpandedSidenavDropdownMenu.js

@@ -37,7 +37,7 @@ var _Ripple = _interopRequireDefault(require("../Ripple"));
 
 var _Disclosure = _interopRequireDefault(require("../Disclosure/Disclosure"));
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 /**
  * Tree View Node
@@ -99,6 +99,7 @@ var ExpandedSidenavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(functio
       // open,
       disabled: disabled
     }));
+    var iconClasses = merge(className, prefix('toggle-icon'), prefix((open ? 'expand' : 'collapse') + "-icon"));
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: ref
     }, rest, {
@@ -112,7 +113,7 @@ var ExpandedSidenavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(functio
       }, (0, _omit.default)(buttonProps, ['open'])), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
         className: prefix('menu-icon')
       }), title, /*#__PURE__*/_react.default.createElement(Icon, {
-        className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
+        className: iconClasses
       }), /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
     }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, null, function (_ref2) {
       var open = _ref2.open;

package/cjs/Stack/Stack.d.ts

@@ -22,6 +22,10 @@ export interface StackProps extends WithAsProps {
      * Define whether the children in the stack are forced onto one line or can wrap onto multiple lines
      */
     wrap?: boolean;
+    /**
+     * The render mode of the children.
+     */
+    childrenRenderMode?: 'clone' | 'wrap';
 }
 export interface StackComponent extends RsRefForwardingComponent<'div', StackProps> {
     Item: typeof StackItem;

package/cjs/Stack/Stack.js

@@ -26,6 +26,8 @@ var Stack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'stack' : _props$classPrefix,
+      _props$childrenRender = props.childrenRenderMode,
+      childrenRenderMode = _props$childrenRender === void 0 ? 'wrap' : _props$childrenRender,
       className = props.className,
       children = props.children,
       direction = props.direction,
@@ -34,7 +36,7 @@ var Stack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       divider = props.divider,
       style = props.style,
       wrap = props.wrap,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "alignItems", "classPrefix", "className", "children", "direction", "justifyContent", "spacing", "divider", "style", "wrap"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "alignItems", "classPrefix", "childrenRenderMode", "className", "children", "direction", "justifyContent", "spacing", "divider", "style", "wrap"]);
 
   var _useCustom = (0, _utils.useCustom)('Stack'),
       rtl = _useCustom.rtl;
@@ -45,15 +47,15 @@ var Stack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       prefix = _useClassNames.prefix;
 
   var classes = merge(className, withClassPrefix());
-  var isSupportGridGap = (0, _utils.isSupportFlexGap)();
-  var gridGap = Array.isArray(spacing) ? spacing : [spacing, 0];
-  var itemStyles = (_itemStyles = {}, _itemStyles[rtl ? 'marginLeft' : 'marginRight'] = gridGap[0], _itemStyles.marginBottom = gridGap[1], _itemStyles);
+  var isSupportGap = (0, _utils.isSupportFlexGap)();
+  var flexGap = Array.isArray(spacing) ? spacing : [spacing, spacing];
+  var itemStyles = (_itemStyles = {}, _itemStyles[rtl ? 'marginLeft' : 'marginRight'] = flexGap[0], _itemStyles.marginBottom = flexGap[1], _itemStyles);
   var styles = (0, _extends2.default)({
     alignItems: alignItems,
     justifyContent: justifyContent,
     flexDirection: direction,
     flexWrap: wrap ? 'wrap' : undefined,
-    gap: isSupportGridGap ? spacing : undefined
+    gap: isSupportGap ? spacing : undefined
   }, style);
   /*
    * toArray remove undefined, null and boolean
@@ -67,13 +69,13 @@ var Stack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     className: classes,
     style: styles
   }), _react.default.Children.map(filterChildren, function (child, index) {
-    var childNode = child.type !== _StackItem.default ? /*#__PURE__*/_react.default.createElement(_StackItem.default, {
+    var childNode = childrenRenderMode === 'wrap' && child.type !== _StackItem.default ? /*#__PURE__*/_react.default.createElement(_StackItem.default, {
       key: index,
       className: prefix('item'),
-      style: !isSupportGridGap ? itemStyles : undefined
+      style: !isSupportGap ? itemStyles : undefined
     }, child) : /*#__PURE__*/_react.default.cloneElement(child, {
       className: merge(prefix('item'), child.props.className),
-      style: !isSupportGridGap ? (0, _extends2.default)({}, itemStyles, child.props.style) : child.props.style
+      style: !isSupportGap ? (0, _extends2.default)({}, itemStyles, child.props.style) : child.props.style
     });
     return [childNode, index < count - 1 ? divider : null];
   }));

package/cjs/utils/deprecatePropType.d.ts

@@ -1,2 +1,11 @@
 import * as PropTypes from 'prop-types';
+/**
+ * Prints deprecation message when user uses a deprecated prop
+ *
+ * @deprecated Use {@link deprecatePropTypeNew} which prints clearer messages.
+ */
 export default function deprecatePropType<T extends PropTypes.Validator<any>>(propType: T, explanation?: string): typeof propType;
+/**
+ * Prints deprecation message when user uses a deprecated prop
+ */
+export declare function deprecatePropTypeNew<T extends PropTypes.Validator<any>>(propType: T, explanation?: string): typeof propType;

package/cjs/utils/deprecatePropType.js

@@ -4,10 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 exports.__esModule = true;
 exports.default = deprecatePropType;
+exports.deprecatePropTypeNew = deprecatePropTypeNew;
 
 var _warnOnce = _interopRequireDefault(require("./warnOnce"));
 
 // Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js
+
+/**
+ * Prints deprecation message when user uses a deprecated prop
+ *
+ * @deprecated Use {@link deprecatePropTypeNew} which prints clearer messages.
+ */
 function deprecatePropType(propType, explanation) {
   return function validate(props, propName, componentName) {
     // Note ...rest here
@@ -20,6 +27,26 @@ function deprecatePropType(propType, explanation) {
       rest[_key - 3] = arguments[_key];
     }
 
+    return propType.apply(void 0, [props, propName, componentName].concat(rest)); // and here
+  };
+}
+/**
+ * Prints deprecation message when user uses a deprecated prop
+ */
+
+
+function deprecatePropTypeNew(propType, explanation) {
+  return function validate(props, propName, componentName) {
+    // Note ...rest here
+    if (props[propName] != null) {
+      var message = "[rsuite] \"" + propName + "\" property of " + componentName + " component has been deprecated.\n" + explanation;
+      (0, _warnOnce.default)(message);
+    }
+
+    for (var _len2 = arguments.length, rest = new Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
+      rest[_key2 - 3] = arguments[_key2];
+    }
+
     return propType.apply(void 0, [props, propName, componentName].concat(rest)); // and here
   };
 }

package/cjs/utils/treeUtils.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { TreeNodeType, TreeNodesType } from '../CheckTreePicker/utils';
 import { TREE_NODE_DROP_POSITION } from '../utils';
 import { CheckTreePickerProps } from '../CheckTreePicker/CheckTreePicker';
-import { ItemDataType } from '../@types/common';
 import { TreePickerProps } from '../TreePicker/TreePicker';
 import { ListHandle } from '../Windowing';
 declare type PartialTreeProps = Partial<TreePickerProps | CheckTreePickerProps>;
@@ -11,14 +10,14 @@ declare type PartialTreeProps = Partial<TreePickerProps | CheckTreePickerProps>;
  * @param {*} expandItemValues
  * @param {*} parentKeys
  */
-export declare function shouldShowNodeByParentExpanded(expandItemValues?: any[], parentKeys?: any[]): boolean;
+export declare function shouldShowNodeByParentExpanded<T>(expandItemValues?: T[], parentKeys?: T[]): boolean;
 /**
  * flatten tree structure to array
  * @param {*} tree
  * @param {*} childrenKey
  * @param {*} executor
  */
-export declare function flattenTree(tree: any[], childrenKey?: string, executor?: (node: any, index: number) => any): any[];
+export declare function flattenTree<TItem>(tree: TItem[], childrenKey?: string, executor?: (node: any, index: number) => any): TItem[];
 /**
  * get all ancestor nodes of given node
  * @param {*} node
@@ -30,7 +29,7 @@ export declare function getNodeParents(node: any, parentKey?: string, valueKey?:
  * @param node
  * @param valueKey
  */
-export declare function getNodeParentKeys(nodes: TreeNodesType, node: TreeNodeType, valueKey: string): TreeNodeType[];
+export declare function getNodeParentKeys<T>(nodes: TreeNodesType, node: TreeNodeType, valueKey: string): T[];
 export declare function hasVisibleChildren(node: TreeNodeType, childrenKey: string): any;
 /**
  * shallow equal array
@@ -38,7 +37,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: Required<Pick<TreePickerProps, 'defaultExpandAll' | 'valueKey' | 'childrenKey' | 'defaultExpandItemValues'>>): any[];
+export declare function getDefaultExpandItemValues<TItem>(data: TItem[], props: Required<Pick<TreePickerProps, 'defaultExpandAll' | 'valueKey' | 'childrenKey' | 'defaultExpandItemValues'>>): any[];
 /**
  * 获取 expandItemValues 的 value
  * @param props
@@ -61,7 +60,10 @@ export declare function createUpdateTreeDataFunction(params: any, { valueKey, ch
     childrenKey: any;
 }): (tree: any[]) => any[];
 export declare function findNodeOfTree(data: any, check: any): any;
-export declare function filterNodesOfTree(data: any, check: any): TreeNodeType[];
+declare type HasChildren<T extends Record<string, unknown>> = T & {
+    children?: readonly HasChildren<T>[];
+};
+export declare function filterNodesOfTree<TItem extends HasChildren<Record<string, unknown>>>(data: readonly TItem[], check: (item: TItem) => boolean): TItem[];
 /**
  * get all focusable items
  * exclude not visible and disabled node
@@ -70,7 +72,7 @@ export declare function filterNodesOfTree(data: any, check: any): TreeNodeType[]
  * @param isSearching - component is in Searching
  * @returns
  */
-export declare const getFocusableItems: (filteredData: ItemDataType[], props: Required<Pick<PartialTreeProps, 'disabledItemValues' | 'valueKey' | 'childrenKey' | 'expandItemValues'>>, isSearching?: boolean) => TreeNodeType[];
+export declare const getFocusableItems: <TItem extends TreeNodeType>(filteredData: TItem[], props: Required<Pick<PartialTreeProps, 'disabledItemValues' | 'valueKey' | 'childrenKey' | 'expandItemValues'>>, isSearching?: boolean) => TItem[];
 /**
  * return all focusable Item and active Element index
  * @param focusItemValue
@@ -150,7 +152,13 @@ export { getTreeActiveNode };
  * toggle tree node
  * @param param0
  */
-export declare function toggleExpand({ node, isExpand, expandItemValues, valueKey }: any): ItemDataType<string | number>[];
+export declare function toggleExpand<T>({ node, isExpand, expandItemValues, valueKey }: ToggleExpandOptions<T>): T[];
+declare type ToggleExpandOptions<T> = {
+    node: Record<string, unknown>;
+    isExpand: boolean;
+    expandItemValues: T[];
+    valueKey: string;
+};
 export declare function getTreeNodeTitle(label: any): string | undefined;
 /**
  * get all children from flattenNodes object by given parent node
@@ -158,12 +166,12 @@ export declare function getTreeNodeTitle(label: any): string | undefined;
  * @param parent
  */
 export declare function getChildrenByFlattenNodes(nodes: TreeNodesType, parent: TreeNodeType): TreeNodeType[];
-export declare function useTreeDrag(): {
-    dragNode: ItemDataType<string | number> | null;
+export declare function useTreeDrag<T>(): {
+    dragNode: T | null;
     dragOverNodeKey: null;
     dragNodeKeys: (string | number)[];
     dropNodePosition: TREE_NODE_DROP_POSITION | null;
-    setDragNode: (node: ItemDataType | null) => void;
+    setDragNode: (node: T | null) => void;
     setDragOverNodeKey: React.Dispatch<React.SetStateAction<null>>;
     setDragNodeKeys: React.Dispatch<React.SetStateAction<(string | number)[]>>;
     setDropNodePosition: React.Dispatch<React.SetStateAction<TREE_NODE_DROP_POSITION | null>>;
@@ -193,7 +201,7 @@ export declare function useFlattenTreeData({ data, labelKey, valueKey, childrenK
     flattenTreeData: (treeData: TreeNodeType[], parent?: TreeNodeType, layer?: any) => never[] | undefined;
     serializeListOnlyParent: (nodes: TreeNodesType, key: string) => (string | number)[];
     unSerializeList: ({ nodes, key, value, cascade, uncheckableItemValues }: UnSerializeListProps) => void;
-    formatVirtualizedTreeData: (nodes: TreeNodesType, data: any[], expandItemValues: ItemDataType[], options: {
+    formatVirtualizedTreeData: (nodes: TreeNodesType, data: any[], expandItemValues: unknown[], options: {
         cascade?: boolean;
         searchKeyword?: string;
     }) => TreeNodeType[];
@@ -205,28 +213,28 @@ export declare function useTreeNodeRefs(): {
     treeNodesRefs: {};
     saveTreeNodeRef: (ref: React.Ref<any>, refKey?: string) => void;
 };
-interface TreeSearchProps {
+interface TreeSearchProps<T> {
     labelKey: string;
     childrenKey: string;
     searchKeyword?: string;
-    data: ItemDataType[];
+    data: T[];
     searchBy?: (keyword: any, label: any, item: any) => boolean;
-    callback?: (keyword: string, data: ItemDataType[], event: React.SyntheticEvent) => void;
+    callback?: (keyword: string, data: T[], event: React.SyntheticEvent) => void;
 }
 /**
  * A hook that handles tree search filter options
  * @param props
  */
-export declare function useTreeSearch<T extends HTMLElement = HTMLInputElement>(props: TreeSearchProps): {
+export declare function useTreeSearch<T>(props: TreeSearchProps<T>): {
     searchKeywordState: string;
-    filteredData: ItemDataType<string | number>[];
-    setFilteredData: (data: ItemDataType[], searchKeyword: string) => void;
+    filteredData: T[];
+    setFilteredData: (data: T[], searchKeyword: string) => void;
     setSearchKeyword: React.Dispatch<React.SetStateAction<string>>;
-    handleSearch: (searchKeyword: string, event: React.ChangeEvent<T>) => void;
+    handleSearch: (searchKeyword: string, event: React.ChangeEvent) => void;
 };
-export declare function useGetTreeNodeChildren(treeData: ItemDataType[], valueKey: string, childrenKey: string): {
-    data: ItemDataType<string | number>[];
-    setData: React.Dispatch<React.SetStateAction<ItemDataType<string | number>[]>>;
+export declare function useGetTreeNodeChildren<T extends Record<string, unknown>>(treeData: T[], valueKey: string, childrenKey: string): {
+    data: T[];
+    setData: React.Dispatch<React.SetStateAction<T[]>>;
     loadingNodeValues: never[];
     loadChildren: (node: any, getChildren: any) => void;
 };

package/dist/rsuite-rtl.css

@@ -2785,9 +2785,6 @@ tbody.rs-anim-collapse.rs-anim-in {
 .rs-btn-toolbar {
   line-height: 0;
 }
-.rs-btn-toolbar > :not(:first-child):not(.rs-btn-block) {
-  margin-right: 10px;
-}
 .rs-picker-subtle .picker-subtle-toggle {
   position: relative;
   z-index: 5;
@@ -9428,11 +9425,13 @@ textarea.rs-picker-search-input {
   left: 20px;
   top: 20px;
   font-size: 12px;
-  line-height: 1.66666667;
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
+  padding: 0;
+}
+.rs-modal-header .rs-modal-header-close:hover {
   color: #575757;
   color: var(--rs-text-primary);
-  width: 20px;
-  padding: 0 4px;
 }
 .rs-modal-title {
   font-weight: normal;
@@ -13185,13 +13184,15 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   position: absolute;
   left: 20px;
   top: 11px;
-  -webkit-transform: rotate(-90deg);
-          transform: rotate(-90deg);
 }
-.rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-expand .rs-dropdown-item-toggle-icon {
+.rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-expand-icon {
   -webkit-transform: rotate(-270deg);
           transform: rotate(-270deg);
 }
+.rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-collapse-icon {
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+}
 .rs-theme-high-contrast .rs-sidenav-nav .rs-dropdown-toggle,
 .rs-theme-high-contrast .rs-sidenav-nav .rs-dropdown-menu {
   border: none;