@corva/ui 0.34.0-rc.2 → 0.34.0-rc.3

package/components/EditableItem/EditableItem/index.js

@@ -1 +1,267 @@
-import e from"@babel/runtime/helpers/defineProperty";import i from"@babel/runtime/helpers/slicedToArray";import{useState as o,useEffect as t}from"react";import n from"prop-types";import r from"classnames";import{makeStyles as a,ClickAwayListener as l,TextField as c,Tooltip as s,InputAdornment as d}from"@material-ui/core";import p from"@material-ui/icons/Edit";import m from"@material-ui/icons/Close";import u from"@material-ui/icons/Done";import{jsxs as f,jsx as b}from"react/jsx-runtime";var g=a((function(e){return{editableItem:{width:"100%",height:36,position:"relative",backgroundColor:e.palette.background.b8,"&:hover":{backgroundColor:"rgba(3, 188, 212, 0.07)"},"&:hover svg":{visibility:"visible"}},editableItemActive:{backgroundColor:"rgba(3, 188, 212, 0.15)  !important"},value:{color:e.palette.primary.text6,fontSize:"0.875rem",height:"100%",letterSpacing:".13132px",lineHeight:"36px",overflow:"hidden",paddingLeft:48,textOverflow:"ellipsis",whiteSpace:"nowrap",width:"calc(100% - 32px)",userSelect:"none"},textField:{width:"100%"},inputRoot:{height:36,paddingLeft:48,fontSize:"0.875rem"},inputDisabled:{backgroundColor:"unset",paddingRight:16,"&::before":{display:"none"},pointerEvents:"none"},icon:{boxSizing:"content-box",cursor:"pointer",color:e.palette.primary.text6,padding:7,fontSize:"1rem","&:hover":{color:"#FFFFFF",backgroundColor:"rgba(51, 51, 51, 0.9)",borderRadius:"50%"},"&:target":{backgroundColor:e.palette.background.b9}},iconPrimary:{color:e.palette.primary.main},iconPrimaryDisabled:{color:e.palette.primary.main,opacity:.4,cursor:"default",pointerEvents:"none"},iconClose:{fill:"".concat(e.palette.primary.text6," !important"),"&:hover":{fill:"#FFFFFF !important"}},iconEdit:{position:"absolute",right:4,top:3,visibility:"hidden"},inputAdornment:{marginTop:1,marginRight:4}}})),h=function(n){var a=n.className,h=n.isEditable,v=n.isEditing,y=n.onClick,C=n.onClickAway,k=n.onCancel,E=n.onSave,F=n.value,x=o(F),P=i(x,2),w=P[0],S=P[1],A=o(v),N=i(A,2),R=N[0],z=N[1],D=g(),I=function(e){e.stopPropagation(),w.length&&w!==F&&E(w).then((function(){return z(!1)}))};t((function(){var e=function(e){"Escape"===e.key||"Esc"===e.key?(S(F),z(!1),C()):"Enter"===e.key&&I(e)};return R&&document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}),[R,F,w]);var L=function(e){e.stopPropagation(),S(F),z(!1),k()};t((function(){S(F)}),[F]);var T=r(D.editableItem,e({},D.editableItemActive,R),a);return f("div",{className:T,onClick:y,children:[!R&&b("div",{className:D.value,children:w}),R&&b(l,{onClickAway:function(){S(F),z(!1),C()},children:b(c,{autoFocus:!0,type:"text",value:w,onChange:function(e){e.stopPropagation(),S(e.target.value)},placeholder:"Page Name...",className:D.textField,InputProps:{classes:{root:D.inputRoot},endAdornment:R?b(d,{position:"end",children:f("span",{className:D.inputAdornment,children:[b(s,{title:"Cancel",placement:"bottom-end",children:b(m,{className:r(D.icon,D.iconClose),onClick:L,fontSize:"small"})}),b(s,{title:"Save",placement:"bottom-end",children:b(u,{color:w===F?"disabled":"primary",onClick:I,fontSize:"small",disabled:w===F,classes:{root:D.icon,colorPrimary:D.iconPrimary,colorDisabled:D.iconPrimaryDisabled}})})]})}):null}})}),h&&!R&&b(s,{title:"Rename Page",placement:"bottom-end",children:b(p,{className:r(D.icon,D.iconEdit),onClick:function(e){e.stopPropagation(),z(!0)},fontSize:"small"})})]})};h.propTypes={className:n.string,isEditable:n.bool,isEditing:n.bool,onClick:n.func,onSave:n.func.isRequired,onClickAway:n.func,onCancel:n.func,value:n.string.isRequired},h.defaultProps={className:"",isEditable:!0,isEditing:!1,onClick:function(){},onClickAway:function(){},onCancel:function(){}};export{h as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makeStyles, ClickAwayListener, TextField, Tooltip, InputAdornment } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import EditIcon from '@material-ui/icons/Edit';
+import DoneIcon from '@material-ui/icons/Done';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    editableItem: {
+      width: '100%',
+      height: 36,
+      position: 'relative',
+      backgroundColor: theme.palette.background.b8,
+      '&:hover': {
+        backgroundColor: 'rgba(3, 188, 212, 0.07)'
+      },
+      '&:hover svg': {
+        visibility: 'visible'
+      }
+    },
+    editableItemActive: {
+      backgroundColor: 'rgba(3, 188, 212, 0.15)  !important'
+    },
+    value: {
+      color: theme.palette.primary.text6,
+      fontSize: '0.875rem',
+      height: '100%',
+      letterSpacing: '.13132px',
+      lineHeight: '36px',
+      overflow: 'hidden',
+      paddingLeft: 48,
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      width: 'calc(100% - 32px)',
+      userSelect: 'none'
+    },
+    textField: {
+      width: '100%'
+    },
+    inputRoot: {
+      height: 36,
+      paddingLeft: 48,
+      fontSize: '0.875rem'
+    },
+    inputDisabled: {
+      backgroundColor: 'unset',
+      paddingRight: 16,
+      '&::before': {
+        display: 'none'
+      },
+      pointerEvents: 'none'
+    },
+    // TODO: remove icon styles when Icon component is implemented
+    icon: {
+      boxSizing: 'content-box',
+      cursor: 'pointer',
+      color: theme.palette.primary.text6,
+      padding: 7,
+      fontSize: '1rem',
+      '&:hover': {
+        color: '#FFFFFF',
+        backgroundColor: 'rgba(51, 51, 51, 0.9)',
+        borderRadius: '50%'
+      },
+      '&:target': {
+        backgroundColor: theme.palette.background.b9
+      }
+    },
+    iconPrimary: {
+      color: theme.palette.primary.main
+    },
+    iconPrimaryDisabled: {
+      color: theme.palette.primary.main,
+      opacity: 0.4,
+      cursor: 'default',
+      pointerEvents: 'none'
+    },
+    iconClose: {
+      fill: "".concat(theme.palette.primary.text6, " !important"),
+      '&:hover': {
+        fill: '#FFFFFF !important'
+      }
+    },
+    iconEdit: {
+      position: 'absolute',
+      right: 4,
+      top: 3,
+      visibility: 'hidden'
+    },
+    inputAdornment: {
+      marginTop: 1,
+      marginRight: 4
+    }
+  };
+});
+
+var EditableItem = function EditableItem(_ref) {
+  var className = _ref.className,
+      isEditable = _ref.isEditable,
+      isEditingInitial = _ref.isEditing,
+      onClick = _ref.onClick,
+      onClickAway = _ref.onClickAway,
+      onCancel = _ref.onCancel,
+      onSave = _ref.onSave,
+      initialValue = _ref.value;
+
+  var _useState = useState(initialValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(isEditingInitial),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isEditing = _useState4[0],
+      setIsEditing = _useState4[1];
+
+  var classes = useStyles();
+
+  var handleSave = function handleSave(e) {
+    e.stopPropagation();
+    if (!value.length) return;
+    if (value !== initialValue) onSave(value).then(function () {
+      return setIsEditing(false);
+    });
+  };
+
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Escape' || e.key === 'Esc') {
+        setValue(initialValue);
+        setIsEditing(false);
+        onClickAway();
+      } else if (e.key === 'Enter') {
+        handleSave(e);
+      }
+    };
+
+    if (isEditing) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+
+    return function () {
+      return document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isEditing, initialValue, value]);
+
+  var handleClickAway = function handleClickAway() {
+    setValue(initialValue);
+    setIsEditing(false);
+    onClickAway();
+  };
+
+  var handleCancel = function handleCancel(e) {
+    e.stopPropagation();
+    setValue(initialValue);
+    setIsEditing(false);
+    onCancel();
+  };
+
+  useEffect(function () {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  var handleChange = function handleChange(e) {
+    e.stopPropagation();
+    setValue(e.target.value);
+  };
+
+  var handleEdit = function handleEdit(e) {
+    e.stopPropagation();
+    setIsEditing(true);
+  };
+
+  var getInputAdornment = function getInputAdornment() {
+    if (!isEditing) return null;
+    return /*#__PURE__*/jsx(InputAdornment, {
+      position: "end",
+      children: /*#__PURE__*/jsxs("span", {
+        className: classes.inputAdornment,
+        children: [/*#__PURE__*/jsx(Tooltip, {
+          title: "Cancel",
+          placement: "bottom-end",
+          children: /*#__PURE__*/jsx(CloseIcon, {
+            className: classNames(classes.icon, classes.iconClose),
+            onClick: handleCancel,
+            fontSize: "small"
+          })
+        }), /*#__PURE__*/jsx(Tooltip, {
+          title: "Save",
+          placement: "bottom-end",
+          children: /*#__PURE__*/jsx(DoneIcon, {
+            color: value === initialValue ? 'disabled' : 'primary',
+            onClick: handleSave,
+            fontSize: "small",
+            disabled: value === initialValue,
+            classes: {
+              root: classes.icon,
+              colorPrimary: classes.iconPrimary,
+              colorDisabled: classes.iconPrimaryDisabled
+            }
+          })
+        })]
+      })
+    });
+  };
+
+  var editableInputClassName = classNames(classes.editableItem, _defineProperty({}, classes.editableItemActive, isEditing), className);
+  return /*#__PURE__*/jsxs("div", {
+    className: editableInputClassName,
+    onClick: onClick,
+    children: [!isEditing && /*#__PURE__*/jsx("div", {
+      className: classes.value,
+      children: value
+    }), isEditing && /*#__PURE__*/jsx(ClickAwayListener, {
+      onClickAway: handleClickAway,
+      children: /*#__PURE__*/jsx(TextField, {
+        autoFocus: true,
+        type: "text",
+        value: value,
+        onChange: handleChange,
+        placeholder: "Page Name...",
+        className: classes.textField,
+        InputProps: {
+          classes: {
+            root: classes.inputRoot
+          },
+          endAdornment: getInputAdornment()
+        }
+      })
+    }), isEditable && !isEditing && /*#__PURE__*/jsx(Tooltip, {
+      title: "Rename Page",
+      placement: "bottom-end",
+      children: /*#__PURE__*/jsx(EditIcon, {
+        className: classNames(classes.icon, classes.iconEdit),
+        onClick: handleEdit,
+        fontSize: "small"
+      })
+    })]
+  });
+};
+
+EditableItem.propTypes = {
+  className: PropTypes.string,
+  isEditable: PropTypes.bool,
+  isEditing: PropTypes.bool,
+  onClick: PropTypes.func,
+  onSave: PropTypes.func.isRequired,
+  onClickAway: PropTypes.func,
+  onCancel: PropTypes.func,
+  value: PropTypes.string.isRequired
+};
+EditableItem.defaultProps = {
+  className: '',
+  isEditable: true,
+  isEditing: false,
+  onClick: function onClick() {},
+  onClickAway: function onClickAway() {},
+  onCancel: function onCancel() {}
+};
+
+export default EditableItem;
+//# sourceMappingURL=index.js.map

package/components/EditableItem/EditableItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/EditableItem/EditableItem/index.js"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport {\n  ClickAwayListener,\n  InputAdornment,\n  TextField,\n  Tooltip,\n  makeStyles,\n} from '@material-ui/core';\nimport EditIcon from '@material-ui/icons/Edit';\nimport CloseIcon from '@material-ui/icons/Close';\nimport DoneIcon from '@material-ui/icons/Done';\n\nconst useStyles = makeStyles(theme => ({\n  editableItem: {\n    width: '100%',\n    height: 36,\n    position: 'relative',\n    backgroundColor: theme.palette.background.b8,\n    '&:hover': {\n      backgroundColor: 'rgba(3, 188, 212, 0.07)',\n    },\n    '&:hover svg': {\n      visibility: 'visible',\n    },\n  },\n  editableItemActive: {\n    backgroundColor: 'rgba(3, 188, 212, 0.15)  !important',\n  },\n  value: {\n    color: theme.palette.primary.text6,\n    fontSize: '0.875rem',\n    height: '100%',\n    letterSpacing: '.13132px',\n    lineHeight: '36px',\n    overflow: 'hidden',\n    paddingLeft: 48,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    width: 'calc(100% - 32px)',\n    userSelect: 'none',\n  },\n  textField: {\n    width: '100%',\n  },\n  inputRoot: {\n    height: 36,\n    paddingLeft: 48,\n    fontSize: '0.875rem',\n  },\n  inputDisabled: {\n    backgroundColor: 'unset',\n    paddingRight: 16,\n    '&::before': {\n      display: 'none',\n    },\n    pointerEvents: 'none',\n  },\n  // TODO: remove icon styles when Icon component is implemented\n  icon: {\n    boxSizing: 'content-box',\n    cursor: 'pointer',\n    color: theme.palette.primary.text6,\n    padding: 7,\n    fontSize: '1rem',\n    '&:hover': {\n      color: '#FFFFFF',\n      backgroundColor: 'rgba(51, 51, 51, 0.9)',\n      borderRadius: '50%',\n    },\n    '&:target': {\n      backgroundColor: theme.palette.background.b9,\n    },\n  },\n  iconPrimary: {\n    color: theme.palette.primary.main,\n  },\n  iconPrimaryDisabled: {\n    color: theme.palette.primary.main,\n    opacity: 0.4,\n    cursor: 'default',\n    pointerEvents: 'none',\n  },\n  iconClose: {\n    fill: `${theme.palette.primary.text6} !important`,\n    '&:hover': {\n      fill: '#FFFFFF !important',\n    },\n  },\n  iconEdit: {\n    position: 'absolute',\n    right: 4,\n    top: 3,\n    visibility: 'hidden',\n  },\n  inputAdornment: {\n    marginTop: 1,\n    marginRight: 4,\n  },\n}));\n\nconst EditableItem = ({\n  className,\n  isEditable,\n  isEditing: isEditingInitial,\n  onClick,\n  onClickAway,\n  onCancel,\n  onSave,\n  value: initialValue,\n}) => {\n  const [value, setValue] = useState(initialValue);\n  const [isEditing, setIsEditing] = useState(isEditingInitial);\n\n  const classes = useStyles();\n\n  const handleSave = e => {\n    e.stopPropagation();\n    if (!value.length) return;\n\n    if (value !== initialValue) onSave(value).then(() => setIsEditing(false));\n  };\n\n  useEffect(() => {\n    const handleKeyDown = e => {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        setValue(initialValue);\n        setIsEditing(false);\n        onClickAway();\n      } else if (e.key === 'Enter') {\n       handleSave(e);\n      }\n    };\n\n    if (isEditing) {\n      document.addEventListener('keydown', handleKeyDown);\n    }\n\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isEditing, initialValue, value]);\n\n  const handleClickAway = () => {\n    setValue(initialValue);\n    setIsEditing(false);\n    onClickAway();\n  };\n\n  const handleCancel = e => {\n    e.stopPropagation();\n    setValue(initialValue);\n    setIsEditing(false);\n    onCancel();\n  };\n\n  useEffect(() => {\n    setValue(initialValue);\n  }, [initialValue]);\n\n  const handleChange = e => {\n    e.stopPropagation();\n    setValue(e.target.value);\n  };\n\n  const handleEdit = e => {\n    e.stopPropagation();\n    setIsEditing(true);\n  };\n\n  const getInputAdornment = () => {\n    if (!isEditing) return null;\n\n    return (\n      <InputAdornment position=\"end\">\n        <span className={classes.inputAdornment}>\n          <Tooltip title=\"Cancel\" placement=\"bottom-end\">\n            <CloseIcon\n              className={classNames(classes.icon, classes.iconClose)}\n              onClick={handleCancel}\n              fontSize=\"small\"\n            />\n          </Tooltip>\n          <Tooltip title=\"Save\" placement=\"bottom-end\">\n            <DoneIcon\n              color={value === initialValue ? 'disabled' : 'primary'}\n              onClick={handleSave}\n              fontSize=\"small\"\n              disabled={value === initialValue}\n              classes={{\n                root: classes.icon,\n                colorPrimary: classes.iconPrimary,\n                colorDisabled: classes.iconPrimaryDisabled,\n              }}\n            />\n          </Tooltip>\n        </span>\n      </InputAdornment>\n    );\n  };\n\n  const editableInputClassName = classNames(\n    classes.editableItem,\n    {\n      [classes.editableItemActive]: isEditing,\n    },\n    className\n  );\n\n  return (\n    <div className={editableInputClassName} onClick={onClick}>\n      {!isEditing && <div className={classes.value}>{value}</div>}\n      {isEditing && (\n        <ClickAwayListener onClickAway={handleClickAway}>\n          <TextField\n            autoFocus\n            type=\"text\"\n            value={value}\n            onChange={handleChange}\n            placeholder=\"Page Name...\"\n            className={classes.textField}\n            InputProps={{\n              classes: {\n                root: classes.inputRoot,\n              },\n              endAdornment: getInputAdornment(),\n            }}\n          />\n        </ClickAwayListener>\n      )}\n      {isEditable && !isEditing && (\n        <Tooltip title=\"Rename Page\" placement=\"bottom-end\">\n          <EditIcon\n            className={classNames(classes.icon, classes.iconEdit)}\n            onClick={handleEdit}\n            fontSize=\"small\"\n          />\n        </Tooltip>\n      )}\n    </div>\n  );\n};\n\nEditableItem.propTypes = {\n  className: PropTypes.string,\n  isEditable: PropTypes.bool,\n  isEditing: PropTypes.bool,\n  onClick: PropTypes.func,\n  onSave: PropTypes.func.isRequired,\n  onClickAway: PropTypes.func,\n  onCancel: PropTypes.func,\n  value: PropTypes.string.isRequired,\n};\n\nEditableItem.defaultProps = {\n  className: '',\n  isEditable: true,\n  isEditing: false,\n  onClick: () => {},\n  onClickAway: () => {},\n  onCancel: () => {},\n};\n\nexport default EditableItem;\n"],"names":["useStyles","makeStyles","theme","editableItem","width","height","position","backgroundColor","palette","background","b8","visibility","editableItemActive","value","color","primary","text6","fontSize","letterSpacing","lineHeight","overflow","paddingLeft","textOverflow","whiteSpace","userSelect","textField","inputRoot","inputDisabled","paddingRight","display","pointerEvents","icon","boxSizing","cursor","padding","borderRadius","b9","iconPrimary","main","iconPrimaryDisabled","opacity","iconClose","fill","iconEdit","right","top","inputAdornment","marginTop","marginRight","EditableItem","className","isEditable","isEditingInitial","isEditing","onClick","onClickAway","onCancel","onSave","initialValue","useState","setValue","setIsEditing","classes","handleSave","e","stopPropagation","length","then","useEffect","handleKeyDown","key","document","addEventListener","removeEventListener","handleClickAway","handleCancel","handleChange","target","handleEdit","getInputAdornment","_jsx","_jsxs","classNames","root","colorPrimary","colorDisabled","editableInputClassName","endAdornment","propTypes","PropTypes","string","bool","func","isRequired","defaultProps"],"mappings":"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"}

