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

package/es/elements/content-explorer/ItemGrid.js.flow

@@ -1,19 +1,39 @@
 // @flow
 import * as React from 'react';
-import getProp from 'lodash/get';
+import ArrowKeyStepper from '@box/react-virtualized/dist/es/ArrowKeyStepper';
 import AutoSizer from '@box/react-virtualized/dist/es/AutoSizer';
+import getProp from 'lodash/get';
+
 import GridView from '../../components/grid-view/GridView';
+import { focus } from '../../utils/dom';
 import ItemGridCell from './ItemGridCell';
+
 import type { ItemGridProps } from './flowTypes';
 import type { BoxItem, Collection } from '../../common/types/core';
 
 type Props = {
     currentCollection: Collection,
     gridColumnCount: number,
+    rootElement: HTMLElement,
+    selected?: BoxItem,
     ...$Exact<ItemGridProps>,
 };
 
-const ItemGrid = ({ currentCollection, gridColumnCount, rootId, ...rest }: Props) => {
+const ItemGrid = ({
+    currentCollection,
+    gridColumnCount,
+    onItemSelect,
+    rootElement,
+    rootId,
+    selected,
+    ...rest
+}: Props) => {
+    const items = getProp(currentCollection, 'items', []);
+    const gridRowCount = Math.ceil(items.length / gridColumnCount);
+    const linearIndex = selected ? items.findIndex(item => item?.id === selected?.id) : 0;
+    const selectedRowIndex = Math.floor(linearIndex / gridColumnCount);
+    const selectedColumnIndex = linearIndex % gridColumnCount;
+
     /**
      * Renderer used for cards in grid view
      *
@@ -22,20 +42,51 @@ const ItemGrid = ({ currentCollection, gridColumnCount, rootId, ...rest }: Props
      */
     const slotRenderer = (slotIndex: number): ?React.Element<any> => {
         const item: ?BoxItem = getProp(currentCollection, `items[${slotIndex}]`);
+        return item ? <ItemGridCell item={item} onItemSelect={onItemSelect} rootId={rootId} {...rest} /> : null;
+    };
+
+    /**
+     * Update the currently selected item when navigating with keyboard
+     * @param {number} row - row index of selected item
+     * @param {number} column - column index of selected item
+     * @return {void}
+     */
+    const onCellSelect = (row: number, column: number) => {
+        const index = row * gridColumnCount + column;
+        const item: ?BoxItem = getProp(currentCollection, `items[${index}]`);
 
-        return item ? <ItemGridCell item={item} rootId={rootId} {...rest} /> : null;
+        if (item) {
+            onItemSelect(item, () => {
+                focus(rootElement, '.bdl-GridViewSlot-content--selected .be-item-name .be-item-label', false);
+            });
+        }
     };
 
     return (
         <AutoSizer>
             {({ height, width }) => (
-                <GridView
+                <ArrowKeyStepper
                     columnCount={gridColumnCount}
-                    currentCollection={currentCollection}
-                    height={height}
-                    slotRenderer={slotRenderer}
-                    width={width}
-                />
+                    mode="cells"
+                    isControlled
+                    scrollToRow={selectedRowIndex}
+                    scrollToColumn={selectedColumnIndex}
+                    onScrollToChange={({ scrollToRow, scrollToColumn }) => {
+                        onCellSelect(scrollToRow, scrollToColumn);
+                    }}
+                    rowCount={gridRowCount}
+                >
+                    {({ scrollToRow }) => (
+                        <GridView
+                            columnCount={gridColumnCount}
+                            currentCollection={currentCollection}
+                            height={height}
+                            scrollToRow={scrollToRow}
+                            slotRenderer={slotRenderer}
+                            width={width}
+                        />
+                    )}
+                </ArrowKeyStepper>
             )}
         </AutoSizer>
     );

package/es/elements/content-explorer/ItemGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/content-explorer/ItemGrid.js"],"names":["React","getProp","AutoSizer","GridView","ItemGridCell","ItemGrid","currentCollection","gridColumnCount","rootId","rest","slotRenderer","slotIndex","item","height","width"],"mappings":";;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,SAAP,MAAsB,0CAAtB;AACA,OAAOC,QAAP,MAAqB,qCAArB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;;AAUA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAAoE;AAAA,MAAjEC,iBAAiE,QAAjEA,iBAAiE;AAAA,MAA9CC,eAA8C,QAA9CA,eAA8C;AAAA,MAA7BC,MAA6B,QAA7BA,MAA6B;AAAA,MAAlBC,IAAkB;;AACjF;;;;;;AAMA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,SAAD,EAA4C;AAC7D,QAAMC,IAAc,GAAGX,OAAO,CAACK,iBAAD,kBAA6BK,SAA7B,OAA9B;AAEA,WAAOC,IAAI,GAAG,oBAAC,YAAD;AAAc,MAAA,IAAI,EAAEA,IAApB;AAA0B,MAAA,MAAM,EAAEJ;AAAlC,OAA8CC,IAA9C,EAAH,GAA4D,IAAvE;AACH,GAJD;;AAMA,SACI,oBAAC,SAAD,QACK;AAAA,QAAGI,MAAH,SAAGA,MAAH;AAAA,QAAWC,KAAX,SAAWA,KAAX;AAAA,WACG,oBAAC,QAAD;AACI,MAAA,WAAW,EAAEP,eADjB;AAEI,MAAA,iBAAiB,EAAED,iBAFvB;AAGI,MAAA,MAAM,EAAEO,MAHZ;AAII,MAAA,YAAY,EAAEH,YAJlB;AAKI,MAAA,KAAK,EAAEI;AALX,MADH;AAAA,GADL,CADJ;AAaH,CA1BD;;AA4BA,eAAeT,QAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport getProp from 'lodash/get';\nimport AutoSizer from '@box/react-virtualized/dist/es/AutoSizer';\nimport GridView from '../../components/grid-view/GridView';\nimport ItemGridCell from './ItemGridCell';\nimport type { ItemGridProps } from './flowTypes';\nimport type { BoxItem, Collection } from '../../common/types/core';\n\ntype Props = {\n    currentCollection: Collection,\n    gridColumnCount: number,\n    ...$Exact<ItemGridProps>,\n};\n\nconst ItemGrid = ({ currentCollection, gridColumnCount, rootId, ...rest }: Props) => {\n    /**\n     * Renderer used for cards in grid view\n     *\n     * @param {number} slotIndex - index of item in currentCollection.items\n     * @return {React.Element} - Element to display in card\n     */\n    const slotRenderer = (slotIndex: number): ?React.Element<any> => {\n        const item: ?BoxItem = getProp(currentCollection, `items[${slotIndex}]`);\n\n        return item ? <ItemGridCell item={item} rootId={rootId} {...rest} /> : null;\n    };\n\n    return (\n        <AutoSizer>\n            {({ height, width }) => (\n                <GridView\n                    columnCount={gridColumnCount}\n                    currentCollection={currentCollection}\n                    height={height}\n                    slotRenderer={slotRenderer}\n                    width={width}\n                />\n            )}\n        </AutoSizer>\n    );\n};\n\nexport default ItemGrid;\n"],"file":"ItemGrid.js"}
+{"version":3,"sources":["../../../src/elements/content-explorer/ItemGrid.js"],"names":["React","ArrowKeyStepper","AutoSizer","getProp","GridView","focus","ItemGridCell","ItemGrid","currentCollection","gridColumnCount","onItemSelect","rootElement","rootId","selected","rest","items","gridRowCount","Math","ceil","length","linearIndex","findIndex","item","id","selectedRowIndex","floor","selectedColumnIndex","slotRenderer","slotIndex","onCellSelect","row","column","index","height","width","scrollToRow","scrollToColumn"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport ArrowKeyStepper from '@box/react-virtualized/dist/es/ArrowKeyStepper';\nimport AutoSizer from '@box/react-virtualized/dist/es/AutoSizer';\nimport getProp from 'lodash/get';\n\nimport GridView from '../../components/grid-view/GridView';\nimport { focus } from '../../utils/dom';\nimport ItemGridCell from './ItemGridCell';\n\nimport type { ItemGridProps } from './flowTypes';\nimport type { BoxItem, Collection } from '../../common/types/core';\n\ntype Props = {\n    currentCollection: Collection,\n    gridColumnCount: number,\n    rootElement: HTMLElement,\n    selected?: BoxItem,\n    ...$Exact<ItemGridProps>,\n};\n\nconst ItemGrid = ({\n    currentCollection,\n    gridColumnCount,\n    onItemSelect,\n    rootElement,\n    rootId,\n    selected,\n    ...rest\n}: Props) => {\n    const items = getProp(currentCollection, 'items', []);\n    const gridRowCount = Math.ceil(items.length / gridColumnCount);\n    const linearIndex = selected ? items.findIndex(item => item?.id === selected?.id) : 0;\n    const selectedRowIndex = Math.floor(linearIndex / gridColumnCount);\n    const selectedColumnIndex = linearIndex % gridColumnCount;\n\n    /**\n     * Renderer used for cards in grid view\n     *\n     * @param {number} slotIndex - index of item in currentCollection.items\n     * @return {React.Element} - Element to display in card\n     */\n    const slotRenderer = (slotIndex: number): ?React.Element<any> => {\n        const item: ?BoxItem = getProp(currentCollection, `items[${slotIndex}]`);\n        return item ? <ItemGridCell item={item} onItemSelect={onItemSelect} rootId={rootId} {...rest} /> : null;\n    };\n\n    /**\n     * Update the currently selected item when navigating with keyboard\n     * @param {number} row - row index of selected item\n     * @param {number} column - column index of selected item\n     * @return {void}\n     */\n    const onCellSelect = (row: number, column: number) => {\n        const index = row * gridColumnCount + column;\n        const item: ?BoxItem = getProp(currentCollection, `items[${index}]`);\n\n        if (item) {\n            onItemSelect(item, () => {\n                focus(rootElement, '.bdl-GridViewSlot-content--selected .be-item-name .be-item-label', false);\n            });\n        }\n    };\n\n    return (\n        <AutoSizer>\n            {({ height, width }) => (\n                <ArrowKeyStepper\n                    columnCount={gridColumnCount}\n                    mode=\"cells\"\n                    isControlled\n                    scrollToRow={selectedRowIndex}\n                    scrollToColumn={selectedColumnIndex}\n                    onScrollToChange={({ scrollToRow, scrollToColumn }) => {\n                        onCellSelect(scrollToRow, scrollToColumn);\n                    }}\n                    rowCount={gridRowCount}\n                >\n                    {({ scrollToRow }) => (\n                        <GridView\n                            columnCount={gridColumnCount}\n                            currentCollection={currentCollection}\n                            height={height}\n                            scrollToRow={scrollToRow}\n                            slotRenderer={slotRenderer}\n                            width={width}\n                        />\n                    )}\n                </ArrowKeyStepper>\n            )}\n        </AutoSizer>\n    );\n};\n\nexport default ItemGrid;\n"],"file":"ItemGrid.js"}

package/es/elements/content-explorer/ItemGridThumbnail.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import isThumbnailReady from './utils';
-import { getIcon } from '../common/item/iconCellRenderer';
+import IconCell from '../common/item/IconCell';
 import './ItemGridThumbnail.scss';
 
 var ItemGridThumbnail = function ItemGridThumbnail(_ref) {
@@ -15,7 +15,10 @@ var ItemGridThumbnail = function ItemGridThumbnail(_ref) {
     }
   }) : React.createElement("div", {
     className: "bce-ItemGridThumbnail-item"
-  }, getIcon(128, item)));
+  }, React.createElement(IconCell, {
+    rowData: item,
+    dimension: 128
+  })));
 };
 
 export default ItemGridThumbnail;

