@pie-lib/mask-markup 2.1.1-next.2 → 2.1.1-next.4

package/lib/with-mask.js

@@ -1,15 +1,10 @@
 "use strict";
 
-require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.reflect.construct.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withMask = exports.buildLayoutFromMarkup = void 0;
-require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/web.dom-collections.for-each.js");
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -99,4 +94,4 @@ var withMask = exports.withMask = function withMask(type, renderChildren) {
     elementType: _propTypes["default"].string
   }), _WithMask;
 };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwicmVxdWlyZSIsIl9wcm9wVHlwZXMiLCJfbWFzayIsIl9jb21wb25lbnRpemUyIiwiX3NlcmlhbGl6YXRpb24iLCJfY2FsbFN1cGVyIiwidCIsIm8iLCJlIiwiX2dldFByb3RvdHlwZU9mMiIsIl9wb3NzaWJsZUNvbnN0cnVjdG9yUmV0dXJuMiIsIl9pc05hdGl2ZVJlZmxlY3RDb25zdHJ1Y3QiLCJSZWZsZWN0IiwiY29uc3RydWN0IiwiY29uc3RydWN0b3IiLCJhcHBseSIsIkJvb2xlYW4iLCJwcm90b3R5cGUiLCJ2YWx1ZU9mIiwiY2FsbCIsImJ1aWxkTGF5b3V0RnJvbU1hcmt1cCIsImV4cG9ydHMiLCJtYXJrdXAiLCJ0eXBlIiwiX2NvbXBvbmVudGl6ZSIsImNvbXBvbmVudGl6ZSIsInByb2Nlc3NlZCIsInZhbHVlIiwiZGVzZXJpYWxpemUiLCJkb2N1bWVudCIsIndpdGhNYXNrIiwicmVuZGVyQ2hpbGRyZW4iLCJfV2l0aE1hc2siLCJfUmVhY3QkQ29tcG9uZW50IiwiV2l0aE1hc2siLCJwcm9wcyIsIl90aGlzIiwiX2NsYXNzQ2FsbENoZWNrMiIsImNvbnRhaW5lclJlZiIsIlJlYWN0IiwiY3JlYXRlUmVmIiwiX2luaGVyaXRzMiIsIl9jcmVhdGVDbGFzczIiLCJrZXkiLCJjb21wb25lbnREaWRVcGRhdGUiLCJwcmV2UHJvcHMiLCJkb21Ob2RlIiwiY3VycmVudCIsIm1hdGhFbGVtZW50cyIsInF1ZXJ5U2VsZWN0b3JBbGwiLCJmb3JFYWNoIiwiZWwiLCJtanhDb250YWluZXIiLCJxdWVyeVNlbGVjdG9yIiwicmVtb3ZlQ2hpbGQiLCJsYXRleENvZGUiLCJnZXRBdHRyaWJ1dGUiLCJpbm5lckhUTUwiLCJyZW1vdmVBdHRyaWJ1dGUiLCJyZW5kZXIiLCJfdGhpcyRwcm9wcyIsImxheW91dCIsIm9uQ2hhbmdlIiwiZWxlbWVudFR5cGUiLCJtYXNrTGF5b3V0IiwiY3JlYXRlRWxlbWVudCIsIkNvbXBvbmVudCIsIl9kZWZpbmVQcm9wZXJ0eTIiLCJQcm9wVHlwZXMiLCJzdHJpbmciLCJvYmplY3QiLCJmdW5jIiwiY3VzdG9tTWFya01hcmt1cENvbXBvbmVudCJdLCJzb3VyY2VzIjpbIi4uL3NyYy93aXRoLW1hc2suanN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IE1hc2sgZnJvbSAnLi9tYXNrJztcbmltcG9ydCBjb21wb25lbnRpemUgZnJvbSAnLi9jb21wb25lbnRpemUnO1xuaW1wb3J0IHsgZGVzZXJpYWxpemUgfSBmcm9tICcuL3NlcmlhbGl6YXRpb24nO1xuXG5leHBvcnQgY29uc3QgYnVpbGRMYXlvdXRGcm9tTWFya3VwID0gKG1hcmt1cCwgdHlwZSkgPT4ge1xuICBjb25zdCB7IG1hcmt1cDogcHJvY2Vzc2VkIH0gPSBjb21wb25lbnRpemUobWFya3VwLCB0eXBlKTtcbiAgY29uc3QgdmFsdWUgPSBkZXNlcmlhbGl6ZShwcm9jZXNzZWQpO1xuICByZXR1cm4gdmFsdWUuZG9jdW1lbnQ7XG59O1xuXG5leHBvcnQgY29uc3Qgd2l0aE1hc2sgPSAodHlwZSwgcmVuZGVyQ2hpbGRyZW4pID0+IHtcbiAgcmV0dXJuIGNsYXNzIFdpdGhNYXNrIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcbiAgICBzdGF0aWMgcHJvcFR5cGVzID0ge1xuICAgICAgLyoqXG4gICAgICAgKiBBdCB0aGUgc3RhcnQgd2UnbGwgcHJvYmFibHkgd29yayB3aXRoIG1hcmt1cFxuICAgICAgICovXG4gICAgICBtYXJrdXA6IFByb3BUeXBlcy5zdHJpbmcsXG4gICAgICAvKipcbiAgICAgICAqIE9uY2Ugd2Ugc3RhcnQgYXV0aG9yaW5nLCBpdCBtYXkgbWFrZSBzZW5zZSBmb3IgdXNlIHRvIHVzIGxheW91dCwgd2hpY2ggd2lsbCBiZSBhIHNpbXBsZSBqcyBvYmplY3QgdGhhdCBtYXBzIHRvIGBzbGF0ZS5WYWx1ZWAuXG4gICAgICAgKi9cbiAgICAgIGxheW91dDogUHJvcFR5cGVzLm9iamVjdCxcbiAgICAgIHZhbHVlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAgICAgb25DaGFuZ2U6IFByb3BUeXBlcy5mdW5jLFxuICAgICAgY3VzdG9tTWFya01hcmt1cENvbXBvbmVudDogUHJvcFR5cGVzLmZ1bmMsXG4gICAgICBlbGVtZW50VHlwZTogUHJvcFR5cGVzLnN0cmluZyxcbiAgICB9O1xuXG4gICAgY29uc3RydWN0b3IocHJvcHMpIHtcbiAgICAgIHN1cGVyKHByb3BzKTtcbiAgICAgIHRoaXMuY29udGFpbmVyUmVmID0gUmVhY3QuY3JlYXRlUmVmKCk7XG4gICAgfVxuXG4gICAgY29tcG9uZW50RGlkVXBkYXRlKHByZXZQcm9wcykge1xuICAgICAgaWYgKHRoaXMucHJvcHMubWFya3VwICE9PSBwcmV2UHJvcHMubWFya3VwKSB7XG4gICAgICAgIGNvbnN0IGRvbU5vZGUgPSB0aGlzLmNvbnRhaW5lclJlZi5jdXJyZW50O1xuICAgICAgICBjb25zdCBtYXRoRWxlbWVudHMgPSBkb21Ob2RlICYmIGRvbU5vZGUucXVlcnlTZWxlY3RvckFsbCgnW2RhdGEtbGF0ZXhdW2RhdGEtbWF0aC1oYW5kbGVkPVwidHJ1ZVwiXScpO1xuXG4gICAgICAgIC8vIENsZWFuIHVwIGZvciBmcmVzaCBNYXRoSmF4IHByb2Nlc3NpbmdcbiAgICAgICAgKG1hdGhFbGVtZW50cyB8fCBbXSkuZm9yRWFjaCgoZWwpID0+IHtcbiAgICAgICAgICAvLyBSZW1vdmUgdGhlIE1hdGhKYXggY29udGFpbmVyIHRvIGFsbG93IGZvciBjbGVhbiB1cGRhdGVzXG4gICAgICAgICAgY29uc3QgbWp4Q29udGFpbmVyID0gZWwucXVlcnlTZWxlY3RvcignbWp4LWNvbnRhaW5lcicpO1xuXG4gICAgICAgICAgaWYgKG1qeENvbnRhaW5lcikge1xuICAgICAgICAgICAgZWwucmVtb3ZlQ2hpbGQobWp4Q29udGFpbmVyKTtcbiAgICAgICAgICB9XG5cbiAgICAgICAgICAvLyBVcGRhdGUgdGhlIGlubmVySFRNTCB0byBtYXRjaCB0aGUgcmF3IExhVGVYIGRhdGEsIGVuc3VyaW5nIGl0IGlzIHJlcHJvY2Vzc2VkIGNvcnJlY3RseVxuICAgICAgICAgIGNvbnN0IGxhdGV4Q29kZSA9IGVsLmdldEF0dHJpYnV0ZSgnZGF0YS1yYXcnKTtcbiAgICAgICAgICBlbC5pbm5lckhUTUwgPSBsYXRleENvZGU7XG5cbiAgICAgICAgICAvLyBSZW1vdmUgdGhlIGF0dHJpYnV0ZSB0byBzaWduYWwgdGhhdCBNYXRoSmF4IHNob3VsZCByZXByb2Nlc3MgdGhpcyBlbGVtZW50XG4gICAgICAgICAgZWwucmVtb3ZlQXR0cmlidXRlKCdkYXRhLW1hdGgtaGFuZGxlZCcpO1xuICAgICAgICB9KTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICByZW5kZXIoKSB7XG4gICAgICBjb25zdCB7IG1hcmt1cCwgbGF5b3V0LCB2YWx1ZSwgb25DaGFuZ2UsIGVsZW1lbnRUeXBlIH0gPSB0aGlzLnByb3BzO1xuXG4gICAgICBjb25zdCBtYXNrTGF5b3V0ID0gbGF5b3V0ID8gbGF5b3V0IDogYnVpbGRMYXlvdXRGcm9tTWFya3VwKG1hcmt1cCwgdHlwZSk7XG4gICAgICByZXR1cm4gKFxuICAgICAgICA8TWFza1xuICAgICAgICAgIGNvbnRhaW5lclJlZj17dGhpcy5jb250YWluZXJSZWZ9XG4gICAgICAgICAgZWxlbWVudFR5cGU9e2VsZW1lbnRUeXBlfVxuICAgICAgICAgIGxheW91dD17bWFza0xheW91dH1cbiAgICAgICAgICB2YWx1ZT17dmFsdWV9XG4gICAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlfVxuICAgICAgICAgIHJlbmRlckNoaWxkcmVuPXtyZW5kZXJDaGlsZHJlbih0aGlzLnByb3BzKX1cbiAgICAgICAgLz5cbiAgICAgICk7XG4gICAgfVxuICB9O1xufTtcbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsSUFBQUEsTUFBQSxHQUFBQyxzQkFB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
