@pie-lib/render-ui 4.35.2-next.0 → 4.37.0-mui-update.0

package/lib/withUndoReset.js

@@ -1,98 +1,69 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _Restore = _interopRequireDefault(require("@material-ui/icons/Restore"));
-
-var _Undo = _interopRequireDefault(require("@material-ui/icons/Undo"));
-
-var _excluded = ["classes"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var styles = function styles(theme) {
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _styles = require("@mui/material/styles");
+var _Restore = _interopRequireDefault(require("@mui/icons-material/Restore"));
+var _Undo = _interopRequireDefault(require("@mui/icons-material/Undo"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var Wrapper = (0, _styles.styled)('div')({
+  display: 'flex',
+  flexDirection: 'column'
+});
+var ResetUndoContainer = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var StyledIcon = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme;
   return {
-    wrapper: {
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    resetUndoContainer: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    icon: {
-      width: '24px',
-      height: '24px',
-      color: 'gray',
-      marginRight: theme.spacing.unit
-    },
-    buttonContainer: {
-      display: 'flex',
-      alignItems: 'center',
-      marginLeft: theme.spacing.unit * 3,
-      marginRight: theme.spacing.unit * 3
-    }
+    width: '24px',
+    height: '24px',
+    color: 'gray',
+    marginRight: theme.spacing(1),
+    display: 'flex',
+    alignItems: 'center'
   };
-};
+});
+var StyledButton = (0, _styles.styled)(_Button["default"])(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3)
+  };
+});
+
 /**
  * HOC that adds undo and reset functionality for session values
  */
