@manuscripts/body-editor 3.16.0 → 3.16.2

package/dist/es/components/references/ImportReferencesConfirmation.js

@@ -0,0 +1,73 @@
+import { CheckboxField, CheckboxLabel, FormActionsBar, ModalTitle, PrimaryButton, SecondaryButton, } from '@manuscripts/style-guide';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { ReferenceLine } from './ReferenceLine';
+export const ImportReferencesConfirmation = ({ items, onCancel, onConfirm }) => {
+    const [selected, setSelected] = useState(() => items.map(() => true));
+    const selectedCount = selected.filter(Boolean).length;
+    const countLabel = selectedCount === 1 ? 'reference' : 'references';
+    const toggleItem = (index) => {
+        setSelected((current) => current.map((value, i) => (i === index ? !value : value)));
+    };
+    const handleConfirm = () => {
+        onConfirm(items.filter((_, index) => selected[index]));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Title, null, "Import References"),
+        React.createElement(Subtitle, null,
+            "Importing ",
+            selectedCount,
+            " ",
+            countLabel),
+        React.createElement(List, null, items.map((item, index) => (React.createElement(ListItem, { key: index },
+            React.createElement(ItemCheckbox, null,
+                React.createElement(CheckboxField, { checked: selected[index], "aria-label": `Select reference ${index + 1}`, onChange: () => toggleItem(index) }),
+                React.createElement("div", null)),
+            React.createElement(ReferenceLine, { item: item }))))),
+        React.createElement(FormActionsBar, null,
+            React.createElement(SecondaryButton, { type: "button", onClick: onCancel }, "Cancel"),
+            React.createElement(PrimaryButton, { type: "button", disabled: selectedCount === 0, onClick: handleConfirm },
+                "Import ",
+                selectedCount,
+                " ",
+                countLabel))));
+};
+const Title = styled(ModalTitle) `
+  border-bottom: 1px solid ${(props) => props.theme.colors.border.secondary};
+  margin: 0 -${(props) => 6 * props.theme.grid.unit}px 20px;
+  padding: 0 ${(props) => 6 * props.theme.grid.unit}px
+    ${(props) => props.theme.grid.unit * 4}px;
+`;
+const Subtitle = styled.p `
+  color: ${(props) => props.theme.colors.text.secondary};
+  font-weight: ${(props) => props.theme.font.weight.bold};
+  margin: 0 0 16px;
+  font-size: 14px;
+`;
+const List = styled.div `
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${(props) => props.theme.grid.unit * 5}px;
+  overflow-y: auto;
+`;
+const ListItem = styled.div `
+  border-bottom: 1px solid ${(props) => props.theme.colors.border.secondary};
+  display: flex;
+  align-items: flex-start;
+  gap: ${(props) => props.theme.grid.unit * 3}px;
+  padding: ${(props) => props.theme.grid.unit * 3}px 0;
+`;
+const ItemCheckbox = styled(CheckboxLabel) `
+  flex-shrink: 0;
+
+  > div {
+    margin: 0;
+
+    &::before {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      margin: 0;
+    }
+  }
+`;

package/dist/es/components/references/ImportSuccessPlaceholder.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+export const ImportSuccessPlaceholder = ({ count }) => {
+    const countLabel = count === 1 ? 'reference' : 'references';
+    return (React.createElement(Container, { "data-cy": "import-success-placeholder" },
+        React.createElement(IconCircle, null,
+            React.createElement(SuccessCheckIcon, null)),
+        React.createElement(Title, null, "Successfully Imported"),
+        React.createElement(Message, null,
+            "Your library has been updated with ",
+            count,
+            " new ",
+            countLabel,
+            ".")));
+};
+const SuccessCheckIcon = () => (React.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+    React.createElement("path", { d: "M26.6656 8L12.0004 22.6656L5.3344 15.9994", stroke: "#36B260", strokeWidth: "3", strokeLinecap: "round" })));
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${(props) => props.theme.grid.unit * 4}px;
+  height: 100%;
+  padding: 40px;
+  box-sizing: border-box;
+  text-align: center;
+`;
+const IconCircle = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+  background: #f6ffed;
+`;
+const Title = styled.h2 `
+  margin: 0;
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: -0.37px;
+  color: ${(props) => props.theme.colors.text.primary};
+`;
+const Message = styled.p `
+  margin: 0;
+  line-height: ${(props) => props.theme.font.lineHeight.large};
+  color: ${(props) => props.theme.colors.text.secondary};
+`;

