@pie-lib/config-ui 11.30.0-mui-update.0 → 11.30.1-beta-1

package/lib/with-stateful-model.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-stateful-model.js","names":["_react","_interopRequireDefault","require","_propTypes","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","withStatefulModel","Component","Stateful","_React$Component","props","_this","_classCallCheck2","_defineProperty2","model","setState","onChange","state","_inherits2","_createClass2","key","value","UNSAFE_componentWillReceiveProps","render","createElement","React","PropTypes","object","isRequired","func","_default","exports"],"sources":["../src/with-stateful-model.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst withStatefulModel = (Component) => {\n  class Stateful extends React.Component {\n    static propTypes = {\n      model: PropTypes.object.isRequired,\n      onChange: PropTypes.func.isRequired,\n    };\n\n    constructor(props) {\n      super(props);\n      this.state = {\n        model: props.model,\n      };\n    }\n\n    UNSAFE_componentWillReceiveProps(props) {\n      this.setState({ model: props.model });\n    }\n\n    onChange = (model) => {\n      this.setState({ model }, () => {\n        this.props.onChange(this.state.model);\n      });\n    };\n\n    render() {\n      return <Component model={this.state.model} onChange={this.onChange} />;\n    }\n  }\n\n  return Stateful;\n};\n\nexport default withStatefulModel;\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAmC,SAAAE,WAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,WAAAD,CAAA,OAAAE,gBAAA,aAAAF,CAAA,OAAAG,2BAAA,aAAAJ,CAAA,EAAAK,yBAAA,KAAAC,OAAA,CAAAC,SAAA,CAAAN,CAAA,EAAAC,CAAA,YAAAC,gBAAA,aAAAH,CAAA,EAAAQ,WAAA,IAAAP,CAAA,CAAAQ,KAAA,CAAAT,CAAA,EAAAE,CAAA;AAAA,SAAAG,0BAAA,cAAAL,CAAA,IAAAU,OAAA,CAAAC,SAAA,CAAAC,OAAA,CAAAC,IAAA,CAAAP,OAAA,CAAAC,SAAA,CAAAG,OAAA,iCAAAV,CAAA,aAAAK,yBAAA,YAAAA,0BAAA,aAAAL,CAAA;AAEnC,IAAMc,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,SAAS,EAAK;EAAA,IACjCC,QAAQ,0BAAAC,gBAAA;IAMZ,SAAAD,SAAYE,KAAK,EAAE;MAAA,IAAAC,KAAA;MAAA,IAAAC,gBAAA,mBAAAJ,QAAA;MACjBG,KAAA,GAAApB,UAAA,OAAAiB,QAAA,GAAME,KAAK;MAAE,IAAAG,gBAAA,aAAAF,KAAA,cAUJ,UAACG,KAAK,EAAK;QACpBH,KAAA,CAAKI,QAAQ,CAAC;UAAED,KAAK,EAALA;QAAM,CAAC,EAAE,YAAM;UAC7BH,KAAA,CAAKD,KAAK,CAACM,QAAQ,CAACL,KAAA,CAAKM,KAAK,CAACH,KAAK,CAAC;QACvC,CAAC,CAAC;MACJ,CAAC;MAbCH,KAAA,CAAKM,KAAK,GAAG;QACXH,KAAK,EAAEJ,KAAK,CAACI;MACf,CAAC;MAAC,OAAAH,KAAA;IACJ;IAAC,IAAAO,UAAA,aAAAV,QAAA,EAAAC,gBAAA;IAAA,WAAAU,aAAA,aAAAX,QAAA;MAAAY,GAAA;MAAAC,KAAA,EAED,SAAAC,gCAAgCA,CAACZ,KAAK,EAAE;QACtC,IAAI,CAACK,QAAQ,CAAC;UAAED,KAAK,EAAEJ,KAAK,CAACI;QAAM,CAAC,CAAC;MACvC;IAAC;MAAAM,GAAA;MAAAC,KAAA,EAQD,SAAAE,MAAMA,CAAA,EAAG;QACP,oBAAOpC,MAAA,YAAAqC,aAAA,CAACjB,SAAS;UAACO,KAAK,EAAE,IAAI,CAACG,KAAK,CAACH,KAAM;UAACE,QAAQ,EAAE,IAAI,CAACA;QAAS,CAAE,CAAC;MACxE;IAAC;EAAA,EAzBoBS,iBAAK,CAAClB,SAAS;EAAA,IAAAM,gBAAA,aAAhCL,QAAQ,eACO;IACjBM,KAAK,EAAEY,qBAAS,CAACC,MAAM,CAACC,UAAU;IAClCZ,QAAQ,EAAEU,qBAAS,CAACG,IAAI,CAACD;EAC3B,CAAC;EAwBH,OAAOpB,QAAQ;AACjB,CAAC;AAAC,IAAAsB,QAAA,GAAAC,OAAA,cAEazB,iBAAiB","ignoreList":[]}
+{"version":3,"sources":["../src/with-stateful-model.jsx"],"names":["withStatefulModel","Component","Stateful","props","model","setState","onChange","state","React","PropTypes","object","isRequired","func"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,SAAD,EAAe;AAAA,MACjCC,QADiC;AAAA;;AAAA;;AAOrC,sBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,gCAAMA,KAAN;AADiB,mGAWR,UAACC,KAAD,EAAW;AACpB,cAAKC,QAAL,CAAc;AAAED,UAAAA,KAAK,EAALA;AAAF,SAAd,EAAyB,YAAM;AAC7B,gBAAKD,KAAL,CAAWG,QAAX,CAAoB,MAAKC,KAAL,CAAWH,KAA/B;AACD,SAFD;AAGD,OAfkB;AAEjB,YAAKG,KAAL,GAAa;AACXH,QAAAA,KAAK,EAAED,KAAK,CAACC;AADF,OAAb;AAFiB;AAKlB;;AAZoC;AAAA;AAAA,aAcrC,0CAAiCD,KAAjC,EAAwC;AACtC,aAAKE,QAAL,CAAc;AAAED,UAAAA,KAAK,EAAED,KAAK,CAACC;AAAf,SAAd;AACD;AAhBoC;AAAA;AAAA,aAwBrC,kBAAS;AACP,4BAAO,gCAAC,SAAD;AAAW,UAAA,KAAK,EAAE,KAAKG,KAAL,CAAWH,KAA7B;AAAoC,UAAA,QAAQ,EAAE,KAAKE;AAAnD,UAAP;AACD;AA1BoC;AAAA;AAAA,IAChBE,kBAAMP,SADU;;AAAA,mCACjCC,QADiC,eAElB;AACjBE,IAAAA,KAAK,EAAEK,sBAAUC,MAAV,CAAiBC,UADP;AAEjBL,IAAAA,QAAQ,EAAEG,sBAAUG,IAAV,CAAeD;AAFR,GAFkB;AA6BvC,SAAOT,QAAP;AACD,CA9BD;;eAgCeF,iB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst withStatefulModel = (Component) => {\n  class Stateful extends React.Component {\n    static propTypes = {\n      model: PropTypes.object.isRequired,\n      onChange: PropTypes.func.isRequired,\n    };\n\n    constructor(props) {\n      super(props);\n      this.state = {\n        model: props.model,\n      };\n    }\n\n    UNSAFE_componentWillReceiveProps(props) {\n      this.setState({ model: props.model });\n    }\n\n    onChange = (model) => {\n      this.setState({ model }, () => {\n        this.props.onChange(this.state.model);\n      });\n    };\n\n    render() {\n      return <Component model={this.state.model} onChange={this.onChange} />;\n    }\n  }\n\n  return Stateful;\n};\n\nexport default withStatefulModel;\n"],"file":"with-stateful-model.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/config-ui",
-  "version": "11.30.0-mui-update.0",
+  "version": "11.30.1-beta-1",
   "main": "lib/index.js",
   "module": "src/index.js",
   "publishConfig": {
@@ -8,13 +8,11 @@
   },
   "scripts": {},
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/style": "^0.8.0",
-    "@mui/icons-material": "^7.3.4",
-    "@mui/material": "^7.3.4",
-    "@pie-lib/editable-html": "^11.22.0-mui-update.0",
-    "@pie-lib/icons": "^2.25.0-mui-update.0",
-    "@pie-lib/render-ui": "^4.36.0-mui-update.0",
+    "@material-ui/core": "^3.8.3",
+    "@material-ui/icons": "^3.0.2",
+    "@pie-lib/editable-html-tip-tap": "^1.0.3",
+    "@pie-lib/icons": "^2.24.1",
+    "@pie-lib/render-ui": "^4.35.1",
     "assert": "^1.4.1",
     "classnames": "^2.2.6",
     "complex.js": "2.1.1",
@@ -25,11 +23,11 @@
     "react-measure": "^2.2.2"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "18.2.0"
   },
-  "gitHead": "2e0222bda045f46b504640a972d43787e68288c4"
+  "gitHead": "ff5ec2ebe11110b7652812a10c6dc230f08e12cb"
 }

