@manuscripts/style-guide 0.30.25 → 0.31.0

package/dist/es/components/FileManager/InlineFilesSection.js

@@ -4,11 +4,11 @@ import { useDropdown } from '../../hooks/use-dropdown';
 import getInlineFiles from '../../lib/inlineFiles';
 import DotsIcon from '../icons/dots-icon';
 import { FileDescription, FileInfoContainer, FileNameTitleContainer, FileTitle, } from './FileSectionItem/FileInfo';
-import { ActionsIcon, Item } from './FileSectionItem/FileSectionItem';
+import { ActionsIcon, Item, } from './FileSectionItem/FileSectionItem';
 import { ItemActions } from './FileSectionItem/ItemActions';
 import { extensionsWithFileTypesMap, fileTypesWithIconMap } from './util';
-export const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, modelMap, isEditor, dispatch, }) => {
-    const inlineFiles = useMemo(() => getInlineFiles(modelMap), [modelMap]);
+export const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, modelMap, attachments, isEditor, dispatch, }) => {
+    const inlineFiles = useMemo(() => getInlineFiles(modelMap, attachments), [modelMap, attachments]);
     const onElementClick = useCallback((e) => {
         if (!isEditor) {
             return;
@@ -23,7 +23,7 @@ export const InlineFilesSection = ({ submissionId, handleReplace, handleDownload
     return (React.createElement("div", null, inlineFiles.map((file, index) => {
         var _a;
         return (React.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
-            React.createElement(FileReferences, { className: 'refItems' }, (_a = file.externalFileReferences) === null || _a === void 0 ? void 0 : _a.map((externalFile, index) => (React.createElement(FileReference, { key: index, externalFile: externalFile.ref, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, dispatch: dispatch })))),
+            React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(FileReference, { key: attachment.id, attachment: attachment, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, dispatch: dispatch })))),
             React.createElement(Element, { className: 'element' },
                 fileTypesWithIconMap.get(file.type),
                 React.createElement(FileInfoContainer, null,
@@ -32,20 +32,20 @@ export const InlineFilesSection = ({ submissionId, handleReplace, handleDownload
                     file.caption && (React.createElement(FileDescription, null, file.caption))))));
     })));
 };
-const FileReference = ({ externalFile, submissionId, handleReplace, handleDownload, dispatch, }) => {
+const FileReference = ({ attachment, submissionId, handleReplace, handleDownload, dispatch, }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
-    if (!externalFile || !externalFile.filename) {
+    if (!attachment || !attachment.name) {
         return null;
     }
-    const fileExtension = externalFile.filename.substring(externalFile.filename.lastIndexOf('.') + 1);
-    return (React.createElement(FileReferenceItem, { key: externalFile._id },
+    const fileExtension = attachment.name.substring(attachment.name.lastIndexOf('.') + 1);
+    return (React.createElement(FileReferenceItem, { key: attachment.id },
         React.createElement(Container, null,
             fileTypesWithIconMap.get(extensionsWithFileTypesMap.get(fileExtension)),
-            React.createElement(FileReferenceName, null, externalFile.filename)),
+            React.createElement(FileReferenceName, null, attachment.name)),
         handleDownload && handleReplace && submissionId && (React.createElement(DropdownContainer, { ref: wrapperRef },
             React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace", "aria-pressed": isOpen },
                 React.createElement(DotsIcon, null)),
-            isOpen && (React.createElement(ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, attachmentId: undefined, fileName: externalFile.filename, designation: externalFile.designation, publicUrl: externalFile.publicUrl, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
+            isOpen && (React.createElement(ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
 };
 const ElementItem = styled(Item) `
   display: flex;

package/dist/es/components/Resizer/Resizer.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { ResizerButton } from './ResizerButton';
+import { HorizontalEndResizerInner, HorizontalStartResizerInner, VerticalEndResizerInner, VerticalStartResizerInner, } from './ResizerInner';
+const inners = {
+    column: {
+        end: VerticalEndResizerInner,
+        start: VerticalStartResizerInner,
+    },
+    row: {
+        end: HorizontalEndResizerInner,
+        start: HorizontalStartResizerInner,
+    },
+};
+export class Resizer extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.resizerRef = React.createRef();
+        this.state = {
+            isHovering: false,
+            isResizing: false,
+            startPosition: 0,
+        };
+        this.scheduleResize = (delta) => {
+            if (this.state.isResizing && delta) {
+                this.props.onResize(delta);
+            }
+        };
+        this.mouseDownHandler = (e) => {
+            e.preventDefault();
+            if (!this.resizerRef.current || e.target !== this.resizerRef.current) {
+                return;
+            }
+            if (this.state.isResizing) {
+                return;
+            }
+            this.setState({
+                isResizing: true,
+                startPosition: this.getPosition(e),
+            });
+            window.addEventListener('mousemove', this.mouseMoveHandler);
+            window.addEventListener('mouseup', this.mouseUpHandler);
+            window.addEventListener('mouseout', this.handleOutofBounds);
+        };
+        this.mouseUpHandler = (e, outOfBounds = false) => {
+            window.removeEventListener('mousemove', this.mouseMoveHandler);
+            window.removeEventListener('mouseup', this.mouseUpHandler);
+            window.removeEventListener('mouseout', this.handleOutofBounds);
+            this.setState({
+                isResizing: false,
+            });
+            const position = this.getPosition(e);
+            const adjustedPosition = outOfBounds ? position - 32 : position;
+            const delta = this.getDelta(adjustedPosition);
+            if (delta === 0) {
+                this.props.onResizeButton();
+            }
+            this.props.onResize(delta);
+            this.props.onResizeEnd(delta);
+        };
+        this.mouseMoveHandler = (e) => {
+            const position = this.getPosition(e);
+            const delta = this.getDelta(position);
+            this.scheduleResize(delta);
+        };
+        this.mouseEnterHandler = () => {
+            this.setState({
+                isHovering: true,
+            });
+        };
+        this.mouseLeaveHandler = () => {
+            this.setState({
+                isHovering: false,
+            });
+        };
+        this.handleOutofBounds = (e) => {
+            const disableResizeNodes = [
+                'IFRAME',
+                'HTML',
+                null,
+            ];
+            if (this.state.isResizing &&
+                disableResizeNodes.includes(e.relatedTarget && e.relatedTarget.nodeName)) {
+                this.mouseUpHandler(e, true);
+            }
+        };
+        this.getDelta = (delta) => {
+            const { startPosition } = this.state;
+            return this.props.side === 'end'
+                ? delta - startPosition
+                : startPosition - delta;
+        };
+        this.getPosition = (e) => {
+            return this.props.direction === 'row' ? e.screenX : e.screenY;
+        };
+    }
+    render() {
+        const { buttonInner, direction, side } = this.props;
+        const ResizerInner = inners[direction][side];
+        return (React.createElement(ResizerInner, { ref: this.resizerRef, onMouseDown: this.mouseDownHandler, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler },
+            React.createElement(ResizerButton, { direction: direction, isCollapsed: this.props.collapsed, isVisible: this.state.isHovering, onClick: this.props.onResizeButton, side: side, buttonInner: buttonInner })));
+    }
+}

package/dist/es/components/Resizer/ResizerButton.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { HorizontalEndResizerButtonInner, HorizontalStartResizerButtonInner, VerticalEndResizerButtonInner, VerticalStartResizerButtonInner, } from './ResizerButtonInner';
+const inners = {
+    column: {
+        end: VerticalEndResizerButtonInner,
+        start: VerticalStartResizerButtonInner,
+    },
+    row: {
+        end: HorizontalEndResizerButtonInner,
+        start: HorizontalStartResizerButtonInner,
+    },
+};
+export class ResizerButton extends React.PureComponent {
+    render() {
+        const { buttonInner, direction, side, isCollapsed, onClick, isVisible } = this.props;
+        const ResizerButtonInner = buttonInner || inners[direction][side];
+        return (React.createElement(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault() }));
+    }
+}
+ResizerButton.defaultProps = {
+    isCollapsed: false,
+    isVisible: false,
+};

package/dist/es/components/Resizer/ResizerButtonInner.js

@@ -0,0 +1,163 @@
+import styled from 'styled-components';
+const gridSize = 8;
+const resizerVisibleSize = 2;
+const toggleButtonDepth = gridSize * 4.5;
+const toggleArrowDepth = gridSize * 2;
+const toggleArrowSize = 2;
+const toggleArrowStartOffset = (toggleButtonDepth - toggleArrowDepth) / 2;
+const toggleArrowEndOffset = toggleArrowStartOffset - toggleArrowSize + toggleArrowDepth / 2;
+const opacityTransition = `opacity 200ms ease-in-out 100ms`;
+const transformTransition = `transform 100ms ease-in-out`;
+const ResizerButtonInner = styled.button `
+  position: relative;
+  background: none;
+  border: none;
+  color: transparent;
+  cursor: pointer;
+
+  &:focus {
+    outline: 1px solid blue;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    background-color: #ddd;
+    border-radius: ${toggleArrowDepth}px;
+    position: absolute;
+    opacity: ${(props) => (props.isVisible ? 1 : 0.5)};
+    transition: ${transformTransition}, ${opacityTransition};
+  }
+
+  &::before {
+    transform-origin: ${toggleArrowSize / 2}px
+      ${toggleArrowDepth / 2 - toggleArrowSize / 2}px;
+  }
+
+  &::after {
+    transform-origin: ${toggleArrowSize / 2}px ${toggleArrowSize / 2}px;
+  }
+
+  &:hover,
+  &:focus {
+    &::before,
+    &::after {
+      background-color: #2a6f9d;
+      opacity: 1;
+    }
+  }
+`;
+const HorizontalResizerButtonInner = styled(ResizerButtonInner) `
+  top: calc(50% - ${toggleButtonDepth / 2}px);
+  width: ${gridSize * 3}px;
+  height: ${toggleButtonDepth}px;
+
+  &::before,
+  &::after {
+    width: ${toggleArrowSize}px;
+    height: ${toggleArrowDepth / 2}px;
+    transform: rotate(0deg);
+  }
+
+  &::before {
+    top: ${toggleArrowStartOffset}px;
+  }
+
+  &::after {
+    top: ${toggleArrowEndOffset}px;
+  }
+`;
+export const HorizontalEndResizerButtonInner = styled(HorizontalResizerButtonInner) `
+  left: -${resizerVisibleSize / 2}px;
+
+  &::before,
+  &::after {
+    left: 8px;
+  }
+
+  &:hover,
+  &:focus {
+    &::before {
+      transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
+    }
+    &::after {
+      transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
+    }
+  }
+`;
+export const HorizontalStartResizerButtonInner = styled(HorizontalResizerButtonInner) `
+  right: -${resizerVisibleSize / 2}px;
+
+  &::before,
+  &::after {
+    right: 16px;
+  }
+
+  &:hover,
+  &:focus {
+    &::before {
+      transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
+    }
+    &::after {
+      transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
+    }
+  }
+`;
+const VerticalResizerButtonInner = styled(ResizerButtonInner) `
+  left: calc(50% - ${toggleButtonDepth / 2}px);
+  width: ${toggleButtonDepth}px;
+  height: ${gridSize * 3}px;
+
+  &::before,
+  &::after {
+    width: ${toggleArrowDepth / 2}px;
+    height: ${toggleArrowSize}px;
+  }
+
+  &::before {
+    left: ${toggleArrowStartOffset}px;
+  }
+
+  &::after {
+    left: ${toggleArrowEndOffset}px;
+  }
+`;
+export const VerticalEndResizerButtonInner = styled(VerticalResizerButtonInner) `
+  bottom: -${resizerVisibleSize / 2}px;
+
+  &::before,
+  &::after {
+    bottom: 8px;
+    transform-origin: top center;
+  }
+
+  &:hover,
+  &:focus {
+    &::before {
+      transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
+    }
+    &::after {
+      transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
+    }
+  }
+`;
+export const VerticalStartResizerButtonInner = styled(VerticalResizerButtonInner) `
+  top: -${resizerVisibleSize / 2}px;
+
+  &::before,
+  &::after {
+    top: 8px;
+    transform: rotate(270deg);
+    transform-origin: bottom center;
+  }
+
+  &:hover,
+  &:focus {
+    &::before {
+      transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
+    }
+    &::after {
+      transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
+    }
+  }
+`;

package/dist/es/components/Resizer/ResizerInner.js

@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+const ResizerInner = styled.div `
+  display: block;
+  z-index: 2;
+  overflow: visible;
+  position: absolute;
+
+  &::before {
+    content: '';
+    position: absolute;
+    transition: background-color 200ms ease-in-out 100ms;
+    background: rgb(240, 240, 240);
+  }
+
+  &:hover::before {
+    background: #e2e2e2;
+  }
+`;
+const HorizontalResizerInner = styled(ResizerInner) `
+  cursor: ew-resize;
+  top: 0;
+  height: 100%;
+  width: 16px;
+
+  &::before {
+    height: 100%;
+    width: 1px;
+  }
+`;
+export const HorizontalStartResizerInner = styled(HorizontalResizerInner) `
+  left: -16px;
+
+  &::before {
+    right: -1px;
+  }
+`;
+export const HorizontalEndResizerInner = styled(HorizontalResizerInner) `
+  right: -16px;
+
+  &::before {
+    left: -1px;
+  }
+`;
+const VerticalResizerInner = styled(ResizerInner) `
+  cursor: ns-resize;
+  left: 0;
+  height: 16px;
+  width: 100%;
+
+  &::before {
+    width: 100%;
+    height: 1px;
+  }
+`;
+export const VerticalStartResizerInner = styled(VerticalResizerInner) `
+  top: -16px;
+
+  &::before {
+    bottom: -1px;
+  }
+`;
+export const VerticalEndResizerInner = styled(VerticalResizerInner) `
+  bottom: -16px;
+
+  &::before {
+    top: -1px;
+  }
+`;

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

@@ -0,0 +1,2 @@
+export { Resizer } from './Resizer';
+export * from './types';

package/dist/es/components/Resizer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es/components/icons/attach.js

@@ -0,0 +1,19 @@
+/*!
+ * © 2022 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+const AttachIcon = () => (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M8.85683 5.35715L5.85183 8.36215C5.16883 9.04515 5.16883 10.1531 5.85183 10.8371C6.53483 11.5201 7.64283 11.5201 8.32683 10.8371L12.3928 6.77115C13.7598 5.40415 13.7598 3.18815 12.3928 1.82115C11.0258 0.454148 8.80983 0.454148 7.44283 1.82115L3.02383 6.24115C0.973828 8.29115 0.973828 11.6151 3.02383 13.6661C5.07383 15.7161 8.39783 15.7161 10.4488 13.6661L14.5138 9.60015", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
+export default AttachIcon;

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

@@ -32,3 +32,6 @@ export { default as ZoomOutIcon } from './zoom-out';
 export { default as TaskStepCurrentIcon } from './task-step-current';
 export { default as TaskStepDoneIcon } from './task-step-done';
 export { default as TaskStepNextIcon } from './task-step-next';
+export { default as AttachIcon } from './attach';
+export { default as UploadIcon } from './upload';
+export { default as MissingImage } from './missing-image';

package/dist/es/components/icons/missing-image.js

@@ -0,0 +1,7 @@
+import React from 'react';
+const MissingImage = () => (React.createElement("svg", { width: "28", height: "32", viewBox: "0 0 28 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M2.99979 1.25C2.03237 1.25 1.25073 2.03442 1.25073 3V29C1.25073 29.9665 2.03423 30.75 3.00073 30.75H25.0007C25.9672 30.75 26.7507 29.9665 26.7507 29V11.4383C26.7507 10.9494 26.5462 10.4828 26.1868 10.1515L17.0318 1.71322C16.7092 1.41588 16.287 1.25 15.8467 1.25H15.8372H15.8275H15.8177H15.8078H15.7978H15.7877H15.7775H15.7671H15.7567H15.7462H15.7355H15.7248H15.7139H15.703H15.6919H15.6807H15.6694H15.6581H15.6466H15.635H15.6233H15.6115H15.5996H15.5876H15.5755H15.5633H15.551H15.5386H15.5261H15.5135H15.5008H15.488H15.4751H15.4621H15.449H15.4358H15.4225H15.4091H15.3956H15.382H15.3683H15.3545H15.3406H15.3266H15.3126H15.2984H15.2841H15.2697H15.2553H15.2407H15.2261H15.2113H15.1965H15.1815H15.1665H15.1514H15.1362H15.1209H15.1055H15.09H15.0744H15.0587H15.043H15.0271H15.0111H14.9951H14.979H14.9628H14.9464H14.93H14.9136H14.897H14.8803H14.8636H14.8467H14.8298H14.8128H14.7957H14.7785H14.7612H14.7438H14.7264H14.7089H14.6912H14.6735H14.6557H14.6379H14.6199H14.6019H14.5837H14.5655H14.5472H14.5289H14.5104H14.4919H14.4732H14.4545H14.4357H14.4169H14.3979H14.3789H14.3598H14.3406H14.3213H14.302H14.2825H14.263H14.2435H14.2238H14.204H14.1842H14.1643H14.1443H14.1243H14.1042H14.084H14.0637H14.0433H14.0229H14.0024H13.9818H13.9611H13.9404H13.9196H13.8987H13.8778H13.8567H13.8356H13.8144H13.7932H13.7719H13.7505H13.729H13.7075H13.6859H13.6642H13.6425H13.6206H13.5988H13.5768H13.5548H13.5327H13.5105H13.4883H13.466H13.4436H13.4212H13.3987H13.3761H13.3535H13.3308H13.308H13.2851H13.2622H13.2393H13.2162H13.1931H13.17H13.1467H13.1235H13.1001H13.0767H13.0532H13.0296H13.006H12.9824H12.9586H12.9348H12.911H12.8871H12.8631H12.839H12.8149H12.7908H12.7666H12.7423H12.7179H12.6935H12.6691H12.6446H12.62H12.5954H12.5707H12.5459H12.5211H12.4963H12.4713H12.4464H12.4213H12.3963H12.3711H12.3459H12.3207H12.2954H12.27H12.2446H12.2191H12.1936H12.168H12.1424H12.1167H12.091H12.0652H12.0394H12.0135H11.9876H11.9616H11.9355H11.9094H11.8833H11.8571H11.8309H11.8046H11.7782H11.7519H11.7254H11.6989H11.6724H11.6458H11.6192H11.5925H11.5658H11.539H11.5122H11.4854H11.4585H11.4315H11.4045H11.3775H11.3504H11.3233H11.2961H11.2689H11.2416H11.2143H11.187H11.1596H11.1322H11.1047H11.0772H11.0497H11.0221H10.9944H10.9668H10.939H10.9113H10.8835H10.8556H10.8278H10.7999H10.7719H10.7439H10.7159H10.6878H10.6597H10.6316H10.6034H10.5752H10.5469H10.5187H10.4903H10.462H10.4336H10.4052H10.3767H10.3482H10.3197H10.2911H10.2625H10.2339H10.2052H10.1765H10.1478H10.119H10.0902H10.0614H10.0326H10.0037H9.97477H9.94582H9.91684H9.88784H9.8588H9.82973H9.80064H9.77151H9.74236H9.71318H9.68397H9.65474H9.62547H9.59618H9.56687H9.53752H9.50815H9.47876H9.44934H9.41989H9.39042H9.36092H9.3314H9.30186H9.27229H9.24269H9.21308H9.18344H9.15378H9.12409H9.09438H9.06465H9.0349H9.00513H8.97534H8.94552H8.91569H8.88583H8.85596H8.82606H8.79615H8.76621H8.73626H8.70629H8.6763H8.64629H8.61627H8.58623H8.55617H8.52609H8.49599H8.46588H8.43576H8.40562H8.37546H8.34529H8.3151H8.2849H8.25468H8.22445H8.1942H8.16394H8.13367H8.10339H8.07309H8.04278H8.01246H7.98212H7.95178H7.92142H7.89105H7.86067H7.83029H7.79989H7.76948H7.73906H7.70863H7.67819H7.64775H7.61729H7.58683H7.55636H7.52588H7.49539H7.4649H7.4344H7.40389H7.37338H7.34286H7.31234H7.28181H7.25127H7.22073H7.19019H7.15964H7.12908H7.09853H7.06797H7.0374H7.00684H6.97627H6.9457H6.91512H6.88455H6.85397H6.82339H6.79282H6.76224H6.73166H6.70108H6.6705H6.63992H6.60934H6.57876H6.54819H6.51761H6.48704H6.45647H6.4259H6.39533H6.36477H6.33421H6.30366H6.27311H6.24256H6.21201H6.18148H6.15094H6.12041H6.08989H6.05937H6.02886H5.99836H5.96786H5.93737H5.90689H5.87641H5.84594H5.81548H5.78503H5.75458H5.72415H5.69372H5.66331H5.6329H5.6025H5.57212H5.54174H5.51138H5.48102H5.45068H5.42035H5.39003H5.35973H5.32943H5.29915H5.26888H5.23863H5.20839H5.17816H5.14795H5.11775H5.08757H5.0574H5.02725H4.99711H4.96699H4.93688H4.90679H4.87672H4.84667H4.81663H4.78661H4.75661H4.72662H4.69666H4.66671H4.63678H4.60687H4.57698H4.54712H4.51727H4.48744H4.45763H4.42784H4.39808H4.36833H4.33861H4.30891H4.27923H4.24958H4.21994H4.19033H4.16075H4.13119H4.10165H4.07213H4.04264H4.01318H3.98374H3.95433H3.92494H3.89558H3.86624H3.83693H3.80765H3.7784H3.74917H3.71997H3.6908H3.66165H3.63254H3.60345H3.57439H3.54537H3.51637H3.4874H3.45846H3.42955H3.40068H3.37183H3.34302H3.31423H3.28548H3.25676H3.22808H3.19942H3.1708H3.14222H3.11366H3.08514H3.05666H3.02821H2.99979Z", stroke: "#6E6E6E", strokeWidth: "1.5" }),
+    React.createElement("path", { d: "M8.00073 24C10.1219 20.9815 15.8916 16.7556 22.0007 24", stroke: "#6E6E6E", strokeWidth: "1.5", strokeLinecap: "round" }),
+    React.createElement("path", { d: "M8.00073 8C8.00073 8 8.00073 9.04738 8.00073 11", stroke: "#6E6E6E", strokeWidth: "1.5", strokeLinecap: "round" }),
+    React.createElement("path", { d: "M16.0007 2V12H26.0007", stroke: "#6E6E6E", strokeWidth: "1.5" })));
+export default MissingImage;

package/dist/es/components/icons/upload.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const UploadIcon = () => (React.createElement("svg", { width: "17", height: "18", viewBox: "0 0 17 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M8.5 12.5V1.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M13.5 6.5L8.5 1.5L3.5 6.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("path", { d: "M15.5 16.5H1.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
+export default UploadIcon;

package/dist/es/index.js

@@ -32,6 +32,7 @@ export * from './components/Form';
 export * from './components/FileManager';
 export * from './components/FileManager/util';
 export * from './components/FileManager/FileSectionItem/FileSectionItem';
+export * from './components/Resizer';
 export * from './components/SaveStatus';
 export * from './components/SimpleModal';
 export * from './components/StyledModal';

package/dist/es/lib/inlineFiles.js

@@ -4,33 +4,44 @@ import { FileType } from '../components/FileManager/util';
 const getCaptionText = (caption) => caption &&
     new DOMParser().parseFromString(caption, 'text/html').documentElement
         .innerText;
-const getFigureData = (element, modelMap) => {
-    const externalFileReferences = [];
+const getAttachment = (externalFileRef, attachmentsMap) => {
+    if (!(externalFileRef === null || externalFileRef === void 0 ? void 0 : externalFileRef.url.includes('https://'))) {
+        const attachmentId = externalFileRef === null || externalFileRef === void 0 ? void 0 : externalFileRef.url.replace('attachment:', '');
+        return attachmentId ? attachmentsMap.get(attachmentId) : undefined;
+    }
+    else {
+        return [...attachmentsMap.values()].find((attachment) => attachment.link === externalFileRef.url);
+    }
+};
+const getFigureData = (element, modelMap, attachmentsMap) => {
+    const attachments = [];
     element.containedObjectIDs.map((e) => {
         var _a;
         const object = modelMap.get(e);
         if (object && object.objectType === ObjectTypes.Figure) {
             const externalFileRef = (_a = object.externalFileReferences) === null || _a === void 0 ? void 0 : _a.find((figure) => figure.kind === 'imageRepresentation');
-            if (externalFileRef) {
-                externalFileReferences.push(externalFileRef);
+            const attachment = getAttachment(externalFileRef, attachmentsMap);
+            if (attachment) {
+                attachments.push(attachment);
             }
         }
     });
     return {
         id: element._id,
-        externalFileReferences,
+        attachments,
         caption: getCaptionText(element.caption),
     };
 };
-export default (modelMap) => {
+export default (modelMap, attachments) => {
     const files = [];
+    const attachmentsMap = new Map(attachments.map((attachment) => [attachment.id, attachment]));
     getModelsByType(modelMap, ObjectTypes.Section).map((section) => {
         var _a, _b;
         if (section.category === 'MPSectionCategory:abstract-graphical') {
             (_a = section.elementIDs) === null || _a === void 0 ? void 0 : _a.some((elementId) => {
                 const element = modelMap.get(elementId);
                 if (element && hasObjectType(ObjectTypes.FigureElement)(element)) {
-                    files.unshift(Object.assign(Object.assign({}, getFigureData(element, modelMap)), { label: `Graphical Abstract`, type: FileType.GraphicalAbstract }));
+                    files.unshift(Object.assign(Object.assign({}, getFigureData(element, modelMap, attachmentsMap)), { label: `Graphical Abstract`, type: FileType.GraphicalAbstract }));
                     return true;
                 }
             });
@@ -45,19 +56,20 @@ export default (modelMap) => {
                 switch (element.objectType) {
                     case ObjectTypes.FigureElement:
                     case ObjectTypes.MultiGraphicFigureElement: {
-                        files.push(Object.assign(Object.assign({}, getFigureData(element, modelMap)), { label: `Figure`, type: FileType.Figure }));
+                        files.push(Object.assign(Object.assign({}, getFigureData(element, modelMap, attachmentsMap)), { label: `Figure`, type: FileType.Figure }));
                         break;
                     }
                     case ObjectTypes.TableElement: {
                         const tableElement = element;
                         const table = modelMap.get(tableElement.containedObjectID);
-                        const externalFileReferences = (_a = table.externalFileReferences) === null || _a === void 0 ? void 0 : _a.filter((file) => file.kind === 'dataset' && file.ref);
-                        if (externalFileReferences && externalFileReferences.length > 0) {
+                        const externalFileReference = (_a = table.externalFileReferences) === null || _a === void 0 ? void 0 : _a.find((file) => file.kind === 'dataset' && file.ref);
+                        const attachment = getAttachment(externalFileReference, attachmentsMap);
+                        if (attachment) {
                             files.push({
                                 id: element._id,
                                 label: `Table`,
                                 type: FileType.SheetsWorkbooks,
-                                externalFileReferences: table.externalFileReferences,
+                                attachments: [attachment],
                                 caption: getCaptionText(tableElement.caption),
                             });
                         }

package/dist/types/components/FileManager/InlineFilesSection.d.ts

@@ -1,13 +1,15 @@
-import { ExternalFile, Model } from '@manuscripts/manuscripts-json-schema';
+import { Model } from '@manuscripts/manuscripts-json-schema';
 import React, { Dispatch } from 'react';
+import { SubmissionAttachment } from './FileSectionItem/FileSectionItem';
 import { Action } from './FileSectionState';
 export interface ExternalFileRef {
     url: string;
     kind?: string;
-    ref?: ExternalFile;
+    ref?: SubmissionAttachment;
 }
 export declare const InlineFilesSection: React.FC<{
     submissionId: string;
+    attachments: SubmissionAttachment[];
     modelMap: Map<string, Model>;
     handleReplace: (submissionId: string, attachmentId: string, name: string, file: File, typeId: string) => Promise<boolean>;
     handleDownload: (url: string) => void;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ResizerButtonInnerProps } from './ResizerButtonInner';
+import { ResizerDirection, ResizerSide } from './types';
+interface Props {
+    collapsed: boolean;
+    direction: ResizerDirection;
+    onResize: (resizeDelta: number) => void;
+    onResizeButton: () => void;
+    onResizeEnd: (resizeDelta: number) => void;
+    side: ResizerSide;
+    buttonInner?: React.ComponentType<ResizerButtonInnerProps>;
+}
+interface State {
+    isHovering: boolean;
+    isResizing: boolean;
+    startPosition: number;
+}
+export declare class Resizer extends React.Component<Props, State> {
+    resizerRef: React.RefObject<HTMLDivElement>;
+    state: {
+        isHovering: boolean;
+        isResizing: boolean;
+        startPosition: number;
+    };
+    render(): JSX.Element;
+    private scheduleResize;
+    private mouseDownHandler;
+    private mouseUpHandler;
+    private mouseMoveHandler;
+    private mouseEnterHandler;
+    private mouseLeaveHandler;
+    private handleOutofBounds;
+    private getDelta;
+    private getPosition;
+}
+export {};

package/dist/types/components/Resizer/ResizerButton.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ResizerButtonInnerProps } from './ResizerButtonInner';
+import { ResizerDirection, ResizerSide } from './types';
+interface Props extends React.HTMLProps<HTMLButtonElement> {
+    direction: ResizerDirection;
+    isCollapsed: boolean;
+    isVisible: boolean;
+    side: ResizerSide;
+    buttonInner?: React.ComponentType<ResizerButtonInnerProps>;
+}
+export declare class ResizerButton extends React.PureComponent<Props> {
+    static defaultProps: {
+        isCollapsed: boolean;
+        isVisible: boolean;
+    };
+    render(): JSX.Element;
+}
+export {};

package/dist/types/components/Resizer/ResizerButtonInner.d.ts

@@ -0,0 +1,8 @@
+export interface ResizerButtonInnerProps {
+    isCollapsed: boolean;
+    isVisible: boolean;
+}
+export declare const HorizontalEndResizerButtonInner: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ResizerButtonInnerProps, never>;
+export declare const HorizontalStartResizerButtonInner: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ResizerButtonInnerProps, never>;
+export declare const VerticalEndResizerButtonInner: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ResizerButtonInnerProps, never>;
+export declare const VerticalStartResizerButtonInner: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ResizerButtonInnerProps, never>;

package/dist/types/components/Resizer/ResizerInner.d.ts

@@ -0,0 +1,4 @@
+export declare const HorizontalStartResizerInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const HorizontalEndResizerInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const VerticalStartResizerInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const VerticalEndResizerInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,2 @@
+export { Resizer } from './Resizer';
+export * from './types';

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

@@ -0,0 +1,2 @@
+export declare type ResizerDirection = 'row' | 'column';
+export declare type ResizerSide = 'start' | 'end';