@manuscripts/body-editor 3.9.21 → 3.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -32,46 +32,12 @@ var __importStar = (this && this.__importStar) || (function () {
32
32
  return result;
33
33
  };
34
34
  })();
35
- var __importDefault = (this && this.__importDefault) || function (mod) {
36
- return (mod && mod.__esModule) ? mod : { "default": mod };
37
- };
38
35
  Object.defineProperty(exports, "__esModule", { value: true });
39
36
  exports.AffiliationForm = void 0;
40
37
  const style_guide_1 = require("@manuscripts/style-guide");
41
38
  const formik_1 = require("formik");
42
39
  const react_1 = __importStar(require("react"));
43
- const styled_components_1 = __importDefault(require("styled-components"));
44
40
  const ChangeHandlingForm_1 = require("../ChangeHandlingForm");
45
- const AffiliationsTextField = (0, styled_components_1.default)(style_guide_1.TextField) `
46
- border-radius: 0;
47
- background: transparent;
48
- margin-bottom: 4px;
49
- border-radius: ${(props) => props.theme.grid.radius.default};
50
- &[aria-invalid] {
51
- background: ${(props) => props.theme.colors.background.warning};
52
- }
53
-
54
- &[aria-invalid]:focus {
55
- background: transparent;
56
- }
57
- `;
58
- const DepartmentTextField = (0, styled_components_1.default)(style_guide_1.TextArea) `
59
- border-radius: 0;
60
- background: transparent;
61
- margin-bottom: 4px;
62
- min-height: 60px;
63
- border-radius: ${(props) => props.theme.grid.radius.default};
64
- &[aria-invalid] {
65
- background: ${(props) => props.theme.colors.background.warning};
66
- }
67
-
68
- &[aria-invalid]:focus {
69
- background: transparent;
70
- }
71
- `;
72
- const MarginRightTextField = (0, styled_components_1.default)(AffiliationsTextField) `
73
- margin-right: 4px;
74
- `;
75
41
  const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
76
42
  if (actionsRef && !actionsRef.current) {
77
43
  actionsRef.current = {
@@ -89,37 +55,37 @@ const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
89
55
  return errors;
90
56
  };
91
57
  return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
92
- react_1.default.createElement(style_guide_1.FormLabel, null, "Institution*"),
93
58
  react_1.default.createElement(style_guide_1.FormRow, null,
94
59
  react_1.default.createElement(formik_1.Field, { name: "institution" }, (props) => {
95
60
  const hasError = formik.touched.institution && formik.errors.institution;
96
61
  return (react_1.default.createElement(react_1.default.Fragment, null,
97
- react_1.default.createElement(style_guide_1.Label, { htmlFor: "institution" }, "Institution Name"),
98
- react_1.default.createElement(AffiliationsTextField, { id: "institution", ...props.field, error: hasError }),
62
+ react_1.default.createElement(style_guide_1.Label, { htmlFor: "institution" }, "Institution Name*"),
63
+ react_1.default.createElement(style_guide_1.TextField, { id: "institution", ...props.field, error: hasError }),
99
64
  hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, formik.errors.institution))));
100
65
  })),
101
- react_1.default.createElement(style_guide_1.FormLabel, null, "Details"),
102
66
  react_1.default.createElement(style_guide_1.FormRow, null,
103
67
  react_1.default.createElement(formik_1.Field, { name: "department" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
104
68
  react_1.default.createElement(style_guide_1.Label, { htmlFor: "department" }, "Department"),
105
- react_1.default.createElement(DepartmentTextField, { id: "department", ...props.field }))))),
69
+ react_1.default.createElement(style_guide_1.TextField, { id: "department", ...props.field }))))),
106
70
  react_1.default.createElement(style_guide_1.FormRow, null,
107
71
  react_1.default.createElement(formik_1.Field, { name: "addressLine1" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
108
72
  react_1.default.createElement(style_guide_1.Label, { htmlFor: "addressLine1" }, "Street Address"),
109
- react_1.default.createElement(AffiliationsTextField, { id: "addressLine1", ...props.field }))))),
73
+ react_1.default.createElement(style_guide_1.TextField, { id: "addressLine1", ...props.field }))))),
110
74
  react_1.default.createElement(style_guide_1.FormRow, null,
111
75
  react_1.default.createElement(formik_1.Field, { name: "city" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
112
76
  react_1.default.createElement(style_guide_1.Label, { htmlFor: "city" }, "City"),
113
- react_1.default.createElement(MarginRightTextField, { id: "city", ...props.field })))),
77
+ react_1.default.createElement(style_guide_1.TextField, { id: "city", ...props.field }))))),
78
+ react_1.default.createElement(style_guide_1.FormRow, null,
114
79
  react_1.default.createElement(formik_1.Field, { name: "county" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
115
80
  react_1.default.createElement(style_guide_1.Label, { htmlFor: "county" }, "State / Province"),
116
- react_1.default.createElement(AffiliationsTextField, { id: "county", ...props.field }))))),
81
+ react_1.default.createElement(style_guide_1.TextField, { id: "county", ...props.field }))))),
117
82
  react_1.default.createElement(style_guide_1.FormRow, null,
118
83
  react_1.default.createElement(formik_1.Field, { name: "postCode" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
119
84
  react_1.default.createElement(style_guide_1.Label, { htmlFor: "postCode" }, "Postal Code"),
120
- react_1.default.createElement(MarginRightTextField, { id: "postCode", ...props.field })))),
85
+ react_1.default.createElement(style_guide_1.TextField, { id: "postCode", ...props.field }))))),
86
+ react_1.default.createElement(style_guide_1.FormRow, null,
121
87
  react_1.default.createElement(formik_1.Field, { name: "country" }, ({ field }) => (react_1.default.createElement(react_1.default.Fragment, null,
122
88
  react_1.default.createElement(style_guide_1.Label, { htmlFor: "country" }, "Country"),
123
- react_1.default.createElement(AffiliationsTextField, { id: "country", ...field })))))))));
89
+ react_1.default.createElement(style_guide_1.TextField, { id: "country", ...field })))))))));
124
90
  };
125
91
  exports.AffiliationForm = AffiliationForm;
@@ -365,14 +365,21 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, aff
365
365
  react_1.default.createElement(style_guide_1.AddIcon, { width: 18, height: 18 }),
366
366
  react_1.default.createElement(ActionTitle, null, "New Affiliation")),