package/components/EditableItem/EditableItemWithBadge/index.js

@@ -1 +1,50 @@
-import e from"@babel/runtime/helpers/defineProperty";import{makeStyles as r}from"@material-ui/core";import t from"prop-types";import o from"../EditableItem/index.js";import{jsx as i}from"react/jsx-runtime";function n(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function c(r){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?n(Object(o),!0).forEach((function(t){e(r,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(o,e))}))}return r}var p=r((function(e){return{root:{cursor:"pointer"},isSelected:{"& > div":{color:"#FFFFFF"},backgroundColor:"rgba(3, 188, 212, 0.15)  !important","&::before":{height:"100%",width:4,backgroundColor:e.palette.primary.main,position:"absolute",content:'""',borderRadius:"4px 0 0 4px",zIndex:1}}}})),s=function(e){var r=e.isSelected,t=p();return i(o,c(c({},e),{},{className:r?t.isSelected:t.root}))};s.propTypes={isSelected:t.bool,children:t.node.isRequired},s.defaultProps={isSelected:!1};export{s as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { jsx } from 'react/jsx-runtime';
+import { makeStyles } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import EditableItem from '../EditableItem/index.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var useStyles = makeStyles(function (theme) {
+  return {
+    root: {
+      cursor: 'pointer'
+    },
+    isSelected: {
+      '& > div': {
+        color: '#FFFFFF'
+      },
+      backgroundColor: 'rgba(3, 188, 212, 0.15)  !important',
+      '&::before': {
+        height: '100%',
+        width: 4,
+        backgroundColor: theme.palette.primary.main,
+        position: 'absolute',
+        content: '""',
+        borderRadius: '4px 0 0 4px',
+        zIndex: 1
+      }
+    }
+  };
+});
+
+var EditableItemWithBadge = function EditableItemWithBadge(props) {
+  var isSelected = props.isSelected;
+  var classes = useStyles();
+  return /*#__PURE__*/jsx(EditableItem, _objectSpread(_objectSpread({}, props), {}, {
+    className: isSelected ? classes.isSelected : classes.root
+  }));
+};
+
+EditableItemWithBadge.propTypes = {
+  isSelected: PropTypes.bool,
+  children: PropTypes.node.isRequired
+};
+EditableItemWithBadge.defaultProps = {
+  isSelected: false
+};
+
+export default EditableItemWithBadge;
+//# sourceMappingURL=index.js.map

