@pie-lib/math-input 6.31.0-mui-update.0 → 6.31.1-beta-1

package/package.json

@@ -3,14 +3,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "6.31.0-mui-update.0",
+  "version": "6.31.1-beta-1",
   "main": "lib/index.js",
   "module": "src/index.jsx",
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/style": "^0.8.0",
-    "@mui/icons-material": "^7.3.4",
-    "@mui/material": "^7.3.4",
+    "@material-ui/core": "^3.8.3",
+    "@material-ui/icons": "^3.0.2",
     "@pie-framework/mathquill": "^1.1.3",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -19,12 +17,12 @@
     "react-portal": "^4.2.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "18.2.0"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "scripts": {},
-  "gitHead": "622d5627dc85e393cdf13e3362970299cc485cc5"
+  "gitHead": "ff5ec2ebe11110b7652812a10c6dc230f08e12cb"
 }

package/src/keypad/index.jsx

@@ -1,31 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import { lighten, alpha, styled } from '@mui/material/styles';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
+import { lighten, fade } from '@material-ui/core/styles/colorManipulator';
+import green from '@material-ui/core/colors/green';
 import debug from 'debug';
 import _ from 'lodash';
 import MathQuill from '@pie-framework/mathquill';
-import * as mq from '../mq';
 
+import * as mq from '../mq';
 import { baseSet } from '../keys';
-import editableHtmlConstants from '../../../editable-html/src/constants';
 import { commonMqKeyboardStyles } from '../mq/common-mq-styles';
 import { sortKeys } from './keys-layout';
-import { green } from '@mui/material/colors';
 
 const log = debug('pie-lib:math-inline:keypad');
 
