rsuite 5.52.0 → 5.53.1

package/cjs/Tabs/Tabs.js

@@ -0,0 +1,221 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("../utils");
+var _Nav = _interopRequireDefault(require("../Nav"));
+var _Tab = _interopRequireDefault(require("./Tab"));
+var _TabPanel = _interopRequireDefault(require("./TabPanel"));
+var _templateObject;
+function getFocusableTabs(tablist) {
+  var tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role=tab]');
+  return Array.from(tabs).filter(function (tab) {
+    return !(tab.getAttribute('aria-disabled') === 'true');
+  });
+}
+function getFocusedTab(tablist) {
+  var tabs = getFocusableTabs(tablist);
+  return tabs.find(function (tab) {
+    return tab.getAttribute('aria-selected');
+  });
+}
+function nextItem(tablist) {
+  if (!tablist) {
+    return null;
+  }
+  var item = getFocusedTab(tablist);
+  var items = getFocusableTabs(tablist);
+  if (!item) {
+    return items[0];
+  }
+  var nextItem = items[items.indexOf(item) + 1];
+  if (!nextItem || nextItem.getAttribute('role') !== 'tab') {
+    return items[0];
+  }
+  return nextItem;
+}
+function previousItem(tablist) {
+  if (!tablist) {
+    return null;
+  }
+  var item = getFocusedTab(tablist);
+  var items = getFocusableTabs(tablist);
+  if (!item) {
+    return items[items.length - 1];
+  }
+  var previousItem = items[items.indexOf(item) - 1];
+  if (!previousItem || previousItem.getAttribute('role') !== 'tab') {
+    return items[items.length - 1];
+  }
+  return previousItem;
+}
+var renderPanels = function renderPanels(children, tabProps) {
+  var id = tabProps.id,
+    activeKey = tabProps.activeKey;
+  return _utils.ReactChildren.map(children, function (child) {
+    var _child$props = child.props,
+      eventKey = _child$props.eventKey,
+      children = _child$props.children;
+    var selected = eventKey === activeKey;
+    return /*#__PURE__*/_react.default.createElement(_TabPanel.default, {
+      "aria-labelledby": id + "-" + eventKey,
+      "aria-hidden": !selected,
+      id: id + "-panel-" + eventKey,
+      active: selected
+    }, children);
+  });
+};
+var renderTabs = function renderTabs(children, tabPanelProps) {
+  var id = tabPanelProps.id,
+    activeKey = tabPanelProps.activeKey;
+  return _utils.ReactChildren.map(children, function (child) {
+    var _child$props2 = child.props,
+      eventKey = _child$props2.eventKey,
+      title = _child$props2.title,
+      disabled = _child$props2.disabled,
+      icon = _child$props2.icon;
+    var selected = eventKey === activeKey;
+    return /*#__PURE__*/_react.default.createElement(_Nav.default.Item, {
+      role: "tab",
+      as: "button",
+      type: "button",
+      "aria-selected": selected,
+      "aria-controls": id + "-panel-" + eventKey,
+      "aria-disabled": disabled,
+      "data-event-key": eventKey,
+      disabled: disabled,
+      icon: icon,
+      id: id + "-" + eventKey,
+      tabIndex: selected ? undefined : -1,
+      eventKey: eventKey
+    }, title);
+  });
+};
+
+/**
+ * Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
+ *
+ * @version 5.53.0
+ * @see https://rsuitejs.com/components/tabs
+ */
+var Tabs = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'tabs' : _props$classPrefix,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'tabs' : _props$appearance,
+    className = props.className,
+    children = props.children,
+    activeKeyProp = props.activeKey,
+    defaultActiveKey = props.defaultActiveKey,
+    idProp = props.id,
+    reversed = props.reversed,
+    vertical = props.vertical,
+    onSelect = props.onSelect,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "appearance", "className", "children", "activeKey", "defaultActiveKey", "id", "reversed", "vertical", "onSelect"]);
+  var id = (0, _utils.useUniqueId)('tab-', idProp);
+  var _useCustom = (0, _utils.useCustom)(),
+    rtl = _useCustom.rtl;
+  var _useControlled = (0, _utils.useControlled)(activeKeyProp, defaultActiveKey),
+    activeKey = _useControlled[0],
+    setActiveKey = _useControlled[1];
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
+  var tablistRef = _react.default.useRef(null);
+  var handleSelect = (0, _utils.useEventCallback)(function (eventKey, event) {
+    setActiveKey(eventKey);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
+  });
+  var handleKeyDown = (0, _utils.useEventCallback)(function (event) {
+    var _getFocusableTabs;
+    var target = event.target;
+    if (target.getAttribute('role') !== 'tab') {
+      return;
+    }
+    var previousItemKey = vertical ? 'ArrowUp' : 'ArrowLeft';
+    var nextItemKey = vertical ? 'ArrowDown' : 'ArrowRight';
+    if (!vertical && rtl) {
+      previousItemKey = 'ArrowRight';
+      nextItemKey = 'ArrowLeft';
+    }
+    var item = null;
+    switch (event.key) {
+      case previousItemKey:
+        item = previousItem(tablistRef.current);
+        event.preventDefault();
+        break;
+      case nextItemKey:
+        item = nextItem(tablistRef.current);
+        event.preventDefault();
+        break;
+      case 'Home':
+        item = (_getFocusableTabs = getFocusableTabs(tablistRef.current)) === null || _getFocusableTabs === void 0 ? void 0 : _getFocusableTabs[0];
+        event.preventDefault();
+        break;
+      case 'End':
+        var tabs = getFocusableTabs(tablistRef.current);
+        item = tabs[tabs.length - 1];
+        event.preventDefault();
+        break;
+    }
+    if (item) {
+      var _item;
+      var _item$dataset = (_item = item) === null || _item === void 0 ? void 0 : _item.dataset,
+        _eventKey = _item$dataset.eventKey;
+      handleSelect(_eventKey, event);
+      item.focus();
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    className: merge(className, withClassPrefix({
+      reversed: reversed,
+      vertical: vertical
+    }))
+  }, rest, {
+    ref: ref
+  }), /*#__PURE__*/_react.default.createElement(_Nav.default, {
+    role: "tablist",
+    "aria-orientation": vertical ? 'vertical' : 'horizontal',
+    reversed: reversed,
+    vertical: vertical,
+    appearance: appearance,
+    activeKey: activeKey,
+    onSelect: handleSelect,
+    onKeyDown: handleKeyDown,
+    ref: tablistRef
+  }, renderTabs(children, {
+    id: id,
+    activeKey: activeKey
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["content"])))
+  }, renderPanels(children, {
+    id: id,
+    activeKey: activeKey
+  })));
+});
+Tabs.Tab = _Tab.default;
+Tabs.displayName = 'Tabs';
+Tabs.propTypes = {
+  appearance: _propTypes.default.oneOf(['tabs', 'subtle']),
+  activeKey: _propTypes.default.any,
+  defaultActiveKey: _propTypes.default.any,
+  reversed: _propTypes.default.bool,
+  vertical: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  className: _propTypes.default.string,
+  classPrefix: _propTypes.default.string,
+  children: _propTypes.default.node,
+  onSelect: _propTypes.default.func
+};
+var _default = Tabs;
+exports.default = _default;

