rsuite 5.15.2 → 5.16.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# [5.16.0](https://github.com/rsuite/rsuite/compare/v5.15.2...v5.16.0) (2022-07-07)
+
+### Features
+
+- **SelectPicker,CheckPicker:** add label prop ([#2572](https://github.com/rsuite/rsuite/issues/2572)) ([d00f442](https://github.com/rsuite/rsuite/commit/d00f442c46eb5edbb13d127b23f1c2eda6cf60d7))
+
 ## [5.15.2](https://github.com/rsuite/rsuite/compare/v5.15.1...v5.15.2) (2022-06-30)
 
 ### Bug Fixes

package/Picker/styles/index.less

@@ -213,6 +213,10 @@
   text-align: left;
   .ellipsis();
 
+  &-label {
+    color: var(--rs-text-primary);
+  }
+
   &-value {
     display: block;
     .ellipsis();

package/cjs/Picker/PickerToggle.d.ts

@@ -31,6 +31,7 @@ export interface PickerToggleProps extends ToggleButtonProps {
     /** Custom caret component */
     caretAs?: React.ElementType;
     onClean?: (event: React.MouseEvent) => void;
+    label?: React.ReactNode;
 }
 declare const PickerToggle: RsRefForwardingComponent<typeof ToggleButton, PickerToggleProps>;
 export default PickerToggle;

package/cjs/Picker/PickerToggle.js

@@ -73,7 +73,8 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       caretComponent = props.caretComponent,
       _props$caretAs = props.caretAs,
       caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "cleanable", "tabIndex", "id", "value", "input", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs"]);
+      label = props.label,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "cleanable", "tabIndex", "id", "value", "input", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label"]);
   var inputRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(false),
@@ -193,7 +194,9 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }), children ? /*#__PURE__*/_react.default.createElement("span", {
     className: prefix(hasValue ? 'value' : 'placeholder'),
     "aria-placeholder": typeof children === 'string' ? children : undefined
-  }, children) : null, showCleanButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
+  }, label && /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('label')
+  }, label, ": "), children) : null, showCleanButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["clean"]))),
     tabIndex: -1,
     locale: {

package/dist/rsuite-rtl.css

@@ -11574,6 +11574,10 @@ textarea.rs-picker-search-input {
 .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle:active::after {
   display: none;
 }
+.rs-picker-toggle-label {
+  color: #575757;
+  color: var(--rs-text-primary);
+}
 .rs-picker-toggle-value {
   display: block;
   overflow: hidden;