'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 != null ? rootElementNameProp : href || to ? 'a' : undefined, componentName: 'Button' }); const createHandleMouseLeave = otherHandlers => event => { var _otherHandlers$onMous; if (focusVisible) { event.preventDefault(); } (_otherHandlers$onMous = otherHandlers.onMouseLeave) == null || _otherHandlers$onMous.call(otherHandlers, event); }; const createHandleBlur = otherHandlers => event => { var _otherHandlers$onBlur; handleBlurVisible(event); if (isFocusVisibleRef.current === false) { setFocusVisible(false); } (_otherHandlers$onBlur = otherHandlers.onBlur) == null || _otherHandlers$onBlur.call(otherHandlers, event); }; const createHandleFocus = otherHandlers => event => { var _otherHandlers$onFocu2; // Fix for https://github.com/facebook/react/issues/7769 if (!buttonRef.current) { buttonRef.current = event.currentTarget; } handleFocusVisible(event); if (isFocusVisibleRef.current === true) { var _otherHandlers$onFocu; setFocusVisible(true); (_otherHandlers$onFocu = otherHandlers.onFocusVisible) == null || _otherHandlers$onFocu.call(otherHandlers, event); } (_otherHandlers$onFocu2 = otherHandlers.onFocus) == null || _otherHandlers$onFocu2.call(otherHandlers, event); }; const isNativeButton = () => { const button = buttonRef.current; return rootElementName === 'BUTTON' || rootElementName === 'INPUT' && ['button', 'submit', 'reset'].includes(button == null ? void 0 : button.type) || rootElementName === 'A' && (button == null ? void 0 : button.href); }; const createHandleClick = otherHandlers => event => { if (!disabled) { var _otherHandlers$onClic; (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event); } }; const createHandleMouseDown = otherHandlers => event => { var _otherHandlers$onMous2; if (!disabled) { setActive(true); document.addEventListener('mouseup', () => { setActive(false); }, { once: true }); } (_otherHandlers$onMous2 = otherHandlers.onMouseDown) == null || _otherHandlers$onMous2.call(otherHandlers, event); }; const createHandleKeyDown = otherHandlers => event => { var _otherHandlers$onKeyD; (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, 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) { var _otherHandlers$onClic2; (_otherHandlers$onClic2 = otherHandlers.onClick) == null || _otherHandlers$onClic2.call(otherHandlers, event); event.preventDefault(); } }; const createHandleKeyUp = otherHandlers => event => { var _otherHandlers$onKeyU; // calling preventDefault in keyUp on a