-
-
 var withUndoReset = function withUndoReset(WrappedComponent) {
   var WithUndoReset = /*#__PURE__*/function (_React$Component) {
-    (0, _inherits2["default"])(WithUndoReset, _React$Component);
-
-    var _super = _createSuper(WithUndoReset);
-
     function WithUndoReset(props) {
       var _this;
-
       (0, _classCallCheck2["default"])(this, WithUndoReset);
-      _this = _super.call(this, props);
-      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSessionChange", function (session) {
+      _this = _callSuper(this, WithUndoReset, [props]);
+      (0, _defineProperty2["default"])(_this, "onSessionChange", function (session) {
         _this.setState(function (state) {
           return {
             session: session,
@@ -102,7 +73,7 @@ var withUndoReset = function withUndoReset(WrappedComponent) {
           return _this.props.onSessionChange(session);
         });
       });
-      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onUndo", function () {
+      (0, _defineProperty2["default"])(_this, "onUndo", function () {
         _this.setState(function (state) {
           var newChanges = (0, _toConsumableArray2["default"])(state.changes);
           newChanges.pop();
@@ -114,7 +85,7 @@ var withUndoReset = function withUndoReset(WrappedComponent) {
           return _this.props.onSessionChange(_this.state.session);
         });
       });
-      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onReset", function () {
+      (0, _defineProperty2["default"])(_this, "onReset", function () {
         _this.setState(function (state) {
           return {
             session: state.sessionInitialValues,
@@ -131,51 +102,34 @@ var withUndoReset = function withUndoReset(WrappedComponent) {
       };
       return _this;
     }
-
-    (0, _createClass2["default"])(WithUndoReset, [{
+    (0, _inherits2["default"])(WithUndoReset, _React$Component);
+    return (0, _createClass2["default"])(WithUndoReset, [{
       key: "render",
       value: function render() {
-        var _this$props = this.props,
-            classes = _this$props.classes,
-            rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
+        var rest = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(this.props), this.props));
         var _this$state = this.state,
-            changes = _this$state.changes,
-            session = _this$state.session;
-        return /*#__PURE__*/React.createElement("div", {
-          className: classes.wrapper
-        }, /*#__PURE__*/React.createElement("div", {
-          className: classes.resetUndoContainer
-        }, /*#__PURE__*/React.createElement(_Button["default"], {
-          className: classes.buttonContainer,
+          changes = _this$state.changes,
+          session = _this$state.session;
+        return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ResetUndoContainer, null, /*#__PURE__*/React.createElement(StyledButton, {
           color: "primary",
           disabled: changes.length === 0,
           onClick: this.onUndo
-        }, /*#__PURE__*/React.createElement(_Undo["default"], {
-          className: classes.icon
-        }), " Undo"), /*#__PURE__*/React.createElement(_Button["default"], {
-          className: classes.buttonContainer,
+        }, /*#__PURE__*/React.createElement(StyledIcon, null, /*#__PURE__*/React.createElement(_Undo["default"], null)), "Undo"), /*#__PURE__*/React.createElement(StyledButton, {
           color: "primary",
           disabled: changes.length === 0,
           onClick: this.onReset
-        }, /*#__PURE__*/React.createElement(_Restore["default"], {
-          className: classes.icon
-        }), " Start Over")), /*#__PURE__*/React.createElement(WrappedComponent, (0, _extends2["default"])({}, rest, {
+        }, /*#__PURE__*/React.createElement(StyledIcon, null, /*#__PURE__*/React.createElement(_Restore["default"], null)), "Start Over")), /*#__PURE__*/React.createElement(WrappedComponent, (0, _extends2["default"])({}, rest, {
           session: session,
           onSessionChange: this.onSessionChange
         })));
       }
     }]);
-    return WithUndoReset;
   }(React.Component);
-
   (0, _defineProperty2["default"])(WithUndoReset, "propTypes", {
-    classes: _propTypes["default"].object,
     session: _propTypes["default"].object,
     onSessionChange: _propTypes["default"].func
   });
-  return (0, _styles.withStyles)(styles)(WithUndoReset);
+  return WithUndoReset;
 };
-
-var _default = withUndoReset;
-exports["default"] = _default;
+var _default = exports["default"] = withUndoReset;
 //# sourceMappingURL=withUndoReset.js.map

package/lib/withUndoReset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/withUndoReset.jsx"],"names":["styles","theme","wrapper","display","flexDirection","resetUndoContainer","alignItems","justifyContent","icon","width","height","color","marginRight","spacing","unit","buttonContainer","marginLeft","withUndoReset","WrappedComponent","WithUndoReset","props","session","setState","state","changes","onSessionChange","newChanges","pop","length","sessionInitialValues","JSON","parse","stringify","classes","rest","onUndo","onReset","React","Component","PropTypes","object","func"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport { withStyles } from '@material-ui/core/styles';\nimport Restore from '@material-ui/icons/Restore';\nimport Undo from '@material-ui/icons/Undo';\n\nconst styles = (theme) => ({\n  wrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  resetUndoContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  icon: {\n    width: '24px',\n    height: '24px',\n    color: 'gray',\n    marginRight: theme.spacing.unit,\n  },\n  buttonContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    marginLeft: theme.spacing.unit * 3,\n    marginRight: theme.spacing.unit * 3,\n  },\n});\n\n/**\n * HOC that adds undo and reset functionality for session values\n */\nconst withUndoReset = (WrappedComponent) => {\n  class WithUndoReset extends React.Component {\n    static propTypes = {\n      classes: PropTypes.object,\n      session: PropTypes.object,\n      onSessionChange: PropTypes.func,\n    };\n\n    constructor(props) {\n      super(props);\n\n      this.state = {\n        sessionInitialValues: JSON.parse(JSON.stringify(props.session)),\n        session: props.session,\n        changes: [],\n      };\n    }\n\n    onSessionChange = (session) => {\n      this.setState(\n        (state) => ({ session, changes: [...state.changes, session] }),\n        () => this.props.onSessionChange(session),\n      );\n    };\n\n    onUndo = () => {\n      this.setState(\n        (state) => {\n          const newChanges = [...state.changes];\n\n          newChanges.pop();\n\n          return {\n            changes: newChanges,\n            session: newChanges.length ? newChanges[newChanges.length - 1] : state.sessionInitialValues,\n          };\n        },\n        () => this.props.onSessionChange(this.state.session),\n      );\n    };\n\n    onReset = () => {\n      this.setState(\n        (state) => ({ session: state.sessionInitialValues, changes: [] }),\n        () => this.props.onSessionChange(this.state.sessionInitialValues),\n      );\n    };\n\n    render() {\n      const { classes, ...rest } = this.props;\n      const { changes, session } = this.state;\n\n      return (\n        <div className={classes.wrapper}>\n          <div className={classes.resetUndoContainer}>\n            <Button\n              className={classes.buttonContainer}\n              color=\"primary\"\n              disabled={changes.length === 0}\n              onClick={this.onUndo}\n            >\n              <Undo className={classes.icon} /> Undo\n            </Button>\n            <Button\n              className={classes.buttonContainer}\n              color=\"primary\"\n              disabled={changes.length === 0}\n              onClick={this.onReset}\n            >\n              <Restore className={classes.icon} /> Start Over\n            </Button>\n          </div>\n          <WrappedComponent {...rest} session={session} onSessionChange={this.onSessionChange} />\n        </div>\n      );\n    }\n  }\n\n  return withStyles(styles)(WithUndoReset);\n};\n\nexport default withUndoReset;\n"],"file":"withUndoReset.js"}
+{"version":3,"file":"withUndoReset.js","names":["React","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_Button","_styles","_Restore","_Undo","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","Wrapper","styled","display","flexDirection","ResetUndoContainer","alignItems","justifyContent","StyledIcon","_ref","theme","width","height","color","marginRight","spacing","StyledButton","Button","_ref2","marginLeft","withUndoReset","WrappedComponent","WithUndoReset","_React$Component","props","_this","_classCallCheck2","_defineProperty2","session","setState","state","changes","concat","_toConsumableArray2","onSessionChange","newChanges","pop","length","sessionInitialValues","JSON","parse","stringify","_inherits2","_createClass2","key","value","render","rest","_extends2","_objectDestructuringEmpty2","_this$state","createElement","disabled","onClick","onUndo","onReset","Component","PropTypes","object","func","_default","exports"],"sources":["../src/withUndoReset.jsx"],"sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@mui/material/Button';\nimport { styled } from '@mui/material/styles';\nimport Restore from '@mui/icons-material/Restore';\nimport Undo from '@mui/icons-material/Undo';\n\nconst Wrapper = styled('div')({\n  display: 'flex',\n  flexDirection: 'column',\n});\n\nconst ResetUndoContainer = styled('div')({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n});\n\nconst StyledIcon = styled('div')(({ theme }) => ({\n  width: '24px',\n  height: '24px',\n  color: 'gray',\n  marginRight: theme.spacing(1),\n  display: 'flex',\n  alignItems: 'center',\n}));\n\nconst StyledButton = styled(Button)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  marginLeft: theme.spacing(3),\n  marginRight: theme.spacing(3),\n}));\n\n/**\n * HOC that adds undo and reset functionality for session values\n */\nconst withUndoReset = (WrappedComponent) => {\n  class WithUndoReset extends React.Component {\n    static propTypes = {\n      session: PropTypes.object,\n      onSessionChange: PropTypes.func,\n    };\n\n    constructor(props) {\n      super(props);\n\n      this.state = {\n        sessionInitialValues: JSON.parse(JSON.stringify(props.session)),\n        session: props.session,\n        changes: [],\n      };\n    }\n\n    onSessionChange = (session) => {\n      this.setState(\n        (state) => ({ session, changes: [...state.changes, session] }),\n        () => this.props.onSessionChange(session),\n      );\n    };\n\n    onUndo = () => {\n      this.setState(\n        (state) => {\n          const newChanges = [...state.changes];\n\n          newChanges.pop();\n\n          return {\n            changes: newChanges,\n            session: newChanges.length ? newChanges[newChanges.length - 1] : state.sessionInitialValues,\n          };\n        },\n        () => this.props.onSessionChange(this.state.session),\n      );\n    };\n\n    onReset = () => {\n      this.setState(\n        (state) => ({ session: state.sessionInitialValues, changes: [] }),\n        () => this.props.onSessionChange(this.state.sessionInitialValues),\n      );\n    };\n\n    render() {\n      const { ...rest } = this.props;\n      const { changes, session } = this.state;\n\n      return (\n        <Wrapper>\n          <ResetUndoContainer>\n            <StyledButton color=\"primary\" disabled={changes.length === 0} onClick={this.onUndo}>\n              <StyledIcon>\n                <Undo />\n              </StyledIcon>\n              Undo\n            </StyledButton>\n            <StyledButton color=\"primary\" disabled={changes.length === 0} onClick={this.onReset}>\n              <StyledIcon>\n                <Restore />\n              </StyledIcon>\n              Start Over\n            </StyledButton>\n          </ResetUndoContainer>\n          <WrappedComponent {...rest} session={session} onSessionChange={this.onSessionChange} />\n        </Wrapper>\n      );\n    }\n  }\n\n  return WithUndoReset;\n};\n\nexport default withUndoReset;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,KAAA,GAAAJ,sBAAA,CAAAF,OAAA;AAA4C,SAAAD,wBAAAQ,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,wBAAAQ,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,mBAAAT,CAAA,iBAAAA,CAAA,gBAAAU,OAAA,CAAAV,CAAA,0BAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAmB,WAAAnB,CAAA,EAAAK,CAAA,EAAAN,CAAA,WAAAM,CAAA,OAAAe,gBAAA,aAAAf,CAAA,OAAAgB,2BAAA,aAAArB,CAAA,EAAAsB,yBAAA,KAAAC,OAAA,CAAAC,SAAA,CAAAnB,CAAA,EAAAN,CAAA,YAAAqB,gBAAA,aAAApB,CAAA,EAAAyB,WAAA,IAAApB,CAAA,CAAAqB,KAAA,CAAA1B,CAAA,EAAAD,CAAA;AAAA,SAAAuB,0BAAA,cAAAtB,CAAA,IAAA2B,OAAA,CAAAC,SAAA,CAAAC,OAAA,CAAAd,IAAA,CAAAQ,OAAA,CAAAC,SAAA,CAAAG,OAAA,iCAAA3B,CAAA,aAAAsB,yBAAA,YAAAA,0BAAA,aAAAtB,CAAA;AAE5C,IAAM8B,OAAO,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC;EAC5BC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE;AACjB,CAAC,CAAC;AAEF,IAAMC,kBAAkB,GAAG,IAAAH,cAAM,EAAC,KAAK,CAAC,CAAC;EACvCC,OAAO,EAAE,MAAM;EACfG,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE;AAClB,CAAC,CAAC;AAEF,IAAMC,UAAU,GAAG,IAAAN,cAAM,EAAC,KAAK,CAAC,CAAC,UAAAO,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OAAQ;IAC/CC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,WAAW,EAAEJ,KAAK,CAACK,OAAO,CAAC,CAAC,CAAC;IAC7BZ,OAAO,EAAE,MAAM;IACfG,UAAU,EAAE;EACd,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMU,YAAY,GAAG,IAAAd,cAAM,EAACe,kBAAM,CAAC,CAAC,UAAAC,KAAA;EAAA,IAAGR,KAAK,GAAAQ,KAAA,CAALR,KAAK;EAAA,OAAQ;IAClDP,OAAO,EAAE,MAAM;IACfG,UAAU,EAAE,QAAQ;IACpBa,UAAU,EAAET,KAAK,CAACK,OAAO,CAAC,CAAC,CAAC;IAC5BD,WAAW,EAAEJ,KAAK,CAACK,OAAO,CAAC,CAAC;EAC9B,CAAC;AAAA,CAAC,CAAC;;AAEH;AACA;AACA;AACA,IAAMK,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,gBAAgB,EAAK;EAAA,IACpCC,aAAa,0BAAAC,gBAAA;IAMjB,SAAAD,cAAYE,KAAK,EAAE;MAAA,IAAAC,KAAA;MAAA,IAAAC,gBAAA,mBAAAJ,aAAA;MACjBG,KAAA,GAAAnC,UAAA,OAAAgC,aAAA,GAAME,KAAK;MAAE,IAAAG,gBAAA,aAAAF,KAAA,qBASG,UAACG,OAAO,EAAK;QAC7BH,KAAA,CAAKI,QAAQ,CACX,UAACC,KAAK;UAAA,OAAM;YAAEF,OAAO,EAAPA,OAAO;YAAEG,OAAO,KAAAC,MAAA,KAAAC,mBAAA,aAAMH,KAAK,CAACC,OAAO,IAAEH,OAAO;UAAE,CAAC;QAAA,CAAC,EAC9D;UAAA,OAAMH,KAAA,CAAKD,KAAK,CAACU,eAAe,CAACN,OAAO,CAAC;QAAA,CAC3C,CAAC;MACH,CAAC;MAAA,IAAAD,gBAAA,aAAAF,KAAA,YAEQ,YAAM;QACbA,KAAA,CAAKI,QAAQ,CACX,UAACC,KAAK,EAAK;UACT,IAAMK,UAAU,OAAAF,mBAAA,aAAOH,KAAK,CAACC,OAAO,CAAC;UAErCI,UAAU,CAACC,GAAG,CAAC,CAAC;UAEhB,OAAO;YACLL,OAAO,EAAEI,UAAU;YACnBP,OAAO,EAAEO,UAAU,CAACE,MAAM,GAAGF,UAAU,CAACA,UAAU,CAACE,MAAM,GAAG,CAAC,CAAC,GAAGP,KAAK,CAACQ;UACzE,CAAC;QACH,CAAC,EACD;UAAA,OAAMb,KAAA,CAAKD,KAAK,CAACU,eAAe,CAACT,KAAA,CAAKK,KAAK,CAACF,OAAO,CAAC;QAAA,CACtD,CAAC;MACH,CAAC;MAAA,IAAAD,gBAAA,aAAAF,KAAA,aAES,YAAM;QACdA,KAAA,CAAKI,QAAQ,CACX,UAACC,KAAK;UAAA,OAAM;YAAEF,OAAO,EAAEE,KAAK,CAACQ,oBAAoB;YAAEP,OAAO,EAAE;UAAG,CAAC;QAAA,CAAC,EACjE;UAAA,OAAMN,KAAA,CAAKD,KAAK,CAACU,eAAe,CAACT,KAAA,CAAKK,KAAK,CAACQ,oBAAoB,CAAC;QAAA,CACnE,CAAC;MACH,CAAC;MAnCCb,KAAA,CAAKK,KAAK,GAAG;QACXQ,oBAAoB,EAAEC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,SAAS,CAACjB,KAAK,CAACI,OAAO,CAAC,CAAC;QAC/DA,OAAO,EAAEJ,KAAK,CAACI,OAAO;QACtBG,OAAO,EAAE;MACX,CAAC;MAAC,OAAAN,KAAA;IACJ;IAAC,IAAAiB,UAAA,aAAApB,aAAA,EAAAC,gBAAA;IAAA,WAAAoB,aAAA,aAAArB,aAAA;MAAAsB,GAAA;MAAAC,KAAA,EAgCD,SAAAC,MAAMA,CAAA,EAAG;QACP,IAAWC,IAAI,OAAAC,SAAA,sBAAAC,0BAAA,aAAK,IAAI,CAACzB,KAAK,GAAV,IAAI,CAACA,KAAK;QAC9B,IAAA0B,WAAA,GAA6B,IAAI,CAACpB,KAAK;UAA/BC,OAAO,GAAAmB,WAAA,CAAPnB,OAAO;UAAEH,OAAO,GAAAsB,WAAA,CAAPtB,OAAO;QAExB,oBACEnE,KAAA,CAAA0F,aAAA,CAAClD,OAAO,qBACNxC,KAAA,CAAA0F,aAAA,CAAC9C,kBAAkB,qBACjB5C,KAAA,CAAA0F,aAAA,CAACnC,YAAY;UAACH,KAAK,EAAC,SAAS;UAACuC,QAAQ,EAAErB,OAAO,CAACM,MAAM,KAAK,CAAE;UAACgB,OAAO,EAAE,IAAI,CAACC;QAAO,gBACjF7F,KAAA,CAAA0F,aAAA,CAAC3C,UAAU,qBACT/C,KAAA,CAAA0F,aAAA,CAAClF,KAAA,WAAI,MAAE,CACG,CAAC,QAED,CAAC,eACfR,KAAA,CAAA0F,aAAA,CAACnC,YAAY;UAACH,KAAK,EAAC,SAAS;UAACuC,QAAQ,EAAErB,OAAO,CAACM,MAAM,KAAK,CAAE;UAACgB,OAAO,EAAE,IAAI,CAACE;QAAQ,gBAClF9F,KAAA,CAAA0F,aAAA,CAAC3C,UAAU,qBACT/C,KAAA,CAAA0F,aAAA,CAACnF,QAAA,WAAO,MAAE,CACA,CAAC,cAED,CACI,CAAC,eACrBP,KAAA,CAAA0F,aAAA,CAAC9B,gBAAgB,MAAA2B,SAAA,iBAAKD,IAAI;UAAEnB,OAAO,EAAEA,OAAQ;UAACM,eAAe,EAAE,IAAI,CAACA;QAAgB,EAAE,CAC/E,CAAC;MAEd;IAAC;EAAA,EArEyBzE,KAAK,CAAC+F,SAAS;EAAA,IAAA7B,gBAAA,aAArCL,aAAa,eACE;IACjBM,OAAO,EAAE6B,qBAAS,CAACC,MAAM;IACzBxB,eAAe,EAAEuB,qBAAS,CAACE;EAC7B,CAAC;EAoEH,OAAOrC,aAAa;AACtB,CAAC;AAAC,IAAAsC,QAAA,GAAAC,OAAA,cAEazC,aAAa","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/render-ui",
-  "version": "4.35.2-next.0+19a7ac5d",
+  "version": "4.37.0-mui-update.0",
   "description": "Some shared ui elements when rendering - but not worthy of their own package yet.",
   "module": "src/index.js",
   "main": "lib/index.js",
@@ -9,11 +9,13 @@
   },
   "scripts": {},
   "dependencies": {
-    "@material-ui/core": "^3.8.3",
-    "@material-ui/icons": "^3.0.2",
-    "@pie-lib/icons": "^2.24.2-next.0+19a7ac5d",
-    "@pie-lib/math-rendering": "^3.22.2-next.0+19a7ac5d",
-    "@pie-lib/test-utils": "^0.22.2-next.0+19a7ac5d",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/icons": "^2.26.0-mui-update.0",
+    "@pie-lib/math-rendering": "^3.28.0-mui-update.0",
+    "@pie-lib/test-utils": "^0.24.0-mui-update.0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "lodash": "^4.17.11",
@@ -21,12 +23,13 @@
     "react-transition-group": "^2.5.2"
   },
   "peerDependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "@pie-lib/test-utils": "^0.20.0-mui-update.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "gitHead": "19a7ac5d429f1c5fe9138faff9981720f8c9e294"
+  "gitHead": "4d8ccede3634986a13ea7df987defd26d089f0d6"
 }

package/src/collapsible/index.jsx

@@ -1,12 +1,21 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles/index';
-import Collapse from '@material-ui/core/Collapse/index';
+import { styled } from '@mui/material/styles';
+import Collapse from '@mui/material/Collapse';
 import { renderMath } from '@pie-lib/math-rendering';
 import PropTypes from 'prop-types';
 
+const Title = styled('span')(({ theme }) => ({
+  color: theme.palette.primary.light,
+  borderBottom: `1px dotted ${theme.palette.primary.light}`,
+  cursor: 'pointer',
+}));
+
+const StyledCollapse = styled(Collapse)(({ theme }) => ({
+  paddingTop: theme.spacing(2),
+}));
+
 export class Collapsible extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     children: PropTypes.object,
     labels: PropTypes.shape({
@@ -36,29 +45,20 @@ export class Collapsible extends React.Component {
   }
 
   render() {
-    const { classes, labels, children, className } = this.props;
+    const { labels, children, className } = this.props;
     const title = this.state.expanded ? labels.visible || 'Hide' : labels.hidden || 'Show';
 
     return (
       <div className={className} ref={(r) => (this.root = r)}>
         <div onClick={this.toggleExpanded}>
-          <span className={classes.title}>{title}</span>
+          <Title>{title}</Title>
         </div>
-        <Collapse in={this.state.expanded} timeout="auto" unmountOnExit className={classes.collapsible}>
+        <StyledCollapse in={this.state.expanded} timeout="auto" unmountOnExit>
           {children}
-        </Collapse>
+        </StyledCollapse>
       </div>
     );
   }
 }
 
-export default withStyles((theme) => ({
-  title: {
-    color: theme.palette.primary.light,
-    borderBottom: `1px dotted ${theme.palette.primary.light}`,
-    cursor: 'pointer',
-  },
-  collapsible: {
-    paddingTop: theme.spacing.unit * 2,
-  },
-}))(Collapsible);
+export default Collapsible;

package/src/color.js

@@ -1,8 +1,4 @@
-import green from '@material-ui/core/colors/green';
-import orange from '@material-ui/core/colors/orange';
-import pink from '@material-ui/core/colors/pink';
-import indigo from '@material-ui/core/colors/indigo';
-import red from '@material-ui/core/colors/red';
+import { green, orange, pink, indigo, red } from '@mui/material/colors';
 
 export const defaults = {
   TEXT: 'black',

package/src/feedback.jsx

@@ -1,7 +1,7 @@
 /**
  * Lifted from multiple-choice - TODO: create a shared package for it.
  */
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
 import React from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
@@ -9,77 +9,75 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import * as color from './color';
 
-const styleSheet = {
-  corespringFeedback: {
-    transformOrigin: '0% 0px 0px',
-    width: '100%',
-    display: 'block',
-    overflow: 'hidden',
-    '&:.incorrect': {
-      color: '#946202',
-    },
+const FeedbackContainer = styled('div')({
+  transformOrigin: '0% 0px 0px',
+  width: '100%',
+  display: 'block',
+  overflow: 'hidden',
+  '&.incorrect': {
+    color: '#946202',
   },
-  content: {
-    '-webkit-font-smoothing': 'antialiased',
-    backgroundColor: `var(--feedback-bg-color, ${color.disabled()})`,
-    borderRadius: '4px',
-    lineHeight: '25px',
-    margin: '0px',
-    padding: '10px',
-    verticalAlign: 'middle',
-    color: 'var(--feedback-color, white)',
-  },
-  correct: {
+});
+
+const FeedbackContent = styled('div')({
+  WebkitFontSmoothing: 'antialiased',
+  backgroundColor: `var(--feedback-bg-color, ${color.disabled()})`,
+  borderRadius: '4px',
+  lineHeight: '25px',
+  margin: '0px',
+  padding: '10px',
+  verticalAlign: 'middle',
+  color: 'var(--feedback-color, white)',
+  '&.correct': {
     backgroundColor: `var(--feedback-correct-bg-color, ${color.correct()})`,
   },
-  incorrect: {
+  '&.incorrect': {
     backgroundColor: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,
   },
-  feedbackEnter: {
+});
+
+const transitionClasses = {
+  feedbackEnter: 'feedback-enter',
+  feedbackEnterActive: 'feedback-enter-active',
+  feedbackLeave: 'feedback-leave',
+  feedbackLeaveActive: 'feedback-leave-active',
+};
+
+const TransitionWrapper = styled('div')({
+  [`&.${transitionClasses.feedbackEnter}`]: {
     height: '1px',
   },
-  feedbackEnterActive: {
+  [`&.${transitionClasses.feedbackEnterActive}`]: {
     height: '45px',
     transition: 'height 500ms',
   },
-  feedbackLeave: {
+  [`&.${transitionClasses.feedbackLeave}`]: {
     height: '45px',
   },
-  feedbackLeaveActive: {
+  [`&.${transitionClasses.feedbackLeaveActive}`]: {
     height: '1px',
     transition: 'height 200ms',
   },
-};
+});
 
 export class Feedback extends React.Component {
   static propTypes = {
     correctness: PropTypes.string,
     feedback: PropTypes.string,
-    classes: PropTypes.object.isRequired,
   };
 
   render() {
-    const { correctness, feedback, classes } = this.props;
+    const { correctness, feedback } = this.props;
 
     function chooseFeedback(correctness) {
       if (correctness && feedback) {
         return (
-          <CSSTransition
-            classNames={{
-              enter: classes.feedbackEnter,
-              enterActive: classes.feedbackEnterActive,
-              leave: classes.feedbackLeave,
-              leaveActive: classes.feedbackLeaveActive,
-            }}
-            key="hasFeedback"
-            timeout={{ enter: 500, exit: 300 }}
-          >
-            <div className={classes.corespringFeedback}>
-              <div
-                className={classNames(classes.content, classes[correctness])}
-                dangerouslySetInnerHTML={{ __html: feedback }}
-              />
-            </div>
+          <CSSTransition classNames={transitionClasses} key="hasFeedback" timeout={{ enter: 500, exit: 300 }}>
+            <TransitionWrapper>
+              <FeedbackContainer>
+                <FeedbackContent className={classNames(correctness)} dangerouslySetInnerHTML={{ __html: feedback }} />
+              </FeedbackContainer>
+            </TransitionWrapper>
           </CSSTransition>
         );
       } else {
@@ -95,4 +93,4 @@ export class Feedback extends React.Component {
   }
 }
 
-export default withStyles(styleSheet, { name: 'Feedback' })(Feedback);
+export default Feedback;

package/src/input-container.jsx

@@ -1,41 +1,50 @@
-import InputLabel from '@material-ui/core/InputLabel';
+import InputLabel from '@mui/material/InputLabel';
 import PropTypes from 'prop-types';
 import React from 'react';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import FormControl from '@material-ui/core/FormControl';
+import { styled } from '@mui/material/styles';
+import FormControl from '@mui/material/FormControl';
 
-const RawInputContainer = (props) => {
-  const { label, className, children, classes } = props;
-  const names = classNames(classes.formControl, className);
+const StyledFormControl = styled(FormControl)(({ theme }) => ({
+  margin: 0,
+  padding: 0,
+  flex: '1 0 auto',
+  minWidth: theme.spacing(4),
+}));
 
-  return (
-    <FormControl className={names}>
-      <InputLabel className={classes.label} shrink={true}>
-        {label}
-      </InputLabel>
-      {children}
-    </FormControl>
-  );
-};
+const StyledInputLabel = styled(InputLabel)(() => ({
+ fontSize: 'inherit',
+  whiteSpace: 'nowrap',
+  margin: 0,
+  padding: 0,
+  alignSelf: 'flex-start',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  transformOrigin: 'top left',
+  pointerEvents: 'none',
+  // override MUI's default transform styles
+  '&.MuiInputLabel-shrink': {
+    transform: 'scale(0.75) translate(0, -0.75em)',
+  },
+  '&:not(.MuiInputLabel-shrink)': {
+    transform: 'translate(0, 0)',
+  },
+}));
 
-RawInputContainer.propTypes = {
+const InputContainer = ({ label, className, children }) => (
+  <StyledFormControl className={className}>
+    <StyledInputLabel shrink>{label}</StyledInputLabel>
+    {children}
+  </StyledFormControl>
+);
+
+InputContainer.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  classes: PropTypes.object.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
 };
 
-export default withStyles((theme) => ({
-  formControl: {
-    marginLeft: 0,
-    marginRight: 0,
-    paddingBottom: theme.spacing.unit,
-    flex: '1 0 auto',
-    minWidth: theme.spacing.unit * 4,
-  },
-  label: {
-    fontSize: 'inherit',
-    whiteSpace: 'nowrap',
-  },
-}))(RawInputContainer);
+export default InputContainer;