@manuscripts/style-guide 1.12.13-LEAN-3502.0 → 1.12.13-LEAN-3572.0

package/dist/cjs/components/EditorHeader/EditorHeader.js

@@ -153,7 +153,6 @@ exports.PrimaryButtonSmall = (0, styled_components_1.default)(__1.PrimaryButton)
 `;
 const Wrapper = styled_components_1.default.div `
   display: flex;
-  z-index: 6;
   padding: ${(props) => props.theme.grid.unit * 3}px
     ${(props) => props.theme.grid.unit * 8}px;
   width: 100%;
@@ -161,7 +160,6 @@ const Wrapper = styled_components_1.default.div `
   align-items: center;
   border-bottom: 1px solid #f2f2f2;
   font-size: 14px;
-  background: white;
 
   ${__1.NavDropdownContainer} + ${__1.NavDropdownContainer} {
     margin-left: ${(props) => props.theme.grid.unit * 2}px;

package/dist/cjs/components/RelativeDate.js

@@ -14,23 +14,35 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelativeDate = void 0;
 const react_1 = __importDefault(require("react"));
-const RelativeDate = ({ createdAt }) => {
-    if (!createdAt) {
+const RelativeDate = (_a) => {
+    var { date } = _a, props = __rest(_a, ["date"]);
+    if (!date) {
         return null;
     }
     const formatter = new Intl.RelativeTimeFormat('en', { style: 'short' });
-    let value = Math.floor((createdAt - Date.now()) / 3600000);
+    let value = Math.floor((date - Date.now()) / 3600000);
     let unit = 'hour';
     if (Math.abs(value) > 24) {
         value = Math.floor(value / 24);
         unit = 'day';
     }
-    return react_1.default.createElement("span", null, formatter.format(value, unit));
+    return react_1.default.createElement("span", Object.assign({}, props), formatter.format(value, unit));
 };
 exports.RelativeDate = RelativeDate;

package/dist/cjs/index.js

@@ -65,8 +65,6 @@ __exportStar(require("./components/LoadingOverlay"), exports);
 __exportStar(require("./components/EditorHeader/EditorHeader"), exports);
 __exportStar(require("./components/DatePicker"), exports);
 __exportStar(require("./components/Text"), exports);
-__exportStar(require("./components/ManuscriptNoteList"), exports);
-__exportStar(require("./components/Comments"), exports);
 __exportStar(require("./components/RelativeDate"), exports);
 __exportStar(require("./components/Menus"), exports);
 __exportStar(require("./components/SelectField"), exports);

package/dist/es/components/EditorHeader/EditorHeader.js

@@ -123,7 +123,6 @@ export const PrimaryButtonSmall = styled(PrimaryButton) `
 `;
 const Wrapper = styled.div `
   display: flex;
-  z-index: 6;
   padding: ${(props) => props.theme.grid.unit * 3}px
     ${(props) => props.theme.grid.unit * 8}px;
   width: 100%;