367
367
  react_1.default.createElement(AffiliationList_1.AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
368
- react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (react_1.default.createElement(AffiliationForms, null,
369
- react_1.default.createElement(ModalFormActions_1.ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
370
- react_1.default.createElement(AffiliationForm_1.AffiliationForm, { values: (0, normalize_1.checkID)(selection, 'affiliation'), onSave: () => handleSaveAffiliation(valuesRef.current), onChange: handleAffiliationChange, actionsRef: actionsRef }),
368
+ react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (react_1.default.createElement(react_1.default.Fragment, null,
369
+ react_1.default.createElement(AffiliationTabs, null,
370
+ react_1.default.createElement(ModalFormActions_1.ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
371
+ react_1.default.createElement(style_guide_1.InspectorTabList, null,
372
+ react_1.default.createElement(style_guide_1.InspectorTab, null, "Details"),
373
+ react_1.default.createElement(style_guide_1.InspectorTab, null, "Authors")),
374
+ react_1.default.createElement(style_guide_1.InspectorTabPanels, null,
375
+ react_1.default.createElement(AffiliationTabPanel, null,
376
+ react_1.default.createElement(AffiliationForm_1.AffiliationForm, { values: (0, normalize_1.checkID)(selection, 'affiliation'), onSave: () => handleSaveAffiliation(valuesRef.current), onChange: handleAffiliationChange, actionsRef: actionsRef })),
377
+ react_1.default.createElement(AffiliationTabPanel, null,
378
+ react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: GenericDrawer_1.GenericDrawer, removeItem: (id) => {
379
+ setSelectedAuthorIds((prev) => prev.filter((authorId) => authorId !== id));
380
+ }, selectedItems: selectedAuthors, onSelect: selectAuthor, items: makeAuthorItems(authors), showDrawer: showAuthorDrawer, setShowDrawer: setShowAuthorDrawer, title: "Authors", cy: "affiliations", labelField: "label", buttonText: "Affiliate Authors", Icon: react_1.default.createElement(style_guide_1.AddUserIcon, { width: 16, height: 16 }) })))),
371
381
  react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleConfirmationCancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "affiliation" }),
372
- react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "affiliation" }),
373
- react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: GenericDrawer_1.GenericDrawer, removeItem: (id) => {
374
- setSelectedAuthorIds((prev) => prev.filter((authorId) => authorId !== id));
375
- }, selectedItems: selectedAuthors, onSelect: selectAuthor, items: makeAuthorItems(authors), showDrawer: showAuthorDrawer, setShowDrawer: setShowAuthorDrawer, title: "Authors", cy: "affiliations", labelField: "label", buttonText: "Affiliate Authors", Icon: react_1.default.createElement(style_guide_1.AddUserIcon, { width: 16, height: 16 }) }))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AffiliationPlaceholderIcon, null) })))),
382
+ react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "affiliation" }))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AffiliationPlaceholderIcon, null) })))),
376
383
  react_1.default.createElement(FormFooter_1.default, { onCancel: handleClose }))));
377
384
  };
378
385
  exports.AffiliationsModal = AffiliationsModal;
@@ -413,11 +420,11 @@ const AddAffiliationButton = styled_components_1.default.div `
413
420
  const ActionTitle = styled_components_1.default.div `
414
421
  padding-left: ${(props) => props.theme.grid.unit * 2}px;
415
422
  `;
416
- const AffiliationForms = styled_components_1.default.div `
417
- padding-left: ${(props) => props.theme.grid.unit * 3}px;
418
- padding-right: ${(props) => props.theme.grid.unit * 3}px;
423
+ const AffiliationTabs = (0, styled_components_1.default)(style_guide_1.InspectorTabs) `
419
424
  position: relative;
420
- margin-top: 20px;
425
+ `;
426
+ const AffiliationTabPanel = (0, styled_components_1.default)(style_guide_1.InspectorTabPanel).attrs({ unmount: false }) `
427
+ margin-top: ${(props) => props.theme.grid.unit * 4}px;
421
428
  `;
