@mui/base
Version:
A library of headless ('unstyled') React UI components and low-level hooks.
198 lines (194 loc) • 8.3 kB
JavaScript
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';
/**
*
* Demos:
*
* - [Button](https://mui.com/base/react-button/#hook)
*
* API:
*
* - [useButton API](https://mui.com/base/react-button/hooks-api/#use-button)
*/
export default function useButton() {
var parameters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _parameters$disabled = parameters.disabled,
disabled = _parameters$disabled === void 0 ? false : _parameters$disabled,
focusableWhenDisabled = parameters.focusableWhenDisabled,
href = parameters.href,
externalRef = parameters.rootRef,
tabIndex = parameters.tabIndex,
to = parameters.to,
type = parameters.type;
var buttonRef = React.useRef();
var _React$useState = React.useState(false),
active = _React$useState[0],
setActive = _React$useState[1];
var _useIsFocusVisible = useIsFocusVisible(),
isFocusVisibleRef = _useIsFocusVisible.isFocusVisibleRef,
handleFocusVisible = _useIsFocusVisible.onFocus,
handleBlurVisible = _useIsFocusVisible.onBlur,
focusVisibleRef = _useIsFocusVisible.ref;
var _React$useState2 = React.useState(false),
focusVisible = _React$useState2[0],
setFocusVisible = _React$useState2[1];
if (disabled && !focusableWhenDisabled && focusVisible) {
setFocusVisible(false);
}
React.useEffect(function () {
isFocusVisibleRef.current = focusVisible;
}, [focusVisible, isFocusVisibleRef]);
var _React$useState3 = React.useState(''),
hostElementName = _React$useState3[0],
setHostElementName = _React$useState3[1];
var createHandleMouseLeave = function createHandleMouseLeave(otherHandlers) {
return function (event) {
var _otherHandlers$onMous;
if (focusVisible) {
event.preventDefault();
}
(_otherHandlers$onMous = otherHandlers.onMouseLeave) == null ? void 0 : _otherHandlers$onMous.call(otherHandlers, event);
};
};
var createHandleBlur = function createHandleBlur(otherHandlers) {
return function (event) {
var _otherHandlers$onBlur;
handleBlurVisible(event);
if (isFocusVisibleRef.current === false) {
setFocusVisible(false);
}
(_otherHandlers$onBlur = otherHandlers.onBlur) == null ? void 0 : _otherHandlers$onBlur.call(otherHandlers, event);
};
};
var createHandleFocus = function createHandleFocus(otherHandlers) {
return function (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 ? void 0 : _otherHandlers$onFocu.call(otherHandlers, event);
}
(_otherHandlers$onFocu2 = otherHandlers.onFocus) == null ? void 0 : _otherHandlers$onFocu2.call(otherHandlers, event);
};
};
var isNativeButton = function isNativeButton() {
var button = buttonRef.current;
return hostElementName === 'BUTTON' || hostElementName === 'INPUT' && ['button', 'submit', 'reset'].includes(button == null ? void 0 : button.type) || hostElementName === 'A' && (button == null ? void 0 : button.href);
};
var createHandleClick = function createHandleClick(otherHandlers) {
return function (event) {
if (!disabled) {
var _otherHandlers$onClic;
(_otherHandlers$onClic = otherHandlers.onClick) == null ? void 0 : _otherHandlers$onClic.call(otherHandlers, event);
}
};
};
var createHandleMouseDown = function createHandleMouseDown(otherHandlers) {
return function (event) {
var _otherHandlers$onMous2;
if (!disabled) {
setActive(true);
document.addEventListener('mouseup', function () {
setActive(false);
}, {
once: true
});
}
(_otherHandlers$onMous2 = otherHandlers.onMouseDown) == null ? void 0 : _otherHandlers$onMous2.call(otherHandlers, event);
};
};
var createHandleKeyDown = function createHandleKeyDown(otherHandlers) {
return function (event) {
var _otherHandlers$onKeyD;
(_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null ? void 0 : _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 ? void 0 : _otherHandlers$onClic2.call(otherHandlers, event);
event.preventDefault();
}
};
};
var createHandleKeyUp = function createHandleKeyUp(otherHandlers) {
return function (event) {
var _otherHandlers$onKeyU;
// 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$onKeyU = otherHandlers.onKeyUp) == null ? void 0 : _otherHandlers$onKeyU.call(otherHandlers, event);
// Keyboard accessibility for non interactive elements
if (event.target === event.currentTarget && !isNativeButton() && !disabled && event.key === ' ' && !event.defaultMuiPrevented) {
var _otherHandlers$onClic3;
(_otherHandlers$onClic3 = otherHandlers.onClick) == null ? void 0 : _otherHandlers$onClic3.call(otherHandlers, event);
}
};
};
var updateHostElementName = React.useCallback(function (instance) {
var _instance$tagName;
setHostElementName((_instance$tagName = instance == null ? void 0 : instance.tagName) != null ? _instance$tagName : '');
}, []);
var handleRef = useForkRef(updateHostElementName, externalRef, focusVisibleRef, buttonRef);
var buttonProps = {};
if (hostElementName === 'BUTTON') {
buttonProps.type = type != null ? type : 'button';
if (focusableWhenDisabled) {
buttonProps['aria-disabled'] = disabled;
} else {
buttonProps.disabled = disabled;
}
} else if (hostElementName !== '') {
if (!href && !to) {
buttonProps.role = 'button';
buttonProps.tabIndex = tabIndex != null ? tabIndex : 0;
}
if (disabled) {
buttonProps['aria-disabled'] = disabled;
buttonProps.tabIndex = focusableWhenDisabled ? tabIndex != null ? tabIndex : 0 : -1;
}
}
var getRootProps = function getRootProps() {
var otherHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var propsEventHandlers = extractEventHandlers(parameters);
var 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: 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: getRootProps,
focusVisible: focusVisible,
setFocusVisible: setFocusVisible,
active: active,
rootRef: handleRef
};
}