@pie-lib/config-ui 11.30.2-next.0 → 11.32.0-mui-update.0

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

@@ -1 +1 @@
-{"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"}
+{"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":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/config-ui",
-  "version": "11.30.2-next.0+19a7ac5d",
+  "version": "11.32.0-mui-update.0",
   "main": "lib/index.js",
   "module": "src/index.js",
   "publishConfig": {
@@ -8,11 +8,13 @@
   },
   "scripts": {},
   "dependencies": {
-    "@material-ui/core": "^3.8.3",
-    "@material-ui/icons": "^3.0.2",
-    "@pie-lib/editable-html": "^11.21.2-next.0+19a7ac5d",
-    "@pie-lib/icons": "^2.24.2-next.0+19a7ac5d",
-    "@pie-lib/render-ui": "^4.35.2-next.0+19a7ac5d",
+    "@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.24.0-mui-update.0",
+    "@pie-lib/icons": "^2.27.0-mui-update.0",
+    "@pie-lib/render-ui": "^4.38.0-mui-update.0",
     "assert": "^1.4.1",
     "classnames": "^2.2.6",
     "complex.js": "2.1.1",
@@ -23,11 +25,11 @@
     "react-measure": "^2.2.2"
   },
   "devDependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.9.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8.1"
+    "react": "^18.2.0"
   },
-  "gitHead": "19a7ac5d429f1c5fe9138faff9981720f8c9e294"
+  "gitHead": "eee7d2e59f3323c7a5ba452d80fae6f20f6cb527"
 }

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 '@material-ui/core/TextField';
+import TextField from '@mui/material/TextField';
 
 describe('NumberTextField', () => {
   describe('render', () => {

package/src/alert-dialog.jsx

@@ -1,14 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
-const AlertDialog = ({ text, title, onClose, onConfirm, open, onCloseText, onConfirmText, classes }) => (
-  <Dialog open={open} onClose={onClose}>
-    {title && <DialogTitle className={classes.heading}>{title}</DialogTitle>}
+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, disableAutoFocus, disableEnforceFocus, disableRestoreFocus }) => (
+  <Dialog open={open} disableAutoFocus={disableAutoFocus} disableEnforceFocus={disableEnforceFocus} disableRestoreFocus={disableRestoreFocus} onClose={onClose}>
+    {title && <StyledDialogTitle>{title}</StyledDialogTitle>}
     {text && (
       <DialogContent>
-        <DialogContentText className={classes.subheading}>{text}</DialogContentText>
+        <StyledDialogContentText>{text}</StyledDialogContentText>
       </DialogContent>
     )}
     <DialogActions>
@@ -29,6 +37,9 @@ const AlertDialog = ({ text, title, onClose, onConfirm, open, onCloseText, onCon
 AlertDialog.defaultProps = {
   onCloseText: 'CANCEL',
   onConfirmText: 'OK',
+  disableAutoFocus: false,
+  disableEnforceFocus: false,
+  disableRestoreFocus: false,
 };
 
 AlertDialog.propTypes = {
@@ -39,18 +50,9 @@ AlertDialog.propTypes = {
   open: PropTypes.bool,
   onConfirmText: PropTypes.string,
   onCloseText: PropTypes.string,
-  classes: PropTypes.object,
+  disableAutoFocus: PropTypes.bool,
+  disableEnforceFocus: PropTypes.bool,
+  disableRestoreFocus: PropTypes.bool,
 };
 
-const styles = () => ({
-  heading: {
-    '& h2': {
-      fontSize: 'max(1.25rem, 18px)',
-    },
-  },
-  subheading: {
-    fontSize: 'max(1rem, 14px)',
-  },
-});
-
-export default withStyles(styles)(AlertDialog);
+export default AlertDialog;

package/src/checkbox.jsx

@@ -1,27 +1,50 @@
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import MuiCheckbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MuiCheckbox from '@mui/material/Checkbox';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import grey from '@material-ui/core/colors/grey';
+import { styled } from '@mui/material/styles';
 import { color } from '@pie-lib/render-ui';
+import { grey } from '@mui/material/colors';
 
-const Checkbox = ({ mini, checked, onChange, value, label, classes, error }) => (
-  <FormControlLabel
-    className={classNames(classes.mini)}
-    classes={{
-      label: classNames(classes.label, { [classes.miniLabel]: mini }),
-    }}
+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}
     control={
-      <MuiCheckbox
+      <StyledCheckbox
         checked={checked}
         onChange={onChange}
         value={value}
-        className={classNames(classes.customColor, {
-          [classes.miniCheckbox]: mini,
-          [classes.error]: error,
-        })}
+        mini={mini}
+        error={error}
       />
     }
     label={label}
@@ -30,44 +53,17 @@ const Checkbox = ({ mini, checked, onChange, value, label, classes, 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 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);
+export default Checkbox;

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

@@ -1,7 +1,7 @@
-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 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 PropTypes from 'prop-types';
 import React from 'react';
 
@@ -40,7 +40,7 @@ export class IconMenu extends React.Component {
     return (
       <div>
         <div onClick={this.handleClick}>{this.props.iconButtonElement}</div>
-        <Menu id="simple-menu" anchorEl={this.state.anchorEl} open={this.state.open} onClose={this.handleRequestClose}>
+        <Menu id="simple-menu" anchorEl={this.state.anchorEl} open={this.state.open} onClose={this.handleRequestClose} transitionDuration={{ enter: 225, exit: 195 }}>
           {keys.map((k, index) => (
             <MenuItem key={index} onClick={handleMenuClick(k)}>
               {opts[k]}
@@ -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}>
+      <IconButton className={classes.icon} aria-label={tooltip} size="large">
         <ActionFeedback color={iconColor} />
       </IconButton>
     );