422
429
  const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody) `
423
430
  position: relative;
@@ -107,44 +107,43 @@ const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequir
107
107
  };
108
108
  return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: true, innerRef: formRef, validate: validateAuthor }, (formik) => {
109
109
  return (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "author-details-form", formRef: authorFormRef, noValidate: true },
110
- react_1.default.createElement(exports.Fieldset, null,
110
+ react_1.default.createElement(style_guide_1.FormRow, null,
111
+ react_1.default.createElement(formik_1.Field, { name: 'prefix' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
112
+ react_1.default.createElement(style_guide_1.Label, { htmlFor: "prefix" }, "Prefix"),
113
+ react_1.default.createElement(style_guide_1.TextField, { id: 'prefix', ...props.field }))))),
114
+ react_1.default.createElement(style_guide_1.FormRow, null,
115
+ react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.given' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
116
+ react_1.default.createElement(style_guide_1.Label, { htmlFor: "given-name" }, "Given name"),
117
+ react_1.default.createElement(style_guide_1.TextField, { id: 'given-name', ...props.field }))))),
118
+ react_1.default.createElement(style_guide_1.FormRow, null,
119
+ react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.family' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
120
+ react_1.default.createElement(style_guide_1.Label, { htmlFor: "family-name" }, "Family name"),
121
+ react_1.default.createElement(style_guide_1.TextField, { id: 'family-name', ...props.field }))))),
122
+ react_1.default.createElement(style_guide_1.FormRow, null,
123
+ react_1.default.createElement(formik_1.Field, { name: 'role' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
124
+ react_1.default.createElement(style_guide_1.Label, { htmlFor: "role" }, "Job Title"),
125
+ react_1.default.createElement(style_guide_1.TextField, { id: 'role', ...props.field }))))),
126
+ react_1.default.createElement(style_guide_1.FormRow, null,
127
+ react_1.default.createElement(formik_1.Field, { name: 'email', type: 'email' }, (props) => {
128
+ const hasError = (0, formik_1.getIn)(formik.touched, 'email') &&
129
+ (0, formik_1.getIn)(formik.errors, 'email');
130
+ return (react_1.default.createElement(react_1.default.Fragment, null,
131
+ react_1.default.createElement(style_guide_1.Label, { htmlFor: "email" }, isEmailRequired
132
+ ? 'Email address*'
133
+ : 'Email address'),
134
+ react_1.default.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
135
+ hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, (0, formik_1.getIn)(formik.errors, 'email')))));
136
+ })),
137
+ react_1.default.createElement(exports.CheckboxContainer, null,
138
+ react_1.default.createElement(style_guide_1.CheckboxLabel, null,
139
+ react_1.default.createElement(formik_1.Field, { name: 'isCorresponding' }, (props) => (react_1.default.createElement(style_guide_1.CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
140
+ react_1.default.createElement(style_guide_1.LabelText, null, "Corresponding Author"))),
141
+ react_1.default.createElement(OrcidContainer, null,
111
142
  react_1.default.createElement(style_guide_1.FormRow, null,
112
- react_1.default.createElement(formik_1.Field, { name: 'prefix' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
113
- react_1.default.createElement(style_guide_1.Label, { htmlFor: "prefix" }, "Prefix"),
114
- react_1.default.createElement(style_guide_1.TextField, { id: 'prefix', ...props.field }))))),
115
- react_1.default.createElement(style_guide_1.FormRow, null,
116
- react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.given' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
117
- react_1.default.createElement(style_guide_1.Label, { htmlFor: "given-name" }, "Given name"),
118
- react_1.default.createElement(style_guide_1.TextField, { id: 'given-name', ...props.field }))))),
119
- react_1.default.createElement(style_guide_1.FormRow, null,
120
- react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.family' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
121
- react_1.default.createElement(style_guide_1.Label, { htmlFor: "family-name" }, "Family name"),
122
- react_1.default.createElement(style_guide_1.TextField, { id: 'family-name', ...props.field }))))),
123
- react_1.default.createElement(style_guide_1.FormRow, null,
124
- react_1.default.createElement(formik_1.Field, { name: 'email', type: 'email' }, (props) => {
125
- const hasError = (0, formik_1.getIn)(formik.touched, 'email') &&
126
- (0, formik_1.getIn)(formik.errors, 'email');
127
- return (react_1.default.createElement(react_1.default.Fragment, null,
128
- react_1.default.createElement(style_guide_1.Label, { htmlFor: "email" }, isEmailRequired
129
- ? 'Email address (required)'
130
- : 'Email address'),
131
- react_1.default.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
132
- hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, (0, formik_1.getIn)(formik.errors, 'email')))));
133
- })),
134
- react_1.default.createElement(style_guide_1.FormRow, null,
135
- react_1.default.createElement(formik_1.Field, { name: 'role' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
136
- react_1.default.createElement(style_guide_1.Label, { htmlFor: "role" }, "Job Title"),
137
- react_1.default.createElement(style_guide_1.TextField, { id: 'role', ...props.field }))))),
138
- react_1.default.createElement(exports.CheckboxContainer, null,
139
- react_1.default.createElement(style_guide_1.CheckboxLabel, null,
140
- react_1.default.createElement(formik_1.Field, { name: 'isCorresponding' }, (props) => (react_1.default.createElement(style_guide_1.CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
141
- react_1.default.createElement(style_guide_1.LabelText, null, "Corresponding Author"))),
142
- react_1.default.createElement(OrcidContainer, null,
143
- react_1.default.createElement(style_guide_1.FormRow, null,
144
- react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid" }, "ORCID"),
145
- react_1.default.createElement(formik_1.Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
146
- react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
147
- react_1.default.createElement(style_guide_1.TextField, { id: 'orcid', placeholder: 'https://orcid.org/...', pattern: "https://orcid\\.org/\\d{4}-\\d{4}-\\d{4}-\\d{3}[0-9Xx]", title: "Please enter a valid ORCID URL format: https://orcid.org/xxxx-xxxx-xxxx-xxxx", ...props.field })))))))));
143
+ react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid" }, "ORCID"),
144
+ react_1.default.createElement(formik_1.Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
145
+ react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
146
+ react_1.default.createElement(style_guide_1.TextField, { id: 'orcid', placeholder: 'https://orcid.org/...', pattern: "https://orcid\\.org/\\d{4}-\\d{4}-\\d{4}-\\d{3}[0-9Xx]", title: "Please enter a valid ORCID URL format: https://orcid.org/xxxx-xxxx-xxxx-xxxx", ...props.field }))))))));
148
147
  }));
149
148
  };
150
149
  exports.AuthorDetailsForm = AuthorDetailsForm;
@@ -347,21 +347,28 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
347
347
  react_1.default.createElement(style_guide_1.AddIcon, { width: 18, height: 18 }),
348
348
  react_1.default.createElement(ActionTitle, null, "New Author")),
349
349
  react_1.default.createElement(AuthorList_1.AuthorList, { author: selection, authors: authors, onSelect: selectAuthor, onDelete: () => setShowDeleteDialog((prev) => !prev), moveAuthor: moveAuthor, lastSavedAuthor: lastSavedAuthor }))),
350
- react_1.default.createElement(DrawerRelativeParent, null,
351
- react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (react_1.default.createElement(AuthorForms, null,
352
- react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: cancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "author" }),
353
- react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: save, onSecondary: cancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "author" }),
350
+ react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (react_1.default.createElement(react_1.default.Fragment, null,
351
+ react_1.default.createElement(AuthorTabs, null,
354
352
  react_1.default.createElement(ModalFormActions_1.ModalFormActions, { form: 'author-details-form', type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev), newEntity: newAuthor ||
355
353
  (isCreatingNewAuthor &&
356
354
  !showConfirmationDialog &&
357
355
  !showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
358
- react_1.default.createElement(style_guide_1.FormLabel, null, "Details"),
359
- react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: (0, normalize_1.normalizeAuthor)(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles }),
360
- react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: AffiliationDrawer_1.AffiliationsDrawer, removeItem: removeAffiliation, selectedItems: selectedAffiliations, onSelect: selectAffiliation, items: affiliations, showDrawer: showAffiliationDrawer, setShowDrawer: setShowAffiliationDrawer, title: "Affiliations", buttonText: "Assign Institutions", cy: "affiliations", labelField: "institution", Icon: react_1.default.createElement(style_guide_1.AddInstitutionIcon, { width: 16, height: 16 }) }),
361
- react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: CreditDrawer_1.CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
362
- id: r.vocabTerm,
363
- ...r,
364
- })), onSelect: selectCreditRole, items: vocabTermItems, showDrawer: showCreditDrawer, setShowDrawer: setShowCreditDrawer, title: "Contributions (Credit)", buttonText: "Assign Credit Roles", cy: "credit-taxnonomy", labelField: "vocabTerm", Icon: react_1.default.createElement(style_guide_1.AddRoleIcon, { width: 16, height: 16 }) }))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AuthorPlaceholderIcon, null) }))))),
356
+ react_1.default.createElement(style_guide_1.InspectorTabList, null,
357
+ react_1.default.createElement(style_guide_1.InspectorTab, null, "Details"),
358
+ react_1.default.createElement(style_guide_1.InspectorTab, null, "Affiliations"),
359
+ react_1.default.createElement(style_guide_1.InspectorTab, null, "Contributions (CRediT)")),
360
+ react_1.default.createElement(style_guide_1.InspectorTabPanels, null,
361
+ react_1.default.createElement(AuthorTabPanel, null,
362
+ react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: (0, normalize_1.normalizeAuthor)(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles })),
363
+ react_1.default.createElement(AuthorTabPanel, null,
364
+ react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: AffiliationDrawer_1.AffiliationsDrawer, removeItem: removeAffiliation, selectedItems: selectedAffiliations, onSelect: selectAffiliation, items: affiliations, showDrawer: showAffiliationDrawer, setShowDrawer: setShowAffiliationDrawer, title: "Affiliations", buttonText: "Assign Institutions", cy: "affiliations", labelField: "institution", Icon: react_1.default.createElement(style_guide_1.AddInstitutionIcon, { width: 16, height: 16 }) })),
365
+ react_1.default.createElement(AuthorTabPanel, null,
366
+ react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: CreditDrawer_1.CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
367
+ id: r.vocabTerm,
368
+ ...r,
369
+ })), onSelect: selectCreditRole, items: vocabTermItems, showDrawer: showCreditDrawer, setShowDrawer: setShowCreditDrawer, title: "Contributions (CRediT)", buttonText: "Assign Roles", cy: "credit-taxnonomy", labelField: "vocabTerm", Icon: react_1.default.createElement(style_guide_1.AddRoleIcon, { width: 16, height: 16 }) })))),
370
+ react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: cancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "author" }),
371
+ react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: save, onSecondary: cancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "author" }))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AuthorPlaceholderIcon, null) })))),
365
372
  react_1.default.createElement(FormFooter_1.default, { onCancel: close }))));
366
373
  };
367
374
  exports.AuthorsModal = AuthorsModal;
@@ -398,10 +405,11 @@ const AddAuthorButton = styled_components_1.default.div `
398
405
  const ActionTitle = styled_components_1.default.div `
399
406
  padding-left: ${(props) => props.theme.grid.unit * 2}px;
400
407
  `;
