Update: Add onNavigate to explorer (#7)

Also fixes upload not working in explorer and picker
Fixes some style issues

Author: priyajeet

README.md

@@ -9,23 +9,23 @@
 The Box UI Elements are currently in beta and may contain bugs. Their interfaces may also update as needed. Please email [box-ui-kit-feedback@box.com](mailto:box-ui-kit-feedback@box.com) to report issues or provide feedback.
 
 ## Usage
-If you are not building a React based app, please follow the [documentation link](https://developer.box.com/docs/box-ui-elements) to use the Box UI Elements as simple library includes. Continue reading below to import the components into your React based app.
+If you are not building a [React](https://facebook.github.io/react) based app, please follow the [documentation on our developer docs](https://developer.box.com/docs/box-ui-elements), which shows how to use the Box UI Elements via script includes. Continue reading below to import the components into your React based app.
 
 ## Installation
 `yarn add box-ui-elements`
 
 ## Authentication
-We have designed the Box UI Elements in an authentication-type agnostic way so whether you are using them for users who have Box accounts (Managed Users) or non-Box accounts (App Users), they should just work out of the box. They only expect a **token** to be passed in for authentication. Please refer to the documentation links to learn more about authentication and generating access tokens.
+We have designed the Box UI Elements in an authentication-type agnostic way. Whether you are using them for users who have Box accounts (Managed Users) or non-Box accounts (App Users), they should just work out of the box. They only expect an **access token** to be passed in for authentication. Please refer to the documentation links to learn more about authentication and generating access tokens.
 
 ## CSS
-The Box UI Elements require their corresponding CSS stylesheet to render properly. If you import the CSS as shown in the examples below, you will require setting up webpack's style-loader / css-loader plugins to properly process the CSS. Alternatively, you can just include the CSS file in your apps's HTML without importing it into javascript.
+The Box UI Elements require their corresponding CSS stylesheet to render properly. If you import the CSS as shown in the examples below, you will require setting up webpack's style-loader / css-loader plugins to properly process the CSS. Alternatively, you can just include the CSS file (hosted versions can be found in the documentation links) in your apps's HTML without importing it into javascript.
 
 ## Components
-You can import the `ContentExplorer`, `ContentPicker`, `ContentUploader`, `ContentPreview` or `ContentTree`. Likewise, you can also import the `ContentPickerPopup`, `ContentUploaderPopup` or `ContentTreePopup` which are popup versions for the picker, uploader and content tree respectively.
+You can import the `ContentExplorer`, `ContentPicker`, `ContentUploader`, `ContentPreview` or `ContentTree`. Likewise, you can also import the `ContentPickerPopup`, `ContentUploaderPopup` or `ContentTreePopup` which are popup versions for the content picker, content uploader and content tree respectively.
 
 ## Content Explorer ([Documentation](https://developer.box.com/docs/box-content-explorer))
 
-<img src="https://user-images.githubusercontent.com/1075325/27419186-596c98ba-56d4-11e7-818e-f5050d5a29fd.png" width="75%"/>
+<img src="https://user-images.githubusercontent.com/1075325/27887154-092a232a-6194-11e7-82f4-697331ac5cbe.png" width="75%"/>
 
 ```js
 import React from 'react';
@@ -51,24 +51,25 @@ render(
 | Attribute | Type | Default | Description |
 | --- | --- | --- | --- |
 | token* | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
-| getLocalizedMessage* | function |  | Function to get localized strings. |
+| getLocalizedMessage* | function(string, { [string]: string }) |  | Function to get localized strings. |
 | rootFolderId | string | `0` | The root folder for the content explorer. |
 | currentFolderId | string | | The current folder shown for the content explorer. This should be a sub folder to the root folder. |
 | sortBy | string | `name` | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
-| sortDirection | SortDirection | `asc` | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
+| sortDirection | string | `asc` | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | canPreview | boolean | `true` | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | canDownload | boolean | `true` | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | canDelete | boolean | `true` | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | canUpload | boolean | `true` | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | canRename | boolean | `true` | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | canShare | boolean | `true` | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | canSetShareAccess | boolean | `true` | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
-| onDelete | function |  | Callback function for when item(s) are deleted. |
-| onDownload | function |  | Callback function for when item(s) are downloaded. |
-| onPreview | function |  | Callback function for when an item is previewed. |
-| onRename | function |  | Callback function for when an item is renamed. |
-| onSelect | function |  | Callback function for when item(s) are selected. |
-| onUpload | function |  | Callback function for when item(s) are uploaded. |
+| onDelete | function(Array&lt;[File](https://developer.box.com/reference#file-object)&gt;) |  | Callback function for when item(s) are deleted. |
+| onDownload | function(Array&lt;[File](https://developer.box.com/reference#file-object)&gt;) |  | Callback function for when item(s) are downloaded. |
+| onPreview | function([File](https://developer.box.com/reference#file-object)) |  | Callback function for when an item is previewed. |
+| onRename | function([File](https://developer.box.com/reference#file-object)) |  | Callback function for when an item is renamed. |
+| onSelect | function(Array&lt;[Folder](https://developer.box.com/reference#folder-object)&#124;[File](https://developer.box.com/reference#file-object)&#124;[Web Link](https://developer.box.com/reference#web-link-object)&gt;) |  | Callback function for when item(s) are selected. |
+| onUpload | function(Array&lt;[File](https://developer.box.com/reference#file-object)&gt;) |  | Callback function for when item(s) are uploaded. |
+| onNavigate | function([File](https://developer.box.com/reference#file-object)) |  | Callback function for when navigating into a folder. |
 | isTouch | boolean |  | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | logoUrl | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | sharedLink | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
@@ -77,7 +78,7 @@ render(
 
 ## Content Picker ([Documentation](https://developer.box.com/docs/box-content-picker))
 
-<img src="https://user-images.githubusercontent.com/1075325/27419182-59696758-56d4-11e7-89d5-a462d0ea742c.png" width="75%"/>
+<img src="https://user-images.githubusercontent.com/1075325/27887156-0940ee3e-6194-11e7-8e22-961139e82dfe.png" width="75%"/>
 
 ```js
 import React from 'react';
@@ -103,12 +104,12 @@ render(
 | Attribute | Type | Default | Description |
 | --- | --- | --- | --- |
 | token* | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
-| getLocalizedMessage* | function |  | Function to get localized strings. |
+| getLocalizedMessage* | function(string, { [string]: string }) |  | Function to get localized strings. |
 | rootFolderId | string | `0` | The root folder for the content picker. |
 | type | string | `file, web_link` | Indicates which type of items can be picked. Should be a comma seperated combination of `file`, `folder` or `web_link`. |
 | sortBy | string | `name` | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
-| sortDirection | SortDirection | `asc` | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
-| extensions | string[] | `[]` | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
+| sortDirection | string | `asc` | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
+| extensions | Array&lt;string&gt; | `[]` | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
 | maxSelectable | number | `Infinity` | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
 | canUpload | boolean | `true` | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
 | canSetShareAccess | boolean | `true` | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
@@ -120,7 +121,7 @@ render(
 | sharedLinkPassword | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
 
 ## Content Uploader ([Documentation](https://developer.box.com/docs/box-content-uploader))
-<img src="https://user-images.githubusercontent.com/1075325/27419181-596712b4-56d4-11e7-911e-d230a02efd5e.png" width="75%"/>
+<img src="https://user-images.githubusercontent.com/1075325/27887153-09243762-6194-11e7-8d2d-cf654d9364bc.png" width="75%"/>
 
 ```js
 import React from 'react';
@@ -146,10 +147,10 @@ render(
 | Attribute | Type | Default | Description |
 | --- | --- | --- | --- |
 | token* | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-uploader#section-options).* |
-| getLocalizedMessage* | function |  | Function to get localized strings. |
+| getLocalizedMessage* | function(string, { [string]: string }) |  | Function to get localized strings. |
 | rootFolderId | string | `0` | The root folder for the content uploader. |
 | onClose | function |  | Callback function for when the close button is pressed. |
-| onComplete | function |  | Callback function for when uploads are complete. |
+| onComplete | function(Array&lt;[File](https://developer.box.com/reference#file-object)&gt;) |  | Callback function for when uploads are complete. |
 | isTouch | boolean |  | *See the [developer docs](https://developer.box.com/docs/box-content-uploader#section-options).* |
 | logoUrl | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-uploader#section-options).* |
 | sharedLink | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-uploader#section-options).* |
@@ -158,7 +159,7 @@ render(
 
 ## Content Tree ([Documentation](https://developer.box.com/docs/box-content-tree))
 
-<img src="https://user-images.githubusercontent.com/1075325/27419183-5969c446-56d4-11e7-8dd1-432cd63aa40b.png" width="75%"/>
+<img src="https://user-images.githubusercontent.com/1075325/27887155-092e7362-6194-11e7-877d-157726789bef.png" width="75%"/>
 
 ```js
 import React from 'react';
@@ -184,10 +185,10 @@ render(
 | Attribute | Type | Default | Description |
 | --- | --- | --- | --- |
 | token* | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |
-| getLocalizedMessage* | function |  | Function to get localized strings. |
+| getLocalizedMessage* | function(string, { [string]: string }) |  | Function to get localized strings. |
 | rootFolderId | string | `0` | The root folder for the content tree. |
 | type | string | `file, web_link, folder` | Indicates which type of items show up in the tree. Should be a comma seperated combination of `file`, `folder` or `web_link`. |
-| onClick | function |  | Callback function for when an item is clicked. |
+| onClick | function([Folder](https://developer.box.com/reference#folder-object)&#124;[File](https://developer.box.com/reference#file-object)&#124;[Web Link](https://developer.box.com/reference#web-link-object)) |  | Callback function for when an item is clicked. |
 | isTouch | boolean |  | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |
 | logoUrl | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |
 | sharedLink | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |
@@ -224,7 +225,7 @@ render(
 | fileId* | string | | The id of the file to preview. |
 | locale | string | `en-US` | Locale for this component. |
 | onLoad | function |  | Callback function for when a file preview loads. |
-| collection | string[] | `[]` | *See the [developer docs](https://developer.box.com/docs/box-content-preview#section-initialization-and-options).* |
+| collection | Array&lt;string&gt; | `[]` | *See the [developer docs](https://developer.box.com/docs/box-content-preview#section-initialization-and-options).* |
 | header | string | `light` | *See the [developer docs](https://developer.box.com/docs/box-content-preview#section-initialization-and-options).* |
 | logoUrl | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-preview#section-initialization-and-options).* |
 | sharedLink | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-preview#section-initialization-and-options).* |

src/api/Folder.js

@@ -18,7 +18,8 @@ import type {
     FlattenedBoxItem,
     FlattenedBoxItemCollection,
     SortBy,
-    SortDirection
+    SortDirection,
+    Collection
 } from '../flowTypes';
 
 const LIMIT_ITEM_FETCH = 1000;
@@ -122,16 +123,18 @@ class Folder extends Item {
         }
 
         const percentLoaded: number = total_count === 0 ? 100 : entries.length * 100 / total_count;
-        this.successCallback({
+        const collection: Collection = {
             id,
             name,
             percentLoaded,
             permissions,
+            boxItem: sortedFolder,
             breadcrumbs: path_collection.entries,
             sortBy: this.sortBy,
             sortDirection: this.sortDirection,
             items: entries.map((key: string) => this.getCache().get(key))
-        });
+        };
+        this.successCallback(collection);
     }
 
     /**

src/api/Search.js

@@ -17,7 +17,8 @@ import type {
     FlattenedBoxItem,
     FlattenedBoxItemCollection,
     SortBy,
-    SortDirection
+    SortDirection,
+    Collection
 } from '../flowTypes';
 
 const LIMIT_ITEM_FETCH = 200;
@@ -136,13 +137,14 @@ class Search extends Base {
         }
 
         const percentLoaded: number = total_count === 0 ? 100 : entries.length * 100 / total_count;
-        this.successCallback({
+        const collection: Collection = {
             percentLoaded,
             id: this.id,
             sortBy: this.sortBy,
             sortDirection: this.sortDirection,
             items: entries.map((key: string) => this.getCache().get(key))
-        });
+        };
+        this.successCallback(collection);
     }
 
     /**

src/components/Button/Button.js

@@ -23,9 +23,9 @@ type Props = {
     type: ButtonType
 };
 
-type DefaultProps = {
+type DefaultProps = {|
     type: ButtonType
-};
+|};
 
 class Button extends PureComponent<DefaultProps, Props, void> {
     props: Props;

src/components/Button/Button.scss

@@ -9,10 +9,13 @@
     font-size: 13px;
     line-height: 16px;
     margin: 0;
+    max-width: 100%;
+    overflow: hidden;
     padding: 8px 16px;
     position: relative;
     text-align: center;
     text-decoration: none;
+    text-overflow: ellipsis;
     text-shadow: none;
     transition: background-color .05s ease-in-out, border-color .05s ease-in-out;
     white-space: nowrap;

src/components/ContentExplorer/ContentExplorer.js

@@ -79,6 +79,7 @@ type Props = {
     onRename: Function,
     onSelect: Function,
     onUpload: Function,
+    onNavigate: Function,
     logoUrl?: string,
     sharedLink?: string,
     sharedLinkPassword?: string
@@ -101,7 +102,7 @@ type State = {
     errorCode: string
 };
 
-type DefaultProps = {
+type DefaultProps = {|
     rootFolderId: string,
     sortBy: SortBy,
     sortDirection: SortDirection,
@@ -120,8 +121,9 @@ type DefaultProps = {
     onPreview: Function,
     onRename: Function,
     onSelect: Function,
-    onUpload: Function
-};
+    onUpload: Function,
+    onNavigate: Function
+|};
 
 class ContentExplorer extends Component<DefaultProps, Props, State> {
     id: string;
@@ -151,7 +153,8 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
         onPreview: noop,
         onRename: noop,
         onSelect: noop,
-        onUpload: noop
+        onUpload: noop,
+        onNavigate: noop
     };
 
     /**
@@ -300,6 +303,25 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
         /* eslint-enable no-console */
     };
 
+    /**
+     * Focuses the grid and fires navigate event
+     *
+     * @private
+     * @return {void}
+     */
+    finishNavigation() {
+        const { onNavigate }: Props = this.props;
+        const { currentCollection: { percentLoaded, boxItem } }: State = this.state;
+        onNavigate(cloneDeep(boxItem));
+
+        // Don't focus the grid until its loaded and user is not already on an interactable element
+        if (percentLoaded !== 100 || !this.table || !this.table.Grid || isActionableElement(document.activeElement)) {
+            return;
+        }
+        const grid: any = findDOMNode(this.table.Grid);
+        grid.focus();
+    }
+
     /**
      * Folder fetch success callback
      *
@@ -325,13 +347,7 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
         this.closeModals();
 
         // Set the new state and focus the grid for tabbing
-        this.setState(newState, () => {
-            if (!this.table || !this.table.Grid || isActionableElement(document.activeElement)) {
-                return;
-            }
-            const grid: any = findDOMNode(this.table.Grid);
-            grid.focus();
-        });
+        this.setState(newState, this.finishNavigation);
     };
 
     /**
@@ -993,7 +1009,7 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
                 {canUpload && !!this.appElement
                     ? <UploadDialog
                         isOpen={isUploadModalOpen}
-                        root={id}
+                        rootFolderId={id}
                         token={token}
                         sharedLink={sharedLink}
                         sharedLinkPassword={sharedLinkPassword}

src/components/ContentPicker/ContentPicker.js

@@ -87,7 +87,7 @@ type State = {
     isUploadModalOpen: boolean
 };
 
-type DefaultProps = {
+type DefaultProps = {|
     type: string,
     rootFolderId: string,
     onChoose: Function,
@@ -102,7 +102,7 @@ type DefaultProps = {
     uploadHost: string,
     clientName: string,
     className: string
-};
+|};
 
 class ContentPicker extends Component<DefaultProps, Props, State> {
     id: string;
@@ -717,7 +717,7 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
                 {canUpload && !!this.appElement
                     ? <UploadDialog
                         isOpen={isUploadModalOpen}
-                        root={id}
+                        rootFolderId={id}
                         token={token}
                         sharedLink={sharedLink}
                         sharedLinkPassword={sharedLinkPassword}

src/components/ContentPreview/ContentPreview.js

@@ -14,13 +14,13 @@ import {
     DEFAULT_PREVIEW_LOCALE
 } from '../../constants';
 
-type DefaultProps = {
+type DefaultProps = {|
     apiHost: string,
     staticHost: string,
     locale: string,
     version: string,
     className: string
-};
+|};
 
 type Props = {
     fileId: string,