box-annotations 4.0.0-beta.8 → 4.0.1-beta.1

package/src/components/Popups/PopupHighlight.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import IconHighlightTextAnnotation from 'box-ui-elements/es/icon/fill/AnnotationsHighlight16';
+import noop from 'lodash/noop';
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+import PopupBase from './PopupBase';
+import useOutsideEvent from '../../common/useOutsideEvent';
+import { Options } from './Popper';
+import { Shape } from '../../@types/model';
+import './PopupHighlight.scss';
+
+export type Props = {
+    onCancel?: () => void;
+    onSubmit?: () => void;
+    shape: Shape;
+};
+
+const options: Partial<Options> = {
+    modifiers: [
+        {
+            name: 'arrow',
+            options: {
+                element: '.ba-Popup-arrow',
+            },
+        },
+        {
+            name: 'eventListeners',
+            options: {
+                scroll: false,
+            },
+        },
+        {
+            name: 'offset',
+            options: {
+                offset: [0, 8],
+            },
+        },
+        {
+            name: 'preventOverflow',
+            options: {
+                padding: 5,
+            },
+        },
+    ],
+    placement: 'bottom',
+};
+
+export default function PopupHighlight({ onCancel = noop, onSubmit = noop, shape }: Props): JSX.Element {
+    const buttonRef = React.useRef<HTMLButtonElement>(null);
+    const { height, width, x, y } = shape;
+
+    const reference = {
+        getBoundingClientRect: () => ({
+            bottom: y + height,
+            height,
+            left: x,
+            right: x + width,
+            top: y,
+            width,
+        }),
+    };
+
+    const handleKeydownOutside = (event: Event): void => {
+        if (!(event instanceof KeyboardEvent) || event.key !== 'Enter' || event.ctrlKey || event.metaKey) {
+            return;
+        }
+
+        event.preventDefault(); // Consume any enter keydown event if the promoter is open
+        event.stopPropagation(); // Prevent the enter keydown event from adding a new line to the textarea
+
+        onSubmit();
+    };
+
+    useOutsideEvent('keydown', buttonRef, handleKeydownOutside);
+    useOutsideEvent('mousedown', buttonRef, onCancel);
+
+    return (
+        <PopupBase
+            aria-live="polite"
+            className="ba-PopupHighlight"
+            options={options}
+            reference={reference}
+            role="dialog"
+        >
+            <button
+                ref={buttonRef}
+                className="ba-PopupHighlight-button"
+                data-testid="ba-PopupHighlight-button"
+                onClick={onSubmit}
+                type="button"
+            >
+                <IconHighlightTextAnnotation className="ba-PopupHighlight-icon" />
+                <FormattedMessage {...messages.popupHighlightPromoter} />
+            </button>
+        </PopupBase>
+    );
+}

package/src/components/Popups/PopupHighlightError.scss

@@ -0,0 +1,23 @@
+@import '~box-ui-elements/es/styles/variables';
+@import './PopupArrow';
+
+.ba {
+    $popup-content-bg: $bdl-gray-50;
+
+    .ba-PopupHighlightError {
+        @include ba-PopupArrow(4px, $popup-content-bg, $popup-content-bg, $popup-content-bg, $popup-content-bg, $popup-content-bg);
+        @include common-typography;
+
+        .ba-Popup-content {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            padding: 5px 10px;
+            color: $white;
+            background-color: $popup-content-bg;
+            border: none;
+            border-radius: $bdl-border-radius-size;
+            box-shadow: none;
+        }
+    }
+}

