@pie-lib/math-input 6.11.4 → 6.13.0-beta.0

package/src/keys/grades.js

@@ -304,6 +304,12 @@ export const gradeSets = [
       ],
     ],
   },
+  // for grade 1-2, we want to display the base set only
+  // we need it here because we don't want to display the default set (grade 8)
+  {
+    predicate: (n) => n >= 1 && n <= 2,
+    set: [],
+  },
 ];
 
 export const keysForGrade = (n) => {
@@ -324,6 +330,11 @@ export const keysForGrade = (n) => {
   if (match) {
     return match.set || [];
   }
+
+  // if the grade is not found, return the default set which is grade 8 (as per PD-3549), for mode language it is not the default
+  if (n !== 'language') {
+    return gradeSets[2].set;
+  }
 };
 
 const ALL_KEYS = [

package/src/keys/log.js

@@ -12,7 +12,7 @@ export const logSubscript = set({
   name: 'log base n',
   label: 'log s',
   latex: '\\log_{}',
-  command: ['\\log', '_', ' '],
+  command: ['\\log', '_'],
 });
 export const ln = set({
   name: 'natural log',

package/src/mq/__tests__/__snapshots__/input.test.jsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input snapshot renders 1`] = `
+<span
+  className="className"
+  onClick={[Function]}
+  onKeyDown={[Function]}
+/>
+`;

package/src/mq/__tests__/input.test.jsx

@@ -0,0 +1,92 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Input } from '../input';
+
+describe('Input', () => {
+  let w;
+  let onChange;
+
+  beforeEach(() => {
+    onChange = jest.fn();
+  });
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+    };
+    const props = { ...defaults, ...extras };
+    const out = shallow(<Input {...props} />);
+
+    out.mathField = () => out.instance().mathField;
+    return out;
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('logic', () => {
+    beforeEach(() => {
+      w = wrapper();
+    });
+    describe('clear', () => {
+      it('calls latex', () => {
+        w.instance().clear();
+        expect(w.mathField().latex).toHaveBeenCalledWith('');
+      });
+    });
+    describe('blur', () => {
+      it('calls blur', () => {
+        w.instance().blur();
+        expect(w.mathField().blur).toHaveBeenCalled();
+      });
+    });
+    describe('focus', () => {
+      it('calls focus', () => {
+        w.instance().focus();
+        expect(w.mathField().focus).toHaveBeenCalled();
+      });
+    });
+    describe('command', () => {
+      it('calls cmd', () => {
+        w.instance().command('foo');
+        expect(w.mathField().cmd).toHaveBeenCalledWith('foo');
+      });
+      it('calls cmd if passed an array', () => {
+        w.instance().command(['foo', 'bar']);
+        expect(w.mathField().cmd).toHaveBeenCalledWith('foo');
+        expect(w.mathField().cmd).toHaveBeenCalledWith('bar');
+      });
+    });
+
+    describe('keystroke', () => {
+      beforeEach(() => {
+        w.instance().keystroke('9');
+      });
+      it('calls keystroke', () => expect(w.mathField().keystroke).toHaveBeenCalledWith('9'));
+      it('calls focus', () => expect(w.mathField().focus).toHaveBeenCalled());
+      it('calls latex', () => expect(w.mathField().latex).toHaveBeenCalled());
+    });
+
+    describe('write', () => {
+      beforeEach(() => {
+        w.instance().write('hi');
+      });
+      it('calls write', () => expect(w.mathField().write).toHaveBeenCalledWith('hi'));
+      it('calls focus', () => expect(w.mathField().focus).toHaveBeenCalled());
+      it('calls latex', () => expect(w.mathField().latex).toHaveBeenCalled());
+    });
+
+    describe('onInputEdit', () => {
+      it('calls onChange', () => {
+        w = wrapper();
+        w.mathField().latex.mockReturnValue('foo');
+        w.instance().onInputEdit();
+        expect(onChange).toHaveBeenCalledWith('foo');
+      });
+    });
+  });
+});

package/src/mq/__tests__/static.test.jsx

@@ -0,0 +1,57 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Static from '../static';
+
+const Mathquill = require('@pie-framework/mathquill');
+
+jest.mock('@pie-framework/mathquill', () => ({
+  StaticMath: jest.fn().mockReturnValue({
+    latex: jest.fn(),
+    parseLatex: jest.fn(),
+  }),
+  getInterface: jest.fn().mockReturnThis(),
+}));
+
+describe('static', () => {
+  let w;
+  describe('mount', () => {
+    beforeEach(() => {
+      w = shallow(<Static latex="foo" />, {
+        disableLifecycleMethods: true,
+      });
+
+      w.instance().input = {};
+      w.instance().componentDidMount();
+    });
+
+    it('set the html', () => {
+      expect(Mathquill.getInterface().StaticMath().latex).toBeCalledWith('foo');
+    });
+
+    it('calls MQ.StaticMath', () => {
+      expect(Mathquill.getInterface().StaticMath).toHaveBeenCalled();
+    });
+  });
+
+  describe('shouldComponentUpdate', () => {
+    it('returns false if there is an error', () => {
+      w = shallow(<Static latex="foo" />, { disableLifecycleMethods: true });
+      w.instance().mathField = {
+        parseLatex: jest.fn((e) => {
+          throw new Error('boom');
+        }),
+      };
+      expect(w.instance().shouldComponentUpdate({ latex: '\\abs{}' })).toEqual(false);
+    });
+
+    it('returns true if ??', () => {
+      w = shallow(<Static latex="foo" />, { disableLifecycleMethods: true });
+      w.instance().mathField = {
+        latex: jest.fn().mockReturnValue('foo'),
+        parseLatex: jest.fn().mockReturnValue('foo'),
+        innerFields: ['field1', 'field2'],
+      };
+      expect(w.instance().shouldComponentUpdate({ latex: '\\abs{}' })).toEqual(true);
+    });
+  });
+});

package/src/mq/common-mq-styles.js

@@ -0,0 +1,105 @@
+export const commonMqFontStyles = {
+  fontFamily: 'MJXZERO, MJXTEX !important',
+  '-webkit-font-smoothing': 'antialiased !important',
+
+  '& .mq-math-mode > span > var': {
+    fontFamily: 'MJXZERO, MJXTEX-I !important',
+  },
+  '& .mq-math-mode span var': {
+    fontFamily: 'MJXZERO, MJXTEX-I !important',
+  },
+  '& .mq-math-mode .mq-nonSymbola': {
+    fontFamily: 'MJXZERO, MJXTEX-I !important',
+  },
+  '& .mq-math-mode > span > var.mq-operator-name': {
+    fontFamily: 'MJXZERO, MJXTEX !important',
+  },
+};
+
+export const longdivStyles = {
+  '& .mq-longdiv-inner': {
+    marginTop: '-1px',
+    marginLeft: '5px !important;',
+
+    '& > .mq-empty': {
+      padding: '0 !important',
+      marginLeft: '0px !important',
+      marginTop: '2px',
+    },
+  },
+
+  '& .mq-math-mode .mq-longdiv': {
+    display: 'inline-flex !important',
+  },
+};
+
+export const supsubStyles = {
+  '& .mq-math-mode sup.mq-nthroot': {
+    fontSize: '70% !important',
+    verticalAlign: '0.5em !important',
+    paddingRight: '0.15em',
+  },
+  '& .mq-math-mode .mq-supsub': {
+    fontSize: '70.7% !important',
+  },
+  '& .mq-supsub ': {
+    fontSize: '70.7%',
+  },
+  '& .mq-math-mode .mq-supsub.mq-sup-only': {
+    verticalAlign: '-0.1em !important',
+
+    '& .mq-sup': {
+      marginBottom: '0px !important',
+    },
+  },
+  /* But when the base is a fraction, move it higher */
+  '& .mq-math-mode .mq-fraction + .mq-supsub.mq-sup-only': {
+    verticalAlign: '0.4em !important',
+  },
+
+  '& .mq-math-mode .mq-supsub.mq-sup-only.mq-after-fraction-group': {
+    verticalAlign: '0.4em !important',
+  },
+};
+
+export const commonMqKeyboardStyles = {
+  '& *': {
+    ...commonMqFontStyles,
+    ...longdivStyles,
+    '& .mq-math-mode .mq-sqrt-prefix': {
+      top: '0 !important',
+    },
+
+    '& .mq-math-mode .mq-empty': {
+      padding: '9px 1px !important',
+    },
+
+    '& .mq-math-mode .mq-supsub': {
+      fontSize: '70.7% !important',
+    },
+
+    '& .mq-math-mode .mq-sqrt-stem': {
+      marginTop: '-5px',
+      paddingTop: '4px',
+    },
+
+    '& .mq-math-mode .mq-paren': {
+      verticalAlign: 'middle !important',
+    },
+
+    '& .mq-math-mode .mq-overarrow .mq-overarrow-inner .mq-empty': {
+      padding: '0 !important',
+    },
+
+    '& .mq-math-mode .mq-overline .mq-overline-inner .mq-empty ': {
+      padding: '0 !important',
+    },
+  },
+};
+
+export default {
+  commonMqFontStyles,
+  longdivStyles,
+  supsubStyles,
+  commonMqKeyboardStyles,
+};

package/src/mq/index.js

@@ -1,4 +1,5 @@
 import Input from './input';
 import Static from './static';
+import CommonMqStyles from './common-mq-styles';
 
-export { Input, Static };
+export { Input, Static, CommonMqStyles };

package/src/mq/input.jsx

@@ -53,14 +53,17 @@ export class Input extends React.Component {
     if (!this.mathField) {
       return;
     }
+
     const { latex } = this.props;
-    if (latex) {
+
+    if (latex !== undefined && latex !== null) {
       this.mathField.latex(latex);
     }
   }
 
   clear() {
     this.mathField.latex('');
+
     return '';
   }
 
@@ -83,13 +86,16 @@ export class Input extends React.Component {
     } else {
       this.mathField.cmd(v);
     }
+
     this.mathField.focus();
+
     return this.mathField.latex();
   }
 
   keystroke(v) {
     this.mathField.keystroke(v);
     this.mathField.focus();
+
     return this.mathField.latex();
   }
 
@@ -97,12 +103,14 @@ export class Input extends React.Component {
     log('write: ', v);
     this.mathField.write(v);
     this.mathField.focus();
+
     return this.mathField.latex();
   }
 
   onInputEdit = () => {
     log('[onInputEdit] ...');
     const { onChange } = this.props;
+
     if (!this.mathField) {
       return;
     }
@@ -128,28 +136,33 @@ export class Input extends React.Component {
     }
 
     if (event.charCode === 13) {
-      // if enter's pressed, we're going for a custom embedded element that'll
-      // have a block display (empty div) - for a hacked line break using ccs
-      // all because mathquill doesn't support a line break
-      this.write('\\embed{newLine}[]');
-      this.onInputEdit();
+      event.preventDefault();
+      return;
     }
   };
 
+  onClick = (event) => {
+    const { onClick } = this.props;
+
+    this.refresh();
+    onClick && onClick(event);
+  };
+
   shouldComponentUpdate(nextProps) {
     log('next: ', nextProps.latex);
     log('current: ', this.mathField.latex());
+
     return nextProps.latex !== this.mathField.latex();
   }
 
   render() {
-    const { onClick, onFocus, onBlur, classes, className } = this.props;
+    const { onFocus, onBlur, classes, className } = this.props;
 
     return (
       <span
         className={classNames(classes.input, className)}
-        onKeyPress={this.onKeyPress}
-        onClick={onClick}
+        onKeyDown={this.onKeyPress}
+        onClick={this.onClick}
         onFocus={onFocus}
         onBlur={onBlur}
         ref={(r) => (this.input = r)}

package/src/mq/static.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import debug from 'debug';
 import MathQuill from '@pie-framework/mathquill';
-import { updateSpans } from '../index';
+import { updateSpans } from '../updateSpans';
 
 let MQ;
 if (typeof window !== 'undefined') {
@@ -17,6 +17,18 @@ function stripSpaces(string = '') {
   return string.replace(WHITESPACE_REGEX, '');
 }
 
+function countBraces(latex) {
+  let count = 0;
+
+  for (let i = 0; i < (latex || '').length; i++) {
+    if (latex[i] === '{') {
+      count++;
+    }
+  }
+
+  return count;
+}
+
 /**
  * Wrapper for MathQuill MQ.MathField.
  */
@@ -36,9 +48,24 @@ export default class Static extends React.Component {
     getFieldName: () => {},
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      announcement: '',
+      previousLatex: '',
+      inputSource: null,
+      isDeleteKeyPressed: false,
+    };
+
+    this.inputRef = React.createRef();
+  }
+
   componentDidMount() {
     this.update();
     updateSpans();
+
+    this.createLiveRegion();
+    this.addEventListeners();
   }
 
   componentDidUpdate() {
@@ -46,7 +73,62 @@ export default class Static extends React.Component {
     updateSpans();
   }
 
-  onInputEdit(field) {
+  componentWillUnmount() {
+    this.removeLiveRegion();
+    this.removeEventListeners();
+  }
+
+  createLiveRegion = () => {
+    this.liveRegion = document.createElement('div');
+    this.liveRegion.style.position = 'absolute';
+    this.liveRegion.style.width = '1px';
+    this.liveRegion.style.height = '1px';
+    this.liveRegion.style.marginTop = '-1px';
+    this.liveRegion.style.clip = 'rect(1px, 1px, 1px, 1px)';
+    this.liveRegion.style.overflow = 'hidden';
+    this.liveRegion.setAttribute('aria-live', 'polite');
+    this.liveRegion.setAttribute('aria-atomic', 'true');
+
+    document.body.appendChild(this.liveRegion);
+  };
+
+  addEventListeners = () => {
+    const input = this.inputRef.current;
+
+    if (input) {
+      input.addEventListener('keydown', this.handleKeyDown);
+      input.addEventListener('click', this.handleMathKeyboardClick);
+    }
+  };
+
+  removeEventListeners = () => {
+    const input = this.inputRef.current;
+
+    if (input) {
+      input.removeEventListener('keydown', this.handleKeyDown);
+      input.removeEventListener('click', this.handleMathKeyboardClick);
+    }
+  };
+
+  removeLiveRegion = () => {
+    if (this.liveRegion) {
+      document.body.removeChild(this.liveRegion);
+      this.liveRegion = null;
+    }
+  };
+
+  handleKeyDown = (event) => {
+    if (event?.key === 'Backspace' || event?.key === 'Delete') {
+      this.setState({ isDeleteKeyPressed: true });
+    }
+    this.setState({ inputSource: 'keyboard' });
+  };
+
+  handleMathKeyboardClick = () => {
+    this.setState({ inputSource: 'mathKeyboard' });
+  };
+
+  onInputEdit = (field) => {
     if (!this.mathField) {
       return;
     }
@@ -56,7 +138,7 @@ export default class Static extends React.Component {
       // eslint-disable-next-line no-useless-escape
       const regexMatch = field.latex().match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
 
-      if (this.input && regexMatch && regexMatch?.length) {
+      if (this.inputRef?.current && regexMatch && regexMatch?.length) {
         try {
           field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);
           field.el().dispatchEvent(new KeyboardEvent('keydown', { keyCode: 8 }));
@@ -68,15 +150,62 @@ export default class Static extends React.Component {
         this.props.onSubFieldChange(name, field.latex());
       }
     }
-  }
 
-  update() {
+    this.announceLatexConversion(field.latex());
+  };
+
+  announceLatexConversion = (newLatex) => {
+    if (!this.state) {
+      console.error('State is not initialized');
+      return;
+    }
+
+    const { previousLatex, inputSource, isDeleteKeyPressed } = this.state;
+    const announcement = 'Converted to math symbol';
+
+    if (inputSource === 'keyboard' && !isDeleteKeyPressed) {
+      const newBraces = countBraces(newLatex);
+      const oldBraces = countBraces(previousLatex);
+
+      if (newBraces > oldBraces) {
+        this.announceMessage(announcement);
+      } else {
+        try {
+          this.mathField.parseLatex(previousLatex);
+          this.mathField.parseLatex(newLatex);
+
+          if (newLatex == previousLatex) {
+            this.announceMessage(announcement);
+          }
+        } catch (e) {
+          console.warn('Error parsing latex:', e.message);
+          console.warn(e);
+        }
+      }
+    }
+
+    this.setState({ previousLatex: newLatex, isDeleteKeyPressed: false });
+  };
+
+  announceMessage = (message) => {
+    this.setState({ previousLatex: '' });
+
+    if (this.liveRegion) {
+      this.liveRegion.textContent = message;
+
+      // Clear the message after it is announced
+      setTimeout(() => {
+        this.liveRegion.textContent = '';
+      }, 500);
+    }
+  };
+
+  update = () => {
     if (!MQ) {
       throw new Error('MQ is not defined - but component has mounted?');
     }
-    // this.input.innerHTML = this.props.latex;
     if (!this.mathField) {
-      this.mathField = MQ.StaticMath(this.input, {
+      this.mathField = MQ.StaticMath(this.inputRef?.current, {
         handlers: {
           edit: this.onInputEdit.bind(this),
         },
@@ -90,17 +219,17 @@ export default class Static extends React.Component {
       // default latex if received has errors
       this.mathField.latex('\\MathQuillMathField[r1]{}');
     }
-  }
+  };
 
-  blur() {
+  blur = () => {
     log('blur mathfield');
     this.mathField.blur();
-  }
+  };
 
-  focus() {
+  focus = () => {
     log('focus mathfield...');
     this.mathField.focus();
-  }
+  };
 
   shouldComponentUpdate(nextProps) {
     try {
@@ -151,6 +280,6 @@ export default class Static extends React.Component {
   render() {
     const { onBlur, className } = this.props;
 
-    return <span className={className} onFocus={this.onFocus} onBlur={onBlur} ref={(r) => (this.input = r)} />;
+    return <span className={className} onFocus={this.onFocus} onBlur={onBlur} ref={this.inputRef} />;
   }
 }

package/src/updateSpans.js

@@ -0,0 +1,15 @@
+// increase the font of parallel notation
+const updateSpans = () => {
+  const spans = Array.from(document.querySelectorAll('span[mathquill-command-id]'));
+  (spans || []).forEach((span) => {
+    if (span && span.innerText === '∥' && span.className !== 'mq-editable-field') {
+      span.style.fontSize = '32px';
+    }
+
+    if ((span.innerText === '′' || span.innerText === '′′') && !span.hasAttribute('data-prime')) {
+      span.setAttribute('data-prime', 'true');
+    }
+  });
+};
+
+export { updateSpans };

package/README.md

@@ -1,27 +0,0 @@
-# math-input  
-
-A [React](http://github.com/facebook/react) math input field, with a material design feel. Uses [Mathquill](http://mathquill.com/).
-
-## install 
-
-```bash
-npm|yarn install
-```
-
-## demo
-```bash
-
-cd demo 
-../node_modules/.bin/webpack-dev-server --hot --inline
-```
-
-## test
-
-```bash
-npm|yarn test
-```
-
-
-## Using in another app
-
-We expose the jsx directly, so you'll need to update your build pipeline to build from src.

package/lib/horizontal-keypad.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/horizontal-keypad.jsx"],"names":["toOldModel","d","command","value","type","write","keystroke","HorizontalKeypad","data","onClick","props","mode","onFocus","noDecimal","className","additionalKeys","layoutForKeyPad","normalizedKeys","keypadPress","React","Component","PropTypes","string","oneOfType","number","object","func","isRequired","bool","array"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAO;AACxB,MAAIA,CAAC,CAACC,OAAN,EAAe;AACb,WAAO;AAAEC,MAAAA,KAAK,EAAEF,CAAC,CAACC,OAAX;AAAoBE,MAAAA,IAAI,EAAE;AAA1B,KAAP;AACD,GAFD,MAEO,IAAIH,CAAC,CAACI,KAAN,EAAa;AAClB,WAAO;AAAEF,MAAAA,KAAK,EAAEF,CAAC,CAACI;AAAX,KAAP;AACD,GAFM,MAEA,IAAIJ,CAAC,CAACK,SAAN,EAAiB;AACtB,WAAO;AAAEF,MAAAA,IAAI,EAAE,QAAR;AAAkBD,MAAAA,KAAK,EAAEF,CAAC,CAACK;AAA3B,KAAP;AACD;AACF,CARD;;IAUqBC,gB;;;;;;;;;;;;;;;oGAiBL,UAACC,IAAD,EAAU;AACtB,UAAQC,OAAR,GAAoB,MAAKC,KAAzB,CAAQD,OAAR;AAEAA,MAAAA,OAAO,CAACT,UAAU,CAACQ,IAAD,CAAX,CAAP;AACD,K;;;;;;WAED,kBAAS;AACP,wBAAiF,KAAKE,KAAtF;AAAA,UAAQC,IAAR,eAAQA,IAAR;AAAA,UAAcC,OAAd,eAAcA,OAAd;AAAA,UAAuBC,SAAvB,eAAuBA,SAAvB;AAAA,UAAkCC,SAAlC,eAAkCA,SAAlC;AAAA,UAA6CC,cAA7C,eAA6CA,cAA7C;AAAA,UAA6DC,eAA7D,eAA6DA,eAA7D;AACA,UAAMC,cAAc,GAAG,qCAAwBF,cAAxB,CAAvB;AAEA,0BACE,gCAAC,kBAAD;AACE,QAAA,SAAS,EAAED,SADb;AAEE,QAAA,OAAO,EAAEF,OAFX;AAGE,QAAA,SAAS,EAAEC,SAHb;AAIE,QAAA,eAAe,EAAEG,eAJnB;AAKE,QAAA,cAAc,EAAE,yBAAa,0BAAaL,IAAb,CAAb,EAAiCM,cAAjC,CALlB;AAME,QAAA,OAAO,EAAE,KAAKC,WANhB;AAOE,QAAA,IAAI,EAAEP;AAPR,QADF;AAWD;;;EAtC2CQ,kBAAMC,S;;;iCAA/Bb,gB,eACA;AACjBO,EAAAA,SAAS,EAAEO,sBAAUC,MADJ;AAEjBX,EAAAA,IAAI,EAAEU,sBAAUE,SAAV,CAAoB,CAACF,sBAAUC,MAAX,EAAmBD,sBAAUG,MAA7B,CAApB,CAFW;AAGjBR,EAAAA,eAAe,EAAEK,sBAAUI,MAHV;AAIjBhB,EAAAA,OAAO,EAAEY,sBAAUK,IAAV,CAAeC,UAJP;AAKjBf,EAAAA,OAAO,EAAES,sBAAUK,IALF;AAMjBb,EAAAA,SAAS,EAAEQ,sBAAUO,IANJ;AAOjBb,EAAAA,cAAc,EAAEM,sBAAUQ;AAPT,C;iCADAtB,gB,kBAWG;AACpBI,EAAAA,IAAI,EAAE,YADc;AAEpBE,EAAAA,SAAS,EAAE,KAFS;AAGpBE,EAAAA,cAAc,EAAE;AAHI,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { keysForGrade, normalizeAdditionalKeys } from './keys/grades';\nimport { extendKeySet } from './keys/utils';\nimport Keypad from './keypad';\n\nconst toOldModel = (d) => {\n  if (d.command) {\n    return { value: d.command, type: 'command' };\n  } else if (d.write) {\n    return { value: d.write };\n  } else if (d.keystroke) {\n    return { type: 'cursor', value: d.keystroke };\n  }\n};\n\nexport default class HorizontalKeypad extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    mode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    layoutForKeyPad: PropTypes.object,\n    onClick: PropTypes.func.isRequired,\n    onFocus: PropTypes.func,\n    noDecimal: PropTypes.bool,\n    additionalKeys: PropTypes.array,\n  };\n\n  static defaultProps = {\n    mode: 'scientific',\n    noDecimal: false,\n    additionalKeys: [],\n  };\n\n  keypadPress = (data) => {\n    const { onClick } = this.props;\n\n    onClick(toOldModel(data));\n  };\n\n  render() {\n    const { mode, onFocus, noDecimal, className, additionalKeys, layoutForKeyPad } = this.props;\n    const normalizedKeys = normalizeAdditionalKeys(additionalKeys);\n\n    return (\n      <Keypad\n        className={className}\n        onFocus={onFocus}\n        noDecimal={noDecimal}\n        layoutForKeyPad={layoutForKeyPad}\n        additionalKeys={extendKeySet(keysForGrade(mode), normalizedKeys)}\n        onPress={this.keypadPress}\n        mode={mode}\n      />\n    );\n  }\n}\n"],"file":"horizontal-keypad.js"}

package/lib/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.jsx"],"names":["addLeftBracket","s","indexOf","addRightBracket","length","rmLeftBracket","substring","rmRightBracket","addBrackets","removeBrackets","updateSpans","spans","Array","from","document","querySelectorAll","forEach","span","innerText","className","style","fontSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAoBA;;;;AAEA;;AAEA;;;;;;;;AAtBA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD;AAAA,SAAQA,CAAC,CAACC,OAAF,CAAU,KAAV,MAAqB,CAArB,GAAyBD,CAAzB,gBAAmCA,CAAnC,CAAR;AAAA,CAAvB;;AACA,IAAME,eAAe,GAAG,SAAlBA,eAAkB,CAACF,CAAD;AAAA,SAAQA,CAAC,CAACC,OAAF,CAAU,KAAV,MAAqBD,CAAC,CAACG,MAAF,GAAW,CAAhC,GAAoCH,CAApC,aAA2CA,CAA3C,QAAR;AAAA,CAAxB;;AACA,IAAMI,aAAa,GAAG,SAAhBA,aAAgB,CAACJ,CAAD;AAAA,SAAQA,CAAC,CAACC,OAAF,CAAU,KAAV,MAAqB,CAArB,GAAyBD,CAAC,CAACK,SAAF,CAAY,CAAZ,CAAzB,GAA0CL,CAAlD;AAAA,CAAtB;;AACA,IAAMM,cAAc,GAAG,SAAjBA,cAAiB,CAACN,CAAD;AAAA,SAAQA,CAAC,CAACC,OAAF,CAAU,KAAV,MAAqBD,CAAC,CAACG,MAAF,GAAW,CAAhC,GAAoCH,CAAC,CAACK,SAAF,CAAY,CAAZ,EAAeL,CAAC,CAACG,MAAF,GAAW,CAA1B,CAApC,GAAmEH,CAA3E;AAAA,CAAvB;;AAEA,IAAMO,WAAW,GAAG,SAAdA,WAAc,CAACP,CAAD;AAAA,SAAOE,eAAe,CAACH,cAAc,CAACC,CAAD,CAAf,CAAtB;AAAA,CAApB;;;;AACA,IAAMQ,cAAc,GAAG,SAAjBA,cAAiB,CAACR,CAAD;AAAA,SAAOM,cAAc,CAACF,aAAa,CAACJ,CAAD,CAAd,CAArB;AAAA,CAAvB,C,CAEA;;;;;AACA,IAAMS,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,MAAMC,KAAK,GAAGC,KAAK,CAACC,IAAN,CAAWC,QAAQ,CAACC,gBAAT,CAA0B,4BAA1B,CAAX,CAAd;AACA,GAACJ,KAAK,IAAI,EAAV,EAAcK,OAAd,CAAsB,UAACC,IAAD,EAAU;AAC9B,QAAIA,IAAI,IAAIA,IAAI,CAACC,SAAL,KAAmB,GAA3B,IAAkCD,IAAI,CAACE,SAAL,KAAmB,mBAAzD,EAA8E;AAC5EF,MAAAA,IAAI,CAACG,KAAL,CAAWC,QAAX,GAAsB,MAAtB;AACD;AACF,GAJD;AAKD,CAPD","sourcesContent":["import { keysForGrade } from './keys/grades';\n\nconst addLeftBracket = (s) => (s.indexOf('\\\\(') === 0 ? s : `\\\\(${s}`);\nconst addRightBracket = (s) => (s.indexOf('\\\\)') === s.length - 2 ? s : `${s}\\\\)`);\nconst rmLeftBracket = (s) => (s.indexOf('\\\\(') === 0 ? s.substring(2) : s);\nconst rmRightBracket = (s) => (s.indexOf('\\\\)') === s.length - 2 ? s.substring(0, s.length - 2) : s);\n\nconst addBrackets = (s) => addRightBracket(addLeftBracket(s));\nconst removeBrackets = (s) => rmRightBracket(rmLeftBracket(s));\n\n// increase the font of parallel notation\nconst updateSpans = () => {\n  const spans = Array.from(document.querySelectorAll('span[mathquill-command-id]'));\n  (spans || []).forEach((span) => {\n    if (span && span.innerText === '∥' && span.className !== 'mq-editable-field') {\n      span.style.fontSize = '32px';\n    }\n  });\n};\n\nimport * as keys from './keys';\n\nimport HorizontalKeypad from './horizontal-keypad';\n\nimport * as mq from './mq';\n\nexport { keysForGrade, addBrackets, removeBrackets, keys, HorizontalKeypad, mq, updateSpans };\n"],"file":"index.js"}