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

package/es/elements/common/sub-header/ViewModeChangeButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/common/sub-header/ViewModeChangeButton.js"],"names":["React","injectIntl","classNames","noop","Button","IconGridViewInverted","IconListView","messages","Tooltip","VIEW_MODE_GRID","VIEW_MODE_LIST","bdlGray50","ViewModeChangeButton","className","onViewModeChange","intl","viewMode","rest","isGridView","viewMessage","formatMessage","listView","gridView","onClick"],"mappings":";;;;;;AAEA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,YAA3B;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,IAAP,MAAiB,aAAjB;AAEA,OAAOC,MAAP,MAAmB,4BAAnB;AACA,OAAOC,oBAAP,MAAiC,6CAAjC;AACA,OAAOC,YAAP,MAAyB,qCAAzB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,OAAP,MAAoB,YAApB;AAEA,SAASC,cAAT,EAAyBC,cAAzB,QAA+C,oBAA/C;AACA,SAASC,SAAT,QAA0B,2BAA1B;AACA,OAAO,6BAAP;;AAQA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,OAAiF;AAAA,4BAA9EC,SAA8E;AAAA,MAA9EA,SAA8E,+BAAlE,EAAkE;AAAA,mCAA9DC,gBAA8D;AAAA,MAA9DA,gBAA8D,sCAA3CX,IAA2C;AAAA,MAArCY,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;AAAA,MAAlBC,IAAkB;;AAC1G,MAAMC,UAAU,GAAGF,QAAQ,KAAKP,cAAhC;AACA,MAAMU,WAAW,GAAGD,UAAU,GAAGH,IAAI,CAACK,aAAL,CAAmBb,QAAQ,CAACc,QAA5B,CAAH,GAA2CN,IAAI,CAACK,aAAL,CAAmBb,QAAQ,CAACe,QAA5B,CAAzE;;AACA,MAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAClBT,IAAAA,gBAAgB,CAACI,UAAU,GAAGR,cAAH,GAAoBD,cAA/B,CAAhB;AACH,GAFD;;AAIA,SACI,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAEU;AAAf,KACI,oBAAC,MAAD;AACI,kBAAYA,WADhB;AAEI,mBAAY,yBAFhB;AAGI,IAAA,SAAS,EAAEjB,UAAU,CAAC,0BAAD,EAA6BW,SAA7B,CAHzB;AAII,IAAA,IAAI,EAAC,QAJT;AAKI,IAAA,OAAO,EAAEU;AALb,KAMQN,IANR,GAQKC,UAAU,GACP,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAEP,SAArB;AAAgC,IAAA,KAAK,EAAE,EAAvC;AAA2C,IAAA,MAAM,EAAE;AAAnD,IADO,GAGP,oBAAC,oBAAD;AAAsB,IAAA,KAAK,EAAEA,SAA7B;AAAwC,IAAA,KAAK,EAAE,EAA/C;AAAmD,IAAA,MAAM,EAAE;AAA3D,IAXR,CADJ,CADJ;AAkBH,CAzBD;;AA2BA,eAAeV,UAAU,CAACW,oBAAD,CAAzB","sourcesContent":["// @flow\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\nimport type { InjectIntlProvidedProps } from 'react-intl';\nimport classNames from 'classnames';\nimport noop from 'lodash/noop';\n\nimport Button from '../../../components/button';\nimport IconGridViewInverted from '../../../icons/general/IconGridViewInverted';\nimport IconListView from '../../../icons/general/IconListView';\nimport messages from '../messages';\nimport Tooltip from '../Tooltip';\nimport type { ViewMode } from '../flowTypes';\nimport { VIEW_MODE_GRID, VIEW_MODE_LIST } from '../../../constants';\nimport { bdlGray50 } from '../../../styles/variables';\nimport './ViewModeChangeButton.scss';\n\ntype Props = {\n    className?: string,\n    onViewModeChange?: (viewMode: ViewMode) => void,\n    viewMode: ViewMode,\n} & InjectIntlProvidedProps;\n\nconst ViewModeChangeButton = ({ className = '', onViewModeChange = noop, intl, viewMode, ...rest }: Props) => {\n    const isGridView = viewMode === VIEW_MODE_GRID;\n    const viewMessage = isGridView ? intl.formatMessage(messages.listView) : intl.formatMessage(messages.gridView);\n    const onClick = () => {\n        onViewModeChange(isGridView ? VIEW_MODE_LIST : VIEW_MODE_GRID);\n    };\n\n    return (\n        <Tooltip text={viewMessage}>\n            <Button\n                aria-label={viewMessage}\n                data-testid=\"view-mode-change-button\"\n                className={classNames('bdl-ViewModeChangeButton', className)}\n                type=\"button\"\n                onClick={onClick}\n                {...rest}\n            >\n                {isGridView ? (\n                    <IconListView color={bdlGray50} width={17} height={17} />\n                ) : (\n                    <IconGridViewInverted color={bdlGray50} width={17} height={17} />\n                )}\n            </Button>\n        </Tooltip>\n    );\n};\n\nexport default injectIntl(ViewModeChangeButton);\n"],"file":"ViewModeChangeButton.js"}
+{"version":3,"sources":["../../../../src/elements/common/sub-header/ViewModeChangeButton.js"],"names":["React","injectIntl","classNames","noop","Button","IconGridViewInverted","IconListView","messages","Tooltip","VIEW_MODE_GRID","VIEW_MODE_LIST","bdlGray65","ViewModeChangeButton","className","onViewModeChange","intl","viewMode","rest","isGridView","viewMessage","formatMessage","listView","gridView","onClick"],"mappings":";;;;;;AAEA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,YAA3B;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,IAAP,MAAiB,aAAjB;AAEA,OAAOC,MAAP,MAAmB,4BAAnB;AACA,OAAOC,oBAAP,MAAiC,6CAAjC;AACA,OAAOC,YAAP,MAAyB,qCAAzB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,OAAP,MAAoB,YAApB;AAEA,SAASC,cAAT,EAAyBC,cAAzB,QAA+C,oBAA/C;AACA,SAASC,SAAT,QAA0B,2BAA1B;AACA,OAAO,6BAAP;;AAQA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,OAAiF;AAAA,4BAA9EC,SAA8E;AAAA,MAA9EA,SAA8E,+BAAlE,EAAkE;AAAA,mCAA9DC,gBAA8D;AAAA,MAA9DA,gBAA8D,sCAA3CX,IAA2C;AAAA,MAArCY,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;AAAA,MAAlBC,IAAkB;;AAC1G,MAAMC,UAAU,GAAGF,QAAQ,KAAKP,cAAhC;AACA,MAAMU,WAAW,GAAGD,UAAU,GAAGH,IAAI,CAACK,aAAL,CAAmBb,QAAQ,CAACc,QAA5B,CAAH,GAA2CN,IAAI,CAACK,aAAL,CAAmBb,QAAQ,CAACe,QAA5B,CAAzE;;AACA,MAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAClBT,IAAAA,gBAAgB,CAACI,UAAU,GAAGR,cAAH,GAAoBD,cAA/B,CAAhB;AACH,GAFD;;AAIA,SACI,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAEU;AAAf,KACI,oBAAC,MAAD;AACI,kBAAYA,WADhB;AAEI,mBAAY,yBAFhB;AAGI,IAAA,SAAS,EAAEjB,UAAU,CAAC,0BAAD,EAA6BW,SAA7B,CAHzB;AAII,IAAA,IAAI,EAAC,QAJT;AAKI,IAAA,OAAO,EAAEU;AALb,KAMQN,IANR,GAQKC,UAAU,GACP,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAEP,SAArB;AAAgC,IAAA,KAAK,EAAE,EAAvC;AAA2C,IAAA,MAAM,EAAE;AAAnD,IADO,GAGP,oBAAC,oBAAD;AAAsB,IAAA,KAAK,EAAEA,SAA7B;AAAwC,IAAA,KAAK,EAAE,EAA/C;AAAmD,IAAA,MAAM,EAAE;AAA3D,IAXR,CADJ,CADJ;AAkBH,CAzBD;;AA2BA,eAAeV,UAAU,CAACW,oBAAD,CAAzB","sourcesContent":["// @flow\n\nimport React from 'react';\nimport { injectIntl } from 'react-intl';\nimport type { InjectIntlProvidedProps } from 'react-intl';\nimport classNames from 'classnames';\nimport noop from 'lodash/noop';\n\nimport Button from '../../../components/button';\nimport IconGridViewInverted from '../../../icons/general/IconGridViewInverted';\nimport IconListView from '../../../icons/general/IconListView';\nimport messages from '../messages';\nimport Tooltip from '../Tooltip';\nimport type { ViewMode } from '../flowTypes';\nimport { VIEW_MODE_GRID, VIEW_MODE_LIST } from '../../../constants';\nimport { bdlGray65 } from '../../../styles/variables';\nimport './ViewModeChangeButton.scss';\n\ntype Props = {\n    className?: string,\n    onViewModeChange?: (viewMode: ViewMode) => void,\n    viewMode: ViewMode,\n} & InjectIntlProvidedProps;\n\nconst ViewModeChangeButton = ({ className = '', onViewModeChange = noop, intl, viewMode, ...rest }: Props) => {\n    const isGridView = viewMode === VIEW_MODE_GRID;\n    const viewMessage = isGridView ? intl.formatMessage(messages.listView) : intl.formatMessage(messages.gridView);\n    const onClick = () => {\n        onViewModeChange(isGridView ? VIEW_MODE_LIST : VIEW_MODE_GRID);\n    };\n\n    return (\n        <Tooltip text={viewMessage}>\n            <Button\n                aria-label={viewMessage}\n                data-testid=\"view-mode-change-button\"\n                className={classNames('bdl-ViewModeChangeButton', className)}\n                type=\"button\"\n                onClick={onClick}\n                {...rest}\n            >\n                {isGridView ? (\n                    <IconListView color={bdlGray65} width={17} height={17} />\n                ) : (\n                    <IconGridViewInverted color={bdlGray65} width={17} height={17} />\n                )}\n            </Button>\n        </Tooltip>\n    );\n};\n\nexport default injectIntl(ViewModeChangeButton);\n"],"file":"ViewModeChangeButton.js"}

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

