@pie-lib/mask-markup 1.10.22 → 1.11.3

package/CHANGELOG.json

@@ -838,5 +838,50 @@
     "committerDate": "2021-07-02 16:41:08 +0300",
     "isTagged": true,
     "tag": "@pie-lib/mask-markup@1.10.18"
+  },
+  {
+    "type": "feat",
+    "scope": "mask-markup",
+    "subject": "Made sure that the changes do not affect other components",
+    "merge": null,
+    "header": "feat(mask-markup): Made sure that the changes do not affect other components",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "e3c5f8ce419aa9e99d9c5b01367d9ab2ce54dce7",
+    "gitTags": " (origin/feat/PD-794)",
+    "committerDate": "2021-10-18 12:30:08 +0300",
+    "isTagged": true,
+    "tag": "@pie-lib/mask-markup@1.11.0"
+  },
+  {
+    "type": "feat",
+    "scope": "mask-markup",
+    "subject": "Added a max limit of characters, adjusted the width and updated design PD-794",
+    "merge": null,
+    "header": "feat(mask-markup): Added a max limit of characters, adjusted the width and updated design PD-794",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "f46d544caaf03fc638993670d05ed284e284d93e",
+    "gitTags": "",
+    "committerDate": "2021-10-05 15:36:43 +0300",
+    "isTagged": true,
+    "tag": "@pie-lib/mask-markup@1.11.0"
+  },
+  {
+    "type": "fix",
+    "scope": "mask-markup",
+    "subject": "Fixed border radius in pits",
+    "merge": null,
+    "header": "fix(mask-markup): Fixed border radius in pits",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "41c0acd332cbe8bceb3ed9059fee1d52ea73ebec",
+    "gitTags": " (origin/fix/mask-markup-border-radius)",
+    "committerDate": "2021-10-18 14:06:30 +0300",
+    "isTagged": true,
+    "tag": "@pie-lib/mask-markup@1.11.1"
   }
 ]

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.11.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.11.2...@pie-lib/mask-markup@1.11.3) (2021-11-29)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+## [1.11.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.11.1...@pie-lib/mask-markup@1.11.2) (2021-11-10)
+
+**Note:** Version bump only for package @pie-lib/mask-markup
+
+
+
+
+
+## [1.11.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.11.0...@pie-lib/mask-markup@1.11.1) (2021-10-18)
+
+
+### Bug Fixes
+
+* **mask-markup:** Fixed border radius in pits ([41c0acd](https://github.com/pie-framework/pie-lib/commit/41c0acd))
+
+
+
+
+
+# [1.11.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.22...@pie-lib/mask-markup@1.11.0) (2021-10-18)
+
+
+### Features
+
+* **mask-markup:** Added a max limit of characters, adjusted the width and updated design PD-794 ([f46d544](https://github.com/pie-framework/pie-lib/commit/f46d544))
+* **mask-markup:** Made sure that the changes do not affect other components ([e3c5f8c](https://github.com/pie-framework/pie-lib/commit/e3c5f8c))
+
+
+
+
+
 ## [1.10.22](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.10.21...@pie-lib/mask-markup@1.10.22) (2021-09-08)
 
 **Note:** Version bump only for package @pie-lib/mask-markup

package/lib/choices/choice.js

@@ -119,7 +119,11 @@ var BlankContent = (0, _styles.withStyles)(function (theme) {
       margin: '4px'
     },
     chipLabel: {
-      whiteSpace: 'pre-wrap'
+      whiteSpace: 'pre-wrap',
+      '& img': {
+        display: 'block',
+        padding: '2px 0'
+      }
     },
     disabled: {}
   };

package/lib/choices/choice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/choices/choice.jsx"],"names":["DRAG_TYPE","BlankContentComp","rootRef","props","connectDragSource","choice","classes","disabled","ref","ReactDOM","findDOMNode","chip","chipLabel","innerHTML","value","undefined","React","Component","PropTypes","bool","object","func","BlankContent","theme","border","palette","primary","main","alignItems","display","height","minHeight","fontSize","whiteSpace","maxWidth","margin","tileSource","canDrag","beginDrag","instanceId","DragDropTile","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport const DRAG_TYPE = 'MaskBlank';\n\nclass BlankContentComp extends React.Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    choice: PropTypes.object,\n    classes: PropTypes.object,\n    connectDragSource: PropTypes.func\n  };\n\n  componentDidUpdate() {\n    renderMath(this.rootRef);\n  }\n\n  render() {\n    const { connectDragSource, choice, classes, disabled } = this.props;\n\n    return connectDragSource(\n      <span className={classnames(classes.choice, disabled && classes.disabled)}>\n        <Chip\n          ref={ref => {\n            //eslint-disable-next-line\n            this.rootRef = ReactDOM.findDOMNode(ref);\n          }}\n          className={classes.chip}\n          label={\n            <span\n              className={classes.chipLabel}\n              ref={ref => {\n                if (ref) {\n                  ref.innerHTML = choice.value || ' ';\n                }\n              }}\n            >\n              {' '}\n            </span>\n          }\n          variant={disabled ? 'outlined' : undefined}\n        />\n      </span>,\n      {}\n    );\n  }\n}\n\nexport const BlankContent = withStyles(theme => ({\n  choice: {\n    border: `solid 0px ${theme.palette.primary.main}`\n  },\n  chip: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    height: 'initial',\n    minHeight: '32px',\n    fontSize: 'inherit',\n    whiteSpace: 'pre-wrap',\n    maxWidth: '374px',\n    margin: '4px'\n  },\n  chipLabel: {\n    whiteSpace: 'pre-wrap'\n  },\n  disabled: {}\n}))(BlankContentComp);\n\nconst tileSource = {\n  canDrag(props) {\n    return !props.disabled;\n  },\n  beginDrag(props) {\n    return {\n      choice: props.choice,\n      instanceId: props.instanceId\n    };\n  }\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging()\n}))(BlankContent);\n\nexport default DragDropTile;\n"],"file":"choice.js"}
+{"version":3,"sources":["../../src/choices/choice.jsx"],"names":["DRAG_TYPE","BlankContentComp","rootRef","props","connectDragSource","choice","classes","disabled","ref","ReactDOM","findDOMNode","chip","chipLabel","innerHTML","value","undefined","React","Component","PropTypes","bool","object","func","BlankContent","theme","border","palette","primary","main","alignItems","display","height","minHeight","fontSize","whiteSpace","maxWidth","margin","padding","tileSource","canDrag","beginDrag","instanceId","DragDropTile","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport const DRAG_TYPE = 'MaskBlank';\n\nclass BlankContentComp extends React.Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    choice: PropTypes.object,\n    classes: PropTypes.object,\n    connectDragSource: PropTypes.func\n  };\n\n  componentDidUpdate() {\n    renderMath(this.rootRef);\n  }\n\n  render() {\n    const { connectDragSource, choice, classes, disabled } = this.props;\n\n    return connectDragSource(\n      <span className={classnames(classes.choice, disabled && classes.disabled)}>\n        <Chip\n          ref={ref => {\n            //eslint-disable-next-line\n            this.rootRef = ReactDOM.findDOMNode(ref);\n          }}\n          className={classes.chip}\n          label={\n            <span\n              className={classes.chipLabel}\n              ref={ref => {\n                if (ref) {\n                  ref.innerHTML = choice.value || ' ';\n                }\n              }}\n            >\n              {' '}\n            </span>\n          }\n          variant={disabled ? 'outlined' : undefined}\n        />\n      </span>,\n      {}\n    );\n  }\n}\n\nexport const BlankContent = withStyles(theme => ({\n  choice: {\n    border: `solid 0px ${theme.palette.primary.main}`\n  },\n  chip: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    height: 'initial',\n    minHeight: '32px',\n    fontSize: 'inherit',\n    whiteSpace: 'pre-wrap',\n    maxWidth: '374px',\n    margin: '4px'\n  },\n  chipLabel: {\n    whiteSpace: 'pre-wrap',\n    '& img': {\n      display: 'block',\n      padding: '2px 0'\n    }\n  },\n  disabled: {}\n}))(BlankContentComp);\n\nconst tileSource = {\n  canDrag(props) {\n    return !props.disabled;\n  },\n  beginDrag(props) {\n    return {\n      choice: props.choice,\n      instanceId: props.instanceId\n    };\n  }\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging()\n}))(BlankContent);\n\nexport default DragDropTile;\n"],"file":"choice.js"}

package/lib/components/blank.js

@@ -72,7 +72,11 @@ var useStyles = (0, _styles.withStyles)(function () {
       position: 'relative'
     },
     chipLabel: {
-      whiteSpace: 'pre-wrap'
+      whiteSpace: 'pre-wrap',
+      '& img': {
+        display: 'block',
+        padding: '2px 0'
+      }
     },
     hidden: {
       color: 'transparent',

package/lib/components/blank.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/blank.jsx"],"names":["log","DRAG_TYPE","useStyles","content","border","color","primary","minWidth","chip","fontSize","minHeight","maxWidth","position","chipLabel","whiteSpace","hidden","opacity","dragged","left","correct","incorrect","over","overflow","BlankContent","state","height","prevProps","rootRef","currentChoice","props","choice","prevChoice","JSON","stringify","setState","setTimeout","spanRef","offsetHeight","parent","childNodes","forEach","elem","Element","HTMLDocument","setAttribute","disabled","classes","isOver","dragItem","draggedLabel","value","label","ref","ReactDOM","findDOMNode","innerHTML","addDraggableFalseAttributes","undefined","React","Component","id","PropTypes","oneOfType","string","number","bool","duplicates","object","onChange","func","StyledBlankContent","connectedBlankContent","connectDragSource","connectDropTarget","tileTarget","drop","monitor","draggedItem","getItem","instanceId","dropped","canDrop","DropTile","connect","dropTarget","tileSource","canDrag","beginDrag","fromChoice","endDrag","dropResult","getDropResult","DragDropTile","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\nimport { DragSource, DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\nconst log = debug('pie-lib:mask-markup:blank');\nexport const DRAG_TYPE = 'MaskBlank';\n\nconst useStyles = withStyles(() => ({\n  content: {\n    border: `solid 0px ${color.primary()}`,\n    minWidth: '200px'\n  },\n  chip: {\n    minWidth: '90px',\n    fontSize: 'inherit',\n    minHeight: '32px',\n    maxWidth: '374px',\n    position: 'relative'\n  },\n  chipLabel: {\n    whiteSpace: 'pre-wrap'\n  },\n  hidden: {\n    color: 'transparent',\n    opacity: 0\n  },\n  dragged: {\n    position: 'absolute',\n    left: 14,\n    maxWidth: '60px'\n  },\n  correct: {\n    border: `solid 1px ${color.correct()}`\n  },\n  incorrect: {\n    border: `solid 1px ${color.incorrect()}`\n  },\n  over: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden'\n  }\n}));\n\nexport class BlankContent extends React.Component {\n  static propTypes = {\n    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    disabled: PropTypes.bool,\n    duplicates: PropTypes.bool,\n    choice: PropTypes.object,\n    classes: PropTypes.object,\n    isOver: PropTypes.bool,\n    dragItem: PropTypes.object,\n    correct: PropTypes.bool,\n    onChange: PropTypes.func\n  };\n\n  constructor() {\n    super();\n    this.state = {\n      height: 0\n    };\n  }\n\n  componentDidUpdate(prevProps) {\n    renderMath(this.rootRef);\n    const { choice: currentChoice } = this.props;\n    const { choice: prevChoice } = prevProps;\n\n    if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {\n      if (!currentChoice) {\n        this.setState({\n          height: 0\n        });\n        return;\n      }\n      setTimeout(() => {\n        this.setState({\n          height: this.spanRef.offsetHeight\n        });\n      }, 300);\n    }\n  }\n\n  addDraggableFalseAttributes(parent) {\n    parent.childNodes.forEach(elem => {\n      if (elem instanceof Element || elem instanceof HTMLDocument) {\n        elem.setAttribute('draggable', false);\n      }\n    });\n  }\n\n  render() {\n    const { disabled, choice, classes, isOver, dragItem, correct } = this.props;\n    const draggedLabel = dragItem && isOver && dragItem.choice.value;\n    const label = choice && choice.value;\n\n    return (\n      <Chip\n        ref={ref => {\n          //eslint-disable-next-line\n          this.rootRef = ReactDOM.findDOMNode(ref);\n        }}\n        component=\"span\"\n        label={\n          <React.Fragment>\n            <span\n              className={classnames(classes.chipLabel, isOver && classes.over, {\n                [classes.hidden]: draggedLabel\n              })}\n              ref={ref => {\n                if (ref) {\n                  //eslint-disable-next-line\n                  this.spanRef = ReactDOM.findDOMNode(ref);\n                  ref.innerHTML = label || '';\n                  this.addDraggableFalseAttributes(ref);\n                }\n              }}\n            >\n              {' '}\n            </span>\n            {draggedLabel && (\n              <span\n                className={classnames(classes.chipLabel, isOver && classes.over, classes.dragged)}\n                ref={ref => {\n                  if (ref) {\n                    //eslint-disable-next-line\n                    this.spanRef = ReactDOM.findDOMNode(ref);\n                    ref.innerHTML = draggedLabel || '';\n                    this.addDraggableFalseAttributes(ref);\n                  }\n                }}\n              >\n                {' '}\n              </span>\n            )}\n          </React.Fragment>\n        }\n        className={classnames(classes.chip, isOver && classes.over, {\n          [classes.correct]: correct !== undefined && correct,\n          [classes.incorrect]: correct !== undefined && !correct\n        })}\n        variant={disabled ? 'outlined' : undefined}\n        style={{\n          ...(this.state.height ? { height: this.state.height } : {})\n        }}\n        classes={{\n          label: isOver && classes.over\n        }}\n      />\n    );\n  }\n}\n\nconst StyledBlankContent = useStyles(BlankContent);\n\nconst connectedBlankContent = useStyles(({ connectDragSource, connectDropTarget, ...props }) => {\n  const { classes, isOver } = props;\n\n  return connectDropTarget(\n    connectDragSource(\n      <span className={classnames(classes.content, isOver && classes.over)}>\n        <StyledBlankContent {...props} />\n      </span>\n    )\n  );\n});\n\nconst tileTarget = {\n  drop(props, monitor) {\n    const draggedItem = monitor.getItem();\n\n    log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);\n\n    if (draggedItem.id !== props.id) {\n      props.onChange(props.id, draggedItem.choice.id);\n    }\n\n    return {\n      dropped: draggedItem.id !== props.id\n    };\n  },\n  canDrop(props, monitor) {\n    const draggedItem = monitor.getItem();\n\n    return draggedItem.instanceId === props.instanceId;\n  }\n};\n\nconst DropTile = DropTarget(DRAG_TYPE, tileTarget, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n  dragItem: monitor.getItem()\n}))(connectedBlankContent);\n\nconst tileSource = {\n  canDrag(props) {\n    return !props.disabled && !!props.choice;\n  },\n  beginDrag(props) {\n    return {\n      id: props.id,\n      choice: props.choice,\n      instanceId: props.instanceId,\n      fromChoice: true\n    };\n  },\n  endDrag(props, monitor) {\n    // this will be null if it did not drop\n    const dropResult = monitor.getDropResult();\n\n    if (!dropResult || (dropResult.dropped && !props.duplicates)) {\n      const draggedItem = monitor.getItem();\n\n      if (draggedItem.fromChoice) {\n        props.onChange(props.id, undefined);\n      }\n    }\n  }\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging()\n}))(DropTile);\n\nexport default DragDropTile;\n"],"file":"blank.js"}
+{"version":3,"sources":["../../src/components/blank.jsx"],"names":["log","DRAG_TYPE","useStyles","content","border","color","primary","minWidth","chip","fontSize","minHeight","maxWidth","position","chipLabel","whiteSpace","display","padding","hidden","opacity","dragged","left","correct","incorrect","over","overflow","BlankContent","state","height","prevProps","rootRef","currentChoice","props","choice","prevChoice","JSON","stringify","setState","setTimeout","spanRef","offsetHeight","parent","childNodes","forEach","elem","Element","HTMLDocument","setAttribute","disabled","classes","isOver","dragItem","draggedLabel","value","label","ref","ReactDOM","findDOMNode","innerHTML","addDraggableFalseAttributes","undefined","React","Component","id","PropTypes","oneOfType","string","number","bool","duplicates","object","onChange","func","StyledBlankContent","connectedBlankContent","connectDragSource","connectDropTarget","tileTarget","drop","monitor","draggedItem","getItem","instanceId","dropped","canDrop","DropTile","connect","dropTarget","tileSource","canDrag","beginDrag","fromChoice","endDrag","dropResult","getDropResult","DragDropTile","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\nimport { DragSource, DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\nconst log = debug('pie-lib:mask-markup:blank');\nexport const DRAG_TYPE = 'MaskBlank';\n\nconst useStyles = withStyles(() => ({\n  content: {\n    border: `solid 0px ${color.primary()}`,\n    minWidth: '200px'\n  },\n  chip: {\n    minWidth: '90px',\n    fontSize: 'inherit',\n    minHeight: '32px',\n    maxWidth: '374px',\n    position: 'relative'\n  },\n  chipLabel: {\n    whiteSpace: 'pre-wrap',\n    '& img': {\n      display: 'block',\n      padding: '2px 0'\n    }\n  },\n  hidden: {\n    color: 'transparent',\n    opacity: 0\n  },\n  dragged: {\n    position: 'absolute',\n    left: 14,\n    maxWidth: '60px'\n  },\n  correct: {\n    border: `solid 1px ${color.correct()}`\n  },\n  incorrect: {\n    border: `solid 1px ${color.incorrect()}`\n  },\n  over: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden'\n  }\n}));\n\nexport class BlankContent extends React.Component {\n  static propTypes = {\n    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    disabled: PropTypes.bool,\n    duplicates: PropTypes.bool,\n    choice: PropTypes.object,\n    classes: PropTypes.object,\n    isOver: PropTypes.bool,\n    dragItem: PropTypes.object,\n    correct: PropTypes.bool,\n    onChange: PropTypes.func\n  };\n\n  constructor() {\n    super();\n    this.state = {\n      height: 0\n    };\n  }\n\n  componentDidUpdate(prevProps) {\n    renderMath(this.rootRef);\n    const { choice: currentChoice } = this.props;\n    const { choice: prevChoice } = prevProps;\n\n    if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {\n      if (!currentChoice) {\n        this.setState({\n          height: 0\n        });\n        return;\n      }\n      setTimeout(() => {\n        this.setState({\n          height: this.spanRef.offsetHeight\n        });\n      }, 300);\n    }\n  }\n\n  addDraggableFalseAttributes(parent) {\n    parent.childNodes.forEach(elem => {\n      if (elem instanceof Element || elem instanceof HTMLDocument) {\n        elem.setAttribute('draggable', false);\n      }\n    });\n  }\n\n  render() {\n    const { disabled, choice, classes, isOver, dragItem, correct } = this.props;\n    const draggedLabel = dragItem && isOver && dragItem.choice.value;\n    const label = choice && choice.value;\n\n    return (\n      <Chip\n        ref={ref => {\n          //eslint-disable-next-line\n          this.rootRef = ReactDOM.findDOMNode(ref);\n        }}\n        component=\"span\"\n        label={\n          <React.Fragment>\n            <span\n              className={classnames(classes.chipLabel, isOver && classes.over, {\n                [classes.hidden]: draggedLabel\n              })}\n              ref={ref => {\n                if (ref) {\n                  //eslint-disable-next-line\n                  this.spanRef = ReactDOM.findDOMNode(ref);\n                  ref.innerHTML = label || '';\n                  this.addDraggableFalseAttributes(ref);\n                }\n              }}\n            >\n              {' '}\n            </span>\n            {draggedLabel && (\n              <span\n                className={classnames(classes.chipLabel, isOver && classes.over, classes.dragged)}\n                ref={ref => {\n                  if (ref) {\n                    //eslint-disable-next-line\n                    this.spanRef = ReactDOM.findDOMNode(ref);\n                    ref.innerHTML = draggedLabel || '';\n                    this.addDraggableFalseAttributes(ref);\n                  }\n                }}\n              >\n                {' '}\n              </span>\n            )}\n          </React.Fragment>\n        }\n        className={classnames(classes.chip, isOver && classes.over, {\n          [classes.correct]: correct !== undefined && correct,\n          [classes.incorrect]: correct !== undefined && !correct\n        })}\n        variant={disabled ? 'outlined' : undefined}\n        style={{\n          ...(this.state.height ? { height: this.state.height } : {})\n        }}\n        classes={{\n          label: isOver && classes.over\n        }}\n      />\n    );\n  }\n}\n\nconst StyledBlankContent = useStyles(BlankContent);\n\nconst connectedBlankContent = useStyles(({ connectDragSource, connectDropTarget, ...props }) => {\n  const { classes, isOver } = props;\n\n  return connectDropTarget(\n    connectDragSource(\n      <span className={classnames(classes.content, isOver && classes.over)}>\n        <StyledBlankContent {...props} />\n      </span>\n    )\n  );\n});\n\nconst tileTarget = {\n  drop(props, monitor) {\n    const draggedItem = monitor.getItem();\n\n    log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);\n\n    if (draggedItem.id !== props.id) {\n      props.onChange(props.id, draggedItem.choice.id);\n    }\n\n    return {\n      dropped: draggedItem.id !== props.id\n    };\n  },\n  canDrop(props, monitor) {\n    const draggedItem = monitor.getItem();\n\n    return draggedItem.instanceId === props.instanceId;\n  }\n};\n\nconst DropTile = DropTarget(DRAG_TYPE, tileTarget, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n  dragItem: monitor.getItem()\n}))(connectedBlankContent);\n\nconst tileSource = {\n  canDrag(props) {\n    return !props.disabled && !!props.choice;\n  },\n  beginDrag(props) {\n    return {\n      id: props.id,\n      choice: props.choice,\n      instanceId: props.instanceId,\n      fromChoice: true\n    };\n  },\n  endDrag(props, monitor) {\n    // this will be null if it did not drop\n    const dropResult = monitor.getDropResult();\n\n    if (!dropResult || (dropResult.dropped && !props.duplicates)) {\n      const draggedItem = monitor.getItem();\n\n      if (draggedItem.fromChoice) {\n        props.onChange(props.id, undefined);\n      }\n    }\n  }\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging()\n}))(DropTile);\n\nexport default DragDropTile;\n"],"file":"blank.js"}

package/lib/components/correct-input.js

@@ -36,6 +36,7 @@ var _default = (0, _styles.withStyles)(function () {
     input: {
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background(),
+      borderRadius: '4px !important',
       borderWidth: '1px',
       borderStyle: 'solid',
       padding: '10px 20px 10px 10px',
@@ -53,12 +54,17 @@ var _default = (0, _styles.withStyles)(function () {
         borderColor: _renderUi.color.primaryDark()
       }
     },
+    crInput: {
+      padding: '8px !important'
+    },
     correct: correctStyle(_renderUi.color.correct()),
     incorrect: correctStyle(_renderUi.color.incorrect()),
     box: {
       fontSize: 'inherit'
     },
     outlinedInput: {
+      padding: '2px',
+      borderRadius: '4px',
       '& fieldset': {
         border: 0
       }
@@ -71,17 +77,32 @@ var _default = (0, _styles.withStyles)(function () {
   var _classnames, _classnames2;
 
   var correct = props.correct,
-      isBox = props.isBox,
+      charactersLimit = props.charactersLimit,
       classes = props.classes,
       disabled = props.disabled,
-      rest = _objectWithoutProperties(props, ["correct", "isBox", "classes", "disabled"]);
+      isBox = props.isBox,
+      isConstructedResponse = props.isConstructedResponse,
+      width = props.width,
+      rest = _objectWithoutProperties(props, ["correct", "charactersLimit", "classes", "disabled", "isBox", "isConstructedResponse", "width"]);
 
   var label = typeof correct === 'boolean' ? correct ? 'correct' : 'incorrect' : undefined;
+  var inputProps = charactersLimit ? {
+    maxLength: charactersLimit
+  } : {};
+
+  if (width) {
+    inputProps.style = {
+      width: "".concat(width + Math.round(width / 10) + 1, "ch") // added some extra space for capital letters
+
+    };
+  }
+
   return _react["default"].createElement(_OutlinedInput["default"], _extends({
     className: (0, _classnames3["default"])((_classnames = {}, _defineProperty(_classnames, classes.disabledInput, disabled), _defineProperty(_classnames, classes.box, isBox), _defineProperty(_classnames, classes.outlinedInput, true), _classnames)),
     classes: {
-      input: (0, _classnames3["default"])((_classnames2 = {}, _defineProperty(_classnames2, classes.input, true), _defineProperty(_classnames2, classes[label], label), _classnames2))
+      input: (0, _classnames3["default"])((_classnames2 = {}, _defineProperty(_classnames2, classes.input, true), _defineProperty(_classnames2, classes[label], label), _defineProperty(_classnames2, classes.crInput, isConstructedResponse), _classnames2))
     },
+    inputProps: inputProps,
     labelWidth: 0,
     disabled: disabled
   }, rest));

package/lib/components/correct-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/correct-input.jsx"],"names":["correctStyle","color","borderColor","input","text","backgroundColor","background","borderWidth","borderStyle","padding","opacity","cursor","primary","primaryDark","correct","incorrect","box","fontSize","outlinedInput","border","notchedOutline","props","isBox","classes","disabled","rest","label","undefined","disabledInput"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAAAC,KAAK;AAAA,SAAK;AAC7BC,IAAAA,WAAW,YAAKD,KAAL;AADkB,GAAL;AAAA,CAA1B;;eAIe,wBAAW;AAAA,SAAO;AAC/BE,IAAAA,KAAK,EAAE;AACLF,MAAAA,KAAK,EAAEA,gBAAMG,IAAN,EADF;AAELC,MAAAA,eAAe,EAAEJ,gBAAMK,UAAN,EAFZ;AAGLC,MAAAA,WAAW,EAAE,KAHR;AAILC,MAAAA,WAAW,EAAE,OAJR;AAKLC,MAAAA,OAAO,EAAE,qBALJ;AAML,oBAAc;AACZC,QAAAA,OAAO,EAAE,GADG;AAEZC,QAAAA,MAAM,EAAE;AAFI,OANT;AAUL,iBAAW;AACTT,QAAAA,WAAW,EAAED,gBAAMW,OAAN,EADJ;AAET,sBAAc;AACZV,UAAAA,WAAW,EAAE;AADD;AAFL,OAVN;AAgBL,iBAAW;AACTA,QAAAA,WAAW,EAAED,gBAAMY,WAAN;AADJ;AAhBN,KADwB;AAqB/BC,IAAAA,OAAO,EAAEd,YAAY,CAACC,gBAAMa,OAAN,EAAD,CArBU;AAsB/BC,IAAAA,SAAS,EAAEf,YAAY,CAACC,gBAAMc,SAAN,EAAD,CAtBQ;AAuB/BC,IAAAA,GAAG,EAAE;AACHC,MAAAA,QAAQ,EAAE;AADP,KAvB0B;AA0B/BC,IAAAA,aAAa,EAAE;AACb,oBAAc;AACZC,QAAAA,MAAM,EAAE;AADI;AADD,KA1BgB;AA+B/BC,IAAAA,cAAc,EAAE;AACdlB,MAAAA,WAAW,EAAED,gBAAMa,OAAN;AADC;AA/Be,GAAP;AAAA,CAAX,EAkCX,UAAAO,KAAK,EAAI;AAAA;;AAAA,MACHP,OADG,GAC4CO,KAD5C,CACHP,OADG;AAAA,MACMQ,KADN,GAC4CD,KAD5C,CACMC,KADN;AAAA,MACaC,OADb,GAC4CF,KAD5C,CACaE,OADb;AAAA,MACsBC,QADtB,GAC4CH,KAD5C,CACsBG,QADtB;AAAA,MACmCC,IADnC,4BAC4CJ,KAD5C;;AAEX,MAAMK,KAAK,GAAG,OAAOZ,OAAP,KAAmB,SAAnB,GAAgCA,OAAO,GAAG,SAAH,GAAe,WAAtD,GAAqEa,SAAnF;AAEA,SACE,gCAAC,yBAAD;AACE,IAAA,SAAS,EAAE,6EACRJ,OAAO,CAACK,aADA,EACgBJ,QADhB,gCAERD,OAAO,CAACP,GAFA,EAEMM,KAFN,gCAGRC,OAAO,CAACL,aAHA,EAGgB,IAHhB,gBADb;AAME,IAAA,OAAO,EAAE;AACPf,MAAAA,KAAK,EAAE,+EAAcoB,OAAO,CAACpB,KAAtB,EAA8B,IAA9B,iCAAqCoB,OAAO,CAACG,KAAD,CAA5C,EAAsDA,KAAtD;AADA,KANX;AASE,IAAA,UAAU,EAAE,CATd;AAUE,IAAA,QAAQ,EAAEF;AAVZ,KAWMC,IAXN,EADF;AAeD,CArDc,C","sourcesContent":["import React from 'react';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport classnames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst correctStyle = color => ({\n  borderColor: `${color} !important`\n});\n\nexport default withStyles(() => ({\n  input: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    borderWidth: '1px',\n    borderStyle: 'solid',\n    padding: '10px 20px 10px 10px',\n    '&:disabled': {\n      opacity: 0.8,\n      cursor: 'not-allowed !important'\n    },\n    '&:hover': {\n      borderColor: color.primary(),\n      '&:disabled': {\n        borderColor: 'initial'\n      }\n    },\n    '&:focus': {\n      borderColor: color.primaryDark()\n    }\n  },\n  correct: correctStyle(color.correct()),\n  incorrect: correctStyle(color.incorrect()),\n  box: {\n    fontSize: 'inherit'\n  },\n  outlinedInput: {\n    '& fieldset': {\n      border: 0\n    }\n  },\n  notchedOutline: {\n    borderColor: color.correct()\n  }\n}))(props => {\n  const { correct, isBox, classes, disabled, ...rest } = props;\n  const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;\n\n  return (\n    <OutlinedInput\n      className={classnames({\n        [classes.disabledInput]: disabled,\n        [classes.box]: isBox,\n        [classes.outlinedInput]: true\n      })}\n      classes={{\n        input: classnames({ [classes.input]: true, [classes[label]]: label })\n      }}\n      labelWidth={0}\n      disabled={disabled}\n      {...rest}\n    />\n  );\n});\n"],"file":"correct-input.js"}
+{"version":3,"sources":["../../src/components/correct-input.jsx"],"names":["correctStyle","color","borderColor","input","text","backgroundColor","background","borderRadius","borderWidth","borderStyle","padding","opacity","cursor","primary","primaryDark","crInput","correct","incorrect","box","fontSize","outlinedInput","border","notchedOutline","props","charactersLimit","classes","disabled","isBox","isConstructedResponse","width","rest","label","undefined","inputProps","maxLength","style","Math","round","disabledInput"],"mappings":"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","sourcesContent":["import React from 'react';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport classnames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst correctStyle = color => ({\n  borderColor: `${color} !important`\n});\n\nexport default withStyles(() => ({\n  input: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    borderRadius: '4px !important',\n    borderWidth: '1px',\n    borderStyle: 'solid',\n    padding: '10px 20px 10px 10px',\n    '&:disabled': {\n      opacity: 0.8,\n      cursor: 'not-allowed !important'\n    },\n    '&:hover': {\n      borderColor: color.primary(),\n      '&:disabled': {\n        borderColor: 'initial'\n      }\n    },\n    '&:focus': {\n      borderColor: color.primaryDark()\n    }\n  },\n  crInput: {\n    padding: '8px !important'\n  },\n  correct: correctStyle(color.correct()),\n  incorrect: correctStyle(color.incorrect()),\n  box: {\n    fontSize: 'inherit'\n  },\n  outlinedInput: {\n    padding: '2px',\n    borderRadius: '4px',\n    '& fieldset': {\n      border: 0\n    }\n  },\n  notchedOutline: {\n    borderColor: color.correct()\n  }\n}))(props => {\n  const {\n    correct,\n    charactersLimit,\n    classes,\n    disabled,\n    isBox,\n    isConstructedResponse,\n    width,\n    ...rest\n  } = props;\n  const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;\n  const inputProps = charactersLimit ? { maxLength: charactersLimit } : {};\n\n  if (width) {\n    inputProps.style = {\n      width: `${width + Math.round(width / 10) + 1}ch` // added some extra space for capital letters\n    };\n  }\n\n  return (\n    <OutlinedInput\n      className={classnames({\n        [classes.disabledInput]: disabled,\n        [classes.box]: isBox,\n        [classes.outlinedInput]: true\n      })}\n      classes={{\n        input: classnames({\n          [classes.input]: true,\n          [classes[label]]: label,\n          [classes.crInput]: isConstructedResponse\n        })\n      }}\n      inputProps={inputProps}\n      labelWidth={0}\n      disabled={disabled}\n      {...rest}\n    />\n  );\n});\n"],"file":"correct-input.js"}

package/lib/components/dropdown.js

@@ -93,7 +93,8 @@ function (_React$Component) {
         classes: {
           root: classes.root,
           icon: classes.icon,
-          selectMenu: classes.selectMenu
+          selectMenu: classes.selectMenu,
+          select: classes.select
         },
         disabled: disabled,
         value: value || '',
@@ -165,6 +166,11 @@ var styles = function styles() {
         backgroundColor: _renderUi.color.background()
       }
     },
+    select: {
+      '&:focus': {
+        borderRadius: '4px'
+      }
+    },
     selectMenu: {
       backgroundColor: _renderUi.color.background(),
       '&:hover': {

package/lib/components/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dropdown.jsx"],"names":["Dropdown","props","setState","showCheckmark","open","state","classes","id","correct","disabled","value","onChange","choices","showCorrectAnswer","root","icon","selectMenu","showCheckmarkAndOpen","hideCheckmarkAndClose","keepMounted","disablePortal","e","target","map","c","index","menuRoot","selected","label","__html","React","Component","PropTypes","string","bool","func","object","arrayOf","shape","styles","color","text","backgroundColor","background","borderColor","secondaryLight","paddingTop","paddingBottom","border","borderRadius","boxSizing","padding","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport CorrectInput from './correct-input';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nclass Dropdown extends React.Component {\n  static propTypes = {\n    id: PropTypes.string,\n    value: PropTypes.string,\n    disabled: PropTypes.bool,\n    onChange: PropTypes.func,\n    classes: PropTypes.object,\n    correct: PropTypes.bool,\n    choices: PropTypes.arrayOf(\n      PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })\n    ),\n    showCorrectAnswer: PropTypes.bool\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showCheckmark: false,\n      open: false\n    };\n  }\n\n  showCheckmarkAndOpen = () => {\n    this.setState({\n      showCheckmark: true,\n      open: true\n    });\n  };\n\n  hideCheckmarkAndClose = () => {\n    this.setState({\n      showCheckmark: false,\n      open: false\n    });\n  };\n\n  render() {\n    const {\n      classes,\n      id,\n      correct,\n      disabled,\n      value,\n      onChange,\n      choices,\n      showCorrectAnswer\n    } = this.props;\n\n    const { showCheckmark, open } = this.state;\n\n    return (\n      <Select\n        classes={{ root: classes.root, icon: classes.icon, selectMenu: classes.selectMenu }}\n        disabled={disabled}\n        value={value || ''}\n        onOpen={this.showCheckmarkAndOpen}\n        onClose={this.hideCheckmarkAndClose}\n        open={open}\n        input={<CorrectInput correct={showCorrectAnswer || correct} />}\n        MenuProps={{\n          keepMounted: true,\n          disablePortal: true\n        }}\n        onChange={e => {\n          onChange(id, e.target.value);\n        }}\n      >\n        {(choices || []).map((c, index) => (\n          <MenuItem\n            classes={{ root: classes.menuRoot, selected: classes.selected }}\n            key={`${c.label}-${index}`}\n            value={c.value}\n          >\n            <span\n              className={classes.label}\n              dangerouslySetInnerHTML={{\n                __html: c.label\n              }}\n            />\n            {showCheckmark && (\n              <span\n                className={classes.label}\n                dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}\n              />\n            )}\n          </MenuItem>\n        ))}\n      </Select>\n    );\n  }\n}\n\nconst styles = () => ({\n  root: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    borderColor: color.secondaryLight(),\n    '& ul': {\n      paddingTop: 0,\n      paddingBottom: 0,\n      border: `1px solid ${color.text()}`,\n      borderRadius: '5px',\n      color: color.text(),\n      backgroundColor: color.background()\n    }\n  },\n  selectMenu: {\n    backgroundColor: color.background(),\n    '&:hover': {\n      borderColor: 'initial'\n    },\n    '&:focus': {\n      borderColor: 'initial'\n    }\n  },\n  icon: {\n    color: color.text()\n  },\n  selected: {\n    color: `${color.text()} !important`,\n    backgroundColor: `${color.background()} !important`,\n    '&:hover': {\n      color: color.text(),\n      backgroundColor: `${color.secondaryLight()} !important`\n    }\n  },\n  menuRoot: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    '&:focus': {\n      color: color.text(),\n      backgroundColor: color.background()\n    },\n    '&:hover': {\n      color: color.text(),\n      backgroundColor: color.secondaryLight()\n    },\n    boxSizing: 'border-box',\n    padding: '25px',\n    '&:first-of-type': {\n      borderRadius: '3px 3px 0 0'\n    },\n    '&:last-of-type': {\n      borderRadius: '0 0 3px 3px'\n    }\n  },\n  label: {\n    fontSize: 'max(1rem, 14px)'\n  }\n});\n\nexport default withStyles(styles)(Dropdown);\n"],"file":"dropdown.js"}
+{"version":3,"sources":["../../src/components/dropdown.jsx"],"names":["Dropdown","props","setState","showCheckmark","open","state","classes","id","correct","disabled","value","onChange","choices","showCorrectAnswer","root","icon","selectMenu","select","showCheckmarkAndOpen","hideCheckmarkAndClose","keepMounted","disablePortal","e","target","map","c","index","menuRoot","selected","label","__html","React","Component","PropTypes","string","bool","func","object","arrayOf","shape","styles","color","text","backgroundColor","background","borderColor","secondaryLight","paddingTop","paddingBottom","border","borderRadius","boxSizing","padding","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport CorrectInput from './correct-input';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nclass Dropdown extends React.Component {\n  static propTypes = {\n    id: PropTypes.string,\n    value: PropTypes.string,\n    disabled: PropTypes.bool,\n    onChange: PropTypes.func,\n    classes: PropTypes.object,\n    correct: PropTypes.bool,\n    choices: PropTypes.arrayOf(\n      PropTypes.shape({ value: PropTypes.string, label: PropTypes.string })\n    ),\n    showCorrectAnswer: PropTypes.bool\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showCheckmark: false,\n      open: false\n    };\n  }\n\n  showCheckmarkAndOpen = () => {\n    this.setState({\n      showCheckmark: true,\n      open: true\n    });\n  };\n\n  hideCheckmarkAndClose = () => {\n    this.setState({\n      showCheckmark: false,\n      open: false\n    });\n  };\n\n  render() {\n    const {\n      classes,\n      id,\n      correct,\n      disabled,\n      value,\n      onChange,\n      choices,\n      showCorrectAnswer\n    } = this.props;\n\n    const { showCheckmark, open } = this.state;\n\n    return (\n      <Select\n        classes={{\n          root: classes.root,\n          icon: classes.icon,\n          selectMenu: classes.selectMenu,\n          select: classes.select\n        }}\n        disabled={disabled}\n        value={value || ''}\n        onOpen={this.showCheckmarkAndOpen}\n        onClose={this.hideCheckmarkAndClose}\n        open={open}\n        input={<CorrectInput correct={showCorrectAnswer || correct} />}\n        MenuProps={{\n          keepMounted: true,\n          disablePortal: true\n        }}\n        onChange={e => {\n          onChange(id, e.target.value);\n        }}\n      >\n        {(choices || []).map((c, index) => (\n          <MenuItem\n            classes={{ root: classes.menuRoot, selected: classes.selected }}\n            key={`${c.label}-${index}`}\n            value={c.value}\n          >\n            <span\n              className={classes.label}\n              dangerouslySetInnerHTML={{\n                __html: c.label\n              }}\n            />\n            {showCheckmark && (\n              <span\n                className={classes.label}\n                dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}\n              />\n            )}\n          </MenuItem>\n        ))}\n      </Select>\n    );\n  }\n}\n\nconst styles = () => ({\n  root: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    borderColor: color.secondaryLight(),\n    '& ul': {\n      paddingTop: 0,\n      paddingBottom: 0,\n      border: `1px solid ${color.text()}`,\n      borderRadius: '5px',\n      color: color.text(),\n      backgroundColor: color.background()\n    }\n  },\n  select: {\n    '&:focus': {\n      borderRadius: '4px'\n    }\n  },\n  selectMenu: {\n    backgroundColor: color.background(),\n    '&:hover': {\n      borderColor: 'initial'\n    },\n    '&:focus': {\n      borderColor: 'initial'\n    }\n  },\n  icon: {\n    color: color.text()\n  },\n  selected: {\n    color: `${color.text()} !important`,\n    backgroundColor: `${color.background()} !important`,\n    '&:hover': {\n      color: color.text(),\n      backgroundColor: `${color.secondaryLight()} !important`\n    }\n  },\n  menuRoot: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    '&:focus': {\n      color: color.text(),\n      backgroundColor: color.background()\n    },\n    '&:hover': {\n      color: color.text(),\n      backgroundColor: color.secondaryLight()\n    },\n    boxSizing: 'border-box',\n    padding: '25px',\n    '&:first-of-type': {\n      borderRadius: '3px 3px 0 0'\n    },\n    '&:last-of-type': {\n      borderRadius: '0 0 3px 3px'\n    }\n  },\n  label: {\n    fontSize: 'max(1rem, 14px)'\n  }\n});\n\nexport default withStyles(styles)(Dropdown);\n"],"file":"dropdown.js"}

package/lib/components/input.js

@@ -16,16 +16,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var Input = function Input(_ref) {
   var disabled = _ref.disabled,
       correct = _ref.correct,
+      charactersLimit = _ref.charactersLimit,
       id = _ref.id,
+      isConstructedResponse = _ref.isConstructedResponse,
       value = _ref.value,
       _onChange = _ref.onChange,
-      showCorrectAnswer = _ref.showCorrectAnswer;
+      showCorrectAnswer = _ref.showCorrectAnswer,
+      width = _ref.width;
   return _react["default"].createElement(_correctInput["default"], {
     disabled: disabled,
     correct: showCorrectAnswer || correct,
+    charactersLimit: charactersLimit,
     variant: "outlined",
     value: value,
+    isConstructedResponse: isConstructedResponse,
     isBox: true,
+    width: width,
     onChange: function onChange(e) {
       _onChange(id, e.target.value);
     }

package/lib/components/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/input.jsx"],"names":["Input","disabled","correct","id","value","onChange","showCorrectAnswer","e","target","propTypes","PropTypes","string","func","bool"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAAmE;AAAA,MAAhEC,QAAgE,QAAhEA,QAAgE;AAAA,MAAtDC,OAAsD,QAAtDA,OAAsD;AAAA,MAA7CC,EAA6C,QAA7CA,EAA6C;AAAA,MAAzCC,KAAyC,QAAzCA,KAAyC;AAAA,MAAlCC,SAAkC,QAAlCA,QAAkC;AAAA,MAAxBC,iBAAwB,QAAxBA,iBAAwB;AAC/E,SACE,gCAAC,wBAAD;AACE,IAAA,QAAQ,EAAEL,QADZ;AAEE,IAAA,OAAO,EAAEK,iBAAiB,IAAIJ,OAFhC;AAGE,IAAA,OAAO,EAAC,UAHV;AAIE,IAAA,KAAK,EAAEE,KAJT;AAKE,IAAA,KAAK,EAAE,IALT;AAME,IAAA,QAAQ,EAAE,kBAAAG,CAAC,EAAI;AACbF,MAAAA,SAAQ,CAACF,EAAD,EAAKI,CAAC,CAACC,MAAF,CAASJ,KAAd,CAAR;AACD;AARH,IADF;AAYD,CAbD;;AAcAJ,KAAK,CAACS,SAAN,GAAkB;AAChBN,EAAAA,EAAE,EAAEO,sBAAUC,MADE;AAEhBP,EAAAA,KAAK,EAAEM,sBAAUC,MAFD;AAGhBN,EAAAA,QAAQ,EAAEK,sBAAUE,IAHJ;AAIhBX,EAAAA,QAAQ,EAAES,sBAAUG,IAJJ;AAKhBX,EAAAA,OAAO,EAAEQ,sBAAUG,IALH;AAMhBP,EAAAA,iBAAiB,EAAEI,sBAAUG;AANb,CAAlB;eASeb,K","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectInput from './correct-input';\n\nconst Input = ({ disabled, correct, id, value, onChange, showCorrectAnswer }) => {\n  return (\n    <CorrectInput\n      disabled={disabled}\n      correct={showCorrectAnswer || correct}\n      variant=\"outlined\"\n      value={value}\n      isBox={true}\n      onChange={e => {\n        onChange(id, e.target.value);\n      }}\n    />\n  );\n};\nInput.propTypes = {\n  id: PropTypes.string,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  disabled: PropTypes.bool,\n  correct: PropTypes.bool,\n  showCorrectAnswer: PropTypes.bool\n};\n\nexport default Input;\n"],"file":"input.js"}
+{"version":3,"sources":["../../src/components/input.jsx"],"names":["Input","disabled","correct","charactersLimit","id","isConstructedResponse","value","onChange","showCorrectAnswer","width","e","target","propTypes","PropTypes","string","func","bool"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAUR;AAAA,MATJC,QASI,QATJA,QASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJC,eAOI,QAPJA,eAOI;AAAA,MANJC,EAMI,QANJA,EAMI;AAAA,MALJC,qBAKI,QALJA,qBAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,SAGI,QAHJA,QAGI;AAAA,MAFJC,iBAEI,QAFJA,iBAEI;AAAA,MADJC,KACI,QADJA,KACI;AACJ,SACE,gCAAC,wBAAD;AACE,IAAA,QAAQ,EAAER,QADZ;AAEE,IAAA,OAAO,EAAEO,iBAAiB,IAAIN,OAFhC;AAGE,IAAA,eAAe,EAAEC,eAHnB;AAIE,IAAA,OAAO,EAAC,UAJV;AAKE,IAAA,KAAK,EAAEG,KALT;AAME,IAAA,qBAAqB,EAAED,qBANzB;AAOE,IAAA,KAAK,EAAE,IAPT;AAQE,IAAA,KAAK,EAAEI,KART;AASE,IAAA,QAAQ,EAAE,kBAAAC,CAAC,EAAI;AACbH,MAAAA,SAAQ,CAACH,EAAD,EAAKM,CAAC,CAACC,MAAF,CAASL,KAAd,CAAR;AACD;AAXH,IADF;AAeD,CA1BD;;AA4BAN,KAAK,CAACY,SAAN,GAAkB;AAChBR,EAAAA,EAAE,EAAES,sBAAUC,MADE;AAEhBR,EAAAA,KAAK,EAAEO,sBAAUC,MAFD;AAGhBP,EAAAA,QAAQ,EAAEM,sBAAUE,IAHJ;AAIhBd,EAAAA,QAAQ,EAAEY,sBAAUG,IAJJ;AAKhBd,EAAAA,OAAO,EAAEW,sBAAUG,IALH;AAMhBR,EAAAA,iBAAiB,EAAEK,sBAAUG;AANb,CAAlB;eASehB,K","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectInput from './correct-input';\n\nconst Input = ({\n  disabled,\n  correct,\n  charactersLimit,\n  id,\n  isConstructedResponse,\n  value,\n  onChange,\n  showCorrectAnswer,\n  width\n}) => {\n  return (\n    <CorrectInput\n      disabled={disabled}\n      correct={showCorrectAnswer || correct}\n      charactersLimit={charactersLimit}\n      variant=\"outlined\"\n      value={value}\n      isConstructedResponse={isConstructedResponse}\n      isBox={true}\n      width={width}\n      onChange={e => {\n        onChange(id, e.target.value);\n      }}\n    />\n  );\n};\n\nInput.propTypes = {\n  id: PropTypes.string,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  disabled: PropTypes.bool,\n  correct: PropTypes.bool,\n  showCorrectAnswer: PropTypes.bool\n};\n\nexport default Input;\n"],"file":"input.js"}

package/lib/constructed-response.js

@@ -18,12 +18,15 @@ var _default = (0, _withMask.withMask)('input', function (props) {
     var dataset = node.data ? node.data.dataset || {} : {};
 
     if (dataset.component === 'input') {
-      var disabled = props.disabled,
+      var adjustedLimit = props.adjustedLimit,
+          disabled = props.disabled,
           feedback = props.feedback,
-          showCorrectAnswer = props.showCorrectAnswer; // the first answer is the correct one
+          showCorrectAnswer = props.showCorrectAnswer,
+          maxLength = props.maxLength; // the first answer is the correct one
 
       var correctAnswer = (props.choices && dataset && props.choices[dataset.id] || [])[0];
       var finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
+      var width = maxLength && maxLength[dataset.id];
       return _react["default"].createElement(_input["default"], {
         key: "".concat(node.type, "-input-").concat(dataset.id),
         correct: feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct',
@@ -31,7 +34,10 @@ var _default = (0, _withMask.withMask)('input', function (props) {
         value: finalValue,
         id: dataset.id,
         onChange: onChange,
-        showCorrectAnswer: showCorrectAnswer
+        showCorrectAnswer: showCorrectAnswer,
+        width: width,
+        charactersLimit: adjustedLimit ? width : 25,
+        isConstructedResponse: true
       });
     }
   };

package/lib/constructed-response.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/constructed-response.jsx"],"names":["props","node","data","onChange","dataset","component","disabled","feedback","showCorrectAnswer","correctAnswer","choices","id","finalValue","label","type"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,wBAAS,OAAT,EAAkB,UAAAA,KAAK;AAAA,SAAI,UAACC,IAAD,EAAOC,IAAP,EAAaC,QAAb,EAA0B;AAClE,QAAMC,OAAO,GAAGH,IAAI,CAACC,IAAL,GAAYD,IAAI,CAACC,IAAL,CAAUE,OAAV,IAAqB,EAAjC,GAAsC,EAAtD;;AACA,QAAIA,OAAO,CAACC,SAAR,KAAsB,OAA1B,EAAmC;AAAA,UACzBC,QADyB,GACiBN,KADjB,CACzBM,QADyB;AAAA,UACfC,QADe,GACiBP,KADjB,CACfO,QADe;AAAA,UACLC,iBADK,GACiBR,KADjB,CACLQ,iBADK,EAEjC;;AACA,UAAMC,aAAa,GAAG,CAAET,KAAK,CAACU,OAAN,IAAiBN,OAAjB,IAA4BJ,KAAK,CAACU,OAAN,CAAcN,OAAO,CAACO,EAAtB,CAA7B,IAA2D,EAA5D,EAAgE,CAAhE,CAAtB;AACA,UAAMC,UAAU,GAAGJ,iBAAiB,GAChCC,aAAa,IAAIA,aAAa,CAACI,KADC,GAEhCX,IAAI,CAACE,OAAO,CAACO,EAAT,CAAJ,IAAoB,EAFxB;AAIA,aACE,gCAAC,iBAAD;AACE,QAAA,GAAG,YAAKV,IAAI,CAACa,IAAV,oBAAwBV,OAAO,CAACO,EAAhC,CADL;AAEE,QAAA,OAAO,EAAEJ,QAAQ,IAAIA,QAAQ,CAACH,OAAO,CAACO,EAAT,CAApB,IAAoCJ,QAAQ,CAACH,OAAO,CAACO,EAAT,CAAR,KAAyB,SAFxE;AAGE,QAAA,QAAQ,EAAEH,iBAAiB,IAAIF,QAHjC;AAIE,QAAA,KAAK,EAAEM,UAJT;AAKE,QAAA,EAAE,EAAER,OAAO,CAACO,EALd;AAME,QAAA,QAAQ,EAAER,QANZ;AAOE,QAAA,iBAAiB,EAAEK;AAPrB,QADF;AAWD;AACF,GAtBqC;AAAA,CAAvB,C","sourcesContent":["import React from 'react';\nimport Input from './components/input';\nimport { withMask } from './with-mask';\n\nexport default withMask('input', props => (node, data, onChange) => {\n  const dataset = node.data ? node.data.dataset || {} : {};\n  if (dataset.component === 'input') {\n    const { disabled, feedback, showCorrectAnswer } = props;\n    // the first answer is the correct one\n    const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];\n    const finalValue = showCorrectAnswer\n      ? correctAnswer && correctAnswer.label\n      : data[dataset.id] || '';\n\n    return (\n      <Input\n        key={`${node.type}-input-${dataset.id}`}\n        correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}\n        disabled={showCorrectAnswer || disabled}\n        value={finalValue}\n        id={dataset.id}\n        onChange={onChange}\n        showCorrectAnswer={showCorrectAnswer}\n      />\n    );\n  }\n});\n"],"file":"constructed-response.js"}
+{"version":3,"sources":["../src/constructed-response.jsx"],"names":["props","node","data","onChange","dataset","component","adjustedLimit","disabled","feedback","showCorrectAnswer","maxLength","correctAnswer","choices","id","finalValue","label","width","type"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,wBAAS,OAAT,EAAkB,UAAAA,KAAK;AAAA,SAAI,UAACC,IAAD,EAAOC,IAAP,EAAaC,QAAb,EAA0B;AAClE,QAAMC,OAAO,GAAGH,IAAI,CAACC,IAAL,GAAYD,IAAI,CAACC,IAAL,CAAUE,OAAV,IAAqB,EAAjC,GAAsC,EAAtD;;AACA,QAAIA,OAAO,CAACC,SAAR,KAAsB,OAA1B,EAAmC;AAAA,UACzBC,aADyB,GAC2CN,KAD3C,CACzBM,aADyB;AAAA,UACVC,QADU,GAC2CP,KAD3C,CACVO,QADU;AAAA,UACAC,QADA,GAC2CR,KAD3C,CACAQ,QADA;AAAA,UACUC,iBADV,GAC2CT,KAD3C,CACUS,iBADV;AAAA,UAC6BC,SAD7B,GAC2CV,KAD3C,CAC6BU,SAD7B,EAEjC;;AACA,UAAMC,aAAa,GAAG,CAAEX,KAAK,CAACY,OAAN,IAAiBR,OAAjB,IAA4BJ,KAAK,CAACY,OAAN,CAAcR,OAAO,CAACS,EAAtB,CAA7B,IAA2D,EAA5D,EAAgE,CAAhE,CAAtB;AACA,UAAMC,UAAU,GAAGL,iBAAiB,GAChCE,aAAa,IAAIA,aAAa,CAACI,KADC,GAEhCb,IAAI,CAACE,OAAO,CAACS,EAAT,CAAJ,IAAoB,EAFxB;AAGA,UAAMG,KAAK,GAAGN,SAAS,IAAIA,SAAS,CAACN,OAAO,CAACS,EAAT,CAApC;AAEA,aACE,gCAAC,iBAAD;AACE,QAAA,GAAG,YAAKZ,IAAI,CAACgB,IAAV,oBAAwBb,OAAO,CAACS,EAAhC,CADL;AAEE,QAAA,OAAO,EAAEL,QAAQ,IAAIA,QAAQ,CAACJ,OAAO,CAACS,EAAT,CAApB,IAAoCL,QAAQ,CAACJ,OAAO,CAACS,EAAT,CAAR,KAAyB,SAFxE;AAGE,QAAA,QAAQ,EAAEJ,iBAAiB,IAAIF,QAHjC;AAIE,QAAA,KAAK,EAAEO,UAJT;AAKE,QAAA,EAAE,EAAEV,OAAO,CAACS,EALd;AAME,QAAA,QAAQ,EAAEV,QANZ;AAOE,QAAA,iBAAiB,EAAEM,iBAPrB;AAQE,QAAA,KAAK,EAAEO,KART;AASE,QAAA,eAAe,EAAEV,aAAa,GAAGU,KAAH,GAAW,EAT3C;AAUE,QAAA,qBAAqB,EAAE;AAVzB,QADF;AAcD;AACF,GA1BqC;AAAA,CAAvB,C","sourcesContent":["import React from 'react';\nimport Input from './components/input';\nimport { withMask } from './with-mask';\n\nexport default withMask('input', props => (node, data, onChange) => {\n  const dataset = node.data ? node.data.dataset || {} : {};\n  if (dataset.component === 'input') {\n    const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength } = props;\n    // the first answer is the correct one\n    const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];\n    const finalValue = showCorrectAnswer\n      ? correctAnswer && correctAnswer.label\n      : data[dataset.id] || '';\n    const width = maxLength && maxLength[dataset.id];\n\n    return (\n      <Input\n        key={`${node.type}-input-${dataset.id}`}\n        correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}\n        disabled={showCorrectAnswer || disabled}\n        value={finalValue}\n        id={dataset.id}\n        onChange={onChange}\n        showCorrectAnswer={showCorrectAnswer}\n        width={width}\n        charactersLimit={adjustedLimit ? width : 25}\n        isConstructedResponse={true}\n      />\n    );\n  }\n});\n"],"file":"constructed-response.js"}

package/lib/mask.js

@@ -143,13 +143,23 @@ var renderChildren = function renderChildren(layout, value, onChange, rootRender
   });
   return children;
 };
+
+exports.renderChildren = renderChildren;
+var MaskContainer = (0, _styles.withStyles)(function () {
+  return {
+    main: {
+      display: 'inherit'
+    }
+  };
+})(function (props) {
+  return _react["default"].createElement("div", {
+    className: props.classes.main
+  }, props.children);
+});
 /**
  * Renders a layout that uses the slate.js Value model structure.
  */
 
-
-exports.renderChildren = renderChildren;
-
 var Mask =
 /*#__PURE__*/
 function (_React$Component) {
@@ -184,7 +194,7 @@ function (_React$Component) {
           value = _this$props.value,
           layout = _this$props.layout;
       var children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
-      return _react["default"].createElement("div", null, children);
+      return _react["default"].createElement(MaskContainer, null, children);
     }
   }]);
 

package/lib/mask.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/mask.jsx"],"names":["Paragraph","theme","para","paddingTop","spacing","unit","paddingBottom","props","classes","children","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","length","marks","renderChildren","layout","value","onChange","rootRenderChildren","nodes","forEach","index","key","c","push","object","content","reduce","acc","l","t","extraText","markKey","MARK_TAGS","Tag","subNodes","data","attributes","Mask","id","handleChange","React","Component","PropTypes","func"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAG,wBAAW,UAAAC,KAAK;AAAA,SAAK;AACrCC,IAAAA,IAAI,EAAE;AACJC,MAAAA,UAAU,EAAE,IAAIF,KAAK,CAACG,OAAN,CAAcC,IAD1B;AAEJC,MAAAA,aAAa,EAAE,IAAIL,KAAK,CAACG,OAAN,CAAcC;AAF7B;AAD+B,GAAL;AAAA,CAAhB,EAKd,UAAAE,KAAK;AAAA,SAAI;AAAK,IAAA,SAAS,EAAEA,KAAK,CAACC,OAAN,CAAcN;AAA9B,KAAqCK,KAAK,CAACE,QAA3C,CAAJ;AAAA,CALS,CAAlB;AAOA,IAAMC,uBAAuB,GAAG,CAAC,OAAD,EAAU,IAAV,CAAhC;;AAEA,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,UAAD,EAAaC,IAAb,EAAsB;AACpC,MAAMC,YAAY,GAAGD,IAAI,CAACE,IAAL,OAAgB,EAArC;AACA,MAAMC,UAAU,GAAGJ,UAAU,IAAIA,UAAU,CAACK,IAA5C;;AAEA,MAAIH,YAAY,IAAIJ,uBAAuB,CAACQ,QAAxB,CAAiCF,UAAjC,CAApB,EAAkE;AAChE,WAAOG,SAAP;AACD,GAFD,MAEO;AACL,WAAON,IAAP;AACD;AACF,CATD;;AAWA,IAAMO,OAAO,GAAG,SAAVA,OAAU,CAAAC,CAAC,EAAI;AACnB,MAAMC,IAAI,GAAGD,CAAC,CAACE,MAAF,CAASC,IAAT,CAAc,UAAAC,KAAK;AAAA,WAAI,qBAAIA,KAAJ,EAAW,OAAX,EAAoB,EAApB,EAAwBC,MAA5B;AAAA,GAAnB,CAAb;;AAEA,MAAIJ,IAAJ,EAAU;AACR,WAAOA,IAAI,CAACK,KAAL,CAAW,CAAX,CAAP;AACD;;AAED,SAAO,IAAP;AACD,CARD;;AAUO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,MAAD,EAASC,KAAT,EAAgBC,QAAhB,EAA0BC,kBAA1B,EAA8CpB,UAA9C,EAA6D;AACzF,MAAI,CAACkB,KAAL,EAAY;AACV,WAAO,IAAP;AACD;;AAED,MAAMrB,QAAQ,GAAG,EAAjB;AAEA,GAACoB,MAAM,CAACI,KAAP,IAAgB,EAAjB,EAAqBC,OAArB,CAA6B,UAACb,CAAD,EAAIc,KAAJ,EAAc;AACzC,QAAMC,GAAG,aAAMf,CAAC,CAACJ,IAAR,cAAgBkB,KAAhB,CAAT;;AAEA,QAAIH,kBAAJ,EAAwB;AACtB,UAAMK,CAAC,GAAGL,kBAAkB,CAACX,CAAD,EAAIS,KAAJ,EAAWC,QAAX,CAA5B;;AACA,UAAIM,CAAJ,EAAO;AACL5B,QAAAA,QAAQ,CAAC6B,IAAT,CAAcD,CAAd;AACA;AACD;AACF;;AAED,QAAIhB,CAAC,CAACkB,MAAF,KAAa,MAAjB,EAAyB;AACvB,UAAMC,OAAO,GAAGnB,CAAC,CAACE,MAAF,CAASkB,MAAT,CAAgB,UAACC,GAAD,EAAMC,CAAN,EAAY;AAC1C,YAAMC,CAAC,GAAGD,CAAC,CAAC9B,IAAZ;AACA,YAAMgC,SAAS,GAAGlC,OAAO,CAACC,UAAD,EAAagC,CAAb,CAAzB;AACA,eAAOC,SAAS,GAAGH,GAAG,GAAGG,SAAT,GAAqBH,GAArC;AACD,OAJe,EAIb,EAJa,CAAhB;AAKA,UAAMpB,IAAI,GAAGF,OAAO,CAACC,CAAD,CAApB;;AAEA,UAAIC,IAAJ,EAAU;AACR,YAAIwB,OAAJ;;AAEA,aAAKA,OAAL,IAAgBC,wBAAhB,EAA2B;AACzB,cAAIA,yBAAUD,OAAV,MAAuBxB,IAAI,CAACL,IAAhC,EAAsC;AACpC,gBAAM+B,GAAG,GAAGF,OAAZ;AAEArC,YAAAA,QAAQ,CAAC6B,IAAT,CAAc,gCAAC,GAAD,QAAME,OAAN,CAAd;AACA;AACD;AACF;AACF,OAXD,MAWO,IAAIA,OAAO,CAACd,MAAR,GAAiB,CAArB,EAAwB;AAC7BjB,QAAAA,QAAQ,CAAC6B,IAAT,CAAcE,OAAd;AACD;AACF,KAtBD,MAsBO;AACL,UAAMS,QAAQ,GAAGrB,cAAc,CAACP,CAAD,EAAIS,KAAJ,EAAWC,QAAX,EAAqBC,kBAArB,EAAyCX,CAAzC,CAA/B;;AACA,UAAIA,CAAC,CAACJ,IAAF,KAAW,GAAX,IAAkBI,CAAC,CAACJ,IAAF,KAAW,WAAjC,EAA8C;AAC5CR,QAAAA,QAAQ,CAAC6B,IAAT,CAAc,gCAAC,SAAD;AAAW,UAAA,GAAG,EAAEF;AAAhB,WAAsBa,QAAtB,CAAd;AACD,OAFD,MAEO;AACL,YAAMD,IAAG,GAAG3B,CAAC,CAACJ,IAAd;;AACA,YAAII,CAAC,CAACY,KAAF,IAAWZ,CAAC,CAACY,KAAF,CAAQP,MAAR,GAAiB,CAAhC,EAAmC;AACjCjB,UAAAA,QAAQ,CAAC6B,IAAT,CACE,gCAAC,IAAD;AAAK,YAAA,GAAG,EAAEF;AAAV,aAAmBf,CAAC,CAAC6B,IAAF,CAAOC,UAA1B,GACGF,QADH,CADF;AAKD,SAND,MAMO;AACLxC,UAAAA,QAAQ,CAAC6B,IAAT,CAAc,gCAAC,IAAD;AAAK,YAAA,GAAG,EAAEF;AAAV,aAAmBf,CAAC,CAAC6B,IAAF,CAAOC,UAA1B,EAAd;AACD;AACF;AACF;AACF,GAlDD;AAmDA,SAAO1C,QAAP;AACD,CA3DM;AA6DP;;;;;;;IAGqB2C,I;;;;;;;;;;;;;;;;;;mEAQJ,UAACC,EAAD,EAAKvB,KAAL,EAAe;AAC5B,UAAMoB,IAAI,qBAAQ,MAAK3C,KAAL,CAAWuB,KAAnB,sBAA2BuB,EAA3B,EAAgCvB,KAAhC,EAAV;;AACA,YAAKvB,KAAL,CAAWwB,QAAX,CAAoBmB,IAApB;AACD,K;;;;;;;6BAEQ;AAAA,wBACmB,KAAK3C,KADxB;AAAA,UACCuB,KADD,eACCA,KADD;AAAA,UACQD,MADR,eACQA,MADR;AAEP,UAAMpB,QAAQ,GAAGmB,cAAc,CAACC,MAAD,EAASC,KAAT,EAAgB,KAAKwB,YAArB,EAAmC,KAAK/C,KAAL,CAAWqB,cAA9C,CAA/B;AAEA,aAAO,6CAAMnB,QAAN,CAAP;AACD;;;;EAlB+B8C,kBAAMC,S;;;;gBAAnBJ,I,eACA;AACjBxB,EAAAA,cAAc,EAAE6B,sBAAUC,IADT;AAEjB7B,EAAAA,MAAM,EAAE4B,sBAAUlB,MAFD;AAGjBT,EAAAA,KAAK,EAAE2B,sBAAUlB,MAHA;AAIjBR,EAAAA,QAAQ,EAAE0B,sBAAUC;AAJH,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/get';\nimport { withStyles } from '@material-ui/core/styles';\nimport { MARK_TAGS } from './serialization';\n\nconst Paragraph = withStyles(theme => ({\n  para: {\n    paddingTop: 2 * theme.spacing.unit,\n    paddingBottom: 2 * theme.spacing.unit\n  }\n}))(props => <div className={props.classes.para}>{props.children}</div>);\n\nconst restrictWhitespaceTypes = ['tbody', 'tr'];\n\nconst addText = (parentNode, text) => {\n  const isWhitespace = text.trim() === '';\n  const parentType = parentNode && parentNode.type;\n\n  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {\n    return undefined;\n  } else {\n    return text;\n  }\n};\n\nconst getMark = n => {\n  const mark = n.leaves.find(leave => get(leave, 'marks', []).length);\n\n  if (mark) {\n    return mark.marks[0];\n  }\n\n  return null;\n};\n\nexport const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode) => {\n  if (!value) {\n    return null;\n  }\n\n  const children = [];\n\n  (layout.nodes || []).forEach((n, index) => {\n    const key = `${n.type}-${index}`;\n\n    if (rootRenderChildren) {\n      const c = rootRenderChildren(n, value, onChange);\n      if (c) {\n        children.push(c);\n        return;\n      }\n    }\n\n    if (n.object === 'text') {\n      const content = n.leaves.reduce((acc, l) => {\n        const t = l.text;\n        const extraText = addText(parentNode, t);\n        return extraText ? acc + extraText : acc;\n      }, '');\n      const mark = getMark(n);\n\n      if (mark) {\n        let markKey;\n\n        for (markKey in MARK_TAGS) {\n          if (MARK_TAGS[markKey] === mark.type) {\n            const Tag = markKey;\n\n            children.push(<Tag>{content}</Tag>);\n            break;\n          }\n        }\n      } else if (content.length > 0) {\n        children.push(content);\n      }\n    } else {\n      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);\n      if (n.type === 'p' || n.type === 'paragraph') {\n        children.push(<Paragraph key={key}>{subNodes}</Paragraph>);\n      } else {\n        const Tag = n.type;\n        if (n.nodes && n.nodes.length > 0) {\n          children.push(\n            <Tag key={key} {...n.data.attributes}>\n              {subNodes}\n            </Tag>\n          );\n        } else {\n          children.push(<Tag key={key} {...n.data.attributes} />);\n        }\n      }\n    }\n  });\n  return children;\n};\n\n/**\n * Renders a layout that uses the slate.js Value model structure.\n */\nexport default class Mask extends React.Component {\n  static propTypes = {\n    renderChildren: PropTypes.func,\n    layout: PropTypes.object,\n    value: PropTypes.object,\n    onChange: PropTypes.func\n  };\n\n  handleChange = (id, value) => {\n    const data = { ...this.props.value, [id]: value };\n    this.props.onChange(data);\n  };\n\n  render() {\n    const { value, layout } = this.props;\n    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);\n\n    return <div>{children}</div>;\n  }\n}\n"],"file":"mask.js"}
+{"version":3,"sources":["../src/mask.jsx"],"names":["Paragraph","theme","para","paddingTop","spacing","unit","paddingBottom","props","classes","children","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","length","marks","renderChildren","layout","value","onChange","rootRenderChildren","nodes","forEach","index","key","c","push","object","content","reduce","acc","l","t","extraText","markKey","MARK_TAGS","Tag","subNodes","data","attributes","MaskContainer","main","display","Mask","id","handleChange","React","Component","PropTypes","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/get';\nimport { withStyles } from '@material-ui/core/styles';\nimport { MARK_TAGS } from './serialization';\n\nconst Paragraph = withStyles(theme => ({\n  para: {\n    paddingTop: 2 * theme.spacing.unit,\n    paddingBottom: 2 * theme.spacing.unit\n  }\n}))(props => <div className={props.classes.para}>{props.children}</div>);\n\nconst restrictWhitespaceTypes = ['tbody', 'tr'];\n\nconst addText = (parentNode, text) => {\n  const isWhitespace = text.trim() === '';\n  const parentType = parentNode && parentNode.type;\n\n  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {\n    return undefined;\n  } else {\n    return text;\n  }\n};\n\nconst getMark = n => {\n  const mark = n.leaves.find(leave => get(leave, 'marks', []).length);\n\n  if (mark) {\n    return mark.marks[0];\n  }\n\n  return null;\n};\n\nexport const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode) => {\n  if (!value) {\n    return null;\n  }\n\n  const children = [];\n\n  (layout.nodes || []).forEach((n, index) => {\n    const key = `${n.type}-${index}`;\n\n    if (rootRenderChildren) {\n      const c = rootRenderChildren(n, value, onChange);\n      if (c) {\n        children.push(c);\n        return;\n      }\n    }\n\n    if (n.object === 'text') {\n      const content = n.leaves.reduce((acc, l) => {\n        const t = l.text;\n        const extraText = addText(parentNode, t);\n        return extraText ? acc + extraText : acc;\n      }, '');\n      const mark = getMark(n);\n\n      if (mark) {\n        let markKey;\n\n        for (markKey in MARK_TAGS) {\n          if (MARK_TAGS[markKey] === mark.type) {\n            const Tag = markKey;\n\n            children.push(<Tag>{content}</Tag>);\n            break;\n          }\n        }\n      } else if (content.length > 0) {\n        children.push(content);\n      }\n    } else {\n      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);\n      if (n.type === 'p' || n.type === 'paragraph') {\n        children.push(<Paragraph key={key}>{subNodes}</Paragraph>);\n      } else {\n        const Tag = n.type;\n        if (n.nodes && n.nodes.length > 0) {\n          children.push(\n            <Tag key={key} {...n.data.attributes}>\n              {subNodes}\n            </Tag>\n          );\n        } else {\n          children.push(<Tag key={key} {...n.data.attributes} />);\n        }\n      }\n    }\n  });\n  return children;\n};\n\nconst MaskContainer = withStyles(() => ({\n  main: {\n    display: 'inherit'\n  }\n}))(props => <div className={props.classes.main}>{props.children}</div>);\n\n/**\n * Renders a layout that uses the slate.js Value model structure.\n */\nexport default class Mask extends React.Component {\n  static propTypes = {\n    renderChildren: PropTypes.func,\n    layout: PropTypes.object,\n    value: PropTypes.object,\n    onChange: PropTypes.func\n  };\n\n  handleChange = (id, value) => {\n    const data = { ...this.props.value, [id]: value };\n    this.props.onChange(data);\n  };\n\n  render() {\n    const { value, layout } = this.props;\n    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);\n\n    return <MaskContainer>{children}</MaskContainer>;\n  }\n}\n"],"file":"mask.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "1.10.22",
+  "version": "1.11.3",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,8 +10,8 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@pie-lib/drag": "^1.1.52",
-    "@pie-lib/math-rendering": "^2.3.11",
-    "@pie-lib/render-ui": "^4.12.2",
+    "@pie-lib/math-rendering": "^2.3.12",
+    "@pie-lib/render-ui": "^4.12.3",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "immutable": ">=3.8.1",
@@ -27,5 +27,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "b609e48dad31311311511a3033340db24c2808bd"
+  "gitHead": "3575de076034eb451b0a66b2f3fd3d29802983ec"
 }

package/src/choices/choice.jsx

@@ -67,7 +67,11 @@ export const BlankContent = withStyles(theme => ({
     margin: '4px'
   },
   chipLabel: {
-    whiteSpace: 'pre-wrap'
+    whiteSpace: 'pre-wrap',
+    '& img': {
+      display: 'block',
+      padding: '2px 0'
+    }
   },
   disabled: {}
 }))(BlankContentComp);

package/src/components/blank.jsx

@@ -24,7 +24,11 @@ const useStyles = withStyles(() => ({
     position: 'relative'
   },
   chipLabel: {
-    whiteSpace: 'pre-wrap'
+    whiteSpace: 'pre-wrap',
+    '& img': {
+      display: 'block',
+      padding: '2px 0'
+    }
   },
   hidden: {
     color: 'transparent',

package/src/components/correct-input.jsx

@@ -12,6 +12,7 @@ export default withStyles(() => ({
   input: {
     color: color.text(),
     backgroundColor: color.background(),
+    borderRadius: '4px !important',
     borderWidth: '1px',
     borderStyle: 'solid',
     padding: '10px 20px 10px 10px',
@@ -29,12 +30,17 @@ export default withStyles(() => ({
       borderColor: color.primaryDark()
     }
   },
+  crInput: {
+    padding: '8px !important'
+  },
   correct: correctStyle(color.correct()),
   incorrect: correctStyle(color.incorrect()),
   box: {
     fontSize: 'inherit'
   },
   outlinedInput: {
+    padding: '2px',
+    borderRadius: '4px',
     '& fieldset': {
       border: 0
     }
@@ -43,8 +49,24 @@ export default withStyles(() => ({
     borderColor: color.correct()
   }
 }))(props => {
-  const { correct, isBox, classes, disabled, ...rest } = props;
+  const {
+    correct,
+    charactersLimit,
+    classes,
+    disabled,
+    isBox,
+    isConstructedResponse,
+    width,
+    ...rest
+  } = props;
   const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;
+  const inputProps = charactersLimit ? { maxLength: charactersLimit } : {};
+
+  if (width) {
+    inputProps.style = {
+      width: `${width + Math.round(width / 10) + 1}ch` // added some extra space for capital letters
+    };
+  }
 
   return (
     <OutlinedInput
@@ -54,8 +76,13 @@ export default withStyles(() => ({
         [classes.outlinedInput]: true
       })}
       classes={{
-        input: classnames({ [classes.input]: true, [classes[label]]: label })
+        input: classnames({
+          [classes.input]: true,
+          [classes[label]]: label,
+          [classes.crInput]: isConstructedResponse
+        })
       }}
+      inputProps={inputProps}
       labelWidth={0}
       disabled={disabled}
       {...rest}

package/src/components/dropdown.jsx

@@ -59,7 +59,12 @@ class Dropdown extends React.Component {
 
     return (
       <Select
-        classes={{ root: classes.root, icon: classes.icon, selectMenu: classes.selectMenu }}
+        classes={{
+          root: classes.root,
+          icon: classes.icon,
+          selectMenu: classes.selectMenu,
+          select: classes.select
+        }}
         disabled={disabled}
         value={value || ''}
         onOpen={this.showCheckmarkAndOpen}
@@ -113,6 +118,11 @@ const styles = () => ({
       backgroundColor: color.background()
     }
   },
+  select: {
+    '&:focus': {
+      borderRadius: '4px'
+    }
+  },
   selectMenu: {
     backgroundColor: color.background(),
     '&:hover': {

package/src/components/input.jsx

@@ -2,20 +2,34 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CorrectInput from './correct-input';
 
-const Input = ({ disabled, correct, id, value, onChange, showCorrectAnswer }) => {
+const Input = ({
+  disabled,
+  correct,
+  charactersLimit,
+  id,
+  isConstructedResponse,
+  value,
+  onChange,
+  showCorrectAnswer,
+  width
+}) => {
   return (
     <CorrectInput
       disabled={disabled}
       correct={showCorrectAnswer || correct}
+      charactersLimit={charactersLimit}
       variant="outlined"
       value={value}
+      isConstructedResponse={isConstructedResponse}
       isBox={true}
+      width={width}
       onChange={e => {
         onChange(id, e.target.value);
       }}
     />
   );
 };
+
 Input.propTypes = {
   id: PropTypes.string,
   value: PropTypes.string,

package/src/constructed-response.jsx

@@ -5,12 +5,13 @@ import { withMask } from './with-mask';
 export default withMask('input', props => (node, data, onChange) => {
   const dataset = node.data ? node.data.dataset || {} : {};
   if (dataset.component === 'input') {
-    const { disabled, feedback, showCorrectAnswer } = props;
+    const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength } = props;
     // the first answer is the correct one
     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 (
       <Input
@@ -21,6 +22,9 @@ export default withMask('input', props => (node, data, onChange) => {
         id={dataset.id}
         onChange={onChange}
         showCorrectAnswer={showCorrectAnswer}
+        width={width}
+        charactersLimit={adjustedLimit ? width : 25}
+        isConstructedResponse={true}
       />
     );
   }

package/src/mask.jsx

@@ -95,6 +95,12 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
   return children;
 };
 
+const MaskContainer = withStyles(() => ({
+  main: {
+    display: 'inherit'
+  }
+}))(props => <div className={props.classes.main}>{props.children}</div>);
+
 /**
  * Renders a layout that uses the slate.js Value model structure.
  */
@@ -115,6 +121,6 @@ export default class Mask extends React.Component {
     const { value, layout } = this.props;
     const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
 
-    return <div>{children}</div>;
+    return <MaskContainer>{children}</MaskContainer>;
   }
 }