rsuite 5.18.1-beta.4 → 5.19.0-beta.5

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [5.19.0](https://github.com/rsuite/rsuite/compare/v5.18.1...v5.19.0) (2022-09-23)
+
+### Bug Fixes
+
+- **CheckPicker,SelectPicker:** fix inconsistent label spacing ([#2739](https://github.com/rsuite/rsuite/issues/2739)) ([2441d7e](https://github.com/rsuite/rsuite/commit/2441d7efa20e92f11b3266ca2434a9529b31ecb4))
+- **Dropdown:** fix `disabled` not working when trigger is set to hover or contextMenu ([#2740](https://github.com/rsuite/rsuite/issues/2740)) ([147821c](https://github.com/rsuite/rsuite/commit/147821c54ef7814820a91edb79e0923c99ab6d0b))
+- **Sidenav:** fix tooltip blocking menu items ([#2747](https://github.com/rsuite/rsuite/issues/2747)) ([d3568e1](https://github.com/rsuite/rsuite/commit/d3568e18fc5951340951a49c2ac121a786763dd9))
+- **Stack:** filter children that should not be rendered ([#2732](https://github.com/rsuite/rsuite/issues/2732)) ([23c283f](https://github.com/rsuite/rsuite/commit/23c283f26da8ed9db4f4975c79b7cfe916f82903))
+
+### Features
+
+- **Stack:** add `Item` to adjust single child ([#2730](https://github.com/rsuite/rsuite/issues/2730)) ([5af6256](https://github.com/rsuite/rsuite/commit/5af625690be33c54def844db3bcf6aa47cc72eed))
+
 ## [5.18.1](https://github.com/rsuite/rsuite/compare/v5.18.0...v5.18.1) (2022-09-15)
 
 ### Bug Fixes

package/Picker/styles/index.less

@@ -215,6 +215,11 @@
 
   &-label {
     color: var(--rs-text-primary);
+
+    &::after {
+      content: ':';
+      margin: 0 4px 0 2px;
+    }
   }
 
   &-value {

package/cjs/Dropdown/Dropdown.js

@@ -147,6 +147,7 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     defaultOpen: defaultOpen,
     menuButtonText: title,
     renderMenuButton: renderMenuButton,
+    disabled: disabled,
     openMenuOn: menuButtonTriggers,
     renderMenuPopup: function renderMenuPopup(_ref, popupRef) {
       var open = _ref.open,

package/cjs/Picker/PickerToggle.js

@@ -221,7 +221,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     "aria-placeholder": typeof children === 'string' ? children : undefined
   }, label && /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('label')
-  }, label, ": "), children) : null, showCleanButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
+  }, label), children) : null, showCleanButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["clean"]))),
     tabIndex: -1,
     locale: {

package/cjs/Sidenav/SidenavItem.js

@@ -74,8 +74,14 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       prefix = _useClassNames.prefix;
 
   var selected = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(activeKey, eventKey);
+
+  var whisperRef = _react.default.useRef(null);
+
   var handleClick = (0, _react.useCallback)(function (event) {
+    var _whisperRef$current;
+
     if (disabled) return;
+    (_whisperRef$current = whisperRef.current) === null || _whisperRef$current === void 0 ? void 0 : _whisperRef$current.close();
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
     onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
@@ -85,7 +91,8 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return /*#__PURE__*/_react.default.createElement(_Whisper.default, {
       trigger: "hover",
       speaker: /*#__PURE__*/_react.default.createElement(_Tooltip.default, null, tooltip),
-      placement: "right"
+      placement: "right",
+      ref: whisperRef
     }, function (triggerProps, triggerRef) {
       return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
         selected: selected,

package/cjs/Stack/Stack.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { WithAsProps } from '../@types/common';
+import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+import StackItem from './StackItem';
 export interface StackProps extends WithAsProps {
     /**
      * The direction of the children in the stack.
@@ -22,5 +23,8 @@ export interface StackProps extends WithAsProps {
      */
     wrap?: boolean;
 }
-declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+export interface StackComponent extends RsRefForwardingComponent<'div', StackProps> {
+    Item: typeof StackItem;
+}
+declare const Stack: StackComponent;
 export default Stack;

package/cjs/Stack/Stack.js

@@ -15,6 +15,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
+var _StackItem = _interopRequireDefault(require("./StackItem"));
+
 var Stack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _itemStyles;
 
@@ -44,9 +46,6 @@ var Stack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var classes = merge(className, withClassPrefix());
   var isSupportGridGap = (0, _utils.isSupportFlexGap)();
-
-  var count = _react.default.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 = (0, _extends2.default)({
@@ -56,20 +55,31 @@ var Stack = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     flexWrap: wrap ? 'wrap' : undefined,
     gap: isSupportGridGap ? spacing : undefined
   }, style);
+  /*
+   * toArray remove undefined, null and boolean
+   */
+
+  var filterChildren = _react.default.Children.toArray(children);
+
+  var count = filterChildren.length;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes,
     style: styles
-  }), _react.default.Children.map(children, function (child, index) {
-    var childNode = /*#__PURE__*/_react.default.createElement("div", {
+  }), _react.default.Children.map(filterChildren, function (child, index) {
+    var childNode = child.type !== _StackItem.default ? /*#__PURE__*/_react.default.createElement(_StackItem.default, {
+      key: index,
       className: prefix('item'),
       style: !isSupportGridGap ? itemStyles : undefined
-    }, child);
-
+    }, 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
+    });
     return [childNode, index < count - 1 ? divider : null];
   }));
 });
 
+Stack.Item = _StackItem.default;
 Stack.displayName = 'Stack';
 Stack.propTypes = {
   className: _propTypes.default.string,

package/cjs/Stack/StackItem.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { WithAsProps } from '../@types/common';
+export interface StackItemProps extends WithAsProps {
+    alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+    flex?: React.CSSProperties['flex'];
+    grow?: React.CSSProperties['flexGrow'];
+    shrink?: React.CSSProperties['flexShrink'];
+    basis?: React.CSSProperties['flexBasis'];
+    order?: React.CSSProperties['order'];
+}
+declare function StackItem(props: StackItemProps): JSX.Element;
+declare namespace StackItem {
+    var displayName: string;
+    var propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        alignSelf: PropTypes.Requireable<string>;
+        flex: PropTypes.Requireable<string | number>;
+        grow: PropTypes.Requireable<number>;
+        shrink: PropTypes.Requireable<number>;
+        order: PropTypes.Requireable<number>;
+        basis: PropTypes.Requireable<string>;
+    };
+}
+export default StackItem;

package/cjs/Stack/StackItem.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = StackItem;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function StackItem(props) {
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      style = props.style,
+      className = props.className,
+      alignSelf = props.alignSelf,
+      flex = props.flex,
+      grow = props.grow,
+      shrink = props.shrink,
+      order = props.order,
+      basis = props.basis,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "style", "className", "alignSelf", "flex", "grow", "shrink", "order", "basis"]);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    className: className,
+    style: (0, _extends2.default)({
+      alignSelf: alignSelf,
+      order: order
+    }, flex ? {
+      flex: flex
+    } : {
+      flexGrow: grow,
+      flexShrink: shrink,
+      flexBasis: basis
+    }, style)
+  }, rest));
+}
+
+StackItem.displayName = 'StackItem';
+StackItem.propTypes = {
+  className: _propTypes.default.string,
+  children: _propTypes.default.node,
+  alignSelf: _propTypes.default.oneOf(['flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
+  flex: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  grow: _propTypes.default.number,
+  shrink: _propTypes.default.number,
+  order: _propTypes.default.number,
+  basis: _propTypes.default.string
+};

package/dist/rsuite-rtl.css

@@ -11604,6 +11604,10 @@ textarea.rs-picker-search-input {
   color: #575757;
   color: var(--rs-text-primary);
 }
+.rs-picker-toggle-label::after {
+  content: ':';
+  margin: 0 2px 0 4px;
+}
 .rs-picker-toggle-value {
   display: block;
   overflow: hidden;