package/components/EditableItem/EditableItemWithBadge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/EditableItem/EditableItemWithBadge/index.js"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nimport EditableItem from '../EditableItem';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    cursor: 'pointer',\n\n  },\n  isSelected: {\n    '& > div': {\n      color: '#FFFFFF',\n    },\n    backgroundColor: 'rgba(3, 188, 212, 0.15)  !important',\n    '&::before': {\n      height: '100%',\n      width: 4,\n      backgroundColor: theme.palette.primary.main,\n      position: 'absolute',\n      content: '\"\"',\n      borderRadius: '4px 0 0 4px',\n      zIndex: 1,\n    },\n  },\n}));\n\nconst EditableItemWithBadge = props => {\n  const { isSelected } = props;\n  const classes = useStyles();\n\n  return (\n    <EditableItem {...props} className={isSelected ? classes.isSelected : classes.root} />\n  );\n}\n\nEditableItemWithBadge.propTypes = {\n  isSelected: PropTypes.bool,\n  children: PropTypes.node.isRequired,\n};\n\nEditableItemWithBadge.defaultProps = {\n  isSelected: false,\n};\n\nexport default EditableItemWithBadge;\n"],"names":["useStyles","makeStyles","theme","root","cursor","isSelected","color","backgroundColor","height","width","palette","primary","main","position","content","borderRadius","zIndex","EditableItemWithBadge","props","classes","_jsx","propTypes","PropTypes","bool","children","node","isRequired","defaultProps"],"mappings":";;;;;;;;;AAKA,IAAMA,SAAS,GAAGC,UAAU,CAAC,UAAAC,KAAK;AAAA,SAAK;AACrCC,IAAAA,IAAI,EAAE;AACJC,MAAAA,MAAM,EAAE;AADJ,KAD+B;AAKrCC,IAAAA,UAAU,EAAE;AACV,iBAAW;AACTC,QAAAA,KAAK,EAAE;AADE,OADD;AAIVC,MAAAA,eAAe,EAAE,qCAJP;AAKV,mBAAa;AACXC,QAAAA,MAAM,EAAE,MADG;AAEXC,QAAAA,KAAK,EAAE,CAFI;AAGXF,QAAAA,eAAe,EAAEL,KAAK,CAACQ,OAAN,CAAcC,OAAd,CAAsBC,IAH5B;AAIXC,QAAAA,QAAQ,EAAE,UAJC;AAKXC,QAAAA,OAAO,EAAE,IALE;AAMXC,QAAAA,YAAY,EAAE,aANH;AAOXC,QAAAA,MAAM,EAAE;AAPG;AALH;AALyB,GAAL;AAAA,CAAN,CAA5B;;IAsBMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAAAC,KAAK,EAAI;AAAA,MAC7Bb,UAD6B,GACda,KADc,CAC7Bb,UAD6B;AAErC,MAAMc,OAAO,GAAGnB,SAAS,EAAzB;AAEA,sBACEoB,IAAC,YAAD,kCAAkBF,KAAlB;AAAyB,IAAA,SAAS,EAAEb,UAAU,GAAGc,OAAO,CAACd,UAAX,GAAwBc,OAAO,CAAChB;AAA9E,KADF;AAGD;;AAEDc,qBAAqB,CAACI,SAAtB,GAAkC;AAChChB,EAAAA,UAAU,EAAEiB,SAAS,CAACC,IADU;AAEhCC,EAAAA,QAAQ,EAAEF,SAAS,CAACG,IAAV,CAAeC;AAFO,CAAlC;AAKAT,qBAAqB,CAACU,YAAtB,GAAqC;AACnCtB,EAAAA,UAAU,EAAE;AADuB,CAArC;;;;"}

