@manuscripts/style-guide 1.4.3 → 1.4.5-LEAN-3019

package/dist/cjs/components/AffiliationsEditor/AffiliationsEditor.js

@@ -49,12 +49,10 @@ const AffiliationsEditor = ({ affiliations, authorAffiliations, addAuthorAffilia
     const handleChoose = (0, react_1.useCallback)((value) => {
         if (value) {
             const selectedAffiliation = value;
-            addAuthorAffiliation(selectedAffiliation.__isNew__
-                ? selectedAffiliation.value
-                : affiliations.get(selectedAffiliation.value) || '');
+            addAuthorAffiliation(selectedAffiliation.value);
         }
         setSearchText('');
-    }, [addAuthorAffiliation, affiliations]);
+    }, [addAuthorAffiliation]);
     const options = (0, authors_1.affiliationsOptions)(affiliations, authorAffiliations);
     const active = authorAffiliations
         ? authorAffiliations.map((item) => item.data)

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

@@ -0,0 +1,21 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CommentBody"), exports);
+__exportStar(require("./CommentTarget"), exports);
+__exportStar(require("./CommentUser"), exports);
+__exportStar(require("./ResolveButton"), exports);
+__exportStar(require("./CommentWrapper"), exports);

package/dist/cjs/components/DatePicker/CalendarDatePicker.js