401
- const AuthorForms = styled_components_1.default.div `
402
- padding-left: ${(props) => props.theme.grid.unit * 3}px;
403
- padding-right: ${(props) => props.theme.grid.unit * 3}px;
404
- margin-top: 20px;
408
+ const AuthorTabs = (0, styled_components_1.default)(style_guide_1.InspectorTabs) `
409
+ position: relative;
410
+ `;
411
+ const AuthorTabPanel = (0, styled_components_1.default)(style_guide_1.InspectorTabPanel).attrs({ unmount: false }) `
412
+ margin-top: ${(props) => props.theme.grid.unit * 4}px;
405
413
  `;
406
414
  const StyledSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
407
415
  padding: 0;
@@ -413,6 +421,3 @@ const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody
413
421
  const StyledModalSidebarHeader = (0, styled_components_1.default)(style_guide_1.ModalSidebarHeader) `
414
422
  margin-bottom: 16px;
415
423
  `;
416
- const DrawerRelativeParent = styled_components_1.default.div `
417
- position: relative;
418
- `;
@@ -23,15 +23,7 @@ const TwoColumnContainer = (0, styled_components_1.default)(style_guide_1.Drawer
23
23
  flex-flow: row wrap;
24
24
  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
25
25
  position: relative;
26
-
27
- &:after {
28
- content: '';
29
- display: block;
30
- border-bottom: 1px solid #f0f0f0;
31
- min-width: 100%;
32
- padding-top: 16px;
33
- }
34
26
  `;
35
27
  const TwoColumnCheckbox = (0, styled_components_1.default)(AuthorDetailsForm_1.CheckboxContainer) `
36
- flex 1 0 50%;
28
+ flex: 1 0 50%;
37
29
  `;
@@ -10,6 +10,9 @@ const styled_components_1 = __importDefault(require("styled-components"));
10
10
  const ConfirmationDialog_1 = require("../dialog/ConfirmationDialog");
11
11
  const ActionsContainer = styled_components_1.default.div `
12
12
  display: flex;
13
+ position: absolute;
14
+ top: 5px;
15
+ right: 5px;
13
16
  `;
14
17
  const StyledButtonGroup = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
15
18
  flex: 1;
@@ -18,34 +18,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
18
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
- exports.DrawerSection = exports.DrawerSectionHeader = exports.AssignButton = void 0;
21
+ exports.AssignButton = void 0;
22
22
  exports.DrawerGroup = DrawerGroup;
23
23
  const style_guide_1 = require("@manuscripts/style-guide");
24
24
  const react_1 = __importDefault(require("react"));
25
25
  const styled_components_1 = __importDefault(require("styled-components"));
26
26
  function DrawerGroup({ removeItem, selectedItems, onSelect, items, showDrawer, setShowDrawer, title, labelField, Drawer, cy, Icon, buttonText, }) {
27
27
  return (react_1.default.createElement(react_1.default.Fragment, null,
28
- react_1.default.createElement(exports.DrawerSection, null,
29
- react_1.default.createElement(exports.DrawerSectionHeader, null,
30
- react_1.default.createElement(DrawerSectionTitle, null, title),
31
- react_1.default.createElement(exports.AssignButton, { onClick: () => setShowDrawer(true), "data-cy": cy + 'assign-button' },
32
- Icon,
33
- buttonText)),
34
- react_1.default.createElement(style_guide_1.SelectedItemsBox, { "data-cy": cy + '-selected-items', items: selectedItems.map((i) => ({
35
- id: String(i.id),
36
- label: String(i[labelField] ?? ''),
37
- })), onRemove: removeItem, placeholder: `No ${title.endsWith('s') ? title : title + 's'} assigned` })),
28
+ react_1.default.createElement(exports.AssignButton, { onClick: () => setShowDrawer(true), "data-cy": cy + 'assign-button' },
29
+ Icon,
30
+ buttonText),
31
+ react_1.default.createElement(style_guide_1.SelectedItemsBox, { "data-cy": cy + '-selected-items', items: selectedItems.map((i) => ({
32
+ id: String(i.id),
33
+ label: String(i[labelField] ?? ''),
34
+ })), onRemove: removeItem, placeholder: `No ${title} assigned` }),
38
35
  showDrawer && (react_1.default.createElement(Drawer, { items: items, selectedItems: selectedItems, title: title, onSelect: onSelect, onBack: () => setShowDrawer(false), width: "100%" }))));
39
36
  }
40
- const DrawerSectionTitle = styled_components_1.default.h3 `
41
- margin: 0;
42
- padding-bottom: 12px;
43
- font: ${(props) => props.theme.font.weight.normal}
44
- ${(props) => props.theme.font.size.xlarge} /
45
- ${(props) => props.theme.font.lineHeight.large}
46
- ${(props) => props.theme.font.family.sans};
47
- color: ${(props) => props.theme.colors.text.secondary};
48
- `;
49
37
  exports.AssignButton = styled_components_1.default.button `
50
38
  color: ${(props) => props.theme.colors.brand.default};
51
39
  background: none;
@@ -58,20 +46,8 @@ exports.AssignButton = styled_components_1.default.button `
58
46
  display: flex;
59
47
  align-items: center;
60
48
  gap: 4px;
61
- margin-top: ${(props) => props.theme.grid.unit * 2}px;
49
+ margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
62
50
  &:hover {
63
51
  opacity: 0.8;
64
52
  }
