rsuite 5.52.0 → 5.53.0

package/esm/internals/Menu/Menu.js

@@ -12,6 +12,16 @@ import useClickOutside from '../../utils/useClickOutside';
 import { isFocusLeaving } from '../../utils/events';
 import { isFocusableElement } from '../../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`
@@ -286,7 +296,8 @@ function Menu(_ref) {
 
   // Only used for clicks bubbling from child `menuitem`s.
   var handleMenuClick = 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/esm/internals/Picker/ListCheckItem.js

@@ -1,6 +1,8 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _templateObject;
 import React from 'react';
 import { useClassNames, useEventCallback } from '../../utils';
 import Checkbox from '../../Checkbox';
@@ -44,7 +46,9 @@ var ListCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useCombobox = useCombobox(),
     id = _useCombobox.id;
   var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix;
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge,
+    rootPrefix = _useClassNames.rootPrefix;
   var checkboxItemClasses = withClassPrefix({
     focus: focus
   });
@@ -61,6 +65,7 @@ var ListCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: handleSelectItem,
     onCheckboxClick: handleCheck
   };
+  console.log(className, 'className');
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "option",
     "aria-selected": active,
@@ -69,7 +74,7 @@ var ListCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "data-key": value
   }, rest, {
     ref: ref,
-    className: className,
+    className: merge(className, rootPrefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["picker-list-item"])))),
     tabIndex: -1
   }), renderMenuItemCheckbox ? renderMenuItemCheckbox(checkboxProps) : /*#__PURE__*/React.createElement(CheckboxItem, _extends({
     role: "checkbox"

package/esm/internals/Picker/ListItem.js

@@ -1,6 +1,8 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _templateObject;
 import React from 'react';
 import { useClassNames, useEventCallback } from '../../utils';
 import useCombobox from './hooks/useCombobox';
@@ -30,7 +32,9 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   });
   var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix;
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge,
+    rootPrefix = _useClassNames.rootPrefix;
   var classes = withClassPrefix({
     active: active,
     focus: focus,
@@ -44,7 +48,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "data-key": value
   }, rest, {
     ref: ref,
-    className: className,
+    className: merge(className, rootPrefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["picker-list-item"])))),
     tabIndex: -1,
     onKeyDown: disabled ? null : onKeyDown,
     onClick: handleClick

package/esm/internals/Picker/TreeView.js

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

package/esm/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/esm/utils/ReactChildren.js

