@pie-lib/mask-markup 1.33.2-next.0 → 1.35.0-mui-update.0

package/lib/components/dropdown.js

@@ -1,117 +1,221 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
-
-var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
-
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-
-var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
-
-var _ArrowDropUp = _interopRequireDefault(require("@material-ui/icons/ArrowDropUp"));
-
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
-
-var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
+var _ArrowDropUp = _interopRequireDefault(require("@mui/icons-material/ArrowDropUp"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _styles = require("@mui/material/styles");
 var _renderUi = require("@pie-lib/render-ui");
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var StyledButton = (0, _styles.styled)(_Button["default"])(function () {
+  return {
+    color: _renderUi.color.text(),
+    border: "1px solid ".concat(_renderUi.color.borderGray()),
+    borderRadius: '4px',
+    justifyContent: 'space-between',
+    backgroundColor: _renderUi.color.background(),
+    position: 'relative',
+    height: '45px',
+    width: 'fit-content',
+    margin: '2px',
+    textTransform: 'none',
+    '& span': {
+      paddingRight: '5px'
+    },
+    '& svg': {
+      position: 'absolute',
+      right: 0,
+      top: 'calc(50% - 12px)',
+      pointerEvents: 'none',
+      color: _renderUi.color.text(),
+      marginLeft: '5px'
+    },
+    '&.Mui-focused': {
+      outline: "3px solid ".concat(_renderUi.color.tertiary()),
+      outlineOffset: '2px',
+      borderWidth: '3px'
+    },
+    '&.disabledCorrect': {
+      borderWidth: '2px',
+      borderColor: _renderUi.color.correct(),
+      color: "".concat(_renderUi.color.text(), " !important")
+    },
+    '&.disabledIncorrect': {
+      borderWidth: '2px',
+      borderColor: _renderUi.color.incorrectWithIcon(),
+      color: "".concat(_renderUi.color.text(), " !important")
+    }
+  };
+});
+var StyledMenu = (0, _styles.styled)(_Menu["default"])(function () {
+  return {
+    backgroundColor: _renderUi.color.background(),
+    border: "1px solid ".concat(_renderUi.color.correct(), " !important"),
+    '&:hover': {
+      border: "1px solid ".concat(_renderUi.color.text(), " "),
+      borderColor: 'initial'
+    },
+    '&:focus': {
+      border: "1px solid ".concat(_renderUi.color.text()),
+      borderColor: 'initial'
+    },
+    // remove default padding on the inner list
+    '& .MuiList-root': {
+      padding: 0
+    }
+  };
+});
+var StyledMenuItem = (0, _styles.styled)(_MenuItem["default"])(function () {
+  return {
+    color: _renderUi.color.text(),
+    backgroundColor: _renderUi.color.background(),
+    '&.Mui-focused': {
+      outline: "3px solid ".concat(_renderUi.color.tertiary()),
+      outlineOffset: '-1px',
+      // keeps it inside the item
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background()
+    },
+    '&:hover': {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.dropdownBackground()
+    },
+    boxSizing: 'border-box',
+    padding: '25px',
+    borderRadius: '4px',
+    '&.selected': {
+      color: "".concat(_renderUi.color.text(), " !important"),
+      backgroundColor: "".concat(_renderUi.color.background(), " !important"),
+      '&:hover': {
+        color: _renderUi.color.text(),
+        backgroundColor: "".concat(_renderUi.color.dropdownBackground(), " !important")
+      }
+    }
+  };
+});
+var StyledLabel = (0, _styles.styled)('span')(function () {
+  return {
+    fontSize: 'max(1rem, 14px)'
+  };
+});
+var StyledSelectedIndicator = (0, _styles.styled)('span')(function () {
+  return {
+    fontSize: 'max(1rem, 14px)',
+    position: 'absolute',
+    right: '10px'
+  };
+});
+var StyledInputLabel = (0, _styles.styled)(_InputLabel["default"])(function () {
+  return {
+    position: 'absolute',
+    left: '-10000px',
+    top: 'auto',
+    width: '1px',
+    height: '1px',
+    overflow: 'hidden'
+  };
+});
+var StyledCorrectnessIcon = (0, _styles.styled)(_Check["default"])(function () {
+  return {
+    color: "".concat(_renderUi.color.white(), " !important"),
+    position: 'absolute',
+    top: '-8px !important',
+    left: '-8px',
+    marginLeft: '0 !important',
+    borderRadius: '50%',
+    fontSize: '16px',
+    padding: '2px',
+    '&.correct': {
+      backgroundColor: _renderUi.color.correct()
+    },
+    '&.incorrect': {
+      backgroundColor: _renderUi.color.incorrectWithIcon()
+    }
+  };
+});
+var StyledIncorrectnessIcon = (0, _styles.styled)(_Close["default"])(function () {
+  return {
+    color: "".concat(_renderUi.color.white(), " !important"),
+    position: 'absolute',
+    top: '-8px !important',
+    left: '-8px',
+    marginLeft: '0 !important',
+    borderRadius: '50%',
+    fontSize: '16px',
+    padding: '2px',
+    '&.correct': {
+      backgroundColor: _renderUi.color.correct()
+    },
+    '&.incorrect': {
+      backgroundColor: _renderUi.color.incorrectWithIcon()
+    }
+  };
+});
 var Dropdown = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Dropdown, _React$Component);
-
-  var _super = _createSuper(Dropdown);
-
   function Dropdown(props) {
     var _this;
-
     (0, _classCallCheck2["default"])(this, Dropdown);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (event) {
+    _this = _callSuper(this, Dropdown, [props]);
+    (0, _defineProperty2["default"])(_this, "handleClick", function (event) {
       return _this.setState({
         anchorEl: event.currentTarget
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClose", function () {
+    (0, _defineProperty2["default"])(_this, "handleClose", function () {
       var value = _this.props.value;
-
       _this.setState({
         anchorEl: null,
         previewValue: null,
         highlightedOptionId: null
-      }); // clear displayed preview if no selection
-
-
+      });
+      // clear displayed preview if no selection
       if (!value && _this.previewRef.current) {
         _this.previewRef.current.innerHTML = '';
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHighlight", function (index) {
-      var highlightedOptionId = "dropdown-option-".concat(_this.props.id, "-").concat(index); // preview on hover if nothing selected
+    (0, _defineProperty2["default"])(_this, "handleHighlight", function (index) {
+      var highlightedOptionId = "dropdown-option-".concat(_this.props.id, "-").concat(index);
 
+      // preview on hover if nothing selected
       var stateUpdate = {
         highlightedOptionId: highlightedOptionId
       };
-
       if (!_this.props.value) {
         stateUpdate.previewValue = _this.props.choices[index].value;
       }
-
       _this.setState(stateUpdate);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelect", function (value, index) {
+    (0, _defineProperty2["default"])(_this, "handleSelect", function (value, index) {
       _this.props.onChange(_this.props.id, value);
-
       _this.handleHighlight(index);
-
       _this.handleClose();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHover", function (index) {
+    (0, _defineProperty2["default"])(_this, "handleHover", function (index) {
       var selectedValue = _this.props.value;
       if (selectedValue) return;
       var highlightedOptionId = "dropdown-option-".concat(_this.props.id, "-").concat(index);
       var previewValue = _this.state.previewValue;
-
       _this.setState({
         highlightedOptionId: highlightedOptionId,
         previewValue: previewValue
@@ -119,7 +223,6 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
         // On hover, preview the math-rendered content inside the button if no value is selected.
         var ref = _this.elementRefs[index];
         var preview = _this.previewRef.current;
-
         if (ref && preview) {
           preview.innerHTML = ref.innerHTML;
         }
@@ -137,8 +240,8 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
     _this.elementRefs = [];
     return _this;
   }
-
-  (0, _createClass2["default"])(Dropdown, [{
+  (0, _inherits2["default"])(Dropdown, _React$Component);
+  return (0, _createClass2["default"])(Dropdown, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       // measure hidden menu width once
@@ -153,23 +256,19 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       var hiddenEl = this.hiddenRef.current;
       var dropdownJustOpened = !prevState.anchorEl && this.state.anchorEl;
-
       if (dropdownJustOpened) {
         this.elementRefs.forEach(function (ref) {
           if (!ref) return;
           var containsLatex = ref.querySelector('[data-latex], [data-raw]');
           var hasMathJax = ref.querySelector('mjx-container');
           var mathHandled = ref.querySelector('[data-math-handled="true"]');
-
           if (containsLatex && (!mathHandled || !hasMathJax)) {
             (0, _mathRendering.renderMath)(ref);
           }
         });
       }
-
       if (hiddenEl) {
         var newWidth = hiddenEl.clientWidth;
-
         if (newWidth !== this.state.menuWidth) {
           this.elementRefs.forEach(function (ref) {
             if (ref) (0, _mathRendering.renderMath)(ref);
@@ -193,46 +292,43 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props = this.props,
-          classes = _this$props.classes,
-          id = _this$props.id,
-          correct = _this$props.correct,
-          disabled = _this$props.disabled,
-          value = _this$props.value,
-          choices = _this$props.choices,
-          showCorrectAnswer = _this$props.showCorrectAnswer,
-          singleQuery = _this$props.singleQuery,
-          correctValue = _this$props.correctValue;
+        id = _this$props.id,
+        correct = _this$props.correct,
+        disabled = _this$props.disabled,
+        value = _this$props.value,
+        choices = _this$props.choices,
+        showCorrectAnswer = _this$props.showCorrectAnswer,
+        singleQuery = _this$props.singleQuery,
+        correctValue = _this$props.correctValue;
       var anchorEl = this.state.anchorEl;
       var open = Boolean(anchorEl);
       var buttonId = "dropdown-button-".concat(id);
       var menuId = "dropdown-menu-".concat(id);
-      var valueDisplayId = "dropdown-value-".concat(id); // Determine the class for disabled state, view mode and evaluate mode
-
-      var disabledClass; // Reset elementRefs before each render to avoid stale references
+      var valueDisplayId = "dropdown-value-".concat(id);
 
+      // Determine the class for disabled state, view mode and evaluate mode
+      var disabledClass;
+      // Reset elementRefs before each render to avoid stale references
       this.elementRefs = [];
-
       if (disabled && correct !== undefined) {
-        disabledClass = correct || showCorrectAnswer ? classes.disabledCorrect : classes.disabledIncorrect;
-      } // Create distinct, visually hidden labels for each dropdown
-
+        disabledClass = correct || showCorrectAnswer ? 'disabledCorrect' : 'disabledIncorrect';
+      }
 
+      // Create distinct, visually hidden labels for each dropdown
       var incrementedId = parseInt(id, 10) + 1;
       var labelId = singleQuery ? 'Query-label' : "Query-label-".concat(incrementedId);
-      var labelText = singleQuery ? 'Query' : "Query ".concat(incrementedId); // Changed from Select to Button for dropdown to enhance accessibility. This modification offers explicit control over aria attributes and focuses management, ensuring the dropdown is compliant with accessibility standards. The use of Button and Menu components allows for better handling of keyboard interactions and provides accessible labels and menus, aligning with WCAG guidelines and improving usability for assistive technology users.
+      var labelText = singleQuery ? 'Query' : "Query ".concat(incrementedId);
 
+      // Changed from Select to Button for dropdown to enhance accessibility. This modification offers explicit control over aria attributes and focuses management, ensuring the dropdown is compliant with accessibility standards. The use of Button and Menu components allows for better handling of keyboard interactions and provides accessible labels and menus, aligning with WCAG guidelines and improving usability for assistive technology users.
       var correctnessIcon = null;
-
       if (disabled && correct !== undefined) {
-        correctnessIcon = correct || showCorrectAnswer ? /*#__PURE__*/_react["default"].createElement(_Check["default"], {
-          className: (0, _classnames["default"])(classes.correctnessIndicatorIcon, classes.correctIcon)
-        }) : /*#__PURE__*/_react["default"].createElement(_Close["default"], {
-          className: (0, _classnames["default"])(classes.correctnessIndicatorIcon, classes.incorrectIcon)
+        correctnessIcon = correct || showCorrectAnswer ? /*#__PURE__*/_react["default"].createElement(StyledCorrectnessIcon, {
+          className: "correct"
+        }) : /*#__PURE__*/_react["default"].createElement(StyledIncorrectnessIcon, {
+          className: "incorrect"
         });
       }
-
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
         ref: this.hiddenRef,
         style: {
@@ -244,26 +340,20 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
         tabIndex: -1,
         "aria-hidden": "true"
       }, (choices || []).map(function (c, index) {
-        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        return /*#__PURE__*/_react["default"].createElement(StyledMenuItem, {
           key: index,
-          classes: {
-            root: classes.menuRoot,
-            selected: classes.selected
-          },
           tabIndex: -1,
           "aria-hidden": "true"
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: classes.label,
+        }, /*#__PURE__*/_react["default"].createElement(StyledLabel, {
           dangerouslySetInnerHTML: {
             __html: c.label
           }
         }));
-      })), /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], {
-        className: classes.srOnly,
+      })), /*#__PURE__*/_react["default"].createElement(StyledInputLabel, {
         id: labelId,
         tabIndex: -1,
         "aria-hidden": "true"
-      }, labelText), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      }, labelText), /*#__PURE__*/_react["default"].createElement(StyledButton, {
         ref: this.buttonRef,
         style: _objectSpread(_objectSpread({}, this.state.menuWidth && {
           minWidth: "calc(".concat(this.state.menuWidth, "px + 8px)")
@@ -276,26 +366,21 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
         "aria-expanded": open ? 'true' : undefined,
         "aria-activedescendant": this.state.highlightedOptionId,
         onClick: this.handleClick,
-        classes: {
-          root: classes.root,
-          disabled: disabledClass
-        },
+        className: disabledClass,
         disabled: disabled,
         id: buttonId,
         role: "combobox",
         "aria-label": "Select an option for ".concat(labelText),
         "aria-labelledby": valueDisplayId
-      }, correctnessIcon, /*#__PURE__*/_react["default"].createElement("span", {
+      }, correctnessIcon, /*#__PURE__*/_react["default"].createElement(StyledLabel, {
         id: valueDisplayId,
         ref: this.previewRef,
-        className: classes.label,
         dangerouslySetInnerHTML: {
           __html: correctValue ? correctValue : open && this.state.previewValue ? this.getLabel(choices, this.state.previewValue) : this.getLabel(choices, value) || ''
         }
-      }), open ? /*#__PURE__*/_react["default"].createElement(_ArrowDropUp["default"], null) : /*#__PURE__*/_react["default"].createElement(_ArrowDropDown["default"], null)), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+      }), open ? /*#__PURE__*/_react["default"].createElement(_ArrowDropUp["default"], null) : /*#__PURE__*/_react["default"].createElement(_ArrowDropDown["default"], null)), /*#__PURE__*/_react["default"].createElement(StyledMenu, {
         id: menuId,
         anchorEl: anchorEl,
-        className: classes.selectMenu,
         keepMounted: true,
         open: open,
         onClose: this.handleClose,
@@ -308,25 +393,28 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
           vertical: 'top',
           horizontal: 'left'
         },
-        PaperProps: this.state.menuWidth ? {
-          style: {
-            minWidth: this.state.menuWidth,
-            padding: '4px'
+        transitionDuration: {
+          enter: 225,
+          exit: 195
+        },
+        slotProps: {
+          paper: this.state.menuWidth ? {
+            style: {
+              minWidth: this.state.menuWidth,
+              padding: '4px'
+            }
+          } : undefined,
+          list: {
+            'aria-labelledby': buttonId,
+            role: 'listbox',
+            disablePadding: true
           }
-        } : undefined,
-        MenuListProps: {
-          'aria-labelledby': buttonId,
-          role: 'listbox',
-          disablePadding: true
         }
       }, (choices || []).map(function (c, index) {
         var optionId = "dropdown-option-".concat(id, "-").concat(index);
-        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+        return /*#__PURE__*/_react["default"].createElement(StyledMenuItem, {
           id: optionId,
-          classes: {
-            root: classes.menuRoot,
-            selected: classes.selected
-          },
+          className: c.value === value ? 'selected' : '',
           key: "".concat(c.label, "-").concat(index),
           value: c.value,
           onClick: function onClick() {
@@ -337,16 +425,14 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
           onMouseOver: function onMouseOver() {
             return _this2.handleHover(index);
           }
-        }, /*#__PURE__*/_react["default"].createElement("span", {
+        }, /*#__PURE__*/_react["default"].createElement(StyledLabel, {
           ref: function ref(_ref) {
             return _this2.elementRefs[index] = _ref;
           },
-          className: classes.label,
           dangerouslySetInnerHTML: {
             __html: c.label
           }
-        }), /*#__PURE__*/_react["default"].createElement("span", {
-          className: classes.selectedIndicator,
+        }), /*#__PURE__*/_react["default"].createElement(StyledSelectedIndicator, {
           dangerouslySetInnerHTML: {
             __html: c.value === value ? ' &check;' : ''
           }
@@ -354,15 +440,12 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
       })));
     }
   }]);
-  return Dropdown;
 }(_react["default"].Component);
-
 (0, _defineProperty2["default"])(Dropdown, "propTypes", {
   id: _propTypes["default"].string,
   value: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   onChange: _propTypes["default"].func,
-  classes: _propTypes["default"].object,
   correct: _propTypes["default"].bool,
   choices: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     value: _propTypes["default"].string,
@@ -372,127 +455,5 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
   singleQuery: _propTypes["default"].bool,
   correctValue: _propTypes["default"].string
 });
-
-var styles = function styles() {
-  return {
-    root: {
-      color: _renderUi.color.text(),
-      border: "1px solid ".concat(_renderUi.color.borderGray()),
-      borderRadius: '4px',
-      justifyContent: 'space-between',
-      backgroundColor: _renderUi.color.background(),
-      position: 'relative',
-      height: '45px',
-      width: 'fit-content',
-      margin: '2px',
-      textTransform: 'none',
-      '& span': {
-        paddingRight: '5px'
-      },
-      '& svg': {
-        position: 'absolute',
-        right: 0,
-        top: 'calc(50% - 12px)',
-        pointerEvents: 'none',
-        color: _renderUi.color.text(),
-        marginLeft: '5px'
-      },
-      '&:focus, &:focus-visible': {
-        outline: "3px solid ".concat(_renderUi.color.tertiary()),
-        outlineOffset: '2px',
-        borderWidth: '3px'
-      }
-    },
-    disabledCorrect: {
-      borderWidth: '2px',
-      borderColor: _renderUi.color.correct(),
-      color: "".concat(_renderUi.color.text(), " !important")
-    },
-    disabledIncorrect: {
-      borderWidth: '2px',
-      borderColor: _renderUi.color.incorrectWithIcon(),
-      color: "".concat(_renderUi.color.text(), " !important")
-    },
-    selectMenu: {
-      backgroundColor: _renderUi.color.background(),
-      border: "1px solid ".concat(_renderUi.color.correct(), " !important"),
-      '&:hover': {
-        border: "1px solid ".concat(_renderUi.color.text(), " "),
-        borderColor: 'initial'
-      },
-      '&:focus': {
-        border: "1px solid ".concat(_renderUi.color.text()),
-        borderColor: 'initial'
-      },
-      // remove default padding on the inner list
-      '& .MuiList-root': {
-        padding: 0
-      }
-    },
-    selected: {
-      color: "".concat(_renderUi.color.text(), " !important"),
-      backgroundColor: "".concat(_renderUi.color.background(), " !important"),
-      '&:hover': {
-        color: _renderUi.color.text(),
-        backgroundColor: "".concat(_renderUi.color.dropdownBackground(), " !important")
-      }
-    },
-    menuRoot: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background(),
-      '&:focus, &:focus-visible': {
-        outline: "3px solid ".concat(_renderUi.color.tertiary()),
-        outlineOffset: '-1px' // keeps it inside the item
-
-      },
-      '&:focus': {
-        color: _renderUi.color.text(),
-        backgroundColor: _renderUi.color.background()
-      },
-      '&:hover': {
-        color: _renderUi.color.text(),
-        backgroundColor: _renderUi.color.dropdownBackground()
-      },
-      boxSizing: 'border-box',
-      padding: '25px',
-      borderRadius: '4px'
-    },
-    label: {
-      fontSize: 'max(1rem, 14px)'
-    },
-    selectedIndicator: {
-      fontSize: 'max(1rem, 14px)',
-      position: 'absolute',
-      right: '10px'
-    },
-    srOnly: {
-      position: 'absolute',
-      left: '-10000px',
-      top: 'auto',
-      width: '1px',
-      height: '1px',
-      overflow: 'hidden'
-    },
-    correctnessIndicatorIcon: {
-      color: "".concat(_renderUi.color.white(), " !important"),
-      position: 'absolute',
-      top: '-8px !important',
-      left: '-8px',
-      marginLeft: '0 !important',
-      borderRadius: '50%',
-      fontSize: '16px',
-      padding: '2px'
-    },
-    correctIcon: {
-      backgroundColor: _renderUi.color.correct()
-    },
-    incorrectIcon: {
-      backgroundColor: _renderUi.color.incorrectWithIcon()
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(Dropdown);
-
-exports["default"] = _default;
+var _default = exports["default"] = Dropdown;
 //# sourceMappingURL=dropdown.js.map