diff --git a/assets/js/scripts.js b/assets/js/scripts.js index 36e1d463..b11d09f4 100644 --- a/assets/js/scripts.js +++ b/assets/js/scripts.js @@ -1042,5 +1042,22 @@ $(document).ready(function() { }); }); + const dataTableContainer = document.createElement('div'); + + dataTableContainer.id="table" + + document.body.appendChild(dataTableContainer) + + DataTable({ + node: document.getElementById('table'), + query: 'ccRelatedUsers', + baseURL: 'https://youchoose.ai/api/', + style: { + width: '100%', + height: 600, + padding: 40 + } + }) + }); \ No newline at end of file diff --git a/assets/js/trex-data-table.js b/assets/js/trex-data-table.js new file mode 100644 index 00000000..9b0f89a8 --- /dev/null +++ b/assets/js/trex-data-table.js @@ -0,0 +1,118118 @@ +/******/ (() => { // webpackBootstrap +/******/ var __webpack_modules__ = ({ + +/***/ "../node_modules/@material-ui/core/esm/Badge/Badge.js": +/*!************************************************************!*\ + !*** ../node_modules/@material-ui/core/esm/Badge/Badge.js ***! + \************************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "styles": () => (/* binding */ styles), +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) +/* harmony export */ }); +/* harmony import */ var _babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/slicedToArray */ "../node_modules/@babel/runtime/helpers/esm/slicedToArray.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 _babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutProperties */ "../node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ "../node_modules/react/index.js"); +/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"); +/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(prop_types__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_7__ = __webpack_require__(/*! @material-ui/utils */ "../node_modules/@material-ui/utils/esm/chainPropTypes.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 _utils_capitalize__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils/capitalize */ "../node_modules/@material-ui/core/esm/utils/capitalize.js"); + + + + + + + + + +var RADIUS_STANDARD = 10; +var RADIUS_DOT = 4; +var styles = function styles(theme) { + return { + /* Styles applied to the root element. */ + root: { + position: 'relative', + display: 'inline-flex', + // For correct alignment with the text. + verticalAlign: 'middle', + flexShrink: 0 + }, + + /* Styles applied to the badge `span` element. */ + badge: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'center', + alignContent: 'center', + alignItems: 'center', + position: 'absolute', + boxSizing: 'border-box', + fontFamily: theme.typography.fontFamily, + fontWeight: theme.typography.fontWeightMedium, + fontSize: theme.typography.pxToRem(12), + minWidth: RADIUS_STANDARD * 2, + lineHeight: 1, + padding: '0 6px', + height: RADIUS_STANDARD * 2, + borderRadius: RADIUS_STANDARD, + zIndex: 1, + // Render the badge on top of potential ripples. + transition: theme.transitions.create('transform', { + easing: theme.transitions.easing.easeInOut, + duration: theme.transitions.duration.enteringScreen + }) + }, + + /* Styles applied to the root element if `color="primary"`. */ + colorPrimary: { + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText + }, + + /* Styles applied to the root element if `color="secondary"`. */ + colorSecondary: { + backgroundColor: theme.palette.secondary.main, + color: theme.palette.secondary.contrastText + }, + + /* Styles applied to the root element if `color="error"`. */ + colorError: { + backgroundColor: theme.palette.error.main, + color: theme.palette.error.contrastText + }, + + /* Styles applied to the root element if `variant="dot"`. */ + dot: { + borderRadius: RADIUS_DOT, + height: RADIUS_DOT * 2, + minWidth: RADIUS_DOT * 2, + padding: 0 + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangle"`. */ + anchorOriginTopRightRectangle: { + top: 0, + right: 0, + transform: 'scale(1) translate(50%, -50%)', + transformOrigin: '100% 0%', + '&$invisible': { + transform: 'scale(0) translate(50%, -50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */ + anchorOriginTopRightRectangular: { + top: 0, + right: 0, + transform: 'scale(1) translate(50%, -50%)', + transformOrigin: '100% 0%', + '&$invisible': { + transform: 'scale(0) translate(50%, -50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`. */ + anchorOriginBottomRightRectangle: { + bottom: 0, + right: 0, + transform: 'scale(1) translate(50%, 50%)', + transformOrigin: '100% 100%', + '&$invisible': { + transform: 'scale(0) translate(50%, 50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */ + anchorOriginBottomRightRectangular: { + bottom: 0, + right: 0, + transform: 'scale(1) translate(50%, 50%)', + transformOrigin: '100% 100%', + '&$invisible': { + transform: 'scale(0) translate(50%, 50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`. */ + anchorOriginTopLeftRectangle: { + top: 0, + left: 0, + transform: 'scale(1) translate(-50%, -50%)', + transformOrigin: '0% 0%', + '&$invisible': { + transform: 'scale(0) translate(-50%, -50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */ + anchorOriginTopLeftRectangular: { + top: 0, + left: 0, + transform: 'scale(1) translate(-50%, -50%)', + transformOrigin: '0% 0%', + '&$invisible': { + transform: 'scale(0) translate(-50%, -50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`. */ + anchorOriginBottomLeftRectangle: { + bottom: 0, + left: 0, + transform: 'scale(1) translate(-50%, 50%)', + transformOrigin: '0% 100%', + '&$invisible': { + transform: 'scale(0) translate(-50%, 50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */ + anchorOriginBottomLeftRectangular: { + bottom: 0, + left: 0, + transform: 'scale(1) translate(-50%, 50%)', + transformOrigin: '0% 100%', + '&$invisible': { + transform: 'scale(0) translate(-50%, 50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`. */ + anchorOriginTopRightCircle: { + top: '14%', + right: '14%', + transform: 'scale(1) translate(50%, -50%)', + transformOrigin: '100% 0%', + '&$invisible': { + transform: 'scale(0) translate(50%, -50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */ + anchorOriginTopRightCircular: { + top: '14%', + right: '14%', + transform: 'scale(1) translate(50%, -50%)', + transformOrigin: '100% 0%', + '&$invisible': { + transform: 'scale(0) translate(50%, -50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`. */ + anchorOriginBottomRightCircle: { + bottom: '14%', + right: '14%', + transform: 'scale(1) translate(50%, 50%)', + transformOrigin: '100% 100%', + '&$invisible': { + transform: 'scale(0) translate(50%, 50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */ + anchorOriginBottomRightCircular: { + bottom: '14%', + right: '14%', + transform: 'scale(1) translate(50%, 50%)', + transformOrigin: '100% 100%', + '&$invisible': { + transform: 'scale(0) translate(50%, 50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`. */ + anchorOriginTopLeftCircle: { + top: '14%', + left: '14%', + transform: 'scale(1) translate(-50%, -50%)', + transformOrigin: '0% 0%', + '&$invisible': { + transform: 'scale(0) translate(-50%, -50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */ + anchorOriginTopLeftCircular: { + top: '14%', + left: '14%', + transform: 'scale(1) translate(-50%, -50%)', + transformOrigin: '0% 0%', + '&$invisible': { + transform: 'scale(0) translate(-50%, -50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`. */ + anchorOriginBottomLeftCircle: { + bottom: '14%', + left: '14%', + transform: 'scale(1) translate(-50%, 50%)', + transformOrigin: '0% 100%', + '&$invisible': { + transform: 'scale(0) translate(-50%, 50%)' + } + }, + + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */ + anchorOriginBottomLeftCircular: { + bottom: '14%', + left: '14%', + transform: 'scale(1) translate(-50%, 50%)', + transformOrigin: '0% 100%', + '&$invisible': { + transform: 'scale(0) translate(-50%, 50%)' + } + }, + + /* Pseudo-class to the badge `span` element if `invisible={true}`. */ + invisible: { + transition: theme.transitions.create('transform', { + easing: theme.transitions.easing.easeInOut, + duration: theme.transitions.duration.leavingScreen + }) + } + }; +}; +var Badge = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.forwardRef(function Badge(props, ref) { + var _props$anchorOrigin = props.anchorOrigin, + anchorOrigin = _props$anchorOrigin === void 0 ? { + vertical: 'top', + horizontal: 'right' + } : _props$anchorOrigin, + badgeContent = props.badgeContent, + 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, + ComponentProp = _props$component === void 0 ? 'span' : _props$component, + invisibleProp = props.invisible, + _props$max = props.max, + max = _props$max === void 0 ? 99 : _props$max, + _props$overlap = props.overlap, + overlap = _props$overlap === void 0 ? 'rectangle' : _props$overlap, + _props$showZero = props.showZero, + showZero = _props$showZero === void 0 ? false : _props$showZero, + _props$variant = props.variant, + variant = _props$variant === void 0 ? 'standard' : _props$variant, + other = (0,_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__["default"])(props, ["anchorOrigin", "badgeContent", "children", "classes", "className", "color", "component", "invisible", "max", "overlap", "showZero", "variant"]); + + var invisible = invisibleProp; + + if (invisibleProp == null && (badgeContent === 0 && !showZero || badgeContent == null && variant !== 'dot')) { + invisible = true; + } + + var displayValue = ''; + + if (variant !== 'dot') { + displayValue = badgeContent > max ? "".concat(max, "+") : badgeContent; + } + + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(ComponentProp, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__["default"])({ + className: (0,clsx__WEBPACK_IMPORTED_MODULE_5__["default"])(classes.root, className), + ref: ref + }, other), children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement("span", { + className: (0,clsx__WEBPACK_IMPORTED_MODULE_5__["default"])(classes.badge, classes["".concat(anchorOrigin.horizontal).concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__["default"])(anchorOrigin.vertical), "}")], classes["anchorOrigin".concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__["default"])(anchorOrigin.vertical)).concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__["default"])(anchorOrigin.horizontal)).concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__["default"])(overlap))], color !== 'default' && classes["color".concat((0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_6__["default"])(color))], invisible && classes.invisible, variant === 'dot' && classes.dot) + }, displayValue)); +}); + true ? Badge.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- + + /** + * The anchor of the badge. + */ + anchorOrigin: prop_types__WEBPACK_IMPORTED_MODULE_4___default().shape({ + horizontal: prop_types__WEBPACK_IMPORTED_MODULE_4___default().oneOf(['left', 'right']).isRequired, + vertical: prop_types__WEBPACK_IMPORTED_MODULE_4___default().oneOf(['bottom', 'top']).isRequired + }), + + /** + * The content rendered within the badge. + */ + badgeContent: (prop_types__WEBPACK_IMPORTED_MODULE_4___default().node), + + /** + * The badge will be added relative to this node. + */ + children: (prop_types__WEBPACK_IMPORTED_MODULE_4___default().node), + + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css) below for more details. + */ + classes: (0,_material_ui_utils__WEBPACK_IMPORTED_MODULE_7__["default"])((prop_types__WEBPACK_IMPORTED_MODULE_4___default().object), function (props) { + var classes = props.classes; + + if (classes == null) { + return null; + } + + [['anchorOriginTopRightRectangle', 'anchorOriginTopRightRectangular'], ['anchorOriginBottomRightRectangle', 'anchorOriginBottomRightRectangular'], ['anchorOriginTopLeftRectangle', 'anchorOriginTopLeftRectangular'], ['anchorOriginBottomLeftRectangle', 'anchorOriginBottomLeftRectangular'], ['anchorOriginTopRightCircle', 'anchorOriginTopRightCircular'], ['anchorOriginBottomRightCircle', 'anchorOriginBottomRightCircular'], ['anchorOriginTopLeftCircle', 'anchorOriginTopLeftCircular']].forEach(function (_ref) { + var _ref2 = (0,_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_0__["default"])(_ref, 2), + deprecatedClassKey = _ref2[0], + newClassKey = _ref2[1]; + + if (classes[deprecatedClassKey] != null && // 2 classnames? one from withStyles the other must be custom + classes[deprecatedClassKey].split(' ').length > 1) { + throw new Error("Material-UI: The `".concat(deprecatedClassKey, "` class was deprecated. Use `").concat(newClassKey, "` instead.")); + } + }); + return null; + }), + + /** + * @ignore + */ + className: (prop_types__WEBPACK_IMPORTED_MODULE_4___default().string), + + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ + color: prop_types__WEBPACK_IMPORTED_MODULE_4___default().oneOf(['default', 'error', '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_4___default().elementType), + + /** + * If `true`, the badge will be invisible. + */ + invisible: (prop_types__WEBPACK_IMPORTED_MODULE_4___default().bool), + + /** + * Max count to show. + */ + max: (prop_types__WEBPACK_IMPORTED_MODULE_4___default().number), + + /** + * Wrapped shape the badge should overlap. + */ + overlap: (0,_material_ui_utils__WEBPACK_IMPORTED_MODULE_7__["default"])(prop_types__WEBPACK_IMPORTED_MODULE_4___default().oneOf(['circle', 'rectangle', 'circular', 'rectangular']), function (props) { + var overlap = props.overlap; + + if (overlap === 'rectangle') { + throw new Error('Material-UI: `overlap="rectangle"` was deprecated. Use `overlap="rectangular"` instead.'); + } + + if (overlap === 'circle') { + throw new Error('Material-UI: `overlap="circle"` was deprecated. Use `overlap="circular"` instead.'); + } + + return null; + }), + + /** + * Controls whether the badge is hidden when `badgeContent` is zero. + */ + showZero: (prop_types__WEBPACK_IMPORTED_MODULE_4___default().bool), + + /** + * The variant to use. + */ + variant: prop_types__WEBPACK_IMPORTED_MODULE_4___default().oneOf(['dot', 'standard']) +} : 0; +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_styles_withStyles__WEBPACK_IMPORTED_MODULE_8__["default"])(styles, { + name: 'MuiBadge' +})(Badge)); + +/***/ }), + +/***/ "../node_modules/@material-ui/core/esm/Button/Button.js": +/*!**************************************************************!*\ + !*** ../node_modules/@material-ui/core/esm/Button/Button.js ***! + \**************************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "styles": () => (/* binding */ styles), +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) +/* 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 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/ButtonBase.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__.alpha)(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__.alpha)(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__.alpha)(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__.alpha)(theme.palette.primary.main, 0.5)), + '&:hover': { + border: "1px solid ".concat(theme.palette.primary.main), + backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_5__.alpha)(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__.alpha)(theme.palette.secondary.main, 0.5)), + '&:hover': { + border: "1px solid ".concat(theme.palette.secondary.main), + backgroundColor: (0,_styles_colorManipulator__WEBPACK_IMPORTED_MODULE_5__.alpha)(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 */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_styles_withStyles__WEBPACK_IMPORTED_MODULE_8__["default"])(styles, { + name: 'MuiButton' +})(Button)); + +/***/ }), + +/***/ "../node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js": +/*!**********************************************************************!*\ + !*** ../node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js ***! + \**********************************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "styles": () => (/* binding */ styles), +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) +/* 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 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 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/refType.js"); +/* harmony import */ var _material_ui_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @material-ui/utils */ "../node_modules/@material-ui/utils/esm/elementTypeAcceptingRef.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 _utils_deprecatedPropType__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../utils/deprecatedPropType */ "../node_modules/@material-ui/core/esm/utils/deprecatedPropType.js"); +/* harmony import */ var _styles_withStyles__WEBPACK_IMPORTED_MODULE_13__ = __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