package/es/elements/content-explorer/ItemGridThumbnail.js.flow

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import isThumbnailReady from './utils';
-import { getIcon } from '../common/item/iconCellRenderer';
+import IconCell from '../common/item/IconCell';
 import type { BoxItem } from '../../common/types/core';
 import './ItemGridThumbnail.scss';
 
@@ -17,9 +17,12 @@ const ItemGridThumbnail = ({ item }: Props) => {
             {thumbnailUrl && isThumbnailReady(item) ? (
                 <div className="bce-ItemGridThumbnail-item" style={{ backgroundImage: `url("${thumbnailUrl}")` }} />
             ) : (
-                <div className="bce-ItemGridThumbnail-item">{getIcon(128, item)}</div>
+                <div className="bce-ItemGridThumbnail-item">
+                    <IconCell rowData={item} dimension={128} />
+                </div>
             )}
         </div>
     );
 };
+
 export default ItemGridThumbnail;

package/es/elements/content-explorer/ItemGridThumbnail.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/content-explorer/ItemGridThumbnail.js"],"names":["React","isThumbnailReady","getIcon","ItemGridThumbnail","item","thumbnailUrl","backgroundImage"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,gBAAP,MAA6B,SAA7B;AACA,SAASC,OAAT,QAAwB,iCAAxB;AAEA,OAAO,0BAAP;;AAMA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,OAAqB;AAAA,MAAlBC,IAAkB,QAAlBA,IAAkB;AAAA,MACnCC,YADmC,GAClBD,IADkB,CACnCC,YADmC;AAG3C,SACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACKA,YAAY,IAAIJ,gBAAgB,CAACG,IAAD,CAAhC,GACG;AAAK,IAAA,SAAS,EAAC,4BAAf;AAA4C,IAAA,KAAK,EAAE;AAAEE,MAAAA,eAAe,kBAAUD,YAAV;AAAjB;AAAnD,IADH,GAGG;AAAK,IAAA,SAAS,EAAC;AAAf,KAA6CH,OAAO,CAAC,GAAD,EAAME,IAAN,CAApD,CAJR,CADJ;AASH,CAZD;;AAaA,eAAeD,iBAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport isThumbnailReady from './utils';\nimport { getIcon } from '../common/item/iconCellRenderer';\nimport type { BoxItem } from '../../common/types/core';\nimport './ItemGridThumbnail.scss';\n\ntype Props = {\n    item: BoxItem,\n};\n\nconst ItemGridThumbnail = ({ item }: Props) => {\n    const { thumbnailUrl } = item;\n\n    return (\n        <div className=\"bce-ItemGridThumbnail\">\n            {thumbnailUrl && isThumbnailReady(item) ? (\n                <div className=\"bce-ItemGridThumbnail-item\" style={{ backgroundImage: `url(\"${thumbnailUrl}\")` }} />\n            ) : (\n                <div className=\"bce-ItemGridThumbnail-item\">{getIcon(128, item)}</div>\n            )}\n        </div>\n    );\n};\nexport default ItemGridThumbnail;\n"],"file":"ItemGridThumbnail.js"}
+{"version":3,"sources":["../../../src/elements/content-explorer/ItemGridThumbnail.js"],"names":["React","isThumbnailReady","IconCell","ItemGridThumbnail","item","thumbnailUrl","backgroundImage"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,gBAAP,MAA6B,SAA7B;AACA,OAAOC,QAAP,MAAqB,yBAArB;AAEA,OAAO,0BAAP;;AAMA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,OAAqB;AAAA,MAAlBC,IAAkB,QAAlBA,IAAkB;AAAA,MACnCC,YADmC,GAClBD,IADkB,CACnCC,YADmC;AAG3C,SACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACKA,YAAY,IAAIJ,gBAAgB,CAACG,IAAD,CAAhC,GACG;AAAK,IAAA,SAAS,EAAC,4BAAf;AAA4C,IAAA,KAAK,EAAE;AAAEE,MAAAA,eAAe,kBAAUD,YAAV;AAAjB;AAAnD,IADH,GAGG;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,oBAAC,QAAD;AAAU,IAAA,OAAO,EAAED,IAAnB;AAAyB,IAAA,SAAS,EAAE;AAApC,IADJ,CAJR,CADJ;AAWH,CAdD;;AAgBA,eAAeD,iBAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport isThumbnailReady from './utils';\nimport IconCell from '../common/item/IconCell';\nimport type { BoxItem } from '../../common/types/core';\nimport './ItemGridThumbnail.scss';\n\ntype Props = {\n    item: BoxItem,\n};\n\nconst ItemGridThumbnail = ({ item }: Props) => {\n    const { thumbnailUrl } = item;\n\n    return (\n        <div className=\"bce-ItemGridThumbnail\">\n            {thumbnailUrl && isThumbnailReady(item) ? (\n                <div className=\"bce-ItemGridThumbnail-item\" style={{ backgroundImage: `url(\"${thumbnailUrl}\")` }} />\n            ) : (\n                <div className=\"bce-ItemGridThumbnail-item\">\n                    <IconCell rowData={item} dimension={128} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default ItemGridThumbnail;\n"],"file":"ItemGridThumbnail.js"}

package/es/elements/content-explorer/ItemList.js

@@ -139,6 +139,7 @@ var ItemList = function ItemList(_ref) {
         disableSort: true,
         dataKey: FIELD_ID,
         cellRenderer: iconCell,
+        headerRole: "gridcell",
         width: isSmall ? 30 : 50,
         flexShrink: 0
       }), React.createElement(Column, {
@@ -150,7 +151,7 @@ var ItemList = function ItemList(_ref) {
         width: 300,
         flexGrow: 1
       }), isSmall ? null : React.createElement(Column, {
-        className: "bce-item-coloumn",
+        className: "bce-item-column",
         disableSort: !hasSort,
         label: isRecents ? intl.formatMessage(messages.interacted) : intl.formatMessage(messages.modified),
         dataKey: FIELD_DATE,
@@ -159,7 +160,7 @@ var ItemList = function ItemList(_ref) {
         width: isRecents ? 120 : 300,
         flexGrow: 1
       }), isSmall || isMedium ? null : React.createElement(Column, {
-        className: "bce-item-coloumn",
+        className: "bce-item-column",
         disableSort: !hasSort,
         label: intl.formatMessage(messages.size),
         dataKey: FIELD_SIZE,
@@ -171,6 +172,7 @@ var ItemList = function ItemList(_ref) {
         disableSort: true,
         dataKey: FIELD_ID,
         cellRenderer: moreOptionsCell,
+        headerRole: "gridcell",
         width: isSmall || !canShare ? 58 : 140,
         flexShrink: 0
       }));

package/es/elements/content-explorer/ItemList.js.flow

@@ -166,6 +166,7 @@ const ItemList = ({
                                 disableSort
                                 dataKey={FIELD_ID}
                                 cellRenderer={iconCell}
+                                headerRole="gridcell"
                                 width={isSmall ? 30 : 50}
                                 flexShrink={0}
                             />
@@ -180,7 +181,7 @@ const ItemList = ({
                             />
                             {isSmall ? null : (
                                 <Column
-                                    className="bce-item-coloumn"
+                                    className="bce-item-column"
                                     disableSort={!hasSort}
                                     label={
                                         isRecents
@@ -196,7 +197,7 @@ const ItemList = ({
                             )}
                             {isSmall || isMedium ? null : (
                                 <Column
-                                    className="bce-item-coloumn"
+                                    className="bce-item-column"
                                     disableSort={!hasSort}
                                     label={intl.formatMessage(messages.size)}
                                     dataKey={FIELD_SIZE}
@@ -210,6 +211,7 @@ const ItemList = ({
                                 disableSort
                                 dataKey={FIELD_ID}
                                 cellRenderer={moreOptionsCell}
+                                headerRole="gridcell"
                                 width={isSmall || !canShare ? 58 : 140}
                                 flexShrink={0}
                             />

package/es/elements/content-explorer/ItemList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/content-explorer/ItemList.js"],"names":["React","classNames","injectIntl","Table","Column","AutoSizer","KeyBinder","nameCellRenderer","iconCellRenderer","focus","messages","headerCellRenderer","sizeCellRenderer","dateCellRenderer","moreOptionsCellRenderer","FIELD_DATE","FIELD_ID","FIELD_NAME","FIELD_SIZE","VIEW_FOLDER","VIEW_RECENTS","ItemList","view","isSmall","isMedium","isTouch","rootId","rootElement","canShare","canDownload","canDelete","canPreview","canRename","onItemClick","onItemSelect","onItemDelete","onItemDownload","onItemRename","onItemShare","onItemPreview","onSortChange","currentCollection","tableRef","focusedRow","intl","nameCell","iconCell","dateCell","sizeAccessCell","moreOptionsCell","isRecents","hasSort","id","items","sortBy","sortDirection","rowCount","length","rowClassName","index","selected","sort","by","direction","scrollToRow","onSectionRendered","focusOnRender","width","height","rowData","startIndex","stopIndex","rowStartIndex","rowStopIndex","formatMessage","name","interacted","modified","size"],"mappings":"AAAA;;;;;AAMA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,UAAT,QAA2B,YAA3B;AAEA,SAASC,KAAT,EAAgBC,MAAhB,QAA8B,sCAA9B;AACA,OAAOC,SAAP,MAAsB,0CAAtB;AACA,OAAOC,SAAP,MAAsB,qBAAtB;AACA,OAAOC,gBAAP,MAA6B,iCAA7B;AACA,OAAOC,gBAAP,MAA6B,iCAA7B;AACA,SAASC,KAAT,QAAsB,iBAAtB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,OAAOC,kBAAP,MAA+B,sBAA/B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,uBAAP,MAAoC,2BAApC;AACA,SAASC,UAAT,EAAqBC,QAArB,EAA+BC,UAA/B,EAA2CC,UAA3C,EAAuDC,WAAvD,EAAoEC,YAApE,QAAwF,iBAAxF;AAEA,OAAO,mCAAP;AACA,OAAO,iBAAP;;AA2BA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAwBJ;AAAA,MAvBTC,IAuBS,QAvBTA,IAuBS;AAAA,MAtBTC,OAsBS,QAtBTA,OAsBS;AAAA,MArBTC,QAqBS,QArBTA,QAqBS;AAAA,MApBTC,OAoBS,QApBTA,OAoBS;AAAA,MAnBTC,MAmBS,QAnBTA,MAmBS;AAAA,MAlBTC,WAkBS,QAlBTA,WAkBS;AAAA,MAjBTC,QAiBS,QAjBTA,QAiBS;AAAA,MAhBTC,WAgBS,QAhBTA,WAgBS;AAAA,MAfTC,SAeS,QAfTA,SAeS;AAAA,MAdTC,UAcS,QAdTA,UAcS;AAAA,MAbTC,SAaS,QAbTA,SAaS;AAAA,MAZTC,WAYS,QAZTA,WAYS;AAAA,MAXTC,YAWS,QAXTA,YAWS;AAAA,MAVTC,YAUS,QAVTA,YAUS;AAAA,MATTC,cASS,QATTA,cASS;AAAA,MARTC,YAQS,QARTA,YAQS;AAAA,MAPTC,WAOS,QAPTA,WAOS;AAAA,MANTC,aAMS,QANTA,aAMS;AAAA,MALTC,YAKS,QALTA,YAKS;AAAA,MAJTC,iBAIS,QAJTA,iBAIS;AAAA,MAHTC,QAGS,QAHTA,QAGS;AAAA,MAFTC,UAES,QAFTA,UAES;AAAA,MADTC,IACS,QADTA,IACS;AACT,MAAMC,QAAQ,GAAGtC,gBAAgB,CAC7BmB,MAD6B,EAE7BJ,IAF6B,EAG7BW,WAH6B,EAI7BC,YAJ6B,EAK7BH,UAL6B,EAM7BR,OAN6B,EAMpB;AACTE,EAAAA,OAP6B,CAAjC;AASA,MAAMqB,QAAQ,GAAGtC,gBAAgB,EAAjC;AACA,MAAMuC,QAAQ,GAAGlC,gBAAgB,EAAjC;AACA,MAAMmC,cAAc,GAAGpC,gBAAgB,EAAvC;AACA,MAAMqC,eAAe,GAAGnC,uBAAuB,CAC3CiB,UAD2C,EAE3CH,QAF2C,EAG3CC,WAH2C,EAI3CC,SAJ2C,EAK3CE,SAL2C,EAM3CE,YAN2C,EAO3CC,YAP2C,EAQ3CC,cAR2C,EAS3CC,YAT2C,EAU3CC,WAV2C,EAW3CC,aAX2C,EAY3ChB,OAZ2C,CAA/C;AAcA,MAAM2B,SAAkB,GAAG5B,IAAI,KAAKF,YAApC;AACA,MAAM+B,OAAgB,GAAG7B,IAAI,KAAKH,WAAlC;AA5BS,MA6BDiC,EA7BC,GA6BqDX,iBA7BrD,CA6BDW,EA7BC;AAAA,8BA6BqDX,iBA7BrD,CA6BGY,KA7BH;AAAA,MA6BGA,KA7BH,sCA6BW,EA7BX;AAAA,MA6BeC,MA7Bf,GA6BqDb,iBA7BrD,CA6Bea,MA7Bf;AAAA,MA6BuBC,aA7BvB,GA6BqDd,iBA7BrD,CA6BuBc,aA7BvB;AA8BT,MAAMC,QAAgB,GAAGH,KAAK,CAACI,MAA/B;;AACA,MAAMC,YAAY,GAAG,SAAfA,YAAe,QAAe;AAAA,QAAZC,KAAY,SAAZA,KAAY;;AAChC,QAAIA,KAAK,KAAK,CAAC,CAAf,EAAkB;AACd,aAAO,qBAAP;AACH;;AAH+B,QAKxBC,QALwB,GAKXP,KAAK,CAACM,KAAD,CALM,CAKxBC,QALwB;AAMhC,WAAO3D,UAAU,qCAA8B0D,KAA9B,GAAuC;AACpD,+BAAyBC;AAD2B,KAAvC,CAAjB;AAGH,GATD;;AAWA,MAAMC,IAAI,GAAG,SAAPA,IAAO,QAA8C;AAAA,QAAnCC,EAAmC,SAA3CR,MAA2C;AAAA,QAAhBS,SAAgB,SAA/BR,aAA+B;AACvDf,IAAAA,YAAY,CAACsB,EAAD,EAAKC,SAAL,CAAZ;AACH,GAFD;;AAIA,SACI,oBAAC,SAAD;AACI,IAAA,EAAE,EAAEX,EADR;AAEI,IAAA,KAAK,EAAEC,KAFX;AAGI,IAAA,WAAW,EAAE,CAHjB;AAII,IAAA,QAAQ,EAAEG,QAJd;AAKI,IAAA,SAAS,EAAC,eALd;AAMI,IAAA,QAAQ,EAAEnB,YANd;AAOI,IAAA,OAAO,EAAEC,WAPb;AAQI,IAAA,UAAU,EAAEF,cARhB;AASI,IAAA,MAAM,EAAEH,WATZ;AAUI,IAAA,QAAQ,EAAEC,YAVd;AAWI,IAAA,QAAQ,EAAEC,YAXd;AAYI,IAAA,WAAW,EAAEQ,UAZjB;AAaI,IAAA,gBAAgB,EAAE;AAAA,UAAGqB,WAAH,SAAGA,WAAH;AAAA,aAAqBvD,KAAK,CAACkB,WAAD,0BAA+BqC,WAA/B,EAA1B;AAAA;AAbtB,KAeK;AAAA,QAAGC,iBAAH,SAAGA,iBAAH;AAAA,QAAsBD,WAAtB,SAAsBA,WAAtB;AAAA,QAAmCE,aAAnC,SAAmCA,aAAnC;AAAA,WACG,oBAAC,SAAD,QACK;AAAA,UAAGC,KAAH,SAAGA,KAAH;AAAA,UAAUC,MAAV,SAAUA,MAAV;AAAA,aACG,oBAAC,KAAD;AACI,QAAA,KAAK,EAAED,KADX;AAEI,QAAA,MAAM,EAAEC,MAFZ;AAGI,QAAA,YAAY,EAAE7C,OAAO,GAAG,CAAH,GAAO,EAHhC;AAII,QAAA,SAAS,EAAE,EAJf;AAKI,QAAA,QAAQ,EAAEiC,QALd;AAMI,QAAA,SAAS,EAAE;AAAA,cAAGG,KAAH,SAAGA,KAAH;AAAA,iBAAeN,KAAK,CAACM,KAAD,CAApB;AAAA,SANf;AAOI,QAAA,GAAG,EAAEjB,QAPT;AAQI,QAAA,YAAY,EAAEgB,YARlB;AASI,QAAA,aAAa,EAAEM,WATnB;AAUI,QAAA,IAAI,EAAEH,IAVV;AAWI,QAAA,MAAM,EAAEP,MAXZ;AAYI,QAAA,aAAa,EAAEC,aAZnB;AAaI,QAAA,UAAU,EAAE;AAAA,cAAGc,OAAH,SAAGA,OAAH;AAAA,iBAAiBnC,YAAY,CAACmC,OAAD,CAA7B;AAAA,SAbhB;AAcI,QAAA,cAAc,EAAE,+BAA+B;AAAA,cAA5BC,UAA4B,SAA5BA,UAA4B;AAAA,cAAhBC,SAAgB,SAAhBA,SAAgB;AAC3CN,UAAAA,iBAAiB,CAAC;AACdO,YAAAA,aAAa,EAAEF,UADD;AAEdG,YAAAA,YAAY,EAAEF;AAFA,WAAD,CAAjB;;AAIA,cAAIL,aAAJ,EAAmB;AACfzD,YAAAA,KAAK,CAACkB,WAAD,0BAA+BqC,WAA/B,EAAL;AACH;AACJ;AAtBL,SAwBI,oBAAC,MAAD;AACI,QAAA,WAAW,MADf;AAEI,QAAA,OAAO,EAAEhD,QAFb;AAGI,QAAA,YAAY,EAAE8B,QAHlB;AAII,QAAA,KAAK,EAAEvB,OAAO,GAAG,EAAH,GAAQ,EAJ1B;AAKI,QAAA,UAAU,EAAE;AALhB,QAxBJ,EA+BI,oBAAC,MAAD;AACI,QAAA,WAAW,EAAE,CAAC4B,OADlB;AAEI,QAAA,KAAK,EAAEP,IAAI,CAAC8B,aAAL,CAAmBhE,QAAQ,CAACiE,IAA5B,CAFX;AAGI,QAAA,OAAO,EAAE1D,UAHb;AAII,QAAA,YAAY,EAAE4B,QAJlB;AAKI,QAAA,cAAc,EAAElC,kBALpB;AAMI,QAAA,KAAK,EAAE,GANX;AAOI,QAAA,QAAQ,EAAE;AAPd,QA/BJ,EAwCKY,OAAO,GAAG,IAAH,GACJ,oBAAC,MAAD;AACI,QAAA,SAAS,EAAC,kBADd;AAEI,QAAA,WAAW,EAAE,CAAC4B,OAFlB;AAGI,QAAA,KAAK,EACDD,SAAS,GACHN,IAAI,CAAC8B,aAAL,CAAmBhE,QAAQ,CAACkE,UAA5B,CADG,GAEHhC,IAAI,CAAC8B,aAAL,CAAmBhE,QAAQ,CAACmE,QAA5B,CANd;AAQI,QAAA,OAAO,EAAE9D,UARb;AASI,QAAA,YAAY,EAAEgC,QATlB;AAUI,QAAA,cAAc,EAAEpC,kBAVpB;AAWI,QAAA,KAAK,EAAEuC,SAAS,GAAG,GAAH,GAAS,GAX7B;AAYI,QAAA,QAAQ,EAAE;AAZd,QAzCR,EAwDK3B,OAAO,IAAIC,QAAX,GAAsB,IAAtB,GACG,oBAAC,MAAD;AACI,QAAA,SAAS,EAAC,kBADd;AAEI,QAAA,WAAW,EAAE,CAAC2B,OAFlB;AAGI,QAAA,KAAK,EAAEP,IAAI,CAAC8B,aAAL,CAAmBhE,QAAQ,CAACoE,IAA5B,CAHX;AAII,QAAA,OAAO,EAAE5D,UAJb;AAKI,QAAA,YAAY,EAAE8B,cALlB;AAMI,QAAA,cAAc,EAAErC,kBANpB;AAOI,QAAA,KAAK,EAAE,EAPX;AAQI,QAAA,UAAU,EAAE;AARhB,QAzDR,EAoEI,oBAAC,MAAD;AACI,QAAA,WAAW,MADf;AAEI,QAAA,OAAO,EAAEK,QAFb;AAGI,QAAA,YAAY,EAAEiC,eAHlB;AAII,QAAA,KAAK,EAAE1B,OAAO,IAAI,CAACK,QAAZ,GAAuB,EAAvB,GAA4B,GAJvC;AAKI,QAAA,UAAU,EAAE;AALhB,QApEJ,CADH;AAAA,KADL,CADH;AAAA,GAfL,CADJ;AAoGH,CA1KD;;AA4KA,eAAe1B,UAAU,CAACmB,QAAD,CAAzB","sourcesContent":["/**\n * @flow\n * @file Item list component\n * @author Box\n */\n\nimport React from 'react';\nimport classNames from 'classnames';\nimport { injectIntl } from 'react-intl';\nimport type { InjectIntlProvidedProps } from 'react-intl';\nimport { Table, Column } from '@box/react-virtualized/dist/es/Table';\nimport AutoSizer from '@box/react-virtualized/dist/es/AutoSizer';\nimport KeyBinder from '../common/KeyBinder';\nimport nameCellRenderer from '../common/item/nameCellRenderer';\nimport iconCellRenderer from '../common/item/iconCellRenderer';\nimport { focus } from '../../utils/dom';\nimport messages from '../common/messages';\nimport headerCellRenderer from './headerCellRenderer';\nimport sizeCellRenderer from './sizeCellRenderer';\nimport dateCellRenderer from './dateCellRenderer';\nimport moreOptionsCellRenderer from './moreOptionsCellRenderer';\nimport { FIELD_DATE, FIELD_ID, FIELD_NAME, FIELD_SIZE, VIEW_FOLDER, VIEW_RECENTS } from '../../constants';\nimport type { View, Collection } from '../../common/types/core';\nimport '@box/react-virtualized/styles.css';\nimport './ItemList.scss';\n\ntype Props = {\n    canDelete: boolean,\n    canDownload: boolean,\n    canPreview: boolean,\n    canRename: boolean,\n    canShare: boolean,\n    currentCollection: Collection,\n    focusedRow: number,\n    isMedium: boolean,\n    isSmall: boolean,\n    isTouch: boolean,\n    onItemClick: Function,\n    onItemDelete: Function,\n    onItemDownload: Function,\n    onItemPreview: Function,\n    onItemRename: Function,\n    onItemSelect: Function,\n    onItemShare: Function,\n    onSortChange: Function,\n    rootElement: HTMLElement,\n    rootId: string,\n    tableRef: Function,\n    view: View,\n} & InjectIntlProvidedProps;\n\nconst ItemList = ({\n    view,\n    isSmall,\n    isMedium,\n    isTouch,\n    rootId,\n    rootElement,\n    canShare,\n    canDownload,\n    canDelete,\n    canPreview,\n    canRename,\n    onItemClick,\n    onItemSelect,\n    onItemDelete,\n    onItemDownload,\n    onItemRename,\n    onItemShare,\n    onItemPreview,\n    onSortChange,\n    currentCollection,\n    tableRef,\n    focusedRow,\n    intl,\n}: Props) => {\n    const nameCell = nameCellRenderer(\n        rootId,\n        view,\n        onItemClick,\n        onItemSelect,\n        canPreview,\n        isSmall, // shows details if false\n        isTouch,\n    );\n    const iconCell = iconCellRenderer();\n    const dateCell = dateCellRenderer();\n    const sizeAccessCell = sizeCellRenderer();\n    const moreOptionsCell = moreOptionsCellRenderer(\n        canPreview,\n        canShare,\n        canDownload,\n        canDelete,\n        canRename,\n        onItemSelect,\n        onItemDelete,\n        onItemDownload,\n        onItemRename,\n        onItemShare,\n        onItemPreview,\n        isSmall,\n    );\n    const isRecents: boolean = view === VIEW_RECENTS;\n    const hasSort: boolean = view === VIEW_FOLDER;\n    const { id, items = [], sortBy, sortDirection }: Collection = currentCollection;\n    const rowCount: number = items.length;\n    const rowClassName = ({ index }) => {\n        if (index === -1) {\n            return 'bce-item-header-row';\n        }\n\n        const { selected } = items[index];\n        return classNames(`bce-item-row bce-item-row-${index}`, {\n            'bce-item-row-selected': selected,\n        });\n    };\n\n    const sort = ({ sortBy: by, sortDirection: direction }) => {\n        onSortChange(by, direction);\n    };\n\n    return (\n        <KeyBinder\n            id={id}\n            items={items}\n            columnCount={1}\n            rowCount={rowCount}\n            className=\"bce-item-grid\"\n            onRename={onItemRename}\n            onShare={onItemShare}\n            onDownload={onItemDownload}\n            onOpen={onItemClick}\n            onSelect={onItemSelect}\n            onDelete={onItemDelete}\n            scrollToRow={focusedRow}\n            onScrollToChange={({ scrollToRow }) => focus(rootElement, `.bce-item-row-${scrollToRow}`)}\n        >\n            {({ onSectionRendered, scrollToRow, focusOnRender }) => (\n                <AutoSizer>\n                    {({ width, height }) => (\n                        <Table\n                            width={width}\n                            height={height}\n                            headerHeight={isSmall ? 0 : 40}\n                            rowHeight={50}\n                            rowCount={rowCount}\n                            rowGetter={({ index }) => items[index]}\n                            ref={tableRef}\n                            rowClassName={rowClassName}\n                            scrollToIndex={scrollToRow}\n                            sort={sort}\n                            sortBy={sortBy}\n                            sortDirection={sortDirection}\n                            onRowClick={({ rowData }) => onItemSelect(rowData)}\n                            onRowsRendered={({ startIndex, stopIndex }) => {\n                                onSectionRendered({\n                                    rowStartIndex: startIndex,\n                                    rowStopIndex: stopIndex,\n                                });\n                                if (focusOnRender) {\n                                    focus(rootElement, `.bce-item-row-${scrollToRow}`);\n                                }\n                            }}\n                        >\n                            <Column\n                                disableSort\n                                dataKey={FIELD_ID}\n                                cellRenderer={iconCell}\n                                width={isSmall ? 30 : 50}\n                                flexShrink={0}\n                            />\n                            <Column\n                                disableSort={!hasSort}\n                                label={intl.formatMessage(messages.name)}\n                                dataKey={FIELD_NAME}\n                                cellRenderer={nameCell}\n                                headerRenderer={headerCellRenderer}\n                                width={300}\n                                flexGrow={1}\n                            />\n                            {isSmall ? null : (\n                                <Column\n                                    className=\"bce-item-coloumn\"\n                                    disableSort={!hasSort}\n                                    label={\n                                        isRecents\n                                            ? intl.formatMessage(messages.interacted)\n                                            : intl.formatMessage(messages.modified)\n                                    }\n                                    dataKey={FIELD_DATE}\n                                    cellRenderer={dateCell}\n                                    headerRenderer={headerCellRenderer}\n                                    width={isRecents ? 120 : 300}\n                                    flexGrow={1}\n                                />\n                            )}\n                            {isSmall || isMedium ? null : (\n                                <Column\n                                    className=\"bce-item-coloumn\"\n                                    disableSort={!hasSort}\n                                    label={intl.formatMessage(messages.size)}\n                                    dataKey={FIELD_SIZE}\n                                    cellRenderer={sizeAccessCell}\n                                    headerRenderer={headerCellRenderer}\n                                    width={80}\n                                    flexShrink={0}\n                                />\n                            )}\n                            <Column\n                                disableSort\n                                dataKey={FIELD_ID}\n                                cellRenderer={moreOptionsCell}\n                                width={isSmall || !canShare ? 58 : 140}\n                                flexShrink={0}\n                            />\n                        </Table>\n                    )}\n                </AutoSizer>\n            )}\n        </KeyBinder>\n    );\n};\n\nexport default injectIntl(ItemList);\n"],"file":"ItemList.js"}
+{"version":3,"sources":["../../../src/elements/content-explorer/ItemList.js"],"names":["React","classNames","injectIntl","Table","Column","AutoSizer","KeyBinder","nameCellRenderer","iconCellRenderer","focus","messages","headerCellRenderer","sizeCellRenderer","dateCellRenderer","moreOptionsCellRenderer","FIELD_DATE","FIELD_ID","FIELD_NAME","FIELD_SIZE","VIEW_FOLDER","VIEW_RECENTS","ItemList","view","isSmall","isMedium","isTouch","rootId","rootElement","canShare","canDownload","canDelete","canPreview","canRename","onItemClick","onItemSelect","onItemDelete","onItemDownload","onItemRename","onItemShare","onItemPreview","onSortChange","currentCollection","tableRef","focusedRow","intl","nameCell","iconCell","dateCell","sizeAccessCell","moreOptionsCell","isRecents","hasSort","id","items","sortBy","sortDirection","rowCount","length","rowClassName","index","selected","sort","by","direction","scrollToRow","onSectionRendered","focusOnRender","width","height","rowData","startIndex","stopIndex","rowStartIndex","rowStopIndex","formatMessage","name","interacted","modified","size"],"mappings":"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","sourcesContent":["/**\n * @flow\n * @file Item list component\n * @author Box\n */\n\nimport React from 'react';\nimport classNames from 'classnames';\nimport { injectIntl } from 'react-intl';\nimport type { InjectIntlProvidedProps } from 'react-intl';\nimport { Table, Column } from '@box/react-virtualized/dist/es/Table';\nimport AutoSizer from '@box/react-virtualized/dist/es/AutoSizer';\nimport KeyBinder from '../common/KeyBinder';\nimport nameCellRenderer from '../common/item/nameCellRenderer';\nimport iconCellRenderer from '../common/item/iconCellRenderer';\nimport { focus } from '../../utils/dom';\nimport messages from '../common/messages';\nimport headerCellRenderer from './headerCellRenderer';\nimport sizeCellRenderer from './sizeCellRenderer';\nimport dateCellRenderer from './dateCellRenderer';\nimport moreOptionsCellRenderer from './moreOptionsCellRenderer';\nimport { FIELD_DATE, FIELD_ID, FIELD_NAME, FIELD_SIZE, VIEW_FOLDER, VIEW_RECENTS } from '../../constants';\nimport type { View, Collection } from '../../common/types/core';\nimport '@box/react-virtualized/styles.css';\nimport './ItemList.scss';\n\ntype Props = {\n    canDelete: boolean,\n    canDownload: boolean,\n    canPreview: boolean,\n    canRename: boolean,\n    canShare: boolean,\n    currentCollection: Collection,\n    focusedRow: number,\n    isMedium: boolean,\n    isSmall: boolean,\n    isTouch: boolean,\n    onItemClick: Function,\n    onItemDelete: Function,\n    onItemDownload: Function,\n    onItemPreview: Function,\n    onItemRename: Function,\n    onItemSelect: Function,\n    onItemShare: Function,\n    onSortChange: Function,\n    rootElement: HTMLElement,\n    rootId: string,\n    tableRef: Function,\n    view: View,\n} & InjectIntlProvidedProps;\n\nconst ItemList = ({\n    view,\n    isSmall,\n    isMedium,\n    isTouch,\n    rootId,\n    rootElement,\n    canShare,\n    canDownload,\n    canDelete,\n    canPreview,\n    canRename,\n    onItemClick,\n    onItemSelect,\n    onItemDelete,\n    onItemDownload,\n    onItemRename,\n    onItemShare,\n    onItemPreview,\n    onSortChange,\n    currentCollection,\n    tableRef,\n    focusedRow,\n    intl,\n}: Props) => {\n    const nameCell = nameCellRenderer(\n        rootId,\n        view,\n        onItemClick,\n        onItemSelect,\n        canPreview,\n        isSmall, // shows details if false\n        isTouch,\n    );\n    const iconCell = iconCellRenderer();\n    const dateCell = dateCellRenderer();\n    const sizeAccessCell = sizeCellRenderer();\n    const moreOptionsCell = moreOptionsCellRenderer(\n        canPreview,\n        canShare,\n        canDownload,\n        canDelete,\n        canRename,\n        onItemSelect,\n        onItemDelete,\n        onItemDownload,\n        onItemRename,\n        onItemShare,\n        onItemPreview,\n        isSmall,\n    );\n    const isRecents: boolean = view === VIEW_RECENTS;\n    const hasSort: boolean = view === VIEW_FOLDER;\n    const { id, items = [], sortBy, sortDirection }: Collection = currentCollection;\n    const rowCount: number = items.length;\n    const rowClassName = ({ index }) => {\n        if (index === -1) {\n            return 'bce-item-header-row';\n        }\n\n        const { selected } = items[index];\n        return classNames(`bce-item-row bce-item-row-${index}`, {\n            'bce-item-row-selected': selected,\n        });\n    };\n\n    const sort = ({ sortBy: by, sortDirection: direction }) => {\n        onSortChange(by, direction);\n    };\n\n    return (\n        <KeyBinder\n            id={id}\n            items={items}\n            columnCount={1}\n            rowCount={rowCount}\n            className=\"bce-item-grid\"\n            onRename={onItemRename}\n            onShare={onItemShare}\n            onDownload={onItemDownload}\n            onOpen={onItemClick}\n            onSelect={onItemSelect}\n            onDelete={onItemDelete}\n            scrollToRow={focusedRow}\n            onScrollToChange={({ scrollToRow }) => focus(rootElement, `.bce-item-row-${scrollToRow}`)}\n        >\n            {({ onSectionRendered, scrollToRow, focusOnRender }) => (\n                <AutoSizer>\n                    {({ width, height }) => (\n                        <Table\n                            width={width}\n                            height={height}\n                            headerHeight={isSmall ? 0 : 40}\n                            rowHeight={50}\n                            rowCount={rowCount}\n                            rowGetter={({ index }) => items[index]}\n                            ref={tableRef}\n                            rowClassName={rowClassName}\n                            scrollToIndex={scrollToRow}\n                            sort={sort}\n                            sortBy={sortBy}\n                            sortDirection={sortDirection}\n                            onRowClick={({ rowData }) => onItemSelect(rowData)}\n                            onRowsRendered={({ startIndex, stopIndex }) => {\n                                onSectionRendered({\n                                    rowStartIndex: startIndex,\n                                    rowStopIndex: stopIndex,\n                                });\n                                if (focusOnRender) {\n                                    focus(rootElement, `.bce-item-row-${scrollToRow}`);\n                                }\n                            }}\n                        >\n                            <Column\n                                disableSort\n                                dataKey={FIELD_ID}\n                                cellRenderer={iconCell}\n                                headerRole=\"gridcell\"\n                                width={isSmall ? 30 : 50}\n                                flexShrink={0}\n                            />\n                            <Column\n                                disableSort={!hasSort}\n                                label={intl.formatMessage(messages.name)}\n                                dataKey={FIELD_NAME}\n                                cellRenderer={nameCell}\n                                headerRenderer={headerCellRenderer}\n                                width={300}\n                                flexGrow={1}\n                            />\n                            {isSmall ? null : (\n                                <Column\n                                    className=\"bce-item-column\"\n                                    disableSort={!hasSort}\n                                    label={\n                                        isRecents\n                                            ? intl.formatMessage(messages.interacted)\n                                            : intl.formatMessage(messages.modified)\n                                    }\n                                    dataKey={FIELD_DATE}\n                                    cellRenderer={dateCell}\n                                    headerRenderer={headerCellRenderer}\n                                    width={isRecents ? 120 : 300}\n                                    flexGrow={1}\n                                />\n                            )}\n                            {isSmall || isMedium ? null : (\n                                <Column\n                                    className=\"bce-item-column\"\n                                    disableSort={!hasSort}\n                                    label={intl.formatMessage(messages.size)}\n                                    dataKey={FIELD_SIZE}\n                                    cellRenderer={sizeAccessCell}\n                                    headerRenderer={headerCellRenderer}\n                                    width={80}\n                                    flexShrink={0}\n                                />\n                            )}\n                            <Column\n                                disableSort\n                                dataKey={FIELD_ID}\n                                cellRenderer={moreOptionsCell}\n                                headerRole=\"gridcell\"\n                                width={isSmall || !canShare ? 58 : 140}\n                                flexShrink={0}\n                            />\n                        </Table>\n                    )}\n                </AutoSizer>\n            )}\n        </KeyBinder>\n    );\n};\n\nexport default injectIntl(ItemList);\n"],"file":"ItemList.js"}

package/es/elements/content-explorer/ItemList.scss

@@ -14,8 +14,8 @@
     border-left: 2px solid transparent;
     outline: none;
 
-    .bce-item-coloumn {
-        color: $bdl-gray-62;
+    .bce-item-column {
+        color: $bdl-gray-65;
     }
 
     .bce-more-options {
@@ -23,7 +23,8 @@
 
         .btn {
             margin-left: 8px;
-            background-color: transparent;
+            background-color: $white;
+            border-color: $bdl-gray-10;
         }
 
         .be-is-touch & {
@@ -41,7 +42,7 @@
             opacity: 1;
         }
 
-        .bce-item-coloumn,
+        .bce-item-column,
         .be & .btn-plain {
             color: $dark-cerulean;
             outline: none;
@@ -54,9 +55,17 @@
 
         .bce-more-options {
             opacity: 1;
+
+            .btn {
+                border-color: $grey-blue;
+
+                &:focus {
+                    border-color: $bdl-gray;
+                }
+            }
         }
 
-        .bce-item-coloumn,
+        .bce-item-column,
         .be & .btn-plain {
             color: $dark-cerulean;
         }
@@ -86,7 +95,7 @@
     box-shadow: 0 4px 6px -2px $transparent-black;
 
     .ReactVirtualized__Table__headerColumn {
-        color: $bdl-gray-62;
+        color: $bdl-gray-65;
         font-weight: normal;
         text-transform: none;
     }
@@ -97,8 +106,7 @@
         &:active,
         &:hover,
         &:focus {
-            color: $dark-cerulean;
-            outline: none;
+            color: $bdl-gray;
         }
     }
 }

package/es/elements/content-explorer/MoreOptions.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import Button from '../../components/button/Button';
 import DropdownMenu from '../../components/dropdown-menu/DropdownMenu';
 import Menu from '../../components/menu/Menu';
 import MenuItem from '../../components/menu/MenuItem';
 import Browser from '../../utils/Browser';
 import IconEllipsis from '../../icons/general/IconEllipsis';
-import { bdlGray50 } from '../../styles/variables';
+import { bdlGray } from '../../styles/variables';
 import messages from '../common/messages';
 import { PERMISSION_CAN_DOWNLOAD, PERMISSION_CAN_RENAME, PERMISSION_CAN_DELETE, PERMISSION_CAN_SHARE, PERMISSION_CAN_PREVIEW, TYPE_FILE, TYPE_WEBLINK } from '../../constants';
 import './MoreOptionsCell.scss';
@@ -23,6 +23,7 @@ var MoreOptions = function MoreOptions(_ref) {
       onItemRename = _ref.onItemRename,
       onItemShare = _ref.onItemShare,
       onItemPreview = _ref.onItemPreview,
+      intl = _ref.intl,
       isSmall = _ref.isSmall,
       item = _ref.item;
 
@@ -75,12 +76,13 @@ var MoreOptions = function MoreOptions(_ref) {
     constrainToScrollParent: true,
     isRightAligned: true
   }, React.createElement(Button, {
+    "aria-label": intl.formatMessage(messages.moreOptions),
     className: "bce-btn-more-options",
     "data-testid": "bce-btn-more-options",
     onFocus: onFocus,
     type: "button"
   }, React.createElement(IconEllipsis, {
-    color: bdlGray50,
+    color: bdlGray,
     height: 10,
     width: 16
   })), React.createElement(Menu, null, allowPreview && React.createElement(MenuItem, {
@@ -102,5 +104,5 @@ var MoreOptions = function MoreOptions(_ref) {
   }, React.createElement(FormattedMessage, messages.share)));
 };
 
-export default MoreOptions;
+export default injectIntl(MoreOptions);
 //# sourceMappingURL=MoreOptions.js.map

package/es/elements/content-explorer/MoreOptions.js.flow

@@ -1,13 +1,16 @@
 // @flow
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+
 import Button from '../../components/button/Button';
 import DropdownMenu from '../../components/dropdown-menu/DropdownMenu';
 import Menu from '../../components/menu/Menu';
 import MenuItem from '../../components/menu/MenuItem';
 import Browser from '../../utils/Browser';
 import IconEllipsis from '../../icons/general/IconEllipsis';
-import { bdlGray50 } from '../../styles/variables';
+import { bdlGray } from '../../styles/variables';
+
 import messages from '../common/messages';
 import {
     PERMISSION_CAN_DOWNLOAD,
@@ -21,6 +24,7 @@ import {
 
 import type { CommonGridViewFunctions } from './flowTypes';
 import type { BoxItem } from '../../common/types/core';
+
 import './MoreOptionsCell.scss';
 
 type Props = {
@@ -29,6 +33,7 @@ type Props = {
     canPreview: boolean,
     canRename: boolean,
     canShare: boolean,
+    intl: IntlShape,
     isSmall: boolean,
     item: BoxItem,
     ...$Exact<CommonGridViewFunctions>,
@@ -46,6 +51,7 @@ const MoreOptions = ({
     onItemRename,
     onItemShare,
     onItemPreview,
+    intl,
     isSmall,
     item,
 }: Props) => {
@@ -78,12 +84,13 @@ const MoreOptions = ({
         <div className="bce-more-options">
             <DropdownMenu constrainToScrollParent isRightAligned>
                 <Button
+                    aria-label={intl.formatMessage(messages.moreOptions)}
                     className="bce-btn-more-options"
                     data-testid="bce-btn-more-options"
                     onFocus={onFocus}
                     type="button"
                 >
-                    <IconEllipsis color={bdlGray50} height={10} width={16} />
+                    <IconEllipsis color={bdlGray} height={10} width={16} />
                 </Button>
                 <Menu>
                     {allowPreview && (
@@ -127,4 +134,4 @@ const MoreOptions = ({
     );
 };
 
-export default MoreOptions;
+export default injectIntl(MoreOptions);

package/es/elements/content-explorer/MoreOptions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/content-explorer/MoreOptions.js"],"names":["React","FormattedMessage","Button","DropdownMenu","Menu","MenuItem","Browser","IconEllipsis","bdlGray50","messages","PERMISSION_CAN_DOWNLOAD","PERMISSION_CAN_RENAME","PERMISSION_CAN_DELETE","PERMISSION_CAN_SHARE","PERMISSION_CAN_PREVIEW","TYPE_FILE","TYPE_WEBLINK","MoreOptions","canPreview","canShare","canDownload","canDelete","canRename","onItemSelect","onItemDelete","onItemDownload","onItemRename","onItemShare","onItemPreview","isSmall","item","onFocus","onDelete","onDownload","onRename","onShare","onPreview","permissions","type","allowPreview","allowOpen","allowDelete","allowShare","allowRename","allowDownload","isMobile","allowed","preview","open","delete","download","rename","share"],"mappings":"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","sourcesContent":["// @flow\nimport React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport Button from '../../components/button/Button';\nimport DropdownMenu from '../../components/dropdown-menu/DropdownMenu';\nimport Menu from '../../components/menu/Menu';\nimport MenuItem from '../../components/menu/MenuItem';\nimport Browser from '../../utils/Browser';\nimport IconEllipsis from '../../icons/general/IconEllipsis';\nimport { bdlGray50 } from '../../styles/variables';\nimport messages from '../common/messages';\nimport {\n    PERMISSION_CAN_DOWNLOAD,\n    PERMISSION_CAN_RENAME,\n    PERMISSION_CAN_DELETE,\n    PERMISSION_CAN_SHARE,\n    PERMISSION_CAN_PREVIEW,\n    TYPE_FILE,\n    TYPE_WEBLINK,\n} from '../../constants';\n\nimport type { CommonGridViewFunctions } from './flowTypes';\nimport type { BoxItem } from '../../common/types/core';\nimport './MoreOptionsCell.scss';\n\ntype Props = {\n    canDelete: boolean,\n    canDownload: boolean,\n    canPreview: boolean,\n    canRename: boolean,\n    canShare: boolean,\n    isSmall: boolean,\n    item: BoxItem,\n    ...$Exact<CommonGridViewFunctions>,\n};\n\nconst MoreOptions = ({\n    canPreview,\n    canShare,\n    canDownload,\n    canDelete,\n    canRename,\n    onItemSelect,\n    onItemDelete,\n    onItemDownload,\n    onItemRename,\n    onItemShare,\n    onItemPreview,\n    isSmall,\n    item,\n}: Props) => {\n    const onFocus = () => onItemSelect(item);\n    const onDelete = () => onItemDelete(item);\n    const onDownload = () => onItemDownload(item);\n    const onRename = () => onItemRename(item);\n    const onShare = () => onItemShare(item);\n    const onPreview = () => onItemPreview(item);\n\n    const { permissions, type } = item;\n\n    if (!permissions) {\n        return <span />;\n    }\n\n    const allowPreview = type === TYPE_FILE && canPreview && permissions[PERMISSION_CAN_PREVIEW];\n    const allowOpen = type === TYPE_WEBLINK;\n    const allowDelete = canDelete && permissions[PERMISSION_CAN_DELETE];\n    const allowShare = canShare && permissions[PERMISSION_CAN_SHARE];\n    const allowRename = canRename && permissions[PERMISSION_CAN_RENAME];\n    const allowDownload =\n        canDownload && permissions[PERMISSION_CAN_DOWNLOAD] && type === TYPE_FILE && !Browser.isMobile();\n    const allowed = allowDelete || allowRename || allowDownload || allowPreview || allowShare || allowOpen;\n\n    if (!allowed) {\n        return <span />;\n    }\n    return (\n        <div className=\"bce-more-options\">\n            <DropdownMenu constrainToScrollParent isRightAligned>\n                <Button\n                    className=\"bce-btn-more-options\"\n                    data-testid=\"bce-btn-more-options\"\n                    onFocus={onFocus}\n                    type=\"button\"\n                >\n                    <IconEllipsis color={bdlGray50} height={10} width={16} />\n                </Button>\n                <Menu>\n                    {allowPreview && (\n                        <MenuItem onClick={onPreview}>\n                            <FormattedMessage {...messages.preview} />\n                        </MenuItem>\n                    )}\n                    {allowOpen && (\n                        <MenuItem onClick={onPreview}>\n                            <FormattedMessage {...messages.open} />\n                        </MenuItem>\n                    )}\n                    {allowDelete && (\n                        <MenuItem onClick={onDelete}>\n                            <FormattedMessage {...messages.delete} />\n                        </MenuItem>\n                    )}\n                    {allowDownload && (\n                        <MenuItem onClick={onDownload}>\n                            <FormattedMessage {...messages.download} />\n                        </MenuItem>\n                    )}\n                    {allowRename && (\n                        <MenuItem onClick={onRename}>\n                            <FormattedMessage {...messages.rename} />\n                        </MenuItem>\n                    )}\n                    {allowShare && (\n                        <MenuItem onClick={onShare}>\n                            <FormattedMessage {...messages.share} />\n                        </MenuItem>\n                    )}\n                </Menu>\n            </DropdownMenu>\n            {allowShare && !isSmall && (\n                <Button onClick={onShare} onFocus={onFocus} type=\"button\">\n                    <FormattedMessage {...messages.share} />\n                </Button>\n            )}\n        </div>\n    );\n};\n\nexport default MoreOptions;\n"],"file":"MoreOptions.js"}
+{"version":3,"sources":["../../../src/elements/content-explorer/MoreOptions.js"],"names":["React","FormattedMessage","injectIntl","Button","DropdownMenu","Menu","MenuItem","Browser","IconEllipsis","bdlGray","messages","PERMISSION_CAN_DOWNLOAD","PERMISSION_CAN_RENAME","PERMISSION_CAN_DELETE","PERMISSION_CAN_SHARE","PERMISSION_CAN_PREVIEW","TYPE_FILE","TYPE_WEBLINK","MoreOptions","canPreview","canShare","canDownload","canDelete","canRename","onItemSelect","onItemDelete","onItemDownload","onItemRename","onItemShare","onItemPreview","intl","isSmall","item","onFocus","onDelete","onDownload","onRename","onShare","onPreview","permissions","type","allowPreview","allowOpen","allowDelete","allowShare","allowRename","allowDownload","isMobile","allowed","formatMessage","moreOptions","preview","open","delete","download","rename","share"],"mappings":"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","sourcesContent":["// @flow\nimport React from 'react';\nimport { FormattedMessage, injectIntl } from 'react-intl';\nimport type { IntlShape } from 'react-intl';\n\nimport Button from '../../components/button/Button';\nimport DropdownMenu from '../../components/dropdown-menu/DropdownMenu';\nimport Menu from '../../components/menu/Menu';\nimport MenuItem from '../../components/menu/MenuItem';\nimport Browser from '../../utils/Browser';\nimport IconEllipsis from '../../icons/general/IconEllipsis';\nimport { bdlGray } from '../../styles/variables';\n\nimport messages from '../common/messages';\nimport {\n    PERMISSION_CAN_DOWNLOAD,\n    PERMISSION_CAN_RENAME,\n    PERMISSION_CAN_DELETE,\n    PERMISSION_CAN_SHARE,\n    PERMISSION_CAN_PREVIEW,\n    TYPE_FILE,\n    TYPE_WEBLINK,\n} from '../../constants';\n\nimport type { CommonGridViewFunctions } from './flowTypes';\nimport type { BoxItem } from '../../common/types/core';\n\nimport './MoreOptionsCell.scss';\n\ntype Props = {\n    canDelete: boolean,\n    canDownload: boolean,\n    canPreview: boolean,\n    canRename: boolean,\n    canShare: boolean,\n    intl: IntlShape,\n    isSmall: boolean,\n    item: BoxItem,\n    ...$Exact<CommonGridViewFunctions>,\n};\n\nconst MoreOptions = ({\n    canPreview,\n    canShare,\n    canDownload,\n    canDelete,\n    canRename,\n    onItemSelect,\n    onItemDelete,\n    onItemDownload,\n    onItemRename,\n    onItemShare,\n    onItemPreview,\n    intl,\n    isSmall,\n    item,\n}: Props) => {\n    const onFocus = () => onItemSelect(item);\n    const onDelete = () => onItemDelete(item);\n    const onDownload = () => onItemDownload(item);\n    const onRename = () => onItemRename(item);\n    const onShare = () => onItemShare(item);\n    const onPreview = () => onItemPreview(item);\n\n    const { permissions, type } = item;\n\n    if (!permissions) {\n        return <span />;\n    }\n\n    const allowPreview = type === TYPE_FILE && canPreview && permissions[PERMISSION_CAN_PREVIEW];\n    const allowOpen = type === TYPE_WEBLINK;\n    const allowDelete = canDelete && permissions[PERMISSION_CAN_DELETE];\n    const allowShare = canShare && permissions[PERMISSION_CAN_SHARE];\n    const allowRename = canRename && permissions[PERMISSION_CAN_RENAME];\n    const allowDownload =\n        canDownload && permissions[PERMISSION_CAN_DOWNLOAD] && type === TYPE_FILE && !Browser.isMobile();\n    const allowed = allowDelete || allowRename || allowDownload || allowPreview || allowShare || allowOpen;\n\n    if (!allowed) {\n        return <span />;\n    }\n    return (\n        <div className=\"bce-more-options\">\n            <DropdownMenu constrainToScrollParent isRightAligned>\n                <Button\n                    aria-label={intl.formatMessage(messages.moreOptions)}\n                    className=\"bce-btn-more-options\"\n                    data-testid=\"bce-btn-more-options\"\n                    onFocus={onFocus}\n                    type=\"button\"\n                >\n                    <IconEllipsis color={bdlGray} height={10} width={16} />\n                </Button>\n                <Menu>\n                    {allowPreview && (\n                        <MenuItem onClick={onPreview}>\n                            <FormattedMessage {...messages.preview} />\n                        </MenuItem>\n                    )}\n                    {allowOpen && (\n                        <MenuItem onClick={onPreview}>\n                            <FormattedMessage {...messages.open} />\n                        </MenuItem>\n                    )}\n                    {allowDelete && (\n                        <MenuItem onClick={onDelete}>\n                            <FormattedMessage {...messages.delete} />\n                        </MenuItem>\n                    )}\n                    {allowDownload && (\n                        <MenuItem onClick={onDownload}>\n                            <FormattedMessage {...messages.download} />\n                        </MenuItem>\n                    )}\n                    {allowRename && (\n                        <MenuItem onClick={onRename}>\n                            <FormattedMessage {...messages.rename} />\n                        </MenuItem>\n                    )}\n                    {allowShare && (\n                        <MenuItem onClick={onShare}>\n                            <FormattedMessage {...messages.share} />\n                        </MenuItem>\n                    )}\n                </Menu>\n            </DropdownMenu>\n            {allowShare && !isSmall && (\n                <Button onClick={onShare} onFocus={onFocus} type=\"button\">\n                    <FormattedMessage {...messages.share} />\n                </Button>\n            )}\n        </div>\n    );\n};\n\nexport default injectIntl(MoreOptions);\n"],"file":"MoreOptions.js"}

package/es/elements/content-open-with/ContentOpenWith.scss

@@ -29,7 +29,7 @@
     .bcow-menu-item-description {
         max-width: 200px;
         margin: 0;
-        color: $bdl-gray-62;
+        color: $bdl-gray-65;
         font-size: 11px;
         line-height: 14px;
         white-space: normal;

package/es/elements/content-picker/Footer.js

@@ -6,7 +6,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * @author Box
  */
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import Button from '../../components/button';
 import ButtonGroup from '../../components/button-group';
 import IconCheck from '../../icons/general/IconCheck';
@@ -22,6 +22,7 @@ var Footer = function Footer(_ref) {
       selectedItems = _ref.selectedItems,
       onSelectedClick = _ref.onSelectedClick,
       hasHitSelectionLimit = _ref.hasHitSelectionLimit,
+      intl = _ref.intl,
       isSingleSelect = _ref.isSingleSelect,
       onCancel = _ref.onCancel,
       onChoose = _ref.onChoose,
@@ -30,6 +31,9 @@ var Footer = function Footer(_ref) {
       children = _ref.children,
       renderCustomActionButtons = _ref.renderCustomActionButtons,
       showSelectedButton = _ref.showSelectedButton;
+  var cancelMessage = intl.formatMessage(messages.cancel);
+  var chooseMessage = intl.formatMessage(messages.choose);
+  var isChooseButtonDisabled = !selectedCount;
   return React.createElement("footer", {
     className: "bcp-footer"
   }, React.createElement("div", {
@@ -58,18 +62,23 @@ var Footer = function Footer(_ref) {
   }) : React.createElement(ButtonGroup, {
     className: "bcp-footer-actions"
   }, React.createElement(Tooltip, {
-    text: cancelButtonLabel || React.createElement(FormattedMessage, messages.cancel)
+    text: cancelButtonLabel || cancelMessage
   }, React.createElement(Button, {
+    "aria-label": cancelMessage,
     onClick: onCancel,
     type: "button"
   }, React.createElement(IconClose, {
     height: 16,
     width: 16
   }))), React.createElement(Tooltip, {
-    isDisabled: !selectedCount,
-    text: chooseButtonLabel || React.createElement(FormattedMessage, messages.choose)
+    isDisabled: isChooseButtonDisabled,
+    text: chooseButtonLabel || chooseMessage
   }, React.createElement(PrimaryButton, {
-    isDisabled: !selectedCount,
+    "aria-label": chooseMessage,
+    disabled: isChooseButtonDisabled // sets disabled attribute
+    ,
+    isDisabled: isChooseButtonDisabled // used in Button component
+    ,
     onClick: onChoose,
     type: "button"
   }, React.createElement(IconCheck, {
@@ -79,5 +88,5 @@ var Footer = function Footer(_ref) {
   }))))));
 };
 
-export default Footer;
+export default injectIntl(Footer);
 //# sourceMappingURL=Footer.js.map