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

package/lib/langs.js

@@ -1,56 +1,84 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.LanguageControls = exports.Langs = void 0;
+exports["default"] = exports.RawLangs = exports.LanguageControls = void 0;
+
 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 _Input = _interopRequireDefault(require("@mui/material/Input"));
-var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+
+var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
+
+var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("@mui/material/styles");
-var _Select = _interopRequireDefault(require("@mui/material/Select"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
-var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+
 var _debug = _interopRequireDefault(require("debug"));
-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; })(); }
+
+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 log = (0, _debug["default"])('pie-elements:config-ui:langs');
-var StyledRoot = (0, _styles.styled)('div')(function () {
-  return {
-    flexDirection: 'column',
-    alignItems: 'start',
-    display: 'flex',
-    position: 'relative',
-    paddingTop: '0px',
-    paddingRight: '0px'
-  };
-});
-var StyledFormControl = (0, _styles.styled)(_FormControl["default"])(function () {
-  return {
-    position: 'initial'
-  };
-});
-var StyledInputLabel = (0, _styles.styled)(_InputLabel["default"])(function (_ref) {
-  var theme = _ref.theme;
+
+var styles = function styles(theme) {
   return {
-    paddingBottom: theme.spacing(1)
+    root: {
+      flexDirection: 'column',
+      alignItems: 'start',
+      display: 'flex',
+      position: 'relative',
+      paddingTop: '0px',
+      paddingRight: '0px'
+    },
+    formControl: {
+      position: 'initial'
+    },
+    inputLabel: {
+      paddingBottom: theme.spacing.unit
+    }
   };
-});
-var Langs = exports.Langs = /*#__PURE__*/function (_React$Component) {
-  function Langs(props) {
+};
+
+var RawLangs = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(RawLangs, _React$Component);
+
+  var _super = _createSuper(RawLangs);
+
+  function RawLangs(props) {
     var _this;
-    (0, _classCallCheck2["default"])(this, Langs);
-    _this = _callSuper(this, Langs, [props]);
-    (0, _defineProperty2["default"])(_this, "choose", function (event) {
+
+    (0, _classCallCheck2["default"])(this, RawLangs);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "choose", function (event) {
       log('[choose] event: ', event);
+
       if (_this.props.onChange) {
         _this.props.onChange(event.target.value);
       }
@@ -58,16 +86,22 @@ var Langs = exports.Langs = /*#__PURE__*/function (_React$Component) {
     _this.uid = props.uid || (Math.random() * 10000).toFixed();
     return _this;
   }
-  (0, _inherits2["default"])(Langs, _React$Component);
-  return (0, _createClass2["default"])(Langs, [{
+
+  (0, _createClass2["default"])(RawLangs, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-        langs = _this$props.langs,
-        selected = _this$props.selected,
-        label = _this$props.label;
+          langs = _this$props.langs,
+          selected = _this$props.selected,
+          label = _this$props.label,
+          classes = _this$props.classes;
       log('[render] selected:', selected);
-      return /*#__PURE__*/_react["default"].createElement(StyledRoot, null, /*#__PURE__*/_react["default"].createElement(StyledFormControl, null, /*#__PURE__*/_react["default"].createElement(StyledInputLabel, {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.root
+      }, /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
+        className: classes.formControl
+      }, /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], {
+        className: classes.inputLabel,
         htmlFor: this.uid
       }, label), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         value: selected,
@@ -83,32 +117,41 @@ var Langs = exports.Langs = /*#__PURE__*/function (_React$Component) {
       }))));
     }
   }]);
+  return RawLangs;
 }(_react["default"].Component);
-(0, _defineProperty2["default"])(Langs, "propTypes", {
+
+exports.RawLangs = RawLangs;
+(0, _defineProperty2["default"])(RawLangs, "propTypes", {
   onChange: _propTypes["default"].func,
   langs: _propTypes["default"].array,
   selected: _propTypes["default"].string,
   label: _propTypes["default"].string,
+  classes: _propTypes["default"].object.isRequired,
   uid: _propTypes["default"].string
 });
-var _default = exports["default"] = Langs;
-var StyledLanguageControls = (0, _styles.styled)('div')(function () {
-  return {
+var Langs = (0, _styles.withStyles)(styles, {
+  name: 'Langs'
+})(RawLangs);
+var _default = Langs;
+exports["default"] = _default;
+var LanguageControls = (0, _styles.withStyles)({
+  languageControls: {
     display: 'grid',
     gridAutoFlow: 'column',
     gridAutoColumns: '1fr',
     gridGap: '8px'
-  };
-});
-var LanguageControls = exports.LanguageControls = function LanguageControls(_ref2) {
-  var langs = _ref2.langs,
-    activeLang = _ref2.activeLang,
-    defaultLang = _ref2.defaultLang,
-    onActiveLangChange = _ref2.onActiveLangChange,
-    onDefaultLangChange = _ref2.onDefaultLangChange,
-    className = _ref2.className;
-  return /*#__PURE__*/_react["default"].createElement(StyledLanguageControls, {
-    className: className
+  }
+})(function (_ref) {
+  var classes = _ref.classes,
+      langs = _ref.langs,
+      activeLang = _ref.activeLang,
+      defaultLang = _ref.defaultLang,
+      onActiveLangChange = _ref.onActiveLangChange,
+      onDefaultLangChange = _ref.onDefaultLangChange,
+      className = _ref.className;
+  var names = (0, _classnames["default"])(classes.languageControls, className);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: names
   }, /*#__PURE__*/_react["default"].createElement(Langs, {
     label: "Choose language to edit",
     langs: langs,
@@ -124,7 +167,8 @@ var LanguageControls = exports.LanguageControls = function LanguageControls(_ref
       return onDefaultLangChange(l);
     }
   }));
-};
+});
+exports.LanguageControls = LanguageControls;
 LanguageControls.propTypes = {
   langs: _propTypes["default"].array,
   activeLang: _propTypes["default"].string.isRequired,

package/lib/langs.js.map

@@ -1 +1 @@
-{"version":3,"file":"langs.js","names":["_Input","_interopRequireDefault","require","_InputLabel","_propTypes","_react","_styles","_Select","_MenuItem","_FormControl","_debug","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","log","debug","StyledRoot","styled","flexDirection","alignItems","display","position","paddingTop","paddingRight","StyledFormControl","FormControl","StyledInputLabel","InputLabel","_ref","theme","paddingBottom","spacing","Langs","exports","_React$Component","props","_this","_classCallCheck2","_defineProperty2","event","onChange","target","value","uid","Math","random","toFixed","_inherits2","_createClass2","key","render","_this$props","langs","selected","label","createElement","htmlFor","choose","input","id","map","l","index","React","Component","PropTypes","func","array","string","_default","StyledLanguageControls","gridAutoFlow","gridAutoColumns","gridGap","LanguageControls","_ref2","activeLang","defaultLang","onActiveLangChange","onDefaultLangChange","className","propTypes","isRequired"],"sources":["../src/langs.jsx"],"sourcesContent":["import Input from '@mui/material/Input';\nimport InputLabel from '@mui/material/InputLabel';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { styled } from '@mui/material/styles';\nimport Select from '@mui/material/Select';\nimport MenuItem from '@mui/material/MenuItem';\nimport FormControl from '@mui/material/FormControl';\nimport debug from 'debug';\n\nconst log = debug('pie-elements:config-ui:langs');\n\nconst StyledRoot = styled('div')(() => ({\n  flexDirection: 'column',\n  alignItems: 'start',\n  display: 'flex',\n  position: 'relative',\n  paddingTop: '0px',\n  paddingRight: '0px',\n}));\n\nconst StyledFormControl = styled(FormControl)(() => ({\n  position: 'initial',\n}));\n\nconst StyledInputLabel = styled(InputLabel)(({ theme }) => ({\n  paddingBottom: theme.spacing(1),\n}));\n\nexport class Langs extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    langs: PropTypes.array,\n    selected: PropTypes.string,\n    label: PropTypes.string,\n    uid: PropTypes.string,\n  };\n\n  constructor(props) {\n    super(props);\n    this.uid = props.uid || (Math.random() * 10000).toFixed();\n  }\n\n  choose = (event) => {\n    log('[choose] event: ', event);\n\n    if (this.props.onChange) {\n      this.props.onChange(event.target.value);\n    }\n  };\n\n  render() {\n    let { langs, selected, label } = this.props;\n\n    log('[render] selected:', selected);\n\n    return (\n      <StyledRoot>\n        <StyledFormControl>\n          <StyledInputLabel htmlFor={this.uid}>\n            {label}\n          </StyledInputLabel>\n\n          <Select value={selected} onChange={this.choose} input={<Input id={this.uid} />}>\n            {langs.map((l, index) => (\n              <MenuItem key={index} value={l}>\n                {l}\n              </MenuItem>\n            ))}\n          </Select>\n        </StyledFormControl>\n      </StyledRoot>\n    );\n  }\n}\nexport default Langs;\n\nconst StyledLanguageControls = styled('div')(() => ({\n  display: 'grid',\n  gridAutoFlow: 'column',\n  gridAutoColumns: '1fr',\n  gridGap: '8px',\n}));\n\nexport const LanguageControls = ({ langs, activeLang, defaultLang, onActiveLangChange, onDefaultLangChange, className }) => {\n  return (\n    <StyledLanguageControls className={className}>\n      <Langs\n        label=\"Choose language to edit\"\n        langs={langs}\n        selected={activeLang}\n        onChange={(l) => onActiveLangChange(l)}\n      />\n      <Langs label=\"Default language\" langs={langs} selected={defaultLang} onChange={(l) => onDefaultLangChange(l)} />\n    </StyledLanguageControls>\n  );\n};\n\nLanguageControls.propTypes = {\n  langs: PropTypes.array,\n  activeLang: PropTypes.string.isRequired,\n  defaultLang: PropTypes.string.isRequired,\n  onActiveLangChange: PropTypes.func.isRequired,\n  onDefaultLangChange: PropTypes.func.isRequired,\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../src/langs.jsx"],"names":["log","styles","theme","root","flexDirection","alignItems","display","position","paddingTop","paddingRight","formControl","inputLabel","paddingBottom","spacing","unit","RawLangs","props","event","onChange","target","value","uid","Math","random","toFixed","langs","selected","label","classes","choose","map","l","index","React","Component","PropTypes","func","array","string","object","isRequired","Langs","name","LanguageControls","languageControls","gridAutoFlow","gridAutoColumns","gridGap","activeLang","defaultLang","onActiveLangChange","onDefaultLangChange","className","names","propTypes"],"mappings":"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","sourcesContent":["import Input from '@material-ui/core/Input';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport debug from 'debug';\n\nconst log = debug('pie-elements:config-ui:langs');\n\nconst styles = (theme) => ({\n  root: {\n    flexDirection: 'column',\n    alignItems: 'start',\n    display: 'flex',\n    position: 'relative',\n    paddingTop: '0px',\n    paddingRight: '0px',\n  },\n  formControl: {\n    position: 'initial',\n  },\n  inputLabel: {\n    paddingBottom: theme.spacing.unit,\n  },\n});\n\nexport class RawLangs extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    langs: PropTypes.array,\n    selected: PropTypes.string,\n    label: PropTypes.string,\n    classes: PropTypes.object.isRequired,\n    uid: PropTypes.string,\n  };\n\n  constructor(props) {\n    super(props);\n    this.uid = props.uid || (Math.random() * 10000).toFixed();\n  }\n\n  choose = (event) => {\n    log('[choose] event: ', event);\n\n    if (this.props.onChange) {\n      this.props.onChange(event.target.value);\n    }\n  };\n\n  render() {\n    let { langs, selected, label, classes } = this.props;\n\n    log('[render] selected:', selected);\n\n    return (\n      <div className={classes.root}>\n        <FormControl className={classes.formControl}>\n          <InputLabel className={classes.inputLabel} htmlFor={this.uid}>\n            {label}\n          </InputLabel>\n\n          <Select value={selected} onChange={this.choose} input={<Input id={this.uid} />}>\n            {langs.map((l, index) => (\n              <MenuItem key={index} value={l}>\n                {l}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n      </div>\n    );\n  }\n}\n\nconst Langs = withStyles(styles, { name: 'Langs' })(RawLangs);\nexport default Langs;\n\nexport const LanguageControls = withStyles({\n  languageControls: {\n    display: 'grid',\n    gridAutoFlow: 'column',\n    gridAutoColumns: '1fr',\n    gridGap: '8px',\n  },\n})(({ classes, langs, activeLang, defaultLang, onActiveLangChange, onDefaultLangChange, className }) => {\n  const names = classNames(classes.languageControls, className);\n\n  return (\n    <div className={names}>\n      <Langs\n        label=\"Choose language to edit\"\n        langs={langs}\n        selected={activeLang}\n        onChange={(l) => onActiveLangChange(l)}\n      />\n      <Langs label=\"Default language\" langs={langs} selected={defaultLang} onChange={(l) => onDefaultLangChange(l)} />\n    </div>\n  );\n});\n\nLanguageControls.propTypes = {\n  langs: PropTypes.array,\n  activeLang: PropTypes.string.isRequired,\n  defaultLang: PropTypes.string.isRequired,\n  onActiveLangChange: PropTypes.func.isRequired,\n  onDefaultLangChange: PropTypes.func.isRequired,\n};\n"],"file":"langs.js"}

package/lib/layout/__tests__/config.layout.test.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _configLayout = _interopRequireDefault(require("../config-layout"));
+
+var _enzyme = require("enzyme");
+
+describe('layout - snapshot', function () {
+  it('renders correctly with a side panel', function () {
+    var tree = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_configLayout["default"], {
+      settings: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        key: 0
+      }, "Foo"), /*#__PURE__*/_react["default"].createElement("div", {
+        key: 1
+      }, "Bar"))
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, "Foo"), /*#__PURE__*/_react["default"].createElement("div", null, "Bar"))));
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders correctly without a side panel', function () {
+    var tree = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_configLayout["default"], {
+      settings: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        key: 0
+      }, "Foo"), /*#__PURE__*/_react["default"].createElement("div", {
+        key: 1
+      }, "Bar"))
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, "Foo"), /*#__PURE__*/_react["default"].createElement("div", null, "Bar"))));
+    expect(tree).toMatchSnapshot();
+  });
+});
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9sYXlvdXQvX190ZXN0c19fL2NvbmZpZy5sYXlvdXQudGVzdC5qc3giXSwibmFtZXMiOlsiZGVzY3JpYmUiLCJpdCIsInRyZWUiLCJleHBlY3QiLCJ0b01hdGNoU25hcHNob3QiXSwibWFwcGluZ3MiOiI7Ozs7QUFBQTs7QUFDQTs7QUFDQTs7QUFFQUEsUUFBUSxDQUFDLG1CQUFELEVBQXNCLFlBQU07QUFDbENDLEVBQUFBLEVBQUUsQ0FBQyxxQ0FBRCxFQUF3QyxZQUFNO0FBQzlDLFFBQU1DLElBQUksR0FBRyxtQ0FDWCxnQ0FBQyx3QkFBRDtBQUNFLE1BQUEsUUFBUSxlQUNOLDBEQUNFO0FBQUssUUFBQSxHQUFHLEVBQUU7QUFBVixlQURGLGVBRUU7QUFBSyxRQUFBLEdBQUcsRUFBRTtBQUFWLGVBRkY7QUFGSixvQkFRRSwwREFDRSxtREFERixlQUVFLG1EQUZGLENBUkYsQ0FEVyxDQUFiO0FBZUFDLElBQUFBLE1BQU0sQ0FBQ0QsSUFBRCxDQUFOLENBQWFFLGVBQWI7QUFDRCxHQWpCQyxDQUFGO0FBa0JBSCxFQUFBQSxFQUFFLENBQUMsd0NBQUQsRUFBMkMsWUFBTTtBQUNqRCxRQUFNQyxJQUFJLEdBQUcsbUNBQ1gsZ0NBQUMsd0JBQUQ7QUFDRSxNQUFBLFFBQVEsZUFDTiwwREFDRTtBQUFLLFFBQUEsR0FBRyxFQUFFO0FBQVYsZUFERixlQUVFO0FBQUssUUFBQSxHQUFHLEVBQUU7QUFBVixlQUZGO0FBRkosb0JBUUUsMERBQ0UsbURBREYsZUFFRSxtREFGRixDQVJGLENBRFcsQ0FBYjtBQWVBQyxJQUFBQSxNQUFNLENBQUNELElBQUQsQ0FBTixDQUFhRSxlQUFiO0FBQ0QsR0FqQkMsQ0FBRjtBQWtCRCxDQXJDTyxDQUFSIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBDb25maWdMYXlvdXQgZnJvbSAnLi4vY29uZmlnLWxheW91dCc7XG5pbXBvcnQgeyBzaGFsbG93IH0gZnJvbSAnZW56eW1lJztcblxuZGVzY3JpYmUoJ2xheW91dCAtIHNuYXBzaG90JywgKCkgPT4ge1xuICBpdCgncmVuZGVycyBjb3JyZWN0bHkgd2l0aCBhIHNpZGUgcGFuZWwnLCAoKSA9PiB7XG4gICAgY29uc3QgdHJlZSA9IHNoYWxsb3coXG4gICAgICA8Q29uZmlnTGF5b3V0XG4gICAgICAgIHNldHRpbmdzPXtcbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPGRpdiBrZXk9ezB9PkZvbzwvZGl2PlxuICAgICAgICAgICAgPGRpdiBrZXk9ezF9PkJhcjwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgICA+XG4gICAgICAgIDxkaXY+XG4gICAgICAgICAgPGRpdj5Gb288L2Rpdj5cbiAgICAgICAgICA8ZGl2PkJhcjwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvQ29uZmlnTGF5b3V0PixcbiAgICApO1xuICAgIGV4cGVjdCh0cmVlKS50b01hdGNoU25hcHNob3QoKTtcbiAgfSk7XG4gIGl0KCdyZW5kZXJzIGNvcnJlY3RseSB3aXRob3V0IGEgc2lkZSBwYW5lbCcsICgpID0+IHtcbiAgICBjb25zdCB0cmVlID0gc2hhbGxvdyhcbiAgICAgIDxDb25maWdMYXlvdXRcbiAgICAgICAgc2V0dGluZ3M9e1xuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8ZGl2IGtleT17MH0+Rm9vPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGtleT17MX0+QmFyPC9kaXY+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICAgID5cbiAgICAgICAgPGRpdj5cbiAgICAgICAgICA8ZGl2PkZvbzwvZGl2PlxuICAgICAgICAgIDxkaXY+QmFyPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9Db25maWdMYXlvdXQ+LFxuICAgICk7XG4gICAgZXhwZWN0KHRyZWUpLnRvTWF0Y2hTbmFwc2hvdCgpO1xuICB9KTtcbn0pO1xuIl19

