rsuite 5.16.0 → 5.16.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [5.16.1](https://github.com/rsuite/rsuite/compare/v5.16.0...v5.16.1) (2022-07-15)
+
+### Bug Fixes
+
+- **InputNumber:** fix unexpected focus ring when used within an InputGroup ([#2585](https://github.com/rsuite/rsuite/issues/2585)) ([6f76b57](https://github.com/rsuite/rsuite/commit/6f76b5752bca2e11639d7fe34dd927dd84c98f73))
+- **SelectPicker,CheckPicker:** add missing label prop declaration ([#2586](https://github.com/rsuite/rsuite/issues/2586)) ([e1a8cfe](https://github.com/rsuite/rsuite/commit/e1a8cfe32223ec210ac9a5ff793b973d4bcac131))
+
 # [5.16.0](https://github.com/rsuite/rsuite/compare/v5.15.2...v5.16.0) (2022-07-07)
 
 ### Features

package/Form/styles/mixin.less

@@ -27,7 +27,7 @@
   }
 
   &:focus {
-    box-shadow: var(--rs-state-focus-shadow);
+    .focus-ring();
   }
 
   &:disabled {

package/InputGroup/styles/index.less

@@ -30,7 +30,11 @@
 
   &:not(.rs-input-group-disabled).rs-input-group-focus,
   &:focus-within {
-    box-shadow: var(--rs-state-focus-shadow);
+    .focus-ring();
+  }
+
+  & & {
+    outline: none !important;
   }
 
   .rs-input-number,
@@ -39,7 +43,7 @@
   .rs-picker-date .rs-picker-toggle {
     border: none;
     border-radius: 0;
-    box-shadow: none;
+    outline: none;
   }
 
   // Reset border
@@ -47,7 +51,7 @@
     .rs-input {
       border: none;
       border-radius: 0;
-      box-shadow: none;
+      outline: none;
     }
 
     .rs-input-number:not(:last-child) .rs-input-number {
@@ -144,7 +148,7 @@
       .reset-inside-input-group-btn-size(base);
 
       &:focus {
-        box-shadow: none;
+        outline: none;
       }
 
       // reset border radius

package/cjs/CheckPicker/CheckPicker.d.ts

@@ -1,10 +1,10 @@
 import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
-import { PickerInstance } from '../Picker';
+import { PickerInstance, PickerToggleProps } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 import type { MultipleSelectProps } from '../SelectPicker';
 export declare type ValueType = (number | string)[];
-export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T> {
+export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T>, Pick<PickerToggleProps, 'label'> {
     /** Top the selected option in the options */
     sticky?: boolean;
     /** A picker that can be counted */

package/cjs/CheckPicker/test/CheckPicker.test.js

@@ -81,4 +81,11 @@ var pickerRef = /*#__PURE__*/_react.default.createRef();
 _react.default.createElement(_CheckPicker.default, {
   ref: pickerRef,
   data: []
+}); // With a label
+
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  label: "User",
+  data: []
 });

package/cjs/SelectPicker/SelectPicker.d.ts

@@ -1,6 +1,6 @@
 import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
-import { PickerInstance } from '../Picker';
+import { PickerInstance, PickerToggleProps } from '../Picker';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 import { ListProps } from 'react-virtualized/dist/commonjs/List';
 export interface SelectProps<T> {
@@ -40,7 +40,7 @@ export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValu
     /** Custom render selected items */
     renderValue?: (value: T[], item: ItemDataType<T>[], selectedElement: React.ReactNode) => React.ReactNode;
 }
-export interface SelectPickerProps<T> extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, SelectProps<T> {
+export interface SelectPickerProps<T> extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, SelectProps<T>, Pick<PickerToggleProps, 'label'> {
 }
 export interface SelectPickerComponent {
     <T>(props: SelectPickerProps<T> & {

package/cjs/SelectPicker/test/SelectPicker.test.js

@@ -67,4 +67,11 @@ var pickerRef = /*#__PURE__*/_react.default.createRef();
 _react.default.createElement(_SelectPicker.default, {
   ref: pickerRef,
   data: []
+}); // With a label
+
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  label: "User",
+  data: []
 });

package/dist/rsuite-rtl.css

@@ -7875,10 +7875,11 @@ textarea.rs-input {
   outline: 0;
 }
 .rs-input:focus {
-  -webkit-box-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
-  -webkit-box-shadow: var(--rs-state-focus-shadow);
-          box-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
-          box-shadow: var(--rs-state-focus-shadow);
+  outline: 3px solid rgba(52, 152, 255, 0.25);
+  outline: 3px solid var(--rs-color-focus-ring);
+}
+.rs-theme-high-contrast .rs-input:focus {
+  outline-offset: 2px;
 }
 .rs-input:disabled {
   background-color: #f7f7fa;
@@ -7962,10 +7963,15 @@ textarea.rs-input-sm {
 }
 .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
 .rs-input-group:focus-within {
-  -webkit-box-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
-  -webkit-box-shadow: var(--rs-state-focus-shadow);
-          box-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
-          box-shadow: var(--rs-state-focus-shadow);
+  outline: 3px solid rgba(52, 152, 255, 0.25);
+  outline: 3px solid var(--rs-color-focus-ring);
+}
+.rs-theme-high-contrast .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
+.rs-theme-high-contrast .rs-input-group:focus-within {
+  outline-offset: 2px;
+}
+.rs-input-group .rs-input-group {
+  outline: none !important;
 }
 .rs-input-group .rs-input-number,
 .rs-input-group .rs-input-group-addon,
@@ -7973,14 +7979,12 @@ textarea.rs-input-sm {
 .rs-input-group .rs-picker-date .rs-picker-toggle {
   border: none;
   border-radius: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  outline: none;
 }
 .rs-input-group:not(.rs-input-group-inside) .rs-input {
   border: none;
   border-radius: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  outline: none;
 }
 .rs-input-group:not(.rs-input-group-inside) .rs-input-number:not(:last-child) .rs-input-number-btn-group-vertical {
   border-radius: 0;
@@ -8094,8 +8098,7 @@ textarea.rs-input-sm {
   line-height: 1.42857143;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn:focus {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  outline: none;
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn:first-child {
   border-bottom-right-radius: 6px;
@@ -11729,10 +11732,11 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   outline: 0;
 }
 .rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input:focus {
-  -webkit-box-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
-  -webkit-box-shadow: var(--rs-state-focus-shadow);
-          box-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
-          box-shadow: var(--rs-state-focus-shadow);
+  outline: 3px solid rgba(52, 152, 255, 0.25);
+  outline: 3px solid var(--rs-color-focus-ring);
+}
+.rs-theme-high-contrast .rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input:focus {
+  outline-offset: 2px;
 }
 .rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input:disabled {
   background-color: #f7f7fa;