@pie-lib/editable-html-tip-tap 1.0.19 → 1.0.21-next.6053

package/src/extensions/custom-toolbar-wrapper.jsx

@@ -1,99 +1,79 @@
 import React, { useCallback } from 'react';
-import IconButton from '@material-ui/core/IconButton';
-import Delete from '@material-ui/icons/Delete';
+import IconButton from '@mui/material/IconButton';
+import Delete from '@mui/icons-material/Delete';
 import classNames from 'classnames';
 import { PIE_TOOLBAR__CLASS } from '../constants';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { DoneButton } from '../components/common/done-button';
 
+const StyledToolbar = styled('div', {
+  shouldForwardProp: (prop) => !['showDone', 'toolbarAlignment', 'isFocused', 'autoWidth', 'isHidden'].includes(prop),
+})(({ showDone, toolbarAlignment, isFocused, autoWidth, isHidden }) => ({
+  position: 'absolute',
+  zIndex: 10,
+  cursor: 'pointer',
+  justifyContent: 'space-between',
+  background: 'var(--editable-html-toolbar-bg, #efefef)',
+  minWidth: showDone ? '280px' : '265px',
+  margin: '5px 0 0 0',
+  padding: '2px',
+  boxShadow:
+    '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
+  boxSizing: 'border-box',
+  display: 'flex',
+  opacity: 1,
+  ...(toolbarAlignment === 'right' && {
+    right: 0,
+  }),
+  ...(autoWidth
+    ? {
+        width: 'auto',
+      }
+    : {
+        width: '100%',
+      }),
+  ...(isHidden && {
+    visibility: 'hidden',
+  }),
+}));
+
+const StyledIconButton = styled(IconButton)({
+  width: '28px',
+  height: '28px',
+  padding: '4px',
+  verticalAlign: 'top',
+});
+
+const SharedContainer = styled('div')({
+  display: 'flex',
+});
+
 function CustomToolbarWrapper(props) {
-  const {
-    children,
-    deletable,
-    classes,
-    toolbarOpts,
-    autoWidth,
-    isFocused,
-    doneButtonRef,
-    onDelete,
-    showDone,
-    onDone,
-  } = props;
-  const names = classNames(classes.toolbar, PIE_TOOLBAR__CLASS, {
-    [classes.toolbarWithNoDone]: !showDone,
-    [classes.toolbarRight]: toolbarOpts.alignment === 'right',
-    [classes.focused]: toolbarOpts.alwaysVisible || isFocused,
-    [classes.autoWidth]: autoWidth,
-    [classes.fullWidth]: !autoWidth,
-    [classes.hidden]: toolbarOpts.isHidden === true,
-  });
+  const { children, deletable, toolbarOpts, autoWidth, isFocused, doneButtonRef, onDelete, showDone, onDone } = props;
   const customStyles = toolbarOpts.minWidth !== undefined ? { minWidth: toolbarOpts.minWidth } : {};
 
   return (
-    <div className={names} style={{ ...customStyles }}>
+    <StyledToolbar
+      className={PIE_TOOLBAR__CLASS}
+      showDone={showDone}
+      toolbarAlignment={toolbarOpts.alignment}
+      isFocused={toolbarOpts.alwaysVisible || isFocused}
+      autoWidth={autoWidth}
+      isHidden={toolbarOpts.isHidden === true}
+      style={{ ...customStyles }}
+    >
       {children}
 
-      <div className={classes.shared}>
+      <SharedContainer>
         {deletable && (
-          <IconButton
-            aria-label="Delete"
-            className={classes.iconRoot}
-            onMouseDown={(e) => onDelete?.(e)}
-            classes={{
-              root: classes.iconRoot,
-            }}
-          >
+          <StyledIconButton aria-label="Delete" onMouseDown={(e) => onDelete?.(e)}>
             <Delete />
-          </IconButton>
+          </StyledIconButton>
         )}
         {showDone && <DoneButton doneButtonRef={doneButtonRef} onClick={onDone} />}
-      </div>
-    </div>
+      </SharedContainer>
+    </StyledToolbar>
   );
 }
 