package/dist/es/components/references/ReferenceSearch.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, UploadIcon, withFocusTrap, } from '@manuscripts/style-guide';
+import { AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, withFocusTrap, } from '@manuscripts/style-guide';
 import debounce from 'lodash/debounce';
 import React, { useState } from 'react';
 import styled from 'styled-components';
@@ -50,7 +50,7 @@ const AddReferenceActions = styled(ButtonGroup) `
     }
   }
 `;
-export const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onImport, onCite, onCancel, }) => {
+export const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onCite, onCancel, }) => {
     const [query, setQuery] = useState(initialQuery || '');
     const [selections, setSelections] = useState(new Map());
     const toggleSelection = (item) => {
@@ -86,10 +86,7 @@ export const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, on
             React.createElement(AddReferenceActions, null,
                 React.createElement(IconTextButton, { onClick: onAdd },
                     React.createElement(AddNewIcon, null),
-                    "Add new"),
-                React.createElement(IconTextButton, { onClick: onImport },
-                    React.createElement(UploadIcon, null),
-                    "Import new")),
+                    "Add new")),
             React.createElement(ButtonGroup, null,
                 React.createElement(SecondaryButton, { onClick: onCancel }, "Close"),
                 React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 }, "Cite")))));

package/dist/es/components/references/ReferencesEditor.js

@@ -1,4 +1,5 @@
-import React, { useReducer, useState } from 'react';
+import { generateNodeID, schema, } from '@manuscripts/transform';
+import React, { useEffect, useReducer, useState } from 'react';
 import { attrsReducer } from '../../lib/array-reducer';
 import { cleanItemValues } from '../../lib/utils';
 import { ReferencesModal } from './ReferencesModal';
