box-ui-elements 16.1.0-beta.9 → 17.0.0

package/src/features/content-explorer/item-list/ItemList.js

@@ -23,6 +23,8 @@ const TABLE_CELL_CLASS = 'table-cell';
 
 const InfiniteLoaderTable = withInfiniteLoader(Table);
 
+const DEFAULT_ROW_HEIGHT = 40;
+
 const withAutoSizer = WrappedComponent => {
     return props => {
         return (
@@ -123,6 +125,7 @@ const itemLoadingPlaceholderRenderer = rendererParams => {
 };
 
 const ItemList = ({
+    additionalColumns,
     contentExplorerMode,
     className = '',
     isResponsive = false,
@@ -134,6 +137,8 @@ const ItemList = ({
     onItemDoubleClick,
     onItemNameClick,
     onLoadMoreItems,
+    headerHeight,
+    headerRenderer,
     itemIconRenderer,
     itemNameLinkRenderer,
     itemButtonRenderer,
@@ -141,6 +146,7 @@ const ItemList = ({
     noItemsRenderer,
     width,
     height,
+    rowHeight = DEFAULT_ROW_HEIGHT,
 }) => {
     const getRow = ({ index }) => items[index];
 
@@ -204,6 +210,11 @@ const ItemList = ({
         };
     }
 
+    if (!noItemsRenderer || items.length > 0) {
+        tableProps.headerHeight = headerHeight;
+        tableProps.headerRowRenderer = headerRenderer;
+    }
+
     return (
         <div
             className={classNames('content-explorer-item-list table', className, {
@@ -215,7 +226,7 @@ const ItemList = ({
                 headerClassName="table-header-item"
                 width={width}
                 height={height}
-                rowHeight={40}
+                rowHeight={rowHeight}
                 rowCount={items.length}
                 onRowClick={onItemClick}
                 onRowDoubleClick={onItemDoubleClick}
@@ -246,6 +257,7 @@ const ItemList = ({
                     flexGrow={1}
                     flexShrink={0}
                 />
+                {additionalColumns}
                 <Column
                     className="item-list-button-col"
                     cellRenderer={itemButtonCellRenderer}
@@ -265,6 +277,7 @@ const ItemList = ({
 ItemList.displayName = 'ItemList';
 
 ItemList.propTypes = {
+    additionalColumns: PropTypes.arrayOf(PropTypes.element),
     className: PropTypes.string,
     contentExplorerMode: ContentExplorerModePropType.isRequired,
     isResponsive: PropTypes.bool,
@@ -276,6 +289,8 @@ ItemList.propTypes = {
     onItemDoubleClick: PropTypes.func,
     onItemNameClick: PropTypes.func,
     onLoadMoreItems: PropTypes.func,
+    headerHeight: PropTypes.number,
+    headerRenderer: PropTypes.func,
     itemIconRenderer: PropTypes.func,
     itemNameLinkRenderer: PropTypes.func,
     itemButtonRenderer: PropTypes.func,
@@ -283,6 +298,7 @@ ItemList.propTypes = {
     noItemsRenderer: PropTypes.func,
     width: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired,
+    rowHeight: PropTypes.number,
 };
 
 export { ItemList as ItemListBase };

package/src/features/content-explorer/item-list/ItemList.scss

@@ -9,7 +9,7 @@
 
 .content-explorer-item-list {
     .table-header-item {
-        color: $bdl-gray-62;
+        color: $bdl-gray-65;
         font-weight: normal;
         font-size: 14px;
         letter-spacing: .035em;

package/src/features/content-explorer/item-list/ItemListButton.js

@@ -9,12 +9,19 @@ import ContentExplorerModes from '../modes';
 
 import messages from '../messages';
 
-const ItemListButton = ({ contentExplorerMode, id = '', isDisabled = false, isSelected = false, name }) => {
+const ItemListButton = ({
+    contentExplorerMode,
+    id = '',
+    isChecked = false,
+    isDisabled = false,
+    isSelected = false,
+    name,
+}) => {
     if (contentExplorerMode === ContentExplorerModes.MULTI_SELECT) {
         return (
             <Checkbox
                 hideLabel
-                isChecked={!isDisabled && isSelected}
+                isChecked={isChecked || (!isDisabled && isSelected)}
                 isDisabled={isDisabled}
                 label={<FormattedMessage {...messages.selectItem} values={{ name }} />}
                 name="item"
@@ -38,6 +45,7 @@ const ItemListButton = ({ contentExplorerMode, id = '', isDisabled = false, isSe
 ItemListButton.propTypes = {
     contentExplorerMode: ContentExplorerModePropType.isRequired,
     id: PropTypes.string,
+    isChecked: PropTypes.bool,
     isDisabled: PropTypes.bool,
     isSelected: PropTypes.bool,
     name: PropTypes.string.isRequired,

package/src/features/content-explorer/item-list/ItemListIcon.js

@@ -1,40 +1,12 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import BookmarkIcon from '../../../icons/bookmark-icon';
-import FileIcon from '../../../icons/file-icon';
-import FolderIcon from '../../../icons/folder-icon';
+import PropTypes from 'prop-types';
 
-import ItemTypes from '../item-types';
 import { ItemTypePropType } from '../prop-types';
-import messages from '../messages';
+import IconCell from '../../../elements/common/item/IconCell';
 
-const ItemListIcon = ({ type, extension = '', hasCollaborations = false, isExternallyOwned = false }) => {
-    switch (type) {
-        case ItemTypes.FOLDER: {
-            let titleID = 'personalFolder';
-            if (hasCollaborations) {
-                titleID = 'collaboratedFolder';
-            } else if (isExternallyOwned) {
-                titleID = 'externalFolder';
-            }
-            return (
-                <FolderIcon
-                    isCollab={hasCollaborations}
-                    isExternal={isExternallyOwned}
-                    title={<FormattedMessage {...messages[titleID]} />}
-                />
-            );
-        }
-        case ItemTypes.FILE:
-            return <FileIcon extension={extension} title={<FormattedMessage {...messages.file} />} />;
-        case ItemTypes.BOOKMARK:
-            return <BookmarkIcon title={<FormattedMessage {...messages.bookmark} />} />;
-        default:
-            // Use generic file icon as fallback
-            return <FileIcon title={<FormattedMessage {...messages.file} />} />;
-    }
+const ItemListIcon = ({ type, extension, hasCollaborations = false, isExternallyOwned = false }) => {
+    const rowData = { type, extension, has_collaborations: hasCollaborations, is_externally_owned: isExternallyOwned };
+    return <IconCell rowData={rowData} />;
 };
 
 ItemListIcon.propTypes = {

package/src/features/content-explorer/item-list/ItemListName.js

@@ -4,13 +4,14 @@ import React from 'react';
 import PlainButton from '../../../components/plain-button';
 import IconChevron from '../../../icons/general/IconChevron';
 
-import ItemTypes from '../item-types';
 import { ItemTypePropType } from '../prop-types';
 
+import { TYPE_FOLDER } from '../../../constants';
+
 const ITEM_LIST_NAME_CLASS = 'item-list-name';
 
 const ItemListName = ({ itemId = '', type, name, label = '', isSelected = false, onClick, linkRenderer }) => {
-    const isFolder = type === ItemTypes.FOLDER;
+    const isFolder = type === TYPE_FOLDER;
 
     const linkProps = {
         className: `lnk ${ITEM_LIST_NAME_CLASS}`,

package/src/features/content-explorer/item-list/__tests__/ItemList.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import sinon from 'sinon';
 
+import { Column } from '@box/react-virtualized';
 import { ItemListBase as ItemList } from '../ItemList';
 import ContentExplorerMode from '../../modes';
 
@@ -267,4 +268,75 @@ describe('features/content-explorer/item-list/ItemList', () => {
             expect(wrapper.find('h1').text()).toEqual(emptyText);
         });
     });
+
+    describe('additionalColumns', () => {
+        test('should render extra column', () => {
+            const items = [
+                { id: '1', name: 'item1' },
+                { id: '2', name: 'item2' },
+                { id: '3', name: 'item3' },
+            ];
+
+            const additionalColumns = [
+                <Column
+                    key="accessLevel"
+                    className="item-list-accessLevel-col"
+                    dataKey="accessLevel"
+                    flexGrow={1}
+                    flexShrink={0}
+                    width={0}
+                />,
+            ];
+            const wrapper = renderComponent({ items, additionalColumns });
+            expect(wrapper.find('.item-list-accessLevel-col').length).toBe(3);
+        });
+    });
+
+    describe('headerHeight', () => {
+        const items = [{ id: '1', name: 'item1' }];
+        test('should display header row with specified height when item list is not empty', () => {
+            const headerHeight = 30;
+            const wrapper = renderComponent({
+                headerHeight,
+                items,
+            });
+
+            const header = wrapper.find('.ReactVirtualized__Table__headerRow');
+            expect(header.props().style.height).toBe(headerHeight);
+        });
+
+        test('should not display header row with specified height when item list is empty and noItemsRenderer is present', () => {
+            const headerHeight = 30;
+            const noItemsRenderer = () => <></>;
+            const wrapper = renderComponent({
+                headerHeight,
+                noItemsRenderer,
+            });
+
+            const header = wrapper.find('.ReactVirtualized__Table__headerRow');
+            expect(header.props().style.height).not.toBe(headerHeight);
+        });
+    });
+
+    describe('headerRenderer', () => {
+        const items = [{ id: '1', name: 'item1' }];
+        test('should use headerRenderer when specified if item list is not empty', () => {
+            const wrapper = renderComponent({
+                headerRenderer: () => <div data-testid="customHeader">Custom Header</div>,
+                items,
+            });
+            const headerRow = wrapper.find("[data-testid='customHeader']");
+            expect(headerRow.length).toBe(1);
+        });
+
+        test('should not use headerRenderer when specified if item list is empty and noItemsRenderer is present', () => {
+            const noItemsRenderer = () => <></>;
+            const wrapper = renderComponent({
+                headerRenderer: () => <div data-testid="customHeader">Custom Header</div>,
+                noItemsRenderer,
+            });
+            const headerRow = wrapper.find("[data-testid='customHeader']");
+            expect(headerRow.length).not.toBe(1);
+        });
+    });
 });

package/src/features/content-explorer/item-list/__tests__/ItemListButton.test.js

@@ -44,6 +44,14 @@ describe('features/content-explorer/item-list/ItemListButton', () => {
                 }
             });
 
+            test('should render component with isChecked when specified', () => {
+                const wrapper = renderComponent({ isChecked: true });
+
+                if (contentExplorerMode === ContentExplorerMode.MULTI_SELECT) {
+                    expect(wrapper.find(buttonType).prop('isChecked')).toBe(true);
+                }
+            });
+
             test('should not render component with isSelected when both isDisabled and isSelected is true', () => {
                 const wrapper = renderComponent({
                     isDisabled: true,

package/src/features/content-explorer/item-list/__tests__/ItemListIcon.test.js

@@ -9,9 +9,13 @@ describe('features/content-explorer/item-list/ItemListIcon', () => {
         test('should render default component', () => {
             const wrapper = renderComponent();
 
-            expect(wrapper.find('FileIcon').length).toBe(1);
-            expect(wrapper.prop('extension')).toEqual(undefined);
-            expect(wrapper.prop('title')).toBeTruthy();
+            expect(wrapper.find('IconCell').length).toBe(1);
+            expect(wrapper.prop('rowData')).toEqual({
+                type: undefined,
+                extension: undefined,
+                has_collaborations: false,
+                is_externally_owned: false,
+            });
         });
 
         [
@@ -33,33 +37,35 @@ describe('features/content-explorer/item-list/ItemListIcon', () => {
                 hasCollaborations: true,
                 isExternallyOwned: true,
             },
-        ].forEach(props => {
+            // externalFolder
+            {
+                type: 'folder',
+                hasCollaborations: false,
+                isExternallyOwned: true,
+            },
+        ].forEach(rowData => {
             test('should render correct folder icon', () => {
-                const wrapper = renderComponent(props);
-
-                expect(wrapper.find('FolderIcon').length).toBe(1);
-                expect(wrapper.prop('isCollab')).toEqual(props.hasCollaborations);
-                expect(wrapper.prop('isExternal')).toEqual(props.isExternallyOwned);
-                expect(wrapper.prop('title')).toBeTruthy();
+                const wrapper = renderComponent(rowData);
 
+                expect(wrapper.find('IconCell').length).toBe(1);
                 expect(wrapper).toMatchSnapshot();
             });
         });
 
         test('should render correct file icon', () => {
-            const extension = 'boxnote';
-            const wrapper = renderComponent({ type: 'file', extension });
+            const rowData = { type: 'file', extension: 'boxnote' };
+            const wrapper = renderComponent(rowData);
 
-            expect(wrapper.find('FileIcon').length).toBe(1);
-            expect(wrapper.prop('extension')).toEqual(extension);
-            expect(wrapper.prop('title')).toBeTruthy();
+            expect(wrapper.find('IconCell').length).toBe(1);
+            expect(wrapper.prop('rowData')).toEqual(expect.objectContaining(rowData));
         });
 
         test('should render correct bookmark icon', () => {
-            const wrapper = renderComponent({ type: 'web_link' });
+            const rowData = { type: 'web_link' };
+            const wrapper = renderComponent(rowData);
 
-            expect(wrapper.find('BookmarkIcon').length).toBe(1);
-            expect(wrapper.prop('title')).toBeTruthy();
+            expect(wrapper.find('IconCell').length).toBe(1);
+            expect(wrapper.prop('rowData')).toEqual(expect.objectContaining(rowData));
         });
     });
 });

package/src/features/content-explorer/item-list/__tests__/__snapshots__/ItemListIcon.test.js.snap

@@ -1,40 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`features/content-explorer/item-list/ItemListIcon render() should render correct folder icon 1`] = `
-<FolderIcon
-  isCollab={false}
-  isExternal={false}
-  title={
-    <FormattedMessage
-      defaultMessage="Personal Folder"
-      id="boxui.contentExplorer.personalFolder"
-    />
+<IconCell
+  rowData={
+    Object {
+      "extension": undefined,
+      "has_collaborations": false,
+      "is_externally_owned": false,
+      "type": "folder",
+    }
   }
 />
 `;
 
 exports[`features/content-explorer/item-list/ItemListIcon render() should render correct folder icon 2`] = `
-<FolderIcon
-  isCollab={true}
-  isExternal={false}
-  title={
-    <FormattedMessage
-      defaultMessage="Collaborated Folder"
-      id="boxui.contentExplorer.collaboratedFolder"
-    />
+<IconCell
+  rowData={
+    Object {
+      "extension": undefined,
+      "has_collaborations": true,
+      "is_externally_owned": false,
+      "type": "folder",
+    }
   }
 />
 `;
 
 exports[`features/content-explorer/item-list/ItemListIcon render() should render correct folder icon 3`] = `
-<FolderIcon
-  isCollab={true}
-  isExternal={true}
-  title={
-    <FormattedMessage
-      defaultMessage="Collaborated Folder"
-      id="boxui.contentExplorer.collaboratedFolder"
-    />
+<IconCell
+  rowData={
+    Object {
+      "extension": undefined,
+      "has_collaborations": true,
+      "is_externally_owned": true,
+      "type": "folder",
+    }
+  }
+/>
+`;
+
+exports[`features/content-explorer/item-list/ItemListIcon render() should render correct folder icon 4`] = `
+<IconCell
+  rowData={
+    Object {
+      "extension": undefined,
+      "has_collaborations": false,
+      "is_externally_owned": true,
+      "type": "folder",
+    }
   }
 />
 `;

package/src/features/content-explorer/messages.js

@@ -1,40 +1,30 @@
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
-    bookmark: {
-        defaultMessage: 'Bookmark',
-        description: 'Icon title for a Box item of type bookmark or web-link',
-        id: 'boxui.contentExplorer.bookmark',
-    },
     breadcrumb: {
         defaultMessage: 'Breadcrumb',
         description: 'Aria label for the folder breadcrumb',
         id: 'boxui.contentExplorer.breadcrumb',
     },
+    folderTreeBreadcrumbsText: {
+        defaultMessage: '{folderName} ({totalItems})',
+        description: 'Text shown for the current folder and its number of items next to the folder tree breadcrumbs',
+        id: 'boxui.contentExplorer.folderTreeBreadcrumbsText',
+    },
+    filePath: {
+        defaultMessage: 'File path',
+        description: 'Tooltip message for the folder tree breadcrumb button',
+        id: 'boxui.contentExplorer.filepath',
+    },
     clickToGoBack: {
         defaultMessage: 'Click to go back',
         description: 'Aria label for button to navigate back to the previous folder',
         id: 'boxui.contentExplorer.clickToGoBack',
     },
-    collaboratedFolder: {
-        defaultMessage: 'Collaborated Folder',
-        description: 'Icon title for a Box item of type folder that has collaborators',
-        id: 'boxui.contentExplorer.collaboratedFolder',
-    },
-    externalFolder: {
-        defaultMessage: 'External Folder',
-        description: "Icon title for a Box item of type folder that has collaborators outside of the user's enterprise",
-        id: 'boxui.contentExplorer.externalFolder',
-    },
-    file: {
-        defaultMessage: 'File',
-        description: 'Icon title for a Box item of type file',
-        id: 'boxui.contentExplorer.file',
-    },
-    personalFolder: {
-        defaultMessage: 'Personal Folder',
-        description: 'Icon title for a Box item of type folder that is private and has no collaborators',
-        id: 'boxui.contentExplorer.personalFolder',
+    clickToViewPath: {
+        defaultMessage: 'Click to view path',
+        description: 'Aria label for folder tree button to navigate back to previous folders',
+        id: 'boxui.contentExplorer.clickToViewPath',
     },
     selectItem: {
         defaultMessage: 'Select {name}',
@@ -92,6 +82,28 @@ const messages = defineMessages({
         description: 'Text shown to indicate the number of items selected',
         id: 'boxui.contentExplorer.numSelected',
     },
+    numItemsSelected: {
+        defaultMessage: `
+            {numSelected, plural,
+                =0 {0 items selected}
+                one {1 item selected}
+                other {# items selected}
+            }
+        `,
+        description: 'Text shown to indicate the number of items selected with Include Subfolders feature',
+        id: 'boxui.contentExplorer.numItemsSelected',
+    },
+    numFoldersSelected: {
+        defaultMessage: `
+            {numSelected, plural,
+                =0 {0 folders selected}
+                one {1 folder selected}
+                other {# folders selected}
+            }
+        `,
+        description: 'Text shown to indicate the number of folders selected',
+        id: 'boxui.contentExplorer.numFoldersSelected',
+    },
     emptySearch: {
         defaultMessage: "Sorry, we couldn't find what you're looking for.",
         description: 'Text shown in the list when there are no search results',
@@ -143,6 +155,11 @@ const messages = defineMessages({
         description: "Results label for number of items on list when it's just 1",
         id: 'boxui.contentExplorer.result',
     },
+    includeSubfolders: {
+        defaultMessage: 'Include Subfolders',
+        description: 'Label text shown next to the Include Subfolders toggle',
+        id: 'boxui.contentExplorer.includeSubfolders',
+    },
 });
 
 export default messages;

package/src/features/content-explorer/prop-types.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
 import ContentExplorerModes from './modes';
-import ItemTypes from './item-types';
+import { TYPE_FILE, TYPE_FOLDER, TYPE_WEBLINK } from '../../constants';
 
 const ContentExplorerModePropType = PropTypes.oneOf([
     ContentExplorerModes.COPY,
@@ -18,7 +18,7 @@ const FolderPropType = PropTypes.shape({
 
 const FoldersPathPropType = PropTypes.arrayOf(FolderPropType);
 
-const ItemTypePropType = PropTypes.oneOf([ItemTypes.FILE, ItemTypes.FOLDER, ItemTypes.BOOKMARK]);
+const ItemTypePropType = PropTypes.oneOf([TYPE_FILE, TYPE_FOLDER, TYPE_WEBLINK]);
 
 const ItemPropType = PropTypes.shape({
     id: PropTypes.string.isRequired,

package/src/features/content-insights/_mixins.scss

@@ -1,7 +1,7 @@
 @import '../../styles/variables';
 
 @mixin ContentInsightsHeaderText {
-    color: $bdl-gray-62;
+    color: $bdl-gray-65;
     font-weight: bold;
     font-size: $bdl-fontSize-minimum;
 }

package/src/features/content-insights/charts/bar/Bar.tsx

@@ -11,12 +11,20 @@ const DEFAULT_SIZE = 50;
 interface Props {
     color?: string;
     direction?: Direction;
-    onMouseEnter?: () => void;
+    label?: string;
+    onMouseEnter?: (arg1: { left: number; top: number }) => void;
     onMouseLeave?: () => void;
     size: number;
 }
 
-function Bar({ color, direction = 'vertical', onMouseEnter = noop, onMouseLeave = noop, size = DEFAULT_SIZE }: Props) {
+function Bar({
+    color,
+    direction = 'vertical',
+    onMouseEnter = noop,
+    onMouseLeave = noop,
+    label,
+    size = DEFAULT_SIZE,
+}: Props) {
     const isHorizontal = direction === 'horizontal';
     const cssProperty = direction === 'horizontal' ? 'width' : 'height';
     const [style, setStyle] = React.useState({
@@ -25,6 +33,17 @@ function Bar({ color, direction = 'vertical', onMouseEnter = noop, onMouseLeave
     });
 
     const adjustedSize = Math.max(0, size);
+    const barRef = React.useRef<HTMLDivElement | null>(null);
+
+    const handleMouseEnter = React.useCallback(() => {
+        const offsetPosition = { top: 0, left: 0 };
+        if (barRef?.current) {
+            const boundingClientRect = barRef.current.getBoundingClientRect();
+            offsetPosition.top = boundingClientRect.top;
+            offsetPosition.left = boundingClientRect.left + boundingClientRect.width / 2;
+        }
+        onMouseEnter(offsetPosition);
+    }, [onMouseEnter]);
 
     React.useEffect(() => {
         setStyle({
@@ -35,12 +54,14 @@ function Bar({ color, direction = 'vertical', onMouseEnter = noop, onMouseLeave
 
     return (
         <div
+            ref={barRef}
             className={classNames('ca-Bar', { 'is-horizontal': isHorizontal })}
-            onMouseEnter={onMouseEnter}
+            onMouseEnter={handleMouseEnter}
             onMouseLeave={onMouseLeave}
             role="presentation"
         >
             <div className="ca-Bar-value" style={style} />
+            {label && <div className="ca-Bar-label">{label}</div>}
         </div>
     );
 }

package/src/features/content-insights/charts/bar/BarChart.tsx

@@ -9,13 +9,18 @@ import './BarChart.scss';
 
 type ValueAccessor = string | AccessorFunction;
 
+interface OffsetPosition {
+    left: number;
+    top: number;
+}
 interface Props {
     className?: string;
     data: Array<any>;
     direction?: Direction;
+    hasAxisLabel?: boolean;
     label: string;
     labelAccessor: string;
-    onBarMouseEnter?: (arg1: { datum: any }) => void;
+    onBarMouseEnter?: (arg1: { datum: any }, arg2: OffsetPosition) => void;
     onBarMouseLeave?: (arg1: { datum: any }) => void;
     valueAccessor: ValueAccessor;
 }
@@ -28,10 +33,11 @@ function BarChart({
     className,
     data = [],
     direction = 'vertical',
+    hasAxisLabel = false,
     label,
+    labelAccessor,
     onBarMouseEnter,
     onBarMouseLeave,
-    labelAccessor,
     valueAccessor,
 }: Props) {
     const isHorizontal = direction === 'horizontal';
@@ -66,7 +72,8 @@ function BarChart({
                 <Bar
                     key={datum[labelAccessor]}
                     direction={direction}
-                    onMouseEnter={() => handleBarMouseEnter({ datum })}
+                    label={hasAxisLabel ? datum[labelAccessor] : ''}
+                    onMouseEnter={(position: OffsetPosition) => handleBarMouseEnter({ datum }, position)}
                     onMouseLeave={() => handleBarMouseLeave({ datum })}
                     size={getSize(datum)}
                 />