@@ -0,0 +1,153 @@
+"use strict";
+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.CalendarDatePicker = exports.calendarDatePickerDefaultDateFormat = exports.calendarPotentialDueDate = exports.calendarGetDay = void 0;
+require("react-modern-calendar-datepicker/lib/DatePicker.css");
+const date_fns_1 = require("date-fns");
+const react_1 = __importStar(require("react"));
+const react_modern_calendar_datepicker_1 = __importDefault(require("react-modern-calendar-datepicker"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Dialog_1 = require("../Dialog");
+const calendarGetDay = (date) => ({
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    day: date.getDate(),
+});
+exports.calendarGetDay = calendarGetDay;
+const calendarPotentialDueDate = (stepDueDate, dueDate, submissionDueDate) => {
+    const duration = (0, date_fns_1.intervalToDuration)({
+        start: stepDueDate,
+        end: new Date(`${dueDate.year}-${dueDate.month < 10 ? `0${dueDate.month}` : dueDate.month}-${dueDate.day < 10 ? `0${dueDate.day}` : dueDate.day}`),
+    });
+    return (0, date_fns_1.add)(submissionDueDate, duration);
+};
+exports.calendarPotentialDueDate = calendarPotentialDueDate;
+const calendarDatePickerDefaultDateFormat = 'd MMM, EEEE';
+exports.calendarDatePickerDefaultDateFormat = calendarDatePickerDefaultDateFormat;
+const CalendarDatePicker = ({ Button, handleDateChange, originalDueDate, currentDueDate, datePickerConfigs, dialogConfigs, primaryButtonTitle = 'Reschedule', secondaryButtonTitle = 'Cancel', }) => {
+    datePickerConfigs = Object.assign({ position: 'bottom', color: '#f2fbfc', selectedDayClassName: 'selected-day', calendarClassName: 'responsive-calendar' }, datePickerConfigs);
+    const dialog = Object.assign({}, dialogConfigs, {
+        header: 'Change the task due date?',
+    });
+    const [dueDate, setDueDate] = (0, react_1.useState)();
+    const [toggleDialog, setToggleDialog] = (0, react_1.useState)(false);
+    const onConfirmClick = (0, react_1.useCallback)(() => {
+        handleDateChange(dueDate);
+        setToggleDialog(false);
+    }, [dueDate, setToggleDialog, handleDateChange]);
+    const formattedDueDate = (0, react_1.useMemo)(() => dueDate &&
+        (0, date_fns_1.format)(new Date(dueDate.year, dueDate.month, dueDate.day), calendarDatePickerDefaultDateFormat), [dueDate]);
+    const formattedPotentialDueDate = (0, react_1.useMemo)(() => dueDate &&
+        (0, date_fns_1.format)(calendarPotentialDueDate(currentDueDate, dueDate, originalDueDate), calendarDatePickerDefaultDateFormat), [originalDueDate, currentDueDate, dueDate]);
+    const onDatePickerChange = (0, react_1.useCallback)((date) => {
+        setDueDate(date);
+        setToggleDialog(true);
+        const button = document.querySelector('.DatePicker button');
+        button.blur();
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Calendar, null,
+            react_1.default.createElement(react_modern_calendar_datepicker_1.default, { value: calendarGetDay(currentDueDate), onChange: onDatePickerChange, calendarPopperPosition: datePickerConfigs.position, colorPrimary: datePickerConfigs.color, calendarSelectedDayClassName: datePickerConfigs.selectedDayClassName, calendarClassName: datePickerConfigs.calendarClassName, renderInput: Button })),
+        react_1.default.createElement(Dialog_1.Dialog, { isOpen: toggleDialog, category: Dialog_1.Category.confirmation, header: dialog.header, message: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(UpdatedDueDate, null, formattedDueDate),
+                dialog.dueDateMessage && (react_1.default.createElement(DueDateMessage, null, dialog.dueDateMessage)),
+                react_1.default.createElement(Value, null,
+                    react_1.default.createElement(StrikeDueDate, { as: 'del' }, (0, date_fns_1.format)(originalDueDate, calendarDatePickerDefaultDateFormat)),
+                    formattedPotentialDueDate)), actions: {
+                primary: {
+                    action: onConfirmClick,
+                    title: primaryButtonTitle,
+                },
+                secondary: {
+                    action: () => setToggleDialog(false),
+                    title: secondaryButtonTitle,
+                },
+            } })));
+};
+exports.CalendarDatePicker = CalendarDatePicker;
+const StrikeDueDate = (0, styled_components_1.default)(Dialog_1.MessageContainer) `
+  margin: 0;
+  min-height: min-content;
+  padding-right: ${(props) => props.theme.grid.unit}px;
+`;
+const Value = styled_components_1.default.div `
+  flex: 1;
+  display: flex;
+  color: ${(props) => props.theme.colors.text.primary};
+  align-items: center;
+  line-height: 1;
+`;
+const Calendar = styled_components_1.default.div `
+  flex: 1;
+
+  .DatePicker {
+    width: 100%;
+  }
+
+  .DatePicker__calendarContainer {
+    position: absolute;
+    top: unset;
+    left: unset !important;
+    right: 0 !important;
+    transform: unset !important;
+  }
+
+  .Calendar__weekDay {
+    color: #e6e6e6;
+    font-size: ${(props) => props.theme.font.size.normal};
+    line-height: ${(props) => props.theme.font.lineHeight.large};
+    font-weight: ${(props) => props.theme.font.weight.medium};
+  }
+
+  .Calendar__day:not(.-blank):not(.-selected):hover {
+    background: #f2fbfc !important;
+  }
+
+  .Calendar__day.-today:hover::after {
+    opacity: 0.5 !important;
+  }
+
+  .selected-day {
+    color: ${(props) => props.theme.colors.text.primary} !important;
+    border: 1px solid ${(props) => props.theme.colors.border.primary} !important;
+  }
+`;
+const UpdatedDueDate = styled_components_1.default.div `
+  background: ${(props) => props.theme.colors.background.secondary};
+  color: ${(props) => props.theme.colors.text.primary};
+  width: max-content;
+  border: 1px solid ${(props) => props.theme.colors.border.secondary};
+  box-sizing: border-box;
+  border-radius: ${(props) => props.theme.grid.unit}px;
+  padding: ${(props) => props.theme.grid.unit}px
+    ${(props) => props.theme.grid.unit * 2}px;
+`;
+const DueDateMessage = (0, styled_components_1.default)(Dialog_1.MessageContainer) `
+  min-height: min-content;
+  margin: ${(props) => props.theme.grid.unit * 6}px 0 0 0;
+`;

package/dist/cjs/components/DatePicker/index.js

@@ -0,0 +1,17 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CalendarDatePicker"), exports);

package/dist/cjs/components/NavDropdown.js

@@ -41,9 +41,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavDropdownButton = exports.NavDropdownButtonContainer = exports.NotificationsBadge = exports.NavDropdownToggle = exports.NavDropdownButtonText = exports.NavDropdownSeparator = exports.NavDropdownElement = exports.NavDropdownLink = exports.InvitedBy = exports.PlaceholderTitle = exports.NavDropdown = exports.NavDropdownContainer = void 0;
+exports.NavDropdownButton = exports.NavDropdownButtonContainer = exports.NotificationsBadge = exports.NavDropdownToggle = exports.NavDropdownButtonText = exports.NavDropdownSeparator = exports.NavDropdownElement = exports.NavDropdownLink = exports.InvitedBy = exports.NavDropdown = exports.NavDropdownContainer = void 0;
 const ArrowDownUp_1 = __importDefault(require("@manuscripts/assets/react/ArrowDownUp"));
