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

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

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl';
+import { IconButton, SidePanel, Text } from '@box/blueprint-web';
+import { XMark } from '@box/blueprint-web-assets/icons/Fill/index';
+import { FileDefault } from '@box/blueprint-web-assets/icons/Line/index';
+import { AutofillContextProvider, MetadataInstance, MetadataInstanceForm } from '@box/metadata-editor';
+import { getTemplateInstance, useSelectedItemText } from './utils';
+import messages from '../common/messages';
+import './MetadataSidePanel.scss';
+const MetadataSidePanel = ({
+  currentCollection,
+  onClose,
+  selectedItemIds,
+  metadataTemplate
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const [isEditing, setIsEditing] = useState(false);
+  const [isUnsavedChangesModalOpen, setIsUnsavedChangesModalOpen] = useState(false);
+  const selectedItemText = useSelectedItemText(currentCollection, selectedItemIds);
+  const selectedItems = selectedItemIds === 'all' ? currentCollection.items : currentCollection.items.filter(item => selectedItemIds.has(item.id));
+  const templateInstance = getTemplateInstance(metadataTemplate, selectedItems);
+  const handleMetadataInstanceEdit = () => {
+    setIsEditing(true);
+  };
+  const handleMetadataInstanceFormCancel = () => {
+    setIsEditing(false);
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const handleMetadataInstanceFormChange = values => {
+    // TODO: Implement on form change
+  };
+  const handleMetadataInstanceFormDiscardUnsavedChanges = () => {
+    setIsUnsavedChangesModalOpen(false);
+    setIsEditing(false);
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const handleMetadataInstanceFormSubmit = async (values, operations) => {
+    // TODO: Implement onSave callback
+  };
+  return /*#__PURE__*/React.createElement(SidePanel, {
+    variant: "persistent"
+  }, /*#__PURE__*/React.createElement(SidePanel.Header, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "titleLarge"
+  }, formatMessage(messages.sidebarMetadataTitle)), /*#__PURE__*/React.createElement("div", {
+    className: "bce-MetadataSidePanel-subtitle"
+  }, /*#__PURE__*/React.createElement(FileDefault, null), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    color: "textOnLightSecondary",
+    variant: "subtitle"
+  }, selectedItemText))), /*#__PURE__*/React.createElement(IconButton, {
+    "aria-label": formatMessage(messages.close),
+    icon: XMark,
+    onClick: onClose,
+    size: "large"
+  })), /*#__PURE__*/React.createElement(SidePanel.ScrollableContainer, null, /*#__PURE__*/React.createElement("div", {
+    className: "bce-MetadataSidePanel-content"
+  }, /*#__PURE__*/React.createElement(AutofillContextProvider, {
+    fetchSuggestions: null,
+    isAiSuggestionsFeatureEnabled: false
+  }, isEditing ? /*#__PURE__*/React.createElement(MetadataInstanceForm, {
+    areAiSuggestionsAvailable: false,
+    isAiSuggestionsFeatureEnabled: false,
+    isBetaLanguageEnabled: false,
+    isDeleteButtonDisabled: true,
+    isDeleteConfirmationModalCheckboxEnabled: false,
+    isLargeFile: false,
+    isMultilevelTaxonomyFieldEnabled: false,
+    isUnsavedChangesModalOpen: isUnsavedChangesModalOpen,
+    selectedTemplateInstance: templateInstance,
+    onCancel: handleMetadataInstanceFormCancel,
+    onChange: handleMetadataInstanceFormChange,
+    onDelete: null,
+    onDiscardUnsavedChanges: handleMetadataInstanceFormDiscardUnsavedChanges,
+    onSubmit: handleMetadataInstanceFormSubmit,
+    setIsUnsavedChangesModalOpen: setIsUnsavedChangesModalOpen,
+    taxonomyOptionsFetcher: null
+  }) : /*#__PURE__*/React.createElement(MetadataInstance, {
+    areAiSuggestionsAvailable: false,
+    isAiSuggestionsFeatureEnabled: false,
+    isBetaLanguageEnabled: false,
+    onEdit: handleMetadataInstanceEdit,
+    templateInstance: templateInstance,
+    taxonomyNodeFetcher: null
+  })))));
+};
+export default MetadataSidePanel;
+//# sourceMappingURL=MetadataSidePanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetadataSidePanel.js","names":["React","useState","useIntl","IconButton","SidePanel","Text","XMark","FileDefault","AutofillContextProvider","MetadataInstance","MetadataInstanceForm","getTemplateInstance","useSelectedItemText","messages","MetadataSidePanel","currentCollection","onClose","selectedItemIds","metadataTemplate","formatMessage","isEditing","setIsEditing","isUnsavedChangesModalOpen","setIsUnsavedChangesModalOpen","selectedItemText","selectedItems","items","filter","item","has","id","templateInstance","handleMetadataInstanceEdit","handleMetadataInstanceFormCancel","handleMetadataInstanceFormChange","values","handleMetadataInstanceFormDiscardUnsavedChanges","handleMetadataInstanceFormSubmit","operations","createElement","variant","Header","as","sidebarMetadataTitle","className","color","close","icon","onClick","size","ScrollableContainer","fetchSuggestions","isAiSuggestionsFeatureEnabled","areAiSuggestionsAvailable","isBetaLanguageEnabled","isDeleteButtonDisabled","isDeleteConfirmationModalCheckboxEnabled","isLargeFile","isMultilevelTaxonomyFieldEnabled","selectedTemplateInstance","onCancel","onChange","onDelete","onDiscardUnsavedChanges","onSubmit","taxonomyOptionsFetcher","onEdit","taxonomyNodeFetcher"],"sources":["../../../src/elements/content-explorer/MetadataSidePanel.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { IconButton, SidePanel, Text } from '@box/blueprint-web';\nimport { XMark } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { FileDefault } from '@box/blueprint-web-assets/icons/Line/index';\nimport {\n    AutofillContextProvider,\n    FormValues,\n    JSONPatchOperations,\n    MetadataInstance,\n    MetadataInstanceForm,\n} from '@box/metadata-editor';\n\nimport type { Selection } from 'react-aria-components';\nimport type { Collection } from '../../common/types/core';\nimport type { MetadataTemplate } from '../../common/types/metadata';\nimport { getTemplateInstance, useSelectedItemText } from './utils';\n\nimport messages from '../common/messages';\n\nimport './MetadataSidePanel.scss';\n\nexport interface MetadataSidePanelProps {\n    currentCollection: Collection;\n    onClose: () => void;\n    metadataTemplate: MetadataTemplate;\n    selectedItemIds: Selection;\n}\n\nconst MetadataSidePanel = ({\n    currentCollection,\n    onClose,\n    selectedItemIds,\n    metadataTemplate,\n}: MetadataSidePanelProps) => {\n    const { formatMessage } = useIntl();\n    const [isEditing, setIsEditing] = useState<boolean>(false);\n    const [isUnsavedChangesModalOpen, setIsUnsavedChangesModalOpen] = useState<boolean>(false);\n\n    const selectedItemText = useSelectedItemText(currentCollection, selectedItemIds);\n    const selectedItems =\n        selectedItemIds === 'all'\n            ? currentCollection.items\n            : currentCollection.items.filter(item => selectedItemIds.has(item.id));\n    const templateInstance = getTemplateInstance(metadataTemplate, selectedItems);\n\n    const handleMetadataInstanceEdit = () => {\n        setIsEditing(true);\n    };\n\n    const handleMetadataInstanceFormCancel = () => {\n        setIsEditing(false);\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const handleMetadataInstanceFormChange = (values: FormValues) => {\n        // TODO: Implement on form change\n    };\n\n    const handleMetadataInstanceFormDiscardUnsavedChanges = () => {\n        setIsUnsavedChangesModalOpen(false);\n        setIsEditing(false);\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const handleMetadataInstanceFormSubmit = async (values: FormValues, operations: JSONPatchOperations) => {\n        // TODO: Implement onSave callback\n    };\n\n    return (\n        <SidePanel variant=\"persistent\">\n            <SidePanel.Header>\n                <div>\n                    <Text as=\"span\" variant=\"titleLarge\">\n                        {formatMessage(messages.sidebarMetadataTitle)}\n                    </Text>\n                    <div className=\"bce-MetadataSidePanel-subtitle\">\n                        <FileDefault />\n                        <Text as=\"span\" color=\"textOnLightSecondary\" variant=\"subtitle\">\n                            {selectedItemText}\n                        </Text>\n                    </div>\n                </div>\n                <IconButton aria-label={formatMessage(messages.close)} icon={XMark} onClick={onClose} size=\"large\" />\n            </SidePanel.Header>\n            <SidePanel.ScrollableContainer>\n                <div className=\"bce-MetadataSidePanel-content\">\n                    <AutofillContextProvider fetchSuggestions={null} isAiSuggestionsFeatureEnabled={false}>\n                        {isEditing ? (\n                            <MetadataInstanceForm\n                                areAiSuggestionsAvailable={false}\n                                isAiSuggestionsFeatureEnabled={false}\n                                isBetaLanguageEnabled={false}\n                                isDeleteButtonDisabled={true}\n                                isDeleteConfirmationModalCheckboxEnabled={false}\n                                isLargeFile={false}\n                                isMultilevelTaxonomyFieldEnabled={false}\n                                isUnsavedChangesModalOpen={isUnsavedChangesModalOpen}\n                                selectedTemplateInstance={templateInstance}\n                                onCancel={handleMetadataInstanceFormCancel}\n                                onChange={handleMetadataInstanceFormChange}\n                                onDelete={null}\n                                onDiscardUnsavedChanges={handleMetadataInstanceFormDiscardUnsavedChanges}\n                                onSubmit={handleMetadataInstanceFormSubmit}\n                                setIsUnsavedChangesModalOpen={setIsUnsavedChangesModalOpen}\n                                taxonomyOptionsFetcher={null}\n                            />\n                        ) : (\n                            <MetadataInstance\n                                areAiSuggestionsAvailable={false}\n                                isAiSuggestionsFeatureEnabled={false}\n                                isBetaLanguageEnabled={false}\n                                onEdit={handleMetadataInstanceEdit}\n                                templateInstance={templateInstance}\n                                taxonomyNodeFetcher={null}\n                            />\n                        )}\n                    </AutofillContextProvider>\n                </div>\n            </SidePanel.ScrollableContainer>\n        </SidePanel>\n    );\n};\n\nexport default MetadataSidePanel;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,12 @@
+.bce-MetadataSidePanel-subtitle {
+    display: flex;
+    align-items: center;
+}
+
+.bce-MetadataSidePanel-content {
+    padding: var(--space-4);
+
+    [data-target-id='TextButton-deleteButton'] {
+        visibility: hidden;
+    }
+}

