rsuite 5.23.1 → 5.23.3

package/ButtonToolbar/styles/index.less

@@ -8,8 +8,4 @@
 .rs-btn-toolbar {
   // Clear whitespace
   line-height: 0;
-
-  > :not(:first-child):not(.rs-btn-block) {
-    margin-left: 10px;
-  }
 }

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [5.23.3](https://github.com/rsuite/rsuite/compare/v5.23.2...v5.23.3) (2022-12-16)
+
+### Bug Fixes
+
+- **Modal:** fix close button alignment and color ([#2973](https://github.com/rsuite/rsuite/issues/2973)) ([b1eb5b4](https://github.com/rsuite/rsuite/commit/b1eb5b406a29788290a704414cc5a19b115690c7))
+
+## [5.23.2](https://github.com/rsuite/rsuite/compare/v5.23.1...v5.23.2) (2022-12-09)
+
+### Bug Fixes
+
+- **Form.HelpText:** change font size to 12px ([#2968](https://github.com/rsuite/rsuite/issues/2968)) ([5c3898e](https://github.com/rsuite/rsuite/commit/5c3898ed2726beb81c09accd4d91963849d0dd31))
+- **Nav.Menu:** fix noCaret has No Effect on a Sub-menu ([#2960](https://github.com/rsuite/rsuite/issues/2960)) ([e51fb6b](https://github.com/rsuite/rsuite/commit/e51fb6b593f0221f2ac3288b55658d540db214f9))
+- **pickers:** the focused item should be within the container's viewport ([#2957](https://github.com/rsuite/rsuite/issues/2957)) ([cab5c63](https://github.com/rsuite/rsuite/commit/cab5c63ffde3963c72363adf00531ef3ab9d9e83))
+- **Tooltip:** should use the default text alignment ([#2965](https://github.com/rsuite/rsuite/issues/2965)) ([3280775](https://github.com/rsuite/rsuite/commit/3280775a699a3683b2c45b543fbd8e6576206142))
+
 ## [5.23.1](https://github.com/rsuite/rsuite/compare/v5.23.0...v5.23.1) (2022-12-02)
 
 ### Bug Fixes

package/FormHelpText/styles/index.less

@@ -10,8 +10,8 @@
   color: var(--rs-text-secondary); // lighten the text some for contrast
   //Sometimes help info is more than one line，so height can't set a fixed value
   min-height: @line-height-computed;
-  line-height: @line-height-base;
-  font-size: @font-size-base;
+  line-height: @line-height-small;
+  font-size: @font-size-small;
 
   &-tooltip {
     display: inline-flex;

package/Modal/styles/index.less

@@ -3,6 +3,7 @@
 
 //
 // Modals
+// Figma: https://www.figma.com/file/uEq9QBplcKUYZrcWWA3RK2/NXT-UI?node-id=0%3A1348&t=H5h3Dd3AnJVgbAbz-4
 // --------------------------------------------------
 
 // Modal background
@@ -100,17 +101,16 @@
   padding-right: @line-height-computed;
 
   .rs-modal-header-close {
-    // button width the same to height
-    @padding-right: 4px;
-
     position: absolute;
     right: @modal-content-padding;
     top: @modal-content-padding;
     font-size: @modal-close-btn-size;
-    line-height: @modal-close-btn-line-height;
     color: @modal-close-btn-color;
-    width: @line-height-computed;
-    padding: 0 @padding-right;
+    padding: 0;
+
+    &:hover {
+      color: @modal-close-btn-hover-color;
+    }
   }
 }
 

package/Tooltip/styles/index.less

@@ -16,7 +16,6 @@
   max-width: @tooltip-max-width;
   padding: 2px 10px;
   color: var(--rs-tooltip-text);
-  text-align: center; // TODO: remove align center?
   background-color: var(--rs-tooltip-bg);
   border-radius: @tooltip-border-radius;
   overflow-wrap: break-word;

package/cjs/AutoComplete/utils.d.ts

@@ -1,3 +1,4 @@
-import { ItemDataType } from '../@types/common';
 export declare function transformData(data: any[]): any[];
-export declare const shouldDisplay: (filterBy: ((value: string, item: ItemDataType) => boolean) | undefined, value: any) => (item: any) => boolean;
+export declare const shouldDisplay: <TItem extends {
+    label: string;
+}>(filterBy: ((value: string, item: TItem) => boolean) | undefined, value: string) => (item: TItem) => boolean;

package/cjs/AutoComplete/utils.js

@@ -37,7 +37,7 @@ var shouldDisplay = function shouldDisplay(filterBy, value) {
       return false;
     }
 
-    var keyword = (value || '').toLocaleLowerCase();
+    var keyword = value.toLocaleLowerCase();
     return ("" + item.label).toLocaleLowerCase().indexOf(keyword) >= 0;
   };
 };

package/cjs/ButtonToolbar/ButtonToolbar.d.ts

@@ -1,4 +1,5 @@
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import Stack from '../Stack';
 export interface ButtonToolbarProps extends WithAsProps {
     /**
      * The ARIA role describing the button toolbar. Generally the default
@@ -7,5 +8,5 @@ export interface ButtonToolbarProps extends WithAsProps {
      */
     role?: string;
 }
-declare const ButtonToolbar: RsRefForwardingComponent<'div', ButtonToolbarProps>;
+declare const ButtonToolbar: RsRefForwardingComponent<typeof Stack, ButtonToolbarProps>;
 export default ButtonToolbar;

package/cjs/ButtonToolbar/ButtonToolbar.js

@@ -15,22 +15,29 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
+var _Stack = _interopRequireDefault(require("../Stack"));
+
 var ButtonToolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var className = props.className,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'btn-toolbar' : _props$classPrefix,
       _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
+      Component = _props$as === void 0 ? _Stack.default : _props$as,
       _props$role = props.role,
       role = _props$role === void 0 ? 'toolbar' : _props$role,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "as", "role"]);
+  var stackProps = Component === _Stack.default ? {
+    wrap: true,
+    spacing: 10,
+    childrenRenderMode: 'clone'
+  } : null;
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge;
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, stackProps, rest, {
     role: role,
     ref: ref,
     className: classes

package/cjs/Cascader/Cascader.js

@@ -454,7 +454,8 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       classPrefix: 'picker-cascader-menu',
       cascadeData: columnData,
       cascadePaths: selectedPaths,
-      activeItemValue: value,
+      activeItemValue: value // FIXME make onSelect generic
+      ,
       onSelect: handleSelect,
       renderMenu: renderMenu,
       renderMenuItem: renderMenuItem

package/cjs/Cascader/utils.d.ts

@@ -1,18 +1,23 @@
 /// <reference types="react" />
-import { CascaderProps } from './Cascader';
-import { ItemDataType } from '../@types/common';
-export declare function getColumnsAndPaths<T extends ItemDataType>(data: T[], value: any, options: any): {
-    columns: ItemDataType<string | number>[][];
+export declare function getColumnsAndPaths<T extends Record<string, unknown>>(data: T[], value: any, options: any): {
+    columns: T[][];
     paths: T[];
 };
-export declare function usePaths(props: CascaderProps): {
+declare type UsePathsParams<T> = {
+    data: T[];
+    valueKey: string;
+    childrenKey: string;
+    value: unknown;
+};
+export declare function usePaths<T extends Record<string, unknown>>(params: UsePathsParams<T>): {
     enforceUpdate: (nextValue: any, isAttachChildren?: boolean) => void;
-    columnData: ItemDataType<string | number>[][];
-    valueToPaths: ItemDataType<string | number>[];
-    selectedPaths: ItemDataType<string | number>[];
-    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
-    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
-    addColumn: (column: ItemDataType[], index: number) => void;
+    columnData: T[][];
+    valueToPaths: T[];
+    selectedPaths: T[];
+    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
+    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<T[]>>;
+    addColumn: (column: T[], index: number) => void;
     romoveColumnByIndex: (index: number) => void;
 };
+export {};

package/cjs/Cascader/utils.js

@@ -86,11 +86,11 @@ function getColumnsAndPaths(data, value, options) {
   };
 }
 
-function usePaths(props) {
-  var data = props.data,
-      valueKey = props.valueKey,
-      childrenKey = props.childrenKey,
-      value = props.value;
+function usePaths(params) {
+  var data = params.data,
+      valueKey = params.valueKey,
+      childrenKey = params.childrenKey,
+      value = params.value;
 
   var _useMemo = (0, _react.useMemo)(function () {
     return getColumnsAndPaths(data, value, {

package/cjs/Menu/Menu.js

@@ -381,6 +381,7 @@ function Menu(_ref) {
   }, [disabled, closeMenu]);
   var rootElementRef = (0, _react.useRef)(null);
   var handleContainerBlur = (0, _react.useCallback)(function (event) {
+    /* istanbul ignore else */
     if ((0, _events.isFocusLeaving)(event)) {
       closeMenu(event, false);
     }

package/cjs/MultiCascader/utils.d.ts

@@ -9,25 +9,28 @@ interface ItemKeys {
     labelKey: string;
     childrenKey: string;
 }
+declare type MayHasParent<T extends Record<string, unknown>> = T & {
+    parent?: MayHasParent<T>;
+};
 /**
  * Get all parents of a node
  * @param node
  */
-export declare const getParents: (node: ItemType) => ItemType[];
+export declare const getParents: <T extends Record<string, unknown>>(node: MayHasParent<T>) => MayHasParent<T>[];
 /**
  * Check if any child nodes are selected.
  * @param node
  * @param value
  * @param itemKeys
  */
-export declare const isSomeChildChecked: (node: ItemDataType, value: ValueType, itemKeys: Omit<ItemKeys, 'labelKey'>) => any;
+export declare const isSomeChildChecked: <T extends Record<string, unknown>>(node: T, value: ValueType, itemKeys: Omit<ItemKeys, 'labelKey'>) => any;
 /**
  * Check if the parent is selected.
  * @param node
  * @param value
  * @param itemKeys
  */
-export declare const isSomeParentChecked: (node: ItemDataType, value: ValueType, itemKeys: Pick<ItemKeys, 'valueKey'>) => any;
+export declare const isSomeParentChecked: <T extends Record<string, unknown>>(node: MayHasParent<T>, value: ValueType, itemKeys: Pick<ItemKeys, 'valueKey'>) => any;
 export declare const getOtherItemValuesByUnselectChild: <T>(itemNode: ItemType, value: any, itemKeys: Omit<ItemKeys, 'labelKey'>) => T[];
 /**
  * Remove the values of all children.
@@ -37,20 +40,20 @@ export declare const removeAllChildrenValue: <T>(value: T[], item: ItemType, ite
  * A hook to flatten tree structure data
  * @param data
  */
-export declare function useFlattenData(data: ItemDataType[], itemKeys: ItemKeys): {
-    addFlattenData: (children: ItemDataType[], parent: ItemDataType) => void;
-    flattenData: ItemDataType<string | number>[];
+export declare function useFlattenData<T>(data: T[], itemKeys: ItemKeys): {
+    addFlattenData: (children: T[], parent: T) => void;
+    flattenData: T[];
 };
 /**
  * A hook for column data
  * @param flattenData
  */
-export declare function useColumnData(flattenData: ItemType[]): {
-    columnData: ItemDataType<string | number>[][];
-    addColumn: (column: ItemDataType[], index: number) => void;
+export declare function useColumnData<T extends MayHasParent<Record<string, unknown>>>(flattenData: T[]): {
+    columnData: T[][];
+    addColumn: (column: T[], index: number) => void;
     romoveColumnByIndex: (index: number) => void;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
-    enforceUpdateColumnData: (nextData: ItemDataType[]) => void;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<T[][]>>;
+    enforceUpdateColumnData: (nextData: T[]) => void;
 };
 /**
  * A hook that converts the value into a cascading value

package/cjs/Nav/NavDropdownMenu.d.ts

@@ -17,6 +17,8 @@ export interface NavDropdownMenuProps<T = any> extends StandardProps {
      * @default 'end'
      */
     openDirection?: 'start' | 'end';
+    /** No caret variation */
+    noCaret?: boolean;
     /**
      *  Only used for setting the default expand state when it's a submenu.
      */

package/cjs/Nav/NavDropdownMenu.js

@@ -55,7 +55,8 @@ var NavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, re
       children = props.children,
       _props$openDirection = props.openDirection,
       openDirection = _props$openDirection === void 0 ? 'end' : _props$openDirection,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onToggle", "eventKey", "title", "classPrefix", "children", "openDirection"]);
+      noCaret = props.noCaret,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onToggle", "eventKey", "title", "classPrefix", "children", "openDirection", "noCaret"]);
 
   var _useCustom = (0, _useCustom2.default)('DropdownMenu'),
       rtl = _useCustom.rtl;
@@ -110,7 +111,7 @@ var NavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, re
           "data-event-key-type": typeof eventKey
         }, menuitem, (0, _omit2.default)(menuButtonProps, ['role'])), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
           className: prefix('menu-icon')
-        }), title, /*#__PURE__*/_react.default.createElement(Icon, {
+        }), title, !noCaret && /*#__PURE__*/_react.default.createElement(Icon, {
           className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
         }));
       });
@@ -151,6 +152,7 @@ NavDropdownMenu.propTypes = {
   classPrefix: _propTypes.default.string,
   pullLeft: (0, _deprecatePropType.default)(_propTypes.default.bool, 'Use openDirection="start" instead.'),
   openDirection: _propTypes.default.oneOf(['start', 'end']),
+  noCaret: _propTypes.default.bool,
   title: _propTypes.default.node,
   open: _propTypes.default.bool,
   eventKey: _propTypes.default.any,

package/cjs/Picker/utils.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { OverlayTriggerHandle } from './PickerToggleTrigger';
-import { TypeAttributes, ItemDataType } from '../@types/common';
+import { TypeAttributes } from '../@types/common';
 import type { ListHandle } from '../Windowing';
 export interface NodeKeys {
     valueKey: string;
@@ -86,24 +86,25 @@ export interface ToggleKeyDownEventProps {
  * @param props
  */
 export declare const useToggleKeyDownEvent: (props: ToggleKeyDownEventProps) => (event: React.KeyboardEvent) => void;
-export interface SearchProps {
+export interface SearchProps<TItem extends Record<string, unknown>, TLabel> {
     labelKey: string;
-    data: ItemDataType[];
-    searchBy?: (keyword: any, label: any, item: any) => boolean;
-    callback?: (keyword: string, data: ItemDataType[], event: React.SyntheticEvent) => void;
+    data: TItem[];
+    searchBy?: (keyword: string, label: TLabel, item: TItem) => boolean;
+    callback?: (keyword: string, data: TItem[], event: React.SyntheticEvent) => void;
 }
+declare type UseSearchResult<TItem extends Record<string, unknown>> = {
+    searchKeyword: string;
+    filteredData: TItem[];
+    updateFilteredData: (nextData: TItem[]) => void;
+    setSearchKeyword: (value: string) => void;
+    checkShouldDisplay: (item: TItem, keyword?: string) => boolean;
+    handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
+};
 /**
  * A hook that handles search filter options
  * @param props
  */
-export declare function useSearch(props: SearchProps): {
-    searchKeyword: string;
-    filteredData: import("../CheckTreePicker/utils").TreeNodeType[];
-    updateFilteredData: (nextData: ItemDataType[]) => void;
-    setSearchKeyword: React.Dispatch<React.SetStateAction<string>>;
-    checkShouldDisplay: (item: ItemDataType, keyword?: string) => boolean;
-    handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
-};
+export declare function useSearch<TItem extends Record<string, unknown>, TLabel>(props: SearchProps<TItem, TLabel>): UseSearchResult<TItem>;
 export interface PickerDependentParameters {
     triggerRef?: React.RefObject<OverlayTriggerHandle>;
     rootRef?: React.RefObject<HTMLElement>;
@@ -116,3 +117,4 @@ export interface PickerDependentParameters {
  * A hook of the exposed method of Picker
  */
 export declare function usePublicMethods(ref: any, parmas: PickerDependentParameters): void;
+export {};

package/cjs/Picker/utils.js

@@ -33,6 +33,8 @@ var _treeUtils = require("../utils/treeUtils");
 
 var _utils = require("../utils");
 
+var _domLib = require("dom-lib");
+
 var defaultNodeKeys = {
   valueKey: 'value',
   childrenKey: 'children'
@@ -162,11 +164,51 @@ function onMenuKeyDown(event, events) {
   }
 }
 
+/**
+ * Checks if the element has a vertical scrollbar.
+ */
+function hasVerticalScroll(element) {
+  var scrollHeight = element.scrollHeight,
+      clientHeight = element.clientHeight;
+  return scrollHeight > clientHeight;
+}
+/**
+ * Checks if the element is within the visible area of the container
+ */
+
+
+function isVisible(element, container, direction) {
+  if (!hasVerticalScroll(container)) {
+    return true;
+  }
+
+  var _element$getBoundingC = element.getBoundingClientRect(),
+      top = _element$getBoundingC.top,
+      bottom = _element$getBoundingC.bottom,
+      height = _element$getBoundingC.height;
+
+  var _container$getBoundin = container.getBoundingClientRect(),
+      containerTop = _container$getBoundin.top,
+      containerBottom = _container$getBoundin.bottom;
+
+  if (direction === 'top') {
+    return top + height > containerTop;
+  }
+
+  return bottom - height < containerBottom;
+}
+
+function scrollTo(container, direction, step) {
+  var scrollTop = container.scrollTop;
+  container.scrollTop = direction === 'top' ? scrollTop - step : scrollTop + step;
+}
 /**
  * A hook that manages the focus state of the option.
  * @param defaultFocusItemValue
  * @param props
  */
+
+
 var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props) {
   var _props$valueKey = props.valueKey,
       valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
@@ -190,11 +232,23 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
   var _useState3 = (0, _react.useState)([]),
       keys = _useState3[0],
       setKeys = _useState3[1];
+
+  var getScrollContainer = (0, _react.useCallback)(function () {
+    var menu = (0, _isFunction.default)(target) ? target() : target; // For Cascader and MutiCascader
+
+    var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + layer + "\"]");
+
+    if (subMenu) {
+      return subMenu;
+    } // For SelectPicker、CheckPicker、Autocomplete、InputPicker、TagPicker
+
+
+    return menu === null || menu === void 0 ? void 0 : menu.querySelector('[role="listbox"]');
+  }, [layer, target]);
   /**
    * Get the elements visible in all options.
    */
 
-
   var getFocusableMenuItems = (0, _react.useCallback)(function () {
     if (!target) {
       return [];
@@ -251,28 +305,50 @@ var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue, props)
 
     callback(items, -1);
   }, [focusItemValue, getFocusableMenuItems, valueKey]);
+  var scrollListItem = (0, _react.useCallback)(function (direction, itemValue, willOverflow) {
+    var container = getScrollContainer();
+    var item = container === null || container === void 0 ? void 0 : container.querySelector("[data-key=\"" + itemValue + "\"]");
+
+    if (willOverflow && container) {
+      var scrollHeight = container.scrollHeight,
+          clientHeight = container.clientHeight;
+      container.scrollTop = direction === 'top' ? scrollHeight - clientHeight : 0;
+      return;
+    }
+
+    if (item && container) {
+      if (!isVisible(item, container, direction)) {
+        var height = (0, _domLib.getHeight)(item);
+        scrollTo(container, direction, height);
+      }
+    }
+  }, [getScrollContainer]);
   var focusNextMenuItem = (0, _react.useCallback)(function (event) {
     findFocusItemIndex(function (items, index) {
-      var nextIndex = index + 2 > items.length ? 0 : index + 1;
+      var willOverflow = index + 2 > items.length;
+      var nextIndex = willOverflow ? 0 : index + 1;
       var focusItem = items[nextIndex];
 
       if (!(0, _isUndefined.default)(focusItem)) {
         setFocusItemValue(focusItem[valueKey]);
         callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);
+        scrollListItem('bottom', focusItem[valueKey], willOverflow);
       }
     });
-  }, [callback, findFocusItemIndex, valueKey]);
+  }, [callback, findFocusItemIndex, scrollListItem, valueKey]);
   var focusPrevMenuItem = (0, _react.useCallback)(function (event) {
     findFocusItemIndex(function (items, index) {
-      var nextIndex = index === 0 ? items.length - 1 : index - 1;
+      var willOverflow = index === 0;
+      var nextIndex = willOverflow ? items.length - 1 : index - 1;
       var focusItem = items[nextIndex];
 
       if (!(0, _isUndefined.default)(focusItem)) {
         setFocusItemValue(focusItem[valueKey]);
         callback === null || callback === void 0 ? void 0 : callback(focusItem[valueKey], event);
+        scrollListItem('top', focusItem[valueKey], willOverflow);
       }
     });
-  }, [callback, findFocusItemIndex, valueKey]);
+  }, [callback, findFocusItemIndex, scrollListItem, valueKey]);
   var getSubMenuKeys = (0, _react.useCallback)(function (nextLayer) {
     var menu = (0, _isFunction.default)(target) ? target() : target;
     var subMenu = menu === null || menu === void 0 ? void 0 : menu.querySelector("[data-layer=\"" + nextLayer + "\"]");

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