From 3e04e00d8ad1ab5b40dddf4b7ff679d203879e49 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 31 May 2024 14:59:59 -0400 Subject: [PATCH 1/9] Remove useIsFocusVisible util --- packages/mui-base/src/useButton/useButton.ts | 22 +-- packages/mui-base/src/useSlider/useSlider.ts | 17 +- packages/mui-base/src/useSwitch/useSwitch.ts | 22 +-- packages/mui-joy/src/Link/Link.tsx | 16 +- packages/mui-joy/src/Tooltip/Tooltip.tsx | 16 +- .../mui-material/src/ButtonBase/ButtonBase.js | 16 +- packages/mui-material/src/Link/Link.js | 17 +- packages/mui-material/src/Rating/Rating.js | 23 +-- packages/mui-material/src/Tooltip/Tooltip.js | 18 +- packages/mui-material/src/utils/index.d.ts | 1 - packages/mui-material/src/utils/index.js | 1 - .../src/utils/useIsFocusVisible.d.ts | 3 - .../src/utils/useIsFocusVisible.js | 4 - packages/mui-utils/src/index.ts | 2 +- .../mui-utils/src/isFocusVisible/index.ts | 1 + .../src/isFocusVisible/isFocusVisible.ts | 20 ++ .../mui-utils/src/useIsFocusVisible/index.ts | 2 - .../useIsFocusVisible.test.js | 126 ------------- .../useIsFocusVisible/useIsFocusVisible.ts | 175 ------------------ 19 files changed, 59 insertions(+), 443 deletions(-) delete mode 100644 packages/mui-material/src/utils/useIsFocusVisible.d.ts delete mode 100644 packages/mui-material/src/utils/useIsFocusVisible.js create mode 100644 packages/mui-utils/src/isFocusVisible/index.ts create mode 100644 packages/mui-utils/src/isFocusVisible/isFocusVisible.ts delete mode 100644 packages/mui-utils/src/useIsFocusVisible/index.ts delete mode 100644 packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.test.js delete mode 100644 packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.ts diff --git a/packages/mui-base/src/useButton/useButton.ts b/packages/mui-base/src/useButton/useButton.ts index f8520a751abdb8..876fe1a635382d 100644 --- a/packages/mui-base/src/useButton/useButton.ts +++ b/packages/mui-base/src/useButton/useButton.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { unstable_useForkRef as useForkRef, - unstable_useIsFocusVisible as useIsFocusVisible, + unstable_isFocusVisible as isFocusVisible, } from '@mui/utils'; import { UseButtonParameters, @@ -38,22 +38,11 @@ export function useButton(parameters: UseButtonParameters = {}): UseButtonReturn const [active, setActive] = React.useState(false); - const { - isFocusVisibleRef, - onFocus: handleFocusVisible, - onBlur: handleBlurVisible, - ref: focusVisibleRef, - } = useIsFocusVisible(); - const [focusVisible, setFocusVisible] = React.useState(false); if (disabled && !focusableWhenDisabled && focusVisible) { setFocusVisible(false); } - React.useEffect(() => { - isFocusVisibleRef.current = focusVisible; - }, [focusVisible, isFocusVisibleRef]); - const [rootElementName, updateRootElementName] = useRootElementName({ rootElementName: rootElementNameProp ?? (href || to ? 'a' : undefined), componentName: 'Button', @@ -68,9 +57,7 @@ export function useButton(parameters: UseButtonParameters = {}): UseButtonReturn }; const createHandleBlur = (otherHandlers: EventHandlers) => (event: React.FocusEvent) => { - handleBlurVisible(event); - - if (isFocusVisibleRef.current === false) { + if (!isFocusVisible(event)) { setFocusVisible(false); } @@ -84,8 +71,7 @@ export function useButton(parameters: UseButtonParameters = {}): UseButtonReturn buttonRef.current = event.currentTarget; } - handleFocusVisible(event); - if (isFocusVisibleRef.current === true) { + if (isFocusVisible(event)) { setFocusVisible(true); otherHandlers.onFocusVisible?.(event); } @@ -176,7 +162,7 @@ export function useButton(parameters: UseButtonParameters = {}): UseButtonReturn } }; - const handleRef = useForkRef(updateRootElementName, externalRef, focusVisibleRef, buttonRef); + const handleRef = useForkRef(updateRootElementName, externalRef, buttonRef); interface AdditionalButtonProps { type?: React.ButtonHTMLAttributes['type']; diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts index 94869cc604debb..8cb8bd83c1f85c 100644 --- a/packages/mui-base/src/useSlider/useSlider.ts +++ b/packages/mui-base/src/useSlider/useSlider.ts @@ -6,7 +6,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_useForkRef as useForkRef, - unstable_useIsFocusVisible as useIsFocusVisible, + unstable_isFocusVisible as isFocusVisible, visuallyHidden, clamp, } from '@mui/utils'; @@ -265,23 +265,15 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue const marksValues = (marks as Mark[]).map((mark: Mark) => mark.value); - const { - isFocusVisibleRef, - onBlur: handleBlurVisible, - onFocus: handleFocusVisible, - ref: focusVisibleRef, - } = useIsFocusVisible(); const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1); const sliderRef = React.useRef(); - const handleFocusRef = useForkRef(focusVisibleRef, sliderRef); - const handleRef = useForkRef(ref, handleFocusRef); + const handleRef = useForkRef(ref, sliderRef); const createHandleHiddenInputFocus = (otherHandlers: EventHandlers) => (event: React.FocusEvent) => { const index = Number(event.currentTarget.getAttribute('data-index')); - handleFocusVisible(event); - if (isFocusVisibleRef.current === true) { + if (isFocusVisible(event)) { setFocusedThumbIndex(index); } setOpen(index); @@ -289,8 +281,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue }; const createHandleHiddenInputBlur = (otherHandlers: EventHandlers) => (event: React.FocusEvent) => { - handleBlurVisible(event); - if (isFocusVisibleRef.current === false) { + if (!isFocusVisible(event)) { setFocusedThumbIndex(-1); } setOpen(-1); diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts index ed30f150321346..dc52820a793613 100644 --- a/packages/mui-base/src/useSwitch/useSwitch.ts +++ b/packages/mui-base/src/useSwitch/useSwitch.ts @@ -3,7 +3,7 @@ import * as React from 'react'; import { unstable_useControlled as useControlled, unstable_useForkRef as useForkRef, - unstable_useIsFocusVisible as useIsFocusVisible, + unstable_isFocusVisible as isFocusVisible, } from '@mui/utils'; import { UseSwitchParameters, UseSwitchReturnValue } from './useSwitch.types'; @@ -51,22 +51,11 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue { otherProps.onChange?.(event); }; - const { - isFocusVisibleRef, - onBlur: handleBlurVisible, - onFocus: handleFocusVisible, - ref: focusVisibleRef, - } = useIsFocusVisible(); - const [focusVisible, setFocusVisible] = React.useState(false); if (disabled && focusVisible) { setFocusVisible(false); } - React.useEffect(() => { - isFocusVisibleRef.current = focusVisible; - }, [focusVisible, isFocusVisibleRef]); - const inputRef = React.useRef(null); const createHandleFocus = @@ -77,8 +66,7 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue { inputRef.current = event.currentTarget; } - handleFocusVisible(event); - if (isFocusVisibleRef.current === true) { + if (isFocusVisible(event)) { setFocusVisible(true); onFocusVisible?.(event); } @@ -90,9 +78,7 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue { const createHandleBlur = (otherProps: React.InputHTMLAttributes) => (event: React.FocusEvent) => { - handleBlurVisible(event); - - if (isFocusVisibleRef.current === false) { + if (!isFocusVisible(event)) { setFocusVisible(false); } @@ -100,7 +86,7 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue { otherProps.onBlur?.(event); }; - const handleInputRef = useForkRef(focusVisibleRef, inputRef); + const handleInputRef = useForkRef(inputRef); const getInputProps: UseSwitchReturnValue['getInputProps'] = (otherProps = {}) => ({ checked: checkedProp, diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx index bac2fbe4f315bc..fda6a3efc63396 100644 --- a/packages/mui-joy/src/Link/Link.tsx +++ b/packages/mui-joy/src/Link/Link.tsx @@ -6,7 +6,7 @@ import { OverridableComponent } from '@mui/types'; import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef, - unstable_useIsFocusVisible as useIsFocusVisible, + unstable_isFocusVisible as isFocusVisible, unstable_isMuiElement as isMuiElement, } from '@mui/utils'; import { unstable_extendSxProp as extendSxProp } from '@mui/system'; @@ -216,17 +216,10 @@ const Link = React.forwardRef(function Link(inProps, ref) { const level = nesting || inheriting ? inProps.level || 'inherit' : levelProp; - const { - isFocusVisibleRef, - onBlur: handleBlurVisible, - onFocus: handleFocusVisible, - ref: focusVisibleRef, - } = useIsFocusVisible(); const [focusVisible, setFocusVisible] = React.useState(false); - const handleRef = useForkRef(ref, focusVisibleRef) as React.Ref; + const handleRef = useForkRef(ref) as React.Ref; const handleBlur = (event: React.FocusEvent) => { - handleBlurVisible(event); - if (isFocusVisibleRef.current === false) { + if (!isFocusVisible(event)) { setFocusVisible(false); } if (onBlur) { @@ -234,8 +227,7 @@ const Link = React.forwardRef(function Link(inProps, ref) { } }; const handleFocus = (event: React.FocusEvent) => { - handleFocusVisible(event); - if (isFocusVisibleRef.current === true) { + if (isFocusVisible(event)) { setFocusVisible(true); } if (onFocus) { diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx index b3c6e14d88324a..ac6e06172ef560 100644 --- a/packages/mui-joy/src/Tooltip/Tooltip.tsx +++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx @@ -7,7 +7,7 @@ import { unstable_useControlled as useControlled, unstable_useEventCallback as useEventCallback, unstable_useForkRef as useForkRef, - unstable_useIsFocusVisible as useIsFocusVisible, + unstable_isFocusVisible as isFocusVisible, unstable_useId as useId, unstable_useTimeout as useTimeout, unstable_Timeout as Timeout, @@ -333,18 +333,11 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { }); }; - const { - isFocusVisibleRef, - onBlur: handleBlurVisible, - onFocus: handleFocusVisible, - ref: focusVisibleRef, - } = useIsFocusVisible(); // We don't necessarily care about the focusVisible state (which is safe to access via ref anyway). // We just need to re-render the Tooltip if the focus-visible state changes. const [, setChildIsFocusVisible] = React.useState(false); const handleBlur = (event: React.FocusEvent | React.MouseEvent) => { - handleBlurVisible(event as React.FocusEvent); - if (isFocusVisibleRef.current === false) { + if (!isFocusVisible(event as React.FocusEvent)) { setChildIsFocusVisible(false); handleMouseLeave(event as React.MouseEvent); } @@ -358,8 +351,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { setChildNode(event.currentTarget); } - handleFocusVisible(event as React.FocusEvent); - if (isFocusVisibleRef.current === true) { + if (!isFocusVisible(event as React.FocusEvent)) { setChildIsFocusVisible(true); handleMouseOver(event as React.MouseEvent); } @@ -423,7 +415,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { }, [handleClose, open]); const handleUseRef = useForkRef(setChildNode, ref); - const handleFocusRef = useForkRef(focusVisibleRef, handleUseRef); + const handleFocusRef = useForkRef(handleUseRef); const handleRef = useForkRef( (children as unknown as { ref: React.Ref }).ref, handleFocusRef, diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js index e2dc37b66a9821..80b0d80da89e16 100644 --- a/packages/mui-material/src/ButtonBase/ButtonBase.js +++ b/packages/mui-material/src/ButtonBase/ButtonBase.js @@ -5,11 +5,11 @@ import clsx from 'clsx'; import refType from '@mui/utils/refType'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; +import isFocusVisible from '@mui/utils/isFocusVisible'; import { styled } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; import useForkRef from '../utils/useForkRef'; import useEventCallback from '../utils/useEventCallback'; -import useIsFocusVisible from '../utils/useIsFocusVisible'; import TouchRipple from './TouchRipple'; import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses'; @@ -112,12 +112,6 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) { const rippleRef = React.useRef(null); const handleRippleRef = useForkRef(rippleRef, touchRippleRef); - const { - isFocusVisibleRef, - onFocus: handleFocusVisible, - onBlur: handleBlurVisible, - ref: focusVisibleRef, - } = useIsFocusVisible(); const [focusVisible, setFocusVisible] = React.useState(false); if (disabled && focusVisible) { setFocusVisible(false); @@ -182,8 +176,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) { const handleBlur = useRippleHandler( 'stop', (event) => { - handleBlurVisible(event); - if (isFocusVisibleRef.current === false) { + if (!isFocusVisible(event)) { setFocusVisible(false); } if (onBlur) { @@ -199,8 +192,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) { buttonRef.current = event.currentTarget; } - handleFocusVisible(event); - if (isFocusVisibleRef.current === true) { + if (isFocusVisible(event)) { setFocusVisible(true); if (onFocusVisible) { @@ -297,7 +289,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) { } } - const handleRef = useForkRef(ref, focusVisibleRef, buttonRef); + const handleRef = useForkRef(ref, buttonRef); if (process.env.NODE_ENV !== 'production') { // eslint-disable-next-line react-hooks/rules-of-hooks diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js index 7ee5ec75e5940f..4d7bd87620902a 100644 --- a/packages/mui-material/src/Link/Link.js +++ b/packages/mui-material/src/Link/Link.js @@ -5,10 +5,10 @@ import clsx from 'clsx'; import { alpha } from '@mui/system/colorManipulator'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; +import isFocusVisible from '@mui/utils/isFocusVisible'; import capitalize from '../utils/capitalize'; import { styled, useTheme } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; -import useIsFocusVisible from '../utils/useIsFocusVisible'; import useForkRef from '../utils/useForkRef'; import Typography from '../Typography'; import linkClasses, { getLinkUtilityClass } from './linkClasses'; @@ -142,17 +142,9 @@ const Link = React.forwardRef(function Link(inProps, ref) { ...other } = props; - const { - isFocusVisibleRef, - onBlur: handleBlurVisible, - onFocus: handleFocusVisible, - ref: focusVisibleRef, - } = useIsFocusVisible(); const [focusVisible, setFocusVisible] = React.useState(false); - const handlerRef = useForkRef(ref, focusVisibleRef); const handleBlur = (event) => { - handleBlurVisible(event); - if (isFocusVisibleRef.current === false) { + if (!isFocusVisible(event)) { setFocusVisible(false); } if (onBlur) { @@ -160,8 +152,7 @@ const Link = React.forwardRef(function Link(inProps, ref) { } }; const handleFocus = (event) => { - handleFocusVisible(event); - if (isFocusVisibleRef.current === true) { + if (isFocusVisible(event)) { setFocusVisible(true); } if (onFocus) { @@ -188,7 +179,7 @@ const Link = React.forwardRef(function Link(inProps, ref) { component={component} onBlur={handleBlur} onFocus={handleFocus} - ref={handlerRef} + ref={ref} ownerState={ownerState} variant={variant} {...other} diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js index 3648cfb33d344d..f73fce03370c0d 100644 --- a/packages/mui-material/src/Rating/Rating.js +++ b/packages/mui-material/src/Rating/Rating.js @@ -7,13 +7,8 @@ import visuallyHidden from '@mui/utils/visuallyHidden'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; import { useRtl } from '@mui/system/RtlProvider'; -import { - capitalize, - useForkRef, - useIsFocusVisible, - useControlled, - unstable_useId as useId, -} from '../utils'; +import isFocusVisible from '@mui/utils/isFocusVisible'; +import { capitalize, useForkRef, useControlled, unstable_useId as useId } from '../utils'; import Star from '../internal/svg-icons/Star'; import StarBorder from '../internal/svg-icons/StarBorder'; import { styled } from '../zero-styled'; @@ -377,16 +372,10 @@ const Rating = React.forwardRef(function Rating(inProps, ref) { value = focus; } - const { - isFocusVisibleRef, - onBlur: handleBlurVisible, - onFocus: handleFocusVisible, - ref: focusVisibleRef, - } = useIsFocusVisible(); const [focusVisible, setFocusVisible] = React.useState(false); const rootRef = React.useRef(); - const handleRef = useForkRef(focusVisibleRef, rootRef, ref); + const handleRef = useForkRef(rootRef, ref); const handleMouseMove = (event) => { if (onMouseMove) { @@ -475,8 +464,7 @@ const Rating = React.forwardRef(function Rating(inProps, ref) { }; const handleFocus = (event) => { - handleFocusVisible(event); - if (isFocusVisibleRef.current === true) { + if (isFocusVisible(event)) { setFocusVisible(true); } @@ -492,8 +480,7 @@ const Rating = React.forwardRef(function Rating(inProps, ref) { return; } - handleBlurVisible(event); - if (isFocusVisibleRef.current === false) { + if (!isFocusVisible(event)) { setFocusVisible(false); } diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index f9425f6f6a3430..6e835721fd2ec6 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -8,6 +8,7 @@ import { appendOwnerState } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; +import isFocusVisible from '@mui/utils/isFocusVisible'; import { styled, useTheme } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; @@ -16,7 +17,6 @@ import Popper from '../Popper'; import useEventCallback from '../utils/useEventCallback'; import useForkRef from '../utils/useForkRef'; import useId from '../utils/useId'; -import useIsFocusVisible from '../utils/useIsFocusVisible'; import useControlled from '../utils/useControlled'; import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses'; @@ -466,18 +466,9 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { }); }; - const { - isFocusVisibleRef, - onBlur: handleBlurVisible, - onFocus: handleFocusVisible, - ref: focusVisibleRef, - } = useIsFocusVisible(); - // We don't necessarily care about the focusVisible state (which is safe to access via ref anyway). - // We just need to re-render the Tooltip if the focus-visible state changes. const [, setChildIsFocusVisible] = React.useState(false); const handleBlur = (event) => { - handleBlurVisible(event); - if (isFocusVisibleRef.current === false) { + if (!isFocusVisible(event)) { setChildIsFocusVisible(false); handleMouseLeave(event); } @@ -491,8 +482,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { setChildNode(event.currentTarget); } - handleFocusVisible(event); - if (isFocusVisibleRef.current === true) { + if (isFocusVisible(event)) { setChildIsFocusVisible(true); handleMouseOver(event); } @@ -555,7 +545,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { }; }, [handleClose, open]); - const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref); + const handleRef = useForkRef(children.ref, setChildNode, ref); // There is no point in displaying an empty tooltip. // So we exclude all falsy values, except 0, which is valid. diff --git a/packages/mui-material/src/utils/index.d.ts b/packages/mui-material/src/utils/index.d.ts index 4f675ba362d039..749cce071ace56 100644 --- a/packages/mui-material/src/utils/index.d.ts +++ b/packages/mui-material/src/utils/index.d.ts @@ -14,5 +14,4 @@ export { default as unsupportedProp } from './unsupportedProp'; export { default as useControlled } from './useControlled'; export { default as useEventCallback } from './useEventCallback'; export { default as useForkRef } from './useForkRef'; -export { default as useIsFocusVisible } from './useIsFocusVisible'; export { unstable_ClassNameGenerator } from '@mui/base/ClassNameGenerator'; diff --git a/packages/mui-material/src/utils/index.js b/packages/mui-material/src/utils/index.js index 415505ff745dee..3a9a621f494112 100644 --- a/packages/mui-material/src/utils/index.js +++ b/packages/mui-material/src/utils/index.js @@ -17,7 +17,6 @@ export { default as unsupportedProp } from './unsupportedProp'; export { default as useControlled } from './useControlled'; export { default as useEventCallback } from './useEventCallback'; export { default as useForkRef } from './useForkRef'; -export { default as useIsFocusVisible } from './useIsFocusVisible'; // TODO: remove this export once ClassNameGenerator is stable // eslint-disable-next-line @typescript-eslint/naming-convention export const unstable_ClassNameGenerator = { diff --git a/packages/mui-material/src/utils/useIsFocusVisible.d.ts b/packages/mui-material/src/utils/useIsFocusVisible.d.ts deleted file mode 100644 index b1d9d514e158b6..00000000000000 --- a/packages/mui-material/src/utils/useIsFocusVisible.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import useIsFocusVisible from '@mui/utils/useIsFocusVisible'; - -export default useIsFocusVisible; diff --git a/packages/mui-material/src/utils/useIsFocusVisible.js b/packages/mui-material/src/utils/useIsFocusVisible.js deleted file mode 100644 index 9cfe9a7a1cb64c..00000000000000 --- a/packages/mui-material/src/utils/useIsFocusVisible.js +++ /dev/null @@ -1,4 +0,0 @@ -'use client'; -import useIsFocusVisible from '@mui/utils/useIsFocusVisible'; - -export default useIsFocusVisible; diff --git a/packages/mui-utils/src/index.ts b/packages/mui-utils/src/index.ts index 44d58f355cd99d..449af6c59a44eb 100644 --- a/packages/mui-utils/src/index.ts +++ b/packages/mui-utils/src/index.ts @@ -27,7 +27,7 @@ export { default as unstable_useForkRef } from './useForkRef'; export { default as unstable_useLazyRef } from './useLazyRef'; export { default as unstable_useTimeout, Timeout as unstable_Timeout } from './useTimeout'; export { default as unstable_useOnMount } from './useOnMount'; -export { default as unstable_useIsFocusVisible } from './useIsFocusVisible'; +export { default as unstable_isFocusVisible } from './isFocusVisible'; export { default as unstable_getScrollbarSize } from './getScrollbarSize'; export { detectScrollType as unstable_detectScrollType, diff --git a/packages/mui-utils/src/isFocusVisible/index.ts b/packages/mui-utils/src/isFocusVisible/index.ts new file mode 100644 index 00000000000000..197b1d490a2d67 --- /dev/null +++ b/packages/mui-utils/src/isFocusVisible/index.ts @@ -0,0 +1 @@ +export { default } from './isFocusVisible'; diff --git a/packages/mui-utils/src/isFocusVisible/isFocusVisible.ts b/packages/mui-utils/src/isFocusVisible/isFocusVisible.ts new file mode 100644 index 00000000000000..8869fe4faa03ed --- /dev/null +++ b/packages/mui-utils/src/isFocusVisible/isFocusVisible.ts @@ -0,0 +1,20 @@ +/** + * Returns a boolean indicating if the event's target has :focus-visible + */ +export default function isFocusVisible(event: React.FocusEvent): boolean { + const { target } = event; + try { + return target.matches(':focus-visible'); + } catch (error) { + // if (process.env.NODE_ENV !== 'production') { + // console.warn( + // [ + // 'MUI: The `:focus-visible` pseudo class is not supported in this browser.', + // 'Some components rely on this feature to work properly.', + // ].join('\n'), + // ); + // } + } + + return false; +} diff --git a/packages/mui-utils/src/useIsFocusVisible/index.ts b/packages/mui-utils/src/useIsFocusVisible/index.ts deleted file mode 100644 index 9f7a0b9ab5e7ad..00000000000000 --- a/packages/mui-utils/src/useIsFocusVisible/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './useIsFocusVisible'; -export * from './useIsFocusVisible'; diff --git a/packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.test.js b/packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.test.js deleted file mode 100644 index d0c9350a1e0ad8..00000000000000 --- a/packages/mui-utils/src/useIsFocusVisible/useIsFocusVisible.test.js +++ /dev/null @@ -1,126 +0,0 @@ -import { expect } from 'chai'; -import * as React from 'react'; -import * as ReactDOMClient from 'react-dom/client'; -import { - act, - createRenderer, - focusVisible, - simulatePointerDevice, - programmaticFocusTriggersFocusVisible, -} from '@mui/internal-test-utils'; -import useIsFocusVisible, { teardown as teardownFocusVisible } from './useIsFocusVisible'; -import useForkRef from '../useForkRef'; - -const SimpleButton = React.forwardRef(function SimpleButton(props, ref) { - const { - isFocusVisibleRef, - onBlur: handleBlurVisible, - onFocus: handleFocusVisible, - ref: focusVisibleRef, - } = useIsFocusVisible(); - - const handleRef = useForkRef(focusVisibleRef, ref); - - const [isFocusVisible, setIsFocusVisible] = React.useState(false); - - const handleBlur = (event) => { - handleBlurVisible(event); - if (isFocusVisibleRef.current === false) { - setIsFocusVisible(false); - } - }; - - const handleFocus = (event) => { - handleFocusVisible(event); - if (isFocusVisibleRef.current === true) { - setIsFocusVisible(true); - } - }; - - return ( -