65
53
  `;
66
- exports.DrawerSectionHeader = styled_components_1.default.div `
67
- display: flex;
68
- justify-content: space-between;
69
- align-items: flex-start;
70
- flex-direction: column;
71
- margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
72
- `;
73
- exports.DrawerSection = styled_components_1.default.div `
74
- margin-top: ${(props) => props.theme.grid.unit * 4}px;
75
- padding-top: ${(props) => props.theme.grid.unit * 4}px;
76
- border-top: 1px solid ${(props) => props.theme.colors.border.tertiary};
77
- `;
@@ -1,5 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.MATHJAX_VERSION = exports.VERSION = void 0;
4
- exports.VERSION = '3.9.21';
4
+ exports.VERSION = '3.10.0';
5
5
  exports.MATHJAX_VERSION = '3.2.2';
@@ -1,38 +1,7 @@
1
- import { FormLabel, FormRow, InputErrorText, Label, TextArea, TextField, } from '@manuscripts/style-guide';
1
+ import { FormRow, InputErrorText, Label, TextField, } from '@manuscripts/style-guide';
2
2
  import { Field, Formik } from 'formik';
3
3
  import React, { useRef } from 'react';
4
- import styled from 'styled-components';
5
4
  import { ChangeHandlingForm } from '../ChangeHandlingForm';
6
- const AffiliationsTextField = styled(TextField) `
7
- border-radius: 0;
8
- background: transparent;
9
- margin-bottom: 4px;
10
- border-radius: ${(props) => props.theme.grid.radius.default};
11
- &[aria-invalid] {
12
- background: ${(props) => props.theme.colors.background.warning};
13
- }
14
-
15
- &[aria-invalid]:focus {
16
- background: transparent;
17
- }
18
- `;
19
- const DepartmentTextField = styled(TextArea) `
20
- border-radius: 0;
21
- background: transparent;
22
- margin-bottom: 4px;
23
- min-height: 60px;
24
- border-radius: ${(props) => props.theme.grid.radius.default};
25
- &[aria-invalid] {
26
- background: ${(props) => props.theme.colors.background.warning};
27
- }
28
-
29
- &[aria-invalid]:focus {
30
- background: transparent;
31
- }
32
- `;
33
- const MarginRightTextField = styled(AffiliationsTextField) `
34
- margin-right: 4px;
35
- `;
36
5
  export const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
37
6
  if (actionsRef && !actionsRef.current) {
38
7
  actionsRef.current = {
@@ -50,36 +19,36 @@ export const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
50
19
  return errors;
51
20
  };
52
21
  return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
53
- React.createElement(FormLabel, null, "Institution*"),
54
22
  React.createElement(FormRow, null,
55
23
  React.createElement(Field, { name: "institution" }, (props) => {
56
24
  const hasError = formik.touched.institution && formik.errors.institution;
57
25
  return (React.createElement(React.Fragment, null,
58
- React.createElement(Label, { htmlFor: "institution" }, "Institution Name"),
59
- React.createElement(AffiliationsTextField, { id: "institution", ...props.field, error: hasError }),
26
+ React.createElement(Label, { htmlFor: "institution" }, "Institution Name*"),
27
+ React.createElement(TextField, { id: "institution", ...props.field, error: hasError }),
60
28
  hasError && (React.createElement(InputErrorText, null, formik.errors.institution))));
61
29
  })),
62
- React.createElement(FormLabel, null, "Details"),
63
30
  React.createElement(FormRow, null,
64
31
  React.createElement(Field, { name: "department" }, (props) => (React.createElement(React.Fragment, null,
65
32
  React.createElement(Label, { htmlFor: "department" }, "Department"),
66
- React.createElement(DepartmentTextField, { id: "department", ...props.field }))))),
33
+ React.createElement(TextField, { id: "department", ...props.field }))))),
67
34
  React.createElement(FormRow, null,
68
35
  React.createElement(Field, { name: "addressLine1" }, (props) => (React.createElement(React.Fragment, null,
69
36
  React.createElement(Label, { htmlFor: "addressLine1" }, "Street Address"),
70
- React.createElement(AffiliationsTextField, { id: "addressLine1", ...props.field }))))),
37
+ React.createElement(TextField, { id: "addressLine1", ...props.field }))))),
71
38
  React.createElement(FormRow, null,
72
39
  React.createElement(Field, { name: "city" }, (props) => (React.createElement(React.Fragment, null,
73
40
  React.createElement(Label, { htmlFor: "city" }, "City"),
74
- React.createElement(MarginRightTextField, { id: "city", ...props.field })))),
41
+ React.createElement(TextField, { id: "city", ...props.field }))))),
42
+ React.createElement(FormRow, null,
75
43
  React.createElement(Field, { name: "county" }, (props) => (React.createElement(React.Fragment, null,
76
44
  React.createElement(Label, { htmlFor: "county" }, "State / Province"),
77
- React.createElement(AffiliationsTextField, { id: "county", ...props.field }))))),
45
+ React.createElement(TextField, { id: "county", ...props.field }))))),
78
46
  React.createElement(FormRow, null,
79
47
  React.createElement(Field, { name: "postCode" }, (props) => (React.createElement(React.Fragment, null,
80
48
  React.createElement(Label, { htmlFor: "postCode" }, "Postal Code"),
81
- React.createElement(MarginRightTextField, { id: "postCode", ...props.field })))),
49
+ React.createElement(TextField, { id: "postCode", ...props.field }))))),
50
+ React.createElement(FormRow, null,
82
51
  React.createElement(Field, { name: "country" }, ({ field }) => (React.createElement(React.Fragment, null,
83
52
  React.createElement(Label, { htmlFor: "country" }, "Country"),
84
- React.createElement(AffiliationsTextField, { id: "country", ...field })))))))));
53
+ React.createElement(TextField, { id: "country", ...field })))))))));
85
54
  };
@@ -1,4 +1,4 @@
1
- import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
1
+ import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
2
2
  import { generateNodeID, schema } from '@manuscripts/transform';
3
3
  import { isEqual } from 'lodash';
4
4
  import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
@@ -326,14 +326,21 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
326
326
  React.createElement(AddIcon, { width: 18, height: 18 }),
327
327
  React.createElement(ActionTitle, null, "New Affiliation")),
328
328
  React.createElement(AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
329
- React.createElement(ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (React.createElement(AffiliationForms, null,
330
- React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
331
- React.createElement(AffiliationForm, { values: checkID(selection, 'affiliation'), onSave: () => handleSaveAffiliation(valuesRef.current), onChange: handleAffiliationChange, actionsRef: actionsRef }),
329
+ React.createElement(ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (React.createElement(React.Fragment, null,
330
+ React.createElement(AffiliationTabs, null,
331
+ React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
332
+ React.createElement(InspectorTabList, null,
333
+ React.createElement(InspectorTab, null, "Details"),
334
+ React.createElement(InspectorTab, null, "Authors")),
335
+ React.createElement(InspectorTabPanels, null,
336
+ React.createElement(AffiliationTabPanel, null,
337
+ React.createElement(AffiliationForm, { values: checkID(selection, 'affiliation'), onSave: () => handleSaveAffiliation(valuesRef.current), onChange: handleAffiliationChange, actionsRef: actionsRef })),
338
+ React.createElement(AffiliationTabPanel, null,
339
+ React.createElement(DrawerGroup, { Drawer: GenericDrawer, removeItem: (id) => {
340
+ setSelectedAuthorIds((prev) => prev.filter((authorId) => authorId !== id));
341
+ }, selectedItems: selectedAuthors, onSelect: selectAuthor, items: makeAuthorItems(authors), showDrawer: showAuthorDrawer, setShowDrawer: setShowAuthorDrawer, title: "Authors", cy: "affiliations", labelField: "label", buttonText: "Affiliate Authors", Icon: React.createElement(AddUserIcon, { width: 16, height: 16 }) })))),
332
342
  React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleConfirmationCancel, type: DialogType.REQUIRED, entityType: "affiliation" }),
333
- React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: DialogType.SAVE, entityType: "affiliation" }),
334
- React.createElement(DrawerGroup, { Drawer: GenericDrawer, removeItem: (id) => {
335
- setSelectedAuthorIds((prev) => prev.filter((authorId) => authorId !== id));
336
- }, selectedItems: selectedAuthors, onSelect: selectAuthor, items: makeAuthorItems(authors), showDrawer: showAuthorDrawer, setShowDrawer: setShowAuthorDrawer, title: "Authors", cy: "affiliations", labelField: "label", buttonText: "Affiliate Authors", Icon: React.createElement(AddUserIcon, { width: 16, height: 16 }) }))) : (React.createElement(FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: React.createElement(AffiliationPlaceholderIcon, null) })))),
343
+ React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: DialogType.SAVE, entityType: "affiliation" }))) : (React.createElement(FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: React.createElement(AffiliationPlaceholderIcon, null) })))),
337
344
  React.createElement(FormFooter, { onCancel: handleClose }))));
338
345
  };
339
346
  function createEmptyAffiliation(priority) {
@@ -373,11 +380,11 @@ const AddAffiliationButton = styled.div `
373
380
  const ActionTitle = styled.div `
374
381
  padding-left: ${(props) => props.theme.grid.unit * 2}px;
375
382
  `;
