@pie-lib/mask-markup 2.0.0-beta.2 → 2.0.0-next.0

package/lib/components/dropdown.js

@@ -7,184 +7,453 @@ Object.defineProperty(exports, "__esModule", {
 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 _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-var _correctInput = _interopRequireDefault(require("./correct-input"));
-var _styles = require("@material-ui/core/styles");
+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");
-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; } }
+var _mathRendering = require("@pie-lib/math-rendering");
+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), "showCheckmarkAndOpen", function () {
+    _this = _callSuper(this, Dropdown, [props]);
+    (0, _defineProperty2["default"])(_this, "handleClick", function (event) {
+      return _this.setState({
+        anchorEl: event.currentTarget
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "handleClose", function () {
+      var value = _this.props.value;
       _this.setState({
-        showCheckmark: true,
-        open: true
+        anchorEl: null,
+        previewValue: null,
+        highlightedOptionId: null
       });
+      // clear displayed preview if no selection
+      if (!value && _this.previewRef.current) {
+        _this.previewRef.current.innerHTML = '';
+      }
+    });
+    (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"])(_this, "handleSelect", function (value, index) {
+      _this.props.onChange(_this.props.id, value);
+      _this.handleHighlight(index);
+      _this.handleClose();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "hideCheckmarkAndClose", function () {
+    (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({
-        showCheckmark: false,
-        open: false
+        highlightedOptionId: highlightedOptionId,
+        previewValue: previewValue
+      }, function () {
+        // 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;
+        }
       });
     });
     _this.state = {
-      showCheckmark: false,
-      open: false
+      anchorEl: null,
+      highlightedOptionId: null,
+      menuWidth: null,
+      previewValue: null
     };
+    _this.hiddenRef = /*#__PURE__*/_react["default"].createRef();
+    _this.buttonRef = /*#__PURE__*/_react["default"].createRef();
+    _this.previewRef = /*#__PURE__*/_react["default"].createRef();
+    _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
+      if (this.hiddenRef.current && this.state.menuWidth === null) {
+        this.setState({
+          menuWidth: this.hiddenRef.current.clientWidth
+        });
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    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);
+          });
+          (0, _mathRendering.renderMath)(hiddenEl);
+          this.setState({
+            menuWidth: newWidth
+          });
+        }
+      }
+    }
+  }, {
+    key: "getLabel",
+    value: function getLabel(choices, value) {
+      var found = (choices || []).find(function (choice) {
+        return choice.value === value;
+      });
+      return found ? found.label.trim() : undefined;
+    }
+  }, {
     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,
-        _onChange = _this$props.onChange,
         choices = _this$props.choices,
-        showCorrectAnswer = _this$props.showCorrectAnswer;
-      var _this$state = this.state,
-        showCheckmark = _this$state.showCheckmark,
-        open = _this$state.open;
-      return /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        classes: {
-          root: classes.root,
-          icon: classes.icon,
-          selectMenu: classes.selectMenu,
-          select: classes.select
+        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
+      this.elementRefs = [];
+      if (disabled && correct !== undefined) {
+        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 correctnessIcon = null;
+      if (disabled && correct !== undefined) {
+        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: {
+          position: 'absolute',
+          visibility: 'hidden',
+          top: 0,
+          left: 0
         },
+        tabIndex: -1,
+        "aria-hidden": "true"
+      }, (choices || []).map(function (c, index) {
+        return /*#__PURE__*/_react["default"].createElement(StyledMenuItem, {
+          key: index,
+          tabIndex: -1,
+          "aria-hidden": "true"
+        }, /*#__PURE__*/_react["default"].createElement(StyledLabel, {
+          dangerouslySetInnerHTML: {
+            __html: c.label
+          }
+        }));
+      })), /*#__PURE__*/_react["default"].createElement(StyledInputLabel, {
+        id: labelId,
+        tabIndex: -1,
+        "aria-hidden": "true"
+      }, labelText), /*#__PURE__*/_react["default"].createElement(StyledButton, {
+        ref: this.buttonRef,
+        style: _objectSpread(_objectSpread({}, this.state.menuWidth && {
+          minWidth: "calc(".concat(this.state.menuWidth, "px + 8px)")
+        }), {}, {
+          borderWidth: open ? '2px' : '1px',
+          transition: 'border-width 0.2s ease-in-out'
+        }),
+        "aria-controls": open ? menuId : undefined,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open ? 'true' : undefined,
+        "aria-activedescendant": this.state.highlightedOptionId,
+        onClick: this.handleClick,
+        className: disabledClass,
         disabled: disabled,
-        value: value || '',
-        onOpen: this.showCheckmarkAndOpen,
-        onClose: this.hideCheckmarkAndClose,
+        id: buttonId,
+        role: "combobox",
+        "aria-label": "Select an option for ".concat(labelText),
+        "aria-labelledby": valueDisplayId
+      }, correctnessIcon, /*#__PURE__*/_react["default"].createElement(StyledLabel, {
+        id: valueDisplayId,
+        ref: this.previewRef,
+        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(StyledMenu, {
+        id: menuId,
+        anchorEl: anchorEl,
+        keepMounted: true,
         open: open,
-        input: /*#__PURE__*/_react["default"].createElement(_correctInput["default"], {
-          correct: showCorrectAnswer || correct
-        }),
-        MenuProps: {
-          keepMounted: true,
-          disablePortal: true
+        onClose: this.handleClose,
+        getContentAnchorEl: null,
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'left'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'left'
         },
-        onChange: function onChange(e) {
-          _onChange(id, e.target.value);
+        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
+          }
         }
       }, (choices || []).map(function (c, index) {
-        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-          classes: {
-            root: classes.menuRoot,
-            selected: classes.selected
-          },
+        var optionId = "dropdown-option-".concat(id, "-").concat(index);
+        return /*#__PURE__*/_react["default"].createElement(StyledMenuItem, {
+          id: optionId,
+          className: c.value === value ? 'selected' : '',
           key: "".concat(c.label, "-").concat(index),
-          value: c.value
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: classes.label,
+          value: c.value,
+          onClick: function onClick() {
+            return _this2.handleSelect(c.value, index);
+          },
+          role: "option",
+          "aria-selected": _this2.state.highlightedOptionId === optionId ? 'true' : undefined,
+          onMouseOver: function onMouseOver() {
+            return _this2.handleHover(index);
+          }
+        }, /*#__PURE__*/_react["default"].createElement(StyledLabel, {
+          ref: function ref(_ref) {
+            return _this2.elementRefs[index] = _ref;
+          },
           dangerouslySetInnerHTML: {
             __html: c.label
           }
-        }), showCheckmark && /*#__PURE__*/_react["default"].createElement("span", {
-          className: classes.label,
+        }), /*#__PURE__*/_react["default"].createElement(StyledSelectedIndicator, {
           dangerouslySetInnerHTML: {
             __html: c.value === value ? ' &check;' : ''
           }
         }));
-      }));
+      })));
     }
   }]);