-const style = {
-  toolbar: {
-    position: 'absolute',
-    zIndex: 10,
-    cursor: 'pointer',
-    justifyContent: 'space-between',
-    background: 'var(--editable-html-toolbar-bg, #efefef)',
-    minWidth: '280px',
-    margin: '5px 0 0 0',
-    padding: '2px',
-    boxShadow:
-      '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
-    boxSizing: 'border-box',
-    display: 'flex',
-    opacity: 1,
-  },
-  toolbarWithNoDone: {
-    minWidth: '265px',
-  },
-  toolbarRight: {
-    right: 0,
-  },
-  fullWidth: {
-    width: '100%',
-  },
-  hidden: {
-    visibility: 'hidden',
-  },
-  autoWidth: {
-    width: 'auto',
-  },
-  iconRoot: {
-    width: '28px',
-    height: '28px',
-    padding: '4px',
-    verticalAlign: 'top',
-  },
-  label: {
-    color: 'var(--editable-html-toolbar-check, #00bb00)',
-  },
-  shared: {
-    display: 'flex',
-  },
-};
-export default withStyles(style, { index: 1000 })(CustomToolbarWrapper);
+export default CustomToolbarWrapper;

package/lib/__tests__/utils.js

@@ -1,106 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.classObject = classObject;
-exports.mockComponents = mockComponents;
-exports.mockIconButton = mockIconButton;
-exports.mockMathInput = mockMathInput;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _react = _interopRequireDefault(require("react"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function classObject() {
-  var out = {};
-
-  for (var a in arguments) {
-    var value = arguments[a];
-    out[value] = value;
-  }
-
-  return out;
-}
-
-function mockComponents() {
-  var _arguments = arguments;
-  var out = {};
-
-  var _loop = function _loop() {
-    var value = _arguments[a];
-
-    out[value] = /*#__PURE__*/function (_React$Component) {
-      (0, _inherits2["default"])(_class, _React$Component);
-
-      var _super = _createSuper(_class);
-
-      function _class() {
-        (0, _classCallCheck2["default"])(this, _class);
-        return _super.apply(this, arguments);
-      }
-
-      (0, _createClass2["default"])(_class, [{
-        key: "render",
-        value: function render() {
-          return /*#__PURE__*/_react["default"].createElement("div", {
-            "data-mock-component": "true"
-          }, value);
-        }
-      }]);
-      return _class;
-    }(_react["default"].Component);
-  };
-
-  for (var a in arguments) {
-    _loop();
-  }
-
-  return out;
-}
-
-function mockIconButton() {
-  jest.mock('@material-ui/core/IconButton', function () {
-    return function (props) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: props.className,
-        style: props.style,
-        ariaLabel: props['aria-label']
-      });
-    };
-  });
-}
-
-function mockMathInput() {
-  jest.mock('@pie-lib/math-input', function () {
-    return _objectSpread({
-      addBrackets: jest.fn(function (s) {
-        return s;
-      }),
-      removeBrackets: jest.fn(function (s) {
-        return s;
-      })
-    }, mockComponents('Keypad', 'MathQuillInput', 'EditableMathInput', 'HorizontalKeypad'));
-  });
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9fX3Rlc3RzX18vdXRpbHMuanMiXSwibmFtZXMiOlsiY2xhc3NPYmplY3QiLCJvdXQiLCJhIiwiYXJndW1lbnRzIiwidmFsdWUiLCJtb2NrQ29tcG9uZW50cyIsIlJlYWN0IiwiQ29tcG9uZW50IiwibW9ja0ljb25CdXR0b24iLCJqZXN0IiwibW9jayIsInByb3BzIiwiY2xhc3NOYW1lIiwic3R5bGUiLCJtb2NrTWF0aElucHV0IiwiYWRkQnJhY2tldHMiLCJmbiIsInMiLCJyZW1vdmVCcmFja2V0cyJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7Ozs7Ozs7Ozs7QUFFTyxTQUFTQSxXQUFULEdBQXVCO0FBQzVCLE1BQU1DLEdBQUcsR0FBRyxFQUFaOztBQUNBLE9BQUssSUFBSUMsQ0FBVCxJQUFjQyxTQUFkLEVBQXlCO0FBQ3ZCLFFBQU1DLEtBQUssR0FBR0QsU0FBUyxDQUFDRCxDQUFELENBQXZCO0FBQ0FELElBQUFBLEdBQUcsQ0FBQ0csS0FBRCxDQUFILEdBQWFBLEtBQWI7QUFDRDs7QUFDRCxTQUFPSCxHQUFQO0FBQ0Q7O0FBRU0sU0FBU0ksY0FBVCxHQUEwQjtBQUFBO0FBQy9CLE1BQU1KLEdBQUcsR0FBRyxFQUFaOztBQUQrQjtBQUc3QixRQUFNRyxLQUFLLEdBQUdELFVBQVMsQ0FBQ0QsQ0FBRCxDQUF2Qjs7QUFDQUQsSUFBQUEsR0FBRyxDQUFDRyxLQUFELENBQUg7QUFBQTs7QUFBQTs7QUFBQTtBQUFBO0FBQUE7QUFBQTs7QUFBQTtBQUFBO0FBQUEsZUFDRSxrQkFBUztBQUNQLDhCQUFPO0FBQUssbUNBQW9CO0FBQXpCLGFBQWlDQSxLQUFqQyxDQUFQO0FBQ0Q7QUFISDtBQUFBO0FBQUEsTUFBMkJFLGtCQUFNQyxTQUFqQztBQUo2Qjs7QUFFL0IsT0FBSyxJQUFJTCxDQUFULElBQWNDLFNBQWQsRUFBeUI7QUFBQTtBQU94Qjs7QUFDRCxTQUFPRixHQUFQO0FBQ0Q7O0FBRU0sU0FBU08sY0FBVCxHQUEwQjtBQUMvQkMsRUFBQUEsSUFBSSxDQUFDQyxJQUFMLENBQVUsOEJBQVYsRUFBMEMsWUFBTTtBQUM5QyxXQUFPLFVBQUNDLEtBQUQ7QUFBQSwwQkFBVztBQUFLLFFBQUEsU0FBUyxFQUFFQSxLQUFLLENBQUNDLFNBQXRCO0FBQWlDLFFBQUEsS0FBSyxFQUFFRCxLQUFLLENBQUNFLEtBQTlDO0FBQXFELFFBQUEsU0FBUyxFQUFFRixLQUFLLENBQUMsWUFBRDtBQUFyRSxRQUFYO0FBQUEsS0FBUDtBQUNELEdBRkQ7QUFHRDs7QUFDTSxTQUFTRyxhQUFULEdBQXlCO0FBQzlCTCxFQUFBQSxJQUFJLENBQUNDLElBQUwsQ0FBVSxxQkFBVixFQUFpQztBQUFBO0FBQy9CSyxNQUFBQSxXQUFXLEVBQUVOLElBQUksQ0FBQ08sRUFBTCxDQUFRLFVBQUNDLENBQUQ7QUFBQSxlQUFPQSxDQUFQO0FBQUEsT0FBUixDQURrQjtBQUUvQkMsTUFBQUEsY0FBYyxFQUFFVCxJQUFJLENBQUNPLEVBQUwsQ0FBUSxVQUFDQyxDQUFEO0FBQUEsZUFBT0EsQ0FBUDtBQUFBLE9BQVI7QUFGZSxPQUc1QlosY0FBYyxDQUFDLFFBQUQsRUFBVyxnQkFBWCxFQUE2QixtQkFBN0IsRUFBa0Qsa0JBQWxELENBSGM7QUFBQSxHQUFqQztBQUtEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIGNsYXNzT2JqZWN0KCkge1xuICBjb25zdCBvdXQgPSB7fTtcbiAgZm9yICh2YXIgYSBpbiBhcmd1bWVudHMpIHtcbiAgICBjb25zdCB2YWx1ZSA9IGFyZ3VtZW50c1thXTtcbiAgICBvdXRbdmFsdWVdID0gdmFsdWU7XG4gIH1cbiAgcmV0dXJuIG91dDtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIG1vY2tDb21wb25lbnRzKCkge1xuICBjb25zdCBvdXQgPSB7fTtcbiAgZm9yICh2YXIgYSBpbiBhcmd1bWVudHMpIHtcbiAgICBjb25zdCB2YWx1ZSA9IGFyZ3VtZW50c1thXTtcbiAgICBvdXRbdmFsdWVdID0gY2xhc3MgZXh0ZW5kcyBSZWFjdC5Db21wb25lbnQge1xuICAgICAgcmVuZGVyKCkge1xuICAgICAgICByZXR1cm4gPGRpdiBkYXRhLW1vY2stY29tcG9uZW50PVwidHJ1ZVwiPnt2YWx1ZX08L2Rpdj47XG4gICAgICB9XG4gICAgfTtcbiAgfVxuICByZXR1cm4gb3V0O1xufVxuXG5leHBvcnQgZnVuY3Rpb24gbW9ja0ljb25CdXR0b24oKSB7XG4gIGplc3QubW9jaygnQG1hdGVyaWFsLXVpL2NvcmUvSWNvbkJ1dHRvbicsICgpID0+IHtcbiAgICByZXR1cm4gKHByb3BzKSA9PiA8ZGl2IGNsYXNzTmFtZT17cHJvcHMuY2xhc3NOYW1lfSBzdHlsZT17cHJvcHMuc3R5bGV9IGFyaWFMYWJlbD17cHJvcHNbJ2FyaWEtbGFiZWwnXX0gLz47XG4gIH0pO1xufVxuZXhwb3J0IGZ1bmN0aW9uIG1vY2tNYXRoSW5wdXQoKSB7XG4gIGplc3QubW9jaygnQHBpZS1saWIvbWF0aC1pbnB1dCcsICgpID0+ICh7XG4gICAgYWRkQnJhY2tldHM6IGplc3QuZm4oKHMpID0+IHMpLFxuICAgIHJlbW92ZUJyYWNrZXRzOiBqZXN0LmZuKChzKSA9PiBzKSxcbiAgICAuLi5tb2NrQ29tcG9uZW50cygnS2V5cGFkJywgJ01hdGhRdWlsbElucHV0JywgJ0VkaXRhYmxlTWF0aElucHV0JywgJ0hvcml6b250YWxLZXlwYWQnKSxcbiAgfSkpO1xufVxuIl19

package/src/__tests__/utils.js

@@ -1,36 +0,0 @@
-import React from 'react';
-
-export function classObject() {
-  const out = {};
-  for (var a in arguments) {
-    const value = arguments[a];
-    out[value] = value;
-  }
-  return out;
-}
-
-export function mockComponents() {
-  const out = {};
-  for (var a in arguments) {
-    const value = arguments[a];
-    out[value] = class extends React.Component {
-      render() {
-        return <div data-mock-component="true">{value}</div>;
-      }
-    };
-  }
-  return out;
-}
-
-export function mockIconButton() {
-  jest.mock('@material-ui/core/IconButton', () => {
-    return (props) => <div className={props.className} style={props.style} ariaLabel={props['aria-label']} />;
-  });
-}
-export function mockMathInput() {
-  jest.mock('@pie-lib/math-input', () => ({
-    addBrackets: jest.fn((s) => s),
-    removeBrackets: jest.fn((s) => s),
-    ...mockComponents('Keypad', 'MathQuillInput', 'EditableMathInput', 'HorizontalKeypad'),
-  }));
-}