376
- const AffiliationForms = styled.div `
377
- padding-left: ${(props) => props.theme.grid.unit * 3}px;
378
- padding-right: ${(props) => props.theme.grid.unit * 3}px;
383
+ const AffiliationTabs = styled(InspectorTabs) `
379
384
  position: relative;
380
- margin-top: 20px;
385
+ `;
386
+ const AffiliationTabPanel = styled(InspectorTabPanel).attrs({ unmount: false }) `
387
+ margin-top: ${(props) => props.theme.grid.unit * 4}px;
381
388
  `;
382
389
  const StyledModalBody = styled(ModalBody) `
383
390
  position: relative;
@@ -68,43 +68,42 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
68
68
  };
69
69
  return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: true, innerRef: formRef, validate: validateAuthor }, (formik) => {
70
70
  return (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "author-details-form", formRef: authorFormRef, noValidate: true },
71
- React.createElement(Fieldset, null,
71
+ React.createElement(FormRow, null,
72
+ React.createElement(Field, { name: 'prefix' }, (props) => (React.createElement(React.Fragment, null,
73
+ React.createElement(Label, { htmlFor: "prefix" }, "Prefix"),
74
+ React.createElement(TextField, { id: 'prefix', ...props.field }))))),
75
+ React.createElement(FormRow, null,
76
+ React.createElement(Field, { name: 'bibliographicName.given' }, (props) => (React.createElement(React.Fragment, null,
77
+ React.createElement(Label, { htmlFor: "given-name" }, "Given name"),
78
+ React.createElement(TextField, { id: 'given-name', ...props.field }))))),
79
+ React.createElement(FormRow, null,
80
+ React.createElement(Field, { name: 'bibliographicName.family' }, (props) => (React.createElement(React.Fragment, null,
81
+ React.createElement(Label, { htmlFor: "family-name" }, "Family name"),
82
+ React.createElement(TextField, { id: 'family-name', ...props.field }))))),
83
+ React.createElement(FormRow, null,
84
+ React.createElement(Field, { name: 'role' }, (props) => (React.createElement(React.Fragment, null,
85
+ React.createElement(Label, { htmlFor: "role" }, "Job Title"),
86
+ React.createElement(TextField, { id: 'role', ...props.field }))))),
87
+ React.createElement(FormRow, null,
88
+ React.createElement(Field, { name: 'email', type: 'email' }, (props) => {
89
+ const hasError = getIn(formik.touched, 'email') &&
90
+ getIn(formik.errors, 'email');
91
+ return (React.createElement(React.Fragment, null,
92
+ React.createElement(Label, { htmlFor: "email" }, isEmailRequired
93
+ ? 'Email address*'
94
+ : 'Email address'),
95
+ React.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
96
+ hasError && (React.createElement(InputErrorText, null, getIn(formik.errors, 'email')))));
97
+ })),
98
+ React.createElement(CheckboxContainer, null,
99
+ React.createElement(CheckboxLabel, null,
100
+ React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
101
+ React.createElement(LabelText, null, "Corresponding Author"))),
102
+ React.createElement(OrcidContainer, null,
72
103
  React.createElement(FormRow, null,
73
- React.createElement(Field, { name: 'prefix' }, (props) => (React.createElement(React.Fragment, null,
74
- React.createElement(Label, { htmlFor: "prefix" }, "Prefix"),
75
- React.createElement(TextField, { id: 'prefix', ...props.field }))))),
76
- React.createElement(FormRow, null,
77
- React.createElement(Field, { name: 'bibliographicName.given' }, (props) => (React.createElement(React.Fragment, null,
78
- React.createElement(Label, { htmlFor: "given-name" }, "Given name"),
79
- React.createElement(TextField, { id: 'given-name', ...props.field }))))),
80
- React.createElement(FormRow, null,
81
- React.createElement(Field, { name: 'bibliographicName.family' }, (props) => (React.createElement(React.Fragment, null,
82
- React.createElement(Label, { htmlFor: "family-name" }, "Family name"),
83
- React.createElement(TextField, { id: 'family-name', ...props.field }))))),
84
- React.createElement(FormRow, null,
85
- React.createElement(Field, { name: 'email', type: 'email' }, (props) => {
86
- const hasError = getIn(formik.touched, 'email') &&
87
- getIn(formik.errors, 'email');
88
- return (React.createElement(React.Fragment, null,
89
- React.createElement(Label, { htmlFor: "email" }, isEmailRequired
90
- ? 'Email address (required)'
91
- : 'Email address'),
92
- React.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
93
- hasError && (React.createElement(InputErrorText, null, getIn(formik.errors, 'email')))));
94
- })),
95
- React.createElement(FormRow, null,
96
- React.createElement(Field, { name: 'role' }, (props) => (React.createElement(React.Fragment, null,
97
- React.createElement(Label, { htmlFor: "role" }, "Job Title"),
98
- React.createElement(TextField, { id: 'role', ...props.field }))))),
99
- React.createElement(CheckboxContainer, null,
100
- React.createElement(CheckboxLabel, null,
101
- React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
102
- React.createElement(LabelText, null, "Corresponding Author"))),
103
- React.createElement(OrcidContainer, null,
104
- React.createElement(FormRow, null,
105
- React.createElement(Label, { htmlFor: "orcid" }, "ORCID"),
106
- React.createElement(Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (React.createElement(React.Fragment, null,
107
- React.createElement(Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
108
- React.createElement(TextField, { id: 'orcid', placeholder: 'https://orcid.org/...', pattern: "https://orcid\\.org/\\d{4}-\\d{4}-\\d{4}-\\d{3}[0-9Xx]", title: "Please enter a valid ORCID URL format: https://orcid.org/xxxx-xxxx-xxxx-xxxx", ...props.field })))))))));
104
+ React.createElement(Label, { htmlFor: "orcid" }, "ORCID"),
105
+ React.createElement(Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (React.createElement(React.Fragment, null,
106
+ React.createElement(Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
107
+ React.createElement(TextField, { id: 'orcid', placeholder: 'https://orcid.org/...', pattern: "https://orcid\\.org/\\d{4}-\\d{4}-\\d{4}-\\d{3}[0-9Xx]", title: "Please enter a valid ORCID URL format: https://orcid.org/xxxx-xxxx-xxxx-xxxx", ...props.field }))))))));
109
108
  }));
