feat(bp-assets): Bump BP assets to 4.39.0 (#4095)

JChan106 · web-flow · commit 15c403c402e1 · 2025-05-12T19:13:01.000Z
* feat(bp-assets): Bump BP assets to 4.39.0

* feat(bp-assets): Update test snapshot

* feat(bp-assets): Fix flow issue

* feat(bp-assets): Fix flow error

* feat(bp-assets): Fix test
diff --git a/package.json b/package.json
@@ -126,7 +126,7 @@
         "@babel/template": "^7.24.7",
         "@babel/types": "^7.24.7",
         "@box/blueprint-web": "^10.3.1",
-        "@box/blueprint-web-assets": "4.36.0",
+        "@box/blueprint-web-assets": "^4.39.0",
         "@box/box-ai-agent-selector": "^0.31.0",
         "@box/box-ai-content-answers": "^0.124.1",
         "@box/cldr-data": "^34.2.0",
diff --git a/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx b/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx
@@ -1,4 +1,5 @@
 import { http, HttpResponse } from 'msw';
+import type { Meta, StoryObj } from '@storybook/react';
 import ContentExplorer from '../../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 import { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';
@@ -34,15 +35,17 @@ const fieldsToShow = [
 ];
 const defaultView = 'metadata'; // Required prop to paint the metadata view. If not provided, you'll get regular folder view.
 
-export const metadataView = {
+type Story = StoryObj<typeof ContentExplorer>;
+
+export const metadataView: Story = {
     args: {
         metadataQuery,
         fieldsToShow,
         defaultView,
     },
 };
 
-export const withNewMetadataView = {
+export const withNewMetadataView: Story = {
     args: {
         metadataQuery,
         fieldsToShow,
@@ -55,7 +58,7 @@ export const withNewMetadataView = {
     },
 };
 
-export default {
+const meta: Meta<typeof ContentExplorer> = {
     title: 'Elements/ContentExplorer/tests/ContentExplorer/visual/MetadataView',
     component: ContentExplorer,
     args: {
@@ -76,3 +79,5 @@ export default {
         },
     },
 };
+
+export default meta;
diff --git a/src/elements/content-sidebar/MetadataInstanceEditor.tsx b/src/elements/content-sidebar/MetadataInstanceEditor.tsx
@@ -4,7 +4,7 @@ import {
     type JSONPatchOperations,
     type MetadataTemplateInstance,
 } from '@box/metadata-editor';
-import { type TaxonomyOptionsFetcher } from '@box/metadata-editor/dist/types/lib/components/metadata-editor-fields/components/metadata-taxonomy-field/types';
+import { TaxonomyOptionsFetcher } from '@box/metadata-editor/lib/components/metadata-editor-fields/components/metadata-taxonomy-field/types.js';
 import React from 'react';
 import {
     ERROR_CODE_METADATA_AUTOFILL_TIMEOUT,
diff --git a/src/elements/content-sidebar/SidebarNav.js b/src/elements/content-sidebar/SidebarNav.js
@@ -8,7 +8,9 @@ import * as React from 'react';
 import { injectIntl } from 'react-intl';
 import type { IntlShape } from 'react-intl';
 import noop from 'lodash/noop';
+// $FlowFixMe
 import { BoxAiLogo } from '@box/blueprint-web-assets/icons/Logo';
+// $FlowFixMe
 import { Size6 } from '@box/blueprint-web-assets/tokens/tokens';
 import { usePromptFocus } from '@box/box-ai-content-answers';
 import AdditionalTabs from './additional-tabs';
diff --git a/src/elements/content-sidebar/additional-tabs/__tests__/__snapshots__/AdditionalTab.test.js.snap b/src/elements/content-sidebar/additional-tabs/__tests__/__snapshots__/AdditionalTab.test.js.snap
@@ -41,7 +41,7 @@ exports[`elements/content-sidebar/additional-tabs/AdditionalTab should render ic
     onClick={[Function]}
     type="button"
   >
-    <SvgPlus />
+    <ForwardRef(SvgPlus) />
   </PlainButton>
 </AdditionalTabTooltip>
 `;
diff --git a/src/elements/content-sidebar/stories/MetadataSidebarRedesign.stories.tsx b/src/elements/content-sidebar/stories/MetadataSidebarRedesign.stories.tsx
@@ -1,7 +1,8 @@
-import { type StoryObj } from '@storybook/react';
+import { type StoryObj, Meta } from '@storybook/react';
 import { fn, userEvent, within } from '@storybook/test';
 import React, { type ComponentProps } from 'react';
 import { http, HttpResponse } from 'msw';
+import type { HttpHandler } from 'msw';
 import MetadataSidebarRedesign from '../MetadataSidebarRedesign';
 import ContentSidebar from '../ContentSidebar';
 import {
@@ -32,7 +33,7 @@ const defaultMetadataSidebarProps: ComponentProps<typeof MetadataSidebarRedesign
     onSuccess: fn(),
 };
 
-export default {
+const meta: Meta<typeof ContentSidebar> & { parameters: { msw: { handlers: HttpHandler[] } } } = {
     title: 'Elements/ContentSidebar/MetadataSidebarRedesign',
     component: ContentSidebar,
     args: {
@@ -66,6 +67,8 @@ export default {
     },
 };
 
+export default meta;
+
 export const Basic: StoryObj<typeof MetadataSidebarRedesign> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
diff --git a/src/elements/content-sidebar/stories/__mocks__/TaxonomyMocks.ts b/src/elements/content-sidebar/stories/__mocks__/TaxonomyMocks.ts
@@ -1,4 +1,5 @@
 import { http, HttpResponse } from 'msw';
+import type { HttpHandler } from 'msw';
 
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 import { fileIdWithMetadata, mockFileRequest } from './MetadataSidebarRedesignedMocks';
@@ -395,7 +396,7 @@ export const mockSinglelevelTaxonomyNodes = {
     },
 };
 
-export const taxonomyMockHandlers = [
+export const taxonomyMockHandlers: HttpHandler[] = [
     http.get(mockFileRequest.url, () => {
         return HttpResponse.json(mockFileRequest.response);
     }),
diff --git a/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx b/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx
@@ -1,6 +1,7 @@
 import { expect, within } from '@storybook/test';
-import { type StoryObj } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react';
 import { http, HttpResponse } from 'msw';
+import type { HttpHandler } from 'msw';
 import ContentSidebar from '../../ContentSidebar';
 import BoxAISidebar from '../../BoxAISidebar';
 import { mockFileRequest, mockUserRequest } from '../../../common/__mocks__/mockRequests';
@@ -25,7 +26,7 @@ export const basic: StoryObj<typeof BoxAISidebar> = {
     },
 };
 
-export default {
+const meta: Meta<typeof ContentSidebar> & { parameters: { msw: { handlers: HttpHandler[] } } } = {
     title: 'Elements/ContentSidebar/BoxAISidebar/tests/visual-regression-tests',
     component: ContentSidebar,
     args: {
@@ -90,3 +91,5 @@ export default {
         },
     },
 };
+
+export default meta;
diff --git a/src/elements/content-sidebar/stories/tests/ContentSidebar-e2e.stories.tsx b/src/elements/content-sidebar/stories/tests/ContentSidebar-e2e.stories.tsx
@@ -1,5 +1,7 @@
 // @flow
 import { http, HttpResponse } from 'msw';
+import type { HttpHandler } from 'msw';
+import type { Meta } from '@storybook/react';
 import ContentSidebar from '../../ContentSidebar';
 import { mockFileRequest } from '../__mocks__/ContentSidebarMocks';
 import { testFileIds } from '../../../../../test/support/constants';
@@ -33,7 +35,7 @@ export const fileVersion = {
     },
 };
 
-export default {
+const meta: Meta<typeof ContentSidebar> & { parameters: { msw: { handlers: HttpHandler[] } } } = {
     title: 'Elements/ContentSidebar/tests/e2e',
     component: ContentSidebar,
     args: defaultArgs,
@@ -47,3 +49,5 @@ export default {
         },
     },
 };
+
+export default meta;
diff --git a/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx b/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx
@@ -1,7 +1,8 @@
 import { act, type ComponentProps } from 'react';
 import { http, HttpResponse } from 'msw';
 import { expect, userEvent, waitFor, within, fn, screen } from '@storybook/test';
-import { type StoryObj } from '@storybook/react';
+import { type StoryObj, Meta } from '@storybook/react';
+import type { HttpHandler } from 'msw';
 import ContentSidebar from '../../ContentSidebar';
 import MetadataSidebarRedesign from '../../MetadataSidebarRedesign';
 import {
@@ -720,7 +721,7 @@ export const EditSinglelevelTaxonomy: StoryObj<typeof MetadataSidebarRedesign> =
     },
 };
 
-export default {
+const meta: Meta<typeof ContentSidebar> & { parameters: { msw: { handlers: HttpHandler[] } } } = {
     title: 'Elements/ContentSidebar/MetadataSidebarRedesign/tests/visual-regression-tests',
     component: ContentSidebar,
     args: {
@@ -739,3 +740,5 @@ export default {
         },
     },
 };
+
+export default meta;
diff --git a/src/elements/content-uploader/IconInProgress.tsx b/src/elements/content-uploader/IconInProgress.tsx
@@ -1,19 +1,23 @@
 import * as React from 'react';
+import type { ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
 import { useIntl } from 'react-intl';
 import { LoadingIndicator } from '@box/blueprint-web';
 import { IconCtaIconHover, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
 import { XMark } from '@box/blueprint-web-assets/icons/Fill';
 import messages from '../common/messages';
 
-const IconInProgress = () => {
-    const { formatMessage } = useIntl();
+const IconInProgress: ForwardRefExoticComponent<SVGProps<SVGSVGElement> & RefAttributes<SVGSVGElement>> =
+    React.forwardRef(() => {
+        const { formatMessage } = useIntl();
 
-    return (
-        <div className="bcu-IconInProgress">
-            <XMark color={IconCtaIconHover} height={Size5} width={Size5} />
-            <LoadingIndicator aria-label={formatMessage(messages.loading)} className="bcu-IconInProgress-loading" />
-        </div>
-    );
-};
+        return (
+            <div className="bcu-IconInProgress">
+                <XMark color={IconCtaIconHover} height={Size5} width={Size5} />
+                <LoadingIndicator aria-label={formatMessage(messages.loading)} className="bcu-IconInProgress-loading" />
+            </div>
+        );
+    });
+
+IconInProgress.displayName = 'IconInProgress';
 
 export default IconInProgress;
diff --git a/src/elements/content-uploader/ItemAction.tsx b/src/elements/content-uploader/ItemAction.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
 import { useIntl } from 'react-intl';
 import { AxiosError } from 'axios';
 import { Button, IconButton, LoadingIndicator, Tooltip } from '@box/blueprint-web';
@@ -30,6 +31,8 @@ export interface ItemActionProps {
     status: UploadStatus;
 }
 
+type IconComponent = ForwardRefExoticComponent<SVGProps<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
+
 const ItemAction = ({
     error,
     isFolder = false,
@@ -41,11 +44,11 @@ const ItemAction = ({
     const { formatMessage } = useIntl();
     const { code } = error || {};
 
-    const LoadingIndicatorIcon = () => (
+    const LoadingIndicatorIcon = React.forwardRef<SVGSVGElement>(() => (
         <LoadingIndicator aria-label={formatMessage(messages.loading)} className="bcu-ItemAction-loading" />
-    );
+    ));
 
-    let Icon = XMark;
+    let Icon: IconComponent = XMark;
     let tooltip;
 
     if (isFolder && status !== STATUS_PENDING) {
@@ -54,14 +57,14 @@ const ItemAction = ({
 
     switch (status) {
         case STATUS_COMPLETE:
-            Icon = () => (
+            Icon = React.forwardRef<SVGSVGElement>(() => (
                 <Checkmark
                     aria-label={formatMessage(messages.complete)}
                     color={SurfaceStatusSurfaceSuccess}
                     height={Size5}
                     width={Size5}
                 />
-            );
+            ));
             if (!isResumableUploadsEnabled) {
                 tooltip = messages.remove;
             }
@@ -75,7 +78,7 @@ const ItemAction = ({
             if (isResumableUploadsEnabled) {
                 Icon = LoadingIndicatorIcon;
             } else {
-                Icon = IconInProgress;
+                Icon = IconInProgress as IconComponent;
                 tooltip = messages.uploadsCancelButtonTooltip;
             }
             break;
diff --git a/src/features/metadata-instance-editor/CascadePolicy.js b/src/features/metadata-instance-editor/CascadePolicy.js
@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { BoxAiAgentSelector } from '@box/box-ai-agent-selector';
 import { InlineNotice, TooltipProvider } from '@box/blueprint-web';
+// $FlowFixMe
 import BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
 
 import Toggle from '../../components/toggle';
diff --git a/src/icons/file-icon/FileIcon.tsx b/src/icons/file-icon/FileIcon.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
 
 import {
     FileAdobeExpress,
@@ -40,7 +41,9 @@ import { useIntl } from 'react-intl';
 
 import messages from '../../elements/common/messages';
 
-const Components: { [key: string]: (props: React.SVGProps<SVGSVGElement>) => JSX.Element } = {
+type FileIconComponent = ForwardRefExoticComponent<SVGProps<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
+
+const Components: { [key: string]: FileIconComponent } = {
     FileAdobeExpress,
     FileAudio,
     FileBookmark,
diff --git a/tsconfig.json b/tsconfig.json
@@ -8,6 +8,7 @@
         "allowJs": false, // https://github.com/microsoft/TypeScript/issues/35470
         "checkJs": false,
         "rootDir": ".",
+        "moduleResolution": "bundler",
         "paths": {
             "box-locale-data": ["node_modules/@box/cldr-data/locale-data/en-US"],
             "react": ["node_modules/@types/react"]
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
@@ -41,7 +41,7 @@ exports[`elements/content-sidebar/additional-tabs/AdditionalTab should render ic
`41`	`41`	`onClick={[Function]}`
`42`	`42`	`type="button"`
`43`	`43`	`>`
`44`		`- <SvgPlus />`
	`44`	`+ <ForwardRef(SvgPlus) />`
`45`	`45`	`</PlainButton>`
`46`	`46`	`</AdditionalTabTooltip>`
`47`	`47`	`;