rsuite 5.4.2 → 5.4.3

package/Button/styles/index.less

@@ -14,7 +14,6 @@
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  outline: 0 !important;
   white-space: nowrap;
   transition: @btn-transition;
   // Reset border style in all browser
@@ -31,10 +30,7 @@
 
   .rs-btn-md();
 
-  &:focus {
-    outline: 0;
-    box-shadow: var(--rs-state-focus-shadow);
-  }
+  .with-focus-ring();
 
   .button-activated({
     color: var(--rs-btn-default-hover-text);

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [5.4.3](https://github.com/rsuite/rsuite/compare/v5.4.2...v5.4.3) (2021-12-30)
+
+### Bug Fixes
+
+- **Drawer:** fix Drawer cannot be closed when backdrop is clicked ([#2259](https://github.com/rsuite/rsuite/issues/2259)) ([a49ee03](https://github.com/rsuite/rsuite/commit/a49ee03db33c11db30597221ca61ce6daa088c4b))
+- **Picker:** add ref to PickerComponentProps ([#2261](https://github.com/rsuite/rsuite/issues/2261)) ([6e3e6c5](https://github.com/rsuite/rsuite/commit/6e3e6c57932af142dc1a74da6b7fffb57ae628ca))
+
 ## [5.4.2](https://github.com/rsuite/rsuite/compare/v5.4.1...v5.4.2) (2021-12-24)
 
 ### Bug Fixes

package/Drawer/styles/index.less

@@ -6,6 +6,9 @@
   position: fixed;
   z-index: @zindex-drawer;
   top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 // Container that the drawer scrolls within

package/Dropdown/styles/index.less

@@ -108,6 +108,7 @@
     z-index: @zindex-dropdown + 1;
     float: left;
     box-shadow: var(--rs-dropdown-shadow);
+    outline: none;
 
     .high-contrast-mode({
       border: 1px solid var(--rs-border-primary);

package/Dropdown/styles/mixin.less

@@ -39,8 +39,6 @@
   padding-right: @dropdown-toggle-padding-right;
   // Fixed: Content is not centered when customizing renderTitle.
   display: inline-block;
-  // Rest `:focus` blue border.
-  outline: none;
   cursor: pointer;
 }
 

package/Navbar/styles/index.less

@@ -73,8 +73,6 @@
 .rs-navbar-brand,
 .rs-navbar-item,
 .rs-navbar-nav > .rs-dropdown-item {
-  outline: 0;
-
   &,
   &:hover,
   &:focus,
@@ -83,7 +81,9 @@
   }
 
   &:focus-visible {
-    .focus-ring();
+    // Navbar is usually placed by the top edge of the page
+    // thus use an inset focus ring to prevent overflow clipping
+    .focus-ring(inset);
 
     .high-contrast-mode({
       .focus-ring(slim-inset);
@@ -108,6 +108,11 @@
 .rs-navbar-nav > .rs-dropdown .rs-dropdown-toggle {
   &:extend(.rs-navbar-item);
 
+  &:focus,
+  &:focus-visible {
+    &:extend(.rs-navbar-item:focus-visible);
+  }
+
   padding-right: @navbar-item-padding-x+ @dropdown-caret-width+ @dropdown-caret-padding;
 
   .high-contrast-mode({

package/Sidenav/styles/index.less

@@ -110,6 +110,12 @@
     width: 100%;
     white-space: normal;
 
+    // Sidenav is usually placed by the left/right edge of the page
+    // thus use an inset focus ring to prevent overflow clipping
+    &:focus {
+      .focus-ring(inset);
+    }
+
     > .rs-icon:not(.rs-dropdown-toggle-caret) {
       font-size: @sidenav-level1-item-font-size;
       margin-right: @sidenav-icon-spacing;

package/cjs/CheckPicker/CheckPicker.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
+import { PickerInstance } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 import type { MultipleSelectProps } from '../SelectPicker';
 export declare type ValueType = (number | string)[];
@@ -10,7 +11,9 @@ export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerL
     countable?: boolean;
 }
 export interface CheckPickerComponent {
-    <T>(props: CheckPickerProps<T>): JSX.Element | null;
+    <T>(props: CheckPickerProps<T> & {
+        ref?: Ref<PickerInstance>;
+    }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;
 }

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

@@ -73,4 +73,12 @@ _react.default.createElement(_CheckPicker.default, {
   onChange: function onChange(newValue) {
     (0, _tsExpect.expectType)(newValue);
   }
+});
+
+var pickerRef = /*#__PURE__*/_react.default.createRef();
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  ref: pickerRef,
+  data: []
 });

package/cjs/SelectPicker/SelectPicker.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
+import { PickerInstance } from '../Picker';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 import { ListProps } from 'react-virtualized/dist/commonjs/List';
 export interface SelectProps<T> {
@@ -42,7 +43,9 @@ export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValu
 export interface SelectPickerProps<T> extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, SelectProps<T> {
 }
 export interface SelectPickerComponent {
-    <T>(props: SelectPickerProps<T>): JSX.Element | null;
+    <T>(props: SelectPickerProps<T> & {
+        ref?: Ref<PickerInstance>;
+    }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<SelectPickerProps<any>>;
 }

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

@@ -59,4 +59,12 @@ _react.default.createElement(_SelectPicker.default, {
   onChange: function onChange(newValue) {
     (0, _tsExpect.expectType)(newValue);
   }
+});
+
+var pickerRef = /*#__PURE__*/_react.default.createRef();
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  ref: pickerRef,
+  data: []
 });