rsuite 5.4.2 → 5.4.3

package/esm/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/esm/CheckPicker/test/CheckPicker.test.js

@@ -61,4 +61,11 @@ React.createElement(CheckPicker, {
   onChange: function onChange(newValue) {
     expectType(newValue);
   }
+});
+var pickerRef = /*#__PURE__*/React.createRef();
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  ref: pickerRef,
+  data: []
 });

package/esm/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/esm/SelectPicker/test/SelectPicker.test.js

@@ -49,4 +49,11 @@ React.createElement(SelectPicker, {
   onChange: function onChange(newValue) {
     expectType(newValue);
   }
+});
+var pickerRef = /*#__PURE__*/React.createRef();
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  ref: pickerRef,
+  data: []
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.4.2",
+  "version": "5.4.3",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -37,7 +37,7 @@
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react-virtualized": "^9.22.3",
-    "rsuite-table": "^5.2.2",
+    "rsuite-table": "^5.3.0",
     "schema-typed": "^2.0.2"
   },
   "peerDependencies": {

package/styles/color-modes/dark.less

@@ -27,6 +27,7 @@
   --rs-bg-active: @H700;
   --rs-bg-backdrop: fade(@B900, 80%);
   --rs-state-hover-bg: @B600;
+  --rs-color-focus-ring: 0 0 0 3px fade(@H500, 25%);
   --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
   --rs-state-focus-outline: 3px solid fade(@H500, 25%);
   --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);

package/styles/color-modes/high-contrast.less

@@ -27,6 +27,7 @@
   --rs-bg-active: @H500;
   --rs-bg-backdrop: fade(@B900, 80%);
   --rs-state-hover-bg: @B600;
+  --rs-color-focus-ring: @B000;
   --rs-state-focus-shadow: 0 0 0 3px @B900, 0 0 0 5px @B000;
   --rs-state-focus-shadow-slim: 0 0 0 2px @B000;
   --rs-state-focus-outline: 3px solid fade(@H500, 25%);

package/styles/color-modes/light.less

@@ -34,6 +34,7 @@
   --rs-bg-active: @H500;
   --rs-bg-backdrop: fade(@B900, 30%);
   --rs-state-hover-bg: @H050;
+  --rs-color-focus-ring: fade(@H500, 25%);
   --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
   --rs-state-focus-outline: 3px solid fade(@H500, 25%);
   --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);

package/styles/mixins/utilities.less

@@ -122,26 +122,38 @@
 
 // Useful when adding focus ring to an element
 .with-focus-ring() {
-  &:focus {
+  &:focus-visible {
     .focus-ring();
   }
 }
 
 // Useful when appending the ring into an existing :focus rule
 .focus-ring() {
-  box-shadow: var(--rs-state-focus-shadow);
+  outline: 3px solid var(--rs-color-focus-ring);
+  // box-shadow: var(--rs-state-focus-shadow);
+
+  .high-contrast-mode({
+    outline-offset: 2px;
+  });
 }
 
 .focus-ring(slim) {
-  box-shadow: var(--rs-state-focus-shadow-slim);
+  .focus-ring();
+
+  outline-width: 2px;
+  outline-offset: 0;
 }
 
 .focus-ring(inset) {
-  box-shadow: inset var(--rs-state-focus-shadow);
+  .focus-ring();
+
+  outline-offset: -3px;
 }
 
 .focus-ring(slim-inset) {
-  box-shadow: inset var(--rs-state-focus-shadow-slim);
+  .focus-ring(inset);
+
+  outline-width: 2px;
 }
 
 .focus-ring(outline) {