110
109
  };
@@ -14,7 +14,7 @@
14
14
  * limitations under the License.
15
15
  */
16
16
  import { buildBibliographicName, } from '@manuscripts/json-schema';
17
- import { AddIcon, AddInstitutionIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, FormLabel, } from '@manuscripts/style-guide';
17
+ import { AddIcon, AddInstitutionIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, InspectorTabs, InspectorTabPanel, InspectorTabList, InspectorTab, InspectorTabPanels, } from '@manuscripts/style-guide';
18
18
  import { generateNodeID, schema } from '@manuscripts/transform';
19
19
  import { cloneDeep, isEqual, omit } from 'lodash';
20
20
  import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
@@ -308,21 +308,28 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
308
308
  React.createElement(AddIcon, { width: 18, height: 18 }),
309
309
  React.createElement(ActionTitle, null, "New Author")),
310
310
  React.createElement(AuthorList, { author: selection, authors: authors, onSelect: selectAuthor, onDelete: () => setShowDeleteDialog((prev) => !prev), moveAuthor: moveAuthor, lastSavedAuthor: lastSavedAuthor }))),
311
- React.createElement(DrawerRelativeParent, null,
312
- React.createElement(ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (React.createElement(AuthorForms, null,
313
- React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: cancel, type: DialogType.REQUIRED, entityType: "author" }),
314
- React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: save, onSecondary: cancel, type: DialogType.SAVE, entityType: "author" }),
311
+ React.createElement(ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (React.createElement(React.Fragment, null,
312
+ React.createElement(AuthorTabs, null,
315
313
  React.createElement(ModalFormActions, { form: 'author-details-form', type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev), newEntity: newAuthor ||
316
314
  (isCreatingNewAuthor &&
317
315
  !showConfirmationDialog &&
318
316
  !showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
319
- React.createElement(FormLabel, null, "Details"),
320
- React.createElement(AuthorDetailsForm, { values: normalizeAuthor(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles }),
321
- React.createElement(DrawerGroup, { Drawer: AffiliationsDrawer, removeItem: removeAffiliation, selectedItems: selectedAffiliations, onSelect: selectAffiliation, items: affiliations, showDrawer: showAffiliationDrawer, setShowDrawer: setShowAffiliationDrawer, title: "Affiliations", buttonText: "Assign Institutions", cy: "affiliations", labelField: "institution", Icon: React.createElement(AddInstitutionIcon, { width: 16, height: 16 }) }),
322
- React.createElement(DrawerGroup, { Drawer: CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
323
- id: r.vocabTerm,
324
- ...r,
325
- })), onSelect: selectCreditRole, items: vocabTermItems, showDrawer: showCreditDrawer, setShowDrawer: setShowCreditDrawer, title: "Contributions (Credit)", buttonText: "Assign Credit Roles", cy: "credit-taxnonomy", labelField: "vocabTerm", Icon: React.createElement(AddRoleIcon, { width: 16, height: 16 }) }))) : (React.createElement(FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: React.createElement(AuthorPlaceholderIcon, null) }))))),
317
+ React.createElement(InspectorTabList, null,
318
+ React.createElement(InspectorTab, null, "Details"),
319
+ React.createElement(InspectorTab, null, "Affiliations"),
320
+ React.createElement(InspectorTab, null, "Contributions (CRediT)")),
321
+ React.createElement(InspectorTabPanels, null,
322
+ React.createElement(AuthorTabPanel, null,
323
+ React.createElement(AuthorDetailsForm, { values: normalizeAuthor(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles })),
324
+ React.createElement(AuthorTabPanel, null,
325
+ React.createElement(DrawerGroup, { Drawer: AffiliationsDrawer, removeItem: removeAffiliation, selectedItems: selectedAffiliations, onSelect: selectAffiliation, items: affiliations, showDrawer: showAffiliationDrawer, setShowDrawer: setShowAffiliationDrawer, title: "Affiliations", buttonText: "Assign Institutions", cy: "affiliations", labelField: "institution", Icon: React.createElement(AddInstitutionIcon, { width: 16, height: 16 }) })),
326
+ React.createElement(AuthorTabPanel, null,
327
+ React.createElement(DrawerGroup, { Drawer: CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
328
+ id: r.vocabTerm,
329
+ ...r,
330
+ })), onSelect: selectCreditRole, items: vocabTermItems, showDrawer: showCreditDrawer, setShowDrawer: setShowCreditDrawer, title: "Contributions (CRediT)", buttonText: "Assign Roles", cy: "credit-taxnonomy", labelField: "vocabTerm", Icon: React.createElement(AddRoleIcon, { width: 16, height: 16 }) })))),
331
+ React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: cancel, type: DialogType.REQUIRED, entityType: "author" }),
332
+ React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: save, onSecondary: cancel, type: DialogType.SAVE, entityType: "author" }))) : (React.createElement(FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: React.createElement(AuthorPlaceholderIcon, null) })))),
326
333
  React.createElement(FormFooter, { onCancel: close }))));
327
334
  };
