@pie-lib/math-input 8.1.1-next.3 → 8.1.1

package/src/keypad/__tests__/index.test.jsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { KeyPad } from '../index';
+
+describe('Keypad', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    classes: {},
+    className: 'className',
+    onChange,
+    onPress: jest.fn(),
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders with default props', () => {
+      const { container } = render(<KeyPad {...defaultProps} />);
+      expect(container.firstChild).toBeInTheDocument();
+      expect(container.firstChild).toHaveClass('className');
+    });
+  });
+});

package/src/keypad/__tests__/keys-layout.test.js

@@ -0,0 +1,14 @@
+import { sortKeys } from '../keys-layout';
+
+describe('keys-layout', () => {
+  describe('sortKeys', () => {
+    it('pads the rows', () => {
+      const result = sortKeys([[1, 2, 3]]);
+      expect(result).toEqual([
+        [1, undefined, undefined, undefined, undefined],
+        [2, undefined, undefined, undefined, undefined],
+        [3, undefined, undefined, undefined, undefined],
+      ]);
+    });
+  });
+});

package/src/keypad/index.jsx

@@ -0,0 +1,439 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+import debug from 'debug';
+import { flatten } from 'lodash-es';
+import { color } from '@pie-lib/render-ui';
+
+import * as mq from '../mq';
+import { baseSet } from '../keys';
+import { commonMqKeyboardStyles } from '../mq/common-mq-styles';
+import { sortKeys } from './keys-layout';
+
+const log = debug('pie-lib:math-inline:keypad');
+
+const LatexButtonContent = styled(mq.Static)(({ latex }) => {
+  const baseStyles = {
+    pointerEvents: 'none',
+    textTransform: 'none !important',
+    color: color.text(),
+    '& .mq-scaled.mq-sqrt-prefix': {
+      transform: 'scale(1, 0.9) !important',
+    },
+    '& .mq-sup-only .mq-sup': {
+      marginBottom: '0.9px !important',
+    },
+    '& .mq-empty': {
+      backgroundColor: `${color.keypadEmptyPlaceholder()} !important`,
+    },
+    '& .mq-overline .mq-overline-inner': {
+      borderTop: '2px solid black',
+    },
+    '& .mq-non-leaf.mq-overline': {
+      borderTop: 'none !important',
+    },
+    '& .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',
+        },
+        '&:before': {
+          fontSize: '80%',
+          left: 'calc(-13%) !important',
+          top: '-0.31em !important',
+        },
+        '&:after': {
+          fontSize: '80% !important',
+          right: 'calc(-13%) !important',
+          top: '-1.5em',
+        },
+        '&.mq-empty:before': {
+          fontSize: '80%',
+          left: 'calc(-13%)',
+          top: '-0.26em',
+        },
+        '&.mq-empty:after': {
+          fontSize: '80%',
+          right: 'calc(-13%)',
+          top: '-0.26em',
+        },
+        '&.mq-empty': {
+          minHeight: '1.4em',
+        },
+      },
+      '&.mq-arrow-right:before': {
+        fontSize: '80%',
+        right: 'calc(-13%) !important',
+        top: '-0.26em !important',
+      },
+      '& .mq-overarrow-inner': {
+        border: 'none !important',
+      },
+      '& .mq-overarrow-inner .mq-overarrow-inner-right': {
+        display: 'none !important',
+      },
+    },
+    '& .mq-root-block': {
+      padding: '5px !important',
+    },
+    '& .mq-overarrow.mq-arrow-both.mq-empty:after': {
+      right: '-6px',
+      fontSize: '80% !important',
+      top: '-3px',
+    },
+    '& .mq-overarrow.mq-arrow-right.mq-empty:before': {
+      right: '-5px',
+      fontSize: '80% !important',
+      top: '-3px',
+    },
+    '& .mq-overarrow.mq-arrow-both.mq-empty:before': {
+      left: '-6px',
+      fontSize: '80% !important',
+      top: '-3px',
+    },
+    '& .mq-longdiv-inner': {
+      borderTop: '1px solid !important',
+      paddingTop: '1.5px !important',
+    },
+    '& .mq-parallelogram': {
+      lineHeight: 0.85,
+    },
+    '& .mq-overarc': {
+      borderTop: '2px solid black !important',
+      '& .mq-overline': {
+        borderTop: 'none !important',
+      },
+      '& .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',
+        },
+      },
+    };
+  }
+
+  return baseStyles;
+});
+
+LatexButtonContent.propTypes = {
+  latex: PropTypes.string.isRequired,
+};
+
+// LatexButton component removed - LatexButtonContent is used directly instead
+
+const createCustomLayout = (layoutObj) => {
+  if (layoutObj) {
+    return {
+      gridTemplateColumns: `repeat(${layoutObj.columns}, minmax(min-content, 150px))`,
+      gridTemplateRows: `repeat(${layoutObj.rows}, minmax(40px, 60px))`,
+      gridAutoFlow: 'initial',
+    };
+  }
+
+  return {};
+};
+
+const KeyPadContainer = styled('div')(() => ({
+  ...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)(({ category, isDelete, isComma, isDot }) => ({
+  minWidth: 'auto',
+  textTransform: 'none',
+  fontSize: isComma || isDot ? '200% !important' : '140% !important',
+  lineHeight: isComma || isDot ? '100%' : 'normal',
+  color: color.text(),
+
+  backgroundColor:
+    category === 'operators'
+      ? color.keypadButtonOperator()
+      : color.keypadButton(),
+  '&:hover': {
+     backgroundColor:
+      category === 'operators'
+        ? color.keypadButtonOperatorHover()
+        : color.keypadButtonHover()
+  },
+  borderRadius: 0,
+  ...(isDelete && {
+    fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+  }),
+}));
+
+const StyledLatexButtonWrapper = styled(Button)(({ category }) => ({
+  textTransform: 'none',
+  padding: 0,
+  margin: 0,
+  fontSize: '110% !important',
+  minWidth: 'auto',
+  borderRadius: 0,
+  backgroundColor:
+    category === 'operators'
+      ? color.keypadButtonOperator()
+      : color.keypadButton(),
+  '&:hover': {
+     backgroundColor:
+      category === 'operators'
+        ? color.keypadButtonOperatorHover()
+        : color.keypadButtonHover(),
+  },
+}));
+
+const StyledIconButton = styled(IconButton)(({ category }) => ({
+  minWidth: 'auto',
+  backgroundColor:
+    category === 'operators'
+      ? color.keypadButtonOperator()
+      : color.keypadButton(),
+  '&:hover': {
+    backgroundColor:
+      category === 'operators'
+        ? color.keypadButtonOperatorHover()
+        : color.keypadButtonHover(),
+  },
+  borderRadius: 0,
+  '& .icon': {
+    height: '30px',
+  },
+}));
+
+export class KeyPad extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    controlledKeypadMode: PropTypes.bool,
+    baseSet: PropTypes.array,
+    additionalKeys: PropTypes.array,
+    layoutForKeyPad: PropTypes.object,
+    onPress: PropTypes.func.isRequired,
+    onFocus: PropTypes.func,
+    noDecimal: PropTypes.bool,
+    setKeypadInteraction: PropTypes.func,
+    mode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  };
+  static defaultProps = {
+    baseSet: baseSet,
+    noDecimal: false,
+  };
+
+  constructor(props) {
+    super(props);
+    this.keypadRef = React.createRef();
+  }
+
+  componentDidMount() {
+    const keyPadElement = this.keypadRef?.current;
+    const mainContainer = keyPadElement?.closest('.main-container');
+    const currentToolbar = keyPadElement?.closest('.pie-toolbar');
+
+    // need only for math keyboard so we need also controlledKeypadMode
+    if (this.props.controlledKeypadMode && mainContainer && currentToolbar) {
+      const mainContainerPosition = mainContainer.getBoundingClientRect();
+      const currentToolbarPosition = currentToolbar.getBoundingClientRect();
+      const difference =
+        mainContainerPosition.top +
+        mainContainerPosition.height -
+        (currentToolbarPosition.top + currentToolbarPosition.height);
+      if (difference < 0) {
+        const totalHeight = mainContainerPosition.height + mainContainerPosition.top - difference;
+        // increase the height of the main container if keyboard needs it
+        if (mainContainer) {
+          mainContainer.style.height = `${totalHeight}px`;
+        }
+      }
+    }
+
+    if (keyPadElement) {
+      keyPadElement.addEventListener('touchstart', this.handleKeypadInteraction, true);
+      keyPadElement.addEventListener('mousedown', this.handleKeypadInteraction, true);
+    }
+  }
+
+  componentWillUnmount() {
+    const keyPadElement = this.keypadRef?.current;
+    // need only for math keyboard
+    if (this.props.controlledKeypadMode && keyPadElement) {
+      const mainContainer = keyPadElement.closest('.main-container');
+
+      if (mainContainer) {
+        mainContainer.style.height = 'unset';
+      }
+    }
+
+    if (keyPadElement) {
+      keyPadElement.removeEventListener('touchstart', this.handleKeypadInteraction, true);
+      keyPadElement.removeEventListener('mousedown', this.handleKeypadInteraction, true);
+    }
+  }
+
+  handleKeypadInteraction = () => {
+    // Check if the setKeypadInteraction prop is available, which is used for both
+    // the language keypad and the special characters keypad
+    if (this.props.setKeypadInteraction) {
+      this.props.setKeypadInteraction(true);
+    }
+  };
+
+  buttonClick = (key) => {
+    log('[buttonClick]', key);
+    const { onPress } = this.props;
+
+    onPress(key);
+  };
+
+  flowKeys = (base, extras) => {
+    const transposed = [...sortKeys(base), ...sortKeys(extras)];
+    return flatten(transposed);
+  };
+
+  keyIsNotAllowed = (key) => {
+    const { noDecimal } = this.props;
+
+    if (((key.write === '.' && key.label === '.') || (key.write === ',' && key.label === ',')) && noDecimal) {
+      return true;
+    }
+
+    return false;
+  };
+
+  render() {
+    const { 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 || []);
+
+    const shift = allKeys.length % 5 ? 1 : 0;
+    const style = {
+      gridTemplateColumns: `repeat(${Math.floor(allKeys.length / 5) + shift}, minmax(min-content, 150px))`,
+      ...createCustomLayout(layoutForKeyPad),
+    };
+
+    return (
+      <KeyPadContainer
+        ref={this.keypadRef}
+        className={[className, mode].filter(Boolean).join(' ')}
+        style={style}
+        onFocus={onFocus}
+      >
+        {allKeys.map((k, index) => {
+          const onClick = this.buttonClick.bind(this, k);
+
+          if (!k) {
+            return <span key={`empty-${index}`} />;
+          }
+
+          const common = {
+            onClick,
+            disabled: this.keyIsNotAllowed(k),
+            key: `${k.label || k.latex || k.command}-${index}`,
+            ...(k.actions || {}),
+            ...(k.extraProps || {}),
+          };
+
+          if (k.latex) {
+            return (
+              <StyledLatexButtonWrapper
+                key={common.key}
+                onClick={common.onClick}
+                disabled={common.disabled}
+                category={!keysWithoutBaseSet ? k.category : undefined}
+                aria-label={k.ariaLabel ? k.ariaLabel : k.name || k.label}
+                {...(k.actions || {})}
+                {...(k.extraProps || {})}
+              >
+                <LatexButtonContent latex={k.latex} />
+              </StyledLatexButtonWrapper>
+            );
+          }
+
+          if (k.label) {
+            return (
+              <StyledButton
+                key={common.key}
+                onClick={common.onClick}
+                disabled={common.disabled}
+                category={!keysWithoutBaseSet ? k.category : undefined}
+                isDelete={k.label === '⌫'}
+                isComma={k.label === ','}
+                isDot={k.label === '.'}
+                aria-label={k.ariaLabel ? k.ariaLabel : k.name || k.label}
+                {...(k.actions || {})}
+                {...(k.extraProps || {})}
+              >
+                {k.label}
+              </StyledButton>
+            );
+          } else {
+            const Icon = k.icon ? k.icon : 'div';
+
+            return (
+              <StyledIconButton
+                key={common.key}
+                tabIndex={'-1'}
+                onClick={common.onClick}
+                disabled={common.disabled}
+                category={!keysWithoutBaseSet ? k.category : undefined}
+                size="large"
+                {...(k.actions || {})}
+                {...(k.extraProps || {})}
+              >
+                <Icon className="icon" />
+              </StyledIconButton>
+            );
+          }
+        })}
+      </KeyPadContainer>
+    );
+  }
+}
+
+export default KeyPad;

