'use client'; import _extends from "@babel/runtime/helpers/esm/extends"; import * as React from 'react'; import { unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible } from '@mui/utils'; import { extractEventHandlers } from '../utils/extractEventHandlers'; import { useRootElementName } from '../utils/useRootElementName'; /** * * Demos: * * - [Button](https://mui.com/base-ui/react-button/#hook) * * API: * * - [useButton API](https://mui.com/base-ui/react-button/hooks-api/#use-button) */ export function useButton(parameters = {}) { const { disabled = false, focusableWhenDisabled, href, rootRef: externalRef, tabIndex, to, type, rootElementName: rootElementNameProp } = parameters; const buttonRef = React.useRef(); 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' }); const createHandleMouseLeave = otherHandlers => event => { if (focusVisible) { event.preventDefault(); } otherHandlers.onMouseLeave?.(event); }; const createHandleBlur = otherHandlers => event => { handleBlurVisible(event); if (isFocusVisibleRef.current === false) { setFocusVisible(false); } otherHandlers.onBlur?.(event); }; const createHandleFocus = otherHandlers => event => { // Fix for https://github.com/facebook/react/issues/7769 if (!buttonRef.current) { buttonRef.current = event.currentTarget; } handleFocusVisible(event); if (isFocusVisibleRef.current === true) { setFocusVisible(true); otherHandlers.onFocusVisible?.(event); } otherHandlers.onFocus?.(event); }; const isNativeButton = () => { const button = buttonRef.current; return rootElementName === 'BUTTON' || rootElementName === 'INPUT' && ['button', 'submit', 'reset'].includes(button?.type) || rootElementName === 'A' && button?.href; }; const createHandleClick = otherHandlers => event => { if (!disabled) { otherHandlers.onClick?.(event); } }; const createHandleMouseDown = otherHandlers => event => { if (!disabled) { setActive(true); document.addEventListener('mouseup', () => { setActive(false); }, { once: true }); } otherHandlers.onMouseDown?.(event); }; const createHandleKeyDown = otherHandlers => event => { otherHandlers.onKeyDown?.(event); if (event.defaultMuiPrevented) { return; } if (event.target === event.currentTarget && !isNativeButton() && event.key === ' ') { event.preventDefault(); } if (event.target === event.currentTarget && event.key === ' ' && !disabled) { setActive(true); } // Keyboard accessibility for non interactive elements if (event.target === event.currentTarget && !isNativeButton() && event.key === 'Enter' && !disabled) { otherHandlers.onClick?.(event); event.preventDefault(); } }; const createHandleKeyUp = otherHandlers => event => { // calling preventDefault in keyUp on a