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

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

@@ -8,6 +8,7 @@ import { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/ind
 import { Sign } from '@box/blueprint-web-assets/icons/Line';
 import { expect, fn, userEvent, waitFor, within, screen } from 'storybook/test';
 import noop from 'lodash/noop';
+import orderBy from 'lodash/orderBy';
 import ContentExplorer from '../../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 import { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';
@@ -131,25 +132,20 @@ const metadataViewV2WithBulkItemActions = _objectSpread(_objectSpread({}, metada
 export const metadataViewV2 = {
   args: metadataViewV2ElementProps
 };
-
-// @TODO Assert that rows are actually sorted in a different order, once handleSortChange is implemented
 export const metadataViewV2SortsFromHeader = {
   args: metadataViewV2ElementProps,
   play: async ({
     canvas
   }) => {
-    await waitFor(() => {
-      expect(canvas.getByRole('row', {
-        name: /Industry/i
-      })).toBeInTheDocument();
-    });
-    const firstRow = canvas.getByRole('row', {
-      name: /Industry/i
-    });
-    const industryHeader = within(firstRow).getByRole('columnheader', {
+    const industryHeader = await canvas.findByRole('columnheader', {
       name: 'Industry'
     });
-    userEvent.click(industryHeader);
+    expect(industryHeader).toBeInTheDocument();
+    const firstRow = await canvas.findByRole('row', {
+      name: /Child 2/i
+    });
+    expect(firstRow).toBeInTheDocument();
+    await userEvent.click(industryHeader);
   }
 };
 export const metadataViewV2WithCustomActions = {
@@ -263,6 +259,43 @@ export const metadataViewV2WithBulkItemActionMenuShowsItemActionMenu = {
     expect(downloadAction).toBeInTheDocument();
   }
 };
+export const sidePanelOpenWithMultipleItemsSelected = {
+  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 firstItem = canvas.getByRole('row', {
+      name: /Child 2/i
+    });
+    const checkbox = within(firstItem).getByRole('checkbox');
+    await userEvent.click(checkbox);
+
+    // Select the second row by clicking its checkbox
+    const secondItem = canvas.getAllByRole('row', {
+      name: /Child 1/i
+    })[0];
+    const secondCheckbox = within(secondItem).getByRole('checkbox');
+    await userEvent.click(secondCheckbox);
+    const metadataButton = canvas.getByRole('button', {
+      name: 'Metadata'
+    });
+    await userEvent.click(metadataButton);
+  }
+};
 const meta = {
   title: 'Elements/ContentExplorer/tests/MetadataView/visual',
   component: ContentExplorer,
@@ -273,7 +306,22 @@ const meta = {
   },
   parameters: {
     msw: {
-      handlers: [http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, () => {
+      handlers: [
+      // 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.
+      http.post(`${DEFAULT_HOSTNAME_API}/2.0/metadata_queries/execute_read`, async ({
+        request
+      }) => {
+        const body = await request.clone().json();
+        const orderByDirection = body.order_by[0].direction;
+        const orderByFieldKey = body.order_by[0].field_key;
+
+        // Hardcoded case for sorting by industry
+        if (orderByFieldKey === `industry` && orderByDirection === 'ASC') {
+          const sortedMetadata = orderBy(mockMetadata.entries, 'metadata.enterprise_0.templateName.industry', 'asc');
+          return HttpResponse.json(_objectSpread(_objectSpread({}, mockMetadata), {}, {
+            entries: sortedMetadata
+          }));
+        }
         return HttpResponse.json(mockMetadata);
       }), http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {
         return HttpResponse.json(mockSchema);

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":";;;;;AACA,SAASA,IAAI,EAAEC,YAAY,QAAQ,KAAK;AACxC,SAASC,QAAQ,EAAEC,YAAY,QAAQ,4CAA4C;AACnF,SAASC,IAAI,QAAQ,sCAAsC;AAC3D,SAASC,MAAM,EAAEC,EAAE,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,MAAM,QAAQ,gBAAgB;AAE/E,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,OAAO,MAAM,gBAAgB;AAEpC,OAAOC,eAAe,MAAM,uBAAuB;AACnD,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,YAAY,EAAEC,UAAU,QAAQ,wCAAwC;AACjF,SAASC,cAAc,QAAQ,0CAA0C;;AAEzE;AACA,MAAM;EAAEC,KAAK,EAAEC,aAAa;EAAEC;AAAY,CAAC,GAAGJ,UAAU;AAExD,MAAMK,mBAAmB,GAAG,GAAGF,aAAa,IAAIC,WAAW,EAAE;AAC7D,MAAME,uBAAuB,GAAG,YAAYD,mBAAmB,EAAE;;AAEjE;AACA;AACA,MAAME,aAAa,GAAG;EAClBC,IAAI,EAAEH,mBAAmB;EACzBI,kBAAkB,EAAE,GAAG;EACvBC,QAAQ,EAAE,CACN;IACIC,SAAS,EAAE,GAAGL,uBAAuB,IAAIN,UAAU,CAACY,MAAM,CAAC,CAAC,CAAC,CAACC,GAAG,EAAE;IAAE;IACrEC,SAAS,EAAE;EACf,CAAC,CACJ;EACDF,MAAM,EAAE;EACJ;EACA,GAAGZ,UAAU,CAACY,MAAM,CAACG,GAAG,CAACC,KAAK,IAAI,GAAGV,uBAAuB,IAAIU,KAAK,CAACH,GAAG,EAAE,CAAC,EAC5E,MAAM;AAEd,CAAC;;AAED;AACA,MAAMI,YAAY,GAAG,CACjB;EAAEJ,GAAG,EAAE,GAAGP,uBAAuB,OAAO;EAAEY,OAAO,EAAE,KAAK;EAAEC,WAAW,EAAE;AAAQ,CAAC,EAChF;EAAEN,GAAG,EAAE,GAAGP,uBAAuB,WAAW;EAAEY,OAAO,EAAE;AAAK,CAAC,EAC7D;EAAEL,GAAG,EAAE,GAAGP,uBAAuB,oBAAoB;EAAEY,OAAO,EAAE;AAAK,CAAC,EACtE;EAAEL,GAAG,EAAE,GAAGP,uBAAuB,OAAO;EAAEY,OAAO,EAAE;AAAK,CAAC,CAC5D;;AAED;AACA,MAAME,OAAO,GAAG,CACZ;EACI;EACAC,SAAS,EAAE,MAAM;EACjBC,EAAE,EAAE,MAAM;EACVC,IAAI,EAAE,QAAQ;EACdC,aAAa,EAAE,IAAI;EACnBC,QAAQ,EAAE,GAAG;EACbC,QAAQ,EAAE;AACd,CAAC,EACD,GAAG1B,UAAU,CAACY,MAAM,CAACG,GAAG,CAACC,KAAK,KAAK;EAC/BK,SAAS,EAAEL,KAAK,CAACG,WAAW;EAC5BG,EAAE,EAAE,GAAGhB,uBAAuB,IAAIU,KAAK,CAACH,GAAG,EAAE;EAC7CU,IAAI,EAAEP,KAAK,CAACO,IAAI;EAChBC,aAAa,EAAE,IAAI;EACnBC,QAAQ,EAAE,GAAG;EACbC,QAAQ,EAAE;AACd,CAAC,CAAC,CAAC,CACN;;AAED;AACA,MAAMC,WAAW,GAAG,UAAU;AAE9B,OAAO,MAAMC,YAAmB,GAAG;EAC/BC,IAAI,EAAE;IACFtB,aAAa;IACbU,YAAY;IACZU;EACJ;AACJ,CAAC;AAED,MAAMG,0BAA0B,GAAG;EAC/BC,iBAAiB,EAAE;IACfX;EACJ,CAAC;EACDb,aAAa;EACbU,YAAY;EACZU,WAAW;EACXK,QAAQ,EAAE;IACNC,eAAe,EAAE;MACbC,cAAc,EAAE;IACpB;EACJ;AACJ,CAAC;AAED,MAAMC,iDAAiD,GAAAC,aAAA,CAAAA,aAAA,KAChDN,0BAA0B;EAC7BC,iBAAiB,EAAE;IACfX,OAAO;IACPiB,UAAU,EAAE;MACRC,kBAAkB,EAAE;IACxB,CAAC;IACDC,mBAAmB,EAAE;MACjBC,OAAO,EAAE,CACL;QACIC,KAAK,EAAE,UAAU;QACjBC,OAAO,EAAE/C,IAAI;QACbgD,IAAI,EAAEzD;MACV,CAAC,CACJ;MACD0D,cAAc,EAAE;QACZH,KAAK,EAAE,MAAM;QACbE,IAAI,EAAEvD;MACV,CAAC;MACDyD,cAAc,EAAE,CACZ;QACIJ,KAAK,EAAE,mBAAmB;QAC1BC,OAAO,EAAE/C,IAAI;QACbgD,IAAI,EAAExD;MACV,CAAC;IAET;EACJ;AAAC,EACJ;AAED,MAAM2D,iCAAiC,GAAAV,aAAA,CAAAA,aAAA,KAChCN,0BAA0B;EAC7BiB,eAAe,EAAE,CACb;IACIN,KAAK,EAAE,UAAU;IACjBC,OAAO,EAAEpD,EAAE,CAAC;EAChB,CAAC,CACJ;EACDyC,iBAAiB,EAAE;IACfX,OAAO;IACPiB,UAAU,EAAE;MACRC,kBAAkB,EAAE;IACxB;EACJ;AAAC,EACJ;AAED,OAAO,MAAMJ,cAAqB,GAAG;EACjCL,IAAI,EAAEC;AACV,CAAC;AAED,OAAO,MAAMkB,6BAAoC,GAAG;EAChDnB,IAAI,EAAEC,0BAA0B;EAChCmB,IAAI,EAAE,MAAAA,CAAO;IAAEC;EAAO,CAAC,KAAK;IACxB,MAAMC,cAAc,GAAG,MAAMD,MAAM,CAACE,UAAU,CAAC,cAAc,EAAE;MAAEC,IAAI,EAAE;IAAW,CAAC,CAAC;IACpFhE,MAAM,CAAC8D,cAAc,CAAC,CAACG,iBAAiB,CAAC,CAAC;IAE1C,MAAMC,QAAQ,GAAG,MAAML,MAAM,CAACE,UAAU,CAAC,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAW,CAAC,CAAC;IACrEhE,MAAM,CAACkE,QAAQ,CAAC,CAACD,iBAAiB,CAAC,CAAC;IAEpC,MAAM/D,SAAS,CAACiE,KAAK,CAACL,cAAc,CAAC;EACzC;AACJ,CAAC;AAED,OAAO,MAAMM,+BAAsC,GAAG;EAClD5B,IAAI,EAAEM,iDAAiD;EACvDc,IAAI,EAAE,MAAAA,CAAO;IAAEC;EAAO,CAAC,KAAK;IACxB,MAAM1D,OAAO,CAAC,MAAM;MAChBH,MAAM,CAAC6D,MAAM,CAACQ,SAAS,CAAC,KAAK,EAAE;QAAEL,IAAI,EAAE;MAAW,CAAC,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IAC7E,CAAC,CAAC;IACF,MAAMC,QAAQ,GAAGL,MAAM,CAACQ,SAAS,CAAC,KAAK,EAAE;MAAEL,IAAI,EAAE;IAAW,CAAC,CAAC;IAC9D,MAAMM,cAAc,GAAGlE,MAAM,CAAC8D,QAAQ,CAAC,CAACG,SAAS,CAAC,QAAQ,EAAE;MAAEL,IAAI,EAAE;IAAc,CAAC,CAAC;IACpF9D,SAAS,CAACiE,KAAK,CAACG,cAAc,CAAC;EACnC;AACJ,CAAC;AAED,MAAMC,2BAA2B,GAAG;EAChCC,mBAAmB,EAAE;IACjB,iBAAiB,EAAE;MAAEC,KAAK,EAAE,CAAC,OAAO;IAAE,CAAC;IACvC,iBAAiB,EAAE;MAAEA,KAAK,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,YAAY;IAAE,CAAC;IAC3E,aAAa,EAAE;MAAEA,KAAK,EAAE,CAAC,WAAW,EAAE,gBAAgB,EAAE,WAAW;IAAE;EACzE;AACJ,CAAC;AAED,OAAO,MAAMC,qCAA4C,GAAG;EACxDlC,IAAI,EAAAO,aAAA,CAAAA,aAAA,KACGN,0BAA0B;IAC7BC,iBAAiB,EAAE;MACfX,OAAO;MACP4C,cAAc,EAAEJ;IACpB;EAAC,EACJ;EACDX,IAAI,EAAE,MAAAA,CAAO;IAAEC;EAAO,CAAC,KAAK;IACxB;IACA,MAAM1D,OAAO,CAAC,MAAM;MAChBH,MAAM,CAAC6D,MAAM,CAACQ,SAAS,CAAC,QAAQ,EAAE;QAAEL,IAAI,EAAE;MAAY,CAAC,CAAC,CAAC,CAACY,iBAAiB,CAAC,OAAO,CAAC;IACxF,CAAC,CAAC;IACF;IACA,MAAMC,eAAe,GAAGhB,MAAM,CAACQ,SAAS,CAAC,QAAQ,EAAE;MAAEL,IAAI,EAAE;IAAgB,CAAC,CAAC;IAC7EhE,MAAM,CAAC6E,eAAe,CAAC,CAACD,iBAAiB,CAAC,OAAO,CAAC;IAElD,MAAME,YAAY,GAAGjB,MAAM,CAACQ,SAAS,CAAC,QAAQ,EAAE;MAAEL,IAAI,EAAE;IAAY,CAAC,CAAC;IACtEhE,MAAM,CAAC8E,YAAY,CAAC,CAACF,iBAAiB,CAAC,KAAK,CAAC;EACjD;AACJ,CAAC;AAED,OAAO,MAAMG,mCAA0C,GAAG;EACtDvC,IAAI,EAAAO,aAAA,CAAAA,aAAA,KACGN,0BAA0B;IAC7BC,iBAAiB,EAAE;MACfX,OAAO;MACPiB,UAAU,EAAE;QACRC,kBAAkB,EAAE;MACxB;IACJ;EAAC,EACJ;EACDW,IAAI,EAAE,MAAAA,CAAO;IAAEC;EAAO,CAAC,KAAK;IACxB,MAAM1D,OAAO,CAAC,MAAM;MAChBH,MAAM,CAAC6D,MAAM,CAACQ,SAAS,CAAC,KAAK,EAAE;QAAEL,IAAI,EAAE;MAAW,CAAC,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IAC7E,CAAC,CAAC;;IAEF;IACA,MAAMC,QAAQ,GAAGL,MAAM,CAACQ,SAAS,CAAC,KAAK,EAAE;MAAEL,IAAI,EAAE;IAAW,CAAC,CAAC;IAC9D,MAAMgB,QAAQ,GAAG5E,MAAM,CAAC8D,QAAQ,CAAC,CAACG,SAAS,CAAC,UAAU,CAAC;IACvD,MAAMnE,SAAS,CAACiE,KAAK,CAACa,QAAQ,CAAC;IAE/B,MAAMC,cAAc,GAAGpB,MAAM,CAACQ,SAAS,CAAC,QAAQ,EAAE;MAAEL,IAAI,EAAE;IAAW,CAAC,CAAC;IACvE,MAAM9D,SAAS,CAACiE,KAAK,CAACc,cAAc,CAAC;EACzC;AACJ,CAAC;AAED,OAAO,MAAMC,uDAA8D,GAAG;EAC1E1C,IAAI,EAAEiB,iCAAiC;EACvCG,IAAI,EAAE,MAAAA,CAAO;IAAEC;EAAO,CAAC,KAAK;IACxB,MAAMK,QAAQ,GAAG,MAAML,MAAM,CAACE,UAAU,CAAC,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAW,CAAC,CAAC;IACrEhE,MAAM,CAACkE,QAAQ,CAAC,CAACD,iBAAiB,CAAC,CAAC;IAEpC,MAAMe,QAAQ,GAAG5E,MAAM,CAAC8D,QAAQ,CAAC,CAACG,SAAS,CAAC,UAAU,CAAC;IACvD,MAAMnE,SAAS,CAACiE,KAAK,CAACa,QAAQ,CAAC;IAE/B,MAAMG,cAAc,GAAGtB,MAAM,CAACQ,SAAS,CAAC,QAAQ,EAAE;MAAEL,IAAI,EAAE;IAAe,CAAC,CAAC;IAC3EhE,MAAM,CAACmF,cAAc,CAAC,CAAClB,iBAAiB,CAAC,CAAC;IAC1C,MAAM/D,SAAS,CAACiE,KAAK,CAACgB,cAAc,CAAC;IAErC,MAAMC,cAAc,GAAG/E,MAAM,CAACgE,SAAS,CAAC,UAAU,EAAE;MAAEL,IAAI,EAAE;IAAW,CAAC,CAAC;IACzEhE,MAAM,CAACoF,cAAc,CAAC,CAACnB,iBAAiB,CAAC,CAAC;EAC9C;AACJ,CAAC;AAED,OAAO,MAAMoB,sCAA6C,GAAG;EACzD7C,IAAI,EAAAO,aAAA,CAAAA,aAAA,KACGN,0BAA0B;IAC7BC,iBAAiB,EAAE;MACfX,OAAO;MACPiB,UAAU,EAAE;QACRC,kBAAkB,EAAE;MACxB;IACJ;EAAC,EACJ;EAEDW,IAAI,EAAE,MAAAA,CAAO;IAAEC;EAAO,CAAC,KAAK;IACxB,MAAM1D,OAAO,CAAC,MAAM;MAChBH,MAAM,CAAC6D,MAAM,CAACQ,SAAS,CAAC,KAAK,EAAE;QAAEL,IAAI,EAAE;MAAW,CAAC,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IAC7E,CAAC,CAAC;;IAEF;IACA,MAAMqB,SAAS,GAAGzB,MAAM,CAACQ,SAAS,CAAC,KAAK,EAAE;MAAEL,IAAI,EAAE;IAAW,CAAC,CAAC;IAC/D,MAAMgB,QAAQ,GAAG5E,MAAM,CAACkF,SAAS,CAAC,CAACjB,SAAS,CAAC,UAAU,CAAC;IACxD,MAAMnE,SAAS,CAACiE,KAAK,CAACa,QAAQ,CAAC;;IAE/B;IACA,MAAMO,UAAU,GAAG1B,MAAM,CAAC2B,YAAY,CAAC,KAAK,EAAE;MAAExB,IAAI,EAAE;IAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACtE,MAAMyB,cAAc,GAAGrF,MAAM,CAACmF,UAAU,CAAC,CAAClB,SAAS,CAAC,UAAU,CAAC;IAC/D,MAAMnE,SAAS,CAACiE,KAAK,CAACsB,cAAc,CAAC;IAErC,MAAMR,cAAc,GAAGpB,MAAM,CAACQ,SAAS,CAAC,QAAQ,EAAE;MAAEL,IAAI,EAAE;IAAW,CAAC,CAAC;IACvE,MAAM9D,SAAS,CAACiE,KAAK,CAACc,cAAc,CAAC;EACzC;AACJ,CAAC;AAED,MAAMS,IAAkC,GAAG;EACvCC,KAAK,EAAE,oDAAoD;EAC3DC,SAAS,EAAEpF,eAAe;EAC1BgC,IAAI,EAAE;IACFG,QAAQ,EAAEkD,MAAM,CAACC,aAAa;IAC9BC,YAAY,EAAEF,MAAM,CAACG,SAAS;IAC9BC,KAAK,EAAEJ,MAAM,CAACK;EAClB,CAAC;EACDC,UAAU,EAAE;IACRC,GAAG,EAAE;MACDC,QAAQ,EAAE;MACN;MACA1G,IAAI,CAAC2G,IAAI,CAAC,GAAG7F,oBAAoB,oCAAoC,EAAE,OAAO;QAAE8F;MAAQ,CAAC,KAAK;QAC1F,MAAMC,IAAI,GAAG,MAAMD,OAAO,CAACE,KAAK,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;QACzC,MAAMC,gBAAgB,GAAGH,IAAI,CAACnF,QAAQ,CAAC,CAAC,CAAC,CAACI,SAAS;QACnD,MAAMmF,eAAe,GAAGJ,IAAI,CAACnF,QAAQ,CAAC,CAAC,CAAC,CAACC,SAAS;;QAElD;QACA,IAAIsF,eAAe,KAAK,UAAU,IAAID,gBAAgB,KAAK,KAAK,EAAE;UAC9D,MAAME,cAAc,GAAGtG,OAAO,CAC1BG,YAAY,CAACoG,OAAO,EACpB,6CAA6C,EAC7C,KACJ,CAAC;UACD,OAAOlH,YAAY,CAAC8G,IAAI,CAAA3D,aAAA,CAAAA,aAAA,KAAMrC,YAAY;YAAEoG,OAAO,EAAED;UAAc,EAAE,CAAC;QAC1E;QACA,OAAOjH,YAAY,CAAC8G,IAAI,CAAChG,YAAY,CAAC;MAC1C,CAAC,CAAC,EACFf,IAAI,CAACoH,GAAG,CAAC,GAAGtG,oBAAoB,wDAAwD,EAAE,MAAM;QAC5F,OAAOb,YAAY,CAAC8G,IAAI,CAAC/F,UAAU,CAAC;MACxC,CAAC,CAAC,EACFhB,IAAI,CAACoH,GAAG,CAAC,GAAGtG,oBAAoB,kBAAkB,EAAE,MAAM;QACtD,OAAOb,YAAY,CAAC8G,IAAI,CAAC9F,cAAc,CAAC;MAC5C,CAAC,CAAC;IAEV;EACJ;AACJ,CAAC;AAID,eAAe8E,IAAI","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/elements/content-picker/ContentPicker.js

@@ -14,6 +14,7 @@ import 'regenerator-runtime/runtime';
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import debounce from 'lodash/debounce';
+import flow from 'lodash/flow';
 import getProp from 'lodash/get';
 import uniqueid from 'lodash/uniqueId';
 import noop from 'lodash/noop';
@@ -23,6 +24,8 @@ import UploadDialog from '../common/upload-dialog';
 import CreateFolderDialog from '../common/create-folder-dialog';
 import Internationalize from '../common/Internationalize';
 import makeResponsive from '../common/makeResponsive';
+// $FlowFixMe
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 // $FlowFixMe TypeScript file
 import ThemingStyles from '../common/theming';
 import Pagination from '../../features/pagination';
@@ -1271,5 +1274,5 @@ _defineProperty(ContentPicker, "defaultProps", {
   isPaginationVisible: true
 });
 export { ContentPicker as ContentPickerComponent };
-export default makeResponsive(ContentPicker);
+export default flow([makeResponsive, withBlueprintModernization])(ContentPicker);
 //# sourceMappingURL=ContentPicker.js.map

package/es/elements/content-picker/ContentPicker.js.flow

@@ -9,6 +9,7 @@ import React, { Component } from 'react';
 import type { Node } from 'react';
 import classNames from 'classnames';
 import debounce from 'lodash/debounce';
+import flow from 'lodash/flow';
 import getProp from 'lodash/get';
 import uniqueid from 'lodash/uniqueId';
 import noop from 'lodash/noop';
@@ -18,6 +19,8 @@ import UploadDialog from '../common/upload-dialog';
 import CreateFolderDialog from '../common/create-folder-dialog';
 import Internationalize from '../common/Internationalize';
 import makeResponsive from '../common/makeResponsive';
+// $FlowFixMe
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 // $FlowFixMe TypeScript file
 import ThemingStyles from '../common/theming';
 import Pagination from '../../features/pagination';
@@ -1345,4 +1348,4 @@ class ContentPicker extends Component<Props, State> {
 }
 
 export { ContentPicker as ContentPickerComponent };
-export default makeResponsive(ContentPicker);
+export default flow([makeResponsive, withBlueprintModernization])(ContentPicker);