@pie-lib/math-input-mathlive 1.0.9-next.6637 → 1.0.10

package/lib/__tests__/mount-race.test.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _input = _interopRequireDefault(require("../mf/input"));
+/**
+ * MathLive loads asynchronously, so `componentDidMount` resumes after an await
+ * before appending a <math-field>. Two orderings must both hold:
+ *
+ *  - StrictMode dev double-mount (mount -> unmount -> mount on the SAME
+ *    instance) must end up with exactly ONE field. A boolean "unmounted" flag
+ *    latches here and blocks the remount entirely - which is why this uses a
+ *    generation counter.
+ *  - A genuine unmount while the load is in flight must append nothing.
+ *
+ * MathLive cannot load under jsdom, so it is mocked with a minimal stub in
+ * order to actually count appended fields.
+ */
+jest.mock('../mathlive-instance', function () {
+  // Must be a real DOM node: the component uses replaceChildren(), which
+  // rejects anything that is not a Node. Returning an element from the
+  // constructor replaces `this`, so callers get a genuine <math-field>.
+  var FakeMathfieldElement = /*#__PURE__*/(0, _createClass2["default"])(function FakeMathfieldElement() {
+    (0, _classCallCheck2["default"])(this, FakeMathfieldElement);
+    // `global` rather than `document`: jest forbids out-of-scope variables in
+    // a mock factory, and `global` is on its allow-list.
+    var el = global.document.createElement('math-field');
+    el.value = '';
+    el.getValue = function () {
+      return el.value;
+    };
+    return el;
+  });
+  return {
+    loadMathLive: function loadMathLive() {
+      return Promise.resolve({
+        MathfieldElement: FakeMathfieldElement
+      });
+    },
+    getMacros: function getMacros() {
+      return {};
+    },
+    // must mirror the real export, otherwise the component sets `undefined`
+    MATH_MODE_SPACE: '\\ ',
+    applyShadowStyles: function applyShadowStyles() {},
+    latexToMarkup: function latexToMarkup(l) {
+      return "<span>".concat(l, "</span>");
+    }
+  };
+});
+
+// eslint-disable-next-line import/first
+
+var holderFor = function holderFor(cmp) {
+  var el = document.createElement('span');
+  cmp.holderRef = {
+    current: el
+  };
+  return el;
+};
+var fieldCount = function fieldCount(el) {
+  return Array.from(el.childNodes).filter(function (n) {
+    return n.tagName === 'MATH-FIELD';
+  }).length;
+};
+describe('async mount race', function () {
+  it('StrictMode mount -> unmount -> mount yields exactly one field', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var input, el, first, second;
+    return _regenerator["default"].wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          input = new _input["default"]({});
+          el = holderFor(input);
+          first = input.componentDidMount();
+          input.componentWillUnmount();
+          second = input.componentDidMount();
+          _context.next = 1;
+          return Promise.all([first, second]);
+        case 1:
+          expect(fieldCount(el)).toBe(1);
+          expect(input.mathField).toBeDefined();
+        case 2:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it('appends nothing when unmounted while the load is in flight', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var input, el, pending;
+    return _regenerator["default"].wrap(function (_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          input = new _input["default"]({});
+          el = holderFor(input);
+          pending = input.componentDidMount();
+          input.componentWillUnmount();
+          _context2.next = 1;
+          return pending;
+        case 1:
+          expect(fieldCount(el)).toBe(0);
+          expect(input.mathField).toBeUndefined();
+        case 2:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it('a normal single mount creates the field', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var input, el;
+    return _regenerator["default"].wrap(function (_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          input = new _input["default"]({});
+          el = holderFor(input);
+          _context3.next = 1;
+          return input.componentDidMount();
+        case 1:
+          expect(fieldCount(el)).toBe(1);
+        case 2:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  it('repeated mounts never accumulate fields', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var input, el;
+    return _regenerator["default"].wrap(function (_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          input = new _input["default"]({});
+          el = holderFor(input);
+          _context4.next = 1;
+          return input.componentDidMount();
+        case 1:
+          _context4.next = 2;
+          return input.componentDidMount();
+        case 2:
+          _context4.next = 3;
+          return input.componentDidMount();
+        case 3:
+          expect(fieldCount(el)).toBe(1);
+        case 4:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+
+  // MathLive's mathModeSpace defaults to '', which makes the spacebar a no-op.
+  it('configures the spacebar so a space can be typed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var input;
+    return _regenerator["default"].wrap(function (_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          input = new _input["default"]({});
+          holderFor(input);
+          _context5.next = 1;
+          return input.componentDidMount();
+        case 1:
+          // a LaTeX control space - what MathQuill produced, and MathJax understands
+          expect(input.mathField.mathModeSpace).toEqual('\\ ');
+          expect(input.mathField.mathModeSpace).not.toEqual('');
+        case 2:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  it('reports itself through innerRef on mount and clears it on unmount', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var innerRef, input;
+    return _regenerator["default"].wrap(function (_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          innerRef = jest.fn();
+          input = new _input["default"]({
+            innerRef: innerRef
+          });
+          holderFor(input);
+          _context6.next = 1;
+          return input.componentDidMount();
+        case 1:
+          expect(innerRef).toHaveBeenCalledWith(input);
+          input.componentWillUnmount();
+          expect(innerRef).toHaveBeenLastCalledWith(null);
+        case 2:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
+});
+//# sourceMappingURL=mount-race.test.js.map

package/lib/__tests__/mount-race.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount-race.test.js","names":["_input","_interopRequireDefault","require","jest","mock","FakeMathfieldElement","_createClass2","_classCallCheck2","el","global","document","createElement","value","getValue","loadMathLive","Promise","resolve","MathfieldElement","getMacros","MATH_MODE_SPACE","applyShadowStyles","latexToMarkup","l","concat","holderFor","cmp","holderRef","current","fieldCount","Array","from","childNodes","filter","n","tagName","length","describe","it","_asyncToGenerator2","_regenerator","mark","_callee","input","first","second","wrap","_context","prev","next","Input","componentDidMount","componentWillUnmount","all","expect","toBe","mathField","toBeDefined","stop","_callee2","pending","_context2","toBeUndefined","_callee3","_context3","_callee4","_context4","_callee5","_context5","mathModeSpace","toEqual","not","_callee6","innerRef","_context6","fn","toHaveBeenCalledWith","toHaveBeenLastCalledWith"],"sources":["../../src/__tests__/mount-race.test.jsx"],"sourcesContent":["/**\n * MathLive loads asynchronously, so `componentDidMount` resumes after an await\n * before appending a <math-field>. Two orderings must both hold:\n *\n *  - StrictMode dev double-mount (mount -> unmount -> mount on the SAME\n *    instance) must end up with exactly ONE field. A boolean \"unmounted\" flag\n *    latches here and blocks the remount entirely - which is why this uses a\n *    generation counter.\n *  - A genuine unmount while the load is in flight must append nothing.\n *\n * MathLive cannot load under jsdom, so it is mocked with a minimal stub in\n * order to actually count appended fields.\n */\njest.mock('../mathlive-instance', () => {\n  // Must be a real DOM node: the component uses replaceChildren(), which\n  // rejects anything that is not a Node. Returning an element from the\n  // constructor replaces `this`, so callers get a genuine <math-field>.\n  class FakeMathfieldElement {\n    constructor() {\n      // `global` rather than `document`: jest forbids out-of-scope variables in\n      // a mock factory, and `global` is on its allow-list.\n      const el = global.document.createElement('math-field');\n\n      el.value = '';\n      el.getValue = () => el.value;\n\n      return el;\n    }\n  }\n\n  return {\n    loadMathLive: () => Promise.resolve({ MathfieldElement: FakeMathfieldElement }),\n    getMacros: () => ({}),\n    // must mirror the real export, otherwise the component sets `undefined`\n    MATH_MODE_SPACE: '\\\\ ',\n    applyShadowStyles: () => {},\n    latexToMarkup: (l) => `<span>${l}</span>`,\n  };\n});\n\n// eslint-disable-next-line import/first\nimport Input from '../mf/input';\n\nconst holderFor = (cmp) => {\n  const el = document.createElement('span');\n\n  cmp.holderRef = { current: el };\n\n  return el;\n};\n\nconst fieldCount = (el) => Array.from(el.childNodes).filter((n) => n.tagName === 'MATH-FIELD').length;\n\ndescribe('async mount race', () => {\n  it('StrictMode mount -> unmount -> mount yields exactly one field', async () => {\n    const input = new Input({});\n    const el = holderFor(input);\n\n    const first = input.componentDidMount();\n\n    input.componentWillUnmount();\n\n    const second = input.componentDidMount();\n\n    await Promise.all([first, second]);\n\n    expect(fieldCount(el)).toBe(1);\n    expect(input.mathField).toBeDefined();\n  });\n\n  it('appends nothing when unmounted while the load is in flight', async () => {\n    const input = new Input({});\n    const el = holderFor(input);\n\n    const pending = input.componentDidMount();\n\n    input.componentWillUnmount();\n\n    await pending;\n\n    expect(fieldCount(el)).toBe(0);\n    expect(input.mathField).toBeUndefined();\n  });\n\n  it('a normal single mount creates the field', async () => {\n    const input = new Input({});\n    const el = holderFor(input);\n\n    await input.componentDidMount();\n\n    expect(fieldCount(el)).toBe(1);\n  });\n\n  it('repeated mounts never accumulate fields', async () => {\n    const input = new Input({});\n    const el = holderFor(input);\n\n    await input.componentDidMount();\n    await input.componentDidMount();\n    await input.componentDidMount();\n\n    expect(fieldCount(el)).toBe(1);\n  });\n\n  // MathLive's mathModeSpace defaults to '', which makes the spacebar a no-op.\n  it('configures the spacebar so a space can be typed', async () => {\n    const input = new Input({});\n\n    holderFor(input);\n    await input.componentDidMount();\n\n    // a LaTeX control space - what MathQuill produced, and MathJax understands\n    expect(input.mathField.mathModeSpace).toEqual('\\\\ ');\n    expect(input.mathField.mathModeSpace).not.toEqual('');\n  });\n\n  it('reports itself through innerRef on mount and clears it on unmount', async () => {\n    const innerRef = jest.fn();\n    const input = new Input({ innerRef });\n\n    holderFor(input);\n    await input.componentDidMount();\n\n    expect(innerRef).toHaveBeenCalledWith(input);\n\n    input.componentWillUnmount();\n\n    expect(innerRef).toHaveBeenLastCalledWith(null);\n  });\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/__tests__/static-prompts.test.js

@@ -0,0 +1,282 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _static = _interopRequireDefault(require("../mf/static"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * The answer-block contract: `\MathQuillMathField[id]{}` in stored latex becomes
+ * a MathLive prompt, and sub-field values/focus are surfaced through the same
+ * callbacks @pie-lib/math-input exposed (`onSubFieldChange`, `onSubFieldFocus`,
+ * `getFieldName`, `setInput`).
+ *
+ * Driven against a stub mathfield: a real <math-field> needs a browser, and what
+ * matters here is the mapping, not MathLive's rendering.
+ */
+var stubField = function stubField() {
+  var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var selection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  return {
+    values: _objectSpread({}, values),
+    getPrompts: function getPrompts() {
+      return Object.keys(this.values);
+    },
+    getPromptValue: function getPromptValue(id) {
+      return this.values[id];
+    },
+    setPromptValue: function setPromptValue(id, v) {
+      this.values[id] = v;
+    },
+    getPromptRange: function getPromptRange(id) {
+      var i = Object.keys(this.values).indexOf(id);
+      return [i * 10, i * 10 + 5];
+    },
+    selection: selection,
+    addEventListener: function addEventListener() {},
+    removeEventListener: function removeEventListener() {},
+    focus: function focus() {
+      this.focused = true;
+    },
+    blur: function blur() {
+      this.blurred = true;
+    },
+    remove: function remove() {}
+  };
+};
+var make = function make() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return new _static["default"](_objectSpread({
+    latex: 'x=\\MathQuillMathField[r1]{}',
+    getFieldName: function getFieldName() {}
+  }, props));
+};
+describe('Static: answer blocks / prompts', function () {
+  describe('isInteractive', function () {
+    it('is interactive when the latex has answer blocks', function () {
+      expect(make({
+        latex: 'x=\\MathQuillMathField[r1]{}'
+      }).isInteractive()).toBe(true);
+      expect(make({
+        latex: 'x=\\placeholder[r1]{}'
+      }).isInteractive()).toBe(true);
+    });
+    it('is display-only for plain latex', function () {
+      expect(make({
+        latex: '\\frac{1}{2}'
+      }).isInteractive()).toBe(false);
+      expect(make({
+        latex: ''
+      }).isInteractive()).toBe(false);
+    });
+  });
+  describe('values', function () {
+    it('returns {} before the field exists', function () {
+      expect(make().values()).toEqual({});
+    });
+    it('maps each prompt id to its stored-form latex', function () {
+      var s = make();
+      s.mathField = stubField({
+        r1: '7',
+        r2: '\\placeholder{}'
+      });
+
+      // \placeholder must not leak into stored values
+      expect(s.values()).toEqual({
+        r1: '7',
+        r2: ''
+      });
+    });
+  });
+  describe('promptHandle / innerFields', function () {
+    it('exposes a MathQuill-field-like handle with get/set latex', function () {
+      var s = make();
+      s.mathField = stubField({
+        r1: '7'
+      });
+      var h = s.promptHandle('r1');
+      expect(h.id).toEqual('r1');
+      expect(h.latex()).toEqual('7');
+      h.latex('9');
+      expect(s.mathField.values.r1).toEqual('9');
+    });
+    it('handle latex() is safe with no field', function () {
+      expect(make().promptHandle('r1').latex()).toEqual('');
+    });
+    it('innerFields returns one handle per prompt', function () {
+      var s = make();
+      s.mathField = stubField({
+        r1: '1',
+        r2: '2'
+      });
+      expect(s.innerFields.map(function (f) {
+        return f.id;
+      })).toEqual(['r1', 'r2']);
+      expect(make().innerFields).toEqual([]);
+    });
+  });
+  describe('onSubFieldChange', function () {
+    it('fires only for prompts whose value changed', function () {
+      var onSubFieldChange = jest.fn();
+      var s = make({
+        onSubFieldChange: onSubFieldChange
+      });
+      s.mathField = stubField({
+        r1: '1',
+        r2: '2'
+      });
+      s.promptValues = {
+        r1: '1',
+        r2: '2'
+      };
+      s.mathField.values.r2 = '5';
+      s.onPromptInput();
+      expect(onSubFieldChange).toHaveBeenCalledTimes(1);
+      expect(onSubFieldChange).toHaveBeenCalledWith('r2', '5');
+    });
+    it('uses getFieldName when it returns a name', function () {
+      var onSubFieldChange = jest.fn();
+      var s = make({
+        onSubFieldChange: onSubFieldChange,
+        getFieldName: function getFieldName(handle) {
+          return 'named-' + handle.id;
+        }
+      });
+      s.mathField = stubField({
+        r1: '1'
+      });
+      s.promptValues = {};
+      s.onPromptInput();
+      expect(onSubFieldChange).toHaveBeenCalledWith('named-r1', '1');
+    });
+    it('still tracks values when no callback is supplied', function () {
+      var s = make();
+      s.mathField = stubField({
+        r1: '3'
+      });
+      s.onPromptInput();
+      expect(s.promptValues).toEqual({
+        r1: '3'
+      });
+    });
+  });
+  describe('onSubFieldFocus', function () {
+    it('reports the prompt containing the selection, plus setInput', function () {
+      var onSubFieldFocus = jest.fn();
+      var setInput = jest.fn();
+      var s = make({
+        onSubFieldFocus: onSubFieldFocus,
+        setInput: setInput
+      });
+
+      // r2 occupies offsets 10..15
+      s.mathField = stubField({
+        r1: '',
+        r2: ''
+      }, {
+        ranges: [[11, 11]]
+      });
+      s.onPromptFocus();
+      expect(onSubFieldFocus).toHaveBeenCalledTimes(1);
+      expect(onSubFieldFocus.mock.calls[0][0]).toEqual('r2');
+      expect(onSubFieldFocus.mock.calls[0][1].id).toEqual('r2');
+      expect(setInput).toHaveBeenCalled();
+    });
+    it('does nothing without a selection', function () {
+      var onSubFieldFocus = jest.fn();
+      var s = make({
+        onSubFieldFocus: onSubFieldFocus
+      });
+      s.mathField = stubField({
+        r1: ''
+      }, null);
+      s.onPromptFocus();
+      expect(onSubFieldFocus).not.toHaveBeenCalled();
+    });
+    it('does not throw when the field is missing', function () {
+      var s = make({
+        onSubFieldFocus: jest.fn()
+      });
+      expect(function () {
+        return s.onPromptFocus();
+      }).not.toThrow();
+    });
+  });
+  describe('accessibility announcements', function () {
+    afterEach(function () {
+      document.body.innerHTML = '';
+    });
+    it('creates a polite off-screen live region', function () {
+      var s = make();
+      s.createLiveRegion();
+      expect(s.liveRegion.getAttribute('aria-live')).toEqual('polite');
+      expect(s.liveRegion.getAttribute('aria-atomic')).toEqual('true');
+      expect(document.body.contains(s.liveRegion)).toBe(true);
+      s.removeLiveRegion();
+      expect(s.liveRegion).toBeUndefined();
+    });
+    it('does not create a second region', function () {
+      var s = make();
+      s.createLiveRegion();
+      var first = s.liveRegion;
+      s.createLiveRegion();
+      expect(s.liveRegion).toBe(first);
+      s.removeLiveRegion();
+    });
+    it('announces when typed input expands into a command', function () {
+      var s = make();
+      s.createLiveRegion();
+      s.promptValues = {
+        r1: 'x'
+      };
+      // grew by more than one char AND gained a backslash => a conversion
+      s.announceConversion({
+        r1: 'x\\frac{}{}'
+      });
+      expect(s.liveRegion.textContent).toEqual('Converted to math symbol');
+      s.removeLiveRegion();
+    });
+    it('does not announce ordinary typing', function () {
+      var s = make();
+      s.createLiveRegion();
+      s.promptValues = {
+        r1: 'x'
+      };
+      s.announceConversion({
+        r1: 'xy'
+      });
+      expect(s.liveRegion.textContent).toEqual('');
+      s.removeLiveRegion();
+    });
+    it('does not announce a deletion', function () {
+      var s = make();
+      s.createLiveRegion();
+      s.promptValues = {
+        r1: 'x\\frac{}{}'
+      };
+      s.onKeyDown({
+        key: 'Backspace'
+      });
+      s.announceConversion({
+        r1: 'x'
+      });
+      expect(s.liveRegion.textContent).toEqual('');
+      s.removeLiveRegion();
+    });
+  });
+  describe('focus / blur', function () {
+    it('delegates to the field and is safe without one', function () {
+      var s = make();
+      expect(function () {
+        s.focus();
+        s.blur();
+      }).not.toThrow();
+      s.mathField = stubField();
+      s.focus();
+      s.blur();
+      expect(s.mathField.focused).toBe(true);
+      expect(s.mathField.blurred).toBe(true);
+    });
+  });
+});
+//# sourceMappingURL=static-prompts.test.js.map

package/lib/__tests__/static-prompts.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-prompts.test.js","names":["_static","_interopRequireDefault","require","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","stubField","values","undefined","selection","getPrompts","getPromptValue","id","setPromptValue","v","getPromptRange","i","indexOf","addEventListener","removeEventListener","focus","focused","blur","blurred","remove","make","props","Static","latex","getFieldName","describe","it","expect","isInteractive","toBe","toEqual","s","mathField","r1","r2","h","promptHandle","innerFields","map","f","onSubFieldChange","jest","fn","promptValues","onPromptInput","toHaveBeenCalledTimes","toHaveBeenCalledWith","handle","onSubFieldFocus","setInput","ranges","onPromptFocus","mock","calls","toHaveBeenCalled","not","toThrow","afterEach","document","body","innerHTML","createLiveRegion","liveRegion","getAttribute","contains","removeLiveRegion","toBeUndefined","first","announceConversion","textContent","onKeyDown","key"],"sources":["../../src/__tests__/static-prompts.test.jsx"],"sourcesContent":["import Static from '../mf/static';\n\n/**\n * The answer-block contract: `\\MathQuillMathField[id]{}` in stored latex becomes\n * a MathLive prompt, and sub-field values/focus are surfaced through the same\n * callbacks @pie-lib/math-input exposed (`onSubFieldChange`, `onSubFieldFocus`,\n * `getFieldName`, `setInput`).\n *\n * Driven against a stub mathfield: a real <math-field> needs a browser, and what\n * matters here is the mapping, not MathLive's rendering.\n */\nconst stubField = (values = {}, selection = null) => ({\n  values: { ...values },\n  getPrompts() {\n    return Object.keys(this.values);\n  },\n  getPromptValue(id) {\n    return this.values[id];\n  },\n  setPromptValue(id, v) {\n    this.values[id] = v;\n  },\n  getPromptRange(id) {\n    const i = Object.keys(this.values).indexOf(id);\n\n    return [i * 10, i * 10 + 5];\n  },\n  selection,\n  addEventListener() {},\n  removeEventListener() {},\n  focus() {\n    this.focused = true;\n  },\n  blur() {\n    this.blurred = true;\n  },\n  remove() {},\n});\n\nconst make = (props = {}) => new Static({ latex: 'x=\\\\MathQuillMathField[r1]{}', getFieldName: () => {}, ...props });\n\ndescribe('Static: answer blocks / prompts', () => {\n  describe('isInteractive', () => {\n    it('is interactive when the latex has answer blocks', () => {\n      expect(make({ latex: 'x=\\\\MathQuillMathField[r1]{}' }).isInteractive()).toBe(true);\n      expect(make({ latex: 'x=\\\\placeholder[r1]{}' }).isInteractive()).toBe(true);\n    });\n\n    it('is display-only for plain latex', () => {\n      expect(make({ latex: '\\\\frac{1}{2}' }).isInteractive()).toBe(false);\n      expect(make({ latex: '' }).isInteractive()).toBe(false);\n    });\n  });\n\n  describe('values', () => {\n    it('returns {} before the field exists', () => {\n      expect(make().values()).toEqual({});\n    });\n\n    it('maps each prompt id to its stored-form latex', () => {\n      const s = make();\n\n      s.mathField = stubField({ r1: '7', r2: '\\\\placeholder{}' });\n\n      // \\placeholder must not leak into stored values\n      expect(s.values()).toEqual({ r1: '7', r2: '' });\n    });\n  });\n\n  describe('promptHandle / innerFields', () => {\n    it('exposes a MathQuill-field-like handle with get/set latex', () => {\n      const s = make();\n\n      s.mathField = stubField({ r1: '7' });\n\n      const h = s.promptHandle('r1');\n\n      expect(h.id).toEqual('r1');\n      expect(h.latex()).toEqual('7');\n\n      h.latex('9');\n      expect(s.mathField.values.r1).toEqual('9');\n    });\n\n    it('handle latex() is safe with no field', () => {\n      expect(make().promptHandle('r1').latex()).toEqual('');\n    });\n\n    it('innerFields returns one handle per prompt', () => {\n      const s = make();\n\n      s.mathField = stubField({ r1: '1', r2: '2' });\n\n      expect(s.innerFields.map((f) => f.id)).toEqual(['r1', 'r2']);\n      expect(make().innerFields).toEqual([]);\n    });\n  });\n\n  describe('onSubFieldChange', () => {\n    it('fires only for prompts whose value changed', () => {\n      const onSubFieldChange = jest.fn();\n      const s = make({ onSubFieldChange });\n\n      s.mathField = stubField({ r1: '1', r2: '2' });\n      s.promptValues = { r1: '1', r2: '2' };\n\n      s.mathField.values.r2 = '5';\n      s.onPromptInput();\n\n      expect(onSubFieldChange).toHaveBeenCalledTimes(1);\n      expect(onSubFieldChange).toHaveBeenCalledWith('r2', '5');\n    });\n\n    it('uses getFieldName when it returns a name', () => {\n      const onSubFieldChange = jest.fn();\n      const s = make({ onSubFieldChange, getFieldName: (handle) => 'named-' + handle.id });\n\n      s.mathField = stubField({ r1: '1' });\n      s.promptValues = {};\n\n      s.onPromptInput();\n\n      expect(onSubFieldChange).toHaveBeenCalledWith('named-r1', '1');\n    });\n\n    it('still tracks values when no callback is supplied', () => {\n      const s = make();\n\n      s.mathField = stubField({ r1: '3' });\n      s.onPromptInput();\n\n      expect(s.promptValues).toEqual({ r1: '3' });\n    });\n  });\n\n  describe('onSubFieldFocus', () => {\n    it('reports the prompt containing the selection, plus setInput', () => {\n      const onSubFieldFocus = jest.fn();\n      const setInput = jest.fn();\n      const s = make({ onSubFieldFocus, setInput });\n\n      // r2 occupies offsets 10..15\n      s.mathField = stubField({ r1: '', r2: '' }, { ranges: [[11, 11]] });\n      s.onPromptFocus();\n\n      expect(onSubFieldFocus).toHaveBeenCalledTimes(1);\n      expect(onSubFieldFocus.mock.calls[0][0]).toEqual('r2');\n      expect(onSubFieldFocus.mock.calls[0][1].id).toEqual('r2');\n      expect(setInput).toHaveBeenCalled();\n    });\n\n    it('does nothing without a selection', () => {\n      const onSubFieldFocus = jest.fn();\n      const s = make({ onSubFieldFocus });\n\n      s.mathField = stubField({ r1: '' }, null);\n      s.onPromptFocus();\n\n      expect(onSubFieldFocus).not.toHaveBeenCalled();\n    });\n\n    it('does not throw when the field is missing', () => {\n      const s = make({ onSubFieldFocus: jest.fn() });\n\n      expect(() => s.onPromptFocus()).not.toThrow();\n    });\n  });\n\n  describe('accessibility announcements', () => {\n    afterEach(() => {\n      document.body.innerHTML = '';\n    });\n\n    it('creates a polite off-screen live region', () => {\n      const s = make();\n\n      s.createLiveRegion();\n\n      expect(s.liveRegion.getAttribute('aria-live')).toEqual('polite');\n      expect(s.liveRegion.getAttribute('aria-atomic')).toEqual('true');\n      expect(document.body.contains(s.liveRegion)).toBe(true);\n\n      s.removeLiveRegion();\n      expect(s.liveRegion).toBeUndefined();\n    });\n\n    it('does not create a second region', () => {\n      const s = make();\n\n      s.createLiveRegion();\n      const first = s.liveRegion;\n\n      s.createLiveRegion();\n      expect(s.liveRegion).toBe(first);\n      s.removeLiveRegion();\n    });\n\n    it('announces when typed input expands into a command', () => {\n      const s = make();\n\n      s.createLiveRegion();\n      s.promptValues = { r1: 'x' };\n      // grew by more than one char AND gained a backslash => a conversion\n      s.announceConversion({ r1: 'x\\\\frac{}{}' });\n\n      expect(s.liveRegion.textContent).toEqual('Converted to math symbol');\n      s.removeLiveRegion();\n    });\n\n    it('does not announce ordinary typing', () => {\n      const s = make();\n\n      s.createLiveRegion();\n      s.promptValues = { r1: 'x' };\n      s.announceConversion({ r1: 'xy' });\n\n      expect(s.liveRegion.textContent).toEqual('');\n      s.removeLiveRegion();\n    });\n\n    it('does not announce a deletion', () => {\n      const s = make();\n\n      s.createLiveRegion();\n      s.promptValues = { r1: 'x\\\\frac{}{}' };\n      s.onKeyDown({ key: 'Backspace' });\n      s.announceConversion({ r1: 'x' });\n\n      expect(s.liveRegion.textContent).toEqual('');\n      s.removeLiveRegion();\n    });\n  });\n\n  describe('focus / blur', () => {\n    it('delegates to the field and is safe without one', () => {\n      const s = make();\n\n      expect(() => {\n        s.focus();\n        s.blur();\n      }).not.toThrow();\n\n      s.mathField = stubField();\n      s.focus();\n      s.blur();\n\n      expect(s.mathField.focused).toBe(true);\n      expect(s.mathField.blurred).toBe(true);\n    });\n  });\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/keypad/index.js

@@ -49,22 +49,20 @@ var LabelHolder = (0, _styles.styled)('span')(function () {
     pointerEvents: 'none',
     textTransform: 'none',
     color: _renderUi.color.text(),
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+    // Deliberately inline-block, NOT inline-flex: MathLive's markup relies on
+    // normal inline flow. Making its spans flex items collapses their width, and
+    // stretchy accents render an <svg width="100%" preserveAspectRatio="none">
+    // that then squeezes into a spike instead of spanning the content.
+    display: 'inline-block',
+    textAlign: 'center',
     lineHeight: 1,
-    // Never let a label size its grid column. Stretchy accents
-    // (\overrightarrow, \overleftrightarrow, \overarc) render an <svg> that
-    // mathlive-static.css positions absolutely at width:100%; if that stylesheet
-    // is missing the svg lays out statically and expands without bound, dragging
-    // the whole column across the screen. `overflow: hidden` also collapses the
-    // label's min-content contribution, so the grid can't blow out either way.
+    // Keep a label from sizing its grid column. `overflow: hidden` also collapses
+    // the label's min-content contribution, so a wide accent cannot drag the
+    // column across the screen. The svg's own positioning is left to
+    // mathlive-static.css (injected by the package) - duplicating it here broke
+    // the accent's containing block.
     maxWidth: '100%',
     overflow: 'hidden',
-    '& svg': {
-      position: 'absolute',
-      width: '100%'
-    },
     // Answer-block / empty-slot boxes inside a label.
     '& .ML__placeholder': {
       backgroundColor: _renderUi.color.keypadEmptyPlaceholder ? _renderUi.color.keypadEmptyPlaceholder() : undefined