@@ -1,10 +1,22 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    return object.type || object.$$typeof;
+  }
+}
+function isFragment(children) {
+  return React.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');
+}
+function getChildren(children) {
+  var _props;
+  return isFragment(children) ? (_props = children.props) === null || _props === void 0 ? void 0 : _props.children : children;
+}
 export function find(children, func, context) {
   var index = 0;
   var result;
-  React.Children.forEach(children, function (child) {
+  React.Children.forEach(getChildren(children), function (child) {
     if (result) {
       return;
     }
@@ -17,7 +29,7 @@ export function find(children, func, context) {
 }
 export function map(children, func, context) {
   var index = 0;
-  return React.Children.map(children, function (child) {
+  return React.Children.map(getChildren(children), function (child) {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return child;
     }
@@ -26,21 +38,8 @@ export 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.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');
-}
 export 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.cloneElement(child, _extends({
       key: index
     }, func(child, index)));
@@ -54,7 +53,7 @@ export function count(children) {
 function some(children, func, context) {
   var index = 0;
   var result = false;
-  React.Children.forEach(children, function (child) {
+  React.Children.forEach(getChildren(children), function (child) {
     if (result) {
       return;
     }

package/esm/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/esm/utils/index.js

@@ -46,4 +46,6 @@ export { default as useUpdateEffect } from './useUpdateEffect';
 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 useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { default as useInternalId } from './useInternalId';
+export { default as useEnsuredRef } from './useEnsuredRef';

package/esm/utils/statusIcons.js

@@ -3,14 +3,14 @@ import React from 'react';
 import Info from '@rsuite/icons/legacy/Info';
 import CheckCircle from '@rsuite/icons/legacy/CheckCircle';
 import CloseCircle from '@rsuite/icons/legacy/CloseCircle';
-import Remind from '@rsuite/icons/legacy/Remind';
 import Check from '@rsuite/icons/Check';
 import Close from '@rsuite/icons/Close';
+import RemindRoundIcon from '@rsuite/icons/RemindRound';
 export var MESSAGE_STATUS_ICONS = {
   info: /*#__PURE__*/React.createElement(Info, null),
   success: /*#__PURE__*/React.createElement(CheckCircle, null),
   error: /*#__PURE__*/React.createElement(CloseCircle, null),
-  warning: /*#__PURE__*/React.createElement(Remind, null)
+  warning: /*#__PURE__*/React.createElement(RemindRoundIcon, null)
 };
 export var PROGRESS_STATUS_ICON = {
   success: /*#__PURE__*/React.createElement(Check, null),

package/internals/Picker/styles/index.less

@@ -354,7 +354,7 @@
   &:not(.rs-checkbox-disabled):hover,
   &:focus,
   &&-focus {
-    .listbox-option-active(true);
+    .listbox-option-active();
 
     .high-contrast-mode({
       .rs-check-tree-node-text-wrapper {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.52.0",
+  "version": "5.53.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/color-modes/dark.less

@@ -134,18 +134,22 @@
   --rs-message-success-text: #fff;
   --rs-message-success-icon: #fff;
   --rs-message-success-bg: var(--rs-green-500);
+  --rs-message-success-border: var(--rs-green-800);
   --rs-message-info-header: #fff;
   --rs-message-info-text: #fff;
   --rs-message-info-icon: #fff;
   --rs-message-info-bg: var(--rs-blue-500);
+  --rs-message-info-border: var(--rs-blue-800);
   --rs-message-warning-header: var(--rs-gray-900);
   --rs-message-warning-text: var(--rs-gray-900);
   --rs-message-warning-icon: var(--rs-gray-900);
   --rs-message-warning-bg: var(--rs-yellow-500);
+  --rs-message-warning-border: var(--rs-yellow-800);
   --rs-message-error-header: #fff;
   --rs-message-error-text: #fff;
   --rs-message-error-icon: #fff;
   --rs-message-error-bg: var(--rs-red-500);
+  --rs-message-error-border: var(--rs-red-800);
 
   // Tooltip
   --rs-tooltip-bg: var(--rs-gray-500);

package/styles/color-modes/light.less

@@ -140,19 +140,27 @@
   --rs-message-success-header: var(--rs-text-heading);
   --rs-message-success-text: var(--rs-text-primary);
   --rs-message-success-icon: var(--rs-color-green);
-  --rs-message-success-bg: var(--rs-green-50);
+  --rs-message-success-icon-border: var(--rs-green-200);
+  --rs-message-success-bg: rgb(from var(--rs-green-100) r g b / 60%);
+  --rs-message-success-border: var(--rs-color-green);
   --rs-message-info-header: var(--rs-text-heading);
   --rs-message-info-text: var(--rs-text-primary);
   --rs-message-info-icon: var(--rs-color-blue);
-  --rs-message-info-bg: var(--rs-blue-50);
+  --rs-message-info-icon-border: var(--rs-blue-200);
+  --rs-message-info-bg: rgb(from var(--rs-blue-100) r g b / 60%);
+  --rs-message-info-border: var(--rs-color-blue);
   --rs-message-warning-header: var(--rs-text-heading);
   --rs-message-warning-text: var(--rs-text-primary);
   --rs-message-warning-icon: var(--rs-color-yellow);
-  --rs-message-warning-bg: var(--rs-yellow-50);
+  --rs-message-warning-icon-border: var(--rs-yellow-200);
+  --rs-message-warning-bg: rgb(from var(--rs-yellow-100) r g b / 60%);
+  --rs-message-warning-border: var(--rs-color-yellow);
   --rs-message-error-header: var(--rs-text-heading);
   --rs-message-error-text: var(--rs-text-primary);
   --rs-message-error-icon: var(--rs-color-red);
-  --rs-message-error-bg: var(--rs-red-50);
+  --rs-message-error-icon-border: var(--rs-red-200);
+  --rs-message-error-bg: rgb(from var(--rs-red-100) r g b / 60%);
+  --rs-message-error-border: var(--rs-color-red);
 
   // Tooltip
   --rs-tooltip-bg: var(--rs-gray-900);
@@ -392,6 +400,12 @@
     --rs-loader-ring-inverse: fade(@B050, 30%);
     --rs-loader-backdrop-inverse: fade(@B900, 83%);
 
+    // Message
+    --rs-message-success-bg: fade(@green-100, 60%);
+    --rs-message-info-bg: fade(@blue-100, 60%);
+    --rs-message-warning-bg: fade(@yellow-100, 60%);
+    --rs-message-error-bg: fade(@red-100, 60%);
+
     // Dropdown
     --rs-dropdown-item-bg-hover: fade(@H100, 50%);
 

package/styles/index.less

@@ -66,6 +66,7 @@
 @import '../Table/styles/index';
 @import '../Tag/styles/index';
 @import '../TagGroup/styles/index';
+@import '../Tabs/styles/index';
 @import '../TagPicker/styles/index';
 @import '../TagInput/styles/index';
 @import '../Timeline/styles/index';

package/styles/mixins/listbox.less

@@ -38,14 +38,9 @@
 }
 
 // "-active" for aria-activedescendant
-.listbox-option-active(@multiselectable: false) {
+.listbox-option-active() {
   background-color: var(--rs-listbox-option-hover-bg);
-
-  // No need to change text color in multiselectable listboxes
-  // in favor of checkbox state changes
-  & when (@multiselectable = false) {
-    color: var(--rs-listbox-option-hover-text);
-  }
+  color: var(--rs-listbox-option-hover-text);
 
   .high-contrast-mode({
     .focus-ring(slim-inset);

package/styles/variables.less

@@ -571,7 +571,7 @@
 @message-title-size:          @font-size-base;
 @message-link-font-weight:    bold;
 
-@message-icon-size:           @font-size-small;
+@message-icon-size:           16px;
 @message-icon-large-size:     24px;
 @message-icon-margin-right:   10px;
 
@@ -862,6 +862,7 @@
 @zindex-popover:                              1060;
 @zindex-tooltip:                              1070;
 @zindex-notification:                         1080;
+@zindex-message-full:                         1090;
 
 //#==== Uploader
 @zindex-uploader-picture-preview:         1;