self["webpackHotUpdate_N_E"]("pages/controlpanel/commands",{ /***/ "./node_modules/@material-ui/core/esm/Button/Button.js": /*!*************************************************************!*\ !*** ./node_modules/@material-ui/core/esm/Button/Button.js ***! \*************************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "styles": function() { return /* binding */ styles; } /* harmony export */ }); /* harmony import */ var _babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutProperties */ "./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"); /* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ "./node_modules/@babel/runtime/helpers/esm/extends.js"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js"); /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.m.js"); /* harmony import */ var _styles_withStyles__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../styles/withStyles */ "./node_modules/@material-ui/core/esm/styles/withStyles.js"); /* harmony import */ var _styles_colorManipulator__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../styles/colorManipulator */ "./node_modules/@material-ui/core/esm/styles/colorManipulator.js"); /* harmony import */ var _ButtonBase__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../ButtonBase */ "./node_modules/@material-ui/core/esm/ButtonBase/index.js"); /* harmony import */ var _utils_capitalize__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils/capitalize */ "./node_modules/@material-ui/core/esm/utils/capitalize.js"); var styles = function styles(theme) { return { /* Styles applied to the root element. */ root: (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__.default)({}, theme.typography.button, { boxSizing: 'border-box', minWidth: 64, padding: '6px 16px', borderRadius: theme.shape.borderRadius, color: theme.palette.text.primary, transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], { duration: theme.transitions.duration.short }), '&:hover': { textDecoration: 'none', backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_5__.fade)(theme.palette.text.primary, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent' }, '&$disabled': { backgroundColor: 'transparent' } }, '&$disabled': { color: theme.palette.action.disabled } }), /* Styles applied to the span element that wraps the children. */ label: { width: '100%', // Ensure the correct width for iOS Safari display: 'inherit', alignItems: 'inherit', justifyContent: 'inherit' }, /* Styles applied to the root element if `variant="text"`. */ text: { padding: '6px 8px' }, /* Styles applied to the root element if `variant="text"` and `color="primary"`. */ textPrimary: { color: theme.palette.primary.main, '&:hover': { backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_5__.fade)(theme.palette.primary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent' } } }, /* Styles applied to the root element if `variant="text"` and `color="secondary"`. */ textSecondary: { color: theme.palette.secondary.main, '&:hover': { backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_5__.fade)(theme.palette.secondary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent' } } }, /* Styles applied to the root element if `variant="outlined"`. */ outlined: { padding: '5px 15px', border: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'), '&$disabled': { border: "1px solid ".concat(theme.palette.action.disabledBackground) } }, /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ outlinedPrimary: { color: theme.palette.primary.main, border: "1px solid ".concat((0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_5__.fade)(theme.palette.primary.main, 0.5)), '&:hover': { border: "1px solid ".concat(theme.palette.primary.main), backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_5__.fade)(theme.palette.primary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent' } } }, /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ outlinedSecondary: { color: theme.palette.secondary.main, border: "1px solid ".concat((0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_5__.fade)(theme.palette.secondary.main, 0.5)), '&:hover': { border: "1px solid ".concat(theme.palette.secondary.main), backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_5__.fade)(theme.palette.secondary.main, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent' } }, '&$disabled': { border: "1px solid ".concat(theme.palette.action.disabled) } }, /* Styles applied to the root element if `variant="contained"`. */ contained: { color: theme.palette.getContrastText(theme.palette.grey[300]), backgroundColor: theme.palette.grey[300], boxShadow: theme.shadows[2], '&:hover': { backgroundColor: theme.palette.grey.A100, boxShadow: theme.shadows[4], // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { boxShadow: theme.shadows[2], backgroundColor: theme.palette.grey[300] }, '&$disabled': { backgroundColor: theme.palette.action.disabledBackground } }, '&$focusVisible': { boxShadow: theme.shadows[6] }, '&:active': { boxShadow: theme.shadows[8] }, '&$disabled': { color: theme.palette.action.disabled, boxShadow: theme.shadows[0], backgroundColor: theme.palette.action.disabledBackground } }, /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */ containedPrimary: { color: theme.palette.primary.contrastText, backgroundColor: theme.palette.primary.main, '&:hover': { backgroundColor: theme.palette.primary.dark, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: theme.palette.primary.main } } }, /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */ containedSecondary: { color: theme.palette.secondary.contrastText, backgroundColor: theme.palette.secondary.main, '&:hover': { backgroundColor: theme.palette.secondary.dark, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: theme.palette.secondary.main } } }, /* Styles applied to the root element if `disableElevation={true}`. */ disableElevation: { boxShadow: 'none', '&:hover': { boxShadow: 'none' }, '&$focusVisible': { boxShadow: 'none' }, '&:active': { boxShadow: 'none' }, '&$disabled': { boxShadow: 'none' } }, /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */ focusVisible: {}, /* Pseudo-class applied to the root element if `disabled={true}`. */ disabled: {}, /* Styles applied to the root element if `color="inherit"`. */ colorInherit: { color: 'inherit', borderColor: 'currentColor' }, /* Styles applied to the root element if `size="small"` and `variant="text"`. */ textSizeSmall: { padding: '4px 5px', fontSize: theme.typography.pxToRem(13) }, /* Styles applied to the root element if `size="large"` and `variant="text"`. */ textSizeLarge: { padding: '8px 11px', fontSize: theme.typography.pxToRem(15) }, /* Styles applied to the root element if `size="small"` and `variant="outlined"`. */ outlinedSizeSmall: { padding: '3px 9px', fontSize: theme.typography.pxToRem(13) }, /* Styles applied to the root element if `size="large"` and `variant="outlined"`. */ outlinedSizeLarge: { padding: '7px 21px', fontSize: theme.typography.pxToRem(15) }, /* Styles applied to the root element if `size="small"` and `variant="contained"`. */ containedSizeSmall: { padding: '4px 10px', fontSize: theme.typography.pxToRem(13) }, /* Styles applied to the root element if `size="large"` and `variant="contained"`. */ containedSizeLarge: { padding: '8px 22px', fontSize: theme.typography.pxToRem(15) }, /* Styles applied to the root element if `size="small"`. */ sizeSmall: {}, /* Styles applied to the root element if `size="large"`. */ sizeLarge: {}, /* Styles applied to the root element if `fullWidth={true}`. */ fullWidth: { width: '100%' }, /* Styles applied to the startIcon element if supplied. */ startIcon: { display: 'inherit', marginRight: 8, marginLeft: -4, '&$iconSizeSmall': { marginLeft: -2 } }, /* Styles applied to the endIcon element if supplied. */ endIcon: { display: 'inherit', marginRight: -4, marginLeft: 8, '&$iconSizeSmall': { marginRight: -2 } }, /* Styles applied to the icon element if supplied and `size="small"`. */ iconSizeSmall: { '& > *:first-child': { fontSize: 18 } }, /* Styles applied to the icon element if supplied and `size="medium"`. */ iconSizeMedium: { '& > *:first-child': { fontSize: 20 } }, /* Styles applied to the icon element if supplied and `size="large"`. */ iconSizeLarge: { '& > *:first-child': { fontSize: 22 } } }; }; var Button = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function Button(props, ref) { var children = props.children, classes = props.classes, className = props.className, _props$color = props.color, color = _props$color === void 0 ? 'default' : _props$color, _props$component = props.component, component = _props$component === void 0 ? 'button' : _props$component, _props$disabled = props.disabled, disabled = _props$disabled === void 0 ? false : _props$disabled, _props$disableElevati = props.disableElevation, disableElevation = _props$disableElevati === void 0 ? false : _props$disableElevati, _props$disableFocusRi = props.disableFocusRipple, disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi, endIconProp = props.endIcon, focusVisibleClassName = props.focusVisibleClassName, _props$fullWidth = props.fullWidth, fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth, _props$size = props.size, size = _props$size === void 0 ? 'medium' : _props$size, startIconProp = props.startIcon, _props$type = props.type, type = _props$type === void 0 ? 'button' : _props$type, _props$variant = props.variant, variant = _props$variant === void 0 ? 'text' : _props$variant, other = (0,_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__.default)(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"]); var startIcon = startIconProp && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__.default)(classes.startIcon, classes["iconSize".concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__.default)(size))]) }, startIconProp); var endIcon = endIconProp && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__.default)(classes.endIcon, classes["iconSize".concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__.default)(size))]) }, endIconProp); return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(_ButtonBase__WEBPACK_IMPORTED_MODULE_7__.default, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__.default)({ className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__.default)(classes.root, classes[variant], className, color === 'inherit' ? classes.colorInherit : color !== 'default' && classes["".concat(variant).concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__.default)(color))], size !== 'medium' && [classes["".concat(variant, "Size").concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__.default)(size))], classes["size".concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__.default)(size))]], disableElevation && classes.disableElevation, disabled && classes.disabled, fullWidth && classes.fullWidth), component: component, disabled: disabled, focusRipple: !disableFocusRipple, focusVisibleClassName: (0,clsx__WEBPACK_IMPORTED_MODULE_4__.default)(classes.focusVisible, focusVisibleClassName), ref: ref, type: type }, other), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: classes.label }, startIcon, children, endIcon)); }); true ? Button.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- /** * The content of the button. */ children: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().node), /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ classes: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().object), /** * @ignore */ className: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string), /** * The color of the component. It supports those theme colors that make sense for this component. */ color: prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(['default', 'inherit', 'primary', 'secondary']), /** * The component used for the root node. * Either a string to use a HTML element or a component. */ component: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().elementType), /** * If `true`, the button will be disabled. */ disabled: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool), /** * If `true`, no elevation is used. */ disableElevation: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool), /** * If `true`, the keyboard focus ripple will be disabled. */ disableFocusRipple: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool), /** * If `true`, the ripple effect will be disabled. * * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure * to highlight the element by applying separate styles with the `focusVisibleClassName`. */ disableRipple: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool), /** * Element placed after the children. */ endIcon: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().node), /** * @ignore */ focusVisibleClassName: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string), /** * If `true`, the button will take up the full width of its container. */ fullWidth: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool), /** * The URL to link to when the button is clicked. * If defined, an `a` element will be used as the root node. */ href: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string), /** * The size of the button. * `small` is equivalent to the dense button styling. */ size: prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(['large', 'medium', 'small']), /** * Element placed before the children. */ startIcon: (prop_types__WEBPACK_IMPORTED_MODULE_3___default().node), /** * @ignore */ type: prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(['button', 'reset', 'submit']), (prop_types__WEBPACK_IMPORTED_MODULE_3___default().string)]), /** * The variant to use. */ variant: prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(['contained', 'outlined', 'text']) } : 0; /* harmony default export */ __webpack_exports__["default"] = ((0,_styles_withStyles__WEBPACK_IMPORTED_MODULE_8__.default)(styles, { name: 'MuiButton' })(Button)); /***/ }), /***/ "./node_modules/@material-ui/core/esm/Button/index.js": /*!************************************************************!*\ !*** ./node_modules/@material-ui/core/esm/Button/index.js ***! \************************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": function() { return /* reexport safe */ _Button__WEBPACK_IMPORTED_MODULE_0__.default; } /* harmony export */ }); /* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Button */ "./node_modules/@material-ui/core/esm/Button/Button.js"); /***/ }), /***/ "./node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js": /*!*********************************************************************!*\ !*** ./node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js ***! \*********************************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "styles": function() { return /* binding */ styles; } /* harmony export */ }); /* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ "./node_modules/@babel/runtime/helpers/esm/extends.js"); /* harmony import */ var _babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutProperties */ "./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js"); /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js"); /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_4__); /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.m.js"); /* harmony import */ var _material_ui_utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @material-ui/utils */ "./node_modules/@material-ui/utils/esm/index.js"); /* harmony import */ var _utils_useForkRef__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../utils/useForkRef */ "./node_modules/@material-ui/core/esm/utils/useForkRef.js"); /* harmony import */ var _utils_useEventCallback__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils/useEventCallback */ "./node_modules/@material-ui/core/esm/utils/useEventCallback.js"); /* harmony import */ var _styles_withStyles__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../styles/withStyles */ "./node_modules/@material-ui/core/esm/styles/withStyles.js"); /* harmony import */ var _utils_useIsFocusVisible__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils/useIsFocusVisible */ "./node_modules/@material-ui/core/esm/utils/useIsFocusVisible.js"); /* harmony import */ var _TouchRipple__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./TouchRipple */ "./node_modules/@material-ui/core/esm/ButtonBase/TouchRipple.js"); var styles = { /* Styles applied to the root element. */ root: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', position: 'relative', WebkitTapHighlightColor: 'transparent', backgroundColor: 'transparent', // Reset default value // We disable the focus ring for mouse, touch and keyboard users. outline: 0, border: 0, margin: 0, // Remove the margin in Safari borderRadius: 0, padding: 0, // Remove the padding in Firefox cursor: 'pointer', userSelect: 'none', verticalAlign: 'middle', '-moz-appearance': 'none', // Reset '-webkit-appearance': 'none', // Reset textDecoration: 'none', // So we take precedent over the style of a native element. color: 'inherit', '&::-moz-focus-inner': { borderStyle: 'none' // Remove Firefox dotted outline. }, '&$disabled': { pointerEvents: 'none', // Disable link interactions cursor: 'default' }, '@media print': { colorAdjust: 'exact' } }, /* Pseudo-class applied to the root element if `disabled={true}`. */ disabled: {}, /* Pseudo-class applied to the root element if keyboard focused. */ focusVisible: {} }; /** * `ButtonBase` contains as few styles as possible. * It aims to be a simple building block for creating a button. * It contains a load of style reset and some focus/ripple logic. */ var ButtonBase = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function ButtonBase(props, ref) { var action = props.action, buttonRefProp = props.buttonRef, _props$centerRipple = props.centerRipple, centerRipple = _props$centerRipple === void 0 ? false : _props$centerRipple, children = props.children, classes = props.classes, className = props.className, _props$component = props.component, component = _props$component === void 0 ? 'button' : _props$component, _props$disabled = props.disabled, disabled = _props$disabled === void 0 ? false : _props$disabled, _props$disableRipple = props.disableRipple, disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple, _props$disableTouchRi = props.disableTouchRipple, disableTouchRipple = _props$disableTouchRi === void 0 ? false : _props$disableTouchRi, _props$focusRipple = props.focusRipple, focusRipple = _props$focusRipple === void 0 ? false : _props$focusRipple, focusVisibleClassName = props.focusVisibleClassName, onBlur = props.onBlur, onClick = props.onClick, onFocus = props.onFocus, onFocusVisible = props.onFocusVisible, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onMouseDown = props.onMouseDown, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onTouchEnd = props.onTouchEnd, onTouchMove = props.onTouchMove, onTouchStart = props.onTouchStart, onDragLeave = props.onDragLeave, _props$tabIndex = props.tabIndex, tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex, TouchRippleProps = props.TouchRippleProps, _props$type = props.type, type = _props$type === void 0 ? 'button' : _props$type, other = (0,_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__.default)(props, ["action", "buttonRef", "centerRipple", "children", "classes", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "onDragLeave", "tabIndex", "TouchRippleProps", "type"]); var buttonRef = react__WEBPACK_IMPORTED_MODULE_2__.useRef(null); function getButtonNode() { // #StrictMode ready return react_dom__WEBPACK_IMPORTED_MODULE_4__.findDOMNode(buttonRef.current); } var rippleRef = react__WEBPACK_IMPORTED_MODULE_2__.useRef(null); var _React$useState = react__WEBPACK_IMPORTED_MODULE_2__.useState(false), focusVisible = _React$useState[0], setFocusVisible = _React$useState[1]; if (disabled && focusVisible) { setFocusVisible(false); } var _useIsFocusVisible = (0,_utils_useIsFocusVisible__WEBPACK_IMPORTED_MODULE_6__.default)(), isFocusVisible = _useIsFocusVisible.isFocusVisible, onBlurVisible = _useIsFocusVisible.onBlurVisible, focusVisibleRef = _useIsFocusVisible.ref; react__WEBPACK_IMPORTED_MODULE_2__.useImperativeHandle(action, function () { return { focusVisible: function focusVisible() { setFocusVisible(true); buttonRef.current.focus(); } }; }, []); react__WEBPACK_IMPORTED_MODULE_2__.useEffect(function () { if (focusVisible && focusRipple && !disableRipple) { rippleRef.current.pulsate(); } }, [disableRipple, focusRipple, focusVisible]); function useRippleHandler(rippleAction, eventCallback) { var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple; return (0,_utils_useEventCallback__WEBPACK_IMPORTED_MODULE_7__.default)(function (event) { if (eventCallback) { eventCallback(event); } var ignore = skipRippleAction; if (!ignore && rippleRef.current) { rippleRef.current[rippleAction](event); } return true; }); } var handleMouseDown = useRippleHandler('start', onMouseDown); var handleDragLeave = useRippleHandler('stop', onDragLeave); var handleMouseUp = useRippleHandler('stop', onMouseUp); var handleMouseLeave = useRippleHandler('stop', function (event) { if (focusVisible) { event.preventDefault(); } if (onMouseLeave) { onMouseLeave(event); } }); var handleTouchStart = useRippleHandler('start', onTouchStart); var handleTouchEnd = useRippleHandler('stop', onTouchEnd); var handleTouchMove = useRippleHandler('stop', onTouchMove); var handleBlur = useRippleHandler('stop', function (event) { if (focusVisible) { onBlurVisible(event); setFocusVisible(false); } if (onBlur) { onBlur(event); } }, false); var handleFocus = (0,_utils_useEventCallback__WEBPACK_IMPORTED_MODULE_7__.default)(function (event) { // Fix for https://github.com/facebook/react/issues/7769 if (!buttonRef.current) { buttonRef.current = event.currentTarget; } if (isFocusVisible(event)) { setFocusVisible(true); if (onFocusVisible) { onFocusVisible(event); } } if (onFocus) { onFocus(event); } }); var isNonNativeButton = function isNonNativeButton() { var button = getButtonNode(); return component && component !== 'button' && !(button.tagName === 'A' && button.href); }; /** * IE 11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat */ var keydownRef = react__WEBPACK_IMPORTED_MODULE_2__.useRef(false); var handleKeyDown = (0,_utils_useEventCallback__WEBPACK_IMPORTED_MODULE_7__.default)(function (event) { // Check if key is already down to avoid repeats being counted as multiple activations if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') { keydownRef.current = true; event.persist(); rippleRef.current.stop(event, function () { rippleRef.current.start(event); }); } if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') { event.preventDefault(); } if (onKeyDown) { onKeyDown(event); } // Keyboard accessibility for non interactive elements if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) { event.preventDefault(); if (onClick) { onClick(event); } } }); var handleKeyUp = (0,_utils_useEventCallback__WEBPACK_IMPORTED_MODULE_7__.default)(function (event) { // calling preventDefault in keyUp on a