box-ui-elements 23.3.0-beta.8 → 23.3.0

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

@@ -1,58 +1,7 @@
-export declare const metadataView: {
-    args: {
-        metadataQuery: {
-            from: string;
-            ancestor_folder_id: string;
-            fields: string[];
-        };
-        fieldsToShow: ({
-            key: string;
-            canEdit: boolean;
-            displayName: string;
-        } | {
-            key: string;
-            canEdit: boolean;
-            displayName?: undefined;
-        })[];
-        defaultView: string;
-    };
-};
-export declare const withNewMetadataView: {
-    args: {
-        metadataQuery: {
-            from: string;
-            ancestor_folder_id: string;
-            fields: string[];
-        };
-        fieldsToShow: ({
-            key: string;
-            canEdit: boolean;
-            displayName: string;
-        } | {
-            key: string;
-            canEdit: boolean;
-            displayName?: undefined;
-        })[];
-        defaultView: string;
-        features: {
-            contentExplorer: {
-                metadataViewV2: boolean;
-            };
-        };
-    };
-};
-declare const _default: {
-    title: string;
-    component: any;
-    args: {
-        features: Record<string, boolean>;
-        rootFolderId: string;
-        token: string;
-    };
-    parameters: {
-        msw: {
-            handlers: import("msw/lib/core/handlers/HttpHandler").HttpHandler[];
-        };
-    };
-};
-export default _default;
+import type { Meta, StoryObj } from '@storybook/react';
+import ContentExplorer from '../../ContentExplorer';
+type Story = StoryObj<typeof ContentExplorer>;
+export declare const metadataView: Story;
+export declare const withNewMetadataView: Story;
+declare const meta: Meta<typeof ContentExplorer>;
+export default meta;

package/es/src/elements/content-sidebar/MetadataInstanceEditor.d.ts

