box-ui-elements 23.5.0-beta.2 → 23.5.0-beta.4

package/es/elements/common/sub-header/SubHeader.js

@@ -22,6 +22,7 @@ const SubHeader = ({
   onCreate,
   onItemClick,
   onSortChange,
+  onMetadataSidePanelToggle,
   onUpload,
   onViewModeChange,
   portalElement,
@@ -67,9 +68,11 @@ const SubHeader = ({
     onCreate: onCreate,
     onGridViewSliderChange: onGridViewSliderChange,
     onSortChange: onSortChange,
+    onMetadataSidePanelToggle: onMetadataSidePanelToggle,
     onUpload: onUpload,
     onViewModeChange: onViewModeChange,
     portalElement: portalElement,
+    selectedItemIds: selectedItemIds,
     view: view,
     viewMode: viewMode
   })));

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

@@ -1 +1 @@
-{"version":3,"file":"SubHeader.js","names":["React","noop","classNames","PageHeader","SubHeaderLeft","SubHeaderLeftV2","SubHeaderRight","VIEW_MODE_LIST","VIEW_METADATA","useFeatureEnabled","SubHeader","canCreateNewFolder","canUpload","currentCollection","gridColumnCount","gridMaxColumns","gridMinColumns","maxGridColumnCountForWidth","onGridViewSliderChange","isSmall","onClearSelectedItemIds","onCreate","onItemClick","onSortChange","onUpload","onViewModeChange","portalElement","rootId","rootName","selectedItemIds","title","view","viewMode","isMetadataViewV2Feature","createElement","Root","className","variant","StartElements","EndElements"],"sources":["../../../../src/elements/common/sub-header/SubHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport noop from 'lodash/noop';\nimport classNames from 'classnames';\nimport { PageHeader } from '@box/blueprint-web';\nimport type { Selection } from 'react-aria-components';\n\nimport SubHeaderLeft from './SubHeaderLeft';\nimport SubHeaderLeftV2 from './SubHeaderLeftV2';\nimport SubHeaderRight from './SubHeaderRight';\nimport type { ViewMode } from '../flowTypes';\nimport type { View, Collection } from '../../../common/types/core';\nimport { VIEW_MODE_LIST, VIEW_METADATA } from '../../../constants';\nimport { useFeatureEnabled } from '../feature-checking';\n\nimport './SubHeader.scss';\n\nexport interface SubHeaderProps {\n    canCreateNewFolder: boolean;\n    canUpload: boolean;\n    currentCollection: Collection;\n    gridColumnCount?: number;\n    gridMaxColumns?: number;\n    gridMinColumns?: number;\n    isSmall: boolean;\n    maxGridColumnCountForWidth?: number;\n    onClearSelectedItemIds: () => void;\n    onCreate: () => void;\n    onGridViewSliderChange?: (newSliderValue: number) => void;\n    onItemClick: (id: string | null, triggerNavigationEvent: boolean | null) => void;\n    onSortChange: (sortBy: string, sortDirection: string) => void;\n    onUpload: () => void;\n    onViewModeChange?: (viewMode: ViewMode) => void;\n    portalElement?: HTMLElement;\n    rootId: string;\n    rootName?: string;\n    selectedItemIds: Selection;\n    title?: string;\n    view: View;\n    viewMode?: ViewMode;\n}\n\nconst SubHeader = ({\n    canCreateNewFolder,\n    canUpload,\n    currentCollection,\n    gridColumnCount = 0,\n    gridMaxColumns = 0,\n    gridMinColumns = 0,\n    maxGridColumnCountForWidth = 0,\n    onGridViewSliderChange = noop,\n    isSmall,\n    onClearSelectedItemIds,\n    onCreate,\n    onItemClick,\n    onSortChange,\n    onUpload,\n    onViewModeChange,\n    portalElement,\n    rootId,\n    rootName,\n    selectedItemIds,\n    title,\n    view,\n    viewMode = VIEW_MODE_LIST,\n}: SubHeaderProps) => {\n    const isMetadataViewV2Feature = useFeatureEnabled('contentExplorer.metadataViewV2');\n\n    if (view === VIEW_METADATA && !isMetadataViewV2Feature) {\n        return null;\n    }\n\n    return (\n        <PageHeader.Root\n            className={classNames({ 'be-sub-header': !isMetadataViewV2Feature })}\n            data-testid=\"be-sub-header\"\n            variant=\"inline\"\n        >\n            <PageHeader.StartElements>\n                {view !== VIEW_METADATA && !isMetadataViewV2Feature && (\n                    <SubHeaderLeft\n                        currentCollection={currentCollection}\n                        isSmall={isSmall}\n                        onItemClick={onItemClick}\n                        portalElement={portalElement}\n                        rootId={rootId}\n                        rootName={rootName}\n                        view={view}\n                    />\n                )}\n                {isMetadataViewV2Feature && (\n                    <SubHeaderLeftV2\n                        currentCollection={currentCollection}\n                        onClearSelectedItemIds={onClearSelectedItemIds}\n                        rootName={rootName}\n                        selectedItemIds={selectedItemIds}\n                        title={title}\n                    />\n                )}\n            </PageHeader.StartElements>\n            <PageHeader.EndElements>\n                <SubHeaderRight\n                    canCreateNewFolder={canCreateNewFolder}\n                    canUpload={canUpload}\n                    currentCollection={currentCollection}\n                    gridColumnCount={gridColumnCount}\n                    gridMaxColumns={gridMaxColumns}\n                    gridMinColumns={gridMinColumns}\n                    maxGridColumnCountForWidth={maxGridColumnCountForWidth}\n                    onCreate={onCreate}\n                    onGridViewSliderChange={onGridViewSliderChange}\n                    onSortChange={onSortChange}\n                    onUpload={onUpload}\n                    onViewModeChange={onViewModeChange}\n                    portalElement={portalElement}\n                    view={view}\n                    viewMode={viewMode}\n                />\n            </PageHeader.EndElements>\n        </PageHeader.Root>\n    );\n};\n\nexport default SubHeader;\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,QAAQ,oBAAoB;AAG/C,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,cAAc,MAAM,kBAAkB;AAG7C,SAASC,cAAc,EAAEC,aAAa,QAAQ,oBAAoB;AAClE,SAASC,iBAAiB,QAAQ,qBAAqB;AAEvD,OAAO,kBAAkB;AA2BzB,MAAMC,SAAS,GAAGA,CAAC;EACfC,kBAAkB;EAClBC,SAAS;EACTC,iBAAiB;EACjBC,eAAe,GAAG,CAAC;EACnBC,cAAc,GAAG,CAAC;EAClBC,cAAc,GAAG,CAAC;EAClBC,0BAA0B,GAAG,CAAC;EAC9BC,sBAAsB,GAAGjB,IAAI;EAC7BkB,OAAO;EACPC,sBAAsB;EACtBC,QAAQ;EACRC,WAAW;EACXC,YAAY;EACZC,QAAQ;EACRC,gBAAgB;EAChBC,aAAa;EACbC,MAAM;EACNC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,IAAI;EACJC,QAAQ,GAAGzB;AACC,CAAC,KAAK;EAClB,MAAM0B,uBAAuB,GAAGxB,iBAAiB,CAAC,gCAAgC,CAAC;EAEnF,IAAIsB,IAAI,KAAKvB,aAAa,IAAI,CAACyB,uBAAuB,EAAE;IACpD,OAAO,IAAI;EACf;EAEA,oBACIjC,KAAA,CAAAkC,aAAA,CAAC/B,UAAU,CAACgC,IAAI;IACZC,SAAS,EAAElC,UAAU,CAAC;MAAE,eAAe,EAAE,CAAC+B;IAAwB,CAAC,CAAE;IACrE,eAAY,eAAe;IAC3BI,OAAO,EAAC;EAAQ,gBAEhBrC,KAAA,CAAAkC,aAAA,CAAC/B,UAAU,CAACmC,aAAa,QACpBP,IAAI,KAAKvB,aAAa,IAAI,CAACyB,uBAAuB,iBAC/CjC,KAAA,CAAAkC,aAAA,CAAC9B,aAAa;IACVS,iBAAiB,EAAEA,iBAAkB;IACrCM,OAAO,EAAEA,OAAQ;IACjBG,WAAW,EAAEA,WAAY;IACzBI,aAAa,EAAEA,aAAc;IAC7BC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBG,IAAI,EAAEA;EAAK,CACd,CACJ,EACAE,uBAAuB,iBACpBjC,KAAA,CAAAkC,aAAA,CAAC7B,eAAe;IACZQ,iBAAiB,EAAEA,iBAAkB;IACrCO,sBAAsB,EAAEA,sBAAuB;IAC/CQ,QAAQ,EAAEA,QAAS;IACnBC,eAAe,EAAEA,eAAgB;IACjCC,KAAK,EAAEA;EAAM,CAChB,CAEiB,CAAC,eAC3B9B,KAAA,CAAAkC,aAAA,CAAC/B,UAAU,CAACoC,WAAW,qBACnBvC,KAAA,CAAAkC,aAAA,CAAC5B,cAAc;IACXK,kBAAkB,EAAEA,kBAAmB;IACvCC,SAAS,EAAEA,SAAU;IACrBC,iBAAiB,EAAEA,iBAAkB;IACrCC,eAAe,EAAEA,eAAgB;IACjCC,cAAc,EAAEA,cAAe;IAC/BC,cAAc,EAAEA,cAAe;IAC/BC,0BAA0B,EAAEA,0BAA2B;IACvDI,QAAQ,EAAEA,QAAS;IACnBH,sBAAsB,EAAEA,sBAAuB;IAC/CK,YAAY,EAAEA,YAAa;IAC3BC,QAAQ,EAAEA,QAAS;IACnBC,gBAAgB,EAAEA,gBAAiB;IACnCC,aAAa,EAAEA,aAAc;IAC7BK,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA;EAAS,CACtB,CACmB,CACX,CAAC;AAE1B,CAAC;AAED,eAAetB,SAAS","ignoreList":[]}
+{"version":3,"file":"SubHeader.js","names":["React","noop","classNames","PageHeader","SubHeaderLeft","SubHeaderLeftV2","SubHeaderRight","VIEW_MODE_LIST","VIEW_METADATA","useFeatureEnabled","SubHeader","canCreateNewFolder","canUpload","currentCollection","gridColumnCount","gridMaxColumns","gridMinColumns","maxGridColumnCountForWidth","onGridViewSliderChange","isSmall","onClearSelectedItemIds","onCreate","onItemClick","onSortChange","onMetadataSidePanelToggle","onUpload","onViewModeChange","portalElement","rootId","rootName","selectedItemIds","title","view","viewMode","isMetadataViewV2Feature","createElement","Root","className","variant","StartElements","EndElements"],"sources":["../../../../src/elements/common/sub-header/SubHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport noop from 'lodash/noop';\nimport classNames from 'classnames';\nimport { PageHeader } from '@box/blueprint-web';\nimport type { Selection } from 'react-aria-components';\n\nimport SubHeaderLeft from './SubHeaderLeft';\nimport SubHeaderLeftV2 from './SubHeaderLeftV2';\nimport SubHeaderRight from './SubHeaderRight';\nimport type { ViewMode } from '../flowTypes';\nimport type { View, Collection } from '../../../common/types/core';\nimport { VIEW_MODE_LIST, VIEW_METADATA } from '../../../constants';\nimport { useFeatureEnabled } from '../feature-checking';\n\nimport './SubHeader.scss';\n\nexport interface SubHeaderProps {\n    canCreateNewFolder: boolean;\n    canUpload: boolean;\n    currentCollection: Collection;\n    gridColumnCount?: number;\n    gridMaxColumns?: number;\n    gridMinColumns?: number;\n    isSmall: boolean;\n    maxGridColumnCountForWidth?: number;\n    onClearSelectedItemIds: () => void;\n    onCreate: () => void;\n    onGridViewSliderChange?: (newSliderValue: number) => void;\n    onItemClick: (id: string | null, triggerNavigationEvent: boolean | null) => void;\n    onSortChange: (sortBy: string, sortDirection: string) => void;\n    onMetadataSidePanelToggle?: () => void;\n    onUpload: () => void;\n    onViewModeChange?: (viewMode: ViewMode) => void;\n    portalElement?: HTMLElement;\n    rootId: string;\n    rootName?: string;\n    selectedItemIds: Selection;\n    title?: string;\n    view: View;\n    viewMode?: ViewMode;\n}\n\nconst SubHeader = ({\n    canCreateNewFolder,\n    canUpload,\n    currentCollection,\n    gridColumnCount = 0,\n    gridMaxColumns = 0,\n    gridMinColumns = 0,\n    maxGridColumnCountForWidth = 0,\n    onGridViewSliderChange = noop,\n    isSmall,\n    onClearSelectedItemIds,\n    onCreate,\n    onItemClick,\n    onSortChange,\n    onMetadataSidePanelToggle,\n    onUpload,\n    onViewModeChange,\n    portalElement,\n    rootId,\n    rootName,\n    selectedItemIds,\n    title,\n    view,\n    viewMode = VIEW_MODE_LIST,\n}: SubHeaderProps) => {\n    const isMetadataViewV2Feature = useFeatureEnabled('contentExplorer.metadataViewV2');\n\n    if (view === VIEW_METADATA && !isMetadataViewV2Feature) {\n        return null;\n    }\n\n    return (\n        <PageHeader.Root\n            className={classNames({ 'be-sub-header': !isMetadataViewV2Feature })}\n            data-testid=\"be-sub-header\"\n            variant=\"inline\"\n        >\n            <PageHeader.StartElements>\n                {view !== VIEW_METADATA && !isMetadataViewV2Feature && (\n                    <SubHeaderLeft\n                        currentCollection={currentCollection}\n                        isSmall={isSmall}\n                        onItemClick={onItemClick}\n                        portalElement={portalElement}\n                        rootId={rootId}\n                        rootName={rootName}\n                        view={view}\n                    />\n                )}\n                {isMetadataViewV2Feature && (\n                    <SubHeaderLeftV2\n                        currentCollection={currentCollection}\n                        onClearSelectedItemIds={onClearSelectedItemIds}\n                        rootName={rootName}\n                        selectedItemIds={selectedItemIds}\n                        title={title}\n                    />\n                )}\n            </PageHeader.StartElements>\n            <PageHeader.EndElements>\n                <SubHeaderRight\n                    canCreateNewFolder={canCreateNewFolder}\n                    canUpload={canUpload}\n                    currentCollection={currentCollection}\n                    gridColumnCount={gridColumnCount}\n                    gridMaxColumns={gridMaxColumns}\n                    gridMinColumns={gridMinColumns}\n                    maxGridColumnCountForWidth={maxGridColumnCountForWidth}\n                    onCreate={onCreate}\n                    onGridViewSliderChange={onGridViewSliderChange}\n                    onSortChange={onSortChange}\n                    onMetadataSidePanelToggle={onMetadataSidePanelToggle}\n                    onUpload={onUpload}\n                    onViewModeChange={onViewModeChange}\n                    portalElement={portalElement}\n                    selectedItemIds={selectedItemIds}\n                    view={view}\n                    viewMode={viewMode}\n                />\n            </PageHeader.EndElements>\n        </PageHeader.Root>\n    );\n};\n\nexport default SubHeader;\n"],"mappings":"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","ignoreList":[]}

package/es/elements/common/sub-header/SubHeaderLeftV2.js

@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
+import * as React from 'react';
 import { useIntl } from 'react-intl';
 import { XMark } from '@box/blueprint-web-assets/icons/Fill/index';
 import { IconButton, PageHeader, Text } from '@box/blueprint-web';
+import { useSelectedItemText } from '../../content-explorer/utils';
 import messages from '../messages';
 import './SubHeaderLeftV2.scss';
 const SubHeaderLeftV2 = props => {
@@ -15,28 +16,7 @@ const SubHeaderLeftV2 = props => {
   const {
     formatMessage
   } = useIntl();
-
-  // Generate selected item text based on selected keys
-  const selectedItemText = useMemo(() => {
-    const selectedCount = selectedItemIds === 'all' ? currentCollection.items.length : selectedItemIds.size;
-    if (selectedCount === 0) {
-      return '';
-    }
-
-    // Case 1: Single selected item - show item name
-    if (selectedCount === 1) {
-      const selectedKey = selectedItemIds === 'all' ? currentCollection.items[0].id : selectedItemIds.values().next().value;
-      const selectedItem = currentCollection.items.find(item => item.id === selectedKey);
-      return selectedItem?.name ?? '';
-    }
-    // Case 2: Multiple selected items - show count
-    if (selectedCount > 1) {
-      return formatMessage(messages.numFilesSelected, {
-        numSelected: selectedCount
-      });
-    }
-    return '';
-  }, [currentCollection.items, formatMessage, selectedItemIds]);
+  const selectedItemText = useSelectedItemText(currentCollection, selectedItemIds);
 
   // Case 1 and 2: selected item text with X button
   if (selectedItemText) {

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

@@ -1 +1 @@
-{"version":3,"file":"SubHeaderLeftV2.js","names":["React","useMemo","useIntl","XMark","IconButton","PageHeader","Text","messages","SubHeaderLeftV2","props","currentCollection","onClearSelectedItemIds","rootName","selectedItemIds","title","formatMessage","selectedItemText","selectedCount","items","length","size","selectedKey","id","values","next","value","selectedItem","find","item","name","numFilesSelected","numSelected","createElement","Root","className","variant","Corner","clearSelection","icon","onClick","StartElements","as"],"sources":["../../../../src/elements/common/sub-header/SubHeaderLeftV2.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\nimport { XMark } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { IconButton, PageHeader, Text } from '@box/blueprint-web';\nimport type { Selection } from 'react-aria-components';\nimport type { Collection } from '../../../common/types/core';\nimport messages from '../messages';\n\nimport './SubHeaderLeftV2.scss';\n\nexport interface SubHeaderLeftV2Props {\n    currentCollection: Collection;\n    onClearSelectedItemIds?: () => void;\n    rootName?: string;\n    selectedItemIds: Selection;\n    title?: string;\n}\n\nconst SubHeaderLeftV2 = (props: SubHeaderLeftV2Props) => {\n    const { currentCollection, onClearSelectedItemIds, rootName, selectedItemIds, title } = props;\n    const { formatMessage } = useIntl();\n\n    // Generate selected item text based on selected keys\n    const selectedItemText: string = useMemo(() => {\n        const selectedCount = selectedItemIds === 'all' ? currentCollection.items.length : selectedItemIds.size;\n\n        if (selectedCount === 0) {\n            return '';\n        }\n\n        // Case 1: Single selected item - show item name\n        if (selectedCount === 1) {\n            const selectedKey =\n                selectedItemIds === 'all' ? currentCollection.items[0].id : selectedItemIds.values().next().value;\n            const selectedItem = currentCollection.items.find(item => item.id === selectedKey);\n            return selectedItem?.name ?? '';\n        }\n        // Case 2: Multiple selected items - show count\n        if (selectedCount > 1) {\n            return formatMessage(messages.numFilesSelected, { numSelected: selectedCount });\n        }\n        return '';\n    }, [currentCollection.items, formatMessage, selectedItemIds]);\n\n    // Case 1 and 2: selected item text with X button\n    if (selectedItemText) {\n        return (\n            <PageHeader.Root className=\"be-SubHeaderLeftV2--selection\" variant=\"default\">\n                <PageHeader.Corner>\n                    <IconButton\n                        aria-label={formatMessage(messages.clearSelection)}\n                        icon={XMark}\n                        onClick={onClearSelectedItemIds}\n                        variant=\"small-utility\"\n                    />\n                </PageHeader.Corner>\n\n                <PageHeader.StartElements>\n                    <Text as=\"span\">{selectedItemText}</Text>\n                </PageHeader.StartElements>\n            </PageHeader.Root>\n        );\n    }\n\n    // Case 3: No selected items - show title if provided, otherwise show root name\n    return (\n        <Text as=\"h1\" variant=\"titleXLarge\">\n            {title ?? rootName}\n        </Text>\n    );\n};\n\nexport default SubHeaderLeftV2;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,KAAK,QAAQ,4CAA4C;AAClE,SAASC,UAAU,EAAEC,UAAU,EAAEC,IAAI,QAAQ,oBAAoB;AAGjE,OAAOC,QAAQ,MAAM,aAAa;AAElC,OAAO,wBAAwB;AAU/B,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EACrD,MAAM;IAAEC,iBAAiB;IAAEC,sBAAsB;IAAEC,QAAQ;IAAEC,eAAe;IAAEC;EAAM,CAAC,GAAGL,KAAK;EAC7F,MAAM;IAAEM;EAAc,CAAC,GAAGb,OAAO,CAAC,CAAC;;EAEnC;EACA,MAAMc,gBAAwB,GAAGf,OAAO,CAAC,MAAM;IAC3C,MAAMgB,aAAa,GAAGJ,eAAe,KAAK,KAAK,GAAGH,iBAAiB,CAACQ,KAAK,CAACC,MAAM,GAAGN,eAAe,CAACO,IAAI;IAEvG,IAAIH,aAAa,KAAK,CAAC,EAAE;MACrB,OAAO,EAAE;IACb;;IAEA;IACA,IAAIA,aAAa,KAAK,CAAC,EAAE;MACrB,MAAMI,WAAW,GACbR,eAAe,KAAK,KAAK,GAAGH,iBAAiB,CAACQ,KAAK,CAAC,CAAC,CAAC,CAACI,EAAE,GAAGT,eAAe,CAACU,MAAM,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACC,KAAK;MACrG,MAAMC,YAAY,GAAGhB,iBAAiB,CAACQ,KAAK,CAACS,IAAI,CAACC,IAAI,IAAIA,IAAI,CAACN,EAAE,KAAKD,WAAW,CAAC;MAClF,OAAOK,YAAY,EAAEG,IAAI,IAAI,EAAE;IACnC;IACA;IACA,IAAIZ,aAAa,GAAG,CAAC,EAAE;MACnB,OAAOF,aAAa,CAACR,QAAQ,CAACuB,gBAAgB,EAAE;QAAEC,WAAW,EAAEd;MAAc,CAAC,CAAC;IACnF;IACA,OAAO,EAAE;EACb,CAAC,EAAE,CAACP,iBAAiB,CAACQ,KAAK,EAAEH,aAAa,EAAEF,eAAe,CAAC,CAAC;;EAE7D;EACA,IAAIG,gBAAgB,EAAE;IAClB,oBACIhB,KAAA,CAAAgC,aAAA,CAAC3B,UAAU,CAAC4B,IAAI;MAACC,SAAS,EAAC,+BAA+B;MAACC,OAAO,EAAC;IAAS,gBACxEnC,KAAA,CAAAgC,aAAA,CAAC3B,UAAU,CAAC+B,MAAM,qBACdpC,KAAA,CAAAgC,aAAA,CAAC5B,UAAU;MACP,cAAYW,aAAa,CAACR,QAAQ,CAAC8B,cAAc,CAAE;MACnDC,IAAI,EAAEnC,KAAM;MACZoC,OAAO,EAAE5B,sBAAuB;MAChCwB,OAAO,EAAC;IAAe,CAC1B,CACc,CAAC,eAEpBnC,KAAA,CAAAgC,aAAA,CAAC3B,UAAU,CAACmC,aAAa,qBACrBxC,KAAA,CAAAgC,aAAA,CAAC1B,IAAI;MAACmC,EAAE,EAAC;IAAM,GAAEzB,gBAAuB,CAClB,CACb,CAAC;EAE1B;;EAEA;EACA,oBACIhB,KAAA,CAAAgC,aAAA,CAAC1B,IAAI;IAACmC,EAAE,EAAC,IAAI;IAACN,OAAO,EAAC;EAAa,GAC9BrB,KAAK,IAAIF,QACR,CAAC;AAEf,CAAC;AAED,eAAeJ,eAAe","ignoreList":[]}
+{"version":3,"file":"SubHeaderLeftV2.js","names":["React","useIntl","XMark","IconButton","PageHeader","Text","useSelectedItemText","messages","SubHeaderLeftV2","props","currentCollection","onClearSelectedItemIds","rootName","selectedItemIds","title","formatMessage","selectedItemText","createElement","Root","className","variant","Corner","clearSelection","icon","onClick","StartElements","as"],"sources":["../../../../src/elements/common/sub-header/SubHeaderLeftV2.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIntl } from 'react-intl';\nimport { XMark } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { IconButton, PageHeader, Text } from '@box/blueprint-web';\nimport type { Selection } from 'react-aria-components';\nimport { useSelectedItemText } from '../../content-explorer/utils';\nimport type { Collection } from '../../../common/types/core';\nimport messages from '../messages';\n\nimport './SubHeaderLeftV2.scss';\n\nexport interface SubHeaderLeftV2Props {\n    currentCollection: Collection;\n    onClearSelectedItemIds?: () => void;\n    rootName?: string;\n    selectedItemIds: Selection;\n    title?: string;\n}\n\nconst SubHeaderLeftV2 = (props: SubHeaderLeftV2Props) => {\n    const { currentCollection, onClearSelectedItemIds, rootName, selectedItemIds, title } = props;\n    const { formatMessage } = useIntl();\n\n    const selectedItemText = useSelectedItemText(currentCollection, selectedItemIds);\n\n    // Case 1 and 2: selected item text with X button\n    if (selectedItemText) {\n        return (\n            <PageHeader.Root className=\"be-SubHeaderLeftV2--selection\" variant=\"default\">\n                <PageHeader.Corner>\n                    <IconButton\n                        aria-label={formatMessage(messages.clearSelection)}\n                        icon={XMark}\n                        onClick={onClearSelectedItemIds}\n                        variant=\"small-utility\"\n                    />\n                </PageHeader.Corner>\n\n                <PageHeader.StartElements>\n                    <Text as=\"span\">{selectedItemText}</Text>\n                </PageHeader.StartElements>\n            </PageHeader.Root>\n        );\n    }\n\n    // Case 3: No selected items - show title if provided, otherwise show root name\n    return (\n        <Text as=\"h1\" variant=\"titleXLarge\">\n            {title ?? rootName}\n        </Text>\n    );\n};\n\nexport default SubHeaderLeftV2;\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,KAAK,QAAQ,4CAA4C;AAClE,SAASC,UAAU,EAAEC,UAAU,EAAEC,IAAI,QAAQ,oBAAoB;AAEjE,SAASC,mBAAmB,QAAQ,8BAA8B;AAElE,OAAOC,QAAQ,MAAM,aAAa;AAElC,OAAO,wBAAwB;AAU/B,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EACrD,MAAM;IAAEC,iBAAiB;IAAEC,sBAAsB;IAAEC,QAAQ;IAAEC,eAAe;IAAEC;EAAM,CAAC,GAAGL,KAAK;EAC7F,MAAM;IAAEM;EAAc,CAAC,GAAGd,OAAO,CAAC,CAAC;EAEnC,MAAMe,gBAAgB,GAAGV,mBAAmB,CAACI,iBAAiB,EAAEG,eAAe,CAAC;;EAEhF;EACA,IAAIG,gBAAgB,EAAE;IAClB,oBACIhB,KAAA,CAAAiB,aAAA,CAACb,UAAU,CAACc,IAAI;MAACC,SAAS,EAAC,+BAA+B;MAACC,OAAO,EAAC;IAAS,gBACxEpB,KAAA,CAAAiB,aAAA,CAACb,UAAU,CAACiB,MAAM,qBACdrB,KAAA,CAAAiB,aAAA,CAACd,UAAU;MACP,cAAYY,aAAa,CAACR,QAAQ,CAACe,cAAc,CAAE;MACnDC,IAAI,EAAErB,KAAM;MACZsB,OAAO,EAAEb,sBAAuB;MAChCS,OAAO,EAAC;IAAe,CAC1B,CACc,CAAC,eAEpBpB,KAAA,CAAAiB,aAAA,CAACb,UAAU,CAACqB,aAAa,qBACrBzB,KAAA,CAAAiB,aAAA,CAACZ,IAAI;MAACqB,EAAE,EAAC;IAAM,GAAEV,gBAAuB,CAClB,CACb,CAAC;EAE1B;;EAEA;EACA,oBACIhB,KAAA,CAAAiB,aAAA,CAACZ,IAAI;IAACqB,EAAE,EAAC,IAAI;IAACN,OAAO,EAAC;EAAa,GAC9BN,KAAK,IAAIF,QACR,CAAC;AAEf,CAAC;AAED,eAAeJ,eAAe","ignoreList":[]}

package/es/elements/common/sub-header/SubHeaderRight.js

@@ -21,9 +21,11 @@ const SubHeaderRight = ({
   onCreate,
   onGridViewSliderChange,
   onSortChange,
+  onMetadataSidePanelToggle,
   onUpload,
   onViewModeChange,
   portalElement,
+  selectedItemIds,
   view,
   viewMode
 }) => {
@@ -40,6 +42,7 @@ const SubHeaderRight = ({
   const showSort = isFolder && hasItems;
   const showAdd = (!!canUpload || !!canCreateNewFolder) && isFolder;
   const isMetadataView = view === VIEW_METADATA;
+  const hasSelectedItems = !!(selectedItemIds && (selectedItemIds === 'all' || selectedItemIds.size > 0));
   return /*#__PURE__*/React.createElement("div", {
     className: "be-sub-header-right"
   }, !isMetadataView && /*#__PURE__*/React.createElement(React.Fragment, null, hasItems && viewMode === VIEW_MODE_GRID && /*#__PURE__*/React.createElement(GridViewSlider, {
@@ -61,10 +64,11 @@ const SubHeaderRight = ({
     portalElement: portalElement,
     showCreate: canCreateNewFolder,
     showUpload: canUpload
-  })), isMetadataView && isMetadataViewV2Feature && /*#__PURE__*/React.createElement(Button, {
+  })), isMetadataView && isMetadataViewV2Feature && hasSelectedItems && /*#__PURE__*/React.createElement(Button, {
     icon: Pencil,
     size: "large",
-    variant: "primary"
+    variant: "primary",
+    onClick: onMetadataSidePanelToggle
   }, formatMessage(messages.metadata)));
 };
 export default SubHeaderRight;

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

@@ -1 +1 @@
-{"version":3,"file":"SubHeaderRight.js","names":["React","Button","Pencil","useIntl","Sort","Add","GridViewSlider","ViewModeChangeButton","VIEW_FOLDER","VIEW_MODE_GRID","VIEW_METADATA","useFeatureEnabled","messages","SubHeaderRight","canCreateNewFolder","canUpload","currentCollection","gridColumnCount","gridMaxColumns","gridMinColumns","maxGridColumnCountForWidth","onCreate","onGridViewSliderChange","onSortChange","onUpload","onViewModeChange","portalElement","view","viewMode","formatMessage","isMetadataViewV2Feature","items","hasGridView","hasItems","length","isFolder","showSort","showAdd","isMetadataView","createElement","className","Fragment","columnCount","maxColumnCount","onChange","isDisabled","showCreate","showUpload","icon","size","variant","metadata"],"sources":["../../../../src/elements/common/sub-header/SubHeaderRight.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button } from '@box/blueprint-web';\nimport { Pencil } from '@box/blueprint-web-assets/icons/Fill';\nimport { useIntl } from 'react-intl';\nimport Sort from './Sort';\nimport Add from './Add';\nimport GridViewSlider from '../../../components/grid-view/GridViewSlider';\nimport ViewModeChangeButton from './ViewModeChangeButton';\nimport { VIEW_FOLDER, VIEW_MODE_GRID, VIEW_METADATA } from '../../../constants';\nimport { useFeatureEnabled } from '../feature-checking';\n\nimport type { ViewMode } from '../flowTypes';\nimport type { SortBy, SortDirection, View, Collection } from '../../../common/types/core';\n\nimport messages from './messages';\n\nimport './SubHeaderRight.scss';\n\nexport interface SubHeaderRightProps {\n    canCreateNewFolder: boolean;\n    canUpload: boolean;\n    currentCollection: Collection;\n    gridColumnCount: number;\n    gridMaxColumns: number;\n    gridMinColumns: number;\n    maxGridColumnCountForWidth: number;\n    onCreate: () => void;\n    onGridViewSliderChange: (newSliderValue: number) => void;\n    onSortChange: (sortBy: SortBy, sortDirection: SortDirection) => void;\n    onUpload: () => void;\n    onViewModeChange?: (viewMode: ViewMode) => void;\n    portalElement?: HTMLElement;\n    view: View;\n    viewMode: ViewMode;\n}\n\nconst SubHeaderRight = ({\n    canCreateNewFolder,\n    canUpload,\n    currentCollection,\n    gridColumnCount,\n    gridMaxColumns,\n    gridMinColumns,\n    maxGridColumnCountForWidth,\n    onCreate,\n    onGridViewSliderChange,\n    onSortChange,\n    onUpload,\n    onViewModeChange,\n    portalElement,\n    view,\n    viewMode,\n}: SubHeaderRightProps) => {\n    const { formatMessage } = useIntl();\n    const isMetadataViewV2Feature = useFeatureEnabled('contentExplorer.metadataViewV2');\n    const { items = [] }: Collection = currentCollection;\n    const hasGridView: boolean = !!gridColumnCount;\n    const hasItems: boolean = items.length > 0;\n    const isFolder: boolean = view === VIEW_FOLDER;\n    const showSort: boolean = isFolder && hasItems;\n    const showAdd: boolean = (!!canUpload || !!canCreateNewFolder) && isFolder;\n    const isMetadataView: boolean = view === VIEW_METADATA;\n    return (\n        <div className=\"be-sub-header-right\">\n            {!isMetadataView && (\n                <>\n                    {hasItems && viewMode === VIEW_MODE_GRID && (\n                        <GridViewSlider\n                            columnCount={gridColumnCount}\n                            gridMaxColumns={gridMaxColumns}\n                            gridMinColumns={gridMinColumns}\n                            maxColumnCount={maxGridColumnCountForWidth}\n                            onChange={onGridViewSliderChange}\n                        />\n                    )}\n                    {hasItems && hasGridView && (\n                        <ViewModeChangeButton viewMode={viewMode} onViewModeChange={onViewModeChange} />\n                    )}\n                    {showSort && <Sort onSortChange={onSortChange} portalElement={portalElement} />}\n                    {showAdd && (\n                        <Add\n                            isDisabled={!isFolder}\n                            onCreate={onCreate}\n                            onUpload={onUpload}\n                            portalElement={portalElement}\n                            showCreate={canCreateNewFolder}\n                            showUpload={canUpload}\n                        />\n                    )}\n                </>\n            )}\n\n            {isMetadataView && isMetadataViewV2Feature && (\n                <Button icon={Pencil} size=\"large\" variant=\"primary\">\n                    {formatMessage(messages.metadata)}\n                </Button>\n            )}\n        </div>\n    );\n};\n\nexport default SubHeaderRight;\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,MAAM,QAAQ,sCAAsC;AAC7D,SAASC,OAAO,QAAQ,YAAY;AACpC,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,GAAG,MAAM,OAAO;AACvB,OAAOC,cAAc,MAAM,8CAA8C;AACzE,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,SAASC,WAAW,EAAEC,cAAc,EAAEC,aAAa,QAAQ,oBAAoB;AAC/E,SAASC,iBAAiB,QAAQ,qBAAqB;AAKvD,OAAOC,QAAQ,MAAM,YAAY;AAEjC,OAAO,uBAAuB;AAoB9B,MAAMC,cAAc,GAAGA,CAAC;EACpBC,kBAAkB;EAClBC,SAAS;EACTC,iBAAiB;EACjBC,eAAe;EACfC,cAAc;EACdC,cAAc;EACdC,0BAA0B;EAC1BC,QAAQ;EACRC,sBAAsB;EACtBC,YAAY;EACZC,QAAQ;EACRC,gBAAgB;EAChBC,aAAa;EACbC,IAAI;EACJC;AACiB,CAAC,KAAK;EACvB,MAAM;IAAEC;EAAc,CAAC,GAAG1B,OAAO,CAAC,CAAC;EACnC,MAAM2B,uBAAuB,GAAGnB,iBAAiB,CAAC,gCAAgC,CAAC;EACnF,MAAM;IAAEoB,KAAK,GAAG;EAAe,CAAC,GAAGf,iBAAiB;EACpD,MAAMgB,WAAoB,GAAG,CAAC,CAACf,eAAe;EAC9C,MAAMgB,QAAiB,GAAGF,KAAK,CAACG,MAAM,GAAG,CAAC;EAC1C,MAAMC,QAAiB,GAAGR,IAAI,KAAKnB,WAAW;EAC9C,MAAM4B,QAAiB,GAAGD,QAAQ,IAAIF,QAAQ;EAC9C,MAAMI,OAAgB,GAAG,CAAC,CAAC,CAACtB,SAAS,IAAI,CAAC,CAACD,kBAAkB,KAAKqB,QAAQ;EAC1E,MAAMG,cAAuB,GAAGX,IAAI,KAAKjB,aAAa;EACtD,oBACIV,KAAA,CAAAuC,aAAA;IAAKC,SAAS,EAAC;EAAqB,GAC/B,CAACF,cAAc,iBACZtC,KAAA,CAAAuC,aAAA,CAAAvC,KAAA,CAAAyC,QAAA,QACKR,QAAQ,IAAIL,QAAQ,KAAKnB,cAAc,iBACpCT,KAAA,CAAAuC,aAAA,CAACjC,cAAc;IACXoC,WAAW,EAAEzB,eAAgB;IAC7BC,cAAc,EAAEA,cAAe;IAC/BC,cAAc,EAAEA,cAAe;IAC/BwB,cAAc,EAAEvB,0BAA2B;IAC3CwB,QAAQ,EAAEtB;EAAuB,CACpC,CACJ,EACAW,QAAQ,IAAID,WAAW,iBACpBhC,KAAA,CAAAuC,aAAA,CAAChC,oBAAoB;IAACqB,QAAQ,EAAEA,QAAS;IAACH,gBAAgB,EAAEA;EAAiB,CAAE,CAClF,EACAW,QAAQ,iBAAIpC,KAAA,CAAAuC,aAAA,CAACnC,IAAI;IAACmB,YAAY,EAAEA,YAAa;IAACG,aAAa,EAAEA;EAAc,CAAE,CAAC,EAC9EW,OAAO,iBACJrC,KAAA,CAAAuC,aAAA,CAAClC,GAAG;IACAwC,UAAU,EAAE,CAACV,QAAS;IACtBd,QAAQ,EAAEA,QAAS;IACnBG,QAAQ,EAAEA,QAAS;IACnBE,aAAa,EAAEA,aAAc;IAC7BoB,UAAU,EAAEhC,kBAAmB;IAC/BiC,UAAU,EAAEhC;EAAU,CACzB,CAEP,CACL,EAEAuB,cAAc,IAAIR,uBAAuB,iBACtC9B,KAAA,CAAAuC,aAAA,CAACtC,MAAM;IAAC+C,IAAI,EAAE9C,MAAO;IAAC+C,IAAI,EAAC,OAAO;IAACC,OAAO,EAAC;EAAS,GAC/CrB,aAAa,CAACjB,QAAQ,CAACuC,QAAQ,CAC5B,CAEX,CAAC;AAEd,CAAC;AAED,eAAetC,cAAc","ignoreList":[]}
+{"version":3,"file":"SubHeaderRight.js","names":["React","Button","Pencil","useIntl","Sort","Add","GridViewSlider","ViewModeChangeButton","VIEW_FOLDER","VIEW_MODE_GRID","VIEW_METADATA","useFeatureEnabled","messages","SubHeaderRight","canCreateNewFolder","canUpload","currentCollection","gridColumnCount","gridMaxColumns","gridMinColumns","maxGridColumnCountForWidth","onCreate","onGridViewSliderChange","onSortChange","onMetadataSidePanelToggle","onUpload","onViewModeChange","portalElement","selectedItemIds","view","viewMode","formatMessage","isMetadataViewV2Feature","items","hasGridView","hasItems","length","isFolder","showSort","showAdd","isMetadataView","hasSelectedItems","size","createElement","className","Fragment","columnCount","maxColumnCount","onChange","isDisabled","showCreate","showUpload","icon","variant","onClick","metadata"],"sources":["../../../../src/elements/common/sub-header/SubHeaderRight.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button } from '@box/blueprint-web';\nimport { Pencil } from '@box/blueprint-web-assets/icons/Fill';\nimport { useIntl } from 'react-intl';\nimport type { Selection } from 'react-aria-components';\nimport Sort from './Sort';\nimport Add from './Add';\nimport GridViewSlider from '../../../components/grid-view/GridViewSlider';\nimport ViewModeChangeButton from './ViewModeChangeButton';\nimport { VIEW_FOLDER, VIEW_MODE_GRID, VIEW_METADATA } from '../../../constants';\nimport { useFeatureEnabled } from '../feature-checking';\n\nimport type { ViewMode } from '../flowTypes';\nimport type { SortBy, SortDirection, View, Collection } from '../../../common/types/core';\n\nimport messages from './messages';\n\nimport './SubHeaderRight.scss';\n\nexport interface SubHeaderRightProps {\n    canCreateNewFolder: boolean;\n    canUpload: boolean;\n    currentCollection: Collection;\n    gridColumnCount: number;\n    gridMaxColumns: number;\n    gridMinColumns: number;\n    maxGridColumnCountForWidth: number;\n    onCreate: () => void;\n    onGridViewSliderChange: (newSliderValue: number) => void;\n    onSortChange: (sortBy: SortBy, sortDirection: SortDirection) => void;\n    onMetadataSidePanelToggle?: () => void;\n    onUpload: () => void;\n    onViewModeChange?: (viewMode: ViewMode) => void;\n    portalElement?: HTMLElement;\n    selectedItemIds?: Selection;\n    view: View;\n    viewMode: ViewMode;\n}\n\nconst SubHeaderRight = ({\n    canCreateNewFolder,\n    canUpload,\n    currentCollection,\n    gridColumnCount,\n    gridMaxColumns,\n    gridMinColumns,\n    maxGridColumnCountForWidth,\n    onCreate,\n    onGridViewSliderChange,\n    onSortChange,\n    onMetadataSidePanelToggle,\n    onUpload,\n    onViewModeChange,\n    portalElement,\n    selectedItemIds,\n    view,\n    viewMode,\n}: SubHeaderRightProps) => {\n    const { formatMessage } = useIntl();\n    const isMetadataViewV2Feature = useFeatureEnabled('contentExplorer.metadataViewV2');\n    const { items = [] }: Collection = currentCollection;\n    const hasGridView: boolean = !!gridColumnCount;\n    const hasItems: boolean = items.length > 0;\n    const isFolder: boolean = view === VIEW_FOLDER;\n    const showSort: boolean = isFolder && hasItems;\n    const showAdd: boolean = (!!canUpload || !!canCreateNewFolder) && isFolder;\n    const isMetadataView: boolean = view === VIEW_METADATA;\n    const hasSelectedItems: boolean = !!(selectedItemIds && (selectedItemIds === 'all' || selectedItemIds.size > 0));\n    return (\n        <div className=\"be-sub-header-right\">\n            {!isMetadataView && (\n                <>\n                    {hasItems && viewMode === VIEW_MODE_GRID && (\n                        <GridViewSlider\n                            columnCount={gridColumnCount}\n                            gridMaxColumns={gridMaxColumns}\n                            gridMinColumns={gridMinColumns}\n                            maxColumnCount={maxGridColumnCountForWidth}\n                            onChange={onGridViewSliderChange}\n                        />\n                    )}\n                    {hasItems && hasGridView && (\n                        <ViewModeChangeButton viewMode={viewMode} onViewModeChange={onViewModeChange} />\n                    )}\n                    {showSort && <Sort onSortChange={onSortChange} portalElement={portalElement} />}\n                    {showAdd && (\n                        <Add\n                            isDisabled={!isFolder}\n                            onCreate={onCreate}\n                            onUpload={onUpload}\n                            portalElement={portalElement}\n                            showCreate={canCreateNewFolder}\n                            showUpload={canUpload}\n                        />\n                    )}\n                </>\n            )}\n\n            {isMetadataView && isMetadataViewV2Feature && hasSelectedItems && (\n                <Button icon={Pencil} size=\"large\" variant=\"primary\" onClick={onMetadataSidePanelToggle}>\n                    {formatMessage(messages.metadata)}\n                </Button>\n            )}\n        </div>\n    );\n};\n\nexport default SubHeaderRight;\n"],"mappings":"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","ignoreList":[]}

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

@@ -27,6 +27,7 @@ import ThemingStyles from '../common/theming';
 import API from '../../api';
 import MetadataQueryAPIHelperV2 from './MetadataQueryAPIHelper';
 import MetadataQueryAPIHelper from '../../features/metadata-based-view/MetadataQueryAPIHelper';
+import MetadataSidePanel from './MetadataSidePanel';
 import Footer from './Footer';
 import PreviewDialog from '../common/preview-dialog/PreviewDialog';
 import ShareDialog from './ShareDialog';
@@ -1087,9 +1088,12 @@ class ContentExplorer extends Component {
           selectedKeys: selectedItemIds,
           onSelectionChange: ids => {
             onSelectionChange?.(ids);
-            this.setState({
+            const isSelectionEmpty = ids !== 'all' && ids.size === 0;
+            this.setState(_objectSpread({
               selectedItemIds: ids
-            });
+            }, isSelectionEmpty && {
+              isMetadataSidePanelOpen: false
+            }));
           }
         })
       });
@@ -1160,7 +1164,30 @@ class ContentExplorer extends Component {
     });
     _defineProperty(this, "clearSelectedItemIds", () => {
       this.setState({
-        selectedItemIds: new Set()
+        selectedItemIds: new Set(),
+        isMetadataSidePanelOpen: false
+      });
+    });
+    /**
+     * Toggle metadata side panel visibility
+     *
+     * @private
+     * @return {void}
+     */
+    _defineProperty(this, "onMetadataSidePanelToggle", () => {
+      this.setState(prevState => ({
+        isMetadataSidePanelOpen: !prevState.isMetadataSidePanelOpen
+      }));
+    });
+    /**
+     * Close metadata side panel
+     *
+     * @private
+     * @return {void}
+     */
+    _defineProperty(this, "closeMetadataSidePanel", () => {
+      this.setState({
+        isMetadataSidePanelOpen: false
       });
     });
     const {
@@ -1202,6 +1229,7 @@ class ContentExplorer extends Component {
       isCreateFolderModalOpen: false,
       isDeleteModalOpen: false,
       isLoading: false,
+      isMetadataSidePanelOpen: false,
       isPreviewModalOpen: false,
       isRenameModalOpen: false,
       isShareModalOpen: false,
@@ -1572,6 +1600,7 @@ class ContentExplorer extends Component {
       isCreateFolderModalOpen,
       isDeleteModalOpen,
       isLoading,
+      isMetadataSidePanelOpen,
       isPreviewModalOpen,
       isRenameModalOpen,
       isShareModalOpen,
@@ -1580,6 +1609,7 @@ class ContentExplorer extends Component {
       metadataTemplate,
       rootName,
       selected,
+      selectedItemIds,
       view
     } = this.state;
     const {
@@ -1595,6 +1625,7 @@ class ContentExplorer extends Component {
     const allowUpload = canUpload && !!can_upload;
     const allowCreate = canCreateNewFolder && !!can_upload;
     const isDefaultViewMetadata = defaultView === DEFAULT_VIEW_METADATA;
+    const isMetadataViewV2Feature = isFeatureEnabled(features, 'contentExplorer.metadataViewV2');
     const isErrorView = view === VIEW_ERROR;
     const viewMode = this.getViewMode();
     const maxGridColumnCount = this.getMaxNumberOfGridViewColumnsForWidth();
@@ -1621,6 +1652,8 @@ class ContentExplorer extends Component {
       className: "be-app-element",
       onKeyDown: this.onKeyDown,
       tabIndex: 0
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "bce-ContentExplorer-main"
     }, !isDefaultViewMetadata && /*#__PURE__*/React.createElement(Header, {
       view: view,
       logoUrl: logoUrl,
@@ -1644,9 +1677,10 @@ class ContentExplorer extends Component {
       onGridViewSliderChange: this.onGridViewSliderChange,
       onItemClick: this.fetchFolder,
       onSortChange: this.sort,
+      onMetadataSidePanelToggle: this.onMetadataSidePanelToggle,
       onViewModeChange: this.changeViewMode,
       portalElement: this.rootElement,
-      selectedItemIds: this.state.selectedItemIds,
+      selectedItemIds: selectedItemIds,
       title: title
     }), /*#__PURE__*/React.createElement(Content, {
       canDelete: canDelete,
@@ -1685,7 +1719,12 @@ class ContentExplorer extends Component {
       pageSize: currentPageSize,
       totalCount: totalCount,
       onMarkerBasedPageChange: this.markerBasedPaginate
-    }))), allowUpload && !!this.appElement ? /*#__PURE__*/React.createElement(UploadDialog, {
+    }))), isDefaultViewMetadata && isMetadataViewV2Feature && isMetadataSidePanelOpen && /*#__PURE__*/React.createElement(MetadataSidePanel, {
+      currentCollection: currentCollection,
+      onClose: this.closeMetadataSidePanel,
+      metadataTemplate: metadataTemplate,
+      selectedItemIds: selectedItemIds
+    })), allowUpload && !!this.appElement ? /*#__PURE__*/React.createElement(UploadDialog, {
       isOpen: isUploadModalOpen,
       currentFolderId: id,
       token: token,