+//# sourceMappingURL=with-mask.js.map

package/lib/with-mask.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-mask.js","names":["_react","_interopRequireDefault","require","_propTypes","_mask","_componentize2","_serialization","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","buildLayoutFromMarkup","exports","markup","type","_componentize","componentize","processed","value","deserialize","document","withMask","renderChildren","_WithMask","_React$Component","WithMask","props","_this","_classCallCheck2","containerRef","React","createRef","_inherits2","_createClass2","key","componentDidUpdate","prevProps","domNode","current","mathElements","querySelectorAll","forEach","el","mjxContainer","querySelector","removeChild","latexCode","getAttribute","innerHTML","removeAttribute","render","_this$props","layout","onChange","elementType","maskLayout","createElement","Component","_defineProperty2","PropTypes","string","object","func","customMarkMarkupComponent"],"sources":["../src/with-mask.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Mask from './mask';\nimport componentize from './componentize';\nimport { deserialize } from './serialization';\n\nexport const buildLayoutFromMarkup = (markup, type) => {\n  const { markup: processed } = componentize(markup, type);\n  const value = deserialize(processed);\n  return value.document;\n};\n\nexport const withMask = (type, renderChildren) => {\n  return class WithMask extends React.Component {\n    static propTypes = {\n      /**\n       * At the start we'll probably work with markup\n       */\n      markup: PropTypes.string,\n      /**\n       * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.\n       */\n      layout: PropTypes.object,\n      value: PropTypes.object,\n      onChange: PropTypes.func,\n      customMarkMarkupComponent: PropTypes.func,\n      elementType: PropTypes.string,\n    };\n\n    constructor(props) {\n      super(props);\n      this.containerRef = React.createRef();\n    }\n\n    componentDidUpdate(prevProps) {\n      if (this.props.markup !== prevProps.markup) {\n        const domNode = this.containerRef.current;\n        const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled=\"true\"]');\n\n        // Clean up for fresh MathJax processing\n        (mathElements || []).forEach((el) => {\n          // Remove the MathJax container to allow for clean updates\n          const mjxContainer = el.querySelector('mjx-container');\n\n          if (mjxContainer) {\n            el.removeChild(mjxContainer);\n          }\n\n          // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly\n          const latexCode = el.getAttribute('data-raw');\n          el.innerHTML = latexCode;\n\n          // Remove the attribute to signal that MathJax should reprocess this element\n          el.removeAttribute('data-math-handled');\n        });\n      }\n    }\n\n    render() {\n      const { markup, layout, value, onChange, elementType } = this.props;\n\n      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);\n      return (\n        <Mask\n          containerRef={this.containerRef}\n          elementType={elementType}\n          layout={maskLayout}\n          value={value}\n          onChange={onChange}\n          renderChildren={renderChildren(this.props)}\n        />\n      );\n    }\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"with-mask.js","names":["_react","_interopRequireDefault","require","_propTypes","_mask","_componentize2","_serialization","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","buildLayoutFromMarkup","exports","markup","type","_componentize","componentize","processed","value","deserialize","document","withMask","renderChildren","_WithMask","_React$Component","WithMask","props","_this","_classCallCheck2","containerRef","React","createRef","_inherits2","_createClass2","key","componentDidUpdate","prevProps","domNode","current","mathElements","querySelectorAll","forEach","el","mjxContainer","querySelector","removeChild","latexCode","getAttribute","innerHTML","removeAttribute","render","_this$props","layout","onChange","elementType","maskLayout","createElement","Component","_defineProperty2","PropTypes","string","object","func","customMarkMarkupComponent"],"sources":["../src/with-mask.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Mask from './mask';\nimport componentize from './componentize';\nimport { deserialize } from './serialization';\n\nexport const buildLayoutFromMarkup = (markup, type) => {\n  const { markup: processed } = componentize(markup, type);\n  const value = deserialize(processed);\n  return value.document;\n};\n\nexport const withMask = (type, renderChildren) => {\n  return class WithMask extends React.Component {\n    static propTypes = {\n      /**\n       * At the start we'll probably work with markup\n       */\n      markup: PropTypes.string,\n      /**\n       * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.\n       */\n      layout: PropTypes.object,\n      value: PropTypes.object,\n      onChange: PropTypes.func,\n      customMarkMarkupComponent: PropTypes.func,\n      elementType: PropTypes.string,\n    };\n\n    constructor(props) {\n      super(props);\n      this.containerRef = React.createRef();\n    }\n\n    componentDidUpdate(prevProps) {\n      if (this.props.markup !== prevProps.markup) {\n        const domNode = this.containerRef.current;\n        const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled=\"true\"]');\n\n        // Clean up for fresh MathJax processing\n        (mathElements || []).forEach((el) => {\n          // Remove the MathJax container to allow for clean updates\n          const mjxContainer = el.querySelector('mjx-container');\n\n          if (mjxContainer) {\n            el.removeChild(mjxContainer);\n          }\n\n          // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly\n          const latexCode = el.getAttribute('data-raw');\n          el.innerHTML = latexCode;\n\n          // Remove the attribute to signal that MathJax should reprocess this element\n          el.removeAttribute('data-math-handled');\n        });\n      }\n    }\n\n    render() {\n      const { markup, layout, value, onChange, elementType } = this.props;\n\n      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);\n      return (\n        <Mask\n          containerRef={this.containerRef}\n          elementType={elementType}\n          layout={maskLayout}\n          value={value}\n          onChange={onChange}\n          renderChildren={renderChildren(this.props)}\n        />\n      );\n    }\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "2.1.1-next.2",
+  "version": "2.1.1-next.4",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -12,13 +12,13 @@
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "^3.1.1-next.0",
-    "@pie-lib/editable-html-tip-tap": "^1.1.1-next.2",
-    "@pie-lib/math-rendering": "^4.1.1-next.0",
-    "@pie-lib/render-ui": "^5.1.1-next.0",
+    "@pie-lib/drag": "^3.1.1-next.1",
+    "@pie-lib/editable-html-tip-tap": "^1.1.1-next.4",
+    "@pie-lib/math-rendering": "^4.1.1-next.1",
+    "@pie-lib/render-ui": "^5.1.1-next.1",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
-    "lodash": "^4.17.23",
+    "lodash-es": "^4.17.23",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -27,5 +27,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "7bb08145106e65c83a8f4a51902cf669d1be19ac"
+  "gitHead": "433bcb776c2975739e7417f133d31cd996164116"
 }

package/src/__tests__/drag-in-the-blank.test.js

@@ -103,7 +103,7 @@ describe('DragInTheBlank', () => {
               correct: 'Spoon',
             },
           }}
-        />
+        />,
       );
       expect(container.firstChild).toBeInTheDocument();
     });

package/src/__tests__/index.test.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import componentize from '../componentize';
 import { deserialize } from '../serialization';
 

package/src/choices/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import findKey from 'lodash/findKey';
+import { findKey } from 'lodash-es';
 import Choice from './choice';
 import { DragDroppablePlaceholder } from '@pie-lib/drag';
 
@@ -55,12 +55,7 @@ export default class Choices extends React.Component {
       <div style={elementStyle}>
         <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>
           {filteredChoices.map((c, index) => (
-            <Choice 
-              key={`${c.value}-${index}`} 
-              disabled={disabled} 
-              choice={c} 
-              instanceId={instanceId}
-            />
+            <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} instanceId={instanceId} />
           ))}
         </DragDroppablePlaceholder>
       </div>

package/src/components/__tests__/blank.test.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import Blank from '../blank';
 
 // Mock @dnd-kit hooks to avoid DndContext requirement

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

@@ -68,7 +68,7 @@ describe('Dropdown', () => {
 
       // Find the option by getting all options and selecting the one with "Laughed" text
       const options = screen.getAllByRole('option');
-      const laughedOption = options.find(opt => opt.textContent.includes('Laughed'));
+      const laughedOption = options.find((opt) => opt.textContent.includes('Laughed'));
       await user.click(laughedOption);
 
       expect(onChange).toHaveBeenCalledWith('1', 'Laughed');
@@ -84,7 +84,7 @@ describe('Dropdown', () => {
 
       // Find the option by getting all options and selecting the one with "Smiled" text
       const options = screen.getAllByRole('option');
-      const smiledOption = options.find(opt => opt.textContent.includes('Smiled'));
+      const smiledOption = options.find((opt) => opt.textContent.includes('Smiled'));
       await user.click(smiledOption);
 
       expect(onChange).toHaveBeenCalledWith('1', 'Smiled');

package/src/components/blank.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { renderMath } from '@pie-lib/math-rendering';
 import debug from 'debug';
@@ -87,6 +87,8 @@ const StyledChipLabel = styled('span')(() => ({
     position: 'absolute',
     left: 16,
     maxWidth: '60px',
+    top: '50%',
+    transform: 'translateY(-50%)',
   },
 }));
 
@@ -296,7 +298,11 @@ function DragDropBlank({
   });
 
   // Setup droppable functionality
-  const { setNodeRef: setDropNodeRef, isOver, active: dragItem } = useDroppable({
+  const {
+    setNodeRef: setDropNodeRef,
+    isOver,
+    active: dragItem,
+  } = useDroppable({
     id: `mask-blank-drop-${id}`,
     data: {
       id: id,

package/src/components/correct-input.jsx

@@ -46,16 +46,7 @@ const StyledOutlinedInput = styled(OutlinedInput)(() => ({
 }));
 
 const CorrectInput = (props) => {
-  const {
-    correct,
-    charactersLimit,
-    disabled,
-    isBox,
-    isConstructedResponse,
-    width,
-    spellCheck,
-    ...rest
-  } = props;
+  const { correct, charactersLimit, disabled, isBox, isConstructedResponse, width, spellCheck, ...rest } = props;
 
   const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;
   const inputProps = charactersLimit
@@ -89,4 +80,3 @@ const CorrectInput = (props) => {
 };
 
 export default CorrectInput;
-

package/src/components/dropdown.jsx

@@ -70,9 +70,19 @@ const StyledMenu = styled(Menu)(() => ({
 }));
 
 const StyledMenuItem = styled(MenuItem)(() => ({
+  // base text/layout styles (from old JSS - before mui v5 migration)
+  height: 24,
+  overflow: 'hidden',
+  fontSize: '1rem',
+  fontWeight: 400,
+  fontFamily: 'inherit',
+  lineHeight: '1.5em',
+  whiteSpace: 'nowrap',
+
+  // custom styles
   color: color.text(),
   backgroundColor: color.background(),
-  '&.Mui-focused': {
+  '&.Mui-focusVisible': {
     outline: `3px solid ${color.tertiary()}`,
     outlineOffset: '-1px', // keeps it inside the item
     color: color.text(),
@@ -309,11 +319,7 @@ class Dropdown extends React.Component {
           aria-hidden="true"
         >
           {(choices || []).map((c, index) => (
-            <StyledMenuItem
-              key={index}
-              tabIndex={-1}
-              aria-hidden="true"
-            >
+            <StyledMenuItem key={index} tabIndex={-1} aria-hidden="true">
               <StyledLabel dangerouslySetInnerHTML={{ __html: c.label }} />
             </StyledMenuItem>
           ))}
@@ -348,8 +354,8 @@ class Dropdown extends React.Component {
               __html: correctValue
                 ? correctValue
                 : open && this.state.previewValue
-                ? this.getLabel(choices, this.state.previewValue)
-                : this.getLabel(choices, value) || '',
+                  ? this.getLabel(choices, this.state.previewValue)
+                  : this.getLabel(choices, value) || '',
             }}
           />
           {open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
@@ -391,9 +397,7 @@ class Dropdown extends React.Component {
                   ref={(ref) => (this.elementRefs[index] = ref)}
                   dangerouslySetInnerHTML={{ __html: c.label }}
                 />
-                <StyledSelectedIndicator
-                  dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }}
-                />
+                <StyledSelectedIndicator dangerouslySetInnerHTML={{ __html: c.value === value ? ' &check;' : '' }} />
               </StyledMenuItem>
             );
           })}

package/src/constructed-response.jsx

@@ -67,7 +67,7 @@ const MaskedInput = (props) => (node, data) => {
         pluginProps={pluginProps}
         languageCharactersProps={[{ language: 'spanish' }]}
         spellCheck={spellCheck}
-        width={`calc(${width}em + 32px)`} // added 32px for left and right padding of editable-html
+        adjustWidthForLimit
         onKeyDown={handleKeyDown}
         autoWidthToolbar
         toolbarOpts={{

package/src/customizable.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 // import Input from './components/input';
 import { withMask } from './with-mask';
 

package/src/drag-in-the-blank.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DragProvider } from '@pie-lib/drag';
-import { DragOverlay, closestCenter } from '@dnd-kit/core';
-
+import { DragOverlay, rectIntersection } from '@dnd-kit/core';
 import Choices from './choices';
 import Choice from './choices/choice';
 import Blank from './components/blank';
@@ -200,7 +199,7 @@ export default class DragInTheBlank extends React.Component {
       <DragProvider
         onDragStart={this.handleDragStart}
         onDragEnd={this.handleDragEnd}
-        collisionDetection={closestCenter}
+        collisionDetection={rectIntersection}
       >
         <div ref={(ref) => (this.rootRef = ref)} style={style}>
           <Choices

package/src/index.js

@@ -1,4 +1,4 @@
-import { withMask, buildLayoutFromMarkup } from './with-mask';
+import { buildLayoutFromMarkup, withMask } from './with-mask';
 import DragInTheBlank from './drag-in-the-blank';
 import ConstructedResponse from './constructed-response';
 import Customizable from './customizable';

package/src/mask.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import get from 'lodash/get';
+import { get } from 'lodash-es';
 import { styled } from '@mui/material/styles';
 import { renderMath } from '@pie-lib/math-rendering';
 import { MARK_TAGS } from './serialization';
 
 const Paragraph = styled('div')(({ theme }) => ({
-  paddingTop: theme.spacing(2),
-  paddingBottom: theme.spacing(2),
+  paddingTop: theme.spacing(0.5),
+  paddingBottom: theme.spacing(0.5),
 }));
 
 const Spacer = styled('span')(() => ({
@@ -134,7 +134,7 @@ const MaskContainer = styled('div')(() => ({
 export default class Mask extends React.Component {
   constructor(props) {
     super(props);
-       this.internalContainerRef = React.createRef();
+    this.internalContainerRef = React.createRef();
   }
 
   static propTypes = {
@@ -143,10 +143,7 @@ export default class Mask extends React.Component {
     value: PropTypes.object,
     onChange: PropTypes.func,
     elementType: PropTypes.string,
-    containerRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-    ]),
+    containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]),
   };
 
   componentDidMount() {