-  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,
     label: _propTypes["default"].string
   })),
-  showCorrectAnswer: _propTypes["default"].bool
+  showCorrectAnswer: _propTypes["default"].bool,
+  singleQuery: _propTypes["default"].bool,
+  correctValue: _propTypes["default"].string
 });
-var styles = function styles() {
-  return {
-    root: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background(),
-      borderColor: _renderUi.color.secondaryLight(),
-      '& ul': {
-        paddingTop: 0,
-        paddingBottom: 0,
-        border: "1px solid ".concat(_renderUi.color.text()),
-        borderRadius: '5px',
-        color: _renderUi.color.text(),
-        backgroundColor: _renderUi.color.background()
-      }
-    },
-    select: {
-      '&:focus': {
-        borderRadius: '4px'
-      }
-    },
-    selectMenu: {
-      backgroundColor: _renderUi.color.background(),
-      '&:hover': {
-        borderColor: 'initial'
-      },
-      '&:focus': {
-        borderColor: 'initial'
-      }
-    },
-    icon: {
-      color: _renderUi.color.text()
-    },
-    selected: {
-      color: "".concat(_renderUi.color.text(), " !important"),
-      backgroundColor: "".concat(_renderUi.color.background(), " !important"),
-      '&:hover': {
-        color: _renderUi.color.text(),
-        backgroundColor: "".concat(_renderUi.color.secondaryLight(), " !important")
-      }
-    },
-    menuRoot: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background(),
-      '&:focus': {
-        color: _renderUi.color.text(),
-        backgroundColor: _renderUi.color.background()
-      },
-      '&:hover': {
-        color: _renderUi.color.text(),
-        backgroundColor: _renderUi.color.secondaryLight()
-      },
-      boxSizing: 'border-box',
-      padding: '25px',
-      '&:first-of-type': {
-        borderRadius: '3px 3px 0 0'
-      },
-      '&:last-of-type': {
-        borderRadius: '0 0 3px 3px'
-      }
-    },
-    label: {
-      fontSize: 'max(1rem, 14px)'
-    }
-  };
-};
-var _default = (0, _styles.withStyles)(styles)(Dropdown);
-exports["default"] = _default;
+var _default = exports["default"] = Dropdown;
 //# sourceMappingURL=dropdown.js.map