@pie-lib/mask-markup 1.29.1-next.0 → 1.30.1

package/esm/index.js

@@ -0,0 +1,1782 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+import { withStyles } from '@material-ui/core/styles';
+import Html from 'slate-html-serializer';
+import { object } from 'to-style';
+import debug from 'debug';
+import classnames from 'classnames';
+import { renderMath } from '@pie-lib/math-rendering';
+import findKey from 'lodash/findKey';
+import Chip from '@material-ui/core/Chip';
+import { color } from '@pie-lib/render-ui';
+import { DragSource, DragDroppablePlaceholder, DropTarget } from '@pie-lib/drag';
+import grey from '@material-ui/core/colors/grey';
+import EditableHtml from '@pie-lib/editable-html';
+import Button from '@material-ui/core/Button';
+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';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+const log$1 = debug('@pie-lib:mask-markup:serialization');
+const INLINE = ['span'];
+const MARK = ['em', 'strong', 'u'];
+const TEXT_NODE = 3;
+const COMMENT_NODE = 8;
+
+const attr = el => {
+  if (!el.attributes || el.attributes.length <= 0) {
+    return undefined;
+  }
+
+  const out = {};
+  let i;
+
+  for (i = 0; i < el.attributes.length; i++) {
+    const a = el.attributes[i];
+    out[a.name] = a.value;
+  }
+
+  return out;
+};
+
+const getObject = type => {
+  if (INLINE.includes(type)) {
+    return 'inline';
+  } else if (MARK.includes(type)) {
+    return 'mark';
+  }
+
+  return 'block';
+};
+
+const parseStyleString = s => {
+  const regex = /([\w-]*)\s*:\s*([^;]*)/g;
+  let match;
+  const result = {};
+
+  while (match = regex.exec(s)) {
+    result[match[1]] = match[2].trim();
+  }
+
+  return result;
+};
+const reactAttributes = o => object(o, {
+  camelize: true,
+  addUnits: false
+});
+
+const handleStyles = (el, attribute) => {
+  const styleString = el.getAttribute(attribute);
+  return reactAttributes(parseStyleString(styleString));
+};
+
+const handleClass = (el, acc, attribute) => {
+  const classNames = el.getAttribute(attribute);
+  delete acc.class;
+  return classNames;
+};
+
+const attributesToMap = el => (acc, attribute) => {
+  if (!el.getAttribute) {
+    return acc;
+  }
+
+  const value = el.getAttribute(attribute);
+
+  if (value) {
+    switch (attribute) {
+      case 'style':
+        acc.style = handleStyles(el, attribute);
+        break;
+
+      case 'class':
+        acc.className = handleClass(el, acc, attribute);
+        break;
+
+      default:
+        acc[attribute] = el.getAttribute(attribute);
+        break;
+    }
+  }
+
+  return acc;
+};
+
+const attributes = ['border', 'class', 'style'];
+/**
+ * Tags to marks.
+ *
+ * @type {Object}
+ */
+
+const MARK_TAGS = {
+  b: 'bold',
+  em: 'italic',
+  u: 'underline',
+  s: 'strikethrough',
+  code: 'code',
+  strong: 'strong'
+};
+const marks = {
+  deserialize(el, next) {
+    const mark = MARK_TAGS[el.tagName.toLowerCase()];
+    if (!mark) return;
+    log$1('[deserialize] mark: ', mark);
+    return {
+      object: 'mark',
+      type: mark,
+      nodes: next(el.childNodes)
+    };
+  }
+
+};
+const rules = [marks, {
+  /**
+   * deserialize everything, we're not fussy about the dom structure for now.
+   */
+  deserialize: (el, next) => {
+    if (el.nodeType === COMMENT_NODE) {
+      return undefined;
+    }
+
+    if (el.nodeType === TEXT_NODE) {
+      return {
+        object: 'text',
+        leaves: [{
+          text: el.textContent
+        }]
+      };
+    }
+
+    const type = el.tagName.toLowerCase();
+    const normalAttrs = attr(el) || {};
+
+    if (type == 'audio' && normalAttrs.controls == '') {
+      normalAttrs.controls = true;
+    }
+
+    const allAttrs = attributes.reduce(attributesToMap(el), _extends({}, normalAttrs));
+    const object = getObject(type);
+
+    if (el.tagName.toLowerCase() === 'math') {
+      return {
+        isMath: true,
+        nodes: [el]
+      };
+    }
+
+    return {
+      object,
+      type,
+      data: {
+        dataset: _extends({}, el.dataset),
+        attributes: _extends({}, allAttrs)
+      },
+      nodes: next(el.childNodes)
+    };
+  }
+}];
+/**
+ * Create a new serializer instance with our `rules` from above.
+ * Having a default div block will just put every div on it's own line, which is not ideal.
+ */
+
+const html = new Html({
+  rules,
+  defaultBlock: 'span'
+});
+const deserialize = s => html.deserialize(s, {
+  toJSON: true
+});
+
+const Paragraph = withStyles(theme => ({
+  para: {
+    paddingTop: 2 * theme.spacing.unit,
+    paddingBottom: 2 * theme.spacing.unit
+  }
+}))(props => /*#__PURE__*/React.createElement("div", {
+  className: props.classes.para
+}, props.children));
+const Spacer = withStyles(() => ({
+  spacer: {
+    display: 'inline-block',
+    width: '.75em'
+  }
+}))(props => /*#__PURE__*/React.createElement("span", {
+  className: props.classes.spacer
+}));
+const restrictWhitespaceTypes = ['tbody', 'tr'];
+
+const addText = (parentNode, text) => {
+  const isWhitespace = text.trim() === '';
+  const parentType = parentNode && parentNode.type;
+
+  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {
+    return undefined;
+  } else {
+    return text;
+  }
+};
+
+const getMark = n => {
+  const mark = n.leaves.find(leave => get(leave, 'marks', []).length);
+
+  if (mark) {
+    return mark.marks[0];
+  }
+
+  return null;
+};
+
+const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode, elementType) => {
+  if (!value) {
+    return null;
+  }
+
+  const children = [];
+  (layout.nodes || []).forEach((n, index) => {
+    const key = n.type ? `${n.type}-${index}` : `${index}`;
+
+    if (n.isMath) {
+      children.push( /*#__PURE__*/React.createElement("span", {
+        dangerouslySetInnerHTML: {
+          __html: `<math displaystyle="true">${n.nodes[0].innerHTML}</math>`
+        }
+      }));
+      return children;
+    }
+
+    if (rootRenderChildren) {
+      const c = rootRenderChildren(n, value, onChange);
+
+      if (c) {
+        children.push(c);
+
+        if ((parentNode == null ? void 0 : parentNode.type) !== 'td' && elementType === 'drag-in-the-blank') {
+          children.push( /*#__PURE__*/React.createElement(Spacer, {
+            key: `spacer-${index}`
+          }));
+        }
+
+        return;
+      }
+    }
+
+    if (n.object === 'text') {
+      const content = n.leaves.reduce((acc, l) => {
+        const t = l.text;
+        const extraText = addText(parentNode, t);
+        return extraText ? acc + extraText : acc;
+      }, '');
+      const mark = getMark(n);
+
+      if (mark) {
+        let markKey;
+
+        for (markKey in MARK_TAGS) {
+          if (MARK_TAGS[markKey] === mark.type) {
+            const Tag = markKey;
+            children.push( /*#__PURE__*/React.createElement(Tag, {
+              key: key
+            }, content));
+            break;
+          }
+        }
+      } else if (content.length > 0) {
+        children.push(content);
+
+        if ((parentNode == null ? void 0 : parentNode.type) !== 'td' && elementType === 'drag-in-the-blank') {
+          children.push( /*#__PURE__*/React.createElement(Spacer, {
+            key: `spacer-${index}`
+          }));
+        }
+      }
+    } else {
+      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);
+
+      if (n.type === 'p' || n.type === 'paragraph') {
+        children.push( /*#__PURE__*/React.createElement(Paragraph, {
+          key: key
+        }, subNodes));
+      } else {
+        const Tag = n.type;
+
+        if (n.nodes && n.nodes.length > 0) {
+          children.push( /*#__PURE__*/React.createElement(Tag, _extends({
+            key: key
+          }, n.data.attributes), subNodes));
+        } else {
+          children.push( /*#__PURE__*/React.createElement(Tag, _extends({
+            key: key
+          }, n.data.attributes)));
+        }
+      }
+    }
+  });
+  return children;
+};
+const MaskContainer = withStyles(() => ({
+  main: {
+    display: 'initial'
+  },
+  tableStyle: {
+    '&:not(.MathJax) table': {
+      borderCollapse: 'collapse'
+    },
+    // align table content to left as per STAR requirement PD-3687
+    '&:not(.MathJax) table td, &:not(.MathJax) table th': {
+      padding: '8px 12px',
+      textAlign: 'left'
+    }
+  }
+}))(props => /*#__PURE__*/React.createElement("div", {
+  className: classnames(props.classes.main, props.classes.tableStyle)
+}, props.children));
+/**
+ * Renders a layout that uses the slate.js Value model structure.
+ */
+
+class Mask extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.handleChange = (id, value) => {
+      const data = _extends({}, this.props.value, {
+        [id]: value
+      });
+
+      this.props.onChange(data);
+    };
+  }
+
+  render() {
+    const {
+      value,
+      layout,
+      elementType
+    } = this.props;
+    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
+    return /*#__PURE__*/React.createElement(MaskContainer, null, children);
+  }
+
+}
+Mask.propTypes = {
+  renderChildren: PropTypes.func,
+  layout: PropTypes.object,
+  value: PropTypes.object,
+  onChange: PropTypes.func,
+  elementType: PropTypes.string
+};
+
+const REGEX = /\{\{(\d+)\}\}/g;
+var componentize = ((s, t) => {
+  if (!s) {
+    return {
+      markup: ''
+    };
+  }
+
+  const markup = s.replace(REGEX, (match, g) => {
+    return `<span data-component="${t}" data-id="${g}"></span>`;
+  });
+  return {
+    markup
+  };
+});
+
+const buildLayoutFromMarkup = (markup, type) => {
+  const {
+    markup: processed
+  } = componentize(markup, type);
+  const value = deserialize(processed);
+  return value.document;
+};
+const withMask = (type, renderChildren) => {
+  var _class;
+
+  return _class = class WithMask extends React.Component {
+    componentDidUpdate(prevProps) {
+      if (this.props.markup !== prevProps.markup) {
+        // eslint-disable-next-line
+        const domNode = ReactDOM.findDOMNode(this); // Query all elements that may contain outdated MathJax renderings
+
+        const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled="true"]'); // Clean up for fresh MathJax processing
+
+        (mathElements || []).forEach(el => {
+          // Remove the MathJax container to allow for clean updates
+          const mjxContainer = el.querySelector('mjx-container');
+
+          if (mjxContainer) {
+            el.removeChild(mjxContainer);
+          } // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly
+
+
+          const latexCode = el.getAttribute('data-raw');
+          el.innerHTML = latexCode; // Remove the attribute to signal that MathJax should reprocess this element
+
+          el.removeAttribute('data-math-handled');
+        });
+      }
+    }
+
+    render() {
+      const {
+        markup,
+        layout,
+        value,
+        onChange,
+        elementType
+      } = this.props;
+      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
+      return /*#__PURE__*/React.createElement(Mask, {
+        elementType: elementType,
+        layout: maskLayout,
+        value: value,
+        onChange: onChange,
+        renderChildren: renderChildren(this.props)
+      });
+    }
+
+  }, _class.propTypes = {
+    /**
+     * At the start we'll probably work with markup
+     */
+    markup: PropTypes.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.object,
+    value: PropTypes.object,
+    onChange: PropTypes.func,
+    customMarkMarkupComponent: PropTypes.func,
+    elementType: PropTypes.string
+  }, _class;
+};
+
+const DRAG_TYPE$1 = 'MaskBlank';
+
+class BlankContentComp extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.startDrag = () => {
+      const {
+        connectDragSource,
+        disabled
+      } = this.props;
+
+      if (!disabled) {
+        connectDragSource(this.dragContainerRef);
+      }
+    };
+
+    this.handleTouchStart = e => {
+      e.preventDefault();
+      this.longPressTimer = setTimeout(() => {
+        this.startDrag(e);
+      }, 500);
+    };
+
+    this.handleTouchEnd = () => {
+      clearTimeout(this.longPressTimer);
+    };
+
+    this.handleTouchMove = () => {
+      clearTimeout(this.longPressTimer);
+    };
+  }
+
+  componentDidMount() {
+    if (this.dragContainerRef) {
+      this.dragContainerRef.addEventListener('touchstart', this.handleTouchStart, {
+        passive: false
+      });
+      this.dragContainerRef.addEventListener('touchend', this.handleTouchEnd);
+      this.dragContainerRef.addEventListener('touchmove', this.handleTouchMove);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.dragContainerRef) {
+      this.dragContainerRef.removeEventListener('touchstart', this.handleTouchStart);
+      this.dragContainerRef.removeEventListener('touchend', this.handleTouchEnd);
+      this.dragContainerRef.removeEventListener('touchmove', this.handleTouchMove);
+    }
+  }
+
+  componentDidUpdate() {
+    renderMath(this.rootRef);
+  }
+
+  render() {
+    const {
+      connectDragSource,
+      choice,
+      classes,
+      disabled
+    } = this.props; // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.
+
+    return connectDragSource( /*#__PURE__*/React.createElement("span", {
+      className: classnames(classes.choice, disabled && classes.disabled),
+      ref: ref => {
+        //eslint-disable-next-line
+        this.dragContainerRef = ReactDOM.findDOMNode(ref);
+      }
+    }, /*#__PURE__*/React.createElement(Chip, {
+      clickable: false,
+      disabled: true,
+      ref: ref => {
+        //eslint-disable-next-line
+        this.rootRef = ReactDOM.findDOMNode(ref);
+      },
+      className: classes.chip,
+      label: /*#__PURE__*/React.createElement("span", {
+        className: classes.chipLabel,
+        ref: ref => {
+          if (ref) {
+            ref.innerHTML = choice.value || ' ';
+          }
+        }
+      }, ' '),
+      variant: disabled ? 'outlined' : undefined
+    })), {});
+  }
+
+}
+
+BlankContentComp.propTypes = {
+  disabled: PropTypes.bool,
+  choice: PropTypes.object,
+  classes: PropTypes.object,
+  connectDragSource: PropTypes.func
+};
+const BlankContent$1 = withStyles(theme => ({
+  choice: {
+    border: `solid 0px ${theme.palette.primary.main}`,
+    borderRadius: theme.spacing.unit * 2,
+    margin: theme.spacing.unit / 2,
+    transform: 'translate(0, 0)'
+  },
+  chip: {
+    backgroundColor: color.white(),
+    border: `1px solid ${color.text()}`,
+    color: color.text(),
+    alignItems: 'center',
+    display: 'inline-flex',
+    height: 'initial',
+    minHeight: '32px',
+    fontSize: 'inherit',
+    whiteSpace: 'pre-wrap',
+    maxWidth: '374px',
+    // Added for touch devices, for image content.
+    // This will prevent the context menu from appearing and not allowing other interactions with the image.
+    // If interactions with the image in the token will be requested we should handle only the context Menu.
+    pointerEvents: 'none',
+    borderRadius: '3px',
+    paddingTop: '12px',
+    paddingBottom: '12px'
+  },
+  chipLabel: {
+    whiteSpace: 'normal',
+    '& img': {
+      display: 'block',
+      padding: '2px 0'
+    },
+    '& mjx-frac': {
+      fontSize: '120% !important'
+    }
+  },
+  disabled: {
+    opacity: 0.6
+  }
+}))(BlankContentComp);
+const tileSource$1 = {
+  canDrag(props) {
+    return !props.disabled;
+  },
+
+  beginDrag(props) {
+    return {
+      choice: props.choice,
+      instanceId: props.instanceId
+    };
+  }
+
+};
+const DragDropTile$1 = DragSource(DRAG_TYPE$1, tileSource$1, (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging()
+}))(BlankContent$1);
+
+class Choices extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.getStyleForWrapper = () => {
+      const {
+        choicePosition
+      } = this.props;
+
+      switch (choicePosition) {
+        case 'above':
+          return {
+            margin: '0 0 40px 0'
+          };
+
+        case 'below':
+          return {
+            margin: '40px 0 0 0'
+          };
+
+        case 'right':
+          return {
+            margin: '0 0 0 40px'
+          };
+
+        default:
+          return {
+            margin: '0 40px 0 0'
+          };
+      }
+    };
+  }
+
+  render() {
+    const {
+      disabled,
+      duplicates,
+      choices,
+      value
+    } = this.props;
+    const filteredChoices = choices.filter(c => {
+      if (duplicates === true) {
+        return true;
+      }
+
+      const foundChoice = findKey(value, v => v === c.id);
+      return foundChoice === undefined;
+    });
+
+    const elementStyle = _extends({}, this.getStyleForWrapper(), {
+      minWidth: '100px'
+    });
+
+    return /*#__PURE__*/React.createElement("div", {
+      style: elementStyle
+    }, /*#__PURE__*/React.createElement(DragDroppablePlaceholder, {
+      disabled: disabled
+    }, filteredChoices.map((c, index) => /*#__PURE__*/React.createElement(DragDropTile$1, {
+      key: `${c.value}-${index}`,
+      disabled: disabled,
+      choice: c
+    }))));
+  }
+
+}
+Choices.propTypes = {
+  disabled: PropTypes.bool,
+  duplicates: PropTypes.bool,
+  choices: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  })),
+  value: PropTypes.object,
+  choicePosition: PropTypes.string.isRequired
+};
+
+const _excluded = ["connectDragSource", "connectDropTarget"];
+const log = debug('pie-lib:mask-markup:blank');
+const DRAG_TYPE = 'MaskBlank';
+const useStyles = withStyles(() => ({
+  content: {
+    border: `solid 0px ${color.primary()}`,
+    minWidth: '200px',
+    touchAction: 'none',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap' // Prevent line wrapping
+
+  },
+  chip: {
+    backgroundColor: color.background(),
+    border: `2px dashed ${color.text()}`,
+    color: color.text(),
+    fontSize: 'inherit',
+    maxWidth: '374px',
+    position: 'relative',
+    borderRadius: '3px'
+  },
+  chipLabel: {
+    whiteSpace: 'normal',
+    // Added for touch devices, for image content.
+    // This will prevent the context menu from appearing and not allowing other interactions with the image.
+    // If interactions with the image in the token will be requested we should handle only the context Menu.
+    pointerEvents: 'none',
+    '& img': {
+      display: 'block',
+      padding: '2px 0'
+    },
+    // Remove default <p> margins to ensure consistent spacing across all wrapped content (p, span, div, math)
+    // Padding for top and bottom will instead be controlled by the container for consistent layout
+    // Ensures consistent behavior with pie-api-browser, where marginTop is already removed by a Bootstrap stylesheet
+    '& p': {
+      marginTop: '0',
+      marginBottom: '0'
+    },
+    '& mjx-frac': {
+      fontSize: '120% !important'
+    }
+  },
+  hidden: {
+    color: 'transparent',
+    opacity: 0
+  },
+  dragged: {
+    position: 'absolute',
+    left: 16,
+    maxWidth: '60px'
+  },
+  correct: {
+    border: `solid 1px ${color.correct()}`
+  },
+  incorrect: {
+    border: `solid 1px ${color.incorrect()}`
+  },
+  over: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden'
+  },
+  parentOver: {
+    border: `1px solid ${grey[500]}`,
+    backgroundColor: `${grey[300]}`
+  }
+}));
+class BlankContent extends React.Component {
+  constructor() {
+    super();
+
+    this.handleImageLoad = () => {
+      this.updateDimensions();
+    };
+
+    this.handleTouchStart = e => {
+      e.preventDefault();
+      this.touchStartTimer = setTimeout(() => {
+        this.startDrag();
+      }, 300); // Start drag after 300ms (touch and hold duration)
+    };
+
+    this.startDrag = () => {
+      const {
+        connectDragSource,
+        disabled
+      } = this.props;
+
+      if (!disabled) {
+        connectDragSource(this.rootRef);
+      }
+    };
+
+    this.state = {
+      height: 0,
+      width: 0
+    };
+  }
+
+  handleElements() {
+    var _this$spanRef;
+
+    const imageElement = (_this$spanRef = this.spanRef) == null ? void 0 : _this$spanRef.querySelector('img');
+
+    if (imageElement) {
+      imageElement.onload = this.handleImageLoad;
+    } else {
+      setTimeout(() => {
+        this.updateDimensions();
+      }, 300);
+    }
+  }
+
+  componentDidMount() {
+    this.handleElements();
+
+    if (this.rootRef) {
+      this.rootRef.addEventListener('touchstart', this.handleTouchStart, {
+        passive: false
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    renderMath(this.rootRef);
+    const {
+      choice: currentChoice
+    } = this.props;
+    const {
+      choice: prevChoice
+    } = prevProps;
+
+    if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {
+      if (!currentChoice) {
+        this.setState({
+          height: 0,
+          width: 0
+        });
+        return;
+      }
+
+      this.handleElements();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.rootRef) {
+      this.rootRef.removeEventListener('touchstart', this.handleTouchStart);
+    }
+  }
+
+  updateDimensions() {
+    if (this.spanRef && this.rootRef) {
+      // Temporarily set rootRef width to 'auto' for natural measurement
+      this.rootRef.style.width = 'auto'; // Get the natural dimensions of the content
+
+      const width = this.spanRef.offsetWidth || 0;
+      const height = this.spanRef.offsetHeight || 0;
+      const widthWithPadding = width + 24; // 12px padding on each side
+
+      const heightWithPadding = height + 24; // 12px padding on top and bottom
+
+      const responseAreaWidth = parseFloat(this.props.emptyResponseAreaWidth) || 0;
+      const responseAreaHeight = parseFloat(this.props.emptyResponseAreaHeight) || 0;
+      const adjustedWidth = widthWithPadding <= responseAreaWidth ? responseAreaWidth : widthWithPadding;
+      const adjustedHeight = heightWithPadding <= responseAreaHeight ? responseAreaHeight : heightWithPadding;
+      this.setState(prevState => ({
+        width: adjustedWidth > responseAreaWidth ? adjustedWidth : prevState.width,
+        height: adjustedHeight > responseAreaHeight ? adjustedHeight : prevState.height
+      }));
+      this.rootRef.style.width = `${adjustedWidth}px`;
+      this.rootRef.style.height = `${adjustedHeight}px`;
+    }
+  }
+
+  addDraggableFalseAttributes(parent) {
+    parent.childNodes.forEach(elem => {
+      if (elem instanceof Element || elem instanceof HTMLDocument) {
+        elem.setAttribute('draggable', false);
+      }
+    });
+  }
+
+  getRootDimensions() {
+    // Handle potential non-numeric values
+    const responseAreaWidth = !isNaN(parseFloat(this.props.emptyResponseAreaWidth)) ? parseFloat(this.props.emptyResponseAreaWidth) : 0;
+    const responseAreaHeight = !isNaN(parseFloat(this.props.emptyResponseAreaHeight)) ? parseFloat(this.props.emptyResponseAreaHeight) : 0;
+    const rootStyle = {
+      height: this.state.height || responseAreaHeight,
+      width: this.state.width || responseAreaWidth
+    }; // add minWidth, minHeight if width and height are not defined
+    // minWidth, minHeight will be also in model in the future
+
+    return _extends({}, rootStyle, responseAreaWidth ? {} : {
+      minWidth: 90
+    }, responseAreaHeight ? {} : {
+      minHeight: 32
+    });
+  }
+
+  render() {
+    const {
+      disabled,
+      choice,
+      classes,
+      isOver,
+      dragItem,
+      correct
+    } = this.props;
+    const draggedLabel = dragItem && isOver && dragItem.choice.value;
+    const label = choice && choice.value;
+    return (
+      /*#__PURE__*/
+      // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.
+      React.createElement(Chip, {
+        clickable: false,
+        disabled: true,
+        ref: ref => {
+          //eslint-disable-next-line
+          this.rootRef = ReactDOM.findDOMNode(ref);
+        },
+        component: "span",
+        label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+          className: classnames(classes.chipLabel, isOver && classes.over, {
+            [classes.hidden]: draggedLabel
+          }),
+          ref: ref => {
+            if (ref) {
+              //eslint-disable-next-line
+              this.spanRef = ReactDOM.findDOMNode(ref);
+              ref.innerHTML = label || '';
+              this.addDraggableFalseAttributes(ref);
+            }
+          }
+        }, ' '), draggedLabel && /*#__PURE__*/React.createElement("span", {
+          className: classnames(classes.chipLabel, isOver && classes.over, classes.dragged),
+          ref: ref => {
+            if (ref) {
+              //eslint-disable-next-line
+              this.spanRef = ReactDOM.findDOMNode(ref);
+              ref.innerHTML = draggedLabel || '';
+              this.addDraggableFalseAttributes(ref);
+            }
+          }
+        }, ' ')),
+        className: classnames(classes.chip, isOver && classes.over, isOver && classes.parentOver, {
+          [classes.correct]: correct !== undefined && correct,
+          [classes.incorrect]: correct !== undefined && !correct
+        }),
+        variant: disabled ? 'outlined' : undefined,
+        style: _extends({}, this.getRootDimensions())
+      })
+    );
+  }
+
+}
+BlankContent.defaultProps = {
+  emptyResponseAreaWidth: 0,
+  emptyResponseAreaHeight: 0
+};
+BlankContent.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool,
+  duplicates: PropTypes.bool,
+  choice: PropTypes.object,
+  classes: PropTypes.object,
+  isOver: PropTypes.bool,
+  dragItem: PropTypes.object,
+  correct: PropTypes.bool,
+  onChange: PropTypes.func,
+  emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+const StyledBlankContent = useStyles(BlankContent);
+const connectedBlankContent = useStyles(_ref => {
+  let {
+    connectDragSource,
+    connectDropTarget
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  const {
+    classes,
+    isOver
+  } = props;
+  return connectDropTarget(connectDragSource( /*#__PURE__*/React.createElement("span", {
+    className: classnames(classes.content, isOver && classes.over)
+  }, /*#__PURE__*/React.createElement(StyledBlankContent, props))));
+});
+const tileTarget = {
+  drop(props, monitor) {
+    const draggedItem = monitor.getItem();
+    log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);
+
+    if (draggedItem.id !== props.id) {
+      props.onChange(props.id, draggedItem.choice.id);
+    }
+
+    return {
+      dropped: draggedItem.id !== props.id
+    };
+  },
+
+  canDrop(props, monitor) {
+    const draggedItem = monitor.getItem();
+    return draggedItem.instanceId === props.instanceId;
+  }
+
+};
+const DropTile = DropTarget(DRAG_TYPE, tileTarget, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  dragItem: monitor.getItem()
+}))(connectedBlankContent);
+const tileSource = {
+  canDrag(props) {
+    return !props.disabled && !!props.choice;
+  },
+
+  beginDrag(props) {
+    return {
+      id: props.id,
+      choice: props.choice,
+      instanceId: props.instanceId,
+      fromChoice: true
+    };
+  },
+
+  endDrag(props, monitor) {
+    // this will be null if it did not drop
+    const dropResult = monitor.getDropResult();
+
+    if (!dropResult || dropResult.dropped) {
+      const draggedItem = monitor.getItem();
+
+      if (draggedItem.fromChoice) {
+        props.onChange(props.id, undefined);
+      }
+    }
+  }
+
+};
+const DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging()
+}))(DropTile);
+
+const Masked = withMask('blank', props => (node, data, onChange) => {
+  const dataset = node.data ? node.data.dataset || {} : {};
+
+  if (dataset.component === 'blank') {
+    // eslint-disable-next-line react/prop-types
+    const {
+      disabled,
+      duplicates,
+      correctResponse,
+      feedback,
+      showCorrectAnswer,
+      emptyResponseAreaWidth,
+      emptyResponseAreaHeight
+    } = props;
+    const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id]; // eslint-disable-next-line react/prop-types
+
+    const choice = choiceId && props.choices.find(c => c.id === choiceId);
+    return /*#__PURE__*/React.createElement(DragDropTile, {
+      key: `${node.type}-${dataset.id}`,
+      correct: showCorrectAnswer || feedback && feedback[dataset.id],
+      disabled: disabled,
+      duplicates: duplicates,
+      choice: choice,
+      id: dataset.id,
+      emptyResponseAreaWidth: emptyResponseAreaWidth,
+      emptyResponseAreaHeight: emptyResponseAreaHeight,
+      onChange: onChange
+    });
+  }
+});
+class DragInTheBlank extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.getPositionDirection = choicePosition => {
+      let flexDirection;
+      let justifyContent;
+      let alignItems;
+
+      switch (choicePosition) {
+        case 'left':
+          flexDirection = 'row';
+          alignItems = 'center';
+          break;
+
+        case 'right':
+          flexDirection = 'row-reverse';
+          justifyContent = 'flex-end';
+          alignItems = 'center';
+          break;
+
+        case 'below':
+          flexDirection = 'column-reverse';
+          break;
+
+        default:
+          // above
+          flexDirection = 'column';
+          break;
+      }
+
+      return {
+        flexDirection,
+        justifyContent,
+        alignItems
+      };
+    };
+  }
+
+  UNSAFE_componentWillReceiveProps() {
+    if (this.rootRef) {
+      renderMath(this.rootRef);
+    }
+  }
+
+  componentDidUpdate() {
+    renderMath(this.rootRef);
+  }
+
+  render() {
+    const {
+      markup,
+      duplicates,
+      layout,
+      value,
+      onChange,
+      choicesPosition,
+      choices,
+      correctResponse,
+      disabled,
+      feedback,
+      showCorrectAnswer,
+      emptyResponseAreaWidth,
+      emptyResponseAreaHeight
+    } = this.props;
+    const choicePosition = choicesPosition || 'below';
+
+    const style = _extends({
+      display: 'flex',
+      minWidth: '100px'
+    }, this.getPositionDirection(choicePosition));
+
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref => ref && (this.rootRef = ref),
+      style: style
+    }, /*#__PURE__*/React.createElement(Choices, {
+      choicePosition: choicePosition,
+      duplicates: duplicates,
+      choices: choices,
+      value: value,
+      disabled: disabled
+    }), /*#__PURE__*/React.createElement(Masked, {
+      elementType: 'drag-in-the-blank',
+      markup: markup,
+      layout: layout,
+      value: value,
+      choices: choices,
+      onChange: onChange,
+      disabled: disabled,
+      duplicates: duplicates,
+      feedback: feedback,
+      correctResponse: correctResponse,
+      showCorrectAnswer: showCorrectAnswer,
+      emptyResponseAreaWidth: emptyResponseAreaWidth,
+      emptyResponseAreaHeight: emptyResponseAreaHeight
+    }));
+  }
+
+}
+DragInTheBlank.propTypes = {
+  markup: PropTypes.string,
+  layout: PropTypes.object,
+  choicesPosition: PropTypes.string,
+  choices: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  })),
+  value: PropTypes.object,
+  onChange: PropTypes.func,
+  duplicates: PropTypes.bool,
+  disabled: PropTypes.bool,
+  feedback: PropTypes.object,
+  correctResponse: PropTypes.object,
+  showCorrectAnswer: PropTypes.bool,
+  emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+const styles$1 = () => ({
+  editableHtmlCustom: {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    margin: '4px',
+    borderRadius: '4px',
+    border: `1px solid ${color.black()}`
+  },
+  correct: {
+    border: `1px solid ${color.correct()}`
+  },
+  incorrect: {
+    border: `1px solid ${color.incorrect()}`
+  }
+});
+
+const MaskedInput = props => (node, data) => {
+  var _node$data;
+
+  const {
+    adjustedLimit,
+    disabled,
+    feedback,
+    showCorrectAnswer,
+    maxLength,
+    spellCheck,
+    classes,
+    pluginProps,
+    onChange
+  } = props;
+  const dataset = ((_node$data = node.data) == null ? void 0 : _node$data.dataset) || {};
+
+  if (dataset.component === 'input') {
+    var _pluginProps$characte;
+
+    const correctAnswer = (props.choices && dataset && props.choices[dataset.id] || [])[0];
+    const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
+    const width = maxLength && maxLength[dataset.id];
+    const feedbackStatus = feedback && feedback[dataset.id];
+    const isCorrect = showCorrectAnswer || feedbackStatus === 'correct';
+    const isIncorrect = !showCorrectAnswer && feedbackStatus === 'incorrect';
+
+    const handleInputChange = newValue => {
+      const updatedValue = _extends({}, data, {
+        [dataset.id]: newValue
+      });
+
+      onChange(updatedValue);
+    };
+
+    const handleKeyDown = event => {
+      // the keyCode value for the Enter/Return key is 13
+      if (event.key === 'Enter' || event.keyCode === 13) {
+        return false;
+      }
+    };
+
+    return /*#__PURE__*/React.createElement(EditableHtml, {
+      id: dataset.id,
+      key: `${node.type}-input-${dataset.id}`,
+      disabled: showCorrectAnswer || disabled,
+      disableUnderline: true,
+      onChange: handleInputChange,
+      markup: finalValue || '',
+      charactersLimit: adjustedLimit ? width : 25,
+      activePlugins: ['languageCharacters'],
+      pluginProps: pluginProps,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }],
+      spellCheck: spellCheck,
+      width: `calc(${width}em + 42px)` // added 42px for left and right padding of editable-html
+      ,
+      onKeyDown: handleKeyDown,
+      autoWidthToolbar: true,
+      toolbarOpts: {
+        minWidth: 'auto',
+        noBorder: true,
+        isHidden: !!(pluginProps != null && (_pluginProps$characte = pluginProps.characters) != null && _pluginProps$characte.disabled)
+      },
+      className: classnames(classes.editableHtmlCustom, {
+        [classes.correct]: isCorrect,
+        [classes.incorrect]: isIncorrect
+      })
+    });
+  }
+};
+
+var constructedResponse = withStyles(styles$1)(withMask('input', MaskedInput));
+
+var customizable = withMask('input', props => (node, data, onChange) => {
+  const dataset = node.data ? node.data.dataset || {} : {};
+
+  if (dataset.component === 'input') {
+    // eslint-disable-next-line react/prop-types
+    // const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;
+    // the first answer is the correct one
+    // eslint-disable-next-line react/prop-types
+    // const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
+    // const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
+    // const width = maxLength && maxLength[dataset.id];
+    return props.customMarkMarkupComponent(dataset.id); // return (
+    //   <Input
+    //     key={`${node.type}-input-${dataset.id}`}
+    //     correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
+    //     disabled={showCorrectAnswer || disabled}
+    //     value={finalValue}
+    //     id={dataset.id}
+    //     onChange={onChange}
+    //     showCorrectAnswer={showCorrectAnswer}
+    //     width={width}
+    //     charactersLimit={adjustedLimit ? width : 25}
+    //     isConstructedResponse={true}
+    //     spellCheck={spellCheck}
+    //   />
+    // );
+  }
+});
+
+class Dropdown extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = event => this.setState({
+      anchorEl: event.currentTarget
+    });
+
+    this.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 = '';
+      }
+    };
+
+    this.handleHighlight = index => {
+      const highlightedOptionId = `dropdown-option-${this.props.id}-${index}`; // preview on hover if nothing selected
+
+      const stateUpdate = {
+        highlightedOptionId
+      };
+
+      if (!this.props.value) {
+        stateUpdate.previewValue = this.props.choices[index].value;
+      }
+
+      this.setState(stateUpdate);
+    };
+
+    this.handleSelect = (value, index) => {
+      this.props.onChange(this.props.id, value);
+      this.handleHighlight(index);
+      this.handleClose();
+    };
+
+    this.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;
+        }
+      });
+    };
+
+    this.state = {
+      anchorEl: null,
+      highlightedOptionId: null,
+      menuWidth: null,
+      previewValue: null
+    };
+    this.hiddenRef = /*#__PURE__*/React.createRef();
+    this.buttonRef = /*#__PURE__*/React.createRef();
+    this.previewRef = /*#__PURE__*/React.createRef();
+    this.elementRefs = [];
+  }
+
+  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
+        });
+      }
+    }
+  }
+
+  getLabel(choices, value) {
+    const found = (choices || []).find(choice => choice.value === value);
+    return found ? found.label.trim() : undefined;
+  }
+
+  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}`;
+    const menuId = `dropdown-menu-${id}`;
+    const valueDisplayId = `dropdown-value-${id}`; // Determine the class for disabled state, view mode and evaluate mode
+
+    let 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
+
+
+    const incrementedId = parseInt(id, 10) + 1;
+    const labelId = singleQuery ? 'Query-label' : `Query-label-${incrementedId}`;
+    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 = correct || showCorrectAnswer ? /*#__PURE__*/React.createElement(Check, {
+        className: classnames(classes.correctnessIndicatorIcon, classes.correctIcon)
+      }) : /*#__PURE__*/React.createElement(Close, {
+        className: classnames(classes.correctnessIndicatorIcon, classes.incorrectIcon)
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      ref: this.hiddenRef,
+      style: {
+        position: 'absolute',
+        visibility: 'hidden',
+        top: 0,
+        left: 0
+      },
+      tabIndex: -1,
+      "aria-hidden": "true"
+    }, (choices || []).map((c, index) => /*#__PURE__*/React.createElement(MenuItem, {
+      key: index,
+      classes: {
+        root: classes.menuRoot,
+        selected: classes.selected
+      },
+      tabIndex: -1,
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: classes.label,
+      dangerouslySetInnerHTML: {
+        __html: c.label
+      }
+    })))), /*#__PURE__*/React.createElement(InputLabel, {
+      className: classes.srOnly,
+      id: labelId,
+      tabIndex: -1,
+      "aria-hidden": "true"
+    }, labelText), /*#__PURE__*/React.createElement(Button, {
+      ref: this.buttonRef,
+      style: _extends({}, 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,
+      "aria-activedescendant": this.state.highlightedOptionId,
+      onClick: this.handleClick,
+      classes: {
+        root: classes.root,
+        disabled: disabledClass
+      },
+      disabled: disabled,
+      id: buttonId,
+      role: "combobox",
+      "aria-label": `Select an option for ${labelText}`,
+      "aria-labelledby": valueDisplayId
+    }, correctnessIcon, /*#__PURE__*/React.createElement("span", {
+      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.createElement(ArrowDropUpIcon, null) : /*#__PURE__*/React.createElement(ArrowDropDownIcon, null)), /*#__PURE__*/React.createElement(Menu, {
+      id: menuId,
+      anchorEl: anchorEl,
+      className: classes.selectMenu,
+      keepMounted: true,
+      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) => {
+      const optionId = `dropdown-option-${id}-${index}`;
+      return /*#__PURE__*/React.createElement(MenuItem, {
+        id: optionId,
+        classes: {
+          root: classes.menuRoot,
+          selected: classes.selected
+        },
+        key: `${c.label}-${index}`,
+        value: c.value,
+        onClick: () => this.handleSelect(c.value, index),
+        role: "option",
+        "aria-selected": this.state.highlightedOptionId === optionId ? 'true' : undefined,
+        onMouseOver: () => this.handleHover(index)
+      }, /*#__PURE__*/React.createElement("span", {
+        ref: ref => this.elementRefs[index] = ref,
+        className: classes.label,
+        dangerouslySetInnerHTML: {
+          __html: c.label
+        }
+      }), /*#__PURE__*/React.createElement("span", {
+        className: classes.selectedIndicator,
+        dangerouslySetInnerHTML: {
+          __html: c.value === value ? ' &check;' : ''
+        }
+      }));
+    })));
+  }
+
+}
+
+Dropdown.propTypes = {
+  id: PropTypes.string,
+  value: PropTypes.string,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  classes: PropTypes.object,
+  correct: PropTypes.bool,
+  choices: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  })),
+  showCorrectAnswer: PropTypes.bool,
+  singleQuery: PropTypes.bool,
+  correctValue: PropTypes.string
+};
+
+const styles = () => ({
+  root: {
+    color: color.text(),
+    border: `1px solid ${color.borderGray()}`,
+    borderRadius: '4px',
+    justifyContent: 'space-between',
+    backgroundColor: 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: color.text(),
+      marginLeft: '5px'
+    },
+    '&:focus, &:focus-visible': {
+      outline: `3px solid ${color.tertiary()}`,
+      outlineOffset: '2px',
+      borderWidth: '3px'
+    }
+  },
+  disabledCorrect: {
+    borderWidth: '2px',
+    borderColor: color.correct(),
+    color: `${color.text()} !important`
+  },
+  disabledIncorrect: {
+    borderWidth: '2px',
+    borderColor: color.incorrectWithIcon(),
+    color: `${color.text()} !important`
+  },
+  selectMenu: {
+    backgroundColor: color.background(),
+    border: `1px solid ${color.correct()} !important`,
+    '&:hover': {
+      border: `1px solid ${color.text()} `,
+      borderColor: 'initial'
+    },
+    '&:focus': {
+      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.dropdownBackground()} !important`
+    }
+  },
+  menuRoot: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    '&:focus, &:focus-visible': {
+      outline: `3px solid ${color.tertiary()}`,
+      outlineOffset: '-1px' // keeps it inside the item
+
+    },
+    '&:focus': {
+      color: color.text(),
+      backgroundColor: color.background()
+    },
+    '&:hover': {
+      color: color.text(),
+      backgroundColor: 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: `${color.white()} !important`,
+    position: 'absolute',
+    top: '-8px !important',
+    left: '-8px',
+    marginLeft: '0 !important',
+    borderRadius: '50%',
+    fontSize: '16px',
+    padding: '2px'
+  },
+  correctIcon: {
+    backgroundColor: color.correct()
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon()
+  }
+});
+
+var Dropdown$1 = withStyles(styles)(Dropdown);
+
+var inlineDropdown = withMask('dropdown', props => (node, data, onChange) => {
+  const dataset = node.data ? node.data.dataset || {} : {};
+
+  if (dataset.component === 'dropdown') {
+    // eslint-disable-next-line react/prop-types
+    const {
+      choices,
+      disabled,
+      feedback,
+      showCorrectAnswer
+    } = props;
+    const correctAnswer = choices && choices[dataset.id] && choices[dataset.id].find(c => c.correct);
+    const finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];
+    return /*#__PURE__*/React.createElement(Dropdown$1, {
+      key: `${node.type}-dropdown-${dataset.id}`,
+      correct: feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct',
+      disabled: disabled || showCorrectAnswer,
+      value: finalChoice,
+      correctValue: showCorrectAnswer ? correctAnswer && correctAnswer.label : undefined,
+      id: dataset.id,
+      onChange: onChange,
+      choices: choices[dataset.id],
+      showCorrectAnswer: showCorrectAnswer,
+      singleQuery: Object.keys(choices).length == 1
+    });
+  }
+});
+
+export { constructedResponse as ConstructedResponse, customizable as Customizable, DragInTheBlank, inlineDropdown as InlineDropdown, buildLayoutFromMarkup, componentize, withMask };
+//# sourceMappingURL=index.js.map