@reltio/components 1.4.875 → 1.4.879

package/components/CollaborationItem/RepliedComment/RepliedComment.js

@@ -1,30 +1,23 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RepliedComment = void 0;
-var react_1 = __importDefault(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var classnames_1 = __importDefault(require("classnames"));
-var Box_1 = __importDefault(require("@material-ui/core/Box"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var Avatar_1 = require("../Avatar/Avatar");
-var CommentContent_1 = require("../CommentContent/CommentContent");
-var utils_1 = require("../utils");
-var styles_1 = require("./styles");
-var RepliedComment = function (_a) {
+import React from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import { Avatar } from '../Avatar/Avatar';
+import { CommentContent } from '../CommentContent/CommentContent';
+import { formatDate } from '../utils';
+import { useStyles } from './styles';
+export var RepliedComment = function (_a) {
     var className = _a.className, reply = _a.reply;
     var createdBy = reply.createdBy, action = reply.action, createdTime = reply.createdTime;
-    var styles = styles_1.useStyles();
-    return (react_1.default.createElement(Box_1.default, { className: classnames_1.default(styles.root, className) },
-        react_1.default.createElement(Avatar_1.Avatar, { classes: { root: styles.avatar } }, createdBy),
-        react_1.default.createElement(Box_1.default, null,
-            react_1.default.createElement(Box_1.default, { className: styles.header },
-                react_1.default.createElement(Typography_1.default, { className: styles.username }, createdBy),
-                action === 'resolve' && (react_1.default.createElement(Typography_1.default, { className: styles.marked }, ui_i18n_1.default.text('Marked as resolved'))),
-                action === 'reopen' && react_1.default.createElement(Typography_1.default, { className: styles.marked }, ui_i18n_1.default.text('Re-opened'))),
-            action !== 'resolve' && react_1.default.createElement(CommentContent_1.CommentContent, { className: styles.message, comment: reply }),
-            react_1.default.createElement(Typography_1.default, { className: styles.createdAt }, utils_1.formatDate(createdTime)))));
+    var styles = useStyles();
+    return (React.createElement(Box, { className: classnames(styles.root, className) },
+        React.createElement(Avatar, { classes: { root: styles.avatar } }, createdBy),
+        React.createElement(Box, null,
+            React.createElement(Box, { className: styles.header },
+                React.createElement(Typography, { className: styles.username }, createdBy),
+                action === 'resolve' && (React.createElement(Typography, { className: styles.marked }, i18n.text('Marked as resolved'))),
+                action === 'reopen' && React.createElement(Typography, { className: styles.marked }, i18n.text('Re-opened'))),
+            action !== 'resolve' && React.createElement(CommentContent, { className: styles.message, comment: reply }),
+            React.createElement(Typography, { className: styles.createdAt }, formatDate(createdTime)))));
 };
-exports.RepliedComment = RepliedComment;

package/components/CollaborationItem/RepliedComment/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     root: {
         display: 'flex',
         padding: '8px',

package/components/CollaborationItem/SendMessageArea/SendMessageArea.js

@@ -1,68 +1,43 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SendMessageArea = void 0;
-var react_1 = __importStar(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var classnames_1 = __importDefault(require("classnames"));
-var react_redux_1 = require("react-redux");
-var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
-var Box_1 = __importDefault(require("@material-ui/core/Box"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var TextFieldWithMentions_1 = require("../TextFieldWithMentions/TextFieldWithMentions");
-var Avatar_1 = require("../Avatar/Avatar");
-var contexts_1 = require("../../../contexts");
-var styles_1 = require("./styles");
-var ramda_1 = require("ramda");
+import React, { useState, useContext, useEffect } from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import { useSelector } from 'react-redux';
+import mdm from '@reltio/mdm-module';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import { TextFieldWithMentions } from '../TextFieldWithMentions/TextFieldWithMentions';
+import { Avatar } from '../Avatar/Avatar';
+import { CollaborationContext } from '../../../contexts';
+import { useStyles } from './styles';
+import { always, cond, T } from 'ramda';
 var getPlaceholder = function (status) {
     switch (status) {
         case 'open':
-            return ui_i18n_1.default.text('Reply...');
+            return i18n.text('Reply...');
         case 'resolved':
-            return ui_i18n_1.default.text('Adding a comment will re-open this');
+            return i18n.text('Adding a comment will re-open this');
         default:
             return '';
     }
 };
 var getButtonText = function (status, isEditingComment) {
     if (isEditingComment) {
-        return ui_i18n_1.default.text('Edit');
+        return i18n.text('Edit');
     }
     if (status === 'open' || status === 'resolved') {
-        return ui_i18n_1.default.text('Reply');
+        return i18n.text('Reply');
     }
-    return ui_i18n_1.default.text('Comment');
+    return i18n.text('Comment');
 };
-var SendMessageArea = function (_a) {
+export var SendMessageArea = function (_a) {
     var inputRef = _a.inputRef, className = _a.className, uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, popperRef = _a.popperRef, comment = _a.comment, isEditingComment = _a.isEditingComment, onCancel = _a.onCancel;
-    var styles = styles_1.useStyles();
-    var username = react_redux_1.useSelector(mdm_module_1.default.selectors.getUserName);
-    var _b = react_1.useContext(contexts_1.CollaborationContext), createReply = _b.createReply, createComment = _b.createComment, sending = _b.sending, editComment = _b.editComment;
-    var _c = react_1.useState(''), value = _c[0], setValue = _c[1];
-    var _d = react_1.useState(''), plainTextValue = _d[0], setPlainTextValue = _d[1];
-    var _e = react_1.useState([]), mentions = _e[0], setMentions = _e[1];
-    var _f = react_1.useState(false), focused = _f[0], setFocused = _f[1];
+    var styles = useStyles();
+    var username = useSelector(mdm.selectors.getUserName);
+    var _b = useContext(CollaborationContext), createReply = _b.createReply, createComment = _b.createComment, sending = _b.sending, editComment = _b.editComment;
+    var _c = useState(''), value = _c[0], setValue = _c[1];
+    var _d = useState(''), plainTextValue = _d[0], setPlainTextValue = _d[1];
+    var _e = useState([]), mentions = _e[0], setMentions = _e[1];
+    var _f = useState(false), focused = _f[0], setFocused = _f[1];
     var hasValue = value.trim() !== '';
     var shouldShowButtons = focused || hasValue;
     var status = comment === null || comment === void 0 ? void 0 : comment.status;
@@ -83,9 +58,9 @@ var SendMessageArea = function (_a) {
     var handleBlur = function () { return setFocused(false); };
     var handleSubmit = function (e) {
         e.preventDefault();
-        var request = ramda_1.cond([
+        var request = cond([
             [
-                ramda_1.always(!comment),
+                always(!comment),
                 function () {
                     return createComment({
                         content: plainTextValue,
@@ -97,7 +72,7 @@ var SendMessageArea = function (_a) {
                 }
             ],
             [
-                ramda_1.always(isEditingComment),
+                always(isEditingComment),
                 function () {
                     return editComment({
                         content: plainTextValue,
@@ -111,7 +86,7 @@ var SendMessageArea = function (_a) {
                 }
             ],
             [
-                ramda_1.T,
+                T,
                 function () {
                     return createReply({
                         content: plainTextValue,
@@ -125,12 +100,12 @@ var SendMessageArea = function (_a) {
         ]);
         return request().then(clearValue).catch(console.log); //eslint-disable-line no-console
     };
-    react_1.useEffect(function () {
+    useEffect(function () {
         if (popperRef) {
             popperRef.current.update();
         }
     }, [popperRef, shouldShowButtons]);
-    react_1.useEffect(function () {
+    useEffect(function () {
         if (isEditingComment) {
             setValue(comment.content);
         }
@@ -138,13 +113,12 @@ var SendMessageArea = function (_a) {
             clearValue();
         }
     }, [isEditingComment]);
-    return (react_1.default.createElement(Box_1.default, { className: classnames_1.default(styles.root, className) },
-        react_1.default.createElement("form", { onSubmit: handleSubmit, className: styles.form },
-            react_1.default.createElement(Box_1.default, { className: styles.main },
-                react_1.default.createElement(Avatar_1.Avatar, { classes: { root: styles.avatar } }, username),
-                react_1.default.createElement(TextFieldWithMentions_1.TextFieldWithMentions, { className: styles.textField, disabled: sending, onChange: handleChange, inputRef: inputRef, value: value, onFocus: handleFocus, onBlur: handleBlur, placeholder: getPlaceholder(status) })),
-            shouldShowButtons && (react_1.default.createElement(Box_1.default, { className: styles.buttons },
-                react_1.default.createElement(Button_1.default, { className: styles.button, variant: "contained", color: "primary", disabled: !hasValue || sending, type: "submit" }, getButtonText(status, isEditingComment)),
-                react_1.default.createElement(Button_1.default, { disabled: sending, onClick: handleCancel, className: styles.button, variant: "outlined", color: "primary" }, ui_i18n_1.default.text('Cancel')))))));
+    return (React.createElement(Box, { className: classnames(styles.root, className) },
+        React.createElement("form", { onSubmit: handleSubmit, className: styles.form },
+            React.createElement(Box, { className: styles.main },
+                React.createElement(Avatar, { classes: { root: styles.avatar } }, username),
+                React.createElement(TextFieldWithMentions, { className: styles.textField, disabled: sending, onChange: handleChange, inputRef: inputRef, value: value, onFocus: handleFocus, onBlur: handleBlur, placeholder: getPlaceholder(status) })),
+            shouldShowButtons && (React.createElement(Box, { className: styles.buttons },
+                React.createElement(Button, { className: styles.button, variant: "contained", color: "primary", disabled: !hasValue || sending, type: "submit" }, getButtonText(status, isEditingComment)),
+                React.createElement(Button, { disabled: sending, onClick: handleCancel, className: styles.button, variant: "outlined", color: "primary" }, i18n.text('Cancel')))))));
 };
-exports.SendMessageArea = SendMessageArea;

package/components/CollaborationItem/SendMessageArea/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     root: {
         padding: '6px 6px 6px 8px',
         borderRadius: '4px',

package/components/CollaborationItem/TextFieldWithMentions/TextFieldWithMentions.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,25 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -40,31 +20,25 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextFieldWithMentions = void 0;
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var ramda_1 = require("ramda");
-var react_mentions_1 = require("react-mentions");
-var contexts_1 = require("../../../contexts");
-var styles_1 = require("./styles");
-var TextFieldWithMentions = function (_a) {
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import { uniq } from 'ramda';
+import { MentionsInput, Mention } from 'react-mentions';
+import { UsersContext } from '../../../contexts';
+import { useStyles } from './styles';
+export var TextFieldWithMentions = function (_a) {
     var onChange = _a.onChange, className = _a.className, props = __rest(_a, ["onChange", "className"]);
-    var styles = styles_1.useStyles();
-    var users = react_1.useContext(contexts_1.UsersContext);
+    var styles = useStyles();
+    var users = useContext(UsersContext);
     var handleChange = function (_, value, plainTextValue, mentions) {
-        onChange(value, plainTextValue, ramda_1.uniq(mentions.map(function (_a) {
+        onChange(value, plainTextValue, uniq(mentions.map(function (_a) {
             var display = _a.display;
             return display.slice(1);
         })));
     };
-    return (react_1.default.createElement(react_mentions_1.MentionsInput, __assign({}, props, { onChange: handleChange, className: classnames_1.default(styles.root, className) }),
-        react_1.default.createElement(react_mentions_1.Mention, { trigger: "+", data: users.map(function (_a) {
+    return (React.createElement(MentionsInput, __assign({}, props, { onChange: handleChange, className: classnames(styles.root, className) }),
+        React.createElement(Mention, { trigger: "+", data: users.map(function (_a) {
                 var username = _a.username;
                 return ({ id: username, display: username });
             }), displayTransform: function (_, username) { return "+" + username; }, appendSpaceOnAdd: true, className: styles.mention })));
 };
-exports.TextFieldWithMentions = TextFieldWithMentions;

package/components/CollaborationItem/TextFieldWithMentions/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     root: {
         width: '100%',
         backgroundColor: '#fff',

package/components/CollaborationItem/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles(function () { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function () { return ({
     root: {
         maxWidth: '100%',
         padding: '8px 4px 10px 16px'

package/components/CollaborationItem/utils/index.js

@@ -1,26 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.processMentions = exports.formatDate = exports.getRelatedEntityUri = exports.getAbbreviationFromUserName = void 0;
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var getAbbreviationFromUserName = function (username) {
+import i18n from 'ui-i18n';
+export var getAbbreviationFromUserName = function (username) {
     return username
         .split('.')
         .map(function (item) { return item[0].toUpperCase(); })
         .join('');
 };
-exports.getAbbreviationFromUserName = getAbbreviationFromUserName;
-var getRelatedEntityUri = function (comment, entityUri) {
+export var getRelatedEntityUri = function (comment, entityUri) {
     var index = comment.relatedObjectUris.indexOf(entityUri);
     if (index >= 0)
         return comment.relatedObjectUris[1 - index];
 };
-exports.getRelatedEntityUri = getRelatedEntityUri;
-var formatDate = function (time) { return ui_i18n_1.default.date(time, 'LT') + " " + ui_i18n_1.default.date(time, 'LL'); };
-exports.formatDate = formatDate;
-var processMentions = function (text, mentions, processor, trigger) {
+export var formatDate = function (time) { return i18n.date(time, 'LT') + " " + i18n.date(time, 'LL'); };
+export var processMentions = function (text, mentions, processor, trigger) {
     if (processor === void 0) { processor = function (value) { return value; }; }
     if (trigger === void 0) { trigger = '+'; }
     var arr = [];
@@ -50,4 +41,3 @@ var processMentions = function (text, mentions, processor, trigger) {
     }
     return arr;
 };
-exports.processMentions = processMentions;

package/components/CollaborationPopup/CollaborationPopup.js

@@ -1,59 +1,34 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollaborationPopup = void 0;
-var react_1 = __importStar(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Box_1 = __importDefault(require("@material-ui/core/Box"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var Done_1 = __importDefault(require("@material-ui/icons/Done"));
-var contexts_1 = require("../../contexts");
-var CollaborationItem_1 = require("../CollaborationItem/CollaborationItem");
-var SmallIconButton_1 = require("../SmallIconButton");
-var PopupWithArrow_1 = require("../PopupWithArrow/PopupWithArrow");
-var styles_1 = require("./styles");
-var CollaborationPopup = function (_a) {
+import React, { useContext, useRef, useState } from 'react';
+import i18n from 'ui-i18n';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import DoneIcon from '@material-ui/icons/Done';
+import { CollaborationContext } from '../../contexts';
+import { CollaborationItem } from '../CollaborationItem/CollaborationItem';
+import { SmallIconButtonWithTooltip } from '../SmallIconButton';
+import { PopupWithArrow } from '../PopupWithArrow/PopupWithArrow';
+import { useStyles } from './styles';
+export var CollaborationPopup = function (_a) {
     var uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, anchorEl = _a.anchorEl, onClose = _a.onClose, open = _a.open, comment = _a.comment;
-    var _b = react_1.useState(0), scrollWidth = _b[0], setScrollWidth = _b[1];
+    var _b = useState(0), scrollWidth = _b[0], setScrollWidth = _b[1];
     var hasScroll = scrollWidth !== 0;
-    var styles = styles_1.useStyles({ scrollWidth: scrollWidth, hasScroll: hasScroll });
-    var popperRef = react_1.useRef(null);
-    var _c = react_1.useContext(contexts_1.CollaborationContext), resolveThread = _c.resolveThread, loading = _c.loading, sending = _c.sending;
+    var styles = useStyles({ scrollWidth: scrollWidth, hasScroll: hasScroll });
+    var popperRef = useRef(null);
+    var _c = useContext(CollaborationContext), resolveThread = _c.resolveThread, loading = _c.loading, sending = _c.sending;
     var itemsCount = 1 + (comment === null || comment === void 0 ? void 0 : comment.replies.length);
     var handleResolve = function () {
         resolveThread({ commentId: comment.commentId, uri: uri });
     };
-    return (react_1.default.createElement(PopupWithArrow_1.PopupWithArrow, { popperRef: popperRef, anchorEl: anchorEl, open: open, placement: "right-start", onClose: onClose, className: styles.popper },
-        react_1.default.createElement(Box_1.default, { className: styles.header },
-            react_1.default.createElement(Box_1.default, { className: styles.headerInfo },
-                react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Comments')),
-                comment && !loading && (react_1.default.createElement(Typography_1.default, { className: styles.counter },
-                    ui_i18n_1.default.number(itemsCount),
+    return (React.createElement(PopupWithArrow, { popperRef: popperRef, anchorEl: anchorEl, open: open, placement: "right-start", onClose: onClose, className: styles.popper },
+        React.createElement(Box, { className: styles.header },
+            React.createElement(Box, { className: styles.headerInfo },
+                React.createElement(Typography, { className: styles.title }, i18n.text('Comments')),
+                comment && !loading && (React.createElement(Typography, { className: styles.counter },
+                    i18n.number(itemsCount),
                     " ",
-                    itemsCount === 1 ? ui_i18n_1.default.text('item') : ui_i18n_1.default.text('items')))),
-            comment && !loading && (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { className: styles.resolveButton, size: "S", onClick: handleResolve, disabled: sending, showForDisabled: true, tooltipTitle: ui_i18n_1.default.text('Resolve'), icon: Done_1.default, color: "primary" }))),
-        !loading && (react_1.default.createElement(CollaborationItem_1.CollaborationItem, { popperRef: popperRef, messagesRef: function (node) {
+                    itemsCount === 1 ? i18n.text('item') : i18n.text('items')))),
+            comment && !loading && (React.createElement(SmallIconButtonWithTooltip, { className: styles.resolveButton, size: "S", onClick: handleResolve, disabled: sending, showForDisabled: true, tooltipTitle: i18n.text('Resolve'), icon: DoneIcon, color: "primary" }))),
+        !loading && (React.createElement(CollaborationItem, { popperRef: popperRef, messagesRef: function (node) {
                 if (node) {
                     setScrollWidth(node.offsetWidth - node.clientWidth);
                 }
@@ -65,4 +40,3 @@ var CollaborationPopup = function (_a) {
                 comment: styles.comment
             }, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, comment: comment }))));
 };
-exports.CollaborationPopup = CollaborationPopup;

package/components/CollaborationPopup/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     root: {},
     header: {
         display: 'flex',

package/components/CollapseButton/CollapseButton.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,27 +20,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var SmallIconButton_1 = require("../SmallIconButton");
-var ExpandMore_1 = __importDefault(require("@material-ui/icons/ExpandMore"));
-var styles_1 = require("./styles");
+import React from 'react';
+import classnames from 'classnames';
+import { SmallIconButtonWithTooltip } from '../SmallIconButton';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import { useStyles } from './styles';
 var CollapseButton = function (_a) {
     var _b;
     var _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, tooltipTitle = _a.tooltipTitle, otherProps = __rest(_a, ["isOpen", "tooltipTitle"]);
-    var styles = styles_1.useStyles();
+    var styles = useStyles();
     var buttonProps = {
-        icon: ExpandMore_1.default,
+        icon: ExpandMore,
         className: styles.collapseButton,
-        iconClassName: classnames_1.default((_b = {}, _b[styles.expandLess] = isOpen, _b))
+        iconClassName: classnames((_b = {}, _b[styles.expandLess] = isOpen, _b))
     };
     var tooltipProps = {
         tooltipTitle: tooltipTitle
     };
-    return react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({}, buttonProps, tooltipProps, otherProps));
+    return React.createElement(SmallIconButtonWithTooltip, __assign({}, buttonProps, tooltipProps, otherProps));
 };
-exports.default = CollapseButton;
+export default CollapseButton;

package/components/CollapseButton/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
     collapseButton: {
         cursor: 'pointer'
     },

package/components/ColorBar/ColorBar.js

@@ -1,38 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var ramda_1 = require("ramda");
-var styles_1 = require("./styles");
-var widthIsNumber = function (width) { return ramda_1.is(Number, width); };
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import { is } from 'ramda';
+import { useStyles } from './styles';
+var widthIsNumber = function (width) { return is(Number, width); };
 var ColorBar = function (_a) {
     var className = _a.className, _b = _a.width, width = _b === void 0 ? 0 : _b, maxWidth = _a.maxWidth;
-    var styles = styles_1.useStyles();
-    var getBarColorWidth = react_1.useCallback(function (width) {
+    var styles = useStyles();
+    var getBarColorWidth = useCallback(function (width) {
         return (maxWidth ? (100 * width) / maxWidth : 0) + '%';
     }, [maxWidth]);
-    return width ? (react_1.default.createElement("div", { className: classnames_1.default(styles.bar, className), style: { width: widthIsNumber(width) ? getBarColorWidth(width) : width } })) : null;
+    return width ? (React.createElement("div", { className: classnames(styles.bar, className), style: { width: widthIsNumber(width) ? getBarColorWidth(width) : width } })) : null;
 };
-exports.default = ColorBar;
+export default ColorBar;

package/components/ColorBar/styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
     bar: {
         backgroundColor: theme.palette.secondary.main,
         opacity: 0.12,