box-ui-elements 23.4.0-beta.35 → 23.4.0-beta.36

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

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import noop from 'lodash/noop';
+import classNames from 'classnames';
 import { PageHeader } from '@box/blueprint-web';
 import SubHeaderLeft from './SubHeaderLeft';
+import SubHeaderLeftV2 from './SubHeaderLeftV2';
 import SubHeaderRight from './SubHeaderRight';
 import { VIEW_MODE_LIST, VIEW_METADATA } from '../../../constants';
 import { useFeatureEnabled } from '../feature-checking';
@@ -16,6 +18,7 @@ const SubHeader = ({
   maxGridColumnCountForWidth = 0,
   onGridViewSliderChange = noop,
   isSmall,
+  onClearSelectedItemIds,
   onCreate,
   onItemClick,
   onSortChange,
@@ -24,6 +27,8 @@ const SubHeader = ({
   portalElement,
   rootId,
   rootName,
+  selectedItemIds,
+  title,
   view,
   viewMode = VIEW_MODE_LIST
 }) => {
@@ -32,7 +37,9 @@ const SubHeader = ({
     return null;
   }
   return /*#__PURE__*/React.createElement(PageHeader.Root, {
-    className: "be-sub-header",
+    className: classNames({
+      'be-sub-header': !isMetadataViewV2Feature
+    }),
     "data-testid": "be-sub-header",
     variant: "inline"
   }, /*#__PURE__*/React.createElement(PageHeader.StartElements, null, view !== VIEW_METADATA && !isMetadataViewV2Feature && /*#__PURE__*/React.createElement(SubHeaderLeft, {
@@ -43,6 +50,12 @@ const SubHeader = ({
     rootId: rootId,
     rootName: rootName,
     view: view
+  }), isMetadataViewV2Feature && /*#__PURE__*/React.createElement(SubHeaderLeftV2, {
+    currentCollection: currentCollection,
+    onClearSelectedItemIds: onClearSelectedItemIds,
+    rootName: rootName,
+    selectedItemIds: selectedItemIds,
+    title: title
   })), /*#__PURE__*/React.createElement(PageHeader.EndElements, null, /*#__PURE__*/React.createElement(SubHeaderRight, {
     canCreateNewFolder: canCreateNewFolder,
     canUpload: canUpload,

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

@@ -1 +1 @@
-{"version":3,"file":"SubHeader.js","names":["React","noop","PageHeader","SubHeaderLeft","SubHeaderRight","VIEW_MODE_LIST","VIEW_METADATA","useFeatureEnabled","SubHeader","canCreateNewFolder","canUpload","currentCollection","gridColumnCount","gridMaxColumns","gridMinColumns","maxGridColumnCountForWidth","onGridViewSliderChange","isSmall","onCreate","onItemClick","onSortChange","onUpload","onViewModeChange","portalElement","rootId","rootName","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 { PageHeader } from '@box/blueprint-web';\nimport SubHeaderLeft from './SubHeaderLeft';\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    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    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    onCreate,\n    onItemClick,\n    onSortChange,\n    onUpload,\n    onViewModeChange,\n    portalElement,\n    rootId,\n    rootName,\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 className=\"be-sub-header\" data-testid=\"be-sub-header\" variant=\"inline\">\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            </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,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,cAAc,MAAM,kBAAkB;AAG7C,SAASC,cAAc,EAAEC,aAAa,QAAQ,oBAAoB;AAClE,SAASC,iBAAiB,QAAQ,qBAAqB;AAEvD,OAAO,kBAAkB;AAwBzB,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,GAAGf,IAAI;EAC7BgB,OAAO;EACPC,QAAQ;EACRC,WAAW;EACXC,YAAY;EACZC,QAAQ;EACRC,gBAAgB;EAChBC,aAAa;EACbC,MAAM;EACNC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGtB;AACC,CAAC,KAAK;EAClB,MAAMuB,uBAAuB,GAAGrB,iBAAiB,CAAC,gCAAgC,CAAC;EAEnF,IAAImB,IAAI,KAAKpB,aAAa,IAAI,CAACsB,uBAAuB,EAAE;IACpD,OAAO,IAAI;EACf;EAEA,oBACI5B,KAAA,CAAA6B,aAAA,CAAC3B,UAAU,CAAC4B,IAAI;IAACC,SAAS,EAAC,eAAe;IAAC,eAAY,eAAe;IAACC,OAAO,EAAC;EAAQ,gBACnFhC,KAAA,CAAA6B,aAAA,CAAC3B,UAAU,CAAC+B,aAAa,QACpBP,IAAI,KAAKpB,aAAa,IAAI,CAACsB,uBAAuB,iBAC/C5B,KAAA,CAAA6B,aAAA,CAAC1B,aAAa;IACVQ,iBAAiB,EAAEA,iBAAkB;IACrCM,OAAO,EAAEA,OAAQ;IACjBE,WAAW,EAAEA,WAAY;IACzBI,aAAa,EAAEA,aAAc;IAC7BC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBC,IAAI,EAAEA;EAAK,CACd,CAEiB,CAAC,eAC3B1B,KAAA,CAAA6B,aAAA,CAAC3B,UAAU,CAACgC,WAAW,qBACnBlC,KAAA,CAAA6B,aAAA,CAACzB,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;IACvDG,QAAQ,EAAEA,QAAS;IACnBF,sBAAsB,EAAEA,sBAAuB;IAC/CI,YAAY,EAAEA,YAAa;IAC3BC,QAAQ,EAAEA,QAAS;IACnBC,gBAAgB,EAAEA,gBAAiB;IACnCC,aAAa,EAAEA,aAAc;IAC7BG,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA;EAAS,CACtB,CACmB,CACX,CAAC;AAE1B,CAAC;AAED,eAAenB,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","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":[]}

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

@@ -0,0 +1,63 @@
+import React, { useMemo } 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 messages from '../messages';
+import './SubHeaderLeftV2.scss';
+const SubHeaderLeftV2 = props => {
+  const {
+    currentCollection,
+    onClearSelectedItemIds,
+    rootName,
+    selectedItemIds,
+    title
+  } = 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]);
+
+  // Case 1 and 2: selected item text with X button
+  if (selectedItemText) {
+    return /*#__PURE__*/React.createElement(PageHeader.Root, {
+      className: "be-SubHeaderLeftV2--selection",
+      variant: "default"
+    }, /*#__PURE__*/React.createElement(PageHeader.Corner, null, /*#__PURE__*/React.createElement(IconButton, {
+      "aria-label": formatMessage(messages.clearSelection),
+      icon: XMark,
+      onClick: onClearSelectedItemIds,
+      variant: "small-utility"
+    })), /*#__PURE__*/React.createElement(PageHeader.StartElements, null, /*#__PURE__*/React.createElement(Text, {
+      as: "span"
+    }, selectedItemText)));
+  }
+
+  // Case 3: No selected items - show title if provided, otherwise show root name
+  return /*#__PURE__*/React.createElement(Text, {
+    as: "h1",
+    variant: "titleXLarge"
+  }, title ?? rootName);
+};
+export default SubHeaderLeftV2;
+//# sourceMappingURL=SubHeaderLeftV2.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,3 @@
+.be-SubHeaderLeftV2--selection {
+    gap: var(--space-3);
+}

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

@@ -1049,6 +1049,31 @@ class ContentExplorer extends Component {
       }
       return maxWidthColumns;
     });
+    _defineProperty(this, "getMetadataViewProps", () => {
+      const {
+        metadataViewProps
+      } = this.props;
+      const {
+        tableProps
+      } = metadataViewProps ?? {};
+      const {
+        onSelectionChange
+      } = tableProps ?? {};
+      const {
+        selectedItemIds
+      } = this.state;
+      return _objectSpread(_objectSpread({}, metadataViewProps), {}, {
+        tableProps: _objectSpread(_objectSpread({}, tableProps), {}, {
+          selectedKeys: selectedItemIds,
+          onSelectionChange: ids => {
+            onSelectionChange?.(ids);
+            this.setState({
+              selectedItemIds: ids
+            });
+          }
+        })
+      });
+    });
     /**
      * Change the current view mode
      *
@@ -1113,6 +1138,31 @@ class ContentExplorer extends Component {
         }
       });
     });
+    _defineProperty(this, "clearSelectedItemIds", () => {
+      this.setState({
+        selectedItemIds: new Set()
+      });
+    });
+    /**
+     * Fetches the folder name and stores it in state rootName if successful
+     *
+     * @private
+     * @return {void}
+     */
+    _defineProperty(this, "fetchFolderName", folderId => {
+      if (!folderId) {
+        return;
+      }
+      this.api.getFolderAPI(false).getFolderFields(folderId, ({
+        name
+      }) => {
+        this.setState({
+          rootName: name
+        });
+      }, this.errorCallback, {
+        fields: [FIELD_NAME]
+      });
+    });
     const {
       apiHost,
       initialPage,
@@ -1159,6 +1209,7 @@ class ContentExplorer extends Component {
       markers: [],
       metadataTemplate: {},
       rootName: '',
+      selectedItemIds: new Set(),
       searchQuery: '',
       sortBy: _sortBy,
       sortDirection: _sortDirection,
@@ -1197,7 +1248,8 @@ class ContentExplorer extends Component {
   componentDidMount() {
     const {
       currentFolderId,
-      defaultView
+      defaultView,
+      metadataQuery
     } = this.props;
     this.rootElement = document.getElementById(this.id);
     this.appElement = this.rootElement.firstElementChild;
@@ -1207,6 +1259,7 @@ class ContentExplorer extends Component {
         break;
       case DEFAULT_VIEW_METADATA:
         this.showMetadataQueryResults();
+        this.fetchFolderName(metadataQuery?.ancestor_folder_id);
         break;
       default:
         this.fetchFolder(currentFolderId);
@@ -1496,7 +1549,6 @@ class ContentExplorer extends Component {
       measureRef,
       messages,
       fieldsToShow,
-      metadataViewProps,
       onDownload,
       onPreview,
       onUpload,
@@ -1509,6 +1561,7 @@ class ContentExplorer extends Component {
       staticPath,
       previewLibraryVersion,
       theme,
+      title,
       token,
       uploadHost
     } = this.props;
@@ -1549,6 +1602,7 @@ class ContentExplorer extends Component {
     const maxGridColumnCount = this.getMaxNumberOfGridViewColumnsForWidth();
     const hasNextMarker = !!markers[currentPageNumber + 1];
     const hasPreviousMarker = currentPageNumber === 1 || !!markers[currentPageNumber - 1];
+    const metadataViewProps = this.getMetadataViewProps();
 
     /* eslint-disable jsx-a11y/no-static-element-interactions */
     /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
@@ -1587,12 +1641,15 @@ class ContentExplorer extends Component {
       gridMinColumns: GRID_VIEW_MIN_COLUMNS,
       maxGridColumnCountForWidth: maxGridColumnCount,
       onUpload: this.upload,
+      onClearSelectedItemIds: this.clearSelectedItemIds,
       onCreate: this.createFolder,
       onGridViewSliderChange: this.onGridViewSliderChange,
       onItemClick: this.fetchFolder,
       onSortChange: this.sort,
       onViewModeChange: this.changeViewMode,
-      portalElement: this.rootElement
+      portalElement: this.rootElement,
+      selectedItemIds: this.state.selectedItemIds,
+      title: title
     }), /*#__PURE__*/React.createElement(Content, {
       canDelete: canDelete,
       canDownload: canDownload,