@@ -6,9 +7,13 @@ const itemsReducer = attrsReducer();
 export const ReferencesEditor = (props) => {
     const [isOpen, setOpen] = useState(true);
     const [items, dispatch] = useReducer(itemsReducer, props.items);
+    const [selectedItem, setSelectedItem] = useState(props.item);
+    useEffect(() => {
+        setSelectedItem(props.item);
+    }, [props.item]);
     const handleSave = (item) => {
         const cleanedItem = cleanItemValues(item);
-        props.onSave(cleanedItem);
+        props.onSave([cleanedItem]);
         dispatch({
             type: 'update',
             items: [cleanedItem],
@@ -21,5 +26,16 @@ export const ReferencesEditor = (props) => {
             item: item,
         });
     };
-    return (React.createElement(ReferencesModal, { ...props, isOpen: isOpen, onCancel: () => setOpen(false), items: items, onSave: handleSave, onDelete: handleDelete }));
+    const handleImport = (data) => {
+        const newItems = data.map((item) => cleanItemValues({
+            ...item,
+            id: generateNodeID(schema.nodes.bibliography_item),
+        }));
+        props.onSave(newItems);
+        dispatch({
+            type: 'set',
+            state: [...items, ...newItems],
+        });
+    };
+    return (React.createElement(ReferencesModal, { isOpen: isOpen, onCancel: () => setOpen(false), items: items, item: selectedItem, citationCounts: props.citationCounts, onSave: handleSave, onDelete: handleDelete, handleImport: handleImport }));
 };

package/dist/es/components/references/ReferencesModal.js

@@ -1,9 +1,11 @@
-import { Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
+import { AddAuthorIcon, Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
 import isEqual from 'lodash/isEqual';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { ReferenceForm, } from './ReferenceForm/ReferenceForm';
 import { ReferenceLine } from './ReferenceLine';
+import { ImportBibliographyModal } from './ImportBibliographyModal';
+import { ImportSuccessPlaceholder } from './ImportSuccessPlaceholder';
 const ReferencesModalContainer = styled(ModalContainer) `
   min-width: 960px;
 `;
@@ -13,6 +15,33 @@ const ReferencesSidebar = styled(ModalSidebar) `
 const ReferencesSidebarContent = styled(SidebarContent) `
   overflow-y: auto;
 `;
+const ImportFromFileFooter = styled.div `
+  padding: 16px;
+`;
+const ImportFromFileButton = styled.button `
+  display: flex;
+  width: 100%;
+  padding: 8px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 4px;
+  border: 1px dashed #c9c9c9;
+  background: #fafafa;
+  cursor: pointer;
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: 14px;
+  color: #353535;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  svg rect {
+    fill: #6e6e6e;
+  }
+`;
 const ReferencesInnerWrapper = withListNavigation(styled.div `
   width: 100%;
   padding: 12px 0;
@@ -100,15 +129,25 @@ const normalize = (item) => ({
     accessed: item.accessed,
     comment: item.comment || '',
 });
-export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave, onDelete, }) => {
+export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave, onDelete, handleImport, }) => {
+    const [importing, setImporting] = useState(false);
+    const [importSuccessCount, setImportSuccessCount] = useState(null);
     const [confirm, setConfirm] = useState(false);
     const valuesRef = useRef(undefined);
     const [selection, setSelection] = useState();
     const selectionRef = useRef(null);
+    const sortedItems = useMemo(() => [...items].sort((a, b) => {
+        const aUncited = (citationCounts.get(a.id) ?? 0) === 0;
+        const bUncited = (citationCounts.get(b.id) ?? 0) === 0;
+        if (aUncited === bUncited) {
+            return 0;
+        }
+        return aUncited ? 1 : -1;
+    }), [items, citationCounts]);
     const isSelected = (item) => {
         return item.id === selection?.id;
     };
-    const selectionIndex = items.findIndex(isSelected);
+    const selectionIndex = sortedItems.findIndex(isSelected);
     useEffect(() => {
         setSelection(item);
     }, [item]);
@@ -126,8 +165,8 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
     useEffect(() => {
         const base = Math.max(0, selectionIndex - selectionTopOffset);
         setStartIndex(base);
-        setEndIndex(Math.min(items.length - 1, base + pageSize));
-    }, [selectionIndex, items]);
+        setEndIndex(Math.min(sortedItems.length - 1, base + pageSize));
+    }, [selectionIndex, sortedItems]);
     useEffect(() => {
         if (triggers.top) {
             const newFirst = Math.max(0, startIndex - pageSize);
@@ -135,11 +174,11 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
             setEndIndex(Math.min(newFirst + dropLimit, endIndex));
         }
         if (triggers.bottom) {
-            const newLast = Math.min(items.length - 1, endIndex + pageSize);
+            const newLast = Math.min(sortedItems.length - 1, endIndex + pageSize);
             setEndIndex(newLast);
             setStartIndex(Math.max(newLast - dropLimit, startIndex));
         }
-    }, [triggers, items]);
+    }, [triggers, sortedItems]);
     const actionsRef = useRef(undefined);
     const reset = () => {
         actionsRef.current?.reset();
@@ -173,7 +212,9 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
         onDelete(selection);
         setSelection(undefined);
     };