package/src/components/Popups/PopupHighlightError.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+import PopupBase from './PopupBase';
+import useOutsideEvent from '../../common/useOutsideEvent';
+import { Options } from './Popper';
+import { Shape } from '../../@types/model';
+import './PopupHighlightError.scss';
+
+export type Props = {
+    onCancel?: () => void;
+    shape: Shape;
+};
+
+const options: Partial<Options> = {
+    modifiers: [
+        {
+            name: 'arrow',
+            options: {
+                element: '.ba-Popup-arrow',
+            },
+        },
+        {
+            name: 'eventListeners',
+            options: {
+                scroll: false,
+            },
+        },
+        {
+            name: 'offset',
+            options: {
+                offset: [0, 8],
+            },
+        },
+        {
+            name: 'preventOverflow',
+            options: {
+                padding: 5,
+            },
+        },
+    ],
+    placement: 'bottom',
+};
+
+export default function PopupHighlightError({ onCancel = noop, shape }: Props): JSX.Element {
+    const popupRef = React.useRef<PopupBase>(null);
+    const { height, width, x, y } = shape;
+
+    const reference = {
+        getBoundingClientRect: () => ({
+            bottom: y + height,
+            height,
+            left: x,
+            right: x + width,
+            top: y,
+            width,
+        }),
+    };
+
+    useOutsideEvent('mousedown', popupRef.current?.popupRef, onCancel);
+
+    return (
+        <PopupBase
+            ref={popupRef}
+            className="ba-PopupHighlightError"
+            data-testid="ba-PopupHighlightError"
+            options={options}
+            reference={reference}
+        >
+            <FormattedMessage {...messages.popupHighlightRestrictedPrompt} />
+        </PopupBase>
+    );
+}

package/src/components/Popups/PopupList.scss

@@ -6,15 +6,12 @@
     }
 
     .ba-Popup-content {
-        padding-top: 10px;
-        padding-bottom: 10px;
         border: solid 1px $bdl-gray-30;
         border-radius: $bdl-border-radius-size;
         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
     }
 
     .ba-PopupList-prompt {
-        padding-right: 10px;
-        padding-left: 10px;
+        padding: 10px;
     }
 }

package/src/components/Popups/PopupList.tsx

@@ -9,11 +9,11 @@ import './PopupList.scss';
 
 export type Props<T extends { id: string }> = {
     activeItemIndex?: number;
-    itemRowAs?: JSX.Element;
+    autoScroll?: boolean;
     items: T[];
     onActivate?: (index: number) => void;
+    onMouseDown?: (event: React.SyntheticEvent) => void;
     onSelect: (index: number, event: React.SyntheticEvent) => void;
-    options?: Partial<Options>;
     reference: PopupReference;
 };
 

package/src/components/Popups/PopupReply.tsx

@@ -1,7 +1,11 @@
-import React from 'react';
+import * as React from 'react';
+import * as Popper from '@popperjs/core';
+import * as ReactRedux from 'react-redux';
 import PopupBase from './PopupBase';
 import ReplyForm from '../ReplyForm';
