Files F101032949

useButton.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Wed, Feb 5, 00:33

useButton.js
View Options

	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';
	export default function useButton(parameters) {
	const {
	disabled = false,
	focusableWhenDisabled,
	href,
	ref: externalRef,
	tabIndex,
	to,
	type
	} = 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 [hostElementName, setHostElementName] = React.useState('');
	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 hostElementName === 'BUTTON' \|\| hostElementName === 'INPUT' && ['button', 'submit', 'reset'].includes(button?.type) \|\| hostElementName === '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.defaultPrevented) {
	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 <button> will not dispatch a click event if Space is pressed
	// https://codesandbox.io/s/button-keyup-preventdefault-dn7f0

	if (event.target === event.currentTarget) {
	setActive(false);
	}
	otherHandlers.onKeyUp?.(event);

	// Keyboard accessibility for non interactive elements
	if (event.target === event.currentTarget && !isNativeButton() && !disabled && event.key === ' ' && !event.defaultPrevented) {
	otherHandlers.onClick?.(event);
	}
	};
	const updateHostElementName = React.useCallback(instance => {
	setHostElementName(instance?.tagName ?? '');
	}, []);
	const handleRef = useForkRef(updateHostElementName, externalRef, focusVisibleRef, buttonRef);
	const buttonProps = {};
	if (hostElementName === 'BUTTON') {
	buttonProps.type = type ?? 'button';
	if (focusableWhenDisabled) {
	buttonProps['aria-disabled'] = disabled;
	} else {
	buttonProps.disabled = disabled;
	}
	} else if (hostElementName !== '') {
	if (!href && !to) {
	buttonProps.role = 'button';
	buttonProps.tabIndex = tabIndex ?? 0;
	}
	if (disabled) {
	buttonProps['aria-disabled'] = disabled;
	buttonProps.tabIndex = focusableWhenDisabled ? tabIndex ?? 0 : -1;
	}
	}
	const getRootProps = (otherHandlers = {}) => {
	const propsEventHandlers = extractEventHandlers(parameters);
	const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);

	// onFocusVisible can be present on the props, but since it's not a valid React event handler,
	// it must not be forwarded to the inner component.
	delete externalEventHandlers.onFocusVisible;
	return _extends({
	type
	}, externalEventHandlers, buttonProps, {
	onBlur: createHandleBlur(externalEventHandlers),
	onClick: createHandleClick(externalEventHandlers),
	onFocus: createHandleFocus(externalEventHandlers),
	onKeyDown: createHandleKeyDown(externalEventHandlers),
	onKeyUp: createHandleKeyUp(externalEventHandlers),
	onMouseDown: createHandleMouseDown(externalEventHandlers),
	onMouseLeave: createHandleMouseLeave(externalEventHandlers),
	ref: handleRef
	});
	};
	return {
	getRootProps,
	focusVisible,
	setFocusVisible,
	disabled,
	active
	};
	}

Event Timeline