@@ -131,7 +130,6 @@ const Wrapper = styled.div `
   align-items: center;
   border-bottom: 1px solid #f2f2f2;
   font-size: 14px;
-  background: white;
 
   ${NavDropdownContainer} + ${NavDropdownContainer} {
     margin-left: ${(props) => props.theme.grid.unit * 2}px;

package/dist/es/components/RelativeDate.js

@@ -13,17 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from 'react';
-export const RelativeDate = ({ createdAt }) => {
-    if (!createdAt) {
+export const RelativeDate = (_a) => {
+    var { date } = _a, props = __rest(_a, ["date"]);
+    if (!date) {
         return null;
     }
     const formatter = new Intl.RelativeTimeFormat('en', { style: 'short' });
-    let value = Math.floor((createdAt - Date.now()) / 3600000);
+    let value = Math.floor((date - Date.now()) / 3600000);
     let unit = 'hour';
     if (Math.abs(value) > 24) {
         value = Math.floor(value / 24);
         unit = 'day';
     }
-    return React.createElement("span", null, formatter.format(value, unit));
+    return React.createElement("span", Object.assign({}, props), formatter.format(value, unit));
 };

package/dist/es/index.js

@@ -45,8 +45,6 @@ export * from './components/LoadingOverlay';
 export * from './components/EditorHeader/EditorHeader';
 export * from './components/DatePicker';
 export * from './components/Text';
-export * from './components/ManuscriptNoteList';
-export * from './components/Comments';
 export * from './components/RelativeDate';
 export * from './components/Menus';
 export * from './components/SelectField';

package/dist/types/components/RelativeDate.d.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-export declare const RelativeDate: React.FC<{
-    createdAt?: number;
-}>;
+export type RelativeDateProps = React.HTMLAttributes<HTMLSpanElement> & {
+    date?: number;
+};
+export declare const RelativeDate: React.FC<RelativeDateProps>;

package/dist/types/index.d.ts

@@ -46,8 +46,6 @@ export * from './components/LoadingOverlay';
 export * from './components/EditorHeader/EditorHeader';
 export * from './components/DatePicker';
 export * from './components/Text';
-export * from './components/ManuscriptNoteList';
-export * from './components/Comments';
 export * from './components/RelativeDate';
 export * from './components/Menus';
 export * from './components/SelectField';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.12.13-LEAN-3502.0",
+  "version": "1.12.13-LEAN-3572.0",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/dist/cjs/components/Comments/CommentActions.js

@@ -1,98 +0,0 @@
-"use strict";
-/*!
- * © 2020 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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.CommentActions = void 0;
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const use_dropdown_1 = require("../../hooks/use-dropdown");
-const Button_1 = require("../Button");
-const Dropdown_1 = require("../Dropdown");
-const icons_1 = require("../icons");
-const ResolveButton_1 = require("./ResolveButton");
-const CommentActions = ({ id, target, can, isResolved, handleSetResolved, deleteComment, setIsEditing, isOwnComment, isProdNote, }) => {
-    const { isOpen, toggleOpen, wrapperRef } = (0, use_dropdown_1.useDropdown)();
-    const handleRequestEdit = (0, react_1.useCallback)(() => {
-        setIsEditing(true);
-    }, [setIsEditing]);
-    const handleRequestDelete = (0, react_1.useCallback)(() => deleteComment(id, target), [deleteComment, id, target]);
-    const canResolve = (0, react_1.useMemo)(() => {
-        if (!isProdNote) {
-            return ((isOwnComment && (can === null || can === void 0 ? void 0 : can.resolveOwnComment)) || (can === null || can === void 0 ? void 0 : can.resolveOthersComment));
-        }
-        return can === null || can === void 0 ? void 0 : can.handleNotes;
-    }, [isProdNote, isOwnComment, can]);
-    const canHandle = (0, react_1.useMemo)(() => {
-        if (!isProdNote) {
-            return ((isOwnComment && (can === null || can === void 0 ? void 0 : can.handleOwnComments)) || (can === null || can === void 0 ? void 0 : can.handleOthersComments));
-        }
-        return can === null || can === void 0 ? void 0 : can.handleNotes;
-    }, [isProdNote, isOwnComment, can]);
-    return (react_1.default.createElement(Container, null,
-        canResolve && handleSetResolved && (react_1.default.createElement(ResolveButton_1.ResolveButton, { id: id, resolved: isResolved, resolvedCallback: handleSetResolved, "aria-label": 'resolve comment' })),
-        canHandle && (react_1.default.createElement(Dropdown_1.DropdownContainer, { ref: wrapperRef },
-            react_1.default.createElement(ActionDropdownButton, { onClick: toggleOpen, className: "note-actions", "aria-label": 'actions list' },
-                react_1.default.createElement(icons_1.DotsIcon, null)),
-            isOpen && (react_1.default.createElement(Dropdown_1.DropdownList, { direction: 'right', width: 125, height: 96, onClick: toggleOpen },
-                react_1.default.createElement(ActionButton, { onClick: handleRequestEdit }, "Edit"),
-                react_1.default.createElement(ActionButton, { onClick: handleRequestDelete }, "Delete")))))));
-};
-exports.CommentActions = CommentActions;
-const Container = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  height: ${(props) => props.theme.grid.unit * 6}px;
-`;
-const ActionButton = (0, styled_components_1.default)(Button_1.IconTextButton) `
-  display: inline-block;
-  text-align: left;
-  padding-left: ${(props) => props.theme.grid.unit * 4}px;
-`;
-const ActionDropdownButton = (0, styled_components_1.default)(Dropdown_1.DropdownButton) `
-  &:not([disabled]):focus {
-    circle {
-      fill: ${(props) => props.theme.colors.brand.medium};
-    }
-    opacity: 1;
-  }
-  margin-left: ${(props) => props.theme.grid.unit}px;
-`;

