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

package/src/components/characters/custom-popper.js

@@ -1,34 +1,24 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Popper from '@material-ui/core/Popper';
-import Typography from '@material-ui/core/Typography';
+import { styled } from '@mui/material/styles';
+import Popper from '@mui/material/Popper';
+import Typography from '@mui/material/Typography';
 
-const styles = () => ({
-  popover: {
-    background: '#fff',
-    padding: '10px',
-    pointerEvents: 'none',
-    zIndex: 99999,
-  },
-  paper: {
-    padding: 20,
-    height: 'auto',
-    width: 'auto',
-  },
-  typography: {
-    fontSize: 50,
-    textAlign: 'center',
-  },
+const StyledPopper = styled(Popper)({
+  background: '#fff',
+  padding: '10px',
+  pointerEvents: 'none',
+  zIndex: 99999,
 });
 
-const CustomPopper = withStyles(styles)(({ classes, children, ...props }) => (
-  <Popper
+const StyledTypography = styled(Typography)({
+  fontSize: 50,
+  textAlign: 'center',
+});
+
+const CustomPopper = ({ children, ...props }) => (
+  <StyledPopper
     id="mouse-over-popover"
     open
-    className={classes.popover}
-    classes={{
-      paper: classes.paper,
-    }}
     anchorOrigin={{
       vertical: 'bottom',
       horizontal: 'left',
@@ -41,8 +31,8 @@ const CustomPopper = withStyles(styles)(({ classes, children, ...props }) => (
     disableAutoFocus
     {...props}
   >
-    <Typography classes={{ root: classes.typography }}>{children}</Typography>
-  </Popper>
-));
+    <StyledTypography>{children}</StyledTypography>
+  </StyledPopper>
+);
 
 export default CustomPopper;

package/src/components/common/done-button.jsx

@@ -1,38 +1,27 @@
 import React from 'react';
 
-import IconButton from '@material-ui/core/IconButton';
-import Check from '@material-ui/icons/Check';
-import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@mui/material/IconButton';
+import Check from '@mui/icons-material/Check';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 
-export const RawDoneButton = ({ classes, onClick, doneButtonRef }) => (
-  <IconButton
-    aria-label="Done"
-    className={classes.iconRoot}
-    buttonRef={doneButtonRef}
-    onClick={onClick}
-    classes={{
-      label: classes.label,
-      root: classes.iconRoot,
-    }}
-  >
+const StyledIconButton = styled(IconButton)({
+  verticalAlign: 'top',
+  width: '28px',
+  height: '28px',
+  color: 'var(--editable-html-toolbar-check, #00bb00)',
+  padding: '4px',
+});
+
+export const RawDoneButton = ({ onClick, doneButtonRef }) => (
+  <StyledIconButton aria-label="Done" buttonRef={doneButtonRef} onClick={onClick}>
     <Check />
-  </IconButton>
+  </StyledIconButton>
 );
 
 RawDoneButton.propTypes = {
-  classes: PropTypes.object.isRequired,
   onClick: PropTypes.func,
   doneButtonRef: PropTypes.func,
 };
 
-const styles = {
-  iconRoot: {
-    verticalAlign: 'top',
-    width: '28px',
-    height: '28px',
-    color: 'var(--editable-html-toolbar-check, #00bb00)',
-    padding: '4px',
-  },
-};
-export const DoneButton = withStyles(styles)(RawDoneButton);
+export const DoneButton = RawDoneButton;

package/src/components/common/toolbar-buttons.jsx

@@ -1,42 +1,33 @@
 import React from 'react';
 import debug from 'debug';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 
-const styles = (theme) => ({
-  button: {
-    color: 'grey',
-    display: 'inline-flex',
-    padding: '2px',
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    '&:hover': {
-      color: 'black',
-    },
-    '&:focus': {
-      outline: `2px solid ${theme.palette.grey[700]}`,
-    },
+const StyledButton = styled('button', {
+  shouldForwardProp: (prop) => !['active', 'disabled', 'extraStyles'].includes(prop),
+})(({ theme, active, disabled }) => ({
+  color: active ? 'black' : 'grey',
+  display: 'inline-flex',
+  padding: '2px',
+  background: 'none',
+  border: 'none',
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  '&:hover': {
+    color: disabled ? 'grey' : 'black',
   },
-  active: {
-    color: 'black',
+  '&:focus': {
+    outline: `2px solid ${theme.palette.grey[700]}`,
   },
-  disabled: {
+  ...(disabled && {
     opacity: 0.7,
-    cursor: 'not-allowed',
-    '& :hover': {
-      color: 'grey',
-    },
-  },
-});
+  }),
+}));
 
 const log = debug('pie-elements:editable-html:raw-button');
 
 export class RawButton extends React.Component {
   static propTypes = {
     onClick: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     active: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -64,31 +55,26 @@ export class RawButton extends React.Component {
   };
 
   render() {
-    const { active, classes, children, disabled, extraStyles, ariaLabel } = this.props;
-
-    const names = classNames(classes.button, {
-      [classes.active]: active,
-      [classes.disabled]: disabled,
-    });
+    const { active, children, disabled, extraStyles, ariaLabel } = this.props;
 
     return (
-      <button
+      <StyledButton
         style={extraStyles}
-        className={names}
+        active={active}
+        disabled={disabled}
         onMouseDown={this.onClick}
         onKeyDown={this.onKeyDown}
-        disabled={disabled}
         aria-label={ariaLabel}
         aria-pressed={active}
         tabIndex={0}
       >
         {children}
-      </button>
+      </StyledButton>
     );
   }
 }
 
-export const Button = withStyles(styles)(RawButton);
+export const Button = RawButton;
 
 export class RawMarkButton extends React.Component {
   static propTypes = {
@@ -96,7 +82,6 @@ export class RawMarkButton extends React.Component {
     mark: PropTypes.string,
     label: PropTypes.string.isRequired,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    classes: PropTypes.object.isRequired,
     active: PropTypes.bool,
   };
 
@@ -117,12 +102,11 @@ export class RawMarkButton extends React.Component {
   };
 
   render() {
-    const { classes, children, active, label } = this.props;
+    const { children, active, label } = this.props;
 
-    const names = classNames(classes.button, active && classes.active);
     return (
-      <button
-        className={names}
+      <StyledButton
+        active={active}
         onMouseDown={this.onToggle}
         aria-pressed={active}
         onKeyDown={this.onKeyDown}
@@ -130,9 +114,9 @@ export class RawMarkButton extends React.Component {
         tabIndex={0}
       >
         {children}
-      </button>
+      </StyledButton>
     );
   }
 }
 
-export const MarkButton = withStyles(styles)(RawMarkButton);
+export const MarkButton = RawMarkButton;

package/src/components/icons/CssIcon.jsx

@@ -1,17 +1,15 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const styles = (theme) => ({
-  icon: {
-    fontFamily: 'Cerebri Sans, Arial, sans-serif',
-    fontSize: theme.typography.fontSize,
-    fontWeight: 'bold',
-    lineHeight: '14px',
-    position: 'relative',
-    whiteSpace: 'nowrap',
-  },
-});
+const StyledCssIcon = styled('div')(({ theme }) => ({
+  fontFamily: 'Cerebri Sans, Arial, sans-serif',
+  fontSize: theme.typography.fontSize,
+  fontWeight: 'bold',
+  lineHeight: '14px',
+  position: 'relative',
+  whiteSpace: 'nowrap',
+}));
 
-const CssIcon = ({ classes }) => <div className={classes.icon}>CSS</div>;
+const CssIcon = () => <StyledCssIcon>CSS</StyledCssIcon>;
 
-export default withStyles(styles)(CssIcon);
+export default CssIcon;

package/src/components/icons/RespArea.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ChevronRight from '@material-ui/icons/ChevronRight';
-import MoreVert from '@material-ui/icons/MoreVert';
-import { withStyles } from '@material-ui/core/styles';
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import MoreVert from '@mui/icons-material/MoreVert';
+import { styled } from '@mui/material/styles';
 
 const getRotate = (direction) => {
   switch (direction) {
@@ -56,16 +56,16 @@ GripIcon.propTypes = {
   style: PropTypes.object,
 };
 
-export const ToolbarIcon = withStyles((theme) => ({
-  icon: {
-    fontFamily: 'Cerebri Sans !important',
-    fontSize: theme.typography.fontSize,
-    fontWeight: 'bold',
-    lineHeight: '14px',
-    position: 'relative',
-    top: '7px',
-    width: '110px',
-    height: '28px',
-    whiteSpace: 'nowrap',
-  },
-}))(({ classes }) => <div className={classes.icon}>+ Response Area</div>);
+const StyledToolbarIcon = styled('div')(({ theme }) => ({
+  fontFamily: 'Cerebri Sans !important',
+  fontSize: theme.typography.fontSize,
+  fontWeight: 'bold',
+  lineHeight: '14px',
+  position: 'relative',
+  top: '7px',
+  width: '110px',
+  height: '28px',
+  whiteSpace: 'nowrap',
+}));
+
+export const ToolbarIcon = () => <StyledToolbarIcon>+ Response Area</StyledToolbarIcon>;

package/src/components/icons/TableIcons.jsx

@@ -1,52 +1,51 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const styles = {
-  icon: {
-    fill: 'grey',
-    '&:hover': {
-      fill: 'black',
-    },
+const StyledPath = styled('path')({
+  fill: 'grey',
+  '&:hover': {
+    fill: 'black',
   },
-};
+});
 
 const SvgIcon = (Component) => {
-  return withStyles(styles)((props) => (
+  return (props) => (
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
-      <Component className={props.classes.icon} />
+      <Component {...props} />
     </svg>
-  ));
+  );
 };
+
 export const AddRow = SvgIcon((props) => (
-  <path
+  <StyledPath
     {...props}
     d="M22,10A2,2 0 0,1 20,12H4A2,2 0 0,1 2,10V3H4V5H8V3H10V5H14V3H16V5H20V3H22V10M4,10H8V7H4V10M10,10H14V7H10V10M20,10V7H16V10H20M11,14H13V17H16V19H13V22H11V19H8V17H11V14Z"
   />
 ));
 
 export const RemoveRow = SvgIcon((props) => (
-  <path
+  <StyledPath
     {...props}
     d="M9.41,13L12,15.59L14.59,13L16,14.41L13.41,17L16,19.59L14.59,21L12,18.41L9.41,21L8,19.59L10.59,17L8,14.41L9.41,13M22,9A2,2 0 0,1 20,11H4A2,2 0 0,1 2,9V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V9M4,9H8V6H4V9M10,9H14V6H10V9M16,9H20V6H16V9Z"
   />
 ));
 
 export const AddColumn = SvgIcon((props) => (
-  <path
+  <StyledPath
     {...props}
     d="M11,2A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H2V2H11M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M15,11H18V8H20V11H23V13H20V16H18V13H15V11Z"
   />
 ));
 
 export const RemoveColumn = SvgIcon((props) => (
-  <path
+  <StyledPath
     {...props}
     d="M4,2H11A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H4A2,2 0 0,1 2,20V4A2,2 0 0,1 4,2M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M17.59,12L15,9.41L16.41,8L19,10.59L21.59,8L23,9.41L20.41,12L23,14.59L21.59,16L19,13.41L16.41,16L15,14.59L17.59,12Z"
   />
 ));
 
 export const RemoveTable = SvgIcon((props) => (
-  <path
+  <StyledPath
     {...props}
     d="M15.46,15.88L16.88,14.46L19,16.59L21.12,14.46L22.54,15.88L20.41,18L22.54,20.12L21.12,21.54L19,19.41L16.88,21.54L15.46,20.12L17.59,18L15.46,15.88M4,3H18A2,2 0 0,1 20,5V12.08C18.45,11.82 16.92,12.18 15.68,13H12V17H13.08C12.97,17.68 12.97,18.35 13.08,19H4A2,2 0 0,1 2,17V5A2,2 0 0,1 4,3M4,7V11H10V7H4M12,7V11H18V7H12M4,13V17H10V13H4Z"
   />

package/src/components/icons/TextAlign.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import Collapse from '@material-ui/core/Collapse';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 
 export const AlignLeft = () => (
   <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/components/image/AltDialog.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import DialogContent from '@material-ui/core/DialogContent';
-import ArrowBackIos from '@material-ui/icons/ArrowBackIos';
-import TextField from '@material-ui/core/TextField';
-import DialogActions from '@material-ui/core/DialogActions';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import ArrowBackIos from '@mui/icons-material/ArrowBackIos';
+import TextField from '@mui/material/TextField';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
 import PropTypes from 'prop-types';
 
 export class AltDialog extends React.Component {

package/src/components/image/ImageToolbar.jsx

@@ -2,14 +2,32 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import debug from 'debug';
 import ReactDOM from 'react-dom';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 
 import AltDialog from './AltDialog';
 import { MarkButton } from '../common/toolbar-buttons';
 
 const log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');
 
+const StyledHolder = styled('div')(({ theme }) => ({
+  paddingLeft: theme.spacing.unit,
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+const StyledAltText = styled('span', {
+  shouldForwardProp: (prop) => !['disabled', 'hasAlignmentButtons'].includes(prop),
+})(({ disabled, hasAlignmentButtons }) => ({
+  ...(disabled && {
+    opacity: 0.5,
+  }),
+  ...(hasAlignmentButtons && {
+    borderLeft: '1px solid grey',
+    paddingLeft: 8,
+    marginLeft: 4,
+  }),
+}));
+
 const AlignmentButton = ({ alignment, active, onClick }) => {
   return (
     <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>
@@ -27,7 +45,6 @@ AlignmentButton.propTypes = {
 export class ImageToolbar extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
     alignment: PropTypes.string,
     alt: PropTypes.string,
     imageLoaded: PropTypes.bool,
@@ -57,9 +74,9 @@ export class ImageToolbar extends React.Component {
   };
 
   render() {
-    const { classes, alignment, imageLoaded, disableImageAlignmentButtons } = this.props;
+    const { alignment, imageLoaded, disableImageAlignmentButtons } = this.props;
     return (
-      <div className={classes.holder}>
+      <StyledHolder>
         {!disableImageAlignmentButtons && (
           <>
             <AlignmentButton alignment={'left'} active={alignment === 'left'} onClick={this.onAlignmentClick} />
@@ -67,34 +84,16 @@ export class ImageToolbar extends React.Component {
             <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />
           </>
         )}
-        <span
-          className={classNames({
-            [classes.disabled]: !imageLoaded,
-            [classes.altButton]: !disableImageAlignmentButtons,
-          })}
+        <StyledAltText
+          disabled={!imageLoaded}
+          hasAlignmentButtons={!disableImageAlignmentButtons}
           onMouseDown={(event) => imageLoaded && this.renderDialog(event)}
         >
           Alt text
-        </span>
-      </div>
+        </StyledAltText>
+      </StyledHolder>
     );
   }
 }
 
-const styles = (theme) => ({
-  holder: {
-    paddingLeft: theme.spacing.unit,
-    display: 'flex',
-    alignItems: 'center',
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-  altButton: {
-    borderLeft: '1px solid grey',
-    paddingLeft: 8,
-    marginLeft: 4,
-  },
-});
-
-export default withStyles(styles)(ImageToolbar);
+export default ImageToolbar;