-
+import usePrevious from '../../common/usePrevious';
+import { getScale, getRotation } from '../../store/options';
+import { PopupReference } from './Popper';
 import './PopupReply.scss';
 
 export type Props = {
@@ -10,17 +14,22 @@ export type Props = {
     onCancel: (text?: string) => void;
     onChange: (text?: string) => void;
     onSubmit: (text: string) => void;
-    reference: Element;
+    reference: PopupReference;
     value?: string;
 };
 
-export const options = {
+const isIE = (): boolean => {
+    const { userAgent } = navigator;
+    return userAgent.indexOf('Trident/') > 0;
+};
+
+export const options: Pick<Popper.Options, 'modifiers'> = {
     modifiers: [
         {
             name: 'arrow',
             options: {
                 element: '.ba-Popup-arrow',
-                padding: 20,
+                padding: 10,
             },
         },
         {
@@ -45,6 +54,27 @@ export const options = {
     ],
 };
 
+const getOptions = (): Partial<Popper.Options> => {
+    const { modifiers: defaultModifiers } = options;
+    const placement = isIE() ? 'top' : 'bottom';
+    const modifiers = isIE()
+        ? [
+              ...defaultModifiers,
+              {
+                  name: 'eventListeners',
+                  options: {
+                      scroll: false,
+                  },
+              },
+          ]
+        : defaultModifiers;
+
+    return {
+        modifiers,
+        placement,
+    };
+};
+
 export default function PopupReply({
     isPending,
     onCancel,
@@ -53,8 +83,23 @@ export default function PopupReply({
     value = '',
     ...rest
 }: Props): JSX.Element {
+    const popupRef = React.useRef<PopupBase>(null);
+    const popupOptions = React.useRef<Partial<Popper.Options>>(getOptions()); // Keep the options reference the same between renders
+    const rotation = ReactRedux.useSelector(getRotation);
+    const prevRotation = usePrevious(rotation);
+    const scale = ReactRedux.useSelector(getScale);
+    const prevScale = usePrevious(scale);
+
+    React.useEffect(() => {
+        const { current: popup } = popupRef;
+
+        if (popup?.popper && (rotation !== prevRotation || scale !== prevScale)) {
+            popup.popper.update();
+        }
+    }, [popupRef, prevRotation, prevScale, rotation, scale]);
+
     return (
-        <PopupBase options={options} {...rest}>
+        <PopupBase ref={popupRef} data-resin-component="popupReply" options={popupOptions.current} {...rest}>
             <ReplyForm
                 isPending={isPending}
                 onCancel={onCancel}

package/src/components/Popups/messages.ts

@@ -11,11 +11,41 @@ export default defineMessages({
         description: 'Button label for creating a description, comment, or reply',
         defaultMessage: 'Post',
     },
+    drawingButtonAddComment: {
+        id: 'ba.popups.drawing.addComment',
+        description: 'Button label for adding a comment in the drawing toolbar',
+        defaultMessage: 'Add Comment',
+    },
+    drawingButtonDelete: {
+        id: 'ba.popups.drawing.delete',
+        description: 'Button title for deleting a staged drawing',
+        defaultMessage: 'Delete',
+    },
+    drawingButtonRedo: {
+        id: 'ba.popups.drawing.redo',
+        description: 'Button title for redoing a staged drawing',
+        defaultMessage: 'Redo',
+    },
+    drawingButtonUndo: {
+        id: 'ba.popups.drawing.undo',
+        description: 'Button title for undoing a staged drawing',
+        defaultMessage: 'Undo',
+    },
     fieldPlaceholder: {
         id: 'ba.popups.replyField.placeholder',
         description: 'Placeholder for reply field editor',
         defaultMessage: 'Type a comment...',
     },
+    popupHighlightPromoter: {
+        id: 'ba.popups.popupHighlight.promoter',
+        description: 'Popup message for highlight promoter',
+        defaultMessage: 'Highlight and Comment',
+    },
+    popupHighlightRestrictedPrompt: {
+        id: 'ba.popups.popupHighlight.restrictedPrompt',
+        description: 'Prompt message when selection crosses multiple pages',
+        defaultMessage: 'Comments restricted to single page',
+    },
     popupListPrompt: {
         id: 'ba.popups.popupList.prompt',
         description: 'Prompt message for empty popup list',

package/src/components/ReplyField/ReplyField.scss

@@ -1,7 +1,12 @@
 @import '~box-ui-elements/es/styles/variables';
-@import '~draft-js/dist/Draft.css';
 
 .ba-ReplyField {
+    @import '~draft-js/dist/Draft';
+
+    .DraftEditor-editorContainer {
+        border-left: none;
+    }
+
     .public-DraftEditorPlaceholder-hasFocus,
     .public-DraftEditorPlaceholder-root {
         margin: 0;

package/src/components/ReplyField/ReplyField.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import classnames from 'classnames';
+import debounce from 'lodash/debounce';
 import {
     addMention,
     getActiveMentionForEditorState,
-} from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector';
-import fuzzySearch from 'box-ui-elements/es/utils/fuzzySearch';
+} from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector/utils';
 import { DraftHandleValue, Editor, EditorState } from 'draft-js';
 import PopupList from '../Popups/PopupList';
 import { Collaborator } from '../../@types';
@@ -24,8 +24,8 @@ export type Props = {
     collaborators: Collaborator[];
     cursorPosition: number;
     editorState: EditorState;
+    fetchCollaborators: (searchString: string) => void;
     isDisabled?: boolean;
-    itemRowAs?: JSX.Element;
     onChange: (editorState: EditorState) => void;
     placeholder?: string;
     setCursorPosition: (cursorPosition: number) => void;
@@ -33,15 +33,37 @@ export type Props = {
 
 export type State = {
     activeItemIndex: number;
+    popupAutoScroll: boolean;
     popupReference: VirtualElement | null;
 };
 
+export const DEFAULT_COLLAB_DEBOUNCE = 500;
+
 export default class ReplyField extends React.Component<Props, State> {
     static defaultProps = {
         isDisabled: false,
     };
 
-    state: State = { activeItemIndex: 0, popupReference: null };
+    state: State = { activeItemIndex: 0, popupAutoScroll: false, popupReference: null };
+
+    fetchCollaborators = debounce((editorState: EditorState): void => {
+        const { fetchCollaborators } = this.props;
+
+        const activeMention = getActiveMentionForEditorState(editorState);
+        const trimmedQuery = activeMention?.mentionString.trim();
+        if (!trimmedQuery) {
+            return;
+        }
+
+        fetchCollaborators(trimmedQuery);
+    }, DEFAULT_COLLAB_DEBOUNCE);
+
+    handleResize = debounce(() => this.updatePopupReference(), 100);
+
+    componentDidMount(): void {
+        // The browser’s native zoom doesn’t always trigger Preview’s resize
+        window.addEventListener('resize', this.handleResize);
+    }
 
     componentDidUpdate({ editorState: prevEditorState }: Props): void {
         const { editorState } = this.props;
@@ -52,36 +74,10 @@ export default class ReplyField extends React.Component<Props, State> {
     }
 
     componentWillUnmount(): void {
+        window.removeEventListener('resize', this.handleResize);
         this.saveCursorPosition();
     }
 
-    getCollaborators = (): Collaborator[] => {
-        const { collaborators, editorState } = this.props;
-
-        const activeMention = getActiveMentionForEditorState(editorState);
-        if (!activeMention) {
-            return [];
-        }
-
-        const trimmedQuery = activeMention.mentionString.trim();
-        // fuzzySearch doesn't match anything if query length is less than 2
-        // Compared to empty list, full list has a better user experience
-        if (trimmedQuery.length < 2) {
-            return collaborators;
-        }
-
-        return collaborators.filter(({ item }) => {
-            if (!item) {
-                return false;
-            }
-
-            const isNameMatch = fuzzySearch(trimmedQuery, item.name, 0);
-            const isEmailMatch = 'email' in item && fuzzySearch(trimmedQuery, item.email, 0);
-
-            return isNameMatch || isEmailMatch;
-        });
-    };
-
     getVirtualElement = (activeMention: Mention): VirtualElement | null => {
         const selection = window.getSelection();
         if (!selection?.focusNode) {
@@ -94,7 +90,7 @@ export default class ReplyField extends React.Component<Props, State> {
 
         const { mentionString, mentionTrigger } = activeMention;
         const offset = mentionString.length + mentionTrigger.length;
-        const mentionStart = currentCursor - offset;
+        const mentionStart = Math.max(0, currentCursor - offset);
 
         range.setStart(textNode, mentionStart);
         range.setEnd(textNode, mentionStart);
@@ -129,19 +125,20 @@ export default class ReplyField extends React.Component<Props, State> {
         event.stopPropagation();
     };
 
-    setPopupListActiveItem = (index: number): void => this.setState({ activeItemIndex: index });
+    setPopupListActiveItem = (index: number, autoScroll = false): void =>
+        this.setState({ activeItemIndex: index, popupAutoScroll: autoScroll });
 
     handleChange = (nextEditorState: EditorState): void => {
         const { onChange } = this.props;
 
+        this.fetchCollaborators(nextEditorState);
         onChange(nextEditorState);
     };
 
     handleSelect = (index: number): void => {
-        const { editorState } = this.props;
+        const { collaborators, editorState } = this.props;
 
         const activeMention = getActiveMentionForEditorState(editorState);
-        const collaborators = this.getCollaborators();
         const editorStateWithLink = addMention(editorState, activeMention, collaborators[index]);
 
         this.handleChange(editorStateWithLink);
@@ -162,8 +159,9 @@ export default class ReplyField extends React.Component<Props, State> {
     };
 
     handleArrow = (event: React.KeyboardEvent): number => {
+        const { collaborators } = this.props;
         const { popupReference } = this.state;
-        const { length } = this.getCollaborators();
+        const { length } = collaborators;
 
         if (!popupReference || !length) {
             return 0;
@@ -182,7 +180,7 @@ export default class ReplyField extends React.Component<Props, State> {
             return;
         }
 
-        this.setPopupListActiveItem(activeItemIndex === 0 ? length - 1 : activeItemIndex - 1);
+        this.setPopupListActiveItem(activeItemIndex === 0 ? length - 1 : activeItemIndex - 1, true);
     };
 
     handleDownArrow = (event: React.KeyboardEvent): void => {
@@ -193,12 +191,14 @@ export default class ReplyField extends React.Component<Props, State> {
             return;
         }
 
-        this.setPopupListActiveItem(activeItemIndex === length - 1 ? 0 : activeItemIndex + 1);
+        this.setPopupListActiveItem(activeItemIndex === length - 1 ? 0 : activeItemIndex + 1, true);
     };
 
+    handleMouseDown = (event: React.SyntheticEvent): void => event.preventDefault(); // prevent the blur event so that Editor can remain focus
+
     render(): JSX.Element {
-        const { className, editorState, isDisabled, itemRowAs, placeholder, ...rest } = this.props;
-        const { activeItemIndex, popupReference } = this.state;
+        const { className, collaborators, editorState, isDisabled, placeholder, ...rest } = this.props;
+        const { activeItemIndex, popupAutoScroll, popupReference } = this.state;
 
         return (
             <div className={classnames(className, 'ba-ReplyField')}>
@@ -218,9 +218,10 @@ export default class ReplyField extends React.Component<Props, State> {
                 {popupReference && (
                     <PopupList
                         activeItemIndex={activeItemIndex}
-                        itemRowAs={itemRowAs}
-                        items={this.getCollaborators()}
+                        autoScroll={popupAutoScroll}
+                        items={collaborators}
                         onActivate={this.setPopupListActiveItem}
+                        onMouseDown={this.handleMouseDown}
                         onSelect={this.handleSelect}
                         reference={popupReference}
                     />

package/src/components/ReplyField/ReplyFieldContainer.tsx

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { AppState, getCollaborators, getCreatorCursor, setCursorAction } from '../../store';
+import { AppState, fetchCollaboratorsAction, getCollaborators, getCreatorCursor, setCursorAction } from '../../store';
 import ReplyField from './ReplyField';
 import { Collaborator } from '../../@types';
 
@@ -14,6 +14,7 @@ export const mapStateToProps = (state: AppState): Props => ({
 });
 
 export const mapDispatchToProps = {
+    fetchCollaborators: fetchCollaboratorsAction,
     setCursorPosition: setCursorAction,
 };
 

package/src/components/ReplyForm/ReplyButton.tsx

@@ -0,0 +1,38 @@
+import React, { HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+
+export type Props = {
+    children?: React.ReactNode;
+    isDisabled?: boolean;
+    isPrimary?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    type: 'button' | 'submit' | 'reset' | undefined;
+} & HTMLAttributes<HTMLButtonElement>;
+
+export default function ReplyButton({ children, isDisabled, isPrimary, onClick = noop, ...rest }: Props): JSX.Element {
+    const handleClick = (event: React.MouseEvent): void => {
+        if (isDisabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+
+        onClick(event);
+    };
+
+    return (
+        <button
+            aria-disabled={isDisabled ? true : undefined}
+            className={classNames('btn', {
+                'btn-primary': isPrimary,
+                'is-disabled': isDisabled,
+            })}
+            onClick={handleClick}
+            type="button"
+            {...rest}
+        >
+            {children}
+        </button>
+    );
+}

package/src/components/ReplyForm/ReplyForm.scss

@@ -0,0 +1,3 @@
+.ba-ReplyForm {
+    margin: 0;
+}