package/src/keypad/keys-layout.js

@@ -0,0 +1,16 @@
+import { times, zip } from 'lodash-es';
+
+/**
+ * Sort additional keys.
+ *
+ * Expects an array of rows.
+ * @param {} keys
+ */
+export const sortKeys = (keys) => {
+  // add any missing rows
+  times(5 - keys.length, () => keys.push([]));
+
+  const out = zip.apply(null, keys);
+
+  return out;
+};

package/src/keys/__tests__/utils.test.js

@@ -0,0 +1,57 @@
+import { extendKeySet } from '../utils';
+import { gradeSets, keysForGrade } from '../grades';
+import * as comparison from '../../keys/comparison';
+
+describe('utils', () => {
+  const base = [[comparison.lessThan]];
+  describe('extendKeySet', () => {
+    it('removes duplicates by latex key', () => {
+      const extras = [{ name: 'foo', latex: '<', write: '<', label: 'less than' }];
+      const result = extendKeySet(base, extras);
+      const resultTwo = extendKeySet(base, []);
+      expect(result).toEqual(resultTwo);
+    });
+
+    it('removes duplicates by name key', () => {
+      const extras = [{ name: 'Less than', latex: 'this is latex', write: '<', label: '<' }];
+      const result = extendKeySet(base, extras);
+      const resultTwo = extendKeySet(base, []);
+      expect(result).toEqual(resultTwo);
+    });
+  });
+
+  describe('keysForGrade', () => {
+    it.each`
+      key                        | expected
+      ${'1'}                     | ${[]}
+      ${'2'}                     | ${[]}
+      ${'3'}                     | ${gradeSets[0].set}
+      ${'4'}                     | ${gradeSets[0].set}
+      ${'5'}                     | ${gradeSets[0].set}
+      ${'6'}                     | ${gradeSets[1].set}
+      ${'7'}                     | ${gradeSets[1].set}
+      ${'8'}                     | ${gradeSets[2].set}
+      ${'9'}                     | ${gradeSets[2].set}
+      ${'HS'}                    | ${gradeSets[2].set}
+      ${'non-negative-integers'} | ${gradeSets[3].set}
+      ${'integers'}              | ${gradeSets[4].set}
+      ${'decimals'}              | ${gradeSets[5].set}
+      ${'fractions'}             | ${gradeSets[6].set}
+      ${'geometry'}              | ${gradeSets[7].set}
+      ${'advanced-algebra'}      | ${gradeSets[8].set}
+      ${'statistics'}            | ${gradeSets[9].set}
+      ${'something else'}        | ${gradeSets[2].set}
+      ${undefined}               | ${[]}
+      ${null}                    | ${[]}
+      ${0}                       | ${[]}
+      ${'0'}                     | ${[]}
+    `('$key => $expected', ({ key, expected }) => {
+      expect(keysForGrade(key)).toEqual(expected);
+
+      const n = parseInt(key, 10);
+      if (!isNaN(n)) {
+        expect(keysForGrade(n)).toEqual(expected);
+      }
+    });
+  });
+});