-const title_editor_1 = require("@manuscripts/title-editor");
 const react_1 = __importDefault(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const styled_components_1 = __importStar(require("styled-components"));
@@ -72,9 +71,6 @@ exports.NavDropdown = styled_components_1.default.div `
   position: absolute;
   z-index: 10;
 `;
-exports.PlaceholderTitle = (0, styled_components_1.default)(title_editor_1.Title) `
-  color: ${(props) => props.theme.colors.text.secondary};
-`;
 exports.InvitedBy = styled_components_1.default.div `
   display: flex;
   align-items: center;
@@ -97,8 +93,7 @@ const commonStyles = (0, styled_components_1.css) `
     : props.theme.colors.text.primary};
   pointer-events: ${(props) => (props.disabled ? 'none' : 'unset')};
 
-  &:hover,
-  &:hover ${exports.PlaceholderTitle} {
+  &:hover {
     background: ${(props) => props.theme.colors.background.fifth};
   }
 `;

package/dist/cjs/components/icons/plus-icon.js

@@ -20,8 +20,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlusIcon = void 0;
 const react_1 = __importDefault(require("react"));
-const PlusIcon = () => (react_1.default.createElement("svg", { width: "11", height: "10", viewBox: "0 0 11 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.5 0.5C5.25147 0.5 5.05 0.701472 5.05 0.95V4.55H1.45C1.20147 4.55 1 4.75147 1 5C1 5.24853 1.20147 5.45 1.45 5.45H5.05V9.05C5.05 9.29853 5.25147 9.5 5.5 9.5C5.74853 9.5 5.95 9.29853 5.95 9.05V5.45H9.55C9.79853 5.45 10 5.24853 10 5C10 4.75147 9.79853 4.55 9.55 4.55H5.95V0.95C5.95 0.701472 5.74853 0.5 5.5 0.5Z", fill: "#6E6E6E" }),
-    react_1.default.createElement("path", { d: "M5.05 4.55V5.05H5.55V4.55H5.05ZM5.05 5.45H5.55V4.95H5.05V5.45ZM5.95 5.45V4.95H5.45V5.45H5.95ZM5.95 4.55H5.45V5.05H5.95V4.55ZM5.55 0.95C5.55 0.977614 5.52761 1 5.5 1V0C4.97533 0 4.55 0.425329 4.55 0.95H5.55ZM5.55 4.55V0.95H4.55V4.55H5.55ZM1.45 5.05H5.05V4.05H1.45V5.05ZM1.5 5C1.5 5.02761 1.47761 5.05 1.45 5.05V4.05C0.925329 4.05 0.5 4.47533 0.5 5H1.5ZM1.45 4.95C1.47761 4.95 1.5 4.97239 1.5 5H0.5C0.5 5.52467 0.925328 5.95 1.45 5.95V4.95ZM5.05 4.95H1.45V5.95H5.05V4.95ZM5.55 9.05V5.45H4.55V9.05H5.55ZM5.5 9C5.52761 9 5.55 9.02239 5.55 9.05H4.55C4.55 9.57467 4.97533 10 5.5 10V9ZM5.45 9.05C5.45 9.02239 5.47239 9 5.5 9V10C6.02467 10 6.45 9.57467 6.45 9.05H5.45ZM5.45 5.45V9.05H6.45V5.45H5.45ZM9.55 4.95H5.95V5.95H9.55V4.95ZM9.5 5C9.5 4.97239 9.52238 4.95 9.55 4.95V5.95C10.0747 5.95 10.5 5.52467 10.5 5H9.5ZM9.55 5.05C9.52239 5.05 9.5 5.02761 9.5 5H10.5C10.5 4.47533 10.0747 4.05 9.55 4.05V5.05ZM5.95 5.05H9.55V4.05H5.95V5.05ZM5.45 0.95V4.55H6.45V0.95H5.45ZM5.5 1C5.47239 1 5.45 0.977615 5.45 0.95H6.45C6.45 0.425329 6.02467 0 5.5 0V1Z", fill: "#6E6E6E" })));
+const PlusIcon = ({ width = 11, height = 10, viewBox = '0 0 11 10', color = '#6E6E6E', transform, }) => (react_1.default.createElement("svg", { width: width, height: height, viewBox: viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", transform: transform },
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.5 0.5C5.25147 0.5 5.05 0.701472 5.05 0.95V4.55H1.45C1.20147 4.55 1 4.75147 1 5C1 5.24853 1.20147 5.45 1.45 5.45H5.05V9.05C5.05 9.29853 5.25147 9.5 5.5 9.5C5.74853 9.5 5.95 9.29853 5.95 9.05V5.45H9.55C9.79853 5.45 10 5.24853 10 5C10 4.75147 9.79853 4.55 9.55 4.55H5.95V0.95C5.95 0.701472 5.74853 0.5 5.5 0.5Z", fill: color }),
+    react_1.default.createElement("path", { d: "M5.05 4.55V5.05H5.55V4.55H5.05ZM5.05 5.45H5.55V4.95H5.05V5.45ZM5.95 5.45V4.95H5.45V5.45H5.95ZM5.95 4.55H5.45V5.05H5.95V4.55ZM5.55 0.95C5.55 0.977614 5.52761 1 5.5 1V0C4.97533 0 4.55 0.425329 4.55 0.95H5.55ZM5.55 4.55V0.95H4.55V4.55H5.55ZM1.45 5.05H5.05V4.05H1.45V5.05ZM1.5 5C1.5 5.02761 1.47761 5.05 1.45 5.05V4.05C0.925329 4.05 0.5 4.47533 0.5 5H1.5ZM1.45 4.95C1.47761 4.95 1.5 4.97239 1.5 5H0.5C0.5 5.52467 0.925328 5.95 1.45 5.95V4.95ZM5.05 4.95H1.45V5.95H5.05V4.95ZM5.55 9.05V5.45H4.55V9.05H5.55ZM5.5 9C5.52761 9 5.55 9.02239 5.55 9.05H4.55C4.55 9.57467 4.97533 10 5.5 10V9ZM5.45 9.05C5.45 9.02239 5.47239 9 5.5 9V10C6.02467 10 6.45 9.57467 6.45 9.05H5.45ZM5.45 5.45V9.05H6.45V5.45H5.45ZM9.55 4.95H5.95V5.95H9.55V4.95ZM9.5 5C9.5 4.97239 9.52238 4.95 9.55 4.95V5.95C10.0747 5.95 10.5 5.52467 10.5 5H9.5ZM9.55 5.05C9.52239 5.05 9.5 5.02761 9.5 5H10.5C10.5 4.47533 10.0747 4.05 9.55 4.05V5.05ZM5.95 5.05H9.55V4.05H5.95V5.05ZM5.45 0.95V4.55H6.45V0.95H5.45ZM5.5 1C5.47239 1 5.45 0.977615 5.45 0.95H6.45C6.45 0.425329 6.02467 0 5.5 0V1Z", fill: color })));
 exports.PlusIcon = PlusIcon;
 exports.default = exports.PlusIcon;

package/dist/cjs/index.js

@@ -65,8 +65,14 @@ __exportStar(require("./components/Inspector"), exports);
 __exportStar(require("./components/InspectorSection"), exports);
 __exportStar(require("./components/Badge"), exports);
 __exportStar(require("./components/NavDropdown"), exports);
-__exportStar(require("./components/SubmissionInspector"), exports);
 __exportStar(require("./components/Dropdown"), exports);
+__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("./hooks/use-dropdown"), exports);
 __exportStar(require("./hooks/use-files"), exports);
 var use_deep_compare_1 = require("./hooks/use-deep-compare");
@@ -75,8 +81,7 @@ Object.defineProperty(exports, "useDeepCompareCallback", { enumerable: true, get
 __exportStar(require("./lib/authors"), exports);
 __exportStar(require("./lib/capabilities"), exports);
 __exportStar(require("./lib/files"), exports);
+__exportStar(require("./lib/comments"), exports);
 var errors_decoder_1 = require("./lib/errors-decoder");
 Object.defineProperty(exports, "errorsDecoder", { enumerable: true, get: function () { return __importDefault(errors_decoder_1).default; } });
 __exportStar(require("./types"), exports);
-__exportStar(require("./components/LoadingOverlay"), exports);
-__exportStar(require("./components/EditorHeader/EditorHeader"), exports);

package/dist/es/components/AffiliationsEditor/AffiliationsEditor.js

@@ -21,12 +21,10 @@ const AffiliationsEditor = ({ affiliations, authorAffiliations, addAuthorAffilia
     const handleChoose = useCallback((value) => {
         if (value) {
             const selectedAffiliation = value;
-            addAuthorAffiliation(selectedAffiliation.__isNew__
-                ? selectedAffiliation.value
-                : affiliations.get(selectedAffiliation.value) || '');
+            addAuthorAffiliation(selectedAffiliation.value);
         }
         setSearchText('');
-    }, [addAuthorAffiliation, affiliations]);
+    }, [addAuthorAffiliation]);
     const options = affiliationsOptions(affiliations, authorAffiliations);
     const active = authorAffiliations
         ? authorAffiliations.map((item) => item.data)

package/dist/es/components/Comments/index.js

@@ -0,0 +1,5 @@
+export * from './CommentBody';
+export * from './CommentTarget';
+export * from './CommentUser';
+export * from './ResolveButton';
+export * from './CommentWrapper';

package/dist/es/components/DatePicker/CalendarDatePicker.js

@@ -0,0 +1,121 @@
+import 'react-modern-calendar-datepicker/lib/DatePicker.css';
+import { add, format, intervalToDuration } from 'date-fns';
+import React, { useCallback, useMemo, useState } from 'react';
+import DatePicker from 'react-modern-calendar-datepicker';
+import styled from 'styled-components';
+import { Category, Dialog, MessageContainer } from '../Dialog';
+const calendarGetDay = (date) => ({
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    day: date.getDate(),
+});
+const calendarPotentialDueDate = (stepDueDate, dueDate, submissionDueDate) => {
+    const duration = intervalToDuration({
+        start: stepDueDate,
+        end: new Date(`${dueDate.year}-${dueDate.month < 10 ? `0${dueDate.month}` : dueDate.month}-${dueDate.day < 10 ? `0${dueDate.day}` : dueDate.day}`),
+    });
+    return add(submissionDueDate, duration);
+};
+const calendarDatePickerDefaultDateFormat = 'd MMM, EEEE';
+const CalendarDatePicker = ({ Button, handleDateChange, originalDueDate, currentDueDate, datePickerConfigs, dialogConfigs, primaryButtonTitle = 'Reschedule', secondaryButtonTitle = 'Cancel', }) => {
+    datePickerConfigs = Object.assign({ position: 'bottom', color: '#f2fbfc', selectedDayClassName: 'selected-day', calendarClassName: 'responsive-calendar' }, datePickerConfigs);
+    const dialog = Object.assign({}, dialogConfigs, {
+        header: 'Change the task due date?',
+    });
+    const [dueDate, setDueDate] = useState();
+    const [toggleDialog, setToggleDialog] = useState(false);
+    const onConfirmClick = useCallback(() => {
+        handleDateChange(dueDate);
+        setToggleDialog(false);
+    }, [dueDate, setToggleDialog, handleDateChange]);
+    const formattedDueDate = useMemo(() => dueDate &&
+        format(new Date(dueDate.year, dueDate.month, dueDate.day), calendarDatePickerDefaultDateFormat), [dueDate]);
+    const formattedPotentialDueDate = useMemo(() => dueDate &&
+        format(calendarPotentialDueDate(currentDueDate, dueDate, originalDueDate), calendarDatePickerDefaultDateFormat), [originalDueDate, currentDueDate, dueDate]);
+    const onDatePickerChange = useCallback((date) => {
+        setDueDate(date);
+        setToggleDialog(true);
+        const button = document.querySelector('.DatePicker button');
+        button.blur();
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Calendar, null,
+            React.createElement(DatePicker, { value: calendarGetDay(currentDueDate), onChange: onDatePickerChange, calendarPopperPosition: datePickerConfigs.position, colorPrimary: datePickerConfigs.color, calendarSelectedDayClassName: datePickerConfigs.selectedDayClassName, calendarClassName: datePickerConfigs.calendarClassName, renderInput: Button })),
+        React.createElement(Dialog, { isOpen: toggleDialog, category: Category.confirmation, header: dialog.header, message: React.createElement(React.Fragment, null,
+                React.createElement(UpdatedDueDate, null, formattedDueDate),
+                dialog.dueDateMessage && (React.createElement(DueDateMessage, null, dialog.dueDateMessage)),
+                React.createElement(Value, null,
+                    React.createElement(StrikeDueDate, { as: 'del' }, format(originalDueDate, calendarDatePickerDefaultDateFormat)),
+                    formattedPotentialDueDate)), actions: {
+                primary: {
+                    action: onConfirmClick,
+                    title: primaryButtonTitle,
+                },
+                secondary: {
+                    action: () => setToggleDialog(false),
+                    title: secondaryButtonTitle,
+                },
+            } })));
+};
+const StrikeDueDate = styled(MessageContainer) `
+  margin: 0;
+  min-height: min-content;
+  padding-right: ${(props) => props.theme.grid.unit}px;
+`;
+const Value = styled.div `
+  flex: 1;
+  display: flex;
+  color: ${(props) => props.theme.colors.text.primary};
+  align-items: center;
+  line-height: 1;
+`;
+const Calendar = styled.div `
+  flex: 1;
+
+  .DatePicker {
+    width: 100%;
+  }
+
+  .DatePicker__calendarContainer {
+    position: absolute;
+    top: unset;
+    left: unset !important;
+    right: 0 !important;
+    transform: unset !important;
+  }
+
+  .Calendar__weekDay {
+    color: #e6e6e6;
+    font-size: ${(props) => props.theme.font.size.normal};
+    line-height: ${(props) => props.theme.font.lineHeight.large};
+    font-weight: ${(props) => props.theme.font.weight.medium};
+  }
+
+  .Calendar__day:not(.-blank):not(.-selected):hover {
+    background: #f2fbfc !important;
+  }
+
+  .Calendar__day.-today:hover::after {
+    opacity: 0.5 !important;
+  }
+
+  .selected-day {
+    color: ${(props) => props.theme.colors.text.primary} !important;
+    border: 1px solid ${(props) => props.theme.colors.border.primary} !important;
+  }
+`;
+const UpdatedDueDate = styled.div `
+  background: ${(props) => props.theme.colors.background.secondary};
+  color: ${(props) => props.theme.colors.text.primary};
+  width: max-content;
+  border: 1px solid ${(props) => props.theme.colors.border.secondary};
+  box-sizing: border-box;
+  border-radius: ${(props) => props.theme.grid.unit}px;
+  padding: ${(props) => props.theme.grid.unit}px
+    ${(props) => props.theme.grid.unit * 2}px;
+`;
+const DueDateMessage = styled(MessageContainer) `
+  min-height: min-content;
+  margin: ${(props) => props.theme.grid.unit * 6}px 0 0 0;
+`;
+export { calendarGetDay, calendarPotentialDueDate, calendarDatePickerDefaultDateFormat, CalendarDatePicker, };

package/dist/es/components/DatePicker/index.js

@@ -0,0 +1 @@
+export * from './CalendarDatePicker';

package/dist/es/components/NavDropdown.js

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import ArrowDownUp from '@manuscripts/assets/react/ArrowDownUp';
-import { Title } from '@manuscripts/title-editor';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import styled, { css } from 'styled-components';
@@ -43,9 +42,6 @@ export const NavDropdown = styled.div `
   position: absolute;
   z-index: 10;
 `;
-export const PlaceholderTitle = styled(Title) `
-  color: ${(props) => props.theme.colors.text.secondary};
-`;
 export const InvitedBy = styled.div `
   display: flex;
   align-items: center;
@@ -68,8 +64,7 @@ const commonStyles = css `
     : props.theme.colors.text.primary};
   pointer-events: ${(props) => (props.disabled ? 'none' : 'unset')};
 
-  &:hover,
-  &:hover ${PlaceholderTitle} {
+  &:hover {
     background: ${(props) => props.theme.colors.background.fifth};
   }
 `;

package/dist/es/components/icons/plus-icon.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-export const PlusIcon = () => (React.createElement("svg", { width: "11", height: "10", viewBox: "0 0 11 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.5 0.5C5.25147 0.5 5.05 0.701472 5.05 0.95V4.55H1.45C1.20147 4.55 1 4.75147 1 5C1 5.24853 1.20147 5.45 1.45 5.45H5.05V9.05C5.05 9.29853 5.25147 9.5 5.5 9.5C5.74853 9.5 5.95 9.29853 5.95 9.05V5.45H9.55C9.79853 5.45 10 5.24853 10 5C10 4.75147 9.79853 4.55 9.55 4.55H5.95V0.95C5.95 0.701472 5.74853 0.5 5.5 0.5Z", fill: "#6E6E6E" }),
-    React.createElement("path", { d: "M5.05 4.55V5.05H5.55V4.55H5.05ZM5.05 5.45H5.55V4.95H5.05V5.45ZM5.95 5.45V4.95H5.45V5.45H5.95ZM5.95 4.55H5.45V5.05H5.95V4.55ZM5.55 0.95C5.55 0.977614 5.52761 1 5.5 1V0C4.97533 0 4.55 0.425329 4.55 0.95H5.55ZM5.55 4.55V0.95H4.55V4.55H5.55ZM1.45 5.05H5.05V4.05H1.45V5.05ZM1.5 5C1.5 5.02761 1.47761 5.05 1.45 5.05V4.05C0.925329 4.05 0.5 4.47533 0.5 5H1.5ZM1.45 4.95C1.47761 4.95 1.5 4.97239 1.5 5H0.5C0.5 5.52467 0.925328 5.95 1.45 5.95V4.95ZM5.05 4.95H1.45V5.95H5.05V4.95ZM5.55 9.05V5.45H4.55V9.05H5.55ZM5.5 9C5.52761 9 5.55 9.02239 5.55 9.05H4.55C4.55 9.57467 4.97533 10 5.5 10V9ZM5.45 9.05C5.45 9.02239 5.47239 9 5.5 9V10C6.02467 10 6.45 9.57467 6.45 9.05H5.45ZM5.45 5.45V9.05H6.45V5.45H5.45ZM9.55 4.95H5.95V5.95H9.55V4.95ZM9.5 5C9.5 4.97239 9.52238 4.95 9.55 4.95V5.95C10.0747 5.95 10.5 5.52467 10.5 5H9.5ZM9.55 5.05C9.52239 5.05 9.5 5.02761 9.5 5H10.5C10.5 4.47533 10.0747 4.05 9.55 4.05V5.05ZM5.95 5.05H9.55V4.05H5.95V5.05ZM5.45 0.95V4.55H6.45V0.95H5.45ZM5.5 1C5.47239 1 5.45 0.977615 5.45 0.95H6.45C6.45 0.425329 6.02467 0 5.5 0V1Z", fill: "#6E6E6E" })));
+export const PlusIcon = ({ width = 11, height = 10, viewBox = '0 0 11 10', color = '#6E6E6E', transform, }) => (React.createElement("svg", { width: width, height: height, viewBox: viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", transform: transform },
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.5 0.5C5.25147 0.5 5.05 0.701472 5.05 0.95V4.55H1.45C1.20147 4.55 1 4.75147 1 5C1 5.24853 1.20147 5.45 1.45 5.45H5.05V9.05C5.05 9.29853 5.25147 9.5 5.5 9.5C5.74853 9.5 5.95 9.29853 5.95 9.05V5.45H9.55C9.79853 5.45 10 5.24853 10 5C10 4.75147 9.79853 4.55 9.55 4.55H5.95V0.95C5.95 0.701472 5.74853 0.5 5.5 0.5Z", fill: color }),
+    React.createElement("path", { d: "M5.05 4.55V5.05H5.55V4.55H5.05ZM5.05 5.45H5.55V4.95H5.05V5.45ZM5.95 5.45V4.95H5.45V5.45H5.95ZM5.95 4.55H5.45V5.05H5.95V4.55ZM5.55 0.95C5.55 0.977614 5.52761 1 5.5 1V0C4.97533 0 4.55 0.425329 4.55 0.95H5.55ZM5.55 4.55V0.95H4.55V4.55H5.55ZM1.45 5.05H5.05V4.05H1.45V5.05ZM1.5 5C1.5 5.02761 1.47761 5.05 1.45 5.05V4.05C0.925329 4.05 0.5 4.47533 0.5 5H1.5ZM1.45 4.95C1.47761 4.95 1.5 4.97239 1.5 5H0.5C0.5 5.52467 0.925328 5.95 1.45 5.95V4.95ZM5.05 4.95H1.45V5.95H5.05V4.95ZM5.55 9.05V5.45H4.55V9.05H5.55ZM5.5 9C5.52761 9 5.55 9.02239 5.55 9.05H4.55C4.55 9.57467 4.97533 10 5.5 10V9ZM5.45 9.05C5.45 9.02239 5.47239 9 5.5 9V10C6.02467 10 6.45 9.57467 6.45 9.05H5.45ZM5.45 5.45V9.05H6.45V5.45H5.45ZM9.55 4.95H5.95V5.95H9.55V4.95ZM9.5 5C9.5 4.97239 9.52238 4.95 9.55 4.95V5.95C10.0747 5.95 10.5 5.52467 10.5 5H9.5ZM9.55 5.05C9.52239 5.05 9.5 5.02761 9.5 5H10.5C10.5 4.47533 10.0747 4.05 9.55 4.05V5.05ZM5.95 5.05H9.55V4.05H5.95V5.05ZM5.45 0.95V4.55H6.45V0.95H5.45ZM5.5 1C5.47239 1 5.45 0.977615 5.45 0.95H6.45C6.45 0.425329 6.02467 0 5.5 0V1Z", fill: color })));
 export default PlusIcon;

package/dist/es/index.js

@@ -45,15 +45,20 @@ export * from './components/Inspector';
 export * from './components/InspectorSection';
 export * from './components/Badge';
 export * from './components/NavDropdown';
-export * from './components/SubmissionInspector';
 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 './hooks/use-dropdown';
 export * from './hooks/use-files';
 export { useDeepCompareMemo, useDeepCompareCallback, } from './hooks/use-deep-compare';
 export * from './lib/authors';
 export * from './lib/capabilities';
 export * from './lib/files';
+export * from './lib/comments';
 export { default as errorsDecoder } from './lib/errors-decoder';
 export * from './types';
-export * from './components/LoadingOverlay';
-export * from './components/EditorHeader/EditorHeader';

package/dist/types/components/Comments/index.d.ts

@@ -0,0 +1,5 @@
+export * from './CommentBody';
+export * from './CommentTarget';
+export * from './CommentUser';
+export * from './ResolveButton';
+export * from './CommentWrapper';

package/dist/types/components/DatePicker/CalendarDatePicker.d.ts

@@ -0,0 +1,32 @@
+import 'react-modern-calendar-datepicker/lib/DatePicker.css';
+import React from 'react';
+import { Day, DayValue, RenderInputProps } from 'react-modern-calendar-datepicker';
+declare const calendarGetDay: (date: Date) => {
+    year: number;
+    month: number;
+    day: number;
+};
+declare const calendarPotentialDueDate: (stepDueDate: Date, dueDate: Day, submissionDueDate: Date) => Date;
+declare const calendarDatePickerDefaultDateFormat = "d MMM, EEEE";
+type CalendarDatePickerConfigs = {
+    color?: string;
+    position?: 'auto' | 'top' | 'bottom';
+    calendarClassName?: string;
+    selectedDayClassName?: string;
+};
+type CalendarDialogConfigs = {
+    header?: string;
+    dueDateMessage?: string;
+};
+type CalendarDatePickerProps = {
+    currentDueDate: Date;
+    originalDueDate: Date;
+    handleDateChange: (day: DayValue) => void;
+    datePickerConfigs?: CalendarDatePickerConfigs;
+    dialogConfigs?: CalendarDialogConfigs;
+    Button: React.FC<RenderInputProps>;
+    primaryButtonTitle?: string;
+    secondaryButtonTitle?: string;
+};
+declare const CalendarDatePicker: React.FC<CalendarDatePickerProps>;
+export { Day as CalendarDay, DayValue as CalendarDayValue, RenderInputProps as CalendarRenderInputProps, calendarGetDay, calendarPotentialDueDate, calendarDatePickerDefaultDateFormat, CalendarDatePickerConfigs, CalendarDialogConfigs, CalendarDatePickerProps, CalendarDatePicker, };

package/dist/types/components/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarDatePicker';

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

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Title } from '@manuscripts/title-editor';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 export declare const NavDropdownContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -22,7 +21,6 @@ export declare const NavDropdown: import("styled-components").StyledComponent<"d
     minWidth?: number | undefined;
     top?: number | undefined;
 }, never>;