package/lib/layout/__tests__/layout-content.test.js

@@ -0,0 +1,6 @@
+"use strict";
+
+describe('layout-content', function () {
+  it.todo('add tests!');
+});
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9sYXlvdXQvX190ZXN0c19fL2xheW91dC1jb250ZW50LnRlc3QuanN4Il0sIm5hbWVzIjpbImRlc2NyaWJlIiwiaXQiLCJ0b2RvIl0sIm1hcHBpbmdzIjoiOztBQUFBQSxRQUFRLENBQUMsZ0JBQUQsRUFBbUIsWUFBTTtBQUMvQkMsRUFBQUEsRUFBRSxDQUFDQyxJQUFILENBQVEsWUFBUjtBQUNELENBRk8sQ0FBUiIsInNvdXJjZXNDb250ZW50IjpbImRlc2NyaWJlKCdsYXlvdXQtY29udGVudCcsICgpID0+IHtcbiAgaXQudG9kbygnYWRkIHRlc3RzIScpO1xufSk7XG4iXX0=

package/lib/layout/config-layout.js

@@ -1,98 +1,148 @@
 "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 _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 = _interopRequireDefault(require("react"));
+
 var _reactMeasure = _interopRequireWildcard(require("react-measure"));
-var _styles = require("@mui/material/styles");
+
+var _styles = require("@material-ui/core/styles");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _layoutContents = _interopRequireDefault(require("./layout-contents"));
+
 var _settingsBox = _interopRequireDefault(require("./settings-box"));