package/es/elements/content-explorer/stories/tests/MetadataView-visual.stories.js

@@ -177,6 +177,36 @@ export const metadataViewV2WithInitialFilterValues = {
     expect(fileTypeChip).toHaveTextContent(/\+2/);
   }
 };
+export const sidePanelOpenWithSingleItemSelected = {
+  args: _objectSpread(_objectSpread({}, metadataViewV2ElementProps), {}, {
+    metadataViewProps: {
+      columns,
+      tableProps: {
+        isSelectAllEnabled: true
+      }
+    }
+  }),
+  play: async ({
+    canvas
+  }) => {
+    await waitFor(() => {
+      expect(canvas.getByRole('row', {
+        name: /Child 2/i
+      })).toBeInTheDocument();
+    });
+
+    // Select the first row by clicking its checkbox
+    const firstRow = canvas.getByRole('row', {
+      name: /Child 2/i
+    });
+    const checkbox = within(firstRow).getByRole('checkbox');
+    await userEvent.click(checkbox);
+    const metadataButton = canvas.getByRole('button', {
+      name: 'Metadata'
+    });
+    await userEvent.click(metadataButton);
+  }
+};
 const meta = {
   title: 'Elements/ContentExplorer/tests/MetadataView/visual',
   component: ContentExplorer,

package/es/elements/content-explorer/stories/tests/MetadataView-visual.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetadataView-visual.stories.js","names":["http","HttpResponse","expect","userEvent","waitFor","within","Download","SignMeOthers","Sign","noop","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","mockRootFolder","scope","templateScope","templateKey","metadataScopeAndKey","metadataFieldNamePrefix","metadataQuery","from","ancestor_folder_id","sort_by","field_key","fields","key","direction","map","field","fieldsToShow","canEdit","displayName","columns","textValue","id","type","allowSorting","minWidth","maxWidth","defaultView","metadataView","args","metadataViewV2ElementProps","metadataViewProps","features","contentExplorer","metadataViewV2","metadataViewV2WithCustomActions","_objectSpread","tableProps","isSelectAllEnabled","itemActionMenuProps","actions","label","onClick","icon","subMenuTrigger","subMenuActions","play","canvas","getByRole","name","toBeInTheDocument","firstRow","ellipsesButton","click","initialFilterActionBarProps","initialFilterValues","value","metadataViewV2WithInitialFilterValues","actionBarProps","toHaveTextContent","contactRoleChip","fileTypeChip","meta","title","component","global","FEATURE_FLAGS","rootFolderId","FOLDER_ID","token","TOKEN","parameters","msw","handlers","post","json","get"],"sources":["../../../../../src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport { http, HttpResponse } from 'msw';\nimport { expect, userEvent, waitFor, within } from 'storybook/test';\nimport { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { Sign } from '@box/blueprint-web-assets/icons/Line';\nimport noop from 'lodash/noop';\n\nimport ContentExplorer from '../../ContentExplorer';\nimport { DEFAULT_HOSTNAME_API } from '../../../../constants';\nimport { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';\nimport { mockRootFolder } from '../../../common/__mocks__/mockRootFolder';\n\n// The intent behind relying on mockMetadata is to allow a developer to paste in their own metadata template schema for use with live API calls.\nconst { scope: templateScope, templateKey } = mockSchema;\n\nconst metadataScopeAndKey = `${templateScope}.${templateKey}`;\nconst metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;\n\n// This is the body of the metadata query API call.\n// https://developer.box.com/guides/metadata/queries/syntax/\nconst metadataQuery = {\n    from: metadataScopeAndKey,\n    ancestor_folder_id: '0',\n    sort_by: [\n        {\n            field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`, // Default to sorting by the first field in the schema\n            direction: 'asc',\n        },\n    ],\n    fields: [\n        // Default to returning all fields in the metadata template schema, and name as a standalone (non-metadata) field\n        ...mockSchema.fields.map(field => `${metadataFieldNamePrefix}.${field.key}`),\n        'name',\n    ],\n};\n\n// Used for metadata view v1\nconst fieldsToShow = [\n    { key: `${metadataFieldNamePrefix}.name`, canEdit: false, displayName: 'Alias' },\n    { key: `${metadataFieldNamePrefix}.industry`, canEdit: true },\n    { key: `${metadataFieldNamePrefix}.last_contacted_at`, canEdit: true },\n    { key: `${metadataFieldNamePrefix}.role`, canEdit: true },\n];\n\n// Used for metadata view v2\nconst columns = [\n    {\n        // Always include the name column\n        textValue: 'Name',\n        id: 'name',\n        type: 'string',\n        allowSorting: true,\n        minWidth: 150,\n        maxWidth: 150,\n    },\n    ...mockSchema.fields.map(field => ({\n        textValue: field.displayName,\n        id: `${metadataFieldNamePrefix}.${field.key}`,\n        type: field.type,\n        allowSorting: true,\n        minWidth: 150,\n        maxWidth: 150,\n    })),\n];\n\n// Switches ContentExplorer to use Metadata View over standard, folder-based view.\nconst defaultView = 'metadata';\n\ntype Story = StoryObj<typeof ContentExplorer>;\n\nexport const metadataView: Story = {\n    args: {\n        metadataQuery,\n        fieldsToShow,\n        defaultView,\n    },\n};\n\nconst metadataViewV2ElementProps = {\n    metadataViewProps: {\n        columns,\n    },\n    metadataQuery,\n    fieldsToShow,\n    defaultView,\n    features: {\n        contentExplorer: {\n            metadataViewV2: true,\n        },\n    },\n};\n\nexport const metadataViewV2: Story = {\n    args: metadataViewV2ElementProps,\n};\n\nexport const metadataViewV2WithCustomActions: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            tableProps: {\n                isSelectAllEnabled: true,\n            },\n            itemActionMenuProps: {\n                actions: [\n                    {\n                        label: 'Download',\n                        onClick: noop,\n                        icon: Download,\n                    },\n                ],\n                subMenuTrigger: {\n                    label: 'Sign',\n                    icon: Sign,\n                },\n                subMenuActions: [\n                    {\n                        label: 'Request Signature',\n                        onClick: noop,\n                        icon: SignMeOthers,\n                    },\n                ],\n            },\n        },\n    },\n    play: async ({ canvas }) => {\n        await waitFor(() => {\n            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();\n        });\n        const firstRow = canvas.getByRole('row', { name: /Child 2/i });\n        const ellipsesButton = within(firstRow).getByRole('button', { name: 'Action menu' });\n        userEvent.click(ellipsesButton);\n    },\n};\n\nconst initialFilterActionBarProps = {\n    initialFilterValues: {\n        'industry-filter': { value: ['Legal'] },\n        'mimetype-filter': { value: ['boxnoteType', 'documentType', 'threedType'] },\n        'role-filter': { value: ['Developer', 'Business Owner', 'Marketing'] },\n    },\n};\n\nexport const metadataViewV2WithInitialFilterValues: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            actionBarProps: initialFilterActionBarProps,\n        },\n    },\n    play: async ({ canvas }) => {\n        // Wait for chips to update with initial values\n        await waitFor(() => {\n            expect(canvas.getByRole('button', { name: /Industry/i })).toHaveTextContent(/\\(1\\)/);\n        });\n        // Other chips should reflect initialized values\n        const contactRoleChip = canvas.getByRole('button', { name: /Contact Role/i });\n        expect(contactRoleChip).toHaveTextContent(/\\(3\\)/);\n\n        const fileTypeChip = canvas.getByRole('button', { name: /Box Note/i });\n        expect(fileTypeChip).toHaveTextContent(/\\+2/);\n    },\n};\n\nconst meta: Meta<typeof ContentExplorer> = {\n    title: 'Elements/ContentExplorer/tests/MetadataView/visual',\n    component: ContentExplorer,\n    args: {\n        features: global.FEATURE_FLAGS,\n        rootFolderId: global.FOLDER_ID,\n        token: global.TOKEN,\n    },\n    parameters: {\n        msw: {\n            handlers: [\n                http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, () => {\n                    return HttpResponse.json(mockMetadata);\n                }),\n                http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {\n                    return HttpResponse.json(mockSchema);\n                }),\n                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/:id`, () => {\n                    return HttpResponse.json(mockRootFolder);\n                }),\n            ],\n        },\n    },\n};\n\nexport default meta;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MetadataView-visual.stories.js","names":["http","HttpResponse","expect","userEvent","waitFor","within","Download","SignMeOthers","Sign","noop","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","mockRootFolder","scope","templateScope","templateKey","metadataScopeAndKey","metadataFieldNamePrefix","metadataQuery","from","ancestor_folder_id","sort_by","field_key","fields","key","direction","map","field","fieldsToShow","canEdit","displayName","columns","textValue","id","type","allowSorting","minWidth","maxWidth","defaultView","metadataView","args","metadataViewV2ElementProps","metadataViewProps","features","contentExplorer","metadataViewV2","metadataViewV2WithCustomActions","_objectSpread","tableProps","isSelectAllEnabled","itemActionMenuProps","actions","label","onClick","icon","subMenuTrigger","subMenuActions","play","canvas","getByRole","name","toBeInTheDocument","firstRow","ellipsesButton","click","initialFilterActionBarProps","initialFilterValues","value","metadataViewV2WithInitialFilterValues","actionBarProps","toHaveTextContent","contactRoleChip","fileTypeChip","sidePanelOpenWithSingleItemSelected","checkbox","metadataButton","meta","title","component","global","FEATURE_FLAGS","rootFolderId","FOLDER_ID","token","TOKEN","parameters","msw","handlers","post","json","get"],"sources":["../../../../../src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport { http, HttpResponse } from 'msw';\nimport { expect, userEvent, waitFor, within } from 'storybook/test';\nimport { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { Sign } from '@box/blueprint-web-assets/icons/Line';\nimport noop from 'lodash/noop';\n\nimport ContentExplorer from '../../ContentExplorer';\nimport { DEFAULT_HOSTNAME_API } from '../../../../constants';\nimport { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';\nimport { mockRootFolder } from '../../../common/__mocks__/mockRootFolder';\n\n// The intent behind relying on mockMetadata is to allow a developer to paste in their own metadata template schema for use with live API calls.\nconst { scope: templateScope, templateKey } = mockSchema;\n\nconst metadataScopeAndKey = `${templateScope}.${templateKey}`;\nconst metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;\n\n// This is the body of the metadata query API call.\n// https://developer.box.com/guides/metadata/queries/syntax/\nconst metadataQuery = {\n    from: metadataScopeAndKey,\n    ancestor_folder_id: '0',\n    sort_by: [\n        {\n            field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`, // Default to sorting by the first field in the schema\n            direction: 'asc',\n        },\n    ],\n    fields: [\n        // Default to returning all fields in the metadata template schema, and name as a standalone (non-metadata) field\n        ...mockSchema.fields.map(field => `${metadataFieldNamePrefix}.${field.key}`),\n        'name',\n    ],\n};\n\n// Used for metadata view v1\nconst fieldsToShow = [\n    { key: `${metadataFieldNamePrefix}.name`, canEdit: false, displayName: 'Alias' },\n    { key: `${metadataFieldNamePrefix}.industry`, canEdit: true },\n    { key: `${metadataFieldNamePrefix}.last_contacted_at`, canEdit: true },\n    { key: `${metadataFieldNamePrefix}.role`, canEdit: true },\n];\n\n// Used for metadata view v2\nconst columns = [\n    {\n        // Always include the name column\n        textValue: 'Name',\n        id: 'name',\n        type: 'string',\n        allowSorting: true,\n        minWidth: 150,\n        maxWidth: 150,\n    },\n    ...mockSchema.fields.map(field => ({\n        textValue: field.displayName,\n        id: `${metadataFieldNamePrefix}.${field.key}`,\n        type: field.type,\n        allowSorting: true,\n        minWidth: 150,\n        maxWidth: 150,\n    })),\n];\n\n// Switches ContentExplorer to use Metadata View over standard, folder-based view.\nconst defaultView = 'metadata';\n\ntype Story = StoryObj<typeof ContentExplorer>;\n\nexport const metadataView: Story = {\n    args: {\n        metadataQuery,\n        fieldsToShow,\n        defaultView,\n    },\n};\n\nconst metadataViewV2ElementProps = {\n    metadataViewProps: {\n        columns,\n    },\n    metadataQuery,\n    fieldsToShow,\n    defaultView,\n    features: {\n        contentExplorer: {\n            metadataViewV2: true,\n        },\n    },\n};\n\nexport const metadataViewV2: Story = {\n    args: metadataViewV2ElementProps,\n};\n\nexport const metadataViewV2WithCustomActions: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            tableProps: {\n                isSelectAllEnabled: true,\n            },\n            itemActionMenuProps: {\n                actions: [\n                    {\n                        label: 'Download',\n                        onClick: noop,\n                        icon: Download,\n                    },\n                ],\n                subMenuTrigger: {\n                    label: 'Sign',\n                    icon: Sign,\n                },\n                subMenuActions: [\n                    {\n                        label: 'Request Signature',\n                        onClick: noop,\n                        icon: SignMeOthers,\n                    },\n                ],\n            },\n        },\n    },\n    play: async ({ canvas }) => {\n        await waitFor(() => {\n            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();\n        });\n        const firstRow = canvas.getByRole('row', { name: /Child 2/i });\n        const ellipsesButton = within(firstRow).getByRole('button', { name: 'Action menu' });\n        userEvent.click(ellipsesButton);\n    },\n};\n\nconst initialFilterActionBarProps = {\n    initialFilterValues: {\n        'industry-filter': { value: ['Legal'] },\n        'mimetype-filter': { value: ['boxnoteType', 'documentType', 'threedType'] },\n        'role-filter': { value: ['Developer', 'Business Owner', 'Marketing'] },\n    },\n};\n\nexport const metadataViewV2WithInitialFilterValues: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            actionBarProps: initialFilterActionBarProps,\n        },\n    },\n    play: async ({ canvas }) => {\n        // Wait for chips to update with initial values\n        await waitFor(() => {\n            expect(canvas.getByRole('button', { name: /Industry/i })).toHaveTextContent(/\\(1\\)/);\n        });\n        // Other chips should reflect initialized values\n        const contactRoleChip = canvas.getByRole('button', { name: /Contact Role/i });\n        expect(contactRoleChip).toHaveTextContent(/\\(3\\)/);\n\n        const fileTypeChip = canvas.getByRole('button', { name: /Box Note/i });\n        expect(fileTypeChip).toHaveTextContent(/\\+2/);\n    },\n};\n\nexport const sidePanelOpenWithSingleItemSelected: Story = {\n    args: {\n        ...metadataViewV2ElementProps,\n        metadataViewProps: {\n            columns,\n            tableProps: {\n                isSelectAllEnabled: true,\n            },\n        },\n    },\n\n    play: async ({ canvas }) => {\n        await waitFor(() => {\n            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();\n        });\n\n        // Select the first row by clicking its checkbox\n        const firstRow = canvas.getByRole('row', { name: /Child 2/i });\n        const checkbox = within(firstRow).getByRole('checkbox');\n        await userEvent.click(checkbox);\n\n        const metadataButton = canvas.getByRole('button', { name: 'Metadata' });\n        await userEvent.click(metadataButton);\n    },\n};\n\nconst meta: Meta<typeof ContentExplorer> = {\n    title: 'Elements/ContentExplorer/tests/MetadataView/visual',\n    component: ContentExplorer,\n    args: {\n        features: global.FEATURE_FLAGS,\n        rootFolderId: global.FOLDER_ID,\n        token: global.TOKEN,\n    },\n    parameters: {\n        msw: {\n            handlers: [\n                http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, () => {\n                    return HttpResponse.json(mockMetadata);\n                }),\n                http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {\n                    return HttpResponse.json(mockSchema);\n                }),\n                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/:id`, () => {\n                    return HttpResponse.json(mockRootFolder);\n                }),\n            ],\n        },\n    },\n};\n\nexport default meta;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import messages from '../common/messages';
+
+// Get selected item text
+export function useSelectedItemText(currentCollection, selectedItemIds) {
+  const {
+    formatMessage
+  } = useIntl();
+  return 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
+    return formatMessage(messages.numFilesSelected, {
+      numSelected: selectedCount
+    });
+  }, [currentCollection.items, formatMessage, selectedItemIds]);
+}
+
+// Get template instance based on metadata template and selected items
+export function getTemplateInstance(metadataTemplate, selectedItems) {
+  const {
+    displayName,
+    fields,
+    hidden,
+    id,
+    scope,
+    templateKey,
+    type
+  } = metadataTemplate;
+  const selectedItemsFields = fields.map(({
+    displayName: fieldDisplayName,
+    hidden: fieldHidden,
+    id: fieldId,
+    key,
+    options,
+    type: fieldType
+  }) => ({
+    displayName: fieldDisplayName,
+    hidden: fieldHidden,
+    id: fieldId,
+    key,
+    options,
+    type: fieldType,
+    // TODO: Add support for multiple selected items
+    value: selectedItems[0].metadata[scope][templateKey][key]
+  }));
+  return {
+    canEdit: true,
+    displayName,
+    hidden,
+    id,
+    fields: selectedItemsFields,
+    scope,
+    templateKey,
+    type
+  };
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["useMemo","useIntl","messages","useSelectedItemText","currentCollection","selectedItemIds","formatMessage","selectedCount","items","length","size","selectedKey","id","values","next","value","selectedItem","find","item","name","numFilesSelected","numSelected","getTemplateInstance","metadataTemplate","selectedItems","displayName","fields","hidden","scope","templateKey","type","selectedItemsFields","map","fieldDisplayName","fieldHidden","fieldId","key","options","fieldType","metadata","canEdit"],"sources":["../../../src/elements/content-explorer/utils.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { MetadataTemplate } from '@box/metadata-editor';\nimport type { Selection } from 'react-aria-components';\nimport type { BoxItem, Collection } from '../../common/types/core';\n\nimport messages from '../common/messages';\n\n// Get selected item text\nexport function useSelectedItemText(currentCollection: Collection, selectedItemIds: Selection): string {\n    const { formatMessage } = useIntl();\n\n    return useMemo(() => {\n        const selectedCount = selectedItemIds === 'all' ? currentCollection.items.length : selectedItemIds.size;\n        if (selectedCount === 0) return '';\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\n        // Case 2: Multiple selected items - show count\n        return formatMessage(messages.numFilesSelected, { numSelected: selectedCount });\n    }, [currentCollection.items, formatMessage, selectedItemIds]);\n}\n\n// Get template instance based on metadata template and selected items\nexport function getTemplateInstance(metadataTemplate: MetadataTemplate, selectedItems: BoxItem[]) {\n    const { displayName, fields, hidden, id, scope, templateKey, type } = metadataTemplate;\n\n    const selectedItemsFields = fields.map(\n        ({ displayName: fieldDisplayName, hidden: fieldHidden, id: fieldId, key, options, type: fieldType }) => ({\n            displayName: fieldDisplayName,\n            hidden: fieldHidden,\n            id: fieldId,\n            key,\n            options,\n            type: fieldType,\n            // TODO: Add support for multiple selected items\n            value: selectedItems[0].metadata[scope][templateKey][key],\n        }),\n    );\n\n    return {\n        canEdit: true,\n        displayName,\n        hidden,\n        id,\n        fields: selectedItemsFields,\n        scope,\n        templateKey,\n        type,\n    };\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,OAAO,QAAQ,YAAY;AAMpC,OAAOC,QAAQ,MAAM,oBAAoB;;AAEzC;AACA,OAAO,SAASC,mBAAmBA,CAACC,iBAA6B,EAAEC,eAA0B,EAAU;EACnG,MAAM;IAAEC;EAAc,CAAC,GAAGL,OAAO,CAAC,CAAC;EAEnC,OAAOD,OAAO,CAAC,MAAM;IACjB,MAAMO,aAAa,GAAGF,eAAe,KAAK,KAAK,GAAGD,iBAAiB,CAACI,KAAK,CAACC,MAAM,GAAGJ,eAAe,CAACK,IAAI;IACvG,IAAIH,aAAa,KAAK,CAAC,EAAE,OAAO,EAAE;;IAElC;IACA,IAAIA,aAAa,KAAK,CAAC,EAAE;MACrB,MAAMI,WAAW,GACbN,eAAe,KAAK,KAAK,GAAGD,iBAAiB,CAACI,KAAK,CAAC,CAAC,CAAC,CAACI,EAAE,GAAGP,eAAe,CAACQ,MAAM,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACC,KAAK;MACrG,MAAMC,YAAY,GAAGZ,iBAAiB,CAACI,KAAK,CAACS,IAAI,CAACC,IAAI,IAAIA,IAAI,CAACN,EAAE,KAAKD,WAAW,CAAC;MAClF,OAAOK,YAAY,EAAEG,IAAI,IAAI,EAAE;IACnC;;IAEA;IACA,OAAOb,aAAa,CAACJ,QAAQ,CAACkB,gBAAgB,EAAE;MAAEC,WAAW,EAAEd;IAAc,CAAC,CAAC;EACnF,CAAC,EAAE,CAACH,iBAAiB,CAACI,KAAK,EAAEF,aAAa,EAAED,eAAe,CAAC,CAAC;AACjE;;AAEA;AACA,OAAO,SAASiB,mBAAmBA,CAACC,gBAAkC,EAAEC,aAAwB,EAAE;EAC9F,MAAM;IAAEC,WAAW;IAAEC,MAAM;IAAEC,MAAM;IAAEf,EAAE;IAAEgB,KAAK;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGP,gBAAgB;EAEtF,MAAMQ,mBAAmB,GAAGL,MAAM,CAACM,GAAG,CAClC,CAAC;IAAEP,WAAW,EAAEQ,gBAAgB;IAAEN,MAAM,EAAEO,WAAW;IAAEtB,EAAE,EAAEuB,OAAO;IAAEC,GAAG;IAAEC,OAAO;IAAEP,IAAI,EAAEQ;EAAU,CAAC,MAAM;IACrGb,WAAW,EAAEQ,gBAAgB;IAC7BN,MAAM,EAAEO,WAAW;IACnBtB,EAAE,EAAEuB,OAAO;IACXC,GAAG;IACHC,OAAO;IACPP,IAAI,EAAEQ,SAAS;IACf;IACAvB,KAAK,EAAES,aAAa,CAAC,CAAC,CAAC,CAACe,QAAQ,CAACX,KAAK,CAAC,CAACC,WAAW,CAAC,CAACO,GAAG;EAC5D,CAAC,CACL,CAAC;EAED,OAAO;IACHI,OAAO,EAAE,IAAI;IACbf,WAAW;IACXE,MAAM;IACNf,EAAE;IACFc,MAAM,EAAEK,mBAAmB;IAC3BH,KAAK;IACLC,WAAW;IACXC;EACJ,CAAC;AACL","ignoreList":[]}

package/es/src/elements/common/sub-header/SubHeader.d.ts

@@ -17,6 +17,7 @@ export interface SubHeaderProps {
     onGridViewSliderChange?: (newSliderValue: number) => void;
     onItemClick: (id: string | null, triggerNavigationEvent: boolean | null) => void;
     onSortChange: (sortBy: string, sortDirection: string) => void;
+    onMetadataSidePanelToggle?: () => void;
     onUpload: () => void;
     onViewModeChange?: (viewMode: ViewMode) => void;
     portalElement?: HTMLElement;
@@ -27,5 +28,5 @@ export interface SubHeaderProps {
     view: View;
     viewMode?: ViewMode;
 }
-declare const SubHeader: ({ canCreateNewFolder, canUpload, currentCollection, gridColumnCount, gridMaxColumns, gridMinColumns, maxGridColumnCountForWidth, onGridViewSliderChange, isSmall, onClearSelectedItemIds, onCreate, onItemClick, onSortChange, onUpload, onViewModeChange, portalElement, rootId, rootName, selectedItemIds, title, view, viewMode, }: SubHeaderProps) => React.JSX.Element;
+declare const SubHeader: ({ canCreateNewFolder, canUpload, currentCollection, gridColumnCount, gridMaxColumns, gridMinColumns, maxGridColumnCountForWidth, onGridViewSliderChange, isSmall, onClearSelectedItemIds, onCreate, onItemClick, onSortChange, onMetadataSidePanelToggle, onUpload, onViewModeChange, portalElement, rootId, rootName, selectedItemIds, title, view, viewMode, }: SubHeaderProps) => React.JSX.Element;
 export default SubHeader;

package/es/src/elements/common/sub-header/SubHeaderLeftV2.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import type { Selection } from 'react-aria-components';
 import type { Collection } from '../../../common/types/core';
 import './SubHeaderLeftV2.scss';

package/es/src/elements/common/sub-header/SubHeaderRight.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { Selection } from 'react-aria-components';
 import type { ViewMode } from '../flowTypes';
 import type { SortBy, SortDirection, View, Collection } from '../../../common/types/core';
 import './SubHeaderRight.scss';
@@ -13,11 +14,13 @@ export interface SubHeaderRightProps {
     onCreate: () => void;
     onGridViewSliderChange: (newSliderValue: number) => void;
     onSortChange: (sortBy: SortBy, sortDirection: SortDirection) => void;
+    onMetadataSidePanelToggle?: () => void;
     onUpload: () => void;
     onViewModeChange?: (viewMode: ViewMode) => void;
     portalElement?: HTMLElement;
+    selectedItemIds?: Selection;
     view: View;
     viewMode: ViewMode;
 }
-declare const SubHeaderRight: ({ canCreateNewFolder, canUpload, currentCollection, gridColumnCount, gridMaxColumns, gridMinColumns, maxGridColumnCountForWidth, onCreate, onGridViewSliderChange, onSortChange, onUpload, onViewModeChange, portalElement, view, viewMode, }: SubHeaderRightProps) => React.JSX.Element;
+declare const SubHeaderRight: ({ canCreateNewFolder, canUpload, currentCollection, gridColumnCount, gridMaxColumns, gridMinColumns, maxGridColumnCountForWidth, onCreate, onGridViewSliderChange, onSortChange, onMetadataSidePanelToggle, onUpload, onViewModeChange, portalElement, selectedItemIds, view, viewMode, }: SubHeaderRightProps) => React.JSX.Element;
 export default SubHeaderRight;

package/es/src/elements/content-explorer/ContentExplorer.d.ts

@@ -86,6 +86,7 @@ type State = {
     isCreateFolderModalOpen: boolean;
     isDeleteModalOpen: boolean;
     isLoading: boolean;
+    isMetadataSidePanelOpen: boolean;
     isPreviewModalOpen: boolean;
     isRenameModalOpen: boolean;
     isShareModalOpen: boolean;
@@ -546,6 +547,20 @@ declare class ContentExplorer extends Component<ContentExplorerProps, State> {
     updateMetadata: (item: BoxItem, field: string, oldValue?: MetadataFieldValue | null, newValue?: MetadataFieldValue | null) => void;
     updateMetadataSuccessCallback: (item: BoxItem, field: string, newValue?: MetadataFieldValue | null) => void;
     clearSelectedItemIds: () => void;
+    /**
+     * Toggle metadata side panel visibility
+     *
+     * @private
+     * @return {void}
+     */
+    onMetadataSidePanelToggle: () => void;
+    /**
+     * Close metadata side panel
+     *
+     * @private
+     * @return {void}
+     */
+    closeMetadataSidePanel: () => void;
     /**
      * Renders the file picker
      *

package/es/src/elements/content-explorer/MetadataSidePanel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Selection } from 'react-aria-components';
+import type { Collection } from '../../common/types/core';
+import type { MetadataTemplate } from '../../common/types/metadata';
+import './MetadataSidePanel.scss';
+export interface MetadataSidePanelProps {
+    currentCollection: Collection;
+    onClose: () => void;
+    metadataTemplate: MetadataTemplate;
+    selectedItemIds: Selection;
+}
+declare const MetadataSidePanel: ({ currentCollection, onClose, selectedItemIds, metadataTemplate, }: MetadataSidePanelProps) => React.JSX.Element;
+export default MetadataSidePanel;

package/es/src/elements/content-explorer/__tests__/MetadataSidePanel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.d.ts

@@ -5,5 +5,6 @@ export declare const metadataView: Story;
 export declare const metadataViewV2: Story;
 export declare const metadataViewV2WithCustomActions: Story;
 export declare const metadataViewV2WithInitialFilterValues: Story;
+export declare const sidePanelOpenWithSingleItemSelected: Story;
 declare const meta: Meta<typeof ContentExplorer>;
 export default meta;

package/es/src/elements/content-explorer/utils.d.ts

@@ -0,0 +1,22 @@
+import type { MetadataTemplate } from '@box/metadata-editor';
+import type { Selection } from 'react-aria-components';
+import type { BoxItem, Collection } from '../../common/types/core';
+export declare function useSelectedItemText(currentCollection: Collection, selectedItemIds: Selection): string;
+export declare function getTemplateInstance(metadataTemplate: MetadataTemplate, selectedItems: BoxItem[]): {
+    canEdit: boolean;
+    displayName: string;
+    hidden: boolean;
+    id: string;
+    fields: {
+        displayName: string;
+        hidden: boolean;
+        id: string;
+        key: string;
+        options: import("@box/metadata-editor").MetadataTemplateFieldOption[];
+        type: import("@box/metadata-editor").MetadataTemplateFieldType;
+        value: any;
+    }[];
+    scope: string;
+    templateKey: string;
+    type: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.5.0-beta.3",
+    "version": "23.5.0-beta.4",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/elements/common/sub-header/SubHeader.tsx

@@ -28,6 +28,7 @@ export interface SubHeaderProps {
     onGridViewSliderChange?: (newSliderValue: number) => void;
     onItemClick: (id: string | null, triggerNavigationEvent: boolean | null) => void;
     onSortChange: (sortBy: string, sortDirection: string) => void;
+    onMetadataSidePanelToggle?: () => void;
     onUpload: () => void;
     onViewModeChange?: (viewMode: ViewMode) => void;
     portalElement?: HTMLElement;
@@ -53,6 +54,7 @@ const SubHeader = ({
     onCreate,
     onItemClick,
     onSortChange,
+    onMetadataSidePanelToggle,
     onUpload,
     onViewModeChange,
     portalElement,
@@ -109,9 +111,11 @@ const SubHeader = ({
                     onCreate={onCreate}
                     onGridViewSliderChange={onGridViewSliderChange}
                     onSortChange={onSortChange}
+                    onMetadataSidePanelToggle={onMetadataSidePanelToggle}
                     onUpload={onUpload}
                     onViewModeChange={onViewModeChange}
                     portalElement={portalElement}
+                    selectedItemIds={selectedItemIds}
                     view={view}
                     viewMode={viewMode}
                 />

package/src/elements/common/sub-header/SubHeaderLeftV2.tsx

@@ -1,8 +1,9 @@
-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 type { Selection } from 'react-aria-components';
+import { useSelectedItemText } from '../../content-explorer/utils';
 import type { Collection } from '../../../common/types/core';
 import messages from '../messages';
 
@@ -20,27 +21,7 @@ const SubHeaderLeftV2 = (props: SubHeaderLeftV2Props) => {
     const { currentCollection, onClearSelectedItemIds, rootName, selectedItemIds, title } = props;
     const { formatMessage } = useIntl();
 
-    // Generate selected item text based on selected keys
-    const selectedItemText: string = 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/src/elements/common/sub-header/SubHeaderRight.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Button } from '@box/blueprint-web';
 import { Pencil } from '@box/blueprint-web-assets/icons/Fill';
 import { useIntl } from 'react-intl';
+import type { Selection } from 'react-aria-components';
 import Sort from './Sort';
 import Add from './Add';
 import GridViewSlider from '../../../components/grid-view/GridViewSlider';
@@ -27,9 +28,11 @@ export interface SubHeaderRightProps {
     onCreate: () => void;
     onGridViewSliderChange: (newSliderValue: number) => void;
     onSortChange: (sortBy: SortBy, sortDirection: SortDirection) => void;
+    onMetadataSidePanelToggle?: () => void;
     onUpload: () => void;
     onViewModeChange?: (viewMode: ViewMode) => void;
     portalElement?: HTMLElement;
+    selectedItemIds?: Selection;
     view: View;
     viewMode: ViewMode;
 }
@@ -45,9 +48,11 @@ const SubHeaderRight = ({
     onCreate,
     onGridViewSliderChange,
     onSortChange,
+    onMetadataSidePanelToggle,
     onUpload,
     onViewModeChange,
     portalElement,
+    selectedItemIds,
     view,
     viewMode,
 }: SubHeaderRightProps) => {
@@ -60,6 +65,7 @@ const SubHeaderRight = ({
     const showSort: boolean = isFolder && hasItems;
     const showAdd: boolean = (!!canUpload || !!canCreateNewFolder) && isFolder;
     const isMetadataView: boolean = view === VIEW_METADATA;
+    const hasSelectedItems: boolean = !!(selectedItemIds && (selectedItemIds === 'all' || selectedItemIds.size > 0));
     return (
         <div className="be-sub-header-right">
             {!isMetadataView && (
@@ -90,8 +96,8 @@ const SubHeaderRight = ({
                 </>
             )}
 
-            {isMetadataView && isMetadataViewV2Feature && (
-                <Button icon={Pencil} size="large" variant="primary">
+            {isMetadataView && isMetadataViewV2Feature && hasSelectedItems && (
+                <Button icon={Pencil} size="large" variant="primary" onClick={onMetadataSidePanelToggle}>
                     {formatMessage(messages.metadata)}
                 </Button>
             )}

package/src/elements/content-explorer/ContentExplorer.scss

@@ -7,5 +7,17 @@
         .bcpr {
             z-index: 1; // Prevents overlay issues with list-item when a file is previewed
         }
+
+        .be-app-element {
+            flex-direction: row;
+            gap: var(--space-4);
+        }
+
+        .bce-ContentExplorer-main {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            min-width: 0;
+        }
     }
 }