@@ -1,5 +1,5 @@
 import { type FormValues, 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, ERROR_CODE_UNKNOWN, ERROR_CODE_METADATA_PRECONDITION_FAILED } from '../../constants';
 export interface MetadataInstanceEditorProps {

package/es/src/elements/content-sidebar/stories/MetadataSidebarRedesign.stories.d.ts

@@ -1,29 +1,13 @@
-import { type StoryObj } from '@storybook/react';
-import React from 'react';
+import { type StoryObj, Meta } from '@storybook/react';
+import type { HttpHandler } from 'msw';
 import MetadataSidebarRedesign from '../MetadataSidebarRedesign';
-declare const _default: {
-    title: string;
-    component: any;
-    args: {
-        fileId: string;
-        features: {
-            'metadata.redesign.enabled': boolean;
-        };
-        logger: {
-            onReadyMetric: ({ endMarkName }: {
-                endMarkName: any;
-            }) => void;
-        };
-        hasMetadata: boolean;
-        token: string;
-        metadataSidebarProps: any;
-    };
+import ContentSidebar from '../ContentSidebar';
+declare const meta: Meta<typeof ContentSidebar> & {
     parameters: {
         msw: {
-            handlers: import("msw/lib/core/handlers/HttpHandler").HttpHandler[];
+            handlers: HttpHandler[];
         };
     };
-    render: (args: any) => React.JSX.Element;
 };
-export default _default;
+export default meta;
 export declare const Basic: StoryObj<typeof MetadataSidebarRedesign>;

package/es/src/elements/content-sidebar/stories/__mocks__/TaxonomyMocks.d.ts

@@ -1,3 +1,4 @@
+import type { HttpHandler } from 'msw';
 export declare const multilevelTaxonomyLevels: ({
     display_name: string;
     description: string;
@@ -287,4 +288,4 @@ export declare const mockSinglelevelTaxonomyNodes: {
         node_path: any[];
     };
 };
-export declare const taxonomyMockHandlers: import("msw/lib/core/handlers/HttpHandler").HttpHandler[];
+export declare const taxonomyMockHandlers: HttpHandler[];

package/es/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.d.ts

@@ -1,57 +1,13 @@
-import { type StoryObj } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react';
+import type { HttpHandler } from 'msw';
+import ContentSidebar from '../../ContentSidebar';
 import BoxAISidebar from '../../BoxAISidebar';
 export declare const basic: StoryObj<typeof BoxAISidebar>;
-declare const _default: {
-    title: string;
-    component: any;
-    args: {
-        features: {
-            'boxai.sidebar.enabled': boolean;
-        };
-        fileId: string;
-        token: string;
-        boxAISidebarProps: {
-            createSessionRequest: () => {
-                encodedSession: string;
-            };
-            fetchTimeout: {
-                initial: number;
-            };
-            getAgentConfig: () => {};
-            getAIStudioAgents: () => {};
-            getAnswer: () => {};
-            getAnswerStreaming: () => {};
-            getSuggestedQuestions: any;
-            hostAppName: string;
-            isAgentSelectorEnabled: boolean;
-            isAIStudioAgentSelectorEnabled: boolean;
-            isCitationsEnabled: boolean;
-            isFeedbackEnabled: boolean;
-            isDebugModeEnabled: boolean;
-            isIntelligentQueryMode: boolean;
-            isMarkdownEnabled: boolean;
-            isResetChatEnabled: boolean;
-            isStopResponseEnabled: boolean;
-            isStreamingEnabled: boolean;
-            items: {
-                id: string;
-                name: string;
-                type: string;
-                fileType: string;
-                status: string;
-            }[];
-            localizedQuestions: {
-                id: string;
-                label: string;
-                prompt: string;
-            }[];
-            recordAction: () => {};
-        };
-    };
+declare const meta: Meta<typeof ContentSidebar> & {
     parameters: {
         msw: {
-            handlers: import("msw/lib/core/handlers/HttpHandler").HttpHandler[];
+            handlers: HttpHandler[];
         };
     };
 };
-export default _default;
+export default meta;

package/es/src/elements/content-sidebar/stories/tests/ContentSidebar-e2e.stories.d.ts

@@ -1,3 +1,6 @@
+import type { HttpHandler } from 'msw';
+import type { Meta } from '@storybook/react';
+import ContentSidebar from '../../ContentSidebar';
 export declare const basic: {
     args: {
         fileId: any;
@@ -8,29 +11,11 @@ export declare const fileVersion: {
         fileId: any;
     };
 };
-declare const _default: {
-    title: string;
-    component: any;
-    args: {
-        detailsSidebarProps: {
-            hasAccessStats: boolean;
-            hasClassification: boolean;
-            hasNotices: boolean;
-            hasProperties: boolean;
-            hasRetentionPolicy: boolean;
-        };
-        features: Record<string, boolean>;
-        fileId: string;
-        hasActivityFeed: boolean;
-        hasMetadata: boolean;
-        hasSkills: boolean;
-        hasVersions: boolean;
-        token: string;
-    };
+declare const meta: Meta<typeof ContentSidebar> & {
     parameters: {
         msw: {
-            handlers: import("msw/lib/core/handlers/HttpHandler").HttpHandler[];
+            handlers: HttpHandler[];
         };
     };
 };
-export default _default;
+export default meta;

package/es/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.d.ts

@@ -1,4 +1,6 @@
-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';
 export declare const AddTemplateDropdownMenuOn: {
     play: ({ canvasElement }: {
@@ -45,32 +47,11 @@ export declare const ViewMultilevelTaxonomy: StoryObj<typeof MetadataSidebarRede
 export declare const ViewSinglelevelTaxonomy: StoryObj<typeof MetadataSidebarRedesign>;
 export declare const EditMultilevelTaxonomy: StoryObj<typeof MetadataSidebarRedesign>;
 export declare const EditSinglelevelTaxonomy: StoryObj<typeof MetadataSidebarRedesign>;
-declare const _default: {
-    title: string;
-    component: any;
-    args: {
-        token: string;
-        metadataSidebarProps: {
-            fileId: string;
-            isFeatureEnabled: boolean;
-            onError: import("@vitest/spy").Mock<any, any>;
-            onSuccess: import("@vitest/spy").Mock<any, any>;
-        };
-        hasMetadata: boolean;
-        features: {
-            'metadata.redesign.enabled': boolean;
-        };
-        fileId: string;
-        logger: {
-            onReadyMetric: ({ endMarkName }: {
-                endMarkName: any;
-            }) => void;
-        };
-    };
+declare const meta: Meta<typeof ContentSidebar> & {
     parameters: {
         msw: {
-            handlers: import("msw/lib/core/handlers/HttpHandler").HttpHandler[];
+            handlers: HttpHandler[];
         };
     };
 };
-export default _default;
+export default meta;

package/es/src/elements/content-uploader/IconInProgress.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
-declare const IconInProgress: () => React.JSX.Element;
+import type { ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
+declare const IconInProgress: ForwardRefExoticComponent<SVGProps<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
 export default IconInProgress;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.3.0-beta.8",
+    "version": "23.3.0",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -129,8 +129,8 @@
         "@babel/preset-typescript": "^7.24.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": "^11.12.0",
+        "@box/blueprint-web-assets": "^4.44.1",
         "@box/box-ai-agent-selector": "^0.31.0",
         "@box/box-ai-content-answers": "^0.124.1",
         "@box/cldr-data": "^34.2.0",
@@ -303,8 +303,8 @@
         "worker-farm": "^1.7.0"
     },
     "peerDependencies": {
-        "@box/blueprint-web": "^10.3.1",
-        "@box/blueprint-web-assets": "^4.36.0",
+        "@box/blueprint-web": "^11.12.0",
+        "@box/blueprint-web-assets": "^4.44.1",
         "@box/box-ai-agent-selector": "^0.31.0",
         "@box/box-ai-content-answers": "^0.124.1",
         "@box/cldr-data": ">=34.2.0",

package/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,7 +35,9 @@ 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,
@@ -42,7 +45,7 @@ export const metadataView = {
     },
 };
 
-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;

package/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,

package/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';

package/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>
 `;

package/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);

package/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);
     }),

package/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;

package/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;

package/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;

package/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;

package/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;

package/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';

package/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,