@@ -13,7 +13,7 @@ import MetadataBasedItemList from '../../features/metadata-based-view';
 import { VIEW_ERROR, VIEW_METADATA, VIEW_MODE_LIST, VIEW_MODE_GRID, VIEW_SELECTED } from '../../constants';
 import type { ViewMode } from '../common/flowTypes';
 import type { FieldsToShow } from '../../common/types/metadataQueries';
-import type { View, Collection } from '../../common/types/core';
+import type { BoxItem, Collection, View } from '../../common/types/core';
 import './Content.scss';
 
 /**
@@ -53,6 +53,7 @@ type Props = {
     onSortChange: Function,
     rootElement?: HTMLElement,
     rootId: string,
+    selected?: BoxItem,
     tableRef: Function,
     view: View,
     viewMode?: ViewMode,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/content-explorer/Content.js"],"names":["React","EmptyState","ProgressBar","ItemGrid","ItemList","MetadataBasedItemList","VIEW_ERROR","VIEW_METADATA","VIEW_MODE_LIST","VIEW_MODE_GRID","VIEW_SELECTED","isEmpty","view","currentCollection","fieldsToShow","items","length","Content","focusedRow","gridColumnCount","isMedium","onSortChange","tableRef","viewMode","rest","isViewEmpty","isMetadataBasedView","isListView","isGridView","percentLoaded"],"mappings":";;;;;;AAAA;;;;;AAMA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AACA,OAAOC,WAAP,MAAwB,wBAAxB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,qBAAP,MAAkC,oCAAlC;AACA,SAASC,UAAT,EAAqBC,aAArB,EAAoCC,cAApC,EAAoDC,cAApD,EAAoEC,aAApE,QAAyF,iBAAzF;AAIA,OAAO,gBAAP;AAEA;;;;;;;;;AAQA,SAASC,OAAT,CAAiBC,IAAjB,EAA6BC,iBAA7B,EAA4DC,YAA5D,EAAiG;AAAA,8BAC1DD,iBAD0D,CACrFE,KADqF;AAAA,MACrFA,KADqF,sCAC7E,EAD6E;AAE7F,SAAOH,IAAI,KAAKN,UAAT,IAAuB,CAACS,KAAK,CAACC,MAA9B,IAAyCJ,IAAI,KAAKL,aAAT,IAA0B,CAACO,YAAY,CAACE,MAAxF;AACH;;AA+BD,IAAMC,OAAO,GAAG,SAAVA,OAAU,OAWH;AAAA,MAVTJ,iBAUS,QAVTA,iBAUS;AAAA,MATTK,UASS,QATTA,UASS;AAAA,kCARTC,eAQS;AAAA,MARTA,eAQS,qCARS,CAQT;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,YAMS,QANTA,YAMS;AAAA,MALTC,QAKS,QALTA,QAKS;AAAA,MAJTV,IAIS,QAJTA,IAIS;AAAA,2BAHTW,QAGS;AAAA,MAHTA,QAGS,8BAHEf,cAGF;AAAA,+BAFTM,YAES;AAAA,MAFTA,YAES,kCAFM,EAEN;AAAA,MADNU,IACM;;AACT,MAAMC,WAAW,GAAGd,OAAO,CAACC,IAAD,EAAOC,iBAAP,EAA0BC,YAA1B,CAA3B;AACA,MAAMY,mBAAmB,GAAGd,IAAI,KAAKL,aAArC;AACA,MAAMoB,UAAU,GAAG,CAACD,mBAAD,IAAwBH,QAAQ,KAAKf,cAAxD,CAHS,CAG+D;;AACxE,MAAMoB,UAAU,GAAG,CAACF,mBAAD,IAAwBH,QAAQ,KAAKd,cAAxD,CAJS,CAI+D;;AAExE,SACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACKG,IAAI,KAAKN,UAAT,IAAuBM,IAAI,KAAKF,aAAhC,GAAgD,IAAhD,GACG,oBAAC,WAAD;AAAa,IAAA,OAAO,EAAEG,iBAAiB,CAACgB;AAAxC,IAFR,EAKKJ,WAAW,IAAI,oBAAC,UAAD;AAAY,IAAA,IAAI,EAAEb,IAAlB;AAAwB,IAAA,SAAS,EAAEC,iBAAiB,CAACgB,aAAlB,KAAoC;AAAvE,IALpB,EAMK,CAACJ,WAAD,IAAgBC,mBAAhB,IACG,oBAAC,qBAAD;AAAuB,IAAA,iBAAiB,EAAEb,iBAA1C;AAA6D,IAAA,YAAY,EAAEC;AAA3E,KAA6FU,IAA7F,EAPR,EASK,CAACC,WAAD,IAAgBE,UAAhB,IACG,oBAAC,QAAD;AACI,IAAA,iBAAiB,EAAEd,iBADvB;AAEI,IAAA,YAAY,EAAEQ,YAFlB;AAGI,IAAA,UAAU,EAAEH,UAHhB;AAII,IAAA,QAAQ,EAAEE,QAJd;AAKI,IAAA,QAAQ,EAAEE,QALd;AAMI,IAAA,IAAI,EAAEV;AANV,KAOQY,IAPR,EAVR,EAoBK,CAACC,WAAD,IAAgBG,UAAhB,IACG,oBAAC,QAAD;AACI,IAAA,iBAAiB,EAAEf,iBADvB;AAEI,IAAA,eAAe,EAAEM,eAFrB;AAGI,IAAA,IAAI,EAAEP;AAHV,KAIQY,IAJR,EArBR,CADJ;AA+BH,CAhDD;;AAkDA,eAAeP,OAAf","sourcesContent":["/**\n * @flow\n * @file File picker header and list component\n * @author Box\n */\n\nimport React from 'react';\nimport EmptyState from '../common/empty-state';\nimport ProgressBar from '../common/progress-bar';\nimport ItemGrid from './ItemGrid';\nimport ItemList from './ItemList';\nimport MetadataBasedItemList from '../../features/metadata-based-view';\nimport { VIEW_ERROR, VIEW_METADATA, VIEW_MODE_LIST, VIEW_MODE_GRID, VIEW_SELECTED } from '../../constants';\nimport type { ViewMode } from '../common/flowTypes';\nimport type { FieldsToShow } from '../../common/types/metadataQueries';\nimport type { View, Collection } from '../../common/types/core';\nimport './Content.scss';\n\n/**\n * Determines if we should show the empty state\n *\n * @param {string} view the current view\n * @param {Object} currentCollection the current collection\n * @param {FieldsToShow} fieldsToShow list of metadata template fields to show\n * @return {boolean} empty or not\n */\nfunction isEmpty(view: View, currentCollection: Collection, fieldsToShow: FieldsToShow): boolean {\n    const { items = [] }: Collection = currentCollection;\n    return view === VIEW_ERROR || !items.length || (view === VIEW_METADATA && !fieldsToShow.length);\n}\n\ntype Props = {\n    canDelete: boolean,\n    canDownload: boolean,\n    canPreview: boolean,\n    canRename: boolean,\n    canShare: boolean,\n    currentCollection: Collection,\n    fieldsToShow?: FieldsToShow,\n    focusedRow: number,\n    gridColumnCount?: 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    onMetadataUpdate: Function,\n    onSortChange: Function,\n    rootElement?: HTMLElement,\n    rootId: string,\n    tableRef: Function,\n    view: View,\n    viewMode?: ViewMode,\n};\n\nconst Content = ({\n    currentCollection,\n    focusedRow,\n    gridColumnCount = 1,\n    isMedium,\n    onSortChange,\n    tableRef,\n    view,\n    viewMode = VIEW_MODE_LIST,\n    fieldsToShow = [],\n    ...rest\n}: Props) => {\n    const isViewEmpty = isEmpty(view, currentCollection, fieldsToShow);\n    const isMetadataBasedView = view === VIEW_METADATA;\n    const isListView = !isMetadataBasedView && viewMode === VIEW_MODE_LIST; // Folder view or Recents view\n    const isGridView = !isMetadataBasedView && viewMode === VIEW_MODE_GRID; // Folder view or Recents view\n\n    return (\n        <div className=\"bce-content\">\n            {view === VIEW_ERROR || view === VIEW_SELECTED ? null : (\n                <ProgressBar percent={currentCollection.percentLoaded} />\n            )}\n\n            {isViewEmpty && <EmptyState view={view} isLoading={currentCollection.percentLoaded !== 100} />}\n            {!isViewEmpty && isMetadataBasedView && (\n                <MetadataBasedItemList currentCollection={currentCollection} fieldsToShow={fieldsToShow} {...rest} />\n            )}\n            {!isViewEmpty && isListView && (\n                <ItemList\n                    currentCollection={currentCollection}\n                    onSortChange={onSortChange}\n                    focusedRow={focusedRow}\n                    isMedium={isMedium}\n                    tableRef={tableRef}\n                    view={view}\n                    {...rest}\n                />\n            )}\n            {!isViewEmpty && isGridView && (\n                <ItemGrid\n                    currentCollection={currentCollection}\n                    gridColumnCount={gridColumnCount}\n                    view={view}\n                    {...rest}\n                />\n            )}\n        </div>\n    );\n};\n\nexport default Content;\n"],"file":"Content.js"}
+{"version":3,"sources":["../../../src/elements/content-explorer/Content.js"],"names":["React","EmptyState","ProgressBar","ItemGrid","ItemList","MetadataBasedItemList","VIEW_ERROR","VIEW_METADATA","VIEW_MODE_LIST","VIEW_MODE_GRID","VIEW_SELECTED","isEmpty","view","currentCollection","fieldsToShow","items","length","Content","focusedRow","gridColumnCount","isMedium","onSortChange","tableRef","viewMode","rest","isViewEmpty","isMetadataBasedView","isListView","isGridView","percentLoaded"],"mappings":";;;;;;AAAA;;;;;AAMA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AACA,OAAOC,WAAP,MAAwB,wBAAxB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,qBAAP,MAAkC,oCAAlC;AACA,SAASC,UAAT,EAAqBC,aAArB,EAAoCC,cAApC,EAAoDC,cAApD,EAAoEC,aAApE,QAAyF,iBAAzF;AAIA,OAAO,gBAAP;AAEA;;;;;;;;;AAQA,SAASC,OAAT,CAAiBC,IAAjB,EAA6BC,iBAA7B,EAA4DC,YAA5D,EAAiG;AAAA,8BAC1DD,iBAD0D,CACrFE,KADqF;AAAA,MACrFA,KADqF,sCAC7E,EAD6E;AAE7F,SAAOH,IAAI,KAAKN,UAAT,IAAuB,CAACS,KAAK,CAACC,MAA9B,IAAyCJ,IAAI,KAAKL,aAAT,IAA0B,CAACO,YAAY,CAACE,MAAxF;AACH;;AAgCD,IAAMC,OAAO,GAAG,SAAVA,OAAU,OAWH;AAAA,MAVTJ,iBAUS,QAVTA,iBAUS;AAAA,MATTK,UASS,QATTA,UASS;AAAA,kCARTC,eAQS;AAAA,MARTA,eAQS,qCARS,CAQT;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,YAMS,QANTA,YAMS;AAAA,MALTC,QAKS,QALTA,QAKS;AAAA,MAJTV,IAIS,QAJTA,IAIS;AAAA,2BAHTW,QAGS;AAAA,MAHTA,QAGS,8BAHEf,cAGF;AAAA,+BAFTM,YAES;AAAA,MAFTA,YAES,kCAFM,EAEN;AAAA,MADNU,IACM;;AACT,MAAMC,WAAW,GAAGd,OAAO,CAACC,IAAD,EAAOC,iBAAP,EAA0BC,YAA1B,CAA3B;AACA,MAAMY,mBAAmB,GAAGd,IAAI,KAAKL,aAArC;AACA,MAAMoB,UAAU,GAAG,CAACD,mBAAD,IAAwBH,QAAQ,KAAKf,cAAxD,CAHS,CAG+D;;AACxE,MAAMoB,UAAU,GAAG,CAACF,mBAAD,IAAwBH,QAAQ,KAAKd,cAAxD,CAJS,CAI+D;;AAExE,SACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACKG,IAAI,KAAKN,UAAT,IAAuBM,IAAI,KAAKF,aAAhC,GAAgD,IAAhD,GACG,oBAAC,WAAD;AAAa,IAAA,OAAO,EAAEG,iBAAiB,CAACgB;AAAxC,IAFR,EAKKJ,WAAW,IAAI,oBAAC,UAAD;AAAY,IAAA,IAAI,EAAEb,IAAlB;AAAwB,IAAA,SAAS,EAAEC,iBAAiB,CAACgB,aAAlB,KAAoC;AAAvE,IALpB,EAMK,CAACJ,WAAD,IAAgBC,mBAAhB,IACG,oBAAC,qBAAD;AAAuB,IAAA,iBAAiB,EAAEb,iBAA1C;AAA6D,IAAA,YAAY,EAAEC;AAA3E,KAA6FU,IAA7F,EAPR,EASK,CAACC,WAAD,IAAgBE,UAAhB,IACG,oBAAC,QAAD;AACI,IAAA,iBAAiB,EAAEd,iBADvB;AAEI,IAAA,YAAY,EAAEQ,YAFlB;AAGI,IAAA,UAAU,EAAEH,UAHhB;AAII,IAAA,QAAQ,EAAEE,QAJd;AAKI,IAAA,QAAQ,EAAEE,QALd;AAMI,IAAA,IAAI,EAAEV;AANV,KAOQY,IAPR,EAVR,EAoBK,CAACC,WAAD,IAAgBG,UAAhB,IACG,oBAAC,QAAD;AACI,IAAA,iBAAiB,EAAEf,iBADvB;AAEI,IAAA,eAAe,EAAEM,eAFrB;AAGI,IAAA,IAAI,EAAEP;AAHV,KAIQY,IAJR,EArBR,CADJ;AA+BH,CAhDD;;AAkDA,eAAeP,OAAf","sourcesContent":["/**\n * @flow\n * @file File picker header and list component\n * @author Box\n */\n\nimport React from 'react';\nimport EmptyState from '../common/empty-state';\nimport ProgressBar from '../common/progress-bar';\nimport ItemGrid from './ItemGrid';\nimport ItemList from './ItemList';\nimport MetadataBasedItemList from '../../features/metadata-based-view';\nimport { VIEW_ERROR, VIEW_METADATA, VIEW_MODE_LIST, VIEW_MODE_GRID, VIEW_SELECTED } from '../../constants';\nimport type { ViewMode } from '../common/flowTypes';\nimport type { FieldsToShow } from '../../common/types/metadataQueries';\nimport type { BoxItem, Collection, View } from '../../common/types/core';\nimport './Content.scss';\n\n/**\n * Determines if we should show the empty state\n *\n * @param {string} view the current view\n * @param {Object} currentCollection the current collection\n * @param {FieldsToShow} fieldsToShow list of metadata template fields to show\n * @return {boolean} empty or not\n */\nfunction isEmpty(view: View, currentCollection: Collection, fieldsToShow: FieldsToShow): boolean {\n    const { items = [] }: Collection = currentCollection;\n    return view === VIEW_ERROR || !items.length || (view === VIEW_METADATA && !fieldsToShow.length);\n}\n\ntype Props = {\n    canDelete: boolean,\n    canDownload: boolean,\n    canPreview: boolean,\n    canRename: boolean,\n    canShare: boolean,\n    currentCollection: Collection,\n    fieldsToShow?: FieldsToShow,\n    focusedRow: number,\n    gridColumnCount?: 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    onMetadataUpdate: Function,\n    onSortChange: Function,\n    rootElement?: HTMLElement,\n    rootId: string,\n    selected?: BoxItem,\n    tableRef: Function,\n    view: View,\n    viewMode?: ViewMode,\n};\n\nconst Content = ({\n    currentCollection,\n    focusedRow,\n    gridColumnCount = 1,\n    isMedium,\n    onSortChange,\n    tableRef,\n    view,\n    viewMode = VIEW_MODE_LIST,\n    fieldsToShow = [],\n    ...rest\n}: Props) => {\n    const isViewEmpty = isEmpty(view, currentCollection, fieldsToShow);\n    const isMetadataBasedView = view === VIEW_METADATA;\n    const isListView = !isMetadataBasedView && viewMode === VIEW_MODE_LIST; // Folder view or Recents view\n    const isGridView = !isMetadataBasedView && viewMode === VIEW_MODE_GRID; // Folder view or Recents view\n\n    return (\n        <div className=\"bce-content\">\n            {view === VIEW_ERROR || view === VIEW_SELECTED ? null : (\n                <ProgressBar percent={currentCollection.percentLoaded} />\n            )}\n\n            {isViewEmpty && <EmptyState view={view} isLoading={currentCollection.percentLoaded !== 100} />}\n            {!isViewEmpty && isMetadataBasedView && (\n                <MetadataBasedItemList currentCollection={currentCollection} fieldsToShow={fieldsToShow} {...rest} />\n            )}\n            {!isViewEmpty && isListView && (\n                <ItemList\n                    currentCollection={currentCollection}\n                    onSortChange={onSortChange}\n                    focusedRow={focusedRow}\n                    isMedium={isMedium}\n                    tableRef={tableRef}\n                    view={view}\n                    {...rest}\n                />\n            )}\n            {!isViewEmpty && isGridView && (\n                <ItemGrid\n                    currentCollection={currentCollection}\n                    gridColumnCount={gridColumnCount}\n                    view={view}\n                    {...rest}\n                />\n            )}\n        </div>\n    );\n};\n\nexport default Content;\n"],"file":"Content.js"}

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

@@ -72,7 +72,7 @@ import { FILE_SHARED_LINK_FIELDS_TO_FETCH } from '../../utils/fields';
 import CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH from './constants';
 import LocalStore from '../../utils/LocalStore';
 import { withFeatureConsumer, withFeatureProvider } from '../common/feature-checking';
-import { DEFAULT_HOSTNAME_UPLOAD, DEFAULT_HOSTNAME_API, DEFAULT_HOSTNAME_APP, DEFAULT_HOSTNAME_STATIC, DEFAULT_SEARCH_DEBOUNCE, SORT_ASC, FIELD_NAME, DEFAULT_ROOT, VIEW_SEARCH, VIEW_FOLDER, VIEW_ERROR, VIEW_RECENTS, VIEW_METADATA, VIEW_MODE_LIST, TYPE_FILE, TYPE_WEBLINK, TYPE_FOLDER, CLIENT_NAME_CONTENT_EXPLORER, DEFAULT_PAGE_NUMBER, DEFAULT_PAGE_SIZE, DEFAULT_VIEW_FILES, DEFAULT_VIEW_RECENTS, DEFAULT_VIEW_METADATA, ERROR_CODE_ITEM_NAME_INVALID, ERROR_CODE_ITEM_NAME_TOO_LONG, TYPED_ID_FOLDER_PREFIX } from '../../constants';
+import { DEFAULT_HOSTNAME_UPLOAD, DEFAULT_HOSTNAME_API, DEFAULT_HOSTNAME_APP, DEFAULT_HOSTNAME_STATIC, DEFAULT_SEARCH_DEBOUNCE, SORT_ASC, FIELD_NAME, FIELD_SHARED_LINK, DEFAULT_ROOT, VIEW_SEARCH, VIEW_FOLDER, VIEW_ERROR, VIEW_RECENTS, VIEW_METADATA, VIEW_MODE_LIST, TYPE_FILE, TYPE_WEBLINK, TYPE_FOLDER, CLIENT_NAME_CONTENT_EXPLORER, DEFAULT_PAGE_NUMBER, DEFAULT_PAGE_SIZE, DEFAULT_VIEW_FILES, DEFAULT_VIEW_RECENTS, DEFAULT_VIEW_METADATA, ERROR_CODE_ITEM_NAME_INVALID, ERROR_CODE_ITEM_NAME_TOO_LONG, TYPED_ID_FOLDER_PREFIX, VIEW_MODE_GRID } from '../../constants';
 import '../common/fonts.scss';
 import '../common/base.scss';
 import '../common/modal.scss';
@@ -633,7 +633,7 @@ function (_Component) {
         isLoading: true
       });
 
