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

package/src/tags-input/index.jsx

@@ -1,27 +1,48 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import uniq from 'lodash/uniq';
-import Chip from '@material-ui/core/Chip';
+import Chip from '@mui/material/Chip';
 import MuiBox from '../mui-box';
 
 const ENTER = 13;
 
-const Tag = withStyles(() => ({
-  tag: {
-    padding: '0px',
-    margin: '1px',
-  },
-}))(({ classes, label, onDelete }) => <Chip className={classes.tag} label={label} onDelete={onDelete} />);
+const StyledChip = styled(Chip)(() => ({
+  padding: '0px',
+  margin: '1px',
+}));
+
+const Tag = ({ label, onDelete }) => <StyledChip label={label} onDelete={onDelete} />;
 
 Tag.propTypes = {
   label: PropTypes.string.isRequired,
   onDelete: PropTypes.func.isRequired,
 };
 
+const StyledTagsInput = styled('div')(({ theme }) => ({
+  border: `0px solid ${theme.palette.background.paper}`,
+  display: 'flex',
+  flexWrap: 'wrap',
+}));
+
+const StyledInput = styled('input')(({ theme }) => ({
+  padding: '2px',
+  margin: '1px',
+  minWidth: '30px',
+  width: '100%',
+  flex: '1',
+  border: `0px solid ${theme.palette.background.paper}`,
+  height: '28px',
+  fontSize: theme.typography.fontSize,
+  fontFamily: theme.typography.fontFamily,
+  outline: 'none',
+  '&:focus': {
+    outline: 'none',
+  },
+}));
+
 export class TagsInput extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     tags: PropTypes.arrayOf(PropTypes.string).isRequired,
     onChange: PropTypes.func.isRequired,
   };
@@ -70,50 +91,26 @@ export class TagsInput extends React.Component {
   };
 
   render() {
-    const { classes, tags } = this.props;
+    const { tags } = this.props;
     return (
       <MuiBox focused={this.state.focused}>
-        <div className={classes.tagsInput}>
+        <StyledTagsInput>
           {(tags || []).map((t, index) => (
             <Tag key={index} label={t} onDelete={() => this.deleteTag(t)} />
           ))}
-          <input
+          <StyledInput
             ref={(r) => (this.input = r)}
             onKeyDown={this.onKeyDown}
             onChange={this.onChange}
-            className={classes.input}
             value={this.state.value}
             onFocus={this.onFocus}
             onBlur={this.onBlur}
             type="text"
           />
-        </div>
+        </StyledTagsInput>
       </MuiBox>
     );
   }
 }
 
-const styles = (theme) => ({
-  tagsInput: {
-    border: `0px solid ${theme.palette.background.paper}`,
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-  input: {
-    padding: '2px',
-    margin: '1px',
-    minWidth: '30px',
-    width: '100%',
-    flex: '1',
-    border: `0px solid ${theme.palette.background.paper}`,
-    height: '28px',
-    fontSize: theme.typography.fontSize,
-    fontFamily: theme.typography.fontFamily,
-    outline: 'none',
-    '&:focus': {
-      outline: 'none',
-    },
-  },
-});
-
-export default withStyles(styles)(TagsInput);
+export default TagsInput;

package/src/two-choice.jsx

@@ -2,22 +2,19 @@ import { InputContainer } from '@pie-lib/render-ui';
 import PropTypes from 'prop-types';
 import RadioWithLabel from './radio-with-label';
 import React from 'react';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const styles = (theme) => ({
-  group: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    paddingLeft: 0,
-    marginTop: theme.spacing.unit,
-  },
-  vertical: {
+const StyledGroup = styled('div')(({ theme, direction }) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  paddingLeft: 0,
+  marginTop: theme.spacing(1),
+  ...(direction === 'vertical' && {
     flexDirection: 'column',
-  },
-});
+  }),
+}));
 
-class RawNChoice extends React.Component {
+class NChoice extends React.Component {
   static propTypes = {
     header: PropTypes.string.isRequired,
     className: PropTypes.string,
@@ -26,7 +23,6 @@ class RawNChoice extends React.Component {
     value: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     direction: PropTypes.oneOf(['horizontal', 'vertical']),
-    classes: PropTypes.object.isRequired,
   };
 
   handleChange = (event) => {
@@ -34,7 +30,7 @@ class RawNChoice extends React.Component {
   };
 
   render() {
-    const { header, className, classes, customLabel, opts, value, direction } = this.props;
+    const { header, className, customLabel, opts, value, direction } = this.props;
 
     const preppedOpts = opts.map((o) => {
       return typeof o === 'string' ? { label: o, value: o } : o;
@@ -43,7 +39,7 @@ class RawNChoice extends React.Component {
 
     return (
       <InputContainer label={header} className={className}>
-        <div className={classNames(classes.group, classes[direction])}>
+        <StyledGroup direction={direction}>
           {preppedOpts.map((o, index) => (
             <LabelComponent
               value={o.value}
@@ -53,13 +49,13 @@ class RawNChoice extends React.Component {
               label={o.label}
             />
           ))}
-        </div>
+        </StyledGroup>
       </InputContainer>
     );
   }
 }
 
-export const NChoice = withStyles(styles)(RawNChoice);
+export { NChoice };
 
 const labelValue = PropTypes.shape({ label: PropTypes.string, value: PropTypes.string });
 
@@ -91,4 +87,4 @@ class TwoChoice extends React.Component {
   }
 }
 
-export default withStyles(styles)(TwoChoice);
+export default TwoChoice;