328
335
  function createEmptyAuthor(name, priority) {
@@ -358,10 +365,11 @@ const AddAuthorButton = styled.div `
358
365
  const ActionTitle = styled.div `
359
366
  padding-left: ${(props) => props.theme.grid.unit * 2}px;
360
367
  `;
361
- const AuthorForms = styled.div `
362
- padding-left: ${(props) => props.theme.grid.unit * 3}px;
363
- padding-right: ${(props) => props.theme.grid.unit * 3}px;
364
- margin-top: 20px;
368
+ const AuthorTabs = styled(InspectorTabs) `
369
+ position: relative;
370
+ `;
371
+ const AuthorTabPanel = styled(InspectorTabPanel).attrs({ unmount: false }) `
372
+ margin-top: ${(props) => props.theme.grid.unit * 4}px;
365
373
  `;
366
374
  const StyledSidebarContent = styled(SidebarContent) `
367
375
  padding: 0;
@@ -373,6 +381,3 @@ const StyledModalBody = styled(ModalBody) `
373
381
  const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
374
382
  margin-bottom: 16px;
375
383
  `;
376
- const DrawerRelativeParent = styled.div `
377
- position: relative;
378
- `;
@@ -16,15 +16,7 @@ const TwoColumnContainer = styled(DrawerItemsList) `
16
16
  flex-flow: row wrap;
17
17
  padding: 0 ${(props) => props.theme.grid.unit * 4}px;
18
18
  position: relative;
19
-
20
- &:after {
21
- content: '';
22
- display: block;
23
- border-bottom: 1px solid #f0f0f0;
24
- min-width: 100%;
25
- padding-top: 16px;
26
- }
27
19
  `;
28
20
  const TwoColumnCheckbox = styled(CheckboxContainer) `
29
- flex 1 0 50%;
21
+ flex: 1 0 50%;
30
22
  `;
@@ -4,6 +4,9 @@ import styled from 'styled-components';
4
4
  import { ConfirmationDialog, DialogType } from '../dialog/ConfirmationDialog';
5
5
  const ActionsContainer = styled.div `
6
6
  display: flex;
7
+ position: absolute;
8
+ top: 5px;
9
+ right: 5px;
7
10
  `;
8
11
  const StyledButtonGroup = styled(ButtonGroup) `
9
12
  flex: 1;
@@ -18,27 +18,15 @@ import React from 'react';
18
18
  import styled from 'styled-components';
19
19
  export function DrawerGroup({ removeItem, selectedItems, onSelect, items, showDrawer, setShowDrawer, title, labelField, Drawer, cy, Icon, buttonText, }) {
20
20
  return (React.createElement(React.Fragment, null,
21
- React.createElement(DrawerSection, null,
22
- React.createElement(DrawerSectionHeader, null,
23
- React.createElement(DrawerSectionTitle, null, title),
24
- React.createElement(AssignButton, { onClick: () => setShowDrawer(true), "data-cy": cy + 'assign-button' },
25
- Icon,
26
- buttonText)),
27
- React.createElement(SelectedItemsBox, { "data-cy": cy + '-selected-items', items: selectedItems.map((i) => ({
28
- id: String(i.id),
29
- label: String(i[labelField] ?? ''),
30
- })), onRemove: removeItem, placeholder: `No ${title.endsWith('s') ? title : title + 's'} assigned` })),
21
+ React.createElement(AssignButton, { onClick: () => setShowDrawer(true), "data-cy": cy + 'assign-button' },
22
+ Icon,
23
+ buttonText),
24
+ React.createElement(SelectedItemsBox, { "data-cy": cy + '-selected-items', items: selectedItems.map((i) => ({
25
+ id: String(i.id),
26
+ label: String(i[labelField] ?? ''),
27
+ })), onRemove: removeItem, placeholder: `No ${title} assigned` }),
31
28
  showDrawer && (React.createElement(Drawer, { items: items, selectedItems: selectedItems, title: title, onSelect: onSelect, onBack: () => setShowDrawer(false), width: "100%" }))));
32
29
  }
33
- const DrawerSectionTitle = styled.h3 `
34
- margin: 0;
35
- padding-bottom: 12px;
36
- font: ${(props) => props.theme.font.weight.normal}
37
- ${(props) => props.theme.font.size.xlarge} /
38
- ${(props) => props.theme.font.lineHeight.large}
39
- ${(props) => props.theme.font.family.sans};
40
- color: ${(props) => props.theme.colors.text.secondary};
41
- `;
42
30
  export const AssignButton = styled.button `
43
31
  color: ${(props) => props.theme.colors.brand.default};
44
32
  background: none;
@@ -51,20 +39,8 @@ export const AssignButton = styled.button `
51
39
  display: flex;
52
40
  align-items: center;
53
41
  gap: 4px;
54
- margin-top: ${(props) => props.theme.grid.unit * 2}px;
42
+ margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
55
43
  &:hover {
56
44
  opacity: 0.8;
57
45
  }
58
46
  `;
59
- export const DrawerSectionHeader = styled.div `
60
- display: flex;
61
- justify-content: space-between;
62
- align-items: flex-start;
63
- flex-direction: column;
64
- margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
65
- `;
66
- export const DrawerSection = styled.div `
67
- margin-top: ${(props) => props.theme.grid.unit * 4}px;
68
- padding-top: ${(props) => props.theme.grid.unit * 4}px;
69
- border-top: 1px solid ${(props) => props.theme.colors.border.tertiary};
70
- `;
@@ -1,2 +1,2 @@
1
- export const VERSION = '3.9.21';
1
+ export const VERSION = '3.10.0';
2
2
  export const MATHJAX_VERSION = '3.2.2';
@@ -40,6 +40,4 @@ interface EmbeddedDrawerProps<T extends Base> {
40
40
  }
41
41
  export declare function DrawerGroup<T extends Base>({ removeItem, selectedItems, onSelect, items, showDrawer, setShowDrawer, title, labelField, Drawer, cy, Icon, buttonText, }: DrawerGroupProps<T>): React.JSX.Element;
42
42
  export declare const AssignButton: import("styled-components").StyledComponent<"button", any, {}, never>;
43
- export declare const DrawerSectionHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
44
- export declare const DrawerSection: import("styled-components").StyledComponent<"div", any, {}, never>;
45
43
  export {};
@@ -1,2 +1,2 @@
1
- export declare const VERSION = "3.9.21";
1
+ export declare const VERSION = "3.10.0";
2
2
  export declare const MATHJAX_VERSION = "3.2.2";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/body-editor",
3
3
  "description": "Prosemirror components for editing and viewing manuscripts",
4
- "version": "3.9.21",
4
+ "version": "3.10.0",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -38,8 +38,8 @@
38
38
  "@citation-js/plugin-ris": "0.7.18",
39
39
  "@iarna/word-count": "1.1.2",
40
40
  "@manuscripts/json-schema": "2.2.12",
41
- "@manuscripts/style-guide": "3.4.7",
42
- "@manuscripts/track-changes-plugin": "2.2.12",
41
+ "@manuscripts/style-guide": "3.5.0",
42
+ "@manuscripts/track-changes-plugin": "2.3.0",
43
43
  "@manuscripts/transform": "4.3.22",
44
44
  "@popperjs/core": "2.11.8",
45
45
  "citeproc": "2.4.63",