package/src/keys/basic-operators.js

@@ -0,0 +1,32 @@
+import { DIVIDE, MULTIPLY } from './chars';
+import { mkSet } from './utils';
+
+const set = mkSet('operators');
+
+export const equals = set({
+  write: '=',
+  label: '=',
+});
+
+export const plus = set({
+  write: '+',
+  label: '+',
+});
+
+export const minus = set({
+  write: '−',
+  label: '−',
+});
+
+export const divide = set({
+  name: 'divide',
+  label: DIVIDE,
+  command: '\\divide',
+  otherNotation: '\\div',
+});
+
+export const multiply = set({
+  name: 'multiply',
+  label: MULTIPLY,
+  command: '\\times',
+});

package/src/keys/chars.js

@@ -0,0 +1,5 @@
+export const DELETE = '\u232B';
+export const LEFT_ARROW = '◀';
+export const RIGHT_ARROW = '▶';
+export const DIVIDE = '\u00F7';
+export const MULTIPLY = '\u00D7';

package/src/keys/comparison.js

@@ -0,0 +1,28 @@
+const set = (o) => ({ ...o, category: 'comparison' });
+
+export const lessThan = set({
+  name: 'Less than',
+  latex: '<',
+  command: '\\lt',
+});
+
+export const greaterThan = set({
+  name: 'Greater than',
+  latex: '>',
+  command: '\\gt',
+});
+
+export const lessThanEqual = set({
+  name: 'Less than or equal',
+  latex: '\\le',
+  symbol: '<=',
+  command: '\\le',
+  ariaLabel: 'less than or equal to',
+});
+
+export const greaterThanEqual = set({
+  name: 'Greater than or equal',
+  symbol: '>=',
+  command: '\\ge',
+  latex: '\\ge',
+});

