@pie-lib/mask-markup 1.14.1-beta.0 → 1.16.0

package/lib/with-mask.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withMask = exports.buildLayoutFromMarkup = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _mask = _interopRequireDefault(require("./mask"));
+
+var _componentize2 = _interopRequireDefault(require("./componentize"));
+
+var _serialization = require("./serialization");
+
+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 buildLayoutFromMarkup = function buildLayoutFromMarkup(markup, type) {
+  var _componentize = (0, _componentize2["default"])(markup, type),
+      processed = _componentize.markup;
+
+  var value = (0, _serialization.deserialize)(processed);
+  return value.document;
+};
+
+exports.buildLayoutFromMarkup = buildLayoutFromMarkup;
+
+var withMask = function withMask(type, renderChildren) {
+  var _class;
+
+  return _class = /*#__PURE__*/function (_React$Component) {
+    (0, _inherits2["default"])(WithMask, _React$Component);
+
+    var _super = _createSuper(WithMask);
+
+    function WithMask() {
+      (0, _classCallCheck2["default"])(this, WithMask);
+      return _super.apply(this, arguments);
+    }
+
+    (0, _createClass2["default"])(WithMask, [{
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        if (this.props.markup !== prevProps.markup) {
+          // eslint-disable-next-line
+          var domNode = _reactDom["default"].findDOMNode(this); // Query all elements that may contain outdated MathJax renderings
+
+
+          var mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled="true"]'); // Clean up for fresh MathJax processing
+
+          (mathElements || []).forEach(function (el) {
+            // Remove the MathJax container to allow for clean updates
+            var mjxContainer = el.querySelector('mjx-container');
+
+            if (mjxContainer) {
+              el.removeChild(mjxContainer);
+            } // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly
+
+
+            var latexCode = el.getAttribute('data-raw');
+            el.innerHTML = latexCode; // Remove the attribute to signal that MathJax should reprocess this element
+
+            el.removeAttribute('data-math-handled');
+          });
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$props = this.props,
+            markup = _this$props.markup,
+            layout = _this$props.layout,
+            value = _this$props.value,
+            onChange = _this$props.onChange,
+            elementType = _this$props.elementType;
+        var maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
+        return /*#__PURE__*/_react["default"].createElement(_mask["default"], {
+          elementType: elementType,
+          layout: maskLayout,
+          value: value,
+          onChange: onChange,
+          renderChildren: renderChildren(this.props)
+        });
+      }
+    }]);
+    return WithMask;
+  }(_react["default"].Component), (0, _defineProperty2["default"])(_class, "propTypes", {
+    /**
+     * At the start we'll probably work with markup
+     */
+    markup: _propTypes["default"].string,
+
+    /**
+     * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.
+     */
+    layout: _propTypes["default"].object,
+    value: _propTypes["default"].object,
+    onChange: _propTypes["default"].func,
+    customMarkMarkupComponent: _propTypes["default"].func,
+    elementType: _propTypes["default"].string
+  }), _class;
+};
+
+exports.withMask = withMask;
+//# sourceMappingURL=with-mask.js.map

