rsuite 5.3.0 → 5.4.0

package/esm/SelectPicker/SelectPicker.js

@@ -78,9 +78,9 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useCustom = useCustom('Picker', overrideLocale),
       locale = _useCustom.locale;
 
-  var _useControlled = useControlled(valueProp, defaultValue),
-      value = _useControlled[0],
-      setValue = _useControlled[1]; // Used to hover the focus item  when trigger `onKeydown`
+  var _ref = useControlled(valueProp, defaultValue),
+      value = _ref[0],
+      setValue = _ref[1]; // Used to hover the focus item  when trigger `onKeydown`
 
 
   var _useFocusItemValue = useFocusItemValue(value, {
@@ -309,7 +309,7 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled: disabled,
     cleanable: cleanable && !disabled,
     hasValue: hasValue,
-    inputValue: value,
+    inputValue: value !== null && value !== void 0 ? value : '',
     active: active,
     placement: placement
   }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));

package/esm/SelectPicker/index.d.ts

@@ -1,3 +1,3 @@
 import SelectPicker from './SelectPicker';
-export type { SelectProps, SelectPickerProps } from './SelectPicker';
+export type { SelectProps, MultipleSelectProps, SelectPickerProps } from './SelectPicker';
 export default SelectPicker;

package/esm/SelectPicker/test/SelectPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/SelectPicker/test/SelectPicker.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { expectType } from 'ts-expect';
+import SelectPicker from '../SelectPicker'; // Infer value and onChange types from data
+
+var numberValuedData = [{
+  label: 'One',
+  value: 1
+}];
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: numberValuedData,
+  value: 1
+}); // @ts-expect-error should not accept string value
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: numberValuedData,
+  value: "1"
+});
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: numberValuedData,
+  onChange: function onChange(newValue) {
+    expectType(newValue);
+  }
+});
+var stringValuedData = [{
+  label: 'One',
+  value: 'One'
+}];
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: stringValuedData,
+  value: "1"
+}); // @ts-expect-error should not accept number value
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: stringValuedData,
+  value: 1
+});
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: stringValuedData,
+  onChange: function onChange(newValue) {
+    expectType(newValue);
+  }
+});

package/esm/Stack/Stack.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { WithAsProps } from '../@types/common';
+export interface StackProps extends WithAsProps {
+    /**
+     * The direction of the children in the stack.
+     */
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    /**
+     * Define the alignment of the children in the stack on the cross axis
+     */
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    /**
+     *  Define the alignment of the children in the stack on the inline axis
+     */
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+    /** Define the spacing between immediate children */
+    spacing?: number | string | (number | string)[];
+    /** Add an element between each child */
+    divider?: React.ReactNode;
+    /**
+     * Define whether the children in the stack are forced onto one line or can wrap onto multiple lines
+     */
+    wrap?: boolean;
+}
+declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+export default Stack;

package/esm/Stack/Stack.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useClassNames, useCustom, isIE } from '../utils';
+var Stack = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _itemStyles;
+
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      _props$alignItems = props.alignItems,
+      alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'stack' : _props$classPrefix,
+      className = props.className,
+      children = props.children,
+      direction = props.direction,
+      justifyContent = props.justifyContent,
+      spacing = props.spacing,
+      divider = props.divider,
+      style = props.style,
+      wrap = props.wrap,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "alignItems", "classPrefix", "className", "children", "direction", "justifyContent", "spacing", "divider", "style", "wrap"]);
+
+  var _useCustom = useCustom('Stack'),
+      rtl = _useCustom.rtl;
+
+  var _useClassNames = useClassNames(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      merge = _useClassNames.merge,
+      prefix = _useClassNames.prefix;
+
+  var classes = merge(className, withClassPrefix());
+  var isSupportGridGap = !isIE();
+  var count = React.Children.count(children);
+  var gridGap = Array.isArray(spacing) ? spacing : [spacing, 0];
+  var itemStyles = (_itemStyles = {}, _itemStyles[rtl ? 'marginLeft' : 'marginRight'] = gridGap[0], _itemStyles.marginBottom = gridGap[1], _itemStyles);
+
+  var styles = _extends({
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    flexDirection: direction,
+    flexWrap: wrap ? 'wrap' : undefined,
+    gap: isSupportGridGap ? spacing : undefined
+  }, style);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    ref: ref,
+    className: classes,
+    style: styles
+  }), React.Children.map(children, function (child, index) {
+    var childNode = /*#__PURE__*/React.createElement("div", {
+      className: prefix('item'),
+      style: !isSupportGridGap ? itemStyles : undefined
+    }, child);
+    return [childNode, index < count - 1 ? divider : null];
+  }));
+});
+Stack.displayName = 'Stack';
+Stack.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  classPrefix: PropTypes.string,
+  direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
+  alignItems: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),
+  justifyContent: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
+  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
+  divider: PropTypes.node,
+  wrap: PropTypes.bool
+};
+export default Stack;

package/esm/Stack/index.d.ts

@@ -0,0 +1,3 @@
+import Stack from './Stack';
+export type { StackProps } from './Stack';
+export default Stack;

package/esm/Stack/index.js

@@ -0,0 +1,2 @@
+import Stack from './Stack';
+export default Stack;

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);

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 from 'react';
 import TreePicker from '../TreePicker';
 import TreeContext from './TreeContext';
 
@@ -15,11 +15,9 @@ 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();
   return /*#__PURE__*/React.createElement(TreeContext.Provider, {
     value: {
-      inline: true,
-      dragNodeRef: dragNodeRef
+      inline: true
     }
   }, /*#__PURE__*/React.createElement(TreePicker, _extends({
     ref: ref

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/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/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.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/index.less

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