+    const clearImportSuccess = () => setImportSuccessCount(null);
     const handleItemClick = (item) => {
+        clearImportSuccess();
         const values = valuesRef.current;
         if (values && selection && !isEqual(values, normalize(selection))) {
             setConfirm(true);
@@ -184,33 +225,45 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
     const handleChange = (values) => {
         valuesRef.current = values;
     };
-    if (items.length <= 0) {
+    const handleImportSave = (data) => {
+        handleImport(data);
+        setImporting(false);
+        setSelection(undefined);
+        setImportSuccessCount(data.length);
+    };
+    if (sortedItems.length <= 0) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: onCancel },
-        React.createElement(Dialog, { isOpen: confirm, category: Category.confirmation, header: "You've made changes to this option", message: "Would you like to save or discard your changes?", actions: {
-                secondary: {
-                    action: () => reset(),
-                    title: 'Discard',
-                },
-                primary: {
-                    action: () => handleSave(valuesRef.current),
-                    title: 'Save',
-                },
-            } }),
-        React.createElement(ReferencesModalContainer, { "data-cy": 'references-editor' },
-            React.createElement(ModalHeader, null,
-                React.createElement(CloseButton, { onClick: onCancel })),
-            React.createElement(ModalBody, null,
-                React.createElement(ReferencesSidebar, null,
-                    React.createElement(ModalSidebarHeader, null,
-                        React.createElement(ModalSidebarTitle, null, "References")),
-                    React.createElement(ReferencesSidebarContent, { ref: ref },
-                        React.createElement(ReferencesInnerWrapper, null, items.slice(startIndex, endIndex + 1).map((item) => (React.createElement(ReferenceButton, { key: item.id, id: item.id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
-                            React.createElement(IconContainer, null,
-                                React.createElement(CitationCountIcon, null),
-                                (citationCounts.get(item.id) || 0) > 0 ? (React.createElement(CitationCount, { "data-tooltip-content": "Number of times used in the document" }, citationCounts.get(item.id))) : (React.createElement(CitationCount, { className: "unused" }, "0"))),
-                            React.createElement(ReferenceLine, { item: item }))))))),
-                React.createElement(ScrollableModalContent, null, selection && (React.createElement(ReferenceForm, { values: normalize(selection), showDelete: !citationCounts.get(selection.id) &&
-                        isNewItem(selection, ['id', 'type']), onChange: handleChange, onCancel: onCancel, onDelete: handleDelete, onSave: handleSave, actionsRef: actionsRef })))))));
+    return (React.createElement(React.Fragment, null,
+        importing && (React.createElement(ImportBibliographyModal, { onCancel: () => setImporting(false), onSave: handleImportSave })),
+        React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: onCancel },
+            React.createElement(Dialog, { isOpen: confirm, category: Category.confirmation, header: "You've made changes to this option", message: "Would you like to save or discard your changes?", actions: {
+                    secondary: {
+                        action: () => reset(),
+                        title: 'Discard',
+                    },
+                    primary: {
+                        action: () => handleSave(valuesRef.current),
+                        title: 'Save',
+                    },
+                } }),
+            React.createElement(ReferencesModalContainer, { "data-cy": 'references-editor' },
+                React.createElement(ModalHeader, null,
+                    React.createElement(CloseButton, { "data-cy": "modal-close-button", onClick: onCancel })),
+                React.createElement(ModalBody, null,
+                    React.createElement(ReferencesSidebar, null,
+                        React.createElement(ModalSidebarHeader, null,
+                            React.createElement(ModalSidebarTitle, null, "References")),
+                        React.createElement(ReferencesSidebarContent, { ref: ref },
+                            React.createElement(ReferencesInnerWrapper, null, sortedItems.slice(startIndex, endIndex + 1).map((item) => (React.createElement(ReferenceButton, { key: item.id, id: item.id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
+                                React.createElement(IconContainer, null,
+                                    React.createElement(CitationCountIcon, null),
+                                    (citationCounts.get(item.id) || 0) > 0 ? (React.createElement(CitationCount, { "data-tooltip-content": "Number of times used in the document" }, citationCounts.get(item.id))) : (React.createElement(CitationCount, { className: "unused" }, "0"))),
+                                React.createElement(ReferenceLine, { item: item })))))),
+                        React.createElement(ImportFromFileFooter, null,
+                            React.createElement(ImportFromFileButton, { type: "button", "data-cy": "import-from-file-button", onClick: () => setImporting(true) },
+                                React.createElement(AddAuthorIcon, null),
+                                "Import from file"))),
+                    React.createElement(ScrollableModalContent, null, importSuccessCount !== null ? (React.createElement(ImportSuccessPlaceholder, { count: importSuccessCount })) : (selection && (React.createElement(ReferenceForm, { values: normalize(selection), showDelete: !citationCounts.get(selection.id) &&
+                            isNewItem(selection, ['id', 'type']), onChange: handleChange, onCancel: onCancel, onDelete: handleDelete, onSave: handleSave, actionsRef: actionsRef })))))))));
 };