+
 var _renderUi = require("@pie-lib/render-ui");
-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 theme = (0, _styles.createTheme)({
+
+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 = {
+  extraCSSRules: {}
+};
+var theme = (0, _styles.createMuiTheme)({
   typography: {
+    // In MUI v3, this opts into the h1–h6 variants; otherwise use display1/headline/etc.
+    useNextVariants: true,
     fontFamily: 'inherit'
   }
 });
+
 var MeasuredConfigLayout = /*#__PURE__*/function (_AppendCSSRules) {
+  (0, _inherits2["default"])(MeasuredConfigLayout, _AppendCSSRules);
+
+  var _super = _createSuper(MeasuredConfigLayout);
+
   function MeasuredConfigLayout() {
     var _this;
+
     (0, _classCallCheck2["default"])(this, MeasuredConfigLayout);
+
     for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
       props[_key] = arguments[_key];
     }
-    _this = _callSuper(this, MeasuredConfigLayout, [].concat(props));
-    (0, _defineProperty2["default"])(_this, "onResize", function (contentRect) {
+
+    _this = _super.call.apply(_super, [this].concat(props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResize", function (contentRect) {
       var bounds = contentRect.bounds;
       var _this$props = _this.props,
-        sidePanelMinWidth = _this$props.sidePanelMinWidth,
-        dimensions = _this$props.dimensions;
+          sidePanelMinWidth = _this$props.sidePanelMinWidth,
+          dimensions = _this$props.dimensions;
+
       var _ref = dimensions || {},
-        maxWidth = _ref.maxWidth;
-      var layoutMode = bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';
-      _this.setState({
-        layoutMode: layoutMode
-      });
+          maxWidth = _ref.maxWidth;
+
+      var layoutMode = bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed'; // Only update state (and cause a re-render) if the computed layoutMode changed.
+
+      if (layoutMode !== _this.state.layoutMode) {
+        _this.setState({
+          layoutMode: layoutMode
+        });
+      }
     });
     _this.state = {
       layoutMode: undefined
     };
     return _this;
   }
-  (0, _inherits2["default"])(MeasuredConfigLayout, _AppendCSSRules);
-  return (0, _createClass2["default"])(MeasuredConfigLayout, [{
+
+  (0, _createClass2["default"])(MeasuredConfigLayout, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-      return /*#__PURE__*/_react["default"].createElement(_styles.StyledEngineProvider, {
-        injectFirst: true
-      }, /*#__PURE__*/_react["default"].createElement(_styles.ThemeProvider, {
-        theme: theme
-      }, /*#__PURE__*/_react["default"].createElement(_reactMeasure["default"], {
-        bounds: true,
-        onResize: this.onResize
-      }, function (_ref2) {
-        var measureRef = _ref2.measureRef;
-        var _this2$props = _this2.props,
-          children = _this2$props.children,
-          settings = _this2$props.settings,
-          hideSettings = _this2$props.hideSettings,
-          dimensions = _this2$props.dimensions;
-        var layoutMode = _this2.state.layoutMode;
-        var settingsPanel = layoutMode === 'inline' ? /*#__PURE__*/_react["default"].createElement(_settingsBox["default"], {
-          className: "settings-box"
-        }, settings) : settings;
-        var secondaryContent = hideSettings ? null : settingsPanel;
-        var finalClass = (0, _classnames["default"])('main-container');
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          ref: measureRef,
-          className: finalClass
-        }, /*#__PURE__*/_react["default"].createElement(_layoutContents["default"], {
-          mode: layoutMode,
-          secondary: secondaryContent,
-          dimensions: dimensions
-        }, children));
-      })));
+
+      return (
+        /*#__PURE__*/
+        // TODO: REVIEW MuiThemeProvider usage
+        // Different theme object identities will force theme consumers to re-render.
+        _react["default"].createElement(_styles.MuiThemeProvider, {
+          theme: theme
+        }, /*#__PURE__*/_react["default"].createElement(_reactMeasure["default"], {
+          bounds: true,
+          onResize: this.onResize
+        }, function (_ref2) {
+          var measureRef = _ref2.measureRef;
+          var _this2$props = _this2.props,
+              children = _this2$props.children,
+              settings = _this2$props.settings,
+              hideSettings = _this2$props.hideSettings,
+              dimensions = _this2$props.dimensions,
+              classes = _this2$props.classes;
+          var layoutMode = _this2.state.layoutMode;
+          var settingsPanel = layoutMode === 'inline' ? /*#__PURE__*/_react["default"].createElement(_settingsBox["default"], {
+            className: "settings-box"
+          }, settings) : settings;
+          var secondaryContent = hideSettings ? null : settingsPanel;
+          var finalClass = (0, _classnames["default"])('main-container', classes.extraCSSRules);
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            ref: measureRef,
+            className: finalClass
+          }, /*#__PURE__*/_react["default"].createElement(_layoutContents["default"], {
+            mode: layoutMode,
+            secondary: secondaryContent,
+            dimensions: dimensions
+          }, children));
+        }))
+      );
     }
   }]);