package/components/EmbeddedApp/DevCenterEmbeddedApp.js

@@ -1 +1,78 @@
-import e from"@babel/runtime/helpers/defineProperty";import p from"@babel/runtime/helpers/slicedToArray";import{memo as r,useState as t}from"react";import i from"prop-types";import s from"classnames";import{isNativeDetected as a}from"../../utils/mobileDetect.js";import{Size as o}from"../../constants/sizes.js";import{DevCenterIsolatedApp as n}from"../DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js";import{AppInfo as m,AppInfoMaximized as d}from"./components/AppInfo.js";import c from"./styles.css.js";import{jsxs as l,jsx as f}from"react/jsx-runtime";var u=function(r){var i,u=r.app,C=r.coordinates,v=r.appId,b=r.appSize,h=r.appContainerClassName,A=r.currentUser,I=r.timestamp,g=t(!1),z=p(g,2),j=z[0],N=z[1];return l("div",{className:s(c.embeddedApp,h,(i={},e(i,c.embeddedAppMaximized,j),e(i,c.embeddedAppNative,a),i)),children:[!j&&f(m,{setMaximized:N}),f("div",{className:c.embeddedAppContent,children:f(n,{app:u,appId:v,onSettingsChange:function(){},onSettingChange:function(){},onAppRemove:function(){},coordinates:C,currentUser:A,timestamp:I})},j?o.XLARGE:b),j&&f(d,{setMaximized:N})]})};u.propTypes={appContainerClassName:i.string,appId:i.number,appSize:i.string,app:i.shape({coordinates:i.shape().isRequired}).isRequired,currentUser:i.shape().isRequired,coordinates:i.shape(),timestamp:i.string},u.defaultProps={appContainerClassName:void 0,appId:0,appSize:o.MEDIUM,coordinates:{},timestamp:void 0};var C=r(u);export{C as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { isNativeDetected } from '../../utils/mobileDetect.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { DevCenterIsolatedApp } from '../DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js';
+import { Size } from '../../constants/sizes.js';
+import styles from './styles.css.js';
+import { AppInfo, AppInfoMaximized } from './components/AppInfo.js';
+
+var DevCenterEmbeddedApp = function DevCenterEmbeddedApp(_ref) {
+  var _classNames;
+
+  var app = _ref.app,
+      coordinates = _ref.coordinates,
+      appId = _ref.appId,
+      appSize = _ref.appSize,
+      appContainerClassName = _ref.appContainerClassName,
+      currentUser = _ref.currentUser,
+      timestamp = _ref.timestamp;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      maximized = _useState2[0],
+      setMaximized = _useState2[1];
+
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(styles.embeddedApp, appContainerClassName, (_classNames = {}, _defineProperty(_classNames, styles.embeddedAppMaximized, maximized), _defineProperty(_classNames, styles.embeddedAppNative, isNativeDetected), _classNames)),
+    children: [!maximized && /*#__PURE__*/jsx(AppInfo, {
+      setMaximized: setMaximized
+    }), /*#__PURE__*/jsx("div", {
+      className: styles.embeddedAppContent,
+      children: /*#__PURE__*/jsx(DevCenterIsolatedApp, {
+        app: app,
+        appId: appId,
+        onSettingsChange: function onSettingsChange() {
+          return undefined;
+        },
+        onSettingChange: function onSettingChange() {
+          return undefined;
+        },
+        onAppRemove: function onAppRemove() {
+          return undefined;
+        },
+        coordinates: coordinates,
+        currentUser: currentUser,
+        timestamp: timestamp
+      })
+    }, maximized ? Size.XLARGE : appSize), maximized && /*#__PURE__*/jsx(AppInfoMaximized, {
+      setMaximized: setMaximized
+    })]
+  });
+};
+
+DevCenterEmbeddedApp.propTypes = {
+  appContainerClassName: PropTypes.string,
+  appId: PropTypes.number,
+  appSize: PropTypes.string,
+  app: PropTypes.shape({
+    coordinates: PropTypes.shape().isRequired
+  }).isRequired,
+  currentUser: PropTypes.shape().isRequired,
+  coordinates: PropTypes.shape(),
+  timestamp: PropTypes.string
+};
+DevCenterEmbeddedApp.defaultProps = {
+  appContainerClassName: undefined,
+  appId: 0,
+  appSize: Size.MEDIUM,
+  coordinates: {},
+  timestamp: undefined
+};
+var DevCenterEmbeddedApp$1 = memo(DevCenterEmbeddedApp);
+
+export default DevCenterEmbeddedApp$1;
+//# sourceMappingURL=DevCenterEmbeddedApp.js.map