package/src/keys/constants.js

@@ -0,0 +1,35 @@
+import { mkSet } from './utils';
+
+const set = mkSet('constants');
+
+export const pi = set({
+  name: 'Pi',
+  label: 'π',
+  latex: '\\pi',
+  command: '\\pi',
+  category: 'constants',
+});
+
+export const eulers = set({
+  name: 'Eulers',
+  label: 'e',
+  latex: 'e',
+  command: 'e',
+  category: 'constants',
+});
+
+export const infinity = set({
+  name: 'Infinity',
+  label: '\\infty',
+  latex: '\\infty',
+  command: '\\infty',
+  category: 'constants',
+});
+
+export const halfInfinity = set({
+  name: 'Half Infinity',
+  label: '\\propto',
+  latex: '\\propto',
+  command: '\\propto',
+  category: 'constants',
+});

package/src/keys/digits.js

@@ -0,0 +1,40 @@
+import { times } from 'lodash-es';
+
+const digitMap = {
+  0: 'zero',
+  1: 'one',
+  2: 'two',
+  3: 'three',
+  4: 'four',
+  5: 'five',
+  6: 'six',
+  7: 'seven',
+  8: 'eight',
+  9: 'nine',
+};
+
+const comma = { name: 'comma', label: ',', write: ',', category: 'digit' };
+
+const decimalPoint = {
+  name: 'decimal-point',
+  label: '.',
+  write: '.',
+  category: 'digit',
+};
+
+export default times(10, String)
+  .map((n) => {
+    return {
+      name: digitMap[n],
+      write: n,
+      label: n,
+      category: 'digit',
+    };
+  })
+  .reduce(
+    (acc, o) => {
+      acc[o.name] = o;
+      return acc;
+    },
+    { comma, decimalPoint },
+  );

package/src/keys/edit.js

@@ -0,0 +1,3 @@
+import { DELETE } from './chars';
+
+export const del = { label: DELETE, category: 'edit', keystroke: 'Backspace', ariaLabel: 'Delete' };