package/dist/cjs/components/Comments/CommentBody.js

@@ -1,160 +0,0 @@
-"use strict";
-/*!
- * © 2020 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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.CommentBody = void 0;
-const formik_1 = require("formik");
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Button_1 = require("../Button");
-const Form_1 = require("../Form");
-const icons_1 = require("../icons");
-const Tooltip_1 = require("../Tooltip");
-exports.CommentBody = react_1.default.memo(({ comment, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
-    (0, react_1.useEffect)(() => {
-        if (isNew) {
-            setIsEditing(true);
-        }
-    }, [isNew, setIsEditing]);
-    const cancelEditing = () => {
-        setIsEditing(false);
-        if (isNew) {
-            deleteComment(comment._id);
-        }
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null, isEditing ? (react_1.default.createElement(formik_1.Formik, { initialValues: comment, onSubmit: (values, actions) => {
-            actions.setSubmitting(true);
-            saveComment(values);
-            setIsEditing(false);
-        } }, ({ errors, values, setFieldValue }) => (react_1.default.createElement(formik_1.Form, null,
-        errors.contents && react_1.default.createElement(Form_1.FormError, null, errors.contents),
-        react_1.default.createElement(formik_1.Field, { name: 'contents' }, (props) => (react_1.default.createElement(CommentContent, null,
-            react_1.default.createElement(StyledCommentField, { id: comment._id, autoFocus: isEditing, value: values.contents, onChange: (event) => setFieldValue(props.field.name, event.target.value), onBlur: (event) => onFocusOut &&
-                    onFocusOut(comment._id, event.target.value), placeholder: !isReply ? 'Comment...' : 'Reply...' })))),
-        react_1.default.createElement(EditingCommentFooter, null,
-            react_1.default.createElement(Actions, null,
-                react_1.default.createElement(Button_1.SecondaryButton, { onClick: cancelEditing }, "Cancel"),
-                react_1.default.createElement(Button_1.PrimaryButton, { disabled: !values.contents.replace(/<[^>]+>/g, '').length ||
-                        (!isNew &&
-                            (comment.contents === values.contents ||
-                                !values.contents.replace(/<[^>]+>/g, '').length)), type: "submit" }, "Save"))))))) : (react_1.default.createElement("div", null,
-        react_1.default.createElement(CommentContent, { onClick: () => scrollIntoHighlight && scrollIntoHighlight(comment) },
-            react_1.default.createElement(StyledCommentViewer, { "data-cy": "note-text" }, comment.contents)),
-        !isReply && (react_1.default.createElement(CommentFooter, null,
-            react_1.default.createElement("span", null,
-                react_1.default.createElement(ActionButton, { hidden: !isProdNote, "data-tooltip-id": `reply-${comment._id}`, onClick: () => handleCreateReply(comment._id), "aria-label": 'reply', className: "reply-button note-actions" },
-                    react_1.default.createElement(icons_1.CommentReplyIcon, null))),
-            react_1.default.createElement(Tooltip_1.Tooltip, { id: `reply-${comment._id}`, place: "bottom" }, "Reply")))))));
-});
-const CommentFooter = styled_components_1.default.div `
-  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
-  padding: ${(props) => props.theme.grid.unit * 2}px
-    ${(props) => props.theme.grid.unit * 2}px 0;
-  display: flex;
-  justify-content: flex-end;
-  height: ${(props) => props.theme.grid.unit * 6}px;
-`;
-const EditingCommentFooter = (0, styled_components_1.default)(CommentFooter) `
-  justify-content: flex-end;
-  padding: ${(props) => props.theme.grid.unit * 2}px
-    ${(props) => props.theme.grid.unit * 4}px 0;
-`;
-const ActionButton = styled_components_1.default.button `
-  border: none;
-  background: none;
-  cursor: pointer;
-  &:not([disabled]):hover {
-    path {
-      stroke: ${(props) => props.theme.colors.brand.medium};
-    }
-  }
-`;
-const CommentContent = styled_components_1.default.div `
-  cursor: pointer;
-  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
-`;
-const StyledCommentField = styled_components_1.default.textarea `
-  cursor: text;
-  font-family: ${(props) => props.theme.font.family.sans};
-  color: ${(props) => props.theme.colors.text.primary};
-  margin: ${(props) => props.theme.grid.unit * 2}px 0;
-  resize: none;
-
-  width: 100%;
-  outline: 0;
-  border: 1px solid #e2e2e2;
-  border-radius: 6px;
-
-  &:focus {
-    background: #f2fbfc;
-    border: 1px solid #bce7f6;
-    border-radius: 6px;
-  }
-
-  .empty-node::before {
-    position: absolute;
-    color: #c9c9c9;
-    cursor: text;
-    pointer-events: none;
-  }
-
-  box-sizing: border-box;
-  padding: 3px 16px 3px 16px;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 24px;
-`;
-const StyledCommentViewer = styled_components_1.default.div `
-  flex: 1;
-
-  font-family: ${(props) => props.theme.font.family.sans};
-  line-height: 1.06;
-  letter-spacing: -0.2px;
-  color: ${(props) => props.theme.colors.text.primary};
-  margin: ${(props) => props.theme.grid.unit * 2}px 0;
-`;
-const Actions = (0, styled_components_1.default)(Button_1.ButtonGroup) `
-  & button:not(:last-of-type) {
-    margin-right: 4px;
-  }
-`;

package/dist/cjs/components/Comments/CommentTarget.js

@@ -1,55 +0,0 @@
-"use strict";
-/*!
- * © 2020 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommentTarget = void 0;
-const react_1 = __importStar(require("react"));
-exports.CommentTarget = react_1.default.memo(({ isSelected, children }) => {
-    const threadRef = react_1.default.createRef();
-    (0, react_1.useEffect)(() => {
-        if (threadRef.current && isSelected) {
-            threadRef.current.scrollIntoView({
-                behavior: 'smooth',
-                block: 'start',
-                inline: 'nearest',
-            });
-        }
-    });
-    return (react_1.default.createElement("div", { "data-cy": "comment-target", ref: threadRef }, children));
-});

package/dist/cjs/components/Comments/CommentUser.js

@@ -1,76 +0,0 @@
-"use strict";
-/*!
- * © 2020 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommentUser = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Avatar_1 = require("../Avatar");
-const ManuscriptNoteList_1 = require("../ManuscriptNoteList");
-const CommentUserContainer = styled_components_1.default.div `
-  display: flex;
-`;
-const CommentUserName = styled_components_1.default.div `
-  margin: 0 ${(props) => props.theme.grid.unit * 2}px;
-  font-weight: ${(props) => props.theme.font.weight.normal};
-  max-width: ${(props) => props.theme.grid.unit * 50}px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-const DateText = (0, styled_components_1.default)(CommentUserName) `
-  font-size: ${(props) => props.theme.font.size.small};
-  line-height: ${(props) => props.theme.font.lineHeight.normal};
-  font-weight: ${(props) => props.theme.font.weight.normal};
-  color: ${(props) => props.theme.colors.text.secondary};
-`;
-const Header = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  font-size: ${(props) => props.theme.font.size.normal};
-`;
-const CommentUser = ({ contributions, getCollaboratorById, displayName, createdAt }) => {
-    if (!contributions || !contributions.length) {
-        return (react_1.default.createElement(CommentUserContainer, null,
-            react_1.default.createElement(Header, null,
-                react_1.default.createElement(Avatar_1.Avatar, { size: 20 })),
-            react_1.default.createElement(Header, null,
-                react_1.default.createElement(CommentUserName, null,
-                    "By ",
-                    displayName || '(unknown user)'),
-                react_1.default.createElement(DateText, null,
-                    react_1.default.createElement(ManuscriptNoteList_1.LightRelativeDate, { createdAt: createdAt })))));
-    }
-    const [contribution] = contributions;
-    const user = getCollaboratorById(contribution.profileID);
-    const buildName = (name) => [name.given, name.family].filter((item) => item).join(' ');
-    if (!user) {
-        return null;
-    }
-    return (react_1.default.createElement(CommentUserContainer, null,
-        react_1.default.createElement(Header, null,
-            react_1.default.createElement(Avatar_1.Avatar, { size: 20 })),
-        react_1.default.createElement(Header, null,
-            react_1.default.createElement(CommentUserName, null,
-                "By ",
-                buildName(user.bibliographicName)),
-            react_1.default.createElement(DateText, null,
-                react_1.default.createElement(ManuscriptNoteList_1.LightRelativeDate, { createdAt: createdAt })))));
-};
-exports.CommentUser = CommentUser;