package/components/EmbeddedApp/DevCenterEmbeddedApp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevCenterEmbeddedApp.js","sources":["../../../src/components/EmbeddedApp/DevCenterEmbeddedApp.js"],"sourcesContent":["import { memo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { isNativeDetected } from '~/utils/mobileDetect';\nimport { Size } from '~/constants/sizes';\nimport { DevCenterIsolatedApp } from '~/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp';\n\nimport { AppInfo, AppInfoMaximized } from './components/AppInfo';\n\nimport styles from './styles.css';\n\nconst DevCenterEmbeddedApp = ({\n  app,\n  coordinates,\n  appId,\n  appSize,\n  appContainerClassName,\n  currentUser,\n  timestamp,\n}) => {\n  const [maximized, setMaximized] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.embeddedApp, appContainerClassName, {\n        [styles.embeddedAppMaximized]: maximized,\n        [styles.embeddedAppNative]: isNativeDetected,\n      })}\n    >\n      {!maximized && <AppInfo setMaximized={setMaximized} />}\n\n      <div className={styles.embeddedAppContent} key={maximized ? Size.XLARGE : appSize}>\n        <DevCenterIsolatedApp\n          app={app}\n          appId={appId}\n          onSettingsChange={() => undefined}\n          onSettingChange={() => undefined}\n          onAppRemove={() => undefined}\n          coordinates={coordinates}\n          currentUser={currentUser}\n          timestamp={timestamp}\n        />\n      </div>\n\n      {maximized && <AppInfoMaximized setMaximized={setMaximized} />}\n    </div>\n  );\n};\n\nDevCenterEmbeddedApp.propTypes = {\n  appContainerClassName: PropTypes.string,\n  appId: PropTypes.number,\n  appSize: PropTypes.string,\n  app: PropTypes.shape({\n    coordinates: PropTypes.shape().isRequired,\n  }).isRequired,\n  currentUser: PropTypes.shape().isRequired,\n  coordinates: PropTypes.shape(),\n  timestamp: PropTypes.string,\n};\n\nDevCenterEmbeddedApp.defaultProps = {\n  appContainerClassName: undefined,\n  appId: 0,\n  appSize: Size.MEDIUM,\n  coordinates: {},\n  timestamp: undefined,\n};\n\nexport default memo(DevCenterEmbeddedApp);\n"],"names":["DevCenterEmbeddedApp","app","coordinates","appId","appSize","appContainerClassName","currentUser","timestamp","useState","maximized","setMaximized","_jsxs","classNames","styles","embeddedApp","embeddedAppMaximized","embeddedAppNative","isNativeDetected","_jsx","embeddedAppContent","undefined","Size","XLARGE","propTypes","PropTypes","string","number","shape","isRequired","defaultProps","MEDIUM","memo"],"mappings":";;;;;;;;;;;;AAYA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,OAQvB;AAAA;;AAAA,MAPJC,GAOI,QAPJA,GAOI;AAAA,MANJC,WAMI,QANJA,WAMI;AAAA,MALJC,KAKI,QALJA,KAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,qBAGI,QAHJA,qBAGI;AAAA,MAFJC,WAEI,QAFJA,WAEI;AAAA,MADJC,SACI,QADJA,SACI;;AAAA,kBAC8BC,QAAQ,CAAC,KAAD,CADtC;AAAA;AAAA,MACGC,SADH;AAAA,MACcC,YADd;;AAGJ,sBACEC;AACE,IAAA,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,WAAR,EAAqBT,qBAArB,kDAClBQ,MAAM,CAACE,oBADW,EACYN,SADZ,gCAElBI,MAAM,CAACG,iBAFW,EAESC,gBAFT,gBADvB;AAAA,eAMG,CAACR,SAAD,iBAAcS,IAAC,OAAD;AAAS,MAAA,YAAY,EAAER;AAAvB,MANjB,eAQEQ;AAAK,MAAA,SAAS,EAAEL,MAAM,CAACM,kBAAvB;AAAA,6BACED,IAAC,oBAAD;AACE,QAAA,GAAG,EAAEjB,GADP;AAEE,QAAA,KAAK,EAAEE,KAFT;AAGE,QAAA,gBAAgB,EAAE;AAAA,iBAAMiB,SAAN;AAAA,SAHpB;AAIE,QAAA,eAAe,EAAE;AAAA,iBAAMA,SAAN;AAAA,SAJnB;AAKE,QAAA,WAAW,EAAE;AAAA,iBAAMA,SAAN;AAAA,SALf;AAME,QAAA,WAAW,EAAElB,WANf;AAOE,QAAA,WAAW,EAAEI,WAPf;AAQE,QAAA,SAAS,EAAEC;AARb;AADF,OAAgDE,SAAS,GAAGY,IAAI,CAACC,MAAR,GAAiBlB,OAA1E,CARF,EAqBGK,SAAS,iBAAIS,IAAC,gBAAD;AAAkB,MAAA,YAAY,EAAER;AAAhC,MArBhB;AAAA,IADF;AAyBD,CApCD;;AAsCAV,oBAAoB,CAACuB,SAArB,GAAiC;AAC/BlB,EAAAA,qBAAqB,EAAEmB,SAAS,CAACC,MADF;AAE/BtB,EAAAA,KAAK,EAAEqB,SAAS,CAACE,MAFc;AAG/BtB,EAAAA,OAAO,EAAEoB,SAAS,CAACC,MAHY;AAI/BxB,EAAAA,GAAG,EAAEuB,SAAS,CAACG,KAAV,CAAgB;AACnBzB,IAAAA,WAAW,EAAEsB,SAAS,CAACG,KAAV,GAAkBC;AADZ,GAAhB,EAEFA,UAN4B;AAO/BtB,EAAAA,WAAW,EAAEkB,SAAS,CAACG,KAAV,GAAkBC,UAPA;AAQ/B1B,EAAAA,WAAW,EAAEsB,SAAS,CAACG,KAAV,EARkB;AAS/BpB,EAAAA,SAAS,EAAEiB,SAAS,CAACC;AATU,CAAjC;AAYAzB,oBAAoB,CAAC6B,YAArB,GAAoC;AAClCxB,EAAAA,qBAAqB,EAAEe,SADW;AAElCjB,EAAAA,KAAK,EAAE,CAF2B;AAGlCC,EAAAA,OAAO,EAAEiB,IAAI,CAACS,MAHoB;AAIlC5B,EAAAA,WAAW,EAAE,EAJqB;AAKlCK,EAAAA,SAAS,EAAEa;AALuB,CAApC;AAQA,6BAAeW,IAAI,CAAC/B,oBAAD,CAAnB;;;;"}