@pie-lib/config-ui 11.30.3-next.2 → 11.30.3-next.205

package/src/mui-box/index.jsx

@@ -1,61 +1,53 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import debug from 'debug';
-import classNames from 'classnames';
 
 const log = debug('pie-elements:config-ui:mui-box');
 
-const MuiBox = withStyles((theme) => {
-  const light = theme.palette.type === 'light';
+const StyledMuiBox = styled('div')(({ theme, focused }) => {
+  const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 
-  log(theme.palette.primary[theme.palette.type || 'light']);
+  log(theme.palette.primary[theme.palette.mode || 'light']);
 
   return {
-    muiBox: {
-      paddingTop: theme.spacing.unit,
-      paddingBottom: theme.spacing.unit,
-      position: 'relative',
-      '&:before': {
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: '1px',
-        content: '""',
-        position: 'absolute',
-        transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-        pointerEvents: 'none',
-        backgroundColor: bottomLineColor,
-      },
-      '&:hover:before': {
-        height: '2px',
-      },
-      '&:after': {
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: '2px',
-        content: '""',
-        position: 'absolute',
-        transform: 'scaleX(0)',
-        transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
-        pointerEvents: 'none',
-        backgroundColor: theme.palette.primary[theme.palette.type], //'#304ffe'
-      },
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    position: 'relative',
+    '&:before': {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      height: '1px',
+      content: '""',
+      position: 'absolute',
+      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+      pointerEvents: 'none',
+      backgroundColor: bottomLineColor,
     },
-    focused: {
-      '&:after': {
-        transform: 'scaleX(1)',
-      },
+    '&:hover:before': {
+      height: '2px',
+    },
+    '&:after': {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      height: '2px',
+      content: '""',
+      position: 'absolute',
+      transform: focused ? 'scaleX(1)' : 'scaleX(0)',
+      transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
+      pointerEvents: 'none',
+      backgroundColor: theme.palette.primary[theme.palette.mode], //'#304ffe'
     },
   };
-})(({ children, classes, focused }) => {
-  const names = classNames(classes.muiBox, focused && classes.focused);
-
-  return <div className={names}>{children}</div>;
 });
 
+const MuiBox = ({ children, focused }) => {
+  return <StyledMuiBox focused={focused}>{children}</StyledMuiBox>;
+};
+
 MuiBox.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   focused: PropTypes.bool.isRequired,

package/src/number-text-field-custom.jsx

@@ -1,33 +1,31 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import TextField from '@material-ui/core/TextField';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
 import isFinite from 'lodash/isFinite';
-import IconButton from '@material-ui/core/IconButton';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import Remove from '@material-ui/icons/Remove';
-import Add from '@material-ui/icons/Add';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import Remove from '@mui/icons-material/Remove';
+import Add from '@mui/icons-material/Add';
 import * as math from 'mathjs';
 
-const styles = () => ({
-  input: {
-    '& input[type=number]': {
-      '-moz-appearance': 'textfield',
-    },
-    '& input[type=number]::-webkit-outer-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0,
-    },
-    '& input[type=number]::-webkit-inner-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0,
-    },
+const StyledTextField = styled(TextField)(() => ({
+  '& input[type=number]': {
+    MozAppearance: 'textfield',
   },
-  iconButton: {
-    padding: '2px',
+  '& input[type=number]::-webkit-outer-spin-button': {
+    WebkitAppearance: 'none',
+    margin: 0,
   },
-});
+  '& input[type=number]::-webkit-inner-spin-button': {
+    WebkitAppearance: 'none',
+    margin: 0,
+  },
+}));
+
+const StyledIconButton = styled(IconButton)(() => ({
+  padding: '2px',
+}));
 
 const fallbackNumber = (min, max) => {
   if (!isFinite(min) && !isFinite(max)) {
@@ -45,7 +43,6 @@ const fallbackNumber = (min, max) => {
 
 export class NumberTextFieldCustom extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     customValues: PropTypes.array,
     disabled: PropTypes.bool,
@@ -242,7 +239,6 @@ export class NumberTextFieldCustom extends React.Component {
   render() {
     const {
       className,
-      classes,
       label,
       disabled,
       error,
@@ -257,7 +253,7 @@ export class NumberTextFieldCustom extends React.Component {
       type = 'number',
     } = this.props;
     const { value } = this.state;
-    const names = classNames(className, classes.input);
+    const names = className;
     //Logic to disable the increment and decrement buttons
     let disabledStart = false;
     let disabledEnd = false;
@@ -270,7 +266,7 @@ export class NumberTextFieldCustom extends React.Component {
     }
 
     return (
-      <TextField
+      <StyledTextField
         variant={variant}
         inputRef={(ref) => (this.inputRef = ref)}
         disabled={disabled}
@@ -303,24 +299,22 @@ export class NumberTextFieldCustom extends React.Component {
           disableUnderline: disableUnderline,
           startAdornment: (
             <InputAdornment position="start">
-              <IconButton
-                className={classes.iconButton}
+              <StyledIconButton
                 disabled={disabled ? disabled : disabledStart}
                 onClick={(e) => this.changeValue(e, -1, true)}
-              >
+                size="large">
                 <Remove fontSize="small" />
-              </IconButton>
+              </StyledIconButton>
             </InputAdornment>
           ),
           endAdornment: (
             <InputAdornment position="end">
-              <IconButton
-                className={classes.iconButton}
+              <StyledIconButton
                 disabled={disabled ? disabled : disabledEnd}
                 onClick={(e) => this.changeValue(e, 1, true)}
-              >
+                size="large">
                 <Add fontSize="small" />
-              </IconButton>
+              </StyledIconButton>
             </InputAdornment>
           ),
         }}
@@ -334,4 +328,4 @@ export class NumberTextFieldCustom extends React.Component {
   }
 }
 
-export default withStyles(styles)(NumberTextFieldCustom);
+export default NumberTextFieldCustom;

package/src/number-text-field.jsx

@@ -1,21 +1,39 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import TextField from '@material-ui/core/TextField';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
 import debug from 'debug';
 import isFinite from 'lodash/isFinite';
-import InputAdornment from '@material-ui/core/InputAdornment';
+import InputAdornment from '@mui/material/InputAdornment';
 const log = debug('@pie-lib:config-ui:number-text-field');
 
-const styles = (theme) => ({
-  root: {
-    marginRight: theme.spacing.unit,
-    '& label': {
-      width: 'max-content',
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  marginRight: theme.spacing(1),
+  '& .MuiInputLabel-root': {
+    width: 'auto',
+    minWidth: 'max-content',
+    maxWidth: 'none',
+    whiteSpace: 'nowrap',
+    overflow: 'visible',
+    transform: 'translate(0, 8px) scale(0.75)',
+    transformOrigin: 'top left',
+    position: 'relative',
+  },
+  '& .MuiInputBase-root, & .MuiInput-root, & .MuiFilledInput-root, & .MuiOutlinedInput-root': {
+    height: 'auto',
+    minHeight: 'auto',
+  },
+  '& .MuiInputBase-input': {
+    height: 'auto',
+    minHeight: 'auto',
+    padding: '8px 12px',
+  },
+  '& .MuiInput-root, & .MuiFilledInput-root': {
+    '&:before, &:after, &:hover:not(.Mui-disabled):before': {
+      display: 'none',
     },
   },
-});
+}));
 
 const fallbackNumber = (min, max) => {
   if (!isFinite(min) && !isFinite(max)) {
@@ -33,7 +51,6 @@ const fallbackNumber = (min, max) => {
 export class NumberTextField extends React.Component {
   static propTypes = {
     disabled: PropTypes.bool,
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     inputClassName: PropTypes.string,
     onChange: PropTypes.func.isRequired,
@@ -146,7 +163,6 @@ export class NumberTextField extends React.Component {
   render() {
     const {
       className,
-      classes,
       label,
       disabled,
       suffix,
@@ -157,41 +173,41 @@ export class NumberTextField extends React.Component {
       showErrorWhenOutsideRange,
       variant,
     } = this.props;
-    const names = classNames(classes.root, className);
 
     const error = showErrorWhenOutsideRange && this.getError();
     return (
-      <TextField
-        variant={variant || 'standard'}
+      <StyledTextField
+        variant={disableUnderline ? 'filled' : (variant || 'standard')}
         inputRef={(ref) => {
           this.inputRef = ref;
         }}
         disabled={disabled}
         label={label}
+        InputLabelProps={{
+          shrink: true,
+        }}
         value={this.state.value}
         error={!!error}
         helperText={error}
         onChange={this.onChange}
         onBlur={this.onBlur}
-        onKeyPress={(e) => {
+        onKeyDown={(e) => {
           // once the Enter key is pressed, we force input blur
           if (e.key === 'Enter' && this.inputRef) {
             this.inputRef.blur();
           }
         }}
         type="number"
-        className={names}
-        InputLabelProps={{
-          shrink: true,
-        }}
-        InputProps={{
-          endAdornment: suffix && <InputAdornment position="end">{suffix}</InputAdornment>,
-          className: inputClassName,
-          disableUnderline: disableUnderline,
-        }}
-        inputProps={{
-          min,
-          max,
+        className={className}
+        slotProps={{
+          input: {
+            endAdornment: suffix && <InputAdornment position="end">{suffix}</InputAdornment>,
+            className: inputClassName,
+            inputProps: {
+              min,
+              max,
+            },
+          },
         }}
         margin="normal"
       />
@@ -199,4 +215,4 @@ export class NumberTextField extends React.Component {
   }
 }
 
-export default withStyles(styles)(NumberTextField);
+export default NumberTextField;

package/src/radio-with-label.jsx

@@ -1,22 +1,34 @@
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Radio from '@material-ui/core/Radio';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import { color } from '@pie-lib/render-ui';
 
-export default withStyles({
-  label: {
+const StyledFormControlLabel = styled(FormControlLabel)(() => ({
+  '& .MuiFormControlLabel-label': {
     left: '-5px',
     position: 'relative',
   },
-  customColor: {
-    color: `${color.tertiary()} !important`,
-  },
-})(({ label, value, checked, onChange, classes }) => (
-  <FormControlLabel
+}));
+
+const StyledRadio = styled(Radio)(() => ({
+  color: `${color.tertiary()} !important`,
+}));
+
+const RadioWithLabel = ({ label, value, checked, onChange }) => (
+  <StyledFormControlLabel
     value={value}
-    classes={{ label: classes.label }}
-    control={<Radio className={classes.customColor} checked={checked} onChange={onChange} />}
+    control={<StyledRadio checked={checked} onChange={onChange} />}
     label={label}
   />
-));
+);
+
+RadioWithLabel.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+export default RadioWithLabel;

package/src/settings/display-size.jsx

@@ -1,22 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import { withStyles } from '@material-ui/core/styles';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
 import NumberTextField from '../number-text-field';
 
-const DisplaySize = withStyles((theme) => ({
-  displaySize: {
-    display: 'flex',
-    paddingTop: theme.spacing.unit,
-  },
-}))(({ size, label, classes, onChange }) => {
+const StyledDisplaySize = styled('div')(({ theme }) => ({
+  display: 'flex',
+  paddingTop: theme.spacing(1),
+}));
+
+const DisplaySize = ({ size, label, onChange }) => {
   const updateSize = (key, v) => {
     onChange({ ...size, [key]: v });
   };
+  
   return (
     <div>
       <Typography>{label}</Typography>
-      <div className={classes.displaySize}>
+      <StyledDisplaySize>
         <NumberTextField
           label="Width"
           type="number"
@@ -35,10 +36,10 @@ const DisplaySize = withStyles((theme) => ({
           value={size.height}
           onChange={(e, v) => updateSize('height', v)}
         />
-      </div>
+      </StyledDisplaySize>
     </div>
   );
-});
+};
 
 DisplaySize.propTypes = {
   size: PropTypes.shape({