package/dist/es/components/views/CrossReferenceItems.js

@@ -13,74 +13,122 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ButtonGroup, PrimaryButton, SecondaryButton, TextArea, withFocusTrap, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
-import React, { useEffect, useRef, useState } from 'react';
+import { CloseButton, ExpandableSection, PrimaryButton, withListNavigation, withNavigableListItem, FileUnknownIcon, getFileIcon, ArrowDownIcon, StyledModal, ModalContainer, ModalHeader, ModalBody, WebLinkIcon, } from '@manuscripts/style-guide';
+import { schema } from '@manuscripts/transform';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-const Container = withFocusTrap(styled.div `
-  padding: ${(props) => props.theme.grid.unit * 3}px
-    ${(props) => props.theme.grid.unit * 4}px;
-  display: flex;
-  flex-direction: column;
-  max-height: 60vh;
-  overflow: hidden;
-`);
-const Actions = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-shrink: 0;
-`;
+import { allowedHref } from '../../lib/url';
+import { nodeTypeIcon } from '../../node-type-icons';
+import FormFooter from '../form/FormFooter';
 const Items = withListNavigation(styled.div `
   flex: 1;
   overflow-y: auto;
-  padding: ${(props) => props.theme.grid.unit * 3}px;
 `);
 const CrossReferenceItem = withNavigableListItem(styled.div `
   cursor: pointer;
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-  background-color: ${(props) => props.$isSelected
-    ? props.theme.colors.background.selected
-    : props.theme.colors.background.primary};
+  padding: ${(props) => props.theme.grid.unit * 2}px;
+  background-color: ${(props) => props.theme.colors.background.primary};
   transition: background-color 0.1s;
-  border: solid
-    ${(props) => props.$isSelected
-    ? props.theme.colors.brand.medium
-    : props.theme.colors.border.secondary};
-  border-width: 1px 0;
-  z-index: ${(props) => (props.$isSelected ? '1' : '0')};
+  border: 1px solid ${(props) => props.theme.colors.border.secondary};
+  overflow: hidden;
+  max-width: 100%;
+  box-sizing: border-box;
+  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
   &:hover {
-    background-color: ${(props) => props.theme.colors.background.selected};
+    background-color: #f2f2f2;
+  }
+
+  &.active {
+    background-color: #f2f2f2;
+    z-index: 1;
   }
 `);
 const Label = styled.span `
   color: ${(props) => props.theme.colors.text.primary};
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  min-width: fit-content;
 `;
 const Caption = styled.span `
   color: ${(props) => props.theme.colors.text.secondary};
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  margin-left: 3.2px;
 `;
 const Heading = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
+  font-size: ${(props) => props.theme.font.size.medium};
   font-weight: ${(props) => props.theme.font.weight.bold};
+  color: ${(props) => props.theme.colors.text.primary};
+  margin-bottom: ${(props) => props.theme.grid.unit * 3}px;
 `;
 const Empty = styled.div `
   margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
   color: ${(props) => props.theme.colors.text.tertiary};
 `;
+const GroupExpandableSection = styled(ExpandableSection) `
+  & > div:first-child {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    padding-left: 0;
+    gap: 10px;
+    font-weight: ${(props) => props.theme.font.weight.normal};
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+`;
 const DefaultLabelWrapper = styled.div `
-  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
+  display: flex;
+  align-items: center;
+  min-width: 0;
 `;