package/cjs/Tabs/index.d.ts

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

package/cjs/Tabs/index.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+var _default = _Tabs.default;
+exports.default = _default;

package/cjs/Timeline/Timeline.js

@@ -33,7 +33,7 @@ var Timeline = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;
-  var count = _react.default.Children.count(children);
+  var count = _utils.ReactChildren.count(children);
   var withTime = (0, _some.default)(_react.default.Children.toArray(children), function (item) {
     var _item$props;
     return item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.time;

package/cjs/index.d.ts

@@ -118,6 +118,8 @@ export { default as Accordion } from './Accordion';
 export type { AccordionProps } from './Accordion';
 export { default as PanelGroup } from './PanelGroup';
 export type { PanelGroupProps } from './PanelGroup';
+export { default as Tabs } from './Tabs';
+export type { TabsProps } from './Tabs';
 export { default as Table } from './Table';
 export type { TableProps, ColumnProps, ColumnGroupProps, CellProps, TableLocaleType } from './Table';
 export { default as Progress } from './Progress';

package/cjs/index.js

@@ -4,7 +4,7 @@
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.useFormClassNames = exports.useToaster = exports.VisuallyHidden = exports.useMediaQuery = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.PanelGroup = exports.Accordion = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
+exports.useFormClassNames = exports.useToaster = exports.VisuallyHidden = exports.useMediaQuery = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.Tabs = exports.PanelGroup = exports.Accordion = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
 var _Button = _interopRequireDefault(require("./Button"));
 exports.Button = _Button.default;
 var _IconButton = _interopRequireDefault(require("./IconButton"));
@@ -127,6 +127,8 @@ var _Accordion = _interopRequireDefault(require("./Accordion"));
 exports.Accordion = _Accordion.default;
 var _PanelGroup = _interopRequireDefault(require("./PanelGroup"));
 exports.PanelGroup = _PanelGroup.default;
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+exports.Tabs = _Tabs.default;
 var _Table = _interopRequireDefault(require("./Table"));
 exports.Table = _Table.default;
 var _Progress = _interopRequireDefault(require("./Progress"));

package/cjs/internals/Menu/Menu.js

@@ -18,6 +18,16 @@ var _useClickOutside = _interopRequireDefault(require("../../utils/useClickOutsi
 var _events = require("../../utils/events");
 var _dom = require("../../utils/dom");
 var defaultOpenMenuOn = ['click'];
+function getMenuItemTarget(event) {
+  var _event$currentTarget;
+  var target = event.target;
+  if (target.getAttribute('role') === 'menuitem') {
+    return target;
+  }
+  return Array.from((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.querySelectorAll('[role="menuitem"]')).find(function (item) {
+    return item.contains(target);
+  });
+}
 
 /**
  * Headless ARIA `menu`
@@ -292,7 +302,8 @@ function Menu(_ref) {
 
   // Only used for clicks bubbling from child `menuitem`s.
   var handleMenuClick = (0, _react.useCallback)(function (event) {
-    var target = event.target;
+    var target = getMenuItemTarget(event);
+    if (!target) return;
 
     // Only handle clicks on `menuitem`s
     if (target.getAttribute('role') !== 'menuitem') return;

package/cjs/internals/Picker/ListCheckItem.js

@@ -5,11 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("../../utils");
 var _Checkbox = _interopRequireDefault(require("../../Checkbox"));
 var _useCombobox2 = _interopRequireDefault(require("./hooks/useCombobox"));
+var _templateObject;
 var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$active = props.active,
     active = _props$active === void 0 ? false : _props$active,
@@ -49,7 +51,9 @@ var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useCombobox = (0, _useCombobox2.default)(),
     id = _useCombobox.id;
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix;
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge,
+    rootPrefix = _useClassNames.rootPrefix;
   var checkboxItemClasses = withClassPrefix({
     focus: focus
   });
@@ -66,6 +70,7 @@ var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onClick: handleSelectItem,
     onCheckboxClick: handleCheck
   };
+  console.log(className, 'className');
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "option",
     "aria-selected": active,
@@ -74,7 +79,7 @@ var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     "data-key": value
   }, rest, {
     ref: ref,
-    className: className,
+    className: merge(className, rootPrefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["picker-list-item"])))),
     tabIndex: -1
   }), renderMenuItemCheckbox ? renderMenuItemCheckbox(checkboxProps) : /*#__PURE__*/_react.default.createElement(CheckboxItem, (0, _extends2.default)({
     role: "checkbox"

package/cjs/internals/Picker/ListItem.js

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("../../utils");
 var _useCombobox2 = _interopRequireDefault(require("./hooks/useCombobox"));
+var _templateObject;
 var ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -35,7 +37,9 @@ var ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
   });
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix;
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge,
+    rootPrefix = _useClassNames.rootPrefix;
   var classes = withClassPrefix({
     active: active,
     focus: focus,
@@ -49,7 +53,7 @@ var ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     "data-key": value
   }, rest, {
     ref: ref,
-    className: className,
+    className: merge(className, rootPrefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["picker-list-item"])))),
     tabIndex: -1,
     onKeyDown: disabled ? null : onKeyDown,
     onClick: handleClick

package/cjs/internals/Picker/TreeView.js

@@ -19,7 +19,7 @@ var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     popupType = _useCombobox.popupType;
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     role: "tree",
-    id: id + "-" + popupType,
+    id: id ? id + "-" + popupType : undefined,
     "aria-multiselectable": multiselectable,
     "aria-labelledby": labelId,
     ref: ref

package/cjs/utils/ReactChildren.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare function find(children: React.ReactNode, func: any, context?: any): React.ReactNode;
-export declare function map(children: React.ReactNode, func: any, context?: any): any[] | null | undefined;
-export declare function mapCloneElement(children: React.ReactNode, func: any, context?: any): any[] | null | undefined;
+export declare function map(children: React.ReactNode, func: any, context?: any): any[];
+export declare function mapCloneElement(children: React.ReactNode, func: any, context?: any): any[];
 export declare function count(children: React.ReactNode): number;
 declare function some(children: React.ReactNode, func: any, context?: any): boolean;
 declare const _default: {

package/cjs/utils/ReactChildren.js

@@ -10,10 +10,27 @@ exports.count = count;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    return object.type || object.$$typeof;
+  }
+}
+function isFragment(children) {
+  return _react.default.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');
+}
+function flatChildren(children) {
+  return _react.default.Children.toArray(_react.default.Children.map(children, function (child) {
+    if (isFragment(child)) {
+      var _child$props;
+      return _react.default.Children.toArray(((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children) || []);
+    }
+    return child;
+  }));
+}
 function find(children, func, context) {
   var index = 0;
   var result;
-  _react.default.Children.forEach(children, function (child) {
+  _react.default.Children.forEach(flatChildren(children), function (child) {
     if (result) {
       return;
     }
@@ -26,7 +43,7 @@ function find(children, func, context) {
 }
 function map(children, func, context) {
   var index = 0;
-  return _react.default.Children.map(children, function (child) {
+  return _react.default.Children.map(flatChildren(children), function (child) {
     if (! /*#__PURE__*/_react.default.isValidElement(child)) {
       return child;
     }
@@ -35,35 +52,20 @@ function map(children, func, context) {
     return handle;
   });
 }
-function typeOf(object) {
-  if (typeof object === 'object' && object !== null) {
-    return object.type || object.$$typeof;
-  }
-}
-function isFragment(children) {
-  return _react.default.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');
-}
 function mapCloneElement(children, func, context) {
-  var elements = children;
-  if (isFragment(children)) {
-    var _props;
-    elements = (_props = children.props) === null || _props === void 0 ? void 0 : _props.children;
-  }
-  return map(elements, function (child, index) {
+  return map(children, function (child, index) {
     return /*#__PURE__*/_react.default.cloneElement(child, (0, _extends2.default)({
       key: index
     }, func(child, index)));
   }, context);
 }
 function count(children) {
-  return _react.default.Children.count(Array.isArray(children) ? children.filter(function (child) {
-    return child;
-  }) : children);
+  return _react.default.Children.count(flatChildren(children));
 }
 function some(children, func, context) {
   var index = 0;
   var result = false;
-  _react.default.Children.forEach(children, function (child) {
+  _react.default.Children.forEach(flatChildren(children), function (child) {
     if (result) {
       return;
     }

package/cjs/utils/index.d.ts

@@ -44,3 +44,5 @@ export { default as useIsMounted } from './useIsMounted';
 export { default as useMount } from './useMount';
 export { default as useUniqueId } from './useUniqueId';
 export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { default as useInternalId } from './useInternalId';
+export { default as useEnsuredRef } from './useEnsuredRef';

package/cjs/utils/index.js

@@ -45,12 +45,14 @@ var _exportNames = {
   useMount: true,
   useUniqueId: true,
   useIsomorphicLayoutEffect: true,
+  useInternalId: true,
+  useEnsuredRef: true,
   defaultClassPrefix: true,
   getClassNamePrefix: true,
   globalKey: true,
   DateUtils: true
 };
-exports.DateUtils = exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.useIsomorphicLayoutEffect = exports.useUniqueId = exports.useMount = exports.useIsMounted = exports.useUpdateEffect = exports.useWillUnmount = exports.useUpdatedRef = exports.useEventCallback = exports.stringToObject = exports.getSafeRegExpString = exports.useRootClose = exports.useControlled = exports.useTimeout = exports.createComponent = exports.usePortal = exports.useCustom = exports.useElementResize = exports.useEventListener = exports.useClassNames = exports.getStringLength = exports.safeSetSelection = exports.render = exports.appendTooltip = exports.scrollTopAnimation = exports.reactToString = exports.composeFunctions = exports.shallowEqualArray = exports.shallowEqual = exports.mergeRefs = exports.getDOMNode = exports.placementPolyfill = exports.clone = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.createChainedFunction = exports.prefix = exports.guid = void 0;
+exports.DateUtils = exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.useEnsuredRef = exports.useInternalId = exports.useIsomorphicLayoutEffect = exports.useUniqueId = exports.useMount = exports.useIsMounted = exports.useUpdateEffect = exports.useWillUnmount = exports.useUpdatedRef = exports.useEventCallback = exports.stringToObject = exports.getSafeRegExpString = exports.useRootClose = exports.useControlled = exports.useTimeout = exports.createComponent = exports.usePortal = exports.useCustom = exports.useElementResize = exports.useEventListener = exports.useClassNames = exports.getStringLength = exports.safeSetSelection = exports.render = exports.appendTooltip = exports.scrollTopAnimation = exports.reactToString = exports.composeFunctions = exports.shallowEqualArray = exports.shallowEqual = exports.mergeRefs = exports.getDOMNode = exports.placementPolyfill = exports.clone = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.createChainedFunction = exports.prefix = exports.guid = void 0;
 var _BrowserDetection = require("./BrowserDetection");
 Object.keys(_BrowserDetection).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -163,4 +165,8 @@ exports.useMount = _useMount.default;
 var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));
 exports.useUniqueId = _useUniqueId.default;
 var _useIsomorphicLayoutEffect = _interopRequireDefault(require("./useIsomorphicLayoutEffect"));
-exports.useIsomorphicLayoutEffect = _useIsomorphicLayoutEffect.default;
+exports.useIsomorphicLayoutEffect = _useIsomorphicLayoutEffect.default;
+var _useInternalId = _interopRequireDefault(require("./useInternalId"));
+exports.useInternalId = _useInternalId.default;
+var _useEnsuredRef = _interopRequireDefault(require("./useEnsuredRef"));
+exports.useEnsuredRef = _useEnsuredRef.default;

package/cjs/utils/statusIcons.js

@@ -8,14 +8,14 @@ var _react = _interopRequireDefault(require("react"));
 var _Info = _interopRequireDefault(require("@rsuite/icons/legacy/Info"));
 var _CheckCircle = _interopRequireDefault(require("@rsuite/icons/legacy/CheckCircle"));
 var _CloseCircle = _interopRequireDefault(require("@rsuite/icons/legacy/CloseCircle"));
-var _Remind = _interopRequireDefault(require("@rsuite/icons/legacy/Remind"));
 var _Check = _interopRequireDefault(require("@rsuite/icons/Check"));
 var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
+var _RemindRound = _interopRequireDefault(require("@rsuite/icons/RemindRound"));
 var MESSAGE_STATUS_ICONS = {
   info: /*#__PURE__*/_react.default.createElement(_Info.default, null),
   success: /*#__PURE__*/_react.default.createElement(_CheckCircle.default, null),
   error: /*#__PURE__*/_react.default.createElement(_CloseCircle.default, null),
-  warning: /*#__PURE__*/_react.default.createElement(_Remind.default, null)
+  warning: /*#__PURE__*/_react.default.createElement(_RemindRound.default, null)
 };
 exports.MESSAGE_STATUS_ICONS = MESSAGE_STATUS_ICONS;
 var PROGRESS_STATUS_ICON = {