-      _this.api.getAPI(type).rename(selected, name, function (updatedItem) {
+      _this.api.getAPI(type).rename(selected, name.trim(), function (updatedItem) {
         _this.setState({
           isRenameModalOpen: false
         });
@@ -691,7 +691,7 @@ function (_Component) {
         return;
       }
 
-      if (!name) {
+      if (!name.trim()) {
         _this.setState({
           errorCode: ERROR_CODE_ITEM_NAME_INVALID,
           isLoading: false
@@ -713,7 +713,7 @@ function (_Component) {
         isLoading: true
       });
 
-      _this.api.getFolderAPI().create(id, name, function (item) {
+      _this.api.getFolderAPI().create(id, name.trim(), function (item) {
         _this.refreshCollection();
 
         _this.select(item);
@@ -765,13 +765,40 @@ function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleSharedLinkSuccess", function (newItem) {
-      var currentCollection = _this.state.currentCollection; // Update item in collection
+      var currentCollection = _this.state.currentCollection;
+
+      if (!newItem[FIELD_SHARED_LINK]) {
+        var canSetShareAccess = _this.props.canSetShareAccess;
+
+        if (!newItem || !canSetShareAccess) {
+          return;
+        }
+
+        var permissions = newItem.permissions,
+            type = newItem.type;
+
+        if (!permissions || !type) {
+          return;
+        } // create a shared link with default access, and update the collection
+
 
-      _this.updateCollection(currentCollection, newItem, function () {
-        return _this.setState({
-          isShareModalOpen: true
+        var access = undefined;
+
+        _this.api.getAPI(type).share(newItem, access, function (updatedItem) {
+          _this.updateCollection(currentCollection, updatedItem, function () {
+            return _this.setState({
+              isShareModalOpen: true
+            });
+          });
         });
-      });
+      } else {
+        // update collection with existing shared link
+        _this.updateCollection(currentCollection, newItem, function () {
+          return _this.setState({
+            isShareModalOpen: true
+          });
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "shareCallback", function () {
@@ -824,6 +851,13 @@ function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "isFocusOnItem", function () {
+      var _document$activeEleme;
+
+      var focusedElementClassList = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.classList;
+      return focusedElementClassList && focusedElementClassList.contains('be-item-label');
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
       if (isInputElement(event.target)) {
         return;
@@ -839,13 +873,21 @@ function (_Component) {
           break;
 
         case 'arrowdown':
-          focus(_this.rootElement, '.bce-item-row', false);
+          if (_this.getViewMode() === VIEW_MODE_GRID) {
+            if (!_this.isFocusOnItem()) {
+              focus(_this.rootElement, '.be-item-name .be-item-label', false);
+              event.preventDefault();
+            }
+          } else {
+            focus(_this.rootElement, '.bce-item-row', false);
 
-          _this.setState({
-            focusedRow: 0
-          });
+            _this.setState({
+              focusedRow: 0
+            });
+
+            event.preventDefault();
+          }
 
-          event.preventDefault();
           break;
 
         case 'g':
@@ -1341,7 +1383,7 @@ function (_Component) {
     /**
      * Sets state with currentCollection updated to have items.selected properties
      * set according to the given selected param. Also updates the selected item in the
-     * currentcollection. selectedItem will be set to the selected state
+     * currentCollection. selectedItem will be set to the selected state
      * item if it is in currentCollection, otherwise it will be set to undefined.
      *
      * @private
@@ -1357,10 +1399,10 @@ function (_Component) {
         var _this4 = this;
 
         var callback,
-            _collection$items,
+            newCollection,
+            _newCollection$items,
             items,
             fileAPI,
-            newCollection,
             selectedId,
             newSelectedItem,
             itemThumbnails,
@@ -1371,9 +1413,9 @@ function (_Component) {
             switch (_context2.prev = _context2.next) {
               case 0:
                 callback = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : noop;
-                _collection$items = collection.items, items = _collection$items === void 0 ? [] : _collection$items;
+                newCollection = cloneDeep(collection);
+                _newCollection$items = newCollection.items, items = _newCollection$items === void 0 ? [] : _newCollection$items;
                 fileAPI = this.api.getFileAPI(false);
-                newCollection = _objectSpread({}, collection);
                 selectedId = selectedItem ? selectedItem.id : null;
                 _context2.next = 7;
                 return Promise.all(items.map(function (item) {
@@ -1579,6 +1621,7 @@ function (_Component) {
         onSortChange: this.sort,
         rootElement: this.rootElement,
         rootId: rootFolderId,
+        selected: selected,
         tableRef: this.tableRef,
         view: view,
         viewMode: viewMode
@@ -1644,7 +1687,7 @@ function (_Component) {
         isTouch: isTouch,
         onCancel: this.closeModals,
         item: selected,
-        currentCollection: currentCollection,
+        currentCollection: cloneDeep(currentCollection),
         token: token,
         parentElement: this.rootElement,
         appElement: this.appElement,

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

@@ -43,6 +43,7 @@ import {
     DEFAULT_SEARCH_DEBOUNCE,
     SORT_ASC,
     FIELD_NAME,
+    FIELD_SHARED_LINK,
     DEFAULT_ROOT,
     VIEW_SEARCH,
     VIEW_FOLDER,
@@ -62,6 +63,7 @@ import {
     ERROR_CODE_ITEM_NAME_INVALID,
     ERROR_CODE_ITEM_NAME_TOO_LONG,
     TYPED_ID_FOLDER_PREFIX,
+    VIEW_MODE_GRID,
 } from '../../constants';
 import type { ViewMode } from '../common/flowTypes';
 import type { MetadataQuery, FieldsToShow } from '../../common/types/metadataQueries';
@@ -788,7 +790,6 @@ class ContentExplorer extends Component<Props, State> {
      * Changes the share access of an item
      *
      * @private
-     * @param {Object} item file or folder object
      * @param {string} access share access
      * @return {void}
      */
@@ -836,7 +837,7 @@ class ContentExplorer extends Component<Props, State> {
     /**
      * Sets state with currentCollection updated to have items.selected properties
      * set according to the given selected param. Also updates the selected item in the
-     * currentcollection. selectedItem will be set to the selected state
+     * currentCollection. selectedItem will be set to the selected state
      * item if it is in currentCollection, otherwise it will be set to undefined.
      *
      * @private
@@ -846,9 +847,9 @@ class ContentExplorer extends Component<Props, State> {
      * @return {void}
      */
     async updateCollection(collection: Collection, selectedItem: ?BoxItem, callback: Function = noop): Object {
-        const { items = [] } = collection;
+        const newCollection: Collection = cloneDeep(collection);
+        const { items = [] } = newCollection;
         const fileAPI = this.api.getFileAPI(false);
-        const newCollection: Collection = { ...collection };
         const selectedId = selectedItem ? selectedItem.id : null;
         let newSelectedItem: ?BoxItem;
 
@@ -1141,7 +1142,7 @@ class ContentExplorer extends Component<Props, State> {
         this.setState({ isLoading: true });
         this.api.getAPI(type).rename(
             selected,
-            name,
+            name.trim(),
             (updatedItem: BoxItem) => {
                 this.setState({ isRenameModalOpen: false });
                 this.refreshCollection();
@@ -1193,7 +1194,7 @@ class ContentExplorer extends Component<Props, State> {
             return;
         }
 
-        if (!name) {
+        if (!name.trim()) {
             this.setState({
                 errorCode: ERROR_CODE_ITEM_NAME_INVALID,
                 isLoading: false,
@@ -1212,7 +1213,7 @@ class ContentExplorer extends Component<Props, State> {
         this.setState({ isLoading: true });
         this.api.getFolderAPI().create(
             id,
-            name,
+            name.trim(),
             (item: BoxItem) => {
                 this.refreshCollection();
                 this.select(item);
@@ -1277,8 +1278,26 @@ class ContentExplorer extends Component<Props, State> {
     handleSharedLinkSuccess = (newItem: BoxItem) => {
         const { currentCollection } = this.state;
 
-        // Update item in collection
-        this.updateCollection(currentCollection, newItem, () => this.setState({ isShareModalOpen: true }));
+        if (!newItem[FIELD_SHARED_LINK]) {
+            const { canSetShareAccess }: Props = this.props;
+            if (!newItem || !canSetShareAccess) {
+                return;
+            }
+
+            const { permissions, type } = newItem;
+            if (!permissions || !type) {
+                return;
+            }
+
+            // create a shared link with default access, and update the collection
+            const access = undefined;
+            this.api.getAPI(type).share(newItem, access, (updatedItem: BoxItem) => {
+                this.updateCollection(currentCollection, updatedItem, () => this.setState({ isShareModalOpen: true }));
+            });
+        } else {
+            // update collection with existing shared link
+            this.updateCollection(currentCollection, newItem, () => this.setState({ isShareModalOpen: true }));
+        }
     };
 
     /**
@@ -1347,6 +1366,16 @@ class ContentExplorer extends Component<Props, State> {
         }
     };
 
+    /**
+     * Returns whether the currently focused element is an item
+     *
+     * @returns {bool}
+     */
+    isFocusOnItem = () => {
+        const focusedElementClassList = document.activeElement?.classList;
+        return focusedElementClassList && focusedElementClassList.contains('be-item-label');
+    };
+
     /**
      * Keyboard events
      *
@@ -1367,9 +1396,16 @@ class ContentExplorer extends Component<Props, State> {
                 event.preventDefault();
                 break;
             case 'arrowdown':
-                focus(this.rootElement, '.bce-item-row', false);
-                this.setState({ focusedRow: 0 });
-                event.preventDefault();
+                if (this.getViewMode() === VIEW_MODE_GRID) {
+                    if (!this.isFocusOnItem()) {
+                        focus(this.rootElement, '.be-item-name .be-item-label', false);
+                        event.preventDefault();
+                    }
+                } else {
+                    focus(this.rootElement, '.bce-item-row', false);
+                    this.setState({ focusedRow: 0 });
+                    event.preventDefault();
+                }
                 break;
             case 'g':
                 break;
@@ -1683,6 +1719,7 @@ class ContentExplorer extends Component<Props, State> {
                             onSortChange={this.sort}
                             rootElement={this.rootElement}
                             rootId={rootFolderId}
+                            selected={selected}
                             tableRef={this.tableRef}
                             view={view}
                             viewMode={viewMode}
@@ -1771,7 +1808,7 @@ class ContentExplorer extends Component<Props, State> {
                             isTouch={isTouch}
                             onCancel={this.closeModals}
                             item={selected}
-                            currentCollection={currentCollection}
+                            currentCollection={cloneDeep(currentCollection)}
                             token={token}
                             parentElement={this.rootElement}
                             appElement={this.appElement}