@manuscripts/style-guide 1.12.17-LEAN-3720.0 → 1.13.0

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

@@ -0,0 +1,165 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import styled from 'styled-components';
+import { Category, Dialog, DialogState, LoadingOverlay, NavDropdown, NavDropdownButton, NavDropdownContainer, PrimaryBoldHeading, PrimaryButton, SecondarySmallText, TaskStepDoneIcon, useDropdown, } from '../..';
+import { AlertMessage, AlertMessageType } from '../AlertMessage';
+import { PrimaryButtonSmall, } from './EditorHeader';
+const DropdownWrapper = ({ disabled, button, primary, children }) => {
+    const { isOpen, toggleOpen, wrapperRef } = useDropdown();
+    return (React.createElement(NavDropdownContainer, { id: 'user-dropdown', ref: wrapperRef },
+        React.createElement(NavDropdownButton, { as: (primary && PrimaryButton) || undefined, disabled: disabled, isOpen: isOpen, onClick: toggleOpen }, button),
+        isOpen && React.createElement(NavDropdown, { direction: "left" }, children)));
+};
+const StepDetails = ({ icon, label, description, role }) => (React.createElement(React.Fragment, null,
+    icon && React.createElement(TaskStatus, null, icon),
+    React.createElement(TaskContainer, null,
+        React.createElement(PrimaryBoldHeading, null, label),
+        React.createElement(SecondarySmallText, null, description),
+        React.createElement(SecondarySmallText, null,
+            "Actor: ",
+            role.label))));
+export const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, previousStepType, currentStepType, isAnnotator, isProofer, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
+    const dialogMessages = useMemo(() => hasPendingSuggestions &&
+        !isAnnotator &&
+        !isProofer &&
+        dialogData.state !== DialogState.SUCCESS
+        ? {
+            header: 'The task can not be transitioned to the next step',
+            message: `There are still pending suggestions in the document.
+                It is not possible to complete the task without having them approved or rejected.`,
+            actions: {
+                primary: {
+                    action: onCancelClick,
+                    title: 'Ok',
+                },
+                onClose: onCancelClick,
+            },
+        }
+        : dialogData.state === DialogState.SUCCESS
+            ? {
+                header: 'Content reassigned successfully',
+                message: `to the ${currentStepType.label}`,
+                actions: {
+                    primary: {
+                        action: onCancelClick,
+                        title: 'Close',
+                    },
+                    onClose: onCancelClick,
+                },
+            }
+            : {
+                header: 'Are you sure?',
+                message: 'You are about to complete your task. If you confirm, you will no longer be able to make any changes.',
+                actions: {
+                    primary: {
+                        action: continueDialogAction,
+                        title: 'Continue',
+                    },
+                    secondary: {
+                        action: onCancelClick,
+                        title: 'Cancel',
+                    },
+                    onClose: onCancelClick,
+                },
+            }, [
+        dialogData,
+        continueDialogAction,
+        onCancelClick,
+        currentStepType,
+        hasPendingSuggestions,
+        isAnnotator,
+        isProofer,
+    ]);
+    const prevDialogMsgs = useRef();
+    const prevDialogueState = useRef();
+    useEffect(() => {
+        prevDialogMsgs.current = dialogMessages;
+        prevDialogueState.current = dialogData.state;
+    }, [dialogData.state]);
+    const messages = dialogData.state === DialogState.CLOSED && prevDialogMsgs.current
+        ? prevDialogMsgs.current
+        : dialogMessages;
+    const finalState = dialogData.state === DialogState.CLOSED && prevDialogueState.current
+        ? prevDialogueState.current
+        : dialogData.state;
+    return (React.createElement(React.Fragment, null,
+        (currentStepTransition && (currentStepTransition === null || currentStepTransition === void 0 ? void 0 : currentStepTransition.length) > 1 && (React.createElement(DropdownWrapper, { button: 'Complete task', disabled: disable, primary: true },
+            React.createElement(TaskDropdown, null, currentStepTransition &&
+                currentStepTransition.map((transition, index) => (React.createElement(Task, { key: 'task_' + transition.type.id, className: transition.status.id === 'success' ? 'happyPath' : '', value: index, onClick: onTransitionClick },
+                    React.createElement("strong", null, transition.type.label),
+                    transition.type.description))))))) || (React.createElement(PrimaryButtonSmall, { value: 0, onClick: onTransitionClick, disabled: disable }, "Complete task")),
+        finalState === DialogState.LOADING && (React.createElement(LoadingOverlay, null,
+            React.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026"))),
+        React.createElement(Dialog, { isOpen: dialogData.state !== DialogState.CLOSED &&
+                dialogData.state !== DialogState.LOADING, category: Category.confirmation, header: messages.header, message: messages.message, actions: messages.actions },
+            finalState === DialogState.SUCCESS && (React.createElement(Grid, null,
+                previousStepType && (React.createElement(StepDetails, Object.assign({}, previousStepType, { icon: React.createElement(React.Fragment, null,
+                        React.createElement(TaskStepDoneIcon, null),
+                        React.createElement(Line, null)) }))),
+                React.createElement(StepDetails, Object.assign({}, currentStepType)))),
+            finalState === DialogState.ERROR && (React.createElement(AlertMessage, { type: AlertMessageType.error, hideCloseButton: true }, dialogData.error)))));
+};
+const TaskDropdown = styled.div `
+  display: flex;
+  flex-direction: column;
+  padding: ${(props) => props.theme.grid.unit * 2}px 0;
+`;
+const Task = styled.button `
+  background: transparent;
+  border: none;
+  color: ${(props) => props.theme.colors.text.secondary};
+  cursor: pointer;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.small} /
+    ${(props) => props.theme.font.lineHeight.normal}
+    ${(props) => props.theme.font.family.sans};
+  order: 1;
+  outline: none;
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px;
+  text-align: left;
+  width: ${(props) => props.theme.grid.unit * 66}px;
+
+  &:not([disabled]):hover,
+  &:not([disabled]):focus {
+    background-color: ${(props) => props.theme.colors.button.default.background.hover};
+  }
+
+  strong {
+    color: ${(props) => props.theme.colors.text.primary};
+    display: block;
+    font-size: ${(props) => props.theme.font.size.normal};
+    line-height: ${(props) => props.theme.font.lineHeight.normal};
+  }
+
+  &.happyPath {
+    border-bottom: 1px solid ${(props) => props.theme.colors.border.tertiary};
+    order: 0;
+  }
+`;
+const TextAreaWrapper = styled.div `
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+`;
+const Grid = styled.div `
+  display: grid;
+  grid-template-columns: max-content auto;
+  gap: 0 ${(props) => props.theme.grid.unit * 2}px;
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  background: ${(props) => props.theme.colors.background.secondary};
+  padding: ${(props) => props.theme.grid.unit * 6}px;
+`;
+const Line = styled.hr `
+  margin: 5px 0 0 0;
+  flex: 1;
+  border: 1px dashed #c9c9c9;
+`;
+const TaskStatus = styled.div `
+  grid-column: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 5px;
+`;
+const TaskContainer = styled.div `
+  grid-column: 2;
+  margin-bottom: 8px;
+`;

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

@@ -42,10 +42,9 @@ export * from './components/Badge';
 export * from './components/NavDropdown';
 export * from './components/Dropdown';
 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/EditorHeader/EditorHeader.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+export type PartialSubmission = {
+    id: string;
+    currentStep: SubmissionStep;
+    previousStep?: SubmissionStep | null | undefined;
+    nextStep?: SubmissionStep | null | undefined;
+};
+export type SubmissionStep = {
+    type: SubmissionStepType;
+};
+export type SubmissionStepTransition = {
+    status: {
+        id: string;
+        label: string;
+    };
+    type: SubmissionStepType;
+};
+export type SubmissionStepType = {
+    id: string;
+    label: string;
+    description: string;
+    transitions: Array<SubmissionStepTransition>;
+    role: {
+        label: string;
+    };
+};
+export declare enum DialogState {
+    INIT = 0,
+    LOADING = 1,
+    ERROR = 2,
+    SUCCESS = 3,
+    CLOSED = 4
+}
+export type ProceedDialogData = {
+    state: DialogState;
+    error?: string;
+    mutationError?: any;
+    updateState: (state: DialogState) => void;
+    clearError: () => void;
+};
+export declare const EditorHeader: React.FC<{
+    handleSnapshot?: () => Promise<void>;
+    submission: PartialSubmission;
+    hasPendingSuggestions?: boolean;
+    canCompleteTask: boolean;
+    exceptionDialog: React.FC<{
+        errorCode: string;
+    }>;
+    userRole: string;
+    submitProceed: {
+        dialogData: ProceedDialogData;
+        submit: (statusId: string, noteValue: string) => Promise<unknown>;
+    };
+    goBack?: () => void;
+    status?: 'saved' | 'saving' | 'offline' | 'failed';
+    isAnnotator: boolean;
+    isProofer: boolean;
+    message: React.FC;
+    disabelProceedNote?: boolean;
+}>;
+export declare const PrimaryButtonSmall: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    type: "button" | "submit" | "reset";
+} & {
+    danger?: boolean | undefined;
+    disabled?: boolean | undefined;
+    mini?: boolean | undefined;
+}, "type">;
+export declare const MediumTextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, import("../Form").ErrorProps, never>;

package/dist/types/components/EditorHeader/ProceedView.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ProceedDialogData } from '../..';
+import { SubmissionStepTransition, SubmissionStepType } from './EditorHeader';
+export declare const ProceedView: React.FC<{
+    isAnnotator: boolean;
+    isProofer: boolean;
+    disable: boolean;
+    onTransitionClick: (event: unknown) => void;
+    onNoteChange?: (event: unknown) => void;
+    hasPendingSuggestions: boolean;
+    dialogData: ProceedDialogData;
+    noteValue: string;
+    currentStepTransition: SubmissionStepTransition[];
+    previousStepType: SubmissionStepType | undefined;
+    currentStepType: SubmissionStepType;
+    nextStepType: SubmissionStepType;
+    onCancelClick: () => void;
+    continueDialogAction: () => Promise<void>;
+    message: React.FC<{
+        isCentered: boolean;
+    }>;
+}>;

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

@@ -43,10 +43,9 @@ export * from './components/Badge';
 export * from './components/NavDropdown';
 export * from './components/Dropdown';
 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.17-LEAN-3720.0",
+  "version": "1.13.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));
-});