-const StyledLatexButton = styled(Button)(({ theme }) => ({
-  textTransform: 'none',
-  padding: 0,
-  margin: 0,
-  fontSize: '110% !important',
-}));
-
-const LatexButtonContent = styled(mq.Static)(({ theme, latex }) => {
-  const baseStyles = {
+const LatexButton = withStyles((theme) => ({
+  root: {
+    textTransform: 'none',
+    padding: 0,
+    margin: 0,
+    fontSize: '110% !important',
+  },
+  latexButton: {
     pointerEvents: 'none',
     textTransform: 'none !important',
     '& .mq-scaled.mq-sqrt-prefix': {
@@ -35,24 +34,25 @@ const LatexButtonContent = styled(mq.Static)(({ theme, latex }) => {
       marginBottom: '0.9px !important',
     },
     '& .mq-empty': {
-      backgroundColor: `${alpha(theme.palette.secondary.main, 0.4)} !important`,
+      backgroundColor: `${fade(theme.palette.secondary.main, 0.4)} !important`,
     },
     '& .mq-overline .mq-overline-inner': {
       borderTop: '2px solid black',
     },
     '& .mq-non-leaf.mq-overline': {
-      borderTop: 'none !important',
+      borderTop: 'none !important', // fixing PD-4873 - in OT, it has border-top 1px and adds extra line
     },
     '& .mq-overarrow': {
       width: '30px',
       marginTop: '0 !important',
       borderTop: '2px solid black',
       fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+
       '&.mq-arrow-both': {
         top: '0px !important',
         '& *': {
           lineHeight: '1 !important',
-          borderTop: 'none !important',
+          borderTop: 'none !important', // fixing PD-4873 - in OT, it has border-top 1px and adds extra line,
         },
         '&:before': {
           fontSize: '80%',
@@ -118,43 +118,40 @@ const LatexButtonContent = styled(mq.Static)(({ theme, latex }) => {
     '& .mq-overarc': {
       borderTop: '2px solid black !important',
       '& .mq-overline': {
-        borderTop: 'none !important',
+        borderTop: 'none !important', // fixing PD-4873 - in OT, it has border-top 1px and adds extra line
       },
       '& .mq-overline-inner': {
         borderTop: 'none !important',
         paddingTop: '0 !important',
       },
     },
-  };
-
-  // Add specific styles based on latex content
-  if (latex === '\\parallel') {
-    return {
-      ...baseStyles,
-      fontStyle: 'italic !important',
-    };
-  }
-
-  if (latex === '\\overleftrightarrow{\\overline{}}') {
-    return {
-      ...baseStyles,
-      '& .mq-overarrow.mq-arrow-both': {
-        '& .mq-overline-inner': {
-          borderTop: 'none !important',
-          paddingTop: '0 !important',
-        },
-        '&:after': {
-          position: 'absolute !important',
-          top: '0px !important',
-        },
+  },
+  parallelButton: {
+    fontStyle: 'italic !important',
+  },
+  leftRightArrowButton: {
+    '& .mq-overarrow.mq-arrow-both': {
+      '& .mq-overline-inner': {
+        borderTop: 'none !important',
+        paddingTop: '0 !important',
       },
-    };
+      '&:after': {
+        position: 'absolute !important',
+        top: '0px !important',
+      },
+    },
+  },
+}))((props) => {
+  let buttonClass;
+
+  if (props.latex === '\\parallel') {
+    buttonClass = classNames(props.classes.latexButton, props.mqClassName, props.classes.parallelButton);
+  } else if (props.latex === '\\overleftrightarrow{\\overline{}}') {
+    buttonClass = classNames(props.classes.latexButton, props.mqClassName, props.classes.leftRightArrowButton);
+  } else {
+    buttonClass = classNames(props.classes.latexButton, props.mqClassName);
   }
 
-  return baseStyles;
-});
-
-const LatexButton = (props) => {
   try {
     const MQ = MathQuill.getInterface(2);
     const span = document.createElement('span');
@@ -169,15 +166,15 @@ const LatexButton = (props) => {
   }
 
   return (
-    <StyledLatexButton
-      className={props.className}
+    <Button
+      className={classNames(props.classes.root, props.className)}
       onClick={props.onClick}
       aria-label={props.ariaLabel}
     >
-      <LatexButtonContent latex={props.latex} />
-    </StyledLatexButton>
+      <mq.Static className={buttonClass} latex={props.latex} />
+    </Button>
   );
-};
+});
 
 const createCustomLayout = (layoutObj) => {
   if (layoutObj) {
@@ -191,83 +188,9 @@ const createCustomLayout = (layoutObj) => {
   return {};
 };
 
-const KeyPadContainer = styled('div')(({ theme }) => ({
-  ...commonMqKeyboardStyles,
-  width: '100%',
-  display: 'grid',
-  gridTemplateRows: 'repeat(5, minmax(40px, 60px))',
-  gridRowGap: '0px',
-  gridColumnGap: '0px',
-  gridAutoFlow: 'column',
-  '&.character': {
-    textTransform: 'initial !important',
-    gridTemplateRows: 'repeat(5, minmax(40px, 50px)) !important',
-  },
-  '&.language': {
-    gridTemplateRows: 'repeat(4, minmax(40px, 50px)) !important',
-    '& *': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-    },
-  },
-}));
-
-const StyledButton = styled(Button)(({ theme, category, isDelete, isComma, isDot }) => ({
-  minWidth: 'auto',
-  fontSize: isComma || isDot ? '200% !important' : '140% !important',
-  lineHeight: isComma || isDot ? '100%' : 'normal',
-  backgroundColor: 
-    category === 'operators' ? lighten(theme.palette.secondary.light, 0.5) :
-    category === 'comparison' ? lighten(green[500], 0.5) :
-    lighten(theme.palette.primary.light, 0.5),
-  '&:hover': {
-    backgroundColor: 
-      category === 'operators' ? lighten(theme.palette.secondary.light, 0.7) :
-      category === 'comparison' ? lighten(green[500], 0.7) :
-      lighten(theme.palette.primary.light, 0.7),
-  },
-  borderRadius: 0,
-  ...(isDelete && {
-    '& > span': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-    },
-  }),
-}));
-
-const StyledLatexButtonWrapper = styled(Button)(({ theme, category }) => ({
-  minWidth: 'auto',
-  borderRadius: 0,
-  backgroundColor: 
-    category === 'operators' ? lighten(theme.palette.secondary.light, 0.5) :
-    category === 'comparison' ? lighten(green[500], 0.5) :
-    lighten(theme.palette.primary.light, 0.5),
-  '&:hover': {
-    backgroundColor: 
-      category === 'operators' ? lighten(theme.palette.secondary.light, 0.7) :
-      category === 'comparison' ? lighten(green[500], 0.7) :
-      lighten(theme.palette.primary.light, 0.7),
-  },
-}));
-
-const StyledIconButton = styled(IconButton)(({ theme, category }) => ({
-  minWidth: 'auto',
-  backgroundColor: 
-    category === 'operators' ? lighten(theme.palette.secondary.light, 0.5) :
-    category === 'comparison' ? lighten(green[500], 0.5) :
-    lighten(theme.palette.primary.light, 0.5),
-  '&:hover': {
-    backgroundColor: 
-      category === 'operators' ? lighten(theme.palette.secondary.light, 0.7) :
-      category === 'comparison' ? lighten(green[500], 0.7) :
-      lighten(theme.palette.primary.light, 0.7),
-  },
-  borderRadius: 0,
-  '& .icon': {
-    height: '30px',
-  },
-}));
-
 export class KeyPad extends React.Component {
   static propTypes = {
+    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     controlledKeypadMode: PropTypes.bool,
     baseSet: PropTypes.array,
@@ -291,7 +214,7 @@ export class KeyPad extends React.Component {
 
   componentDidMount() {
     const keyPadElement = this.keypadRef?.current;
-    const mainContainer = keyPadElement?.closest(`.${editableHtmlConstants.MAIN_CONTAINER_CLASS}`);
+    const mainContainer = keyPadElement?.closest('.main-container');
     const currentToolbar = keyPadElement?.closest('.pie-toolbar');
 
     // need only for math keyboard so we need also controlledKeypadMode
@@ -321,7 +244,7 @@ export class KeyPad extends React.Component {
     const keyPadElement = this.keypadRef?.current;
     // need only for math keyboard
     if (this.props.controlledKeypadMode && keyPadElement) {
-      const mainContainer = keyPadElement.closest(`.${editableHtmlConstants.MAIN_CONTAINER_CLASS}`);
+      const mainContainer = keyPadElement.closest('.main-container');
 
       if (mainContainer) {
         mainContainer.style.height = 'unset';
@@ -365,14 +288,14 @@ export class KeyPad extends React.Component {
   };
 
   render() {
-    const { className, baseSet, additionalKeys, layoutForKeyPad, onFocus, mode } = this.props;
+    const { classes, className, baseSet, additionalKeys, layoutForKeyPad, onFocus, mode } = this.props;
 
     const noBaseSet = ['non-negative-integers', 'integers', 'decimals', 'fractions', 'item-authoring', 'language'];
 
     const keysWithoutBaseSet = noBaseSet.includes(mode);
     const allKeys = keysWithoutBaseSet
       ? this.flowKeys([], additionalKeys || [])
-      : this.flowKeys(baseSet, additionalKeys || []);
+      : this.flowKeys(baseSet, additionalKeys || []); //, ...sortKeys(additionalKeys)];
 
     const shift = allKeys.length % 5 ? 1 : 0;
     const style = {
@@ -381,9 +304,9 @@ export class KeyPad extends React.Component {
     };
 
     return (
-      <KeyPadContainer
+      <div
         ref={this.keypadRef}
-        className={classNames(className, mode)}
+        className={classNames(classes.keys, className, classes[mode])}
         style={style}
         onFocus={onFocus}
       >
@@ -396,6 +319,13 @@ export class KeyPad extends React.Component {
 
           const common = {
             onClick,
+            className: classNames(
+              classes.labelButton,
+              !keysWithoutBaseSet && classes[k.category],
+              classes[k.extraClass],
+              k.label === ',' && classes.comma,
+              k.label === '.' && classes.dot,
+            ),
             disabled: this.keyIsNotAllowed(k),
             key: `${k.label || k.latex || k.command}-${index}`,
             ...(k.actions || {}),
@@ -404,47 +334,116 @@ export class KeyPad extends React.Component {
 
           if (k.latex) {
             return (
-              <StyledLatexButtonWrapper
+              <LatexButton
+                latex={k.latex}
+                key={index}
                 {...common}
-                category={!keysWithoutBaseSet ? k.category : undefined}
-                aria-label={k.ariaLabel ? k.ariaLabel : k.name || k.label}
-              >
-                <LatexButtonContent latex={k.latex} />
-              </StyledLatexButtonWrapper>
+                className={classes.latexButton}
+                ariaLabel={k.ariaLabel ? k.ariaLabel : k.name || k.label}
+              />
             );
           }
 
           if (k.label) {
             return (
-              <StyledButton
+              <Button
+                key={index}
                 {...common}
-                category={!keysWithoutBaseSet ? k.category : undefined}
-                isDelete={k.label === '⌫'}
-                isComma={k.label === ','}
-                isDot={k.label === '.'}
+                className={classNames(common.className, { [classes.deleteButton]: k.label === '⌫' })}
                 aria-label={k.ariaLabel ? k.ariaLabel : k.name || k.label}
               >
                 {k.label}
-              </StyledButton>
+              </Button>
             );
           } else {
             const Icon = k.icon ? k.icon : 'div';
 
             return (
-              <StyledIconButton
-                tabIndex={'-1'}
-                {...common}
-                category={!keysWithoutBaseSet ? k.category : undefined}
-                size="large"
-              >
-                <Icon className="icon" />
-              </StyledIconButton>
+              <IconButton tabIndex={'-1'} {...common} key={index}>
+                <Icon className={classes.icon} />
+              </IconButton>
             );
           }
         })}
-      </KeyPadContainer>
+      </div>
     );
   }
 }
 
-export default KeyPad;
+const styles = (theme) => ({
+  keys: {
+    ...commonMqKeyboardStyles,
+    width: '100%',
+    display: 'grid',
+    gridTemplateRows: 'repeat(5, minmax(40px, 60px))',
+    gridRowGap: '0px',
+    gridColumnGap: '0px',
+    gridAutoFlow: 'column',
+  },
+  character: {
+    textTransform: 'initial !important',
+    gridTemplateRows: 'repeat(5, minmax(40px, 50px)) !important',
+  },
+  language: {
+    gridTemplateRows: 'repeat(4, minmax(40px, 50px)) !important',
+    '& *': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+    },
+  },
+  holder: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#cef',
+    borderRadius: 0,
+    padding: `${theme.spacing.unit}px 0 ${theme.spacing.unit}px 0`,
+  },
+  labelButton: {
+    minWidth: 'auto',
+    fontSize: '140% !important',
+    backgroundColor: lighten(theme.palette.primary.light, 0.5),
+    '&:hover': {
+      backgroundColor: lighten(theme.palette.primary.light, 0.7),
+    },
+    borderRadius: 0,
+  },
+  latexButton: {
+    minWidth: 'auto',
+    borderRadius: 0,
+    backgroundColor: lighten(theme.palette.primary.light, 0.5),
+    '&:hover': {
+      backgroundColor: lighten(theme.palette.primary.light, 0.7),
+    },
+  },
+  deleteButton: {
+    '& > span': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+    },
+  },
+  base: {},
+  operators: {
+    backgroundColor: lighten(theme.palette.secondary.light, 0.5),
+    '&:hover': {
+      backgroundColor: lighten(theme.palette.secondary.light, 0.7),
+    },
+  },
+  comparison: {
+    backgroundColor: lighten(green[500], 0.5),
+    '&:hover': {
+      backgroundColor: lighten(green[500], 0.7),
+    },
+  },
+  comma: {
+    fontSize: '200% !important',
+    lineHeight: '100%',
+  },
+  dot: {
+    fontSize: '200% !important',
+    lineHeight: '100%',
+  },
+  icon: {
+    height: '30px',
+  },
+});
+
+export default withStyles(styles)(KeyPad);

package/src/math-input.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
 import * as mq from './mq';
 import { baseSet } from './keys';
 import KeyPad from './keypad';
@@ -8,35 +9,9 @@ import debug from 'debug';
 
 const log = debug('pie-lib:math-input');
 
-const grey = 'rgba(0, 0, 0, 0.23)';
-
-const MathInputContainer = styled('div')(({ theme, focused }) => ({
-  borderRadius: '4px',
-  border: `solid 1px ${focused ? theme.palette.primary.main : grey}`,
-  marginTop: theme.spacing(1),
-  marginBottom: theme.spacing(1),
-  transition: 'border 200ms linear',
-}));
-
-const PadContainer = styled('div')({
-  width: '100%',
-  display: 'flex',
-});
-
-const StyledMqInput = styled(mq.Input)(({ theme }) => ({
-  width: '100%',
-  border: `solid 0px ${theme.palette.primary.light}`,
-  transition: 'border 200ms linear',
-  padding: theme.spacing(1),
-  '&.mq-focused': {
-    outline: 'none',
-    boxShadow: 'none',
-    border: `solid 0px ${theme.palette.primary.dark}`,
-  },
-}));
-
 export class MathInput extends React.Component {
   static propTypes = {
+    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     keyset: PropTypes.array,
     displayMode: PropTypes.oneOf(['block', 'block-on-focus']),
@@ -92,14 +67,15 @@ export class MathInput extends React.Component {
   };
 
   render() {
-    const { className, keyset, latex } = this.props;
+    const { classes, className, keyset, latex } = this.props;
     const { focused } = this.state;
 
     const showKeypad = true; // TODO: add support for different displayModes - displayMode === 'block' || focused;
 
     return (
-      <MathInputContainer className={className} focused={focused}>
-        <StyledMqInput
+      <div className={classNames(classes.mathInput, className, focused && classes.focused)}>
+        <mq.Input
+          className={classes.mqInput}
           innerRef={(r) => (this.input = r)}
           onFocus={this.inputFocus}
           onBlur={this.inputBlur}
@@ -107,13 +83,46 @@ export class MathInput extends React.Component {
           onChange={this.changeLatex}
         />
         {showKeypad && (
-          <PadContainer>
+          <div className={classes.pad}>
             <KeyPad baseSet={baseSet} additionalKeys={keyset} onPress={this.keypadPress} />
-          </PadContainer>
+          </div>
         )}
-      </MathInputContainer>
+      </div>
     );
   }
 }
 
-export default MathInput;
+const grey = 'rgba(0, 0, 0, 0.23)';
+const styles = (theme) => ({
+  formGroup: {
+    display: 'flex',
+    textAlign: 'right',
+    float: 'right',
+  },
+  pad: {
+    width: '100%',
+    display: 'flex',
+  },
+  mathInput: {
+    borderRadius: '4px',
+    border: `solid 1px ${grey}`,
+    marginTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit,
+    transition: 'border 200ms linear',
+  },
+  focused: {
+    border: `solid 1px ${theme.palette.primary.main}`,
+  },
+  mqInput: {
+    width: '100%',
+    border: `solid 0px ${theme.palette.primary.light}`,
+    transition: 'border 200ms linear',
+    padding: theme.spacing.unit,
+    '&.mq-focused': {
+      outline: 'none',
+      boxShadow: 'none',
+      border: `solid 0px ${theme.palette.primary.dark}`,
+    },
+  },
+});
+export default withStyles(styles)(MathInput);

package/src/mq/input.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
+import { withStyles } from '@material-ui/core/styles';
 import debug from 'debug';
+import classNames from 'classnames';
 import { registerLineBreak } from './custom-elements';
 import MathQuill from '@pie-framework/mathquill';
 
@@ -16,16 +17,13 @@ if (typeof window !== 'undefined') {
 
 const log = debug('math-input:mq:input');
 
-const StyledSpan = styled('span')({
-  // No specific styles needed, but component is available for future styling
-});
-
 /**
  * Wrapper for MathQuill MQ.MathField.
  */
 export class Input extends React.Component {
   static propTypes = {
     className: PropTypes.string,
+    classes: PropTypes.object.isRequired,
     onClick: PropTypes.func,
     onChange: PropTypes.func,
     latex: PropTypes.string,
@@ -158,11 +156,11 @@ export class Input extends React.Component {
   }
 
   render() {
-    const { onFocus, onBlur, className } = this.props;
+    const { onFocus, onBlur, classes, className } = this.props;
 
     return (
-      <StyledSpan
-        className={className}
+      <span
+        className={classNames(classes.input, className)}
         onKeyDown={this.onKeyPress}
         onClick={this.onClick}
         onFocus={onFocus}
@@ -173,4 +171,6 @@ export class Input extends React.Component {
   }
 }
 
-export default Input;
+const styles = () => ({});
+
+export default withStyles(styles)(Input);

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/NEXT.CHANGELOG.json

@@ -1 +0,0 @@
-[]

package/lib/horizontal-keypad.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"horizontal-keypad.js","names":["_react","_interopRequireDefault","require","_propTypes","_grades","_utils","_keypad","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","toOldModel","d","command","value","type","write","keystroke","HorizontalKeypad","exports","_React$Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","concat","_defineProperty2","data","onClick","props","_inherits2","_createClass2","key","render","_this$props","mode","onFocus","controlledKeypadMode","noDecimal","className","additionalKeys","layoutForKeyPad","setKeypadInteraction","normalizedKeys","normalizeAdditionalKeys","createElement","extendKeySet","keysForGrade","onPress","keypadPress","React","Component","PropTypes","string","bool","oneOfType","number","object","func","isRequired","array"],"sources":["../src/horizontal-keypad.jsx"],"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    controlledKeypadMode: PropTypes.bool,\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    setKeypadInteraction: PropTypes.func,\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 {\n      mode,\n      onFocus,\n      controlledKeypadMode,\n      noDecimal,\n      className,\n      additionalKeys,\n      layoutForKeyPad,\n      setKeypadInteraction,\n    } = this.props;\n    const normalizedKeys = normalizeAdditionalKeys(additionalKeys);\n\n    return (\n      <Keypad\n        className={className}\n        controlledKeypadMode={controlledKeypadMode}\n        onFocus={onFocus}\n        noDecimal={noDecimal}\n        layoutForKeyPad={layoutForKeyPad}\n        additionalKeys={extendKeySet(keysForGrade(mode), normalizedKeys)}\n        onPress={this.keypadPress}\n        mode={mode}\n        setKeypadInteraction={setKeypadInteraction}\n      />\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}