Files F101395798

ButtonUnstyled.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Mon, Feb 10, 01:21

ButtonUnstyled.js
View Options

	import _extends from "@babel/runtime/helpers/esm/extends";
	import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
	import * as React from 'react';
	import PropTypes from 'prop-types';
	import composeClasses from '../composeClasses';
	import { getButtonUnstyledUtilityClass } from './buttonUnstyledClasses';
	import useButton from './useButton';
	import { useSlotProps } from '../utils';
	import { jsx as _jsx } from "react/jsx-runtime";
	var useUtilityClasses = function useUtilityClasses(ownerState) {
	var active = ownerState.active,
	disabled = ownerState.disabled,
	focusVisible = ownerState.focusVisible;
	var slots = {
	root: ['root', disabled && 'disabled', focusVisible && 'focusVisible', active && 'active']
	};
	return composeClasses(slots, getButtonUnstyledUtilityClass, {});
	};
	/**
	* The foundation for building custom-styled buttons.
	*
	* Demos:
	*
	* - [Unstyled Button](https://mui.com/base/react-button/)
	*
	* API:
	*
	* - [ButtonUnstyled API](https://mui.com/base/api/button-unstyled/)
	*/
	var ButtonUnstyled = /#__PURE__/React.forwardRef(function ButtonUnstyled(props, forwardedRef) {
	var _ref;
	var action = props.action,
	children = props.children,
	component = props.component,
	disabled = props.disabled,
	_props$focusableWhenD = props.focusableWhenDisabled,
	focusableWhenDisabled = _props$focusableWhenD === void 0 ? false : _props$focusableWhenD,
	onBlur = props.onBlur,
	onClick = props.onClick,
	onFocus = props.onFocus,
	onFocusVisible = props.onFocusVisible,
	onKeyDown = props.onKeyDown,
	onKeyUp = props.onKeyUp,
	onMouseLeave = props.onMouseLeave,
	_props$slotProps = props.slotProps,
	slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
	_props$slots = props.slots,
	slots = _props$slots === void 0 ? {} : _props$slots,
	other = _objectWithoutProperties(props, ["action", "children", "component", "disabled", "focusableWhenDisabled", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseLeave", "slotProps", "slots"]);
	var buttonRef = React.useRef();
	var _useButton = useButton(_extends({}, props, {
	focusableWhenDisabled: focusableWhenDisabled
	})),
	active = _useButton.active,
	focusVisible = _useButton.focusVisible,
	setFocusVisible = _useButton.setFocusVisible,
	getRootProps = _useButton.getRootProps;
	React.useImperativeHandle(action, function () {
	return {
	focusVisible: function focusVisible() {
	setFocusVisible(true);
	buttonRef.current.focus();
	}
	};
	}, [setFocusVisible]);
	var ownerState = _extends({}, props, {
	active: active,
	focusableWhenDisabled: focusableWhenDisabled,
	focusVisible: focusVisible
	});
	var classes = useUtilityClasses(ownerState);
	var defaultElement = other.href \|\| other.to ? 'a' : 'button';
	var Root = (_ref = component != null ? component : slots.root) != null ? _ref : defaultElement;
	var rootProps = useSlotProps({
	elementType: Root,
	getSlotProps: getRootProps,
	externalForwardedProps: other,
	externalSlotProps: slotProps.root,
	additionalProps: {
	ref: forwardedRef
	},
	ownerState: ownerState,
	className: classes.root
	});
	return /#__PURE__/_jsx(Root, _extends({}, rootProps, {
	children: children
	}));
	});
	process.env.NODE_ENV !== "production" ? ButtonUnstyled.propTypes /* remove-proptypes */ = {
	// ----------------------------- Warning --------------------------------
	// \| These PropTypes are generated from the TypeScript type definitions \|
	// \| To update them edit TypeScript types and run "yarn proptypes" \|
	// ----------------------------------------------------------------------
	/**
	* A ref for imperative actions. It currently only supports `focusVisible()` action.
	*/
	action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
	current: PropTypes.shape({
	focusVisible: PropTypes.func.isRequired
	})
	})]),
	/**
	* @ignore
	*/
	children: PropTypes.node,
	/**
	* The component used for the root node.
	* Either a string to use a HTML element or a component.
	*/
	component: PropTypes.elementType,
	/**
	* If `true`, the component is disabled.
	* @default false
	*/
	disabled: PropTypes.bool,
	/**
	* If `true`, allows a disabled button to receive focus.
	* @default false
	*/
	focusableWhenDisabled: PropTypes.bool,
	/**
	* @ignore
	*/
	href: PropTypes.string,
	/**
	* @ignore
	*/
	onBlur: PropTypes.func,
	/**
	* @ignore
	*/
	onClick: PropTypes.func,
	/**
	* @ignore
	*/
	onFocus: PropTypes.func,
	/**
	* @ignore
	*/
	onFocusVisible: PropTypes.func,
	/**
	* @ignore
	*/
	onKeyDown: PropTypes.func,
	/**
	* @ignore
	*/
	onKeyUp: PropTypes.func,
	/**
	* @ignore
	*/
	onMouseLeave: PropTypes.func,
	/**
	* The props used for each slot inside the Button.
	* @default {}
	*/
	slotProps: PropTypes.shape({
	root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
	}),
	/**
	* The components used for each slot inside the Button.
	* Either a string to use a HTML element or a component.
	* @default {}
	*/
	slots: PropTypes.shape({
	root: PropTypes.elementType
	}),
	/**
	* @ignore
	*/
	to: PropTypes.string
	} : void 0;
	export default ButtonUnstyled;

Event Timeline