-const CustomTextArea = styled(TextArea) `
-  width: 100%;
-  height: 75px;
+const ItemIcon = styled.span `
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
   color: ${(props) => props.theme.colors.text.secondary};
-  background-color: ${(props) => props.theme.colors.background.primary} !important;
+  margin-right: ${(props) => props.theme.grid.unit * 2}px;
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+const FieldLabel = styled.label `
+  font-size: ${(props) => props.theme.font.size.normal};
+  color: ${(props) => props.theme.colors.text.secondary};
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  margin-bottom: ${(props) => props.theme.grid.unit}px;
+`;
+const CustomTextInput = styled.input `
+  color: ${(props) => props.theme.colors.text.secondary};
+  background-color: ${(props) => props.theme.colors.background.primary};
   border: 1px solid ${(props) => props.theme.colors.border.secondary};
   border-radius: ${(props) => props.theme.grid.radius.small};
   padding: ${(props) => props.theme.grid.unit * 2}px;
+  &:disabled {
+    cursor: not-allowed;
+    background-color: ${(props) => props.theme.colors.background.disabled};
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+`;
+const StyledModalBody = styled(ModalBody) `
+  display: flex;
+  flex-direction: column;
+  padding: ${(props) => props.theme.grid.unit * 5}px
+    ${(props) => props.theme.grid.unit * 6}px;
+  max-height: 580px;
+  min-width: 600px;
+  max-width: 600px;
+  overflow: hidden;
 `;
 const trimmedCaption = (caption, limit) => {
     if (caption.length <= limit) {
@@ -89,7 +137,27 @@ const trimmedCaption = (caption, limit) => {
     const captionSearch = new RegExp(`^(.{${limit}}[^\\s]*).*`);
     return caption.replace(captionSearch, '$1…');
 };
-export const CrossReferenceItems = ({ targets, handleSelect, handleCancel, currentTargetId, currentCustomLabel, }) => {
+const getTargetIcon = (target, files) => {
+    if (target.type === schema.nodes.supplement.name) {
+        if (target.href && allowedHref(target.href)) {
+            return React.createElement(WebLinkIcon, { className: "file-icon" });
+        }
+        const fileName = files.find((f) => f.id === target.href)?.name ?? target.label ?? '';
+        return getFileIcon(fileName) ?? React.createElement(FileUnknownIcon, null);
+    }
+    return nodeTypeIcon(schema.nodes[target.type]);
+};
+const GROUP_LABELS = {
+    figure_element: 'Figures',
+    table_element: 'Tables',
+    equation_element: 'Equations',
+    listing_element: 'Listings',
+    box_element: 'Boxes',
+    embed: 'Media',
+    supplement: 'Supplementary files',
+};
+export const CrossReferenceItems = ({ targets, files, handleSelect, handleCancel, currentTargetId, currentCustomLabel, isEdit = false, }) => {
+    const [isOpen, setIsOpen] = useState(true);
     const [selectedItem, setSelectedItem] = useState('');
     const customTextRef = useRef(null);
     useEffect(() => {
@@ -97,20 +165,39 @@ export const CrossReferenceItems = ({ targets, handleSelect, handleCancel, curre
             setSelectedItem(currentTargetId);
         }
     }, [currentTargetId]);
-    return (React.createElement(Container, null,
-        React.createElement(Heading, null, "Insert Cross-reference"),
-        React.createElement(Items, null, targets.length ? (targets.map((target) => (React.createElement(CrossReferenceItem, { key: target.id, "$isSelected": selectedItem === target.id, onClick: () => setSelectedItem(target.id) },
-            React.createElement(DefaultLabelWrapper, null,
-                React.createElement(Label, null, target.label),
-                React.createElement(Caption, null, target.caption && ': ' + trimmedCaption(target.caption, 200))),
-            selectedItem === target.id && (React.createElement(CustomTextArea, { ref: customTextRef, placeholder: 'Or type custom text', defaultValue: currentTargetId &&
-                    currentTargetId === selectedItem &&
-                    currentCustomLabel
-                    ? currentCustomLabel
-                    : '' })))))) : (React.createElement(Empty, null, "No cross-reference targets available."))),
-        React.createElement(Actions, null,
-            React.createElement(ButtonGroup, null,
-                React.createElement(SecondaryButton, { onClick: handleCancel }, "Cancel"),
-                React.createElement(PrimaryButton, { onClick: () => selectedItem &&
-                        handleSelect(selectedItem, customTextRef.current?.value || ''), disabled: !selectedItem }, "Insert")))));
+    const close = useCallback(() => {
+        setIsOpen(false);
+        handleCancel();
+    }, [handleCancel]);
+    const grouped = targets.reduce((acc, t) => {
+        var _a;
+        ;
+        (acc[_a = t.type] ?? (acc[_a] = [])).push(t);
+        return acc;
+    }, {});
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: close, shouldCloseOnOverlayClick: true },
+        React.createElement(ModalContainer, { "data-cy": "cross-reference-editor" },
+            React.createElement(ModalHeader, null,
+                React.createElement(CloseButton, { onClick: close })),
+            React.createElement(StyledModalBody, null,
+                React.createElement(Heading, null, isEdit ? 'Edit Cross-reference' : 'Insert Cross-reference'),
+                React.createElement(FieldLabel, { htmlFor: "cross-reference-custom-text" }, "Custom display text"),
+                React.createElement(CustomTextInput, { ref: customTextRef, id: "cross-reference-custom-text", "data-cy": "cross-reference-custom-text", type: "text", placeholder: 'Custom display text...', disabled: !selectedItem, defaultValue: currentCustomLabel ?? '' }),
+                React.createElement(Items, null, Object.keys(grouped).length ? (Object.entries(grouped).map(([type, group]) => (React.createElement(GroupExpandableSection, { key: type, title: GROUP_LABELS[type], icon: ArrowDownIcon }, group.map((target) => {
+                    const icon = getTargetIcon(target, files);
+                    return (React.createElement(CrossReferenceItem, { key: target.id, "data-cy": "cross-reference-item", className: selectedItem === target.id ? 'active' : undefined, onClick: () => setSelectedItem(target.id) },
+                        React.createElement(DefaultLabelWrapper, null,
+                            icon ? React.createElement(ItemIcon, null, icon) : null,
+                            React.createElement(Label, null,
+                                target.label,
+                                target.caption && `:`),
+                            React.createElement(Caption, null, trimmedCaption(target.caption, 200)))));
+                }))))) : (React.createElement(Empty, null, "No cross-reference targets available.")))),
+            React.createElement(FormFooter, { onCancel: close, cancelLabel: "Cancel", primaryAction: React.createElement(PrimaryButton, { onClick: () => {
+                        if (selectedItem) {
+                            setIsOpen(false);
+                            const customLabel = customTextRef.current?.value;
+                            handleSelect(selectedItem, customLabel || '');
+                        }
+                    }, disabled: !selectedItem }, isEdit ? 'Update' : 'Insert') }))));
 };

package/dist/es/components/views/DeleteSupplementDialog.js

@@ -1,11 +1,11 @@
-import { Category, Dialog, } from '@manuscripts/style-guide';
+import { Category, Dialog } from '@manuscripts/style-guide';
 import React, { useState } from 'react';
 import { getSupplementDisplayLabel, performDeleteSupplement, } from '../../lib/supplements';
 import { getEditorProps } from '../../plugins/editor-props';
 import ReactSubView from '../../views/ReactSubView';
 const DeleteSupplementDialog = ({ label, onDelete }) => {
     const [isOpen, setOpen] = useState(true);
-    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: 'Delete supplement', message: 'Are you sure you want to delete \u201C{label}\u201D?', actions: {
+    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: "Delete supplement", message: "Are you sure you want to delete \u201C{label}\u201D?", actions: {
             primary: {
                 action: () => {
                     onDelete();