box-ui-elements 16.0.0-beta.8 → 16.0.0

package/src/common/types/feed.js

@@ -1,14 +1,30 @@
 // @flow strict
 import type { MessageDescriptor } from 'react-intl';
+import {
+    COMMENT_STATUS_OPEN,
+    COMMENT_STATUS_RESOLVED,
+    FEED_ITEM_TYPE_ANNOTATION,
+    FEED_ITEM_TYPE_APP_ACTIVITY,
+    FEED_ITEM_TYPE_COMMENT,
+    FEED_ITEM_TYPE_TASK,
+} from '../../constants';
 import type { BoxItemPermission, BoxItemVersion, Reply, User } from './core';
 import type { Annotation, AnnotationPermission, Annotations } from './annotations';
 
 // Feed item types that can receive deeplinks inline in the feed
-type FocusableFeedItemType = 'task' | 'comment' | 'annotation';
+type FocusableFeedItemType =
+    | typeof FEED_ITEM_TYPE_TASK
+    | typeof FEED_ITEM_TYPE_COMMENT
+    | typeof FEED_ITEM_TYPE_ANNOTATION;
+
+// Feed item types that represent user's written response (that also can have replies)
+type CommentFeedItemType = typeof FEED_ITEM_TYPE_COMMENT | typeof FEED_ITEM_TYPE_ANNOTATION;
 
 type BoxCommentPermission = {
     can_delete?: boolean,
     can_edit?: boolean,
+    can_reply?: boolean,
+    can_resolve?: boolean,
 };
 
 type BoxTaskPermission = {
@@ -22,11 +38,14 @@ type BaseFeedItem = {|
     id: string,
 |};
 
+// Used in Annotation and Comment
+type FeedItemStatus = typeof COMMENT_STATUS_OPEN | typeof COMMENT_STATUS_RESOLVED;
+
 // this is a subset of TaskNew, which imports as `any`
 type Task = {
     ...BaseFeedItem,
     permissions: BoxTaskPermission,
-    type: 'task',
+    type: typeof FEED_ITEM_TYPE_TASK,
 };
 
 type Tasks = {
@@ -36,12 +55,20 @@ type Tasks = {
 
 type Comment = {
     ...BaseFeedItem,
+    isRepliesLoading?: boolean,
     is_reply_comment?: boolean,
     message?: string,
     modified_at: string,
+    parent?: {
+        id: string,
+        type: CommentFeedItemType,
+    },
     permissions: BoxCommentPermission,
+    replies?: Array<Comment>,
+    status?: FeedItemStatus,
     tagged_message: string,
-    type: 'comment',
+    total_reply_count?: number,
+    type: typeof FEED_ITEM_TYPE_COMMENT,
 };
 
 type Comments = {
@@ -49,6 +76,12 @@ type Comments = {
     total_count: number,
 };
 
+type ThreadedComments = {
+    entries: Array<Comment>,
+    limit: number,
+    next_marker: string,
+};
+
 type ActivityTemplateItem = {|
     id: string,
     type: 'activity_template',
@@ -67,7 +100,7 @@ type BaseAppActivityItem = {|
     created_by: User,
     id: string,
     rendered_text: string,
-    type: 'app_activity',
+    type: typeof FEED_ITEM_TYPE_APP_ACTIVITY,
 |};
 
 type AppActivityAPIItem = {|
@@ -117,11 +150,14 @@ export type {
     AppItem,
     BoxCommentPermission,
     Comment,
+    CommentFeedItemType,
     Comments,
     FeedItem,
     FeedItems,
+    FeedItemStatus,
     FocusableFeedItemType,
     Reply,
     Task,
     Tasks,
+    ThreadedComments,
 };

package/src/components/accessible-svg/AccessibleSVG.stories.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import * as vars from '../../styles/variables';
+import AccessibleSVG, { SVGProps } from './AccessibleSVG';
+
+export const IconExample = (props: SVGProps) => (
+    <AccessibleSVG width={32} height={32} viewBox="0 0 32 32" {...props}>
+        <path
+            fill={vars.bdlGray50}
+            d="M9 3h9.172a2 2 0 011.414.586l5.83 5.828A2 2 0 0126 10.83V26a3 3 0 01-3 3H9a3 3 0 01-3-3V6a3 3 0 013-3z"
+        />
+    </AccessibleSVG>
+);
+
+export default {
+    title: 'Components|AccessibleSVG',
+    component: AccessibleSVG,
+};

package/src/components/badge/Badge.stories.md

@@ -2,16 +2,10 @@
 
 ### Common Badges
 
-These badges are used across all apps so they've been prebuilt here.
-
-#### Beta
+These badges are used across all apps so they've been prebuilt here:
 
 `import BetaBadge from 'box-ui-elements/es/components/badge/BetaBadge';`
 
-#### Trial
-
 `import TrialBadge from 'box-ui-elements/es/components/badge/TrialBadge';`
 
-#### Upgrade
-
 `import UpgradeBadge from 'box-ui-elements/es/components/badge/UpgradeBadge';`

package/src/components/badge/Badge.stories.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 
 import Badge from './Badge';
-import BetaBadge from './BetaBadge';
-import TrialBadge from './TrialBadge';
-import UpgradeBadge from './UpgradeBadge';
 import notes from './Badge.stories.md';
 import { BadgeType } from './types';
 
@@ -21,14 +18,8 @@ export const alert = () => <Badge type={BadgeType.ALERT}>Alert Badge</Badge>;
 
 export const success = () => <Badge type={BadgeType.SUCCESS}>Success Badge</Badge>;
 
-export const betaBadge = () => <BetaBadge />;
-
-export const trialBadge = () => <TrialBadge />;
-
-export const upgradeBadge = () => <UpgradeBadge />;
-
 export default {
-    title: 'Components|Badge',
+    title: 'Components|Badges/Badge',
     component: Badge,
     parameters: {
         notes,

package/src/components/badge/BetaBadge.stories.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import BetaBadge from './BetaBadge';
+
+export const betaBadge = () => <BetaBadge />;
+
+export default {
+    title: 'Components|Badges/BetaBadge',
+    component: BetaBadge,
+};

package/src/components/badge/TrialBadge.stories.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import TrialBadge from './TrialBadge';
+
+export const trialBadge = () => <TrialBadge />;
+
+export default {
+    title: 'Components|Badges/TrialBadge',
+    component: TrialBadge,
+};

package/src/components/badge/UpgradeBadge.stories.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import UpgradeBadge from './UpgradeBadge';
+
+export const upgradeBadge = () => <UpgradeBadge />;
+
+export default {
+    title: 'Components|Badges/UpgradeBadge',
+    component: UpgradeBadge,
+};

package/src/components/breadcrumb/Breadcrumb.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
 import type { InjectIntlProvidedProps } from 'react-intl';
+import classNames from 'classnames';
 
 import { MenuLinkItem } from '../menu';
 import EllipsisCrumb from './EllipsisCrumb';
@@ -10,53 +11,78 @@ import messages from './messages';
 
 import './Breadcrumb.scss';
 
-const constructChildren = (children, threshold) => {
-    const dotDotDotItems = children.slice(1, children.length + 1 - threshold);
-    const menuCrumbsItems = (
-        <EllipsisCrumb>
-            {dotDotDotItems.reverse().map((crumb, index) => (
-                <MenuLinkItem key={index}>{crumb}</MenuLinkItem>
-            ))}
-        </EllipsisCrumb>
-    );
-    return [...children.slice(0, 1), menuCrumbsItems, ...children.slice(1 - threshold)];
-};
-
-const renderBreadcrumbs = (children, threshold) => {
-    let newChildren = children;
-    let { length } = children;
-    let hasEllipsis = false;
-
-    if (length > threshold) {
-        newChildren = constructChildren(children, threshold);
-        length = newChildren.length;
-        hasEllipsis = true;
-    }
-
-    return React.Children.map(newChildren, (item, i) => {
-        const isLastCrumb = length === 0 || i === length - 1;
-        return (
-            <Crumb className={hasEllipsis && i === 1 ? 'no-shrink' : undefined} isLastCrumb={isLastCrumb}>
-                {item}
-            </Crumb>
-        );
-    });
-};
-
-type Props = {
-    /** Class name for Breadcrumb */
-    children: React.Node,
+export type BreadcrumbProps = {
     /** Breadcrumb contents */
+    children: React.Node,
+    /** Class name for Breadcrumb */
     className?: string,
+    /** Reverse default overflow breadcrumb ordering to highest to lowest depth */
+    hasReverseOverflowOrder?: boolean,
+    /** Show number of breadcrumb items before overflow. Default is 1 */
+    numItemsBeforeOverflow?: number,
+    /** Element to override default overflow menu button */
+    overflowMenuButton?: React.Node,
     /** Number of crumbs to show before they collapse into an ellipsis */
     threshold?: number,
-} & InjectIntlProvidedProps;
+};
 
-const Breadcrumb = ({ className = '', intl, threshold = 4, children }: Props) => (
-    <nav aria-label={intl.formatMessage(messages.breadcrumbLabel)} className={`breadcrumbs ${className}`}>
-        <ol>{renderBreadcrumbs(React.Children.toArray(children), threshold)}</ol>
-    </nav>
-);
+type Props = BreadcrumbProps & InjectIntlProvidedProps;
+
+const Breadcrumb = ({
+    children,
+    className = '',
+    hasReverseOverflowOrder = false,
+    intl,
+    numItemsBeforeOverflow = 1,
+    overflowMenuButton,
+    threshold = 4,
+}: Props) => {
+    const breadcrumbs = React.Children.toArray(children);
+
+    const constructChildren = () => {
+        const overflowItems = breadcrumbs.slice(numItemsBeforeOverflow, breadcrumbs.length + 1 - threshold);
+        const dotDotDotItems = hasReverseOverflowOrder ? overflowItems : overflowItems.reverse();
+
+        const menuCrumbsItems = (
+            <EllipsisCrumb menuButton={overflowMenuButton}>
+                {dotDotDotItems.map((crumb, index) => (
+                    <MenuLinkItem key={index}>{crumb}</MenuLinkItem>
+                ))}
+            </EllipsisCrumb>
+        );
+        return [...breadcrumbs.slice(0, numItemsBeforeOverflow), menuCrumbsItems, ...breadcrumbs.slice(1 - threshold)];
+    };
+
+    const renderBreadcrumbs = () => {
+        let newChildren = breadcrumbs;
+        let { length } = breadcrumbs;
+        let hasEllipsis = false;
+
+        if (length > threshold) {
+            newChildren = constructChildren();
+            length = newChildren.length;
+            hasEllipsis = true;
+        }
+
+        return React.Children.map(newChildren, (item, i) => {
+            const isLastCrumb = length === 0 || i === length - 1;
+            return (
+                <Crumb
+                    className={classNames({ 'no-shrink': hasEllipsis && i === numItemsBeforeOverflow })}
+                    isLastCrumb={isLastCrumb}
+                >
+                    {item}
+                </Crumb>
+            );
+        });
+    };
+
+    return (
+        <nav aria-label={intl.formatMessage(messages.breadcrumbLabel)} className={classNames('breadcrumbs', className)}>
+            <ol>{renderBreadcrumbs()}</ol>
+        </nav>
+    );
+};
 
 export { Breadcrumb as BreadcrumbCore };
 export default injectIntl(Breadcrumb);

package/src/components/breadcrumb/EllipsisCrumb.js

@@ -7,13 +7,17 @@ import PlainButton from '../plain-button';
 
 type Props = {
     children: React.Node,
+    menuButton?: React.Node,
 };
 
-const EllipsisCrumb = ({ children }: Props) => (
-    <DropdownMenu>
-        <PlainButton className="breadcrumb-toggler">⋯</PlainButton>
-        <Menu>{children}</Menu>
-    </DropdownMenu>
-);
+const EllipsisCrumb = ({ children, menuButton }: Props) => {
+    const defaultMenuButton = <PlainButton className="breadcrumb-toggler">⋯</PlainButton>;
+    return (
+        <DropdownMenu>
+            {menuButton || defaultMenuButton}
+            <Menu>{children}</Menu>
+        </DropdownMenu>
+    );
+};
 
 export default EllipsisCrumb;

package/src/components/count-badge/CountBadge.stories.tsx

@@ -12,7 +12,7 @@ export const withHTMLSymbol1 = () => <CountBadge isVisible value={String.fromCha
 export const withHTMLSymbol2 = () => <CountBadge isVisible value={String.fromCharCode(215)} />;
 
 export default {
-    title: 'Components|CountBadge',
+    title: 'Components|Badges/CountBadge',
     component: CountBadge,
     parameters: {
         notes,

package/src/components/draggable-list/DraggableList.stories.tsx

@@ -1,11 +1,78 @@
 import * as React from 'react';
-import DraggableList from '../../../examples/src/DraggableListExamples';
+import uniqueId from 'lodash/uniqueId';
+
+import Checkbox from '../checkbox/Checkbox';
+import DraggableList from './DraggableList';
+import DraggableListItem from './DraggableListItem';
+import reorder, { ReorderListItem } from './draggable-list-utils/reorder';
+
 import notes from './DraggableList.stories.md';
 
-export const example = () => {
-    const isDraggableViaHandle = true;
-    return <DraggableList isDraggableViaHandle={isDraggableViaHandle} />;
-};
+interface Props {
+    isDraggableViaHandle?: boolean;
+}
+
+interface State {
+    items: Array<ReorderListItem>;
+    listId: string;
+}
+
+class DraggableListExamples extends React.Component<Props, State> {
+    state = {
+        items: [],
+        listId: '',
+    };
+
+    componentDidMount() {
+        this.setState({
+            items: this.getItems(10),
+            listId: uniqueId(),
+        });
+    }
+
+    getItems = (count: number): Array<ReorderListItem> => {
+        return Array.from({ length: count }, (v, k) => k).map(k => ({
+            id: uniqueId('item_'),
+            label: `item ${k}`,
+        }));
+    };
+
+    onDragEnd = (sourceIndex: number, destinationIndex: number) => {
+        if (!destinationIndex) {
+            return;
+        }
+
+        const items = reorder(this.state.items, sourceIndex, destinationIndex);
+
+        this.setState({
+            items,
+        });
+    };
+
+    render() {
+        const { isDraggableViaHandle } = this.props;
+        const { items, listId } = this.state;
+
+        return (
+            <DraggableList className="draggable-list-example-container" listId={listId} onDragEnd={this.onDragEnd}>
+                {items.map((item: ReorderListItem, index) => (
+                    <DraggableListItem
+                        key={`draggable-${index}`}
+                        id={item.id}
+                        index={index}
+                        isDraggableViaHandle={isDraggableViaHandle}
+                    >
+                        <Checkbox label={item.label} name={item.label} />
+                    </DraggableListItem>
+                ))}
+            </DraggableList>
+        );
+    }
+}
+
+export const Example = () => <DraggableListExamples />;
+
+export const ExampleIsDraggableViaHandle = () => <DraggableListExamples isDraggableViaHandle />;
 
 export default {
     title: 'Components|DraggableList',

package/src/components/dropdown-menu/DropdownMenu.js

@@ -17,6 +17,8 @@ type Props = {
     constrainToScrollParent: boolean,
     /** Right aligns menu to button */
     constrainToWindow: boolean,
+    /** Forces menu to render within the visible window and pins the dropdown if scrolled */
+    constrainToWindowWithPin?: boolean,
     /** Enables responsive behaviors for this component */
     isResponsive?: boolean,
     /** Function called when menu is opened */
@@ -182,6 +184,7 @@ class DropdownMenu extends React.Component<Props, State> {
             className,
             constrainToScrollParent,
             constrainToWindow,
+            constrainToWindowWithPin,
             isResponsive,
             isRightAligned,
         } = this.props;
@@ -246,6 +249,14 @@ class DropdownMenu extends React.Component<Props, State> {
             });
         }
 
+        if (constrainToWindowWithPin) {
+            constraints.push({
+                to: 'window',
+                attachment: 'together',
+                pin: true,
+            });
+        }
+
         const bodyEl = bodyElement instanceof HTMLElement ? bodyElement : document.body;
 
         return (

package/src/components/dropdown-menu/DropdownMenu.scss

@@ -28,15 +28,15 @@
             bottom: 0;
             left: 0;
             margin-top: 0;
+            margin-bottom: $bdl-header-height;
             // cancels out the tether inline styling without having to set enabled=false
             transform: none !important;
         }
 
         .aria-menu:not(.submenu) {
-            position: relative;
             height: 100%;
-            margin: 0;
-            padding-top: $bdl-header-height + $bdl-grid-unit * 3;
+            margin-top: $bdl-header-height;
+            overflow: scroll;
             background-color: $bdl-gray-02;
             border: none;
             border-radius: 0;

package/src/components/dropdown-menu/__tests__/DropdownMenu.test.js

@@ -269,6 +269,44 @@ describe('components/dropdown-menu/DropdownMenu', () => {
                 },
             ]);
         });
+
+        test('should render TetherComponent with window constraints and pinned when constrainToWindowWithPin=true', () => {
+            const wrapper = shallow(
+                <DropdownMenu constrainToWindowWithPin>
+                    <FakeButton />
+                    <FakeMenu />
+                </DropdownMenu>,
+            );
+
+            expect(wrapper.prop('constraints')).toEqual([
+                {
+                    to: 'window',
+                    attachment: 'together',
+                    pin: true,
+                },
+            ]);
+        });
+
+        test('should render TetherComponent with window constraints, pinned and scroll parent when constrainToWindowWithPin=true and constrainToScrollParent=true', () => {
+            const wrapper = shallow(
+                <DropdownMenu constrainToScrollParent constrainToWindowWithPin>
+                    <FakeButton />
+                    <FakeMenu />
+                </DropdownMenu>,
+            );
+
+            expect(wrapper.prop('constraints')).toEqual([
+                {
+                    to: 'scrollParent',
+                    attachment: 'together',
+                },
+                {
+                    to: 'window',
+                    attachment: 'together',
+                    pin: true,
+                },
+            ]);
+        });
     });
 
     describe('openMenuAndSetFocusIndex()', () => {

package/src/components/grid-view/__tests__/__snapshots__/GridViewSlider.test.js.snap

@@ -7,6 +7,7 @@ exports[`components/grid-view/GridViewSlider should render() 1`] = `
     Object {
       "formatDate": [Function],
       "formatMessage": [Function],
+      "formatNumber": [Function],
       "formatRelativeTime": [Function],
     }
   }

package/src/components/infinite-scroll/InfiniteScroll.md

@@ -58,7 +58,7 @@ const hasMore = true;
       isLoading={isLoading}
       onLoadMore={onLoadMore}
       useWindow={false}
-      scrollContainerRef={scrollRef}
+      scrollContainerNode={scrollRef}
     >
       <React.Fragment>
         {items.map((item, i) => (

package/src/components/infinite-scroll/InfiniteScroll.tsx

@@ -23,7 +23,7 @@ export interface InfiniteScrollProps {
     threshold?: number;
     /** Throttle rate */
     throttle?: number;
-    /** Set useWindow to true to use the window as scroll container. If set to true, will ignore scrollContainerRef. */
+    /** Set useWindow to true to use the window as scroll container. If set to true, will ignore scrollContainerNode. */
     useWindow?: boolean;
 }
 
@@ -70,7 +70,7 @@ function InfiniteScroll({
     throttle = 64,
     useWindow = false,
 }: InfiniteScrollProps) {
-    const sentinelRef = React.createRef<HTMLDivElement>();
+    const sentinelRef = React.useRef<HTMLDivElement | null>(null);
 
     React.useEffect(() => {
         const params = {
@@ -93,6 +93,9 @@ function InfiniteScroll({
             container.addEventListener('resize', resizeHandler);
         }
 
+        // loads more content until page becomes scrollable, or until there is no more data to fetch
+        onContainerScroll(params);
+
         return function removeEventListeners() {
             if (container) {
                 container.removeEventListener('scroll', scrollHandler);