rsuite 5.36.0 → 5.37.1

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [5.37.1](https://github.com/rsuite/rsuite/compare/v5.37.0...v5.37.1) (2023-07-21)
+
+### Bug Fixes
+
+- **SelectPicker:** wrong padding for grouped options ([#3298](https://github.com/rsuite/rsuite/issues/3298)) ([e929f74](https://github.com/rsuite/rsuite/commit/e929f74273092855503f306f2e7e3362c716e574))
+
+# [5.37.0](https://github.com/rsuite/rsuite/compare/v5.36.0...v5.37.0) (2023-07-07)
+
+### Bug Fixes
+
+- **Picker:** pass name prop to underlying input element ([#3275](https://github.com/rsuite/rsuite/issues/3275)) ([3b7cce5](https://github.com/rsuite/rsuite/commit/3b7cce56b90de2502b1f997ae0ff74918fcee718))
+- **RadioGroup:** fix style in picker appearance ([#3274](https://github.com/rsuite/rsuite/issues/3274)) ([f673c85](https://github.com/rsuite/rsuite/commit/f673c85963973d2bbd9fc72c461d3a9718b3f25a))
+- **Uploader:** correct type for status argument of onError callback ([#3273](https://github.com/rsuite/rsuite/issues/3273)) ([cdb3c74](https://github.com/rsuite/rsuite/commit/cdb3c7412e793c1d89958ea6fddabbf91d326575))
+
+### Features
+
+- **InputPicker:** add shouldDisplayCreateOption prop ([#3270](https://github.com/rsuite/rsuite/issues/3270)) ([aa52b69](https://github.com/rsuite/rsuite/commit/aa52b690b4aa57918b12fc5a9684d7a59cef4f34))
+
 # [5.36.0](https://github.com/rsuite/rsuite/compare/v5.35.1...v5.36.0) (2023-06-30)
 
 ### Bug Fixes

package/RadioGroup/styles/index.less

@@ -1,5 +1,3 @@
-@import (reference) '../../Button/styles/index';
-
 .rs-radio-group {
   display: flex;
   flex-direction: column;
@@ -15,21 +13,33 @@
 
 // Radio Group - picker appearance
 .rs-radio-group-picker {
+  @radio-group-padding-start: 12px;
+  @radio-group-padding-end: 12px;
+  @radio-group-border-width: 1px;
+  @radio-padding-x: 10px;
+  @radio-active-underline-width: 2px;
+
   display: inline-flex;
   color: var(--rs-text-primary);
-  border: 1px solid var(--rs-border-primary);
+  border: @radio-group-border-width solid var(--rs-border-primary);
   border-radius: @border-radius;
-  margin-left: 0;
 
   .rs-radio-inline {
-    margin-left: 0;
+    padding: 0 @radio-padding-x;
+    margin: 0;
+
+    &:first-child {
+      padding-left: @radio-group-padding-start;
+    }
+
+    &:last-child {
+      padding-right: @radio-group-padding-end;
+    }
   }
 
   .rs-radio-checker {
     padding: 0;
     min-height: auto;
-    border-bottom: 1px solid transparent;
-    margin: 0 10px;
   }
 
   // Picker Radio group hidden radio.
@@ -38,14 +48,16 @@
   }
 
   .rs-radio-checker > label {
-    // TODO: Should not inherit Button styles
-    .rs-btn();
-    .rs-btn-subtle();
-
+    display: inline-block;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    border-radius: 0;
     color: var(--rs-text-secondary);
     background: none;
     transition: color 0.3s linear;
-    padding: (@padding-y - 1px) 0;
+    padding: (@padding-y - @radio-group-border-width) 0
+      (@padding-y - @radio-group-border-width - @radio-active-underline-width);
+    border-bottom: @radio-active-underline-width solid transparent;
 
     .high-contrast-mode({
       transition: none;
@@ -59,10 +71,9 @@
   }
 
   .rs-radio-checked .rs-radio-checker {
-    border-bottom: 2px solid var(--rs-text-active);
-
     > label {
       color: var(--rs-text-active);
+      border-color: var(--rs-text-active);
     }
   }
 

package/SelectPicker/styles/index.less

@@ -11,6 +11,10 @@
   .picker-menu-group-common(picker);
   .picker-menu-group-title(picker);
   .picker-menu-group-closed(picker);
+
+  .rs-picker-menu-group ~ [role='option'] > .rs-picker-select-menu-item {
+    padding-left: 26px;
+  }
 }
 
 // Menu item (the option)

package/cjs/InputPicker/InputPicker.d.ts

@@ -36,6 +36,15 @@ export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<
     onFocus?: React.FocusEventHandler;
     /** Called when the option is created */
     onCreate?: (value: ValueType, item: ItemDataType, event: React.SyntheticEvent) => void;
+    /**
+     * Customize whether to display "Create option" action with given textbox value
+     *
+     * By default, InputPicker hides "Create option" action when textbox value matches any filtered item's [valueKey] property
+     *
+     * @param searchKeyword Value of the textbox
+     * @param filteredData The items filtered by the searchKeyword
+     */
+    shouldDisplayCreateOption?: (searchKeyword: string, filteredData: InputItemDataType[]) => boolean;
 }
 declare const InputPicker: PickerComponent<InputPickerProps>;
 export default InputPicker;

package/cjs/InputPicker/InputPicker.js

@@ -100,6 +100,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       _props$menuMaxHeight = props.menuMaxHeight,
       menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
       creatable = props.creatable,
+      shouldDisplayCreateOption = props.shouldDisplayCreateOption,
       valueProp = props.value,
       _props$valueKey = props.valueKey,
       valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
@@ -131,7 +132,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       searchBy = props.searchBy,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onOpen", "onClose", "onBlur", "onFocus", "searchBy", "placement"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "shouldDisplayCreateOption", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onOpen", "onClose", "onBlur", "onFocus", "searchBy", "placement"]);
 
   var _useContext = (0, _react.useContext)(InputPickerContext),
       multi = _useContext.multi,
@@ -628,9 +629,9 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     });
     var items = (0, _treeUtils.filterNodesOfTree)(getAllData(), checkShouldDisplay);
 
-    if (creatable && searchKeyword && !items.find(function (item) {
+    if (creatable && (typeof shouldDisplayCreateOption === 'function' ? shouldDisplayCreateOption(searchKeyword, items) : searchKeyword && !items.find(function (item) {
       return item[valueKey] === searchKeyword;
-    })) {
+    }))) {
       items = [].concat(items, [createOption(searchKeyword)]);
     } // Create a tree structure data when set `groupBy`
 

package/cjs/Picker/PickerToggle.d.ts

@@ -17,6 +17,7 @@ export interface PickerToggleProps extends ToggleButtonProps {
     tabIndex?: number;
     loading?: boolean;
     editable?: boolean;
+    name?: string;
     inputPlaceholder?: string;
     inputMask?: (string | RegExp)[];
     onInputChange?: (value: string, event: React.ChangeEvent) => void;

package/cjs/Picker/PickerToggle.js

@@ -80,7 +80,8 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       _props$caretAs = props.caretAs,
       caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
       label = props.label,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label"]);
+      name = props.name,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label", "name"]);
   var inputRef = (0, _react.useRef)(null);
   var comboboxRef = (0, _react.useRef)(null);
 
@@ -173,11 +174,12 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var renderInput = (0, _react.useCallback)(function (ref, props) {
     return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(inputRef, ref),
+      name: name,
       style: {
         pointerEvents: editable ? undefined : 'none'
       }
     }, props));
-  }, [editable]);
+  }, [editable, name]);
   var ToggleCaret = (0, _useToggleCaret.default)(placement);
   var Caret = caretAs !== null && caretAs !== void 0 ? caretAs : ToggleCaret;
 

package/cjs/Picker/utils.js

@@ -101,8 +101,9 @@ function usePickerClassName(props) {
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge;
 
-  var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix)));
-  var usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [].concat(Object.keys(rest || {}), ['disabled', 'readOnly', 'plaintext'])));
+  var classes = merge(className, withClassPrefix(name, appearance, 'toggle-wrapper', (_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix['read-only'] = readOnly, _withClassPrefix['has-value'] = hasValue, _withClassPrefix.cleanable = cleanable, _withClassPrefix.block = block, _withClassPrefix.disabled = disabled, _withClassPrefix.countable = countable, _withClassPrefix.plaintext = plaintext, _withClassPrefix))); // Those props that're used for composing the className
+
+  var usedClassNamePropKeys = Object.keys((0, _omit.default)(props, [].concat(Object.keys(rest || {}), ['disabled', 'readOnly', 'plaintext', 'name'])));
   return [classes, usedClassNamePropKeys];
 }
 