package/lib/with-mask.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/with-mask.jsx"],"names":["buildLayoutFromMarkup","markup","type","processed","value","document","withMask","renderChildren","prevProps","props","domNode","ReactDOM","findDOMNode","mathElements","querySelectorAll","forEach","el","mjxContainer","querySelector","removeChild","latexCode","getAttribute","innerHTML","removeAttribute","layout","onChange","elementType","maskLayout","React","Component","PropTypes","string","object","func","customMarkMarkupComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,MAAD,EAASC,IAAT,EAAkB;AACrD,sBAA8B,+BAAaD,MAAb,EAAqBC,IAArB,CAA9B;AAAA,MAAgBC,SAAhB,iBAAQF,MAAR;;AACA,MAAMG,KAAK,GAAG,gCAAYD,SAAZ,CAAd;AACA,SAAOC,KAAK,CAACC,QAAb;AACD,CAJM;;;;AAMA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACJ,IAAD,EAAOK,cAAP,EAA0B;AAAA;;AAChD;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA,aAgBE,4BAAmBC,SAAnB,EAA8B;AAC5B,YAAI,KAAKC,KAAL,CAAWR,MAAX,KAAsBO,SAAS,CAACP,MAApC,EAA4C;AAC1C;AACA,cAAMS,OAAO,GAAGC,qBAASC,WAAT,CAAqB,IAArB,CAAhB,CAF0C,CAG1C;;;AACA,cAAMC,YAAY,GAAGH,OAAO,IAAIA,OAAO,CAACI,gBAAR,CAAyB,wCAAzB,CAAhC,CAJ0C,CAM1C;;AACA,WAACD,YAAY,IAAI,EAAjB,EAAqBE,OAArB,CAA6B,UAACC,EAAD,EAAQ;AACnC;AACA,gBAAMC,YAAY,GAAGD,EAAE,CAACE,aAAH,CAAiB,eAAjB,CAArB;;AAEA,gBAAID,YAAJ,EAAkB;AAChBD,cAAAA,EAAE,CAACG,WAAH,CAAeF,YAAf;AACD,aANkC,CAQnC;;;AACA,gBAAMG,SAAS,GAAGJ,EAAE,CAACK,YAAH,CAAgB,UAAhB,CAAlB;AACAL,YAAAA,EAAE,CAACM,SAAH,GAAeF,SAAf,CAVmC,CAYnC;;AACAJ,YAAAA,EAAE,CAACO,eAAH,CAAmB,mBAAnB;AACD,WAdD;AAeD;AACF;AAxCH;AAAA;AAAA,aA0CE,kBAAS;AACP,0BAAyD,KAAKd,KAA9D;AAAA,YAAQR,MAAR,eAAQA,MAAR;AAAA,YAAgBuB,MAAhB,eAAgBA,MAAhB;AAAA,YAAwBpB,KAAxB,eAAwBA,KAAxB;AAAA,YAA+BqB,QAA/B,eAA+BA,QAA/B;AAAA,YAAyCC,WAAzC,eAAyCA,WAAzC;AAEA,YAAMC,UAAU,GAAGH,MAAM,GAAGA,MAAH,GAAYxB,qBAAqB,CAACC,MAAD,EAASC,IAAT,CAA1D;AACA,4BACE,gCAAC,gBAAD;AACE,UAAA,WAAW,EAAEwB,WADf;AAEE,UAAA,MAAM,EAAEC,UAFV;AAGE,UAAA,KAAK,EAAEvB,KAHT;AAIE,UAAA,QAAQ,EAAEqB,QAJZ;AAKE,UAAA,cAAc,EAAElB,cAAc,CAAC,KAAKE,KAAN;AALhC,UADF;AASD;AAvDH;AAAA;AAAA,IAA8BmB,kBAAMC,SAApC,yDACqB;AACjB;AACN;AACA;AACM5B,IAAAA,MAAM,EAAE6B,sBAAUC,MAJD;;AAKjB;AACN;AACA;AACMP,IAAAA,MAAM,EAAEM,sBAAUE,MARD;AASjB5B,IAAAA,KAAK,EAAE0B,sBAAUE,MATA;AAUjBP,IAAAA,QAAQ,EAAEK,sBAAUG,IAVH;AAWjBC,IAAAA,yBAAyB,EAAEJ,sBAAUG,IAXpB;AAYjBP,IAAAA,WAAW,EAAEI,sBAAUC;AAZN,GADrB;AAyDD,CA1DM","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport Mask from './mask';\nimport componentize from './componentize';\nimport { deserialize } from './serialization';\n\nexport const buildLayoutFromMarkup = (markup, type) => {\n  const { markup: processed } = componentize(markup, type);\n  const value = deserialize(processed);\n  return value.document;\n};\n\nexport const withMask = (type, renderChildren) => {\n  return class WithMask extends React.Component {\n    static propTypes = {\n      /**\n       * At the start we'll probably work with markup\n       */\n      markup: PropTypes.string,\n      /**\n       * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.\n       */\n      layout: PropTypes.object,\n      value: PropTypes.object,\n      onChange: PropTypes.func,\n      customMarkMarkupComponent: PropTypes.func,\n      elementType: PropTypes.string,\n    };\n\n    componentDidUpdate(prevProps) {\n      if (this.props.markup !== prevProps.markup) {\n        // eslint-disable-next-line\n        const domNode = ReactDOM.findDOMNode(this);\n        // Query all elements that may contain outdated MathJax renderings\n        const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled=\"true\"]');\n\n        // Clean up for fresh MathJax processing\n        (mathElements || []).forEach((el) => {\n          // Remove the MathJax container to allow for clean updates\n          const mjxContainer = el.querySelector('mjx-container');\n\n          if (mjxContainer) {\n            el.removeChild(mjxContainer);\n          }\n\n          // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly\n          const latexCode = el.getAttribute('data-raw');\n          el.innerHTML = latexCode;\n\n          // Remove the attribute to signal that MathJax should reprocess this element\n          el.removeAttribute('data-math-handled');\n        });\n      }\n    }\n\n    render() {\n      const { markup, layout, value, onChange, elementType } = this.props;\n\n      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);\n      return (\n        <Mask\n          elementType={elementType}\n          layout={maskLayout}\n          value={value}\n          onChange={onChange}\n          renderChildren={renderChildren(this.props)}\n        />\n      );\n    }\n  };\n};\n"],"file":"with-mask.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "1.14.1-beta.0",
+  "version": "1.16.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,10 +10,9 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.2",
-    "@pie-lib/drag": "^2.3.1-beta.0",
+    "@pie-lib/drag": "beta",
     "@pie-lib/editable-html": "beta",
-    "@pie-lib/math-rendering": "^3.3.1-beta.0",
-    "@pie-lib/render-ui": "^4.16.1-beta.0",
+    "@pie-lib/math-rendering": "beta",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "immutable": ">=3.8.1",
@@ -31,5 +30,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453"
+  "gitHead": "ecb1ca31aa1c24d23af00d5ad04ce73ed8871057"
 }

package/src/choices/choice.jsx

@@ -6,7 +6,7 @@ import Chip from '@material-ui/core/Chip';
 import classnames from 'classnames';
 
 import { renderMath } from '@pie-lib/math-rendering';
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../../render-ui/src/index';
 import { DragSource } from '@pie-lib/drag';
 
 export const DRAG_TYPE = 'MaskBlank';

package/src/components/__tests__/__snapshots__/dropdown.test.js.snap

@@ -23,17 +23,18 @@ exports[`Dropdown render renders correctly with correct as true 1`] = `
   }
   classes={
     Object {
-      "correctIcon": "Dropdown-correctIcon-10",
-      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-9",
+      "correctIcon": "Dropdown-correctIcon-11",
+      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-10",
       "disabledCorrect": "Dropdown-disabledCorrect-2",
       "disabledIncorrect": "Dropdown-disabledIncorrect-3",
-      "incorrectIcon": "Dropdown-incorrectIcon-11",
+      "incorrectIcon": "Dropdown-incorrectIcon-12",
       "label": "Dropdown-label-7",
       "menuRoot": "Dropdown-menuRoot-6",
       "root": "Dropdown-root-1",
       "selectMenu": "Dropdown-selectMenu-4",
       "selected": "Dropdown-selected-5",
-      "srOnly": "Dropdown-srOnly-8",
+      "selectedIndicator": "Dropdown-selectedIndicator-8",
+      "srOnly": "Dropdown-srOnly-9",
     }
   }
   correct={true}
@@ -67,17 +68,18 @@ exports[`Dropdown render renders correctly with default props 1`] = `
   }
   classes={
     Object {
-      "correctIcon": "Dropdown-correctIcon-10",
-      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-9",
+      "correctIcon": "Dropdown-correctIcon-11",
+      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-10",
       "disabledCorrect": "Dropdown-disabledCorrect-2",
       "disabledIncorrect": "Dropdown-disabledIncorrect-3",
-      "incorrectIcon": "Dropdown-incorrectIcon-11",
+      "incorrectIcon": "Dropdown-incorrectIcon-12",
       "label": "Dropdown-label-7",
       "menuRoot": "Dropdown-menuRoot-6",
       "root": "Dropdown-root-1",
       "selectMenu": "Dropdown-selectMenu-4",
       "selected": "Dropdown-selected-5",
-      "srOnly": "Dropdown-srOnly-8",
+      "selectedIndicator": "Dropdown-selectedIndicator-8",
+      "srOnly": "Dropdown-srOnly-9",
     }
   }
   correct={false}
@@ -111,17 +113,18 @@ exports[`Dropdown render renders correctly with disabled prop as true 1`] = `
   }
   classes={
     Object {
-      "correctIcon": "Dropdown-correctIcon-10",
-      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-9",
+      "correctIcon": "Dropdown-correctIcon-11",
+      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-10",
       "disabledCorrect": "Dropdown-disabledCorrect-2",
       "disabledIncorrect": "Dropdown-disabledIncorrect-3",
-      "incorrectIcon": "Dropdown-incorrectIcon-11",
+      "incorrectIcon": "Dropdown-incorrectIcon-12",
       "label": "Dropdown-label-7",
       "menuRoot": "Dropdown-menuRoot-6",
       "root": "Dropdown-root-1",
       "selectMenu": "Dropdown-selectMenu-4",
       "selected": "Dropdown-selected-5",
-      "srOnly": "Dropdown-srOnly-8",
+      "selectedIndicator": "Dropdown-selectedIndicator-8",
+      "srOnly": "Dropdown-srOnly-9",
     }
   }
   correct={false}

package/src/components/blank.jsx

@@ -8,7 +8,7 @@ import { DragSource, DropTarget } from '@pie-lib/drag';
 import { withStyles } from '@material-ui/core/styles';
 import Chip from '@material-ui/core/Chip';
 import classnames from 'classnames';
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../../render-ui/src/index';
 
 const log = debug('pie-lib:mask-markup:blank');
 export const DRAG_TYPE = 'MaskBlank';

package/src/components/correct-input.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
 import classnames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../../render-ui/src/index';
 
 const correctStyle = (color) => ({
   borderColor: `${color} !important`,

package/src/components/dropdown.jsx

@@ -5,12 +5,14 @@ import InputLabel from '@material-ui/core/InputLabel';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
 import Close from '@material-ui/icons/Close';
 import Check from '@material-ui/icons/Check';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
+import isEqual from 'lodash/isEqual';
 
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../../render-ui/src/index';
 import { renderMath } from '@pie-lib/math-rendering';
 
 class Dropdown extends React.Component {
@@ -23,6 +25,8 @@ class Dropdown extends React.Component {
     correct: PropTypes.bool,
     choices: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })),
     showCorrectAnswer: PropTypes.bool,
+    singleQuery: PropTypes.bool,
+    correctValue: PropTypes.string,
   };
 
   constructor(props) {
@@ -31,27 +35,73 @@ class Dropdown extends React.Component {
     this.state = {
       anchorEl: null,
       highlightedOptionId: null,
+      menuWidth: null,
+      previewValue: null,
     };
-
+    this.hiddenRef = React.createRef();
+    this.buttonRef = React.createRef();
+    this.previewRef = React.createRef();
     this.elementRefs = [];
   }
 
-  componentDidUpdate() {
-    this.elementRefs.forEach((ref) => {
-      if (ref) {
-        renderMath(ref);
+  componentDidMount() {
+    // measure hidden menu width once
+    if (this.hiddenRef.current && this.state.menuWidth === null) {
+      this.setState({ menuWidth: this.hiddenRef.current.clientWidth });
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const hiddenEl = this.hiddenRef.current;
+
+    const dropdownJustOpened = !prevState.anchorEl && this.state.anchorEl;
+    if (dropdownJustOpened) {
+      this.elementRefs.forEach((ref) => {
+        if (!ref) return;
+
+        const containsLatex = ref.querySelector('[data-latex], [data-raw]');
+        const hasMathJax = ref.querySelector('mjx-container');
+        const mathHandled = ref.querySelector('[data-math-handled="true"]');
+
+        if (containsLatex && (!mathHandled || !hasMathJax)) {
+          renderMath(ref);
+        }
+      });
+    }
+
+    if (hiddenEl) {
+      const newWidth = hiddenEl.clientWidth;
+      if (newWidth !== this.state.menuWidth) {
+        this.elementRefs.forEach((ref) => {
+          if (ref) renderMath(ref);
+        });
+
+        renderMath(hiddenEl);
+        this.setState({ menuWidth: newWidth });
       }
-    });
+    }
   }
 
   handleClick = (event) => this.setState({ anchorEl: event.currentTarget });
 
-  handleClose = () => this.setState({ anchorEl: null });
+  handleClose = () => {
+    const { value } = this.props;
+    this.setState({ anchorEl: null, previewValue: null, highlightedOptionId: null });
+    // clear displayed preview if no selection
+    if (!value && this.previewRef.current) {
+      this.previewRef.current.innerHTML = '';
+    }
+  };
 
   handleHighlight = (index) => {
     const highlightedOptionId = `dropdown-option-${this.props.id}-${index}`;
 
-    this.setState({ highlightedOptionId });
+    // preview on hover if nothing selected
+    const stateUpdate = { highlightedOptionId };
+    if (!this.props.value) {
+      stateUpdate.previewValue = this.props.choices[index].value;
+    }
+    this.setState(stateUpdate);
   };
 
   handleSelect = (value, index) => {
@@ -60,6 +110,25 @@ class Dropdown extends React.Component {
     this.handleClose();
   };
 
+  handleHover = (index) => {
+    const selectedValue = this.props.value;
+
+    if (selectedValue) return;
+
+    const highlightedOptionId = `dropdown-option-${this.props.id}-${index}`;
+    const previewValue = this.state.previewValue;
+
+    this.setState({ highlightedOptionId, previewValue }, () => {
+      // On hover, preview the math-rendered content inside the button if no value is selected.
+      const ref = this.elementRefs[index];
+      const preview = this.previewRef.current;
+
+      if (ref && preview) {
+        preview.innerHTML = ref.innerHTML;
+      }
+    });
+  };
+
   getLabel(choices, value) {
     const found = (choices || []).find((choice) => choice.value === value);
 
@@ -68,7 +137,6 @@ class Dropdown extends React.Component {
 
   render() {
     const { classes, id, correct, disabled, value, choices, showCorrectAnswer, singleQuery, correctValue } = this.props;
-
     const { anchorEl } = this.state;
     const open = Boolean(anchorEl);
     const buttonId = `dropdown-button-${id}`;
@@ -90,7 +158,6 @@ class Dropdown extends React.Component {
     const labelText = singleQuery ? 'Query' : `Query ${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.
-
     let correctnessIcon = null;
     if (disabled && correct !== undefined) {
       correctnessIcon =
@@ -103,10 +170,23 @@ class Dropdown extends React.Component {
 
     return (
       <>
+        <div ref={this.hiddenRef} style={{ position: 'absolute', visibility: 'hidden', top: 0, left: 0 }}>
+          {(choices || []).map((c, index) => (
+            <MenuItem key={index} classes={{ root: classes.menuRoot, selected: classes.selected }}>
+              <span className={classes.label} dangerouslySetInnerHTML={{ __html: c.label }} />
+            </MenuItem>
+          ))}
+        </div>
         <InputLabel className={classes.srOnly} id={labelId}>
           {labelText}
         </InputLabel>
         <Button
+          ref={this.buttonRef}
+          style={{
+            ...(this.state.menuWidth && { minWidth: `calc(${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}
@@ -125,12 +205,17 @@ class Dropdown extends React.Component {
           {correctnessIcon}
           <span
             id={valueDisplayId}
+            ref={this.previewRef}
             className={classes.label}
             dangerouslySetInnerHTML={{
-              __html: correctValue ? correctValue : this.getLabel(choices, value) ? this.getLabel(choices, value) : '',
+              __html: correctValue
+                ? correctValue
+                : open && this.state.previewValue
+                ? this.getLabel(choices, this.state.previewValue)
+                : this.getLabel(choices, value) || '',
             }}
           />
-          <ArrowDropDownIcon />
+          {open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
         </Button>
         <Menu
           id={menuId}
@@ -139,9 +224,14 @@ class Dropdown extends React.Component {
           keepMounted
           open={open}
           onClose={this.handleClose}
+          getContentAnchorEl={null}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+          PaperProps={this.state.menuWidth ? { style: { minWidth: this.state.menuWidth, padding: '4px' } } : undefined}
           MenuListProps={{
             'aria-labelledby': buttonId,
             role: 'listbox',
+            disablePadding: true,
           }}
         >
           {(choices || []).map((c, index) => {
@@ -156,6 +246,7 @@ class Dropdown extends React.Component {
                 onClick={() => this.handleSelect(c.value, index)}
                 role="option"
                 aria-selected={this.state.highlightedOptionId === optionId ? 'true' : undefined}
+                onMouseOver={() => this.handleHover(index)}
               >
                 <span
                   ref={(ref) => (this.elementRefs[index] = ref)}
@@ -163,7 +254,7 @@ class Dropdown extends React.Component {
                   dangerouslySetInnerHTML={{ __html: c.label }}
                 />
                 <span
-                  className={classes.label}
+                  className={classes.selectedIndicator}
                   dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}
                 />
               </MenuItem>
@@ -178,7 +269,7 @@ class Dropdown extends React.Component {
 const styles = () => ({
   root: {
     color: color.text(),
-    border: `1px solid ${color.text()}`,
+    border: `1px solid ${color.borderGray()}`,
     borderRadius: '4px',
     justifyContent: 'space-between',
     backgroundColor: color.background(),
@@ -220,13 +311,17 @@ const styles = () => ({
       border: `1px solid ${color.text()}`,
       borderColor: 'initial',
     },
+    // remove default padding on the inner list
+    '& .MuiList-root': {
+      padding: 0,
+    },
   },
   selected: {
     color: `${color.text()} !important`,
     backgroundColor: `${color.background()} !important`,
     '&:hover': {
       color: color.text(),
-      backgroundColor: `${color.secondaryLight()} !important`,
+      backgroundColor: `${color.dropdownBackground()} !important`,
     },
   },
   menuRoot: {
@@ -238,20 +333,20 @@ const styles = () => ({
     },
     '&:hover': {
       color: color.text(),
-      backgroundColor: color.secondaryLight(),
+      backgroundColor: color.dropdownBackground(),
     },
     boxSizing: 'border-box',
     padding: '25px',
-    '&:first-of-type': {
-      borderRadius: '3px 3px 0 0',
-    },
-    '&:last-of-type': {
-      borderRadius: '0 0 3px 3px',
-    },
+    borderRadius: '4px',
   },
   label: {
     fontSize: 'max(1rem, 14px)',
   },
+  selectedIndicator: {
+    fontSize: 'max(1rem, 14px)',
+    position: 'absolute',
+    right: '10px',
+  },
   srOnly: {
     position: 'absolute',
     left: '-10000px',

package/src/constructed-response.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
 
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../render-ui/src/index';
 import EditableHtml from '@pie-lib/editable-html';
 import { withMask } from './with-mask';