-export declare const PlaceholderTitle: import("styled-components").StyledComponent<typeof Title, import("styled-components").DefaultTheme, {}, never>;
 export declare const InvitedBy: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const NavDropdownLink: import("styled-components").StyledComponent<typeof NavLink, import("styled-components").DefaultTheme, {
     disabled?: boolean | undefined;

package/dist/types/components/icons/plus-icon.d.ts

@@ -13,5 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const PlusIcon: () => JSX.Element;
+import React from 'react';
+import { IconProps } from './types';
+export declare const PlusIcon: React.FC<IconProps>;
 export default PlusIcon;

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

@@ -20,4 +20,6 @@ export interface IconProps {
     title?: string;
     transform?: string;
     viewBox?: string;
+    width?: number;
+    height?: number;
 }

package/dist/types/index.d.ts

@@ -46,15 +46,20 @@ export * from './components/Inspector';
 export * from './components/InspectorSection';
 export * from './components/Badge';
 export * from './components/NavDropdown';
-export * from './components/SubmissionInspector';
 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 './hooks/use-dropdown';
 export * from './hooks/use-files';
 export { useDeepCompareMemo, useDeepCompareCallback, } from './hooks/use-deep-compare';
 export * from './lib/authors';
 export * from './lib/capabilities';
 export * from './lib/files';
+export * from './lib/comments';
 export { default as errorsDecoder } from './lib/errors-decoder';
 export * from './types';
-export * from './components/LoadingOverlay';
-export * from './components/EditorHeader/EditorHeader';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.4.3",
+  "version": "1.4.5-LEAN-3019",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -36,9 +36,8 @@
     "@formatjs/intl-relativetimeformat": "^4.5.9",
     "@formatjs/intl-utils": "^2.2.0",
     "@manuscripts/assets": "^0.6.2",
-    "@manuscripts/transform": "1.5.2",
-    "@manuscripts/json-schema": "^2.1.2",
-    "@manuscripts/title-editor": "^1.1.0",
+    "@manuscripts/transform": "1.5.4",
+    "@manuscripts/json-schema": "2.2.1",
     "@reach/tabs": "^0.11.2",
     "formik": "^2.2.9",
     "date-fns": "^2.29.3",