box-ui-elements 24.0.0-beta.4 → 24.0.0-beta.5

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

@@ -1 +1 @@
-{"version":3,"file":"MetadataView-visual.stories.js","names":["http","HttpResponse","Download","SignMeOthers","Sign","expect","fn","userEvent","waitFor","within","screen","noop","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","mockRootFolder","scope","templateScope","templateKey","metadataScopeAndKey","metadataFieldNamePrefix","metadataQuery","from","ancestor_folder_id","order_by","field_key","fields","key","direction","map","field","fieldsToShow","canEdit","displayName","columns","textValue","id","type","allowsSorting","minWidth","maxWidth","defaultView","metadataView","args","metadataViewV2ElementProps","metadataViewProps","features","contentExplorer","metadataViewV2","metadataViewV2WithInlineCustomActionsElementProps","_objectSpread","tableProps","isSelectAllEnabled","itemActionMenuProps","actions","label","onClick","icon","subMenuTrigger","subMenuActions","metadataViewV2WithBulkItemActions","bulkItemActions","metadataViewV2SortsFromHeader","play","canvas","getByRole","name","toBeInTheDocument","firstRow","industryHeader","click","metadataViewV2WithCustomActions","ellipsesButton","initialFilterActionBarProps","initialFilterValues","value","metadataViewV2WithInitialFilterValues","actionBarProps","toHaveTextContent","contactRoleChip","fileTypeChip","sidePanelOpenWithSingleItemSelected","checkbox","metadataButton","metadataViewV2WithBulkItemActionMenuShowsItemActionMenu","findByRole","ellipsisButton","downloadAction","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 { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { Sign } from '@box/blueprint-web-assets/icons/Line';\nimport { expect, fn, userEvent, waitFor, within, screen } from 'storybook/test';\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    order_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        allowsSorting: 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        allowsSorting: 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\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\nconst metadataViewV2WithInlineCustomActionsElementProps = {\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\nconst metadataViewV2WithBulkItemActions = {\n    ...metadataViewV2ElementProps,\n    bulkItemActions: [\n        {\n            label: 'Download',\n            onClick: fn(),\n        },\n    ],\n    metadataViewProps: {\n        columns,\n        tableProps: {\n            isSelectAllEnabled: true,\n        },\n    },\n};\n\nexport const metadataViewV2: Story = {\n    args: metadataViewV2ElementProps,\n};\n\n// @TODO Assert that rows are actually sorted in a different order, once handleSortChange is implemented\nexport const metadataViewV2SortsFromHeader: Story = {\n    args: metadataViewV2ElementProps,\n    play: async ({ canvas }) => {\n        await waitFor(() => {\n            expect(canvas.getByRole('row', { name: /Industry/i })).toBeInTheDocument();\n        });\n\n        const firstRow = canvas.getByRole('row', { name: /Industry/i });\n        const industryHeader = within(firstRow).getByRole('columnheader', { name: 'Industry' });\n        userEvent.click(industryHeader);\n    },\n};\n\nexport const metadataViewV2WithCustomActions: Story = {\n    args: metadataViewV2WithInlineCustomActionsElementProps,\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    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\nexport const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu: Story = {\n    args: metadataViewV2WithBulkItemActions,\n    play: async ({ canvas }) => {\n        const firstRow = await canvas.findByRole('row', { name: /Child 2/i });\n        expect(firstRow).toBeInTheDocument();\n\n        const checkbox = within(firstRow).getByRole('checkbox');\n        await userEvent.click(checkbox);\n\n        const ellipsisButton = canvas.getByRole('button', { name: 'Bulk actions' });\n        expect(ellipsisButton).toBeInTheDocument();\n        await userEvent.click(ellipsisButton);\n\n        const downloadAction = screen.getByRole('menuitem', { name: 'Download' });\n        expect(downloadAction).toBeInTheDocument();\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\ntype Story = StoryObj<typeof meta>;\n\nexport default meta;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MetadataView-visual.stories.js","names":["http","HttpResponse","Download","SignMeOthers","Sign","expect","fn","userEvent","waitFor","within","screen","noop","orderBy","ContentExplorer","DEFAULT_HOSTNAME_API","mockMetadata","mockSchema","mockRootFolder","scope","templateScope","templateKey","metadataScopeAndKey","metadataFieldNamePrefix","metadataQuery","from","ancestor_folder_id","order_by","field_key","fields","key","direction","map","field","fieldsToShow","canEdit","displayName","columns","textValue","id","type","allowsSorting","minWidth","maxWidth","defaultView","metadataView","args","metadataViewV2ElementProps","metadataViewProps","features","contentExplorer","metadataViewV2","metadataViewV2WithInlineCustomActionsElementProps","_objectSpread","tableProps","isSelectAllEnabled","itemActionMenuProps","actions","label","onClick","icon","subMenuTrigger","subMenuActions","metadataViewV2WithBulkItemActions","bulkItemActions","metadataViewV2SortsFromHeader","play","canvas","industryHeader","findByRole","name","toBeInTheDocument","firstRow","click","metadataViewV2WithCustomActions","getByRole","ellipsesButton","initialFilterActionBarProps","initialFilterValues","value","metadataViewV2WithInitialFilterValues","actionBarProps","toHaveTextContent","contactRoleChip","fileTypeChip","sidePanelOpenWithSingleItemSelected","checkbox","metadataButton","metadataViewV2WithBulkItemActionMenuShowsItemActionMenu","ellipsisButton","downloadAction","sidePanelOpenWithMultipleItemsSelected","firstItem","secondItem","getAllByRole","secondCheckbox","meta","title","component","global","FEATURE_FLAGS","rootFolderId","FOLDER_ID","token","TOKEN","parameters","msw","handlers","post","request","body","clone","json","orderByDirection","orderByFieldKey","sortedMetadata","entries","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 { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';\nimport { Sign } from '@box/blueprint-web-assets/icons/Line';\nimport { expect, fn, userEvent, waitFor, within, screen } from 'storybook/test';\n\nimport noop from 'lodash/noop';\nimport orderBy from 'lodash/orderBy';\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    order_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        allowsSorting: 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        allowsSorting: 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\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\nconst metadataViewV2WithInlineCustomActionsElementProps = {\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\nconst metadataViewV2WithBulkItemActions = {\n    ...metadataViewV2ElementProps,\n    bulkItemActions: [\n        {\n            label: 'Download',\n            onClick: fn(),\n        },\n    ],\n    metadataViewProps: {\n        columns,\n        tableProps: {\n            isSelectAllEnabled: true,\n        },\n    },\n};\n\nexport const metadataViewV2: Story = {\n    args: metadataViewV2ElementProps,\n};\n\nexport const metadataViewV2SortsFromHeader: Story = {\n    args: metadataViewV2ElementProps,\n    play: async ({ canvas }) => {\n        const industryHeader = await canvas.findByRole('columnheader', { name: 'Industry' });\n        expect(industryHeader).toBeInTheDocument();\n\n        const firstRow = await canvas.findByRole('row', { name: /Child 2/i });\n        expect(firstRow).toBeInTheDocument();\n\n        await userEvent.click(industryHeader);\n    },\n};\n\nexport const metadataViewV2WithCustomActions: Story = {\n    args: metadataViewV2WithInlineCustomActionsElementProps,\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    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\nexport const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu: Story = {\n    args: metadataViewV2WithBulkItemActions,\n    play: async ({ canvas }) => {\n        const firstRow = await canvas.findByRole('row', { name: /Child 2/i });\n        expect(firstRow).toBeInTheDocument();\n\n        const checkbox = within(firstRow).getByRole('checkbox');\n        await userEvent.click(checkbox);\n\n        const ellipsisButton = canvas.getByRole('button', { name: 'Bulk actions' });\n        expect(ellipsisButton).toBeInTheDocument();\n        await userEvent.click(ellipsisButton);\n\n        const downloadAction = screen.getByRole('menuitem', { name: 'Download' });\n        expect(downloadAction).toBeInTheDocument();\n    },\n};\n\nexport const sidePanelOpenWithMultipleItemsSelected: 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 firstItem = canvas.getByRole('row', { name: /Child 2/i });\n        const checkbox = within(firstItem).getByRole('checkbox');\n        await userEvent.click(checkbox);\n\n        // Select the second row by clicking its checkbox\n        const secondItem = canvas.getAllByRole('row', { name: /Child 1/i })[0];\n        const secondCheckbox = within(secondItem).getByRole('checkbox');\n        await userEvent.click(secondCheckbox);\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                // Note that the Metadata API backend normally handles the sorting. The mocks below simulate the sorting for specific cases, but may not 100% accurately reflect the backend behavior.\n                http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, async ({ request }) => {\n                    const body = await request.clone().json();\n                    const orderByDirection = body.order_by[0].direction;\n                    const orderByFieldKey = body.order_by[0].field_key;\n\n                    // Hardcoded case for sorting by industry\n                    if (orderByFieldKey === `industry` && orderByDirection === 'ASC') {\n                        const sortedMetadata = orderBy(\n                            mockMetadata.entries,\n                            'metadata.enterprise_0.templateName.industry',\n                            'asc',\n                        );\n                        return HttpResponse.json({ ...mockMetadata, entries: sortedMetadata });\n                    }\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\ntype Story = StoryObj<typeof meta>;\n\nexport default meta;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,18 @@
-import { useMemo } from 'react';
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
+import isNil from 'lodash/isNil';
+import xor from 'lodash/xor';
+import { MULTI_VALUE_DEFAULT_OPTION, MULTI_VALUE_DEFAULT_VALUE } from '@box/metadata-editor';
 import messages from '../common/messages';
 
+// Specific type for metadata field value in the item
+// Note: Item doesn't have field value in metadata object if that field is not set, so the value will be undefined in this case
+
 // Get selected item text
 export function useSelectedItemText(currentCollection, selectedItemIds) {
   const {
@@ -25,8 +36,78 @@ export function useSelectedItemText(currentCollection, selectedItemIds) {
   }, [currentCollection.items, formatMessage, selectedItemIds]);
 }
 
+// Check if the field value is empty.
+// Note: 0 doesn't represent empty here because of float type field
+export function isEmptyValue(value) {
+  if (isNil(value)) {
+    return true;
+  }
+
+  // date, string, enum
+  if (value === '') {
+    return true;
+  }
+
+  // multiSelect
+  if (Array.isArray(value) && value.length === 0) {
+    return true;
+  }
+
+  // float
+  if (Number.isNaN(value)) {
+    return true;
+  }
+  return false;
+}
+
+// Check if the field values are equal based on the field types
+export function areFieldValuesEqual(value1, value2) {
+  if (isEmptyValue(value1) && isEmptyValue(value2)) {
+    return true;
+  }
+
+  // Handle multiSelect arrays comparison
+  if (Array.isArray(value1) && Array.isArray(value2)) {
+    return xor(value1, value2).length === 0;
+  }
+  return value1 === value2;
+}
+
+// Return default form value by field type
+function getDefaultValueByFieldType(fieldType) {
+  if (fieldType === 'date' || fieldType === 'enum' || fieldType === 'float' || fieldType === 'string') {
+    return '';
+  }
+  if (fieldType === 'multiSelect') {
+    return [];
+  }
+  return undefined;
+}
+
+// Set the field value in Metadata Form based on the field type
+function getFieldValue(fieldType, fieldValue) {
+  if (isNil(fieldValue)) {
+    return getDefaultValueByFieldType(fieldType);
+  }
+  return fieldValue;
+}
+
+// Check if the field value in Metadata Form is multi-values such as "Multiple values"
+export function isMultiValuesField(fieldType, fieldValue) {
+  if (fieldType === 'multiSelect') {
+    return Array.isArray(fieldValue) && fieldValue.length === 1 && fieldValue[0] === MULTI_VALUE_DEFAULT_VALUE;
+  }
+  if (fieldType === 'enum') {
+    return fieldValue === MULTI_VALUE_DEFAULT_VALUE;
+  }
+  return false;
+}
+
 // Get template instance based on metadata template and selected items
-export function getTemplateInstance(metadataTemplate, selectedItems) {
+export function useTemplateInstance(metadataTemplate, selectedItems, isEditing) {
+  const {
+    formatMessage
+  } = useIntl();
   const {
     displayName,
     fields,
@@ -43,16 +124,63 @@ export function getTemplateInstance(metadataTemplate, selectedItems) {
     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]
-  }));
+  }) => {
+    const defaultItemField = {
+      displayName: fieldDisplayName,
+      hidden: fieldHidden,
+      id: fieldId,
+      key,
+      options,
+      type: fieldType,
+      value: getFieldValue(fieldType, undefined)
+    };
+    const firstSelectedItem = selectedItems[0];
+    const firstSelectedItemFieldValue = firstSelectedItem.metadata[scope][templateKey][key];
+
+    // Case 1: Single selected item
+    if (selectedItems.length <= 1) {
+      return _objectSpread(_objectSpread({}, defaultItemField), {}, {
+        value: firstSelectedItemFieldValue
+      });
+    }
+
+    // Case 2.1: Multiple selected items, but all have the same initial value
+    const allItemsHaveSameInitialValue = selectedItems.every(selectedItem => areFieldValuesEqual(selectedItem.metadata[scope][templateKey][key], firstSelectedItemFieldValue));
+    if (allItemsHaveSameInitialValue) {
+      return _objectSpread(_objectSpread({}, defaultItemField), {}, {
+        value: getFieldValue(fieldType, firstSelectedItemFieldValue)
+      });
+    }
+
+    // Case 2.2: Multiple selected items, but some have different initial values
+    // Case 2.2.1: Edit Mode
+    if (isEditing) {
+      let fieldValue = getFieldValue(fieldType, undefined);
+      // Add MultiValue Option if the field is multiSelect or enum
+      if (fieldType === 'multiSelect' || fieldType === 'enum') {
+        fieldValue = fieldType === 'enum' ? MULTI_VALUE_DEFAULT_VALUE : [MULTI_VALUE_DEFAULT_VALUE];
+        const multiValueOption = options?.find(option => option.key === MULTI_VALUE_DEFAULT_VALUE);
+        if (!multiValueOption) {
+          options?.push(MULTI_VALUE_DEFAULT_OPTION);
+        }
+      }
+      return _objectSpread(_objectSpread({}, defaultItemField), {}, {
+        value: fieldValue
+      });
+    }
+
+    /**
+     * Case: 2.2.2 View Mode
+     *
+     * We want to show "Multiple values" label for multiple dates across files selection.
+     * We use fragment here to bypass check in shared feature.
+     * This feature tries to parse string as date if the string is passed as value.
+     */
+    const multipleValuesText = formatMessage(messages.multipleValues);
+    return _objectSpread(_objectSpread({}, defaultItemField), {}, {
+      value: /*#__PURE__*/React.createElement(React.Fragment, null, multipleValuesText)
+    });
+  });
   return {
     canEdit: true,
     displayName,

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

@@ -1 +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":[]}
+{"version":3,"file":"utils.js","names":["React","useMemo","useIntl","isNil","xor","MULTI_VALUE_DEFAULT_OPTION","MULTI_VALUE_DEFAULT_VALUE","messages","useSelectedItemText","currentCollection","selectedItemIds","formatMessage","selectedCount","items","length","size","selectedKey","id","values","next","value","selectedItem","find","item","name","numFilesSelected","numSelected","isEmptyValue","Array","isArray","Number","isNaN","areFieldValuesEqual","value1","value2","getDefaultValueByFieldType","fieldType","undefined","getFieldValue","fieldValue","isMultiValuesField","useTemplateInstance","metadataTemplate","selectedItems","isEditing","displayName","fields","hidden","scope","templateKey","type","selectedItemsFields","map","fieldDisplayName","fieldHidden","fieldId","key","options","defaultItemField","firstSelectedItem","firstSelectedItemFieldValue","metadata","_objectSpread","allItemsHaveSameInitialValue","every","multiValueOption","option","push","multipleValuesText","multipleValues","createElement","Fragment","canEdit"],"sources":["../../../src/elements/content-explorer/utils.ts"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\nimport isNil from 'lodash/isNil';\nimport xor from 'lodash/xor';\n\nimport {\n    MULTI_VALUE_DEFAULT_OPTION,\n    MULTI_VALUE_DEFAULT_VALUE,\n    type MetadataTemplate,\n    type MetadataFormFieldValue,\n} from '@box/metadata-editor';\nimport type { MetadataFieldType } from '@box/metadata-view';\nimport type { Selection } from 'react-aria-components';\nimport type { BoxItem, Collection } from '../../common/types/core';\n\nimport messages from '../common/messages';\n\n// Specific type for metadata field value in the item\n// Note: Item doesn't have field value in metadata object if that field is not set, so the value will be undefined in this case\ntype ItemMetadataFieldValue = string | number | Array<string> | null | undefined;\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// Check if the field value is empty.\n// Note: 0 doesn't represent empty here because of float type field\nexport function isEmptyValue(value: ItemMetadataFieldValue) {\n    if (isNil(value)) {\n        return true;\n    }\n\n    // date, string, enum\n    if (value === '') {\n        return true;\n    }\n\n    // multiSelect\n    if (Array.isArray(value) && value.length === 0) {\n        return true;\n    }\n\n    // float\n    if (Number.isNaN(value)) {\n        return true;\n    }\n\n    return false;\n}\n\n// Check if the field values are equal based on the field types\nexport function areFieldValuesEqual(value1: ItemMetadataFieldValue, value2: ItemMetadataFieldValue) {\n    if (isEmptyValue(value1) && isEmptyValue(value2)) {\n        return true;\n    }\n\n    // Handle multiSelect arrays comparison\n    if (Array.isArray(value1) && Array.isArray(value2)) {\n        return xor(value1, value2).length === 0;\n    }\n\n    return value1 === value2;\n}\n\n// Return default form value by field type\nfunction getDefaultValueByFieldType(fieldType: MetadataFieldType) {\n    if (fieldType === 'date' || fieldType === 'enum' || fieldType === 'float' || fieldType === 'string') {\n        return '';\n    }\n    if (fieldType === 'multiSelect') {\n        return [];\n    }\n    return undefined;\n}\n\n// Set the field value in Metadata Form based on the field type\nfunction getFieldValue(fieldType: MetadataFieldType, fieldValue: ItemMetadataFieldValue) {\n    if (isNil(fieldValue)) {\n        return getDefaultValueByFieldType(fieldType);\n    }\n    return fieldValue;\n}\n\n// Check if the field value in Metadata Form is multi-values such as \"Multiple values\"\nexport function isMultiValuesField(fieldType: MetadataFieldType, fieldValue: MetadataFormFieldValue) {\n    if (fieldType === 'multiSelect') {\n        return Array.isArray(fieldValue) && fieldValue.length === 1 && fieldValue[0] === MULTI_VALUE_DEFAULT_VALUE;\n    }\n    if (fieldType === 'enum') {\n        return fieldValue === MULTI_VALUE_DEFAULT_VALUE;\n    }\n    return false;\n}\n\n// Get template instance based on metadata template and selected items\nexport function useTemplateInstance(metadataTemplate: MetadataTemplate, selectedItems: BoxItem[], isEditing: boolean) {\n    const { formatMessage } = useIntl();\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            const defaultItemField = {\n                displayName: fieldDisplayName,\n                hidden: fieldHidden,\n                id: fieldId,\n                key,\n                options,\n                type: fieldType,\n                value: getFieldValue(fieldType as MetadataFieldType, undefined),\n            };\n\n            const firstSelectedItem = selectedItems[0];\n            const firstSelectedItemFieldValue = firstSelectedItem.metadata[scope][templateKey][key];\n\n            // Case 1: Single selected item\n            if (selectedItems.length <= 1) {\n                return {\n                    ...defaultItemField,\n                    value: firstSelectedItemFieldValue,\n                };\n            }\n\n            // Case 2.1: Multiple selected items, but all have the same initial value\n            const allItemsHaveSameInitialValue = selectedItems.every(selectedItem =>\n                areFieldValuesEqual(selectedItem.metadata[scope][templateKey][key], firstSelectedItemFieldValue),\n            );\n\n            if (allItemsHaveSameInitialValue) {\n                return {\n                    ...defaultItemField,\n                    value: getFieldValue(fieldType as MetadataFieldType, firstSelectedItemFieldValue),\n                };\n            }\n\n            // Case 2.2: Multiple selected items, but some have different initial values\n            // Case 2.2.1: Edit Mode\n            if (isEditing) {\n                let fieldValue = getFieldValue(fieldType as MetadataFieldType, undefined);\n                // Add MultiValue Option if the field is multiSelect or enum\n                if (fieldType === 'multiSelect' || fieldType === 'enum') {\n                    fieldValue = fieldType === 'enum' ? MULTI_VALUE_DEFAULT_VALUE : [MULTI_VALUE_DEFAULT_VALUE];\n                    const multiValueOption = options?.find(option => option.key === MULTI_VALUE_DEFAULT_VALUE);\n                    if (!multiValueOption) {\n                        options?.push(MULTI_VALUE_DEFAULT_OPTION);\n                    }\n                }\n                return {\n                    ...defaultItemField,\n                    value: fieldValue,\n                };\n            }\n\n            /**\n             * Case: 2.2.2 View Mode\n             *\n             * We want to show \"Multiple values\" label for multiple dates across files selection.\n             * We use fragment here to bypass check in shared feature.\n             * This feature tries to parse string as date if the string is passed as value.\n             */\n            const multipleValuesText = formatMessage(messages.multipleValues);\n            return {\n                ...defaultItemField,\n                value: React.createElement(React.Fragment, null, multipleValuesText),\n            };\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":"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","ignoreList":[]}

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

@@ -2,7 +2,8 @@
 import 'regenerator-runtime/runtime';
 import React, { Component } from 'react';
 import { AxiosRequestConfig, AxiosResponse } from 'axios';
-import type { Selection } from 'react-aria-components';
+import type { Key, Selection } from 'react-aria-components';
+import type { MetadataTemplateField } from '@box/metadata-editor';
 import API from '../../api';
 import MetadataQueryAPIHelper from '../../features/metadata-based-view/MetadataQueryAPIHelper';
 import LocalStore from '../../utils/LocalStore';
@@ -68,7 +69,7 @@ export interface ContentExplorerProps {
     rootFolderId?: string;
     sharedLink?: string;
     sharedLinkPassword?: string;
-    sortBy?: SortBy;
+    sortBy?: SortBy | Key;
     sortDirection?: SortDirection;
     staticHost?: string;
     staticPath?: string;
@@ -203,6 +204,13 @@ declare class ContentExplorer extends Component<ContentExplorerProps, State> {
      * @return {void}
      */
     showMetadataQueryResults(): void;
+    /**
+     * Update selected items' metadata instances based on original and new field values in the metadata instance form
+     *
+     * @private
+     * @return {void}
+     */
+    updateMetadataV2: (items: BoxItem[], operations: JSONPatchOperations, templateOldFields: MetadataTemplateField[], templateNewFields: MetadataTemplateField[], successCallback: () => void, errorCallback: ErrorCallback) => Promise<void>;
     /**
      * Resets the collection so that the loading bar starts showing
      *
@@ -333,7 +341,7 @@ declare class ContentExplorer extends Component<ContentExplorerProps, State> {
      * @param {string} sortDirection - sort direction
      * @return {void}
      */
-    sort: (sortBy: SortBy, sortDirection: SortDirection) => void;
+    sort: (sortBy: SortBy | Key, sortDirection: SortDirection) => void;
     /**
      * Sets state with currentCollection updated to have `items.selected` properties
      * set according to the given selected param. Also updates the selected item in the

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

@@ -1,8 +1,9 @@
+import type { MetadataTemplateField } from '@box/metadata-editor';
 import API from '../../api';
 import type { MetadataQuery as MetadataQueryType, MetadataQueryResponseData } from '../../common/types/metadataQueries';
 import type { MetadataTemplateSchemaResponse, MetadataTemplate, MetadataFieldValue } from '../../common/types/metadata';
 import type { ElementsXhrError } from '../../common/types/api';
-import type { Collection } from '../../common/types/core';
+import type { Collection, BoxItem } from '../../common/types/core';
 type SuccessCallback = (metadataQueryCollection: Collection, metadataTemplate: MetadataTemplate) => void;
 type ErrorCallback = (e: ElementsXhrError) => void;
 export default class MetadataQueryAPIHelper {
@@ -18,9 +19,18 @@ export default class MetadataQueryAPIHelper {
     flattenMetadata: (metadata?: MetadataType) => MetadataType;
     getDataWithTypes: (templateSchemaResponse?: MetadataTemplateSchemaResponse) => Collection;
     getTemplateSchemaInfo: (data: MetadataQueryResponseData) => Promise<MetadataTemplateSchemaResponse | void>;
+    /**
+     * Generate operations for all fields update in the metadata sidepanel
+     *
+     * @private
+     * @return {JSONPatchOperations}
+     */
+    generateOperations: (item: BoxItem, templateOldFields: MetadataTemplateField[], templateNewFields: MetadataTemplateField[]) => JSONPatchOperations;
     queryMetadata: () => Promise<MetadataQueryResponseData>;
     fetchMetadataQueryResults: (metadataQuery: MetadataQueryType, successCallback: SuccessCallback, errorCallback: ErrorCallback) => Promise<void>;
     updateMetadata: (file: BoxItem, field: string, oldValue: MetadataFieldValue | null, newValue: MetadataFieldValue | null, successCallback: () => void, errorCallback: ErrorCallback) => Promise<void>;
+    updateMetadataWithOperations: (item: BoxItem, operations: JSONPatchOperations, successCallback: () => void, errorCallback: ErrorCallback) => Promise<void>;
+    bulkUpdateMetadata: (items: BoxItem[], templateOldFields: MetadataTemplateField[], templateNewFields: MetadataTemplateField[], successCallback: () => void, errorCallback: ErrorCallback) => Promise<void>;
     /**
      * Verify that the metadata query has required fields and update it if necessary
      * For a file item, default fields included in the response are "type", "id", "etag"

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

@@ -1,13 +1,16 @@
 import React from 'react';
+import { JSONPatchOperations, type MetadataTemplateField } from '@box/metadata-editor';
 import type { Selection } from 'react-aria-components';
-import type { Collection } from '../../common/types/core';
+import type { BoxItem, Collection } from '../../common/types/core';
 import type { MetadataTemplate } from '../../common/types/metadata';
 import './MetadataSidePanel.scss';
 export interface MetadataSidePanelProps {
     currentCollection: Collection;
-    onClose: () => void;
     metadataTemplate: MetadataTemplate;
+    onClose: () => void;
+    onUpdate: (items: BoxItem[], operations: JSONPatchOperations, templateOldFields: MetadataTemplateField[], templateNewFields: MetadataTemplateField[], successCallback: () => void, errorCallback: ErrorCallback) => Promise<void>;
+    refreshCollection: () => void;
     selectedItemIds: Selection;
 }
-declare const MetadataSidePanel: ({ currentCollection, onClose, selectedItemIds, metadataTemplate, }: MetadataSidePanelProps) => React.JSX.Element;
+declare const MetadataSidePanel: ({ currentCollection, metadataTemplate, onClose, onUpdate, refreshCollection, selectedItemIds, }: MetadataSidePanelProps) => React.JSX.Element;
 export default MetadataSidePanel;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { EnumType, MetadataFormFieldValue } from '@box/metadata-filter';
 import { type MetadataViewProps } from '@box/metadata-view';
+import { type Key } from '@react-types/shared';
 import type { Collection } from '../../common/types/core';
 import type { MetadataTemplate } from '../../common/types/metadata';
 type EnumToStringArray<T> = T extends EnumType ? string[] : T;
@@ -16,6 +17,7 @@ export interface MetadataViewContainerProps extends Omit<MetadataViewProps, 'ite
     actionBarProps?: ActionBarProps;
     currentCollection: Collection;
     metadataTemplate: MetadataTemplate;
+    onSortChange?: (sortBy: Key, sortDirection: string) => void;
 }
-declare const MetadataViewContainer: ({ actionBarProps, columns, currentCollection, metadataTemplate, ...rest }: MetadataViewContainerProps) => React.JSX.Element;
+declare const MetadataViewContainer: ({ actionBarProps, columns, currentCollection, metadataTemplate, onSortChange: onSortChangeInternal, ...rest }: MetadataViewContainerProps) => React.JSX.Element;
 export default MetadataViewContainer;

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

@@ -7,6 +7,7 @@ export declare const metadataViewV2WithCustomActions: Story;
 export declare const metadataViewV2WithInitialFilterValues: Story;
 export declare const sidePanelOpenWithSingleItemSelected: Story;
 export declare const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu: Story;
+export declare const sidePanelOpenWithMultipleItemsSelected: Story;
 declare const meta: Meta<typeof ContentExplorer>;
 type Story = StoryObj<typeof meta>;
 export default meta;

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

@@ -1,22 +1,28 @@
-import type { MetadataTemplate } from '@box/metadata-editor';
+import { type MetadataTemplate, type MetadataFormFieldValue } from '@box/metadata-editor';
+import type { MetadataFieldType } from '@box/metadata-view';
 import type { Selection } from 'react-aria-components';
 import type { BoxItem, Collection } from '../../common/types/core';
+type ItemMetadataFieldValue = string | number | Array<string> | null | undefined;
 export declare function useSelectedItemText(currentCollection: Collection, selectedItemIds: Selection): string;
-export declare function getTemplateInstance(metadataTemplate: MetadataTemplate, selectedItems: BoxItem[]): {
+export declare function isEmptyValue(value: ItemMetadataFieldValue): boolean;
+export declare function areFieldValuesEqual(value1: ItemMetadataFieldValue, value2: ItemMetadataFieldValue): boolean;
+export declare function isMultiValuesField(fieldType: MetadataFieldType, fieldValue: MetadataFormFieldValue): boolean;
+export declare function useTemplateInstance(metadataTemplate: MetadataTemplate, selectedItems: BoxItem[], isEditing: boolean): {
     canEdit: boolean;
     displayName: string;
     hidden: boolean;
     id: string;
     fields: {
+        value: any;
         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;
 };
+export {};

package/i18n/bn-IN.js

@@ -291,9 +291,12 @@ export default {
   "be.messageCenter.previewError": "দুঃখিত, এই ইমেজটি দেখাতে আমরা সমস্যার সম্মুখীন হচ্ছি।",
   "be.messageCenter.product": "পণ্য",
   "be.messageCenter.title": "নতুন কী",
+  "be.metadataUpdateErrorNotification": "Unable to save changes. Please try again.",
+  "be.metadataUpdateSuccessNotification": " {numSelected, plural, =1 {1 document updated} other {# documents updated} } ",
   "be.modifiedDate": "সংশোধিত {date}",
   "be.modifiedDateBy": "{name}-এর দ্বারা {date}-এ সংশোধিত",
   "be.moreOptions": "আরও বিকল্প",
+  "be.multipleValues": "Multiple Values",
   "be.nameASC": "নাম: A → Z",
   "be.nameDESC": "নাম: Z → A",
   "be.nameDate": "{name}-এর দ্বারা {date}",
@@ -417,6 +420,7 @@ export default {
   "be.skillUnknownError": "এই দক্ষতাটি চালনা করার সময় বা এর ডেটা প্রাপ্তির সময় কিছু ত্রুটি ঘটেছে।",
   "be.sort": "বাছাই করুন",
   "be.statusSkill": "স্থিতি",
+  "be.success": "Success",
   "be.today": "আজ",
   "be.topicsSkill": "টপিকগুলি",
   "be.transcriptEdit": "সম্পাদনা করতে যে কোনও নির্বাচন ক্লিক করুন।",

package/i18n/bn-IN.properties

@@ -966,6 +966,10 @@ boxui.categorySelector.label.more = আরও
 boxui.checkboxTooltip.iconInfoText = তথ্য
 # Button to add classification on an item
 boxui.classification.add = যোগ করুন
+# Title of the card that shows the reason why the AI classification was applied when no date is available.
+boxui.classification.appliedByBoxAi = Box AI
+# Title of the card that shows the reason why the AI classification was applied on a specific date.
+boxui.classification.appliedByBoxAiOnDate = Box AI on {modifiedAt}
 # Header for classification section in sidebar
 boxui.classification.classification = শ্রেণিবিভাজন
 # Classification label color name as dark blue

package/i18n/da-DK.js

@@ -291,9 +291,12 @@ export default {
   "be.messageCenter.previewError": "Vi har desværre problemer med at vise dette billede.",
   "be.messageCenter.product": "Produkt",
   "be.messageCenter.title": "Nyheder",
+  "be.metadataUpdateErrorNotification": "Unable to save changes. Please try again.",
+  "be.metadataUpdateSuccessNotification": " {numSelected, plural, =1 {1 document updated} other {# documents updated} } ",
   "be.modifiedDate": "Ændret {date}",
   "be.modifiedDateBy": "Ændret {date} af {name}",
   "be.moreOptions": "Flere muligheder",
+  "be.multipleValues": "Multiple Values",
   "be.nameASC": "Navn: A → Å",
   "be.nameDESC": "Navn: Å → A",
   "be.nameDate": "{date} af {name}",
@@ -417,6 +420,7 @@ export default {
   "be.skillUnknownError": "Der opstod et problem under kørsel af denne færdighed eller i forbindelse med hentning af tilhørende data.",
   "be.sort": "Sortér",
   "be.statusSkill": "Status",
+  "be.success": "Success",
   "be.today": "i dag",
   "be.topicsSkill": "Emner",
   "be.transcriptEdit": "Klik på et afsnit for at redigere.",

package/i18n/da-DK.properties

@@ -966,6 +966,10 @@ boxui.categorySelector.label.more = Mere
 boxui.checkboxTooltip.iconInfoText = Oplysninger
 # Button to add classification on an item
 boxui.classification.add = Tilføj
+# Title of the card that shows the reason why the AI classification was applied when no date is available.
+boxui.classification.appliedByBoxAi = Box AI
+# Title of the card that shows the reason why the AI classification was applied on a specific date.
+boxui.classification.appliedByBoxAiOnDate = Box AI on {modifiedAt}
 # Header for classification section in sidebar
 boxui.classification.classification = Klassificering
 # Classification label color name as dark blue

package/i18n/de-DE.js

@@ -291,9 +291,12 @@ export default {
   "be.messageCenter.previewError": "Leider kann dieses Bild derzeit nicht angezeigt werden.",
   "be.messageCenter.product": "Produkt",
   "be.messageCenter.title": "Neuerungen",
+  "be.metadataUpdateErrorNotification": "Unable to save changes. Please try again.",
+  "be.metadataUpdateSuccessNotification": " {numSelected, plural, =1 {1 document updated} other {# documents updated} } ",
   "be.modifiedDate": "Geändert am {date}",
   "be.modifiedDateBy": "Geändert am {date} von {name}",
   "be.moreOptions": "Weitere Optionen",
+  "be.multipleValues": "Multiple Values",
   "be.nameASC": "Name: A → Z",
   "be.nameDESC": "Name: Z → A",
   "be.nameDate": "Am {date} von {name}",
@@ -417,6 +420,7 @@ export default {
   "be.skillUnknownError": "Beim Ausführen dieses Skills oder Abrufen seiner Daten ist ein Fehler aufgetreten.",
   "be.sort": "Sortieren",
   "be.statusSkill": "Status",
+  "be.success": "Success",
   "be.today": "heute",
   "be.topicsSkill": "Themen",
   "be.transcriptEdit": "Klicken Sie auf einen beliebigen Abschnitt, um ihn zu bearbeiten.",
@@ -483,7 +487,7 @@ export default {
   "boxui.categorySelector.label.more": "Mehr",
   "boxui.checkboxTooltip.iconInfoText": "Informationen",
   "boxui.classification.add": "Hinzufügen",
-  "boxui.classification.appliedByBoxAi": "Box AI",
+  "boxui.classification.appliedByBoxAi": "Box-KI",
   "boxui.classification.appliedByBoxAiOnDate": "Box AI on {modifiedAt}",
   "boxui.classification.classification": "Klassifizierung",
   "boxui.classification.classificationDarkBlue": "Dunkelblau",

package/i18n/de-DE.properties

@@ -966,6 +966,10 @@ boxui.categorySelector.label.more = Mehr
 boxui.checkboxTooltip.iconInfoText = Informationen
 # Button to add classification on an item
 boxui.classification.add = Hinzufügen
+# Title of the card that shows the reason why the AI classification was applied when no date is available.
+boxui.classification.appliedByBoxAi = Box-KI
+# Title of the card that shows the reason why the AI classification was applied on a specific date.
+boxui.classification.appliedByBoxAiOnDate = Box AI on {modifiedAt}
 # Header for classification section in sidebar
 boxui.classification.classification = Klassifizierung
 # Classification label color name as dark blue

package/i18n/en-AU.js

@@ -291,9 +291,12 @@ export default {
   "be.messageCenter.previewError": "Sorry, we're having trouble showing this image.",
   "be.messageCenter.product": "Product",
   "be.messageCenter.title": "What's New",
+  "be.metadataUpdateErrorNotification": "Unable to save changes. Please try again.",
+  "be.metadataUpdateSuccessNotification": " {numSelected, plural, =1 {1 document updated} other {# documents updated} } ",
   "be.modifiedDate": "Modified {date}",
   "be.modifiedDateBy": "Modified {date} by {name}",
   "be.moreOptions": "More Options",
+  "be.multipleValues": "Multiple Values",
   "be.nameASC": "Name: A → Z",
   "be.nameDESC": "Name: Z → A",
   "be.nameDate": "{date} by {name}",
@@ -417,6 +420,7 @@ export default {
   "be.skillUnknownError": "Something went wrong while running this skill or fetching its data.",
   "be.sort": "Sort",
   "be.statusSkill": "Status",
+  "be.success": "Success",
   "be.today": "today",
   "be.topicsSkill": "Topics",
   "be.transcriptEdit": "Click any section to edit.",

package/i18n/en-AU.properties

@@ -966,6 +966,10 @@ boxui.categorySelector.label.more = More
 boxui.checkboxTooltip.iconInfoText = Info
 # Button to add classification on an item
 boxui.classification.add = Add
+# Title of the card that shows the reason why the AI classification was applied when no date is available.
+boxui.classification.appliedByBoxAi = Box AI
+# Title of the card that shows the reason why the AI classification was applied on a specific date.
+boxui.classification.appliedByBoxAiOnDate = Box AI on {modifiedAt}
 # Header for classification section in sidebar
 boxui.classification.classification = Classification
 # Classification label color name as dark blue