rsuite 5.4.0 → 5.4.4

package/esm/Nav/Nav.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import NavItem from './NavItem';
 import Dropdown from '../Dropdown';
@@ -55,14 +55,17 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelectFromSidenav = _ref$onSelect === void 0 ? onSelectProp : _ref$onSelect;
 
   var activeKey = activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav;
+  var contextValue = useMemo(function () {
+    return {
+      withinNav: true,
+      activeKey: activeKey,
+      onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
+    };
+  }, [activeKey, onSelectFromSidenav, onSelectProp]);
 
   if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
     return /*#__PURE__*/React.createElement(NavContext.Provider, {
-      value: {
-        withinNav: true,
-        activeKey: activeKey,
-        onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
-      }
+      value: contextValue
     }, /*#__PURE__*/React.createElement("ul", _extends({
       ref: ref,
       className: classes
@@ -73,11 +76,7 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   if (sidenav) {
     return /*#__PURE__*/React.createElement(NavContext.Provider, {
-      value: {
-        withinNav: true,
-        activeKey: activeKey,
-        onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
-      }
+      value: contextValue
     }, /*#__PURE__*/React.createElement(Menubar, {
       vertical: !!sidenav
     }, function (menubar, ref) {
@@ -90,11 +89,7 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   return /*#__PURE__*/React.createElement(NavContext.Provider, {
-    value: {
-      withinNav: true,
-      activeKey: activeKey,
-      onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
-    }
+    value: contextValue
   }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: menubarRef,
     className: classes

package/esm/Nav/NavItem.js

@@ -83,7 +83,9 @@ var NavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   if (navbar) {
-    return /*#__PURE__*/React.createElement(NavbarItem, props);
+    return /*#__PURE__*/React.createElement(NavbarItem, _extends({
+      ref: ref
+    }, props));
   }
 
   return /*#__PURE__*/React.createElement(Component, _extends({

package/esm/Navbar/index.d.ts

@@ -3,4 +3,5 @@ export type { NavbarProps } from './Navbar';
 export type { NavbarBodyProps } from './NavbarBody';
 export type { NavbarHeaderProps } from './NavbarHeader';
 export type { NavbarBrandProps } from './NavbarBrand';
+export { NavbarContext } from './Navbar';
 export default Navbar;

package/esm/Navbar/index.js

@@ -1,2 +1,3 @@
 import Navbar from './Navbar';
+export { NavbarContext } from './Navbar';
 export default Navbar;

package/esm/Overlay/Modal.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useRef, useEffect, useState, useCallback } from 'react';
+import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import contains from 'dom-lib/contains';
@@ -72,7 +72,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       open = props.open,
       _props$autoFocus = props.autoFocus,
       autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
-      onBackdropClick = props.onBackdropClick,
       onEsc = props.onEsc,
       onExit = props.onExit,
       onExiting = props.onExiting,
@@ -82,7 +81,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onEntered = props.onEntered,
       onClose = props.onClose,
       onOpen = props.onOpen,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "children", "transition", "dialogTransitionTimeout", "style", "className", "container", "animationProps", "containerClassName", "keyboard", "enforceFocus", "backdrop", "backdropTransitionTimeout", "backdropStyle", "backdropClassName", "open", "autoFocus", "onBackdropClick", "onEsc", "onExit", "onExiting", "onExited", "onEnter", "onEntering", "onEntered", "onClose", "onOpen"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "children", "transition", "dialogTransitionTimeout", "style", "className", "container", "animationProps", "containerClassName", "keyboard", "enforceFocus", "backdrop", "backdropTransitionTimeout", "backdropStyle", "backdropClassName", "open", "autoFocus", "onEsc", "onExit", "onExiting", "onExited", "onEnter", "onEntering", "onEntered", "onClose", "onOpen"]);
 
   var _useState = useState(!open),
       exited = _useState[0],
@@ -139,17 +138,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     handleFocusDialog();
   });
-  var handleBackdropClick = useEventCallback(function (event) {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-
-    onBackdropClick === null || onBackdropClick === void 0 ? void 0 : onBackdropClick(event);
-
-    if (backdrop === true) {
-      onClose === null || onClose === void 0 ? void 0 : onClose(event);
-    }
-  });
   var documentKeyDownListener = useRef();
   var documentFocusListener = useRef();
   var handleOpen = useEventCallback(function () {
@@ -202,17 +190,19 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleExited = useCallback(function () {
     setExited(true);
   }, []);
+  var contextValue = useMemo(function () {
+    return {
+      overlayContainer: function overlayContainer() {
+        return modal.dialog;
+      }
+    };
+  }, [modal.dialog]);
 
   if (!mountModal) {
     return null;
   }
 
   var renderBackdrop = function renderBackdrop() {
-    var backdropPorps = {
-      style: backdropStyle,
-      onClick: handleBackdropClick
-    };
-
     if (Transition) {
       return /*#__PURE__*/React.createElement(Fade, {
         transitionAppear: true,
@@ -224,18 +214,19 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
         return /*#__PURE__*/React.createElement("div", _extends({
           "aria-hidden": true
-        }, rest, backdropPorps, {
+        }, rest, {
+          style: backdropStyle,
           ref: mergeRefs(modal.setBackdropRef, ref),
           className: classNames(backdropClassName, className)
         }));
       });
     }
 
-    return /*#__PURE__*/React.createElement("div", _extends({
-      "aria-hidden": true
-    }, backdropPorps, {
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": true,
+      style: backdropStyle,
       className: backdropClassName
-    }));
+    });
   };
 
   var dialogElement = Transition ? /*#__PURE__*/React.createElement(Transition, _extends({}, animationProps, {
@@ -251,17 +242,13 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onEntered: onEntered
   }), children) : children;
   return /*#__PURE__*/React.createElement(OverlayContext.Provider, {
-    value: {
-      overlayContainer: function overlayContainer() {
-        return modal.dialog;
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Portal, null, backdrop && renderBackdrop(), /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: mergeRefs(modal.setDialogRef, ref),
     style: style,
     className: className,
     tabIndex: -1
-  }), backdrop && renderBackdrop(), dialogElement)));
+  }), dialogElement)));
 });
 export var modalPropTypes = {
   as: PropTypes.elementType,
@@ -286,7 +273,6 @@ Modal.propTypes = _extends({}, animationPropTypes, modalPropTypes, {
   dialogTransitionTimeout: PropTypes.number,
   backdropTransitionTimeout: PropTypes.number,
   transition: PropTypes.any,
-  onEsc: PropTypes.func,
-  onBackdropClick: PropTypes.func
+  onEsc: PropTypes.func
 });
 export default Modal;

package/esm/PanelGroup/PanelGroup.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useControlled } from '../utils';
 export var PanelGroupContext = /*#__PURE__*/React.createContext({});
