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

package/src/components/ItemList/ItemRow.tsx

@@ -1,31 +1,52 @@
-import React from 'react';
-import DatalistItem from 'box-ui-elements/es/components/datalist-item';
-import { UserMini, GroupMini } from '../../@types';
+import * as React from 'react';
+import classNames from 'classnames';
+import { Collaborator } from '../../@types';
 import './ItemRow.scss';
 
 export type Props = {
-    id?: string;
-    item?: UserMini | GroupMini;
-    name?: string;
+    className?: string;
+    isActive?: boolean;
+    item: Collaborator;
+    onClick?: (event: React.SyntheticEvent) => void;
+    onMouseDown?: (event: React.SyntheticEvent) => void;
+    onMouseEnter?: (event: React.SyntheticEvent) => void;
 };
 
-const ItemRow = ({ item, ...rest }: Props): JSX.Element | null => {
-    if (!item || !item.name) {
+export type ItemRowRef = HTMLLIElement;
+
+const ItemRow = (props: Props, ref: React.Ref<ItemRowRef>): JSX.Element | null => {
+    const { className, isActive, item: collaborator, onClick, onMouseDown, onMouseEnter } = props;
+
+    if (!collaborator || !collaborator.item || !collaborator.item.name) {
         return null;
     }
 
+    const { item } = collaborator; // Nested item has id, name, and email (if a user type)
+
     return (
-        <DatalistItem {...rest}>
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        <li
+            ref={ref}
+            aria-selected={isActive}
+            className={classNames(className, 'ba-ItemRow', { 'is-active': isActive })}
+            data-resin-target="atMention"
+            data-testid="ba-ItemRow"
+            onClick={onClick}
+            onMouseDown={onMouseDown}
+            onMouseEnter={onMouseEnter}
+            role="option"
+        >
             <div className="ba-ItemRow-name" data-testid="ba-ItemRow-name">
                 {item.name}
             </div>
-            {'email' in item && (
+
+            {item.type === 'user' && item.email && (
                 <div className="ba-ItemRow-email" data-testid="ba-ItemRow-email">
                     {item.email}
                 </div>
             )}
-        </DatalistItem>
+        </li>
     );
 };
 
-export default ItemRow;
+export default React.forwardRef(ItemRow);

package/src/components/PointerCapture/PointerCapture.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import { MOUSE_PRIMARY } from '../../constants';
+
+export enum Status {
+    dragging = 'dragging',
+    drawing = 'drawing',
+    init = 'init',
+}
+
+export type PointerCaptureRef = HTMLDivElement;
+
+export type Props = {
+    children?: React.ReactNode;
+    className?: string;
+    onDrawStart: (x: number, y: number) => void;
+    onDrawStop: () => void;
+    onDrawUpdate: (x: number, y: number) => void;
+    onMouseOut?: () => void;
+    onMouseOver?: () => void;
+    status: Status;
+};
+
+function PointerCapture(props: Props, ref: React.Ref<PointerCaptureRef>): JSX.Element {
+    const {
+        children,
+        className,
+        onDrawStart,
+        onDrawStop,
+        onDrawUpdate,
+        onMouseOut = noop,
+        onMouseOver = noop,
+        status,
+        ...rest
+    } = props;
+
+    // Event Handlers
+    const handleClick = (event: React.MouseEvent): void => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const handleMouseDown = ({ buttons, clientX, clientY }: React.MouseEvent): void => {
+        if (buttons !== MOUSE_PRIMARY) {
+            return;
+        }
+
+        onDrawStart(clientX, clientY);
+    };
+    const handleMouseOut = (): void => {
+        onMouseOut();
+    };
+    const handleMouseOver = (): void => {
+        onMouseOver();
+    };
+    const handleTouchCancel = (): void => {
+        onDrawStop();
+    };
+    const handleTouchEnd = (): void => {
+        onDrawStop();
+    };
+    const handleTouchMove = ({ targetTouches }: React.TouchEvent): void => {
+        onDrawUpdate(targetTouches[0].clientX, targetTouches[0].clientY);
+    };
+    const handleTouchStart = ({ targetTouches }: React.TouchEvent): void => {
+        onDrawStart(targetTouches[0].clientX, targetTouches[0].clientY);
+    };
+
+    React.useEffect(() => {
+        const handleMouseMove = ({ buttons, clientX, clientY }: MouseEvent): void => {
+            if (buttons !== MOUSE_PRIMARY || status === Status.init) {
+                return;
+            }
+
+            onDrawUpdate(clientX, clientY);
+        };
+        const handleMouseUp = (): void => {
+            onDrawStop();
+        };
+
+        // Document-level mousemove and mouseup event listeners allow the creator component to respond even if
+        // the cursor leaves the drawing area before the mouse button is released, which finishes the shape
+        if (status !== Status.init) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        }
+
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [onDrawStop, onDrawUpdate, status]);
+
+    return (
+        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+        <div
+            ref={ref}
+            className={className}
+            onClick={handleClick}
+            onMouseDown={handleMouseDown}
+            onMouseOut={handleMouseOut}
+            onMouseOver={handleMouseOver}
+            onTouchCancel={handleTouchCancel}
+            onTouchEnd={handleTouchEnd}
+            onTouchMove={handleTouchMove}
+            onTouchStart={handleTouchStart}
+            role="presentation"
+            {...rest}
+        >
+            {children}
+        </div>
+    );
+}
+
+export { PointerCapture as PointerCaptureBase };
+
+export default React.forwardRef(PointerCapture);

package/src/components/PointerCapture/index.ts

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

package/src/components/Popups/Popper.ts

@@ -4,6 +4,7 @@ import unionBy from 'lodash/unionBy';
 
 export type Instance = popper.Instance;
 export type Options = popper.Options;
+export type Rect = popper.Rect;
 export type State = popper.State;
 export type VirtualElement = popper.VirtualElement;
 

package/src/components/Popups/PopupArrow.scss

@@ -0,0 +1,91 @@
+@mixin ba-PopupArrow($size, $top-bg, $right-bg, $bottom-bg, $left-bg, $border-color) {
+    // Top-facing arrows
+    &[data-popper-placement*='bottom'] {
+        .ba-Popup-arrow {
+            top: -#{$size - 1};
+
+            &::before,
+            &::after {
+                transform: rotate(180deg) translateX(50%);
+            }
+
+            &::after {
+                top: 1px;
+                border-top-color: $top-bg;
+            }
+        }
+    }
+
+    // Right-facing arrows
+    &[data-popper-placement*='left'] {
+        .ba-Popup-arrow {
+            right: 0;
+
+            &::before,
+            &::after {
+                transform: rotate(-90deg) translateY(-100%);
+                transform-origin: center top;
+            }
+
+            &::after {
+                left: -1px;
+                border-top-color: $right-bg;
+            }
+        }
+    }
+
+    // Left-facing arrows
+    &[data-popper-placement*='right'] {
+        .ba-Popup-arrow {
+            left: -#{$size - 1};
+
+            &::before,
+            &::after {
+                transform: rotate(90deg);
+                transform-origin: center top;
+            }
+
+            &::after {
+                left: 1px;
+                border-top-color: $left-bg;
+            }
+        }
+    }
+
+    // Bottom-facing arrows
+    &[data-popper-placement*='top'] {
+        .ba-Popup-arrow {
+            top: auto;
+            bottom: 0;
+
+            &::before,
+            &::after {
+                transform: rotate(0) translateX(-50%);
+            }
+
+            &::after {
+                top: -1px;
+                border-top-color: $bottom-bg;
+            }
+        }
+    }
+
+    .ba-Popup-arrow {
+        &::before,
+        &::after {
+            position: absolute;
+            display: block;
+            border-right: $size solid transparent;
+            border-left: $size solid transparent;
+            content: '';
+        }
+
+        &::before {
+            border-top: $size solid $border-color;
+        }
+
+        &::after {
+            border-top: $size solid;
+        }
+    }
+}

package/src/components/Popups/PopupBase.scss

@@ -1,100 +1,31 @@
 @import '~box-ui-elements/es/styles/variables';
+@import './PopupArrow';
 
 .ba {
-    $popup-arrow-size: 12px;
     $popup-content-bg: $white;
     $popup-border-color: $bdl-gray-20;
     $popup-footer-bg: $bdl-gray-02;
 
     .ba-Popup {
         @include common-typography;
+        @include ba-PopupArrow(12px, $popup-content-bg, $popup-content-bg, $popup-footer-bg, $popup-content-bg, $popup-border-color);
 
-        z-index: 1;
-
-        // Top-facing arrows
-        &[data-popper-placement*='bottom'] {
-            .ba-Popup-arrow {
-                top: -#{$popup-arrow-size - 1};
-
-                &::before,
-                &::after {
-                    transform: rotate(180deg) translateX(50%);
-                }
-
-                &::after {
-                    top: 1px;
-                }
-            }
-        }
-
-        // Right-facing arrows
-        &[data-popper-placement*='left'] {
-            .ba-Popup-arrow {
-                right: 0;
-
-                &::before,
-                &::after {
-                    transform: rotate(-90deg) translateY(-100%);
-                    transform-origin: center top;
-                }
-
-                &::after {
-                    left: -1px;
-                }
-            }
-        }
-
-        // Left-facing arrows
-        &[data-popper-placement*='right'] {
-            .ba-Popup-arrow {
-                left: -#{$popup-arrow-size - 1};
-
-                &::before,
-                &::after {
-                    transform: rotate(90deg);
-                    transform-origin: center top;
-                }
-
-                &::after {
-                    left: 1px;
-                }
-            }
-        }
-
-        // Bottom-facing arrows
-        &[data-popper-placement*='top'] {
-            .ba-Popup-arrow {
-                top: auto;
-                bottom: 0;
-
-                &::before,
-                &::after {
-                    transform: rotate(0) translateX(-50%);
-                }
-
-                &::after {
-                    top: -1px;
-                }
-            }
-        }
+        z-index: 1; // Make sure popup is showing above Preview controls and left/right arrows
     }
 
-    .ba-Popup-arrow {
-        &::before,
-        &::after {
-            position: absolute;
-            display: block;
-            border-right: $popup-arrow-size solid transparent;
-            border-left: $popup-arrow-size solid transparent;
-            content: '';
+    // The following media query is specific to IE10+
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        .ba-Popup {
+            z-index: 0; // Changing z-index causes page to flicker in IE11
         }
 
-        &::before {
-            border-top: $popup-arrow-size solid $popup-border-color;
+        .ba-ItemList {
+            // stylelint-disable-next-line declaration-no-important
+            max-height: 140px !important; // Prevent list overflow onto subsequent pages in IE11
         }
 
-        &::after {
-            border-top: $popup-arrow-size solid $popup-content-bg;
+        .ba-ReplyForm {
+            opacity: .99; // Creates a new stacking context so that the collaborators list shows on top of the ba-Popup-footer
         }
     }
 

package/src/components/Popups/PopupBase.tsx

@@ -60,7 +60,6 @@ export default class PopupBase extends React.PureComponent<Props> {
 
     handleEvent = (event: React.SyntheticEvent): void => {
         event.stopPropagation();
-        event.nativeEvent.stopImmediatePropagation();
     };
 
     render(): JSX.Element {

package/src/components/Popups/PopupCursor.tsx

@@ -50,7 +50,7 @@ export default function PopupCursor(): JSX.Element {
         return () => {
             document.removeEventListener('mousemove', handleMouseMove);
         };
-    });
+    }, []);
 
     return (
         <PopupBase ref={popupRef} className="ba-PopupCursor" options={options} reference={virtualElementRef.current}>

package/src/components/Popups/PopupDrawingToolbar.scss

@@ -0,0 +1,76 @@
+@import '~box-ui-elements/es/styles/variables';
+
+@mixin ba-PopupDrawingToolbarButton($width: 32px, $height: 32px) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $width;
+    height: $height;
+    padding: 0;
+    color: $white;
+    background: transparent;
+    border: none;
+    border-radius: $bdl-border-radius-size;
+    outline: none;
+    cursor: pointer;
+    opacity: .7;
+    transition: opacity 200ms ease;
+
+    &:focus,
+    &:hover {
+        opacity: 1;
+    }
+
+    &[disabled] {
+        cursor: default;
+        opacity: .2;
+    }
+}
+
+.ba-PopupDrawingToolbar {
+    background-color: $bdl-gray;
+    border-radius: $bdl-border-radius-size;
+
+    .ba-Popup-arrow {
+        display: none;
+    }
+
+    .ba-Popup-content {
+        display: flex;
+        background-color: $bdl-gray;
+        border: none;
+        border-radius: $bdl-border-radius-size;
+        box-shadow: none;
+    }
+}
+
+.ba-PopupDrawingToolbar-group {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & + & {
+        border-left: 1px solid #000;
+    }
+}
+
+.ba-PopupDrawingToolbar-delete,
+.ba-PopupDrawingToolbar-redo,
+.ba-PopupDrawingToolbar-undo {
+    @include ba-PopupDrawingToolbarButton;
+
+    path {
+        fill: #fff;
+    }
+}
+
+.ba-PopupDrawingToolbar-comment {
+    @include ba-PopupDrawingToolbarButton($width: max-content);
+    @include common-typography;
+
+    padding-right: 18px;
+    padding-left: 18px;
+    color: $white;
+    font-weight: bold;
+}

package/src/components/Popups/PopupDrawingToolbar.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormattedMessage, useIntl } from 'react-intl';
+import IconRedo from 'box-ui-elements/es/icon/line/Redo16';
+import IconTrash from 'box-ui-elements/es/icon/line/Trash16';
+import IconUndo from 'box-ui-elements/es/icon/line/Undo16';
+import messages from './messages';
+import PopupBase from './PopupBase';
+import { Options, PopupReference, Rect } from './Popper';
+import './PopupDrawingToolbar.scss';
+
+export type PopupBaseRef = PopupBase;
+
+export type Props = {
+    canComment: boolean;
+    canRedo: boolean;
+    canUndo: boolean;
+    className?: string;
+    onDelete: () => void;
+    onRedo: () => void;
+    onReply: () => void;
+    onUndo: () => void;
+    reference: PopupReference;
+};
+
+const options: Partial<Options> = {
+    modifiers: [
+        {
+            name: 'eventListeners',
+            options: {
+                scroll: false,
+            },
+        },
+        {
+            name: 'offset',
+            options: {
+                offset: ({ popper }: { popper: Rect }) => [-popper.width / 2, 8],
+            },
+        },
+        {
+            name: 'preventOverflow',
+            options: {
+                altAxis: true,
+                padding: 50,
+            },
+        },
+    ],
+    placement: 'top',
+};
+
+const PopupDrawingToolbar = (props: Props, ref: React.Ref<PopupBaseRef>): JSX.Element => {
+    const { canComment, canRedo, canUndo, className, onDelete, onRedo, onReply, onUndo, reference } = props;
+    const intl = useIntl();
+
+    return (
+        <PopupBase
+            ref={ref}
+            className={classNames(className, 'ba-PopupDrawingToolbar')}
+            data-resin-component="popupDrawingToolbar"
+            options={options}
+            reference={reference}
+        >
+            <div className="ba-PopupDrawingToolbar-group">
+                <button
+                    className="ba-PopupDrawingToolbar-undo"
+                    data-testid="ba-PopupDrawingToolbar-undo"
+                    disabled={!canUndo}
+                    onClick={() => onUndo()}
+                    title={intl.formatMessage(messages.drawingButtonUndo)}
+                    type="button"
+                >
+                    <IconUndo />
+                </button>
+                <button
+                    className="ba-PopupDrawingToolbar-redo"
+                    data-testid="ba-PopupDrawingToolbar-redo"
+                    disabled={!canRedo}
+                    onClick={() => onRedo()}
+                    title={intl.formatMessage(messages.drawingButtonRedo)}
+                    type="button"
+                >
+                    <IconRedo />
+                </button>
+                <button
+                    className="ba-PopupDrawingToolbar-delete"
+                    data-testid="ba-PopupDrawingToolbar-delete"
+                    onClick={() => onDelete()}
+                    title={intl.formatMessage(messages.drawingButtonDelete)}
+                    type="button"
+                >
+                    <IconTrash />
+                </button>
+            </div>
+            <div className="ba-PopupDrawingToolbar-group">
+                <button
+                    className="ba-PopupDrawingToolbar-comment"
+                    data-testid="ba-PopupDrawingToolbar-comment"
+                    disabled={!canComment}
+                    onClick={() => onReply()}
+                    type="button"
+                >
+                    <FormattedMessage {...messages.drawingButtonAddComment} />
+                </button>
+            </div>
+        </PopupBase>
+    );
+};
+
+export default React.forwardRef(PopupDrawingToolbar);

package/src/components/Popups/PopupHighlight.scss

@@ -0,0 +1,39 @@
+@import '~box-ui-elements/es/styles/variables';
+@import './PopupArrow';
+
+.ba {
+    $popup-content-bg: $bdl-gray;
+
+    .ba-PopupHighlight {
+        @include ba-PopupArrow(4px, $popup-content-bg, $popup-content-bg, $popup-content-bg, $popup-content-bg, $popup-content-bg);
+
+        .ba-Popup-content {
+            background-color: $popup-content-bg;
+            border: none;
+            border-radius: $bdl-border-radius-size;
+            box-shadow: none;
+        }
+    }
+
+    .ba-PopupHighlight-button {
+        @include common-typography;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 5px 10px;
+        color: $white;
+        background: transparent;
+        border: none;
+        border-radius: $bdl-border-radius-size;
+        cursor: pointer;
+    }
+
+    .ba-PopupHighlight-icon {
+        margin-right: 8px;
+
+        path {
+            fill: $white;
+        }
+    }
+}