package/src/__tests__/number-text-field.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { NumberTextField } from '../number-text-field';
-import TextField from '@mui/material/TextField';
+import TextField from '@material-ui/core/TextField';
 
 describe('NumberTextField', () => {
   describe('render', () => {

package/src/alert-dialog.jsx

@@ -1,22 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
 
-const StyledDialogTitle = styled(DialogTitle)(() => ({
-  fontSize: 'max(1.25rem, 18px)',
-}));
-
-const StyledDialogContentText = styled(DialogContentText)(() => ({
-  fontSize: 'max(1rem, 14px)',
-}));
-
-const AlertDialog = ({ text, title, onClose, onConfirm, open, onCloseText, onConfirmText }) => (
+const AlertDialog = ({ text, title, onClose, onConfirm, open, onCloseText, onConfirmText, classes }) => (
   <Dialog open={open} onClose={onClose}>
-    {title && <StyledDialogTitle>{title}</StyledDialogTitle>}
+    {title && <DialogTitle className={classes.heading}>{title}</DialogTitle>}
     {text && (
       <DialogContent>
-        <StyledDialogContentText>{text}</StyledDialogContentText>
+        <DialogContentText className={classes.subheading}>{text}</DialogContentText>
       </DialogContent>
     )}
     <DialogActions>
@@ -47,6 +39,18 @@ AlertDialog.propTypes = {
   open: PropTypes.bool,
   onConfirmText: PropTypes.string,
   onCloseText: PropTypes.string,
+  classes: PropTypes.object,
 };
 
-export default AlertDialog;
+const styles = () => ({
+  heading: {
+    '& h2': {
+      fontSize: 'max(1.25rem, 18px)',
+    },
+  },
+  subheading: {
+    fontSize: 'max(1rem, 14px)',
+  },
+});
+
+export default withStyles(styles)(AlertDialog);

package/src/checkbox.jsx

@@ -1,50 +1,27 @@
-import FormControlLabel from '@mui/material/FormControlLabel';
-import MuiCheckbox from '@mui/material/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import MuiCheckbox from '@material-ui/core/Checkbox';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { styled } from '@mui/material/styles';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import grey from '@material-ui/core/colors/grey';
 import { color } from '@pie-lib/render-ui';
-import { grey } from '@mui/material/colors';
 
-const StyledFormControlLabel = styled(FormControlLabel)(({ theme, mini }) => ({
-  margin: 0,
-  marginLeft: 0,
-  padding: 0,
-  '& .MuiFormControlLabel-label': {
-    fontSize: theme.typography.fontSize - 1,
-    transform: 'translate(-4%, 2%)',
-    color: 'rgba(0,0,0,1.0)',
-    ...(mini && {
-      marginLeft: theme.spacing(1),
-      color: grey[700],
-      fontSize: theme.typography.fontSize - 3,
-    }),
-  },
-}));
-
-const StyledCheckbox = styled(MuiCheckbox)(({ theme, mini, error }) => ({
-  color: `${color.tertiary()} !important`,
-  ...(mini && {
-    margin: 0,
-    padding: 0,
-    width: theme.spacing(3),
-    height: theme.spacing(3),
-  }),
-  ...(error && {
-    color: `${theme.palette.error.main} !important`,
-  }),
-}));
-
-const Checkbox = ({ mini, checked, onChange, value, label, error }) => (
-  <StyledFormControlLabel
-    mini={mini}
+const Checkbox = ({ mini, checked, onChange, value, label, classes, error }) => (
+  <FormControlLabel
+    className={classNames(classes.mini)}
+    classes={{
+      label: classNames(classes.label, { [classes.miniLabel]: mini }),
+    }}
     control={
-      <StyledCheckbox
+      <MuiCheckbox
         checked={checked}
         onChange={onChange}
         value={value}
-        mini={mini}
-        error={error}
+        className={classNames(classes.customColor, {
+          [classes.miniCheckbox]: mini,
+          [classes.error]: error,
+        })}
       />
     }
     label={label}
@@ -53,17 +30,44 @@ const Checkbox = ({ mini, checked, onChange, value, label, error }) => (
 
 Checkbox.propTypes = {
   mini: PropTypes.bool,
+  classes: PropTypes.object.isRequired,
   checked: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   value: PropTypes.string,
   label: PropTypes.string.isRequired,
-  error: PropTypes.bool,
 };
 
 Checkbox.defaultProps = {
   value: '',
   mini: false,
-  error: false,
 };
 
-export default Checkbox;
+export default withStyles((theme) => ({
+  label: {
+    fontSize: theme.typography.fontSize - 1,
+    transform: 'translate(-4%, 2%)',
+    color: 'rgba(0,0,0,1.0)',
+  },
+  miniCheckbox: {
+    margin: 0,
+    padding: 0,
+    width: theme.spacing.unit * 3,
+    height: theme.spacing.unit * 3,
+  },
+  miniLabel: {
+    marginLeft: theme.spacing.unit,
+    color: grey[700],
+    fontSize: theme.typography.fontSize - 3,
+  },
+  mini: {
+    margin: 0,
+    marginLeft: 0,
+    padding: 0,
+  },
+  error: {
+    color: theme.palette.error.main,
+  },
+  customColor: {
+    color: `${color.tertiary()} !important`,
+  },
+}))(Checkbox);

package/src/choice-configuration/feedback-menu.jsx

@@ -1,7 +1,7 @@
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ActionFeedback from '@mui/icons-material/Feedback';
-import IconButton from '@mui/material/IconButton';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ActionFeedback from '@material-ui/icons/Feedback';
+import IconButton from '@material-ui/core/IconButton';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -70,7 +70,7 @@ export default class FeedbackMenu extends React.Component {
     const tooltip = t === 'custom' ? 'Custom Feedback' : t === 'default' ? 'Default Feedback' : 'Feedback disabled';
 
     const icon = (
-      <IconButton className={classes.icon} aria-label={tooltip} size="large">
+      <IconButton className={classes.icon} aria-label={tooltip}>
         <ActionFeedback color={iconColor} />
       </IconButton>
     );