@@ -34,16 +34,19 @@ var PanelGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setActiveKey(activeKey);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(activeKey, event);
   }, [onSelect, setActiveKey]);
+  var contextValue = useMemo(function () {
+    return {
+      accordion: accordion,
+      activeKey: activeKey,
+      onGroupSelect: handleSelect
+    };
+  }, [accordion, activeKey, handleSelect]);
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     role: accordion ? 'tablist' : undefined,
     className: classes
   }), /*#__PURE__*/React.createElement(PanelGroupContext.Provider, {
-    value: {
-      accordion: accordion,
-      activeKey: activeKey,
-      onGroupSelect: handleSelect
-    }
+    value: contextValue
   }, children));
 });
 PanelGroup.displayName = 'PanelGroup';

package/esm/Picker/DropdownMenu.js

@@ -99,6 +99,11 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   useEffect(function () {
     var container = menuBodyContainerRef.current;
+
+    if (!container) {
+      return;
+    }
+
     var activeItem = container.querySelector("." + prefix('item-focus'));
 
     if (!activeItem) {

package/esm/Picker/PickerToggle.js

@@ -90,11 +90,9 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [input, onFocus]);
   var handleBlur = useCallback(function (event) {
-    if (document.activeElement !== inputRef.current) {
-      var _inputRef$current2;
-
+    if (inputRef.current && document.activeElement !== inputRef.current) {
       setActive(false);
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      inputRef.current.blur();
     }
 
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);

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/esm/Toggle/Toggle.js

@@ -66,7 +66,8 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, rest), /*#__PURE__*/React.createElement("input", {
     ref: inputRef,
     type: "checkbox",
-    checked: checked,
+    checked: checkedProp,
+    defaultChecked: defaultChecked,
     disabled: disabled,
     readOnly: readOnly,
     onChange: handleInputChange,

package/esm/Tree/Tree.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
 import TreePicker from '../TreePicker';
 import TreeContext from './TreeContext';
 
@@ -15,10 +15,13 @@ export var TREE_NODE_DROP_POSITION;
 })(TREE_NODE_DROP_POSITION || (TREE_NODE_DROP_POSITION = {}));
 
 var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(TreeContext.Provider, {
-    value: {
+  var contextValue = useMemo(function () {
+    return {
       inline: true
-    }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(TreeContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/React.createElement(TreePicker, _extends({
     ref: ref
   }, props)));

package/esm/Uploader/UploadFileItem.d.ts

@@ -4,7 +4,7 @@ import { UploaderLocale } from '../locales';
 import { WithAsProps } from '../@types/common';
 export interface UploadFileItemProps extends WithAsProps {
     file: FileType;
-    listType: 'text' | 'picture-text' | 'picture';
+    listType?: 'text' | 'picture-text' | 'picture';
     disabled?: boolean;
     className?: string;
     maxPreviewFileSize?: number;

package/esm/Uploader/UploadFileItem.js

@@ -276,7 +276,7 @@ UploadFileItem.displayName = 'UploadFileItem';
 UploadFileItem.propTypes = {
   locale: PropTypes.any,
   file: PropTypes.object.isRequired,
-  listType: PropTypes.oneOf(['text', 'picture-text', 'picture']).isRequired,
+  listType: PropTypes.oneOf(['text', 'picture-text', 'picture']),
   disabled: PropTypes.bool,
   className: PropTypes.string,
   maxPreviewFileSize: PropTypes.number,

package/esm/Uploader/Uploader.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import find from 'lodash/find';
 import FileItem from './UploadFileItem';
 import UploadTrigger from './UploadTrigger';
-import { ajaxUpload, useClassNames, useCustom, guid } from '../utils';
+import { ajaxUpload, useClassNames, useCustom, guid, useWillUnmount } from '../utils';
 import Plaintext from '../Plaintext';
 
 var getFiles = function getFiles(event) {
@@ -83,6 +83,9 @@ var useFileList = function useFileList(defaultFileList) {
     (_fileListUpdateCallba = fileListUpdateCallback.current) === null || _fileListUpdateCallba === void 0 ? void 0 : _fileListUpdateCallba.call(fileListUpdateCallback, fileList);
     fileListUpdateCallback.current = null;
   }, [fileList]);
+  useWillUnmount(function () {
+    fileListUpdateCallback.current = null;
+  });
   var dispatchCallback = useCallback(function (action, callback) {
     dispatch(action);
     fileListUpdateCallback.current = callback;

package/esm/utils/index.d.ts

@@ -40,3 +40,4 @@ export { default as useUpdatedRef } from './useUpdatedRef';
 export { default as useWillUnmount } from './useWillUnmount';
 export { default as useUpdateEffect } from './useUpdateEffect';
 export { default as useIsMounted } from './useIsMounted';
+export { default as useMount } from './useMount';

package/esm/utils/index.js

@@ -42,4 +42,5 @@ export { default as useEventCallback } from './useEventCallback';
 export { default as useUpdatedRef } from './useUpdatedRef';
 export { default as useWillUnmount } from './useWillUnmount';
 export { default as useUpdateEffect } from './useUpdateEffect';
-export { default as useIsMounted } from './useIsMounted';
+export { default as useIsMounted } from './useIsMounted';
+export { default as useMount } from './useMount';

package/esm/utils/propTypeChecker.d.ts

@@ -1,7 +1,3 @@
-import PropTypes, { Requireable, Validator } from 'prop-types';
-declare type ExtractValue<T extends ReadonlyArray<Validator<any>>> = {
-    [K in keyof T]: T[K] extends Validator<infer V> ? V : never;
-};
-export declare function tupleType<T extends readonly Validator<any>[]>(...types: T): Requireable<ExtractValue<T>>;
+import PropTypes from 'prop-types';
+export declare function tupleType<T>(...typeCheckers: any[]): PropTypes.Requireable<T>;
 export declare const refType: PropTypes.Requireable<any>;
-export {};

package/esm/utils/propTypeChecker.js

@@ -1,69 +1,17 @@
 import PropTypes from 'prop-types';
-var ANONYMOUS = '';
-
-function createChainableTypeChecker(validate) {
-  function checkType(isRequired, props, propName, componentName, location, propFullName) {
-    componentName = componentName || ANONYMOUS;
-    propFullName = propFullName || propName;
-
-    if (props[propName] == null) {
-      if (isRequired) {
-        if (props[propName] === null) {
-          return new Error('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
-        }
-
-        return new Error('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
-      }
-
-      return null;
-    } else {
-      return validate(props, propName, componentName, location, propFullName);
-    }
-  }
-
-  var chainedCheckType = Object.assign(checkType.bind(null, false), {
-    isRequired: checkType.bind(null, true)
-  });
-  return chainedCheckType;
-}
-
 export function tupleType() {
-  for (var _len = arguments.length, types = new Array(_len), _key = 0; _key < _len; _key++) {
-    types[_key] = arguments[_key];
+  for (var _len = arguments.length, typeCheckers = new Array(_len), _key = 0; _key < _len; _key++) {
+    typeCheckers[_key] = arguments[_key];
   }
 
-  return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
-    var value = props[propName];
-
-    if (!location) {
-      location = 'prop';
-    }
-
-    if (!propFullName) {
-      propFullName = propName;
-    }
-
-    if (!Array.isArray(value)) {
-      return new Error("Invalid " + location + " `" + propFullName + "` supplied to `" + componentName + "`, expected " + types.length + "-element array");
-    }
-
-    if (value.length === 0) {
-      return null;
-    }
-
-    if (value.length !== types.length) {
-      return new Error("Invalid " + location + " `" + propFullName + "` supplied to `" + componentName + "`, expected " + types.length + "-element array, got array of length " + value.length);
-    }
-
-    for (var i = 0; i < value.length; ++i) {
-      var error = types[i](value, String(i), componentName, 'element', propFullName + "[" + i + "]");
+  return PropTypes.arrayOf(function (value, index) {
+    var _typeCheckers$index;
 
-      if (error) {
-        return error;
-      }
+    for (var _len2 = arguments.length, rest = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+      rest[_key2 - 2] = arguments[_key2];
     }
 
-    return null;
+    return (_typeCheckers$index = typeCheckers[index]).call.apply(_typeCheckers$index, [PropTypes, value, index].concat(rest));
   });
 }
 export var refType = PropTypes.oneOfType([PropTypes.func, PropTypes.any]);

package/esm/utils/useClickOutside.js

@@ -13,8 +13,12 @@ export default function useClickOutside(_ref) {
   useEffect(function () {
     if (enabled) {
       var eventHandler = function eventHandler(event) {
-        if (isOutsideRef.current(event)) {
-          handleRef.current(event);
+        var _isOutsideRef$current;
+
+        if ((_isOutsideRef$current = isOutsideRef.current) !== null && _isOutsideRef$current !== void 0 && _isOutsideRef$current.call(isOutsideRef, event)) {
+          var _handleRef$current;
+
+          (_handleRef$current = handleRef.current) === null || _handleRef$current === void 0 ? void 0 : _handleRef$current.call(handleRef, event);
         }
       };
 

package/esm/utils/useMount.d.ts

@@ -0,0 +1,2 @@
+declare const useMount: (callback: () => void) => void;
+export default useMount;

package/esm/utils/useMount.js

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react';
+
+var useMount = function useMount(callback) {
+  var mountRef = useRef(callback);
+  mountRef.current = callback;
+  useEffect(function () {
+    var _mountRef$current;
+
+    (_mountRef$current = mountRef.current) === null || _mountRef$current === void 0 ? void 0 : _mountRef$current.call(mountRef);
+  }, []);
+};
+
+export default useMount;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.4.0",
+  "version": "5.4.4",
   "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.1",
     "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) {