+  return MeasuredConfigLayout;
 }(_renderUi.AppendCSSRules);
+
 (0, _defineProperty2["default"])(MeasuredConfigLayout, "propTypes", {
   children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].element), _propTypes["default"].element]),
   className: _propTypes["default"].string,
+  classes: _propTypes["default"].object,
   dimensions: _propTypes["default"].object,
   settings: _propTypes["default"].element,
   sidePanelMinWidth: _propTypes["default"].number,
@@ -103,6 +153,7 @@ var MeasuredConfigLayout = /*#__PURE__*/function (_AppendCSSRules) {
   hideSettings: false,
   dimensions: {}
 });
-var ConfigLayout = (0, _reactMeasure.withContentRect)('bounds')(MeasuredConfigLayout);
-var _default = exports["default"] = ConfigLayout;
+var ConfigLayout = (0, _styles.withStyles)(styles)((0, _reactMeasure.withContentRect)('bounds')(MeasuredConfigLayout));
+var _default = ConfigLayout;
+exports["default"] = _default;
 //# sourceMappingURL=config-layout.js.map

package/lib/layout/config-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"config-layout.js","names":["_react","_interopRequireDefault","require","_reactMeasure","_interopRequireWildcard","_styles","_propTypes","_classnames","_layoutContents","_settingsBox","_renderUi","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","theme","createTheme","typography","fontFamily","MeasuredConfigLayout","_AppendCSSRules","_this","_classCallCheck2","_len","arguments","length","props","Array","_key","concat","_defineProperty2","contentRect","bounds","_this$props","sidePanelMinWidth","dimensions","_ref","maxWidth","layoutMode","width","setState","state","undefined","_inherits2","_createClass2","key","value","render","_this2","createElement","StyledEngineProvider","injectFirst","ThemeProvider","onResize","_ref2","measureRef","_this2$props","children","settings","hideSettings","settingsPanel","className","secondaryContent","finalClass","classNames","ref","mode","secondary","AppendCSSRules","PropTypes","oneOfType","string","arrayOf","element","object","number","bool","ConfigLayout","withContentRect","_default","exports"],"sources":["../../src/layout/config-layout.jsx"],"sourcesContent":["import React from 'react';\nimport Measure from 'react-measure';\nimport { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';\nimport { withContentRect } from 'react-measure';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport LayoutContents from './layout-contents';\nimport SettingsBox from './settings-box';\nimport { AppendCSSRules } from '@pie-lib/render-ui';\n\nconst theme = createTheme({\n  typography: {\n    fontFamily: 'inherit',\n  },\n});\n\nclass MeasuredConfigLayout extends AppendCSSRules {\n  static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),\n    className: PropTypes.string,\n    dimensions: PropTypes.object,\n    settings: PropTypes.element,\n    sidePanelMinWidth: PropTypes.number,\n    hideSettings: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    sidePanelMinWidth: 1135,\n    hideSettings: false,\n    dimensions: {},\n  };\n\n  constructor(...props) {\n    super(...props);\n    this.state = { layoutMode: undefined };\n  }\n\n  onResize = (contentRect) => {\n    const { bounds } = contentRect;\n    const { sidePanelMinWidth, dimensions } = this.props;\n    const { maxWidth } = dimensions || {};\n\n    const layoutMode =\n      bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';\n\n    this.setState({ layoutMode });\n  };\n\n  render() {\n    return (\n      <StyledEngineProvider injectFirst>\n        <ThemeProvider theme={theme}>\n          <Measure bounds onResize={this.onResize}>\n            {({ measureRef }) => {\n              const { children, settings, hideSettings, dimensions } = this.props;\n              const { layoutMode } = this.state;\n\n              const settingsPanel =\n                layoutMode === 'inline' ? <SettingsBox className=\"settings-box\">{settings}</SettingsBox> : settings;\n              const secondaryContent = hideSettings ? null : settingsPanel;\n              const finalClass = classNames('main-container');\n\n              return (\n                <div ref={measureRef} className={finalClass}>\n                  <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>\n                    {children}\n                  </LayoutContents>\n                </div>\n              );\n            }}\n          </Measure>\n        </ThemeProvider>\n      </StyledEngineProvider>\n    );\n  }\n}\n\nconst ConfigLayout = withContentRect('bounds')(MeasuredConfigLayout);\n\nexport default ConfigLayout;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../src/layout/config-layout.jsx"],"names":["styles","extraCSSRules","theme","typography","useNextVariants","fontFamily","MeasuredConfigLayout","props","contentRect","bounds","sidePanelMinWidth","dimensions","maxWidth","layoutMode","width","state","setState","undefined","onResize","measureRef","children","settings","hideSettings","classes","settingsPanel","secondaryContent","finalClass","AppendCSSRules","PropTypes","oneOfType","string","arrayOf","element","className","object","number","bool","ConfigLayout"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Measure from 'react-measure';\nimport { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';\nimport { withContentRect } from 'react-measure';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport LayoutContents from './layout-contents';\nimport SettingsBox from './settings-box';\nimport { AppendCSSRules } from '@pie-lib/render-ui';\n\nconst styles = {\n  extraCSSRules: {},\n};\n\nconst theme = createMuiTheme({\n  typography: {\n    // In MUI v3, this opts into the h1–h6 variants; otherwise use display1/headline/etc.\n    useNextVariants: true,\n    fontFamily: 'inherit',\n  },\n});\n\nclass MeasuredConfigLayout extends AppendCSSRules {\n  static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),\n    className: PropTypes.string,\n    classes: PropTypes.object,\n    dimensions: PropTypes.object,\n    settings: PropTypes.element,\n    sidePanelMinWidth: PropTypes.number,\n    hideSettings: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    sidePanelMinWidth: 1135,\n    hideSettings: false,\n    dimensions: {},\n  };\n\n  constructor(...props) {\n    super(...props);\n    this.state = { layoutMode: undefined };\n  }\n\n  onResize = (contentRect) => {\n    const { bounds } = contentRect;\n    const { sidePanelMinWidth, dimensions } = this.props;\n    const { maxWidth } = dimensions || {};\n\n    const layoutMode =\n      bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';\n\n    // Only update state (and cause a re-render) if the computed layoutMode changed.\n    if (layoutMode !== this.state.layoutMode) {\n      this.setState({ layoutMode });\n    }\n  };\n\n  render() {\n    return (\n      // TODO: REVIEW MuiThemeProvider usage\n      // Different theme object identities will force theme consumers to re-render.\n      <MuiThemeProvider theme={theme}>\n        <Measure bounds onResize={this.onResize}>\n          {({ measureRef }) => {\n            const { children, settings, hideSettings, dimensions, classes } = this.props;\n            const { layoutMode } = this.state;\n\n            const settingsPanel =\n              layoutMode === 'inline' ? <SettingsBox className=\"settings-box\">{settings}</SettingsBox> : settings;\n            const secondaryContent = hideSettings ? null : settingsPanel;\n            const finalClass = classNames('main-container', classes.extraCSSRules);\n\n            return (\n              <div ref={measureRef} className={finalClass}>\n                <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>\n                  {children}\n                </LayoutContents>\n              </div>\n            );\n          }}\n        </Measure>\n      </MuiThemeProvider>\n    );\n  }\n}\n\nconst ConfigLayout = withStyles(styles)(withContentRect('bounds')(MeasuredConfigLayout));\n\nexport default ConfigLayout;\n"],"file":"config-layout.js"}

package/lib/layout/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,6 +17,8 @@ Object.defineProperty(exports, "LayoutContents", {
     return _layoutContents["default"];
   }
 });
+
 var _configLayout = _interopRequireDefault(require("./config-layout"));
+
 var _layoutContents = _interopRequireDefault(require("./layout-contents"));
 //# sourceMappingURL=index.js.map

package/lib/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_configLayout","_interopRequireDefault","require","_layoutContents"],"sources":["../../src/layout/index.js"],"sourcesContent":["import ConfigLayout from './config-layout';\nimport LayoutContents from './layout-contents';\n\nexport { LayoutContents, ConfigLayout };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAF,sBAAA,CAAAC,OAAA","ignoreList":[]}
+{"version":3,"sources":["../../src/layout/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import ConfigLayout from './config-layout';\nimport LayoutContents from './layout-contents';\n\nexport { LayoutContents, ConfigLayout };\n"],"file":"index.js"}