package/cjs/Uploader/Uploader.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { UploadTriggerProps } from './UploadTrigger';
 import { WithAsProps } from '../@types/common';
 import { UploaderLocale } from '../locales';
+import type { ErrorStatus } from '../utils/ajaxUpload';
 export interface FileType {
     /** File Name */
     name?: string;
@@ -86,8 +87,8 @@ export interface UploaderProps extends WithAsProps, Omit<UploadTriggerProps, 'on
     onReupload?: (file: FileType) => void;
     /** In the file list, click the callback function for the uploaded file */
     onPreview?: (file: FileType, event: React.SyntheticEvent) => void;
-    /** Upload callback function with erro */
-    onError?: (status: any, file: FileType, event: ProgressEvent, xhr: XMLHttpRequest) => void;
+    /** Upload callback function with error */
+    onError?: (status: ErrorStatus, file: FileType, event: ProgressEvent, xhr: XMLHttpRequest) => void;
     /** callback function after successful upload */
     onSuccess?: (response: any, file: FileType, event: ProgressEvent, xhr: XMLHttpRequest) => void;
     /** Callback functions that upload progress change */

package/cjs/utils/ajaxUpload.d.ts

@@ -1,4 +1,4 @@
-interface ErrorStatus {
+export interface ErrorStatus {
     type: 'timeout' | 'server_error' | 'xhr_error';
     response?: any;
 }

package/dist/rsuite-no-reset-rtl.css

@@ -12678,219 +12678,36 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   border: 1px solid #e5e5ea;
   border: 1px solid var(--rs-border-primary);
   border-radius: 6px;
-  margin-right: 0;
 }
 .rs-radio-group-picker .rs-radio-inline {
-  margin-right: 0;
+  padding: 0 10px;
+  margin: 0;
+}
+.rs-radio-group-picker .rs-radio-inline:first-child {
+  padding-right: 12px;
+}
+.rs-radio-group-picker .rs-radio-inline:last-child {
+  padding-left: 12px;
 }
 .rs-radio-group-picker .rs-radio-checker {
   padding: 0;
   min-height: auto;
-  border-bottom: 1px solid transparent;
-  margin: 0 10px;
 }
 .rs-radio-group-picker .rs-radio-wrapper {
   display: none;
 }
 .rs-radio-group-picker .rs-radio-checker > label {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  margin-bottom: 0;
-  font-weight: normal;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  white-space: nowrap;
-  -webkit-transition: color 0.15s ease-out, background-color 0.15s ease-out;
-  transition: color 0.15s ease-out, background-color 0.15s ease-out;
-  border: none;
-  border: var(--rs-btn-default-border, none);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  text-decoration: none;
-  color: #575757;
-  color: var(--rs-btn-default-text);
-  background-color: #f7f7fa;
-  background-color: var(--rs-btn-default-bg);
-  border-radius: 6px;
+  display: inline-block;
   font-size: 14px;
-  line-height: 20px;
-  padding: 8px 12px;
-  overflow: hidden;
-  position: relative;
-  color: #8e8e93;
-  color: var(--rs-btn-subtle-text);
-  background-color: transparent;
-  border: none;
+  line-height: 1.42857143;
+  border-radius: 0;
   color: #8e8e93;
   color: var(--rs-text-secondary);
   background: none;
   -webkit-transition: color 0.3s linear;
   transition: color 0.3s linear;
-  padding: 7px 0;
-}
-.rs-theme-high-contrast .rs-radio-group-picker .rs-radio-checker > label {
-  -webkit-transition: none;
-  transition: none;
-}
-.rs-btn-ghost.rs-radio-group-picker .rs-radio-checker > label {
-  padding: 7px 11px;
-}
-.rs-btn-icon.rs-radio-group-picker .rs-radio-checker > label {
-  padding: 10px 10px;
-  line-height: 16px;
-}
-.rs-btn-icon.rs-radio-group-picker .rs-radio-checker > label > .rs-icon {
-  font-size: 16px;
-}
-.rs-btn-icon-with-text.rs-radio-group-picker .rs-radio-checker > label {
-  line-height: 20px;
-}
-.rs-btn-icon-with-text.rs-radio-group-picker .rs-radio-checker > label > .rs-icon {
-  padding: 10px 10px;
-  width: 36px;
-  height: 36px;
-}
-.rs-btn-icon-with-text.rs-radio-group-picker .rs-radio-checker > label.rs-btn-icon-placement-left {
-  padding: 8px 48px 8px 12px;
-}
-.rs-btn-icon-with-text.rs-radio-group-picker .rs-radio-checker > label.rs-btn-icon-placement-left > .rs-icon {
-  right: 0;
-  border-left: none;
-  border-left: var(--rs-btn-default-border, none);
-}
-.rs-btn-icon-with-text.rs-radio-group-picker .rs-radio-checker > label.rs-btn-icon-placement-right {
-  padding: 8px 12px 8px 48px;
-}
-.rs-btn-icon-with-text.rs-radio-group-picker .rs-radio-checker > label.rs-btn-icon-placement-right > .rs-icon {
-  left: 0;
-  border-right: none;
-  border-right: var(--rs-btn-default-border, none);
-}
-.rs-radio-group-picker .rs-radio-checker > label:focus-visible {
-  outline: 3px solid rgba(52, 152, 255, 0.25);
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-radio-group-picker .rs-radio-checker > label:focus-visible {
-  outline-offset: 2px;
-}
-.rs-radio-group-picker .rs-radio-checker > label:hover,
-.rs-radio-group-picker .rs-radio-checker > label:focus {
-  color: var(--rs-btn-default-hover-text);
-  background-color: #e5e5ea;
-  background-color: var(--rs-btn-default-hover-bg);
-  text-decoration: none;
-}
-.rs-radio-group-picker .rs-radio-checker > label:active,
-.rs-radio-group-picker .rs-radio-checker > label.rs-btn-active {
-  color: #272c36;
-  color: var(--rs-btn-default-active-text);
-  background-color: #d9d9d9;
-  background-color: var(--rs-btn-default-active-bg);
-}
-.rs-radio-group-picker .rs-radio-checker > label:disabled,
-.rs-radio-group-picker .rs-radio-checker > label.rs-btn-disabled {
-  cursor: not-allowed;
-  color: #c5c6c7;
-  color: var(--rs-btn-default-disabled-text);
-  background-color: #f7f7fa;
-  background-color: var(--rs-btn-default-disabled-bg);
-}
-.rs-theme-high-contrast .rs-radio-group-picker .rs-radio-checker > label:disabled,
-.rs-theme-high-contrast .rs-radio-group-picker .rs-radio-checker > label.rs-btn-disabled {
-  opacity: 0.5;
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .rs-radio-group-picker .rs-radio-checker > label {
-    /* stylelint-disable */
-    -webkit-mask-image: -webkit-radial-gradient(white, black);
-    /* stylelint-enable */
-  }
-}
-.rs-picker-default .rs-radio-group-picker .rs-radio-checker > label {
-  -webkit-transition: border-color ease-in-out 0.15s;
-  transition: border-color ease-in-out 0.15s;
-}
-.rs-theme-high-contrast .rs-picker-default .rs-radio-group-picker .rs-radio-checker > label {
-  -webkit-transition: none;
-  transition: none;
-}
-.rs-picker-default:not(.rs-picker-disabled) .rs-radio-group-picker .rs-radio-checker > label:hover,
-.rs-picker-default:not(.rs-picker-disabled) .rs-radio-group-picker .rs-radio-checker > label:focus,
-.rs-picker-default:not(.rs-picker-disabled) .rs-radio-group-picker .rs-radio-checker > label-active {
-  border-color: #3498ff;
-  border-color: var(--rs-input-focus-border);
-}
-.rs-picker-subtle .rs-radio-group-picker .rs-radio-checker > label {
-  color: #8e8e93;
-  color: var(--rs-btn-subtle-text);
-  background-color: transparent;
-  border: none;
-  -webkit-transition: none;
-  transition: none;
-}
-.rs-picker-subtle .rs-radio-group-picker .rs-radio-checker > label:hover,
-.rs-picker-subtle .rs-radio-group-picker .rs-radio-checker > label:focus {
-  color: #575757;
-  color: var(--rs-btn-subtle-hover-text);
-  background-color: #e5e5ea;
-  background-color: var(--rs-btn-subtle-hover-bg);
-}
-.rs-picker-subtle .rs-radio-group-picker .rs-radio-checker > label:active,
-.rs-picker-subtle .rs-radio-group-picker .rs-radio-checker > label.rs-btn-active {
-  color: #272c36;
-  color: var(--rs-btn-subtle-active-text);
-  background-color: #e5e5ea;
-  background-color: var(--rs-btn-subtle-active-bg);
-}
-.rs-picker-subtle .rs-radio-group-picker .rs-radio-checker > label:disabled,
-.rs-picker-subtle .rs-radio-group-picker .rs-radio-checker > label.rs-btn-disabled {
-  color: #c5c6c7;
-  color: var(--rs-btn-subtle-disabled-text);
-  background: none;
-}
-.rs-theme-high-contrast .rs-picker-subtle .rs-radio-group-picker .rs-radio-checker > label:disabled,
-.rs-theme-high-contrast .rs-picker-subtle .rs-radio-group-picker .rs-radio-checker > label.rs-btn-disabled {
-  opacity: 0.5;
-}
-.rs-picker-subtle .rs-radio-group-picker .rs-radio-checker > label-active {
-  background-color: #e5e5ea;
-  background-color: var(--rs-btn-subtle-hover-bg);
-  color: #575757;
-  color: var(--rs-btn-subtle-hover-text);
-}
-.rs-radio-group-picker .rs-radio-checker > label:hover,
-.rs-radio-group-picker .rs-radio-checker > label:focus {
-  color: #575757;
-  color: var(--rs-btn-subtle-hover-text);
-  background-color: #e5e5ea;
-  background-color: var(--rs-btn-subtle-hover-bg);
-}
-.rs-radio-group-picker .rs-radio-checker > label:active,
-.rs-radio-group-picker .rs-radio-checker > label.rs-btn-active {
-  color: #272c36;
-  color: var(--rs-btn-subtle-active-text);
-  background-color: #e5e5ea;
-  background-color: var(--rs-btn-subtle-active-bg);
-}
-.rs-radio-group-picker .rs-radio-checker > label:disabled,
-.rs-radio-group-picker .rs-radio-checker > label.rs-btn-disabled {
-  color: #c5c6c7;
-  color: var(--rs-btn-subtle-disabled-text);
-  background: none;
-}
-.rs-theme-high-contrast .rs-radio-group-picker .rs-radio-checker > label:disabled,
-.rs-theme-high-contrast .rs-radio-group-picker .rs-radio-checker > label.rs-btn-disabled {
-  opacity: 0.5;
+  padding: 7px 0 5px;
+  border-bottom: 2px solid transparent;
 }
 .rs-theme-high-contrast .rs-radio-group-picker .rs-radio-checker > label {
   -webkit-transition: none;
@@ -12902,13 +12719,11 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   color: var(--rs-text-active);
   background: none;
 }
-.rs-radio-group-picker .rs-radio-checked .rs-radio-checker {
-  border-bottom: 2px solid #1675e0;
-  border-bottom: 2px solid var(--rs-text-active);
-}
 .rs-radio-group-picker .rs-radio-checked .rs-radio-checker > label {
   color: #1675e0;
   color: var(--rs-text-active);
+  border-color: #1675e0;
+  border-color: var(--rs-text-active);
 }
 .rs-radio-group-picker .rs-radio-disabled .rs-radio-checker {
   opacity: 0.3;
@@ -13065,6 +12880,9 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   -webkit-transform: rotate(-90deg);
           transform: rotate(-90deg);
 }
+.rs-picker-select-menu-items .rs-picker-menu-group ~ [role='option'] > .rs-picker-select-menu-item {
+  padding-right: 26px;
+}
 .rs-picker-select-menu-item {
   display: block;
   padding: 8px 12px;