box-ui-elements 23.3.0-beta.7 → 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.7",
+    "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/components/flyout/Flyout.js

@@ -305,8 +305,9 @@ class Flyout extends React.Component<Props, State> {
         }
     };
 
-    handleKeyPress = () => {
-        if (KEYS.enter) {
+    handleKeyPress = (event: SyntheticKeyboardEvent<>) => {
+        if (event.key === KEYS.enter) {
+            event.preventDefault();
             this.openOverlay();
             this.focusButton();
         }

package/src/components/flyout/__tests__/Flyout.test.js

@@ -336,10 +336,7 @@ describe('components/flyout/Flyout', () => {
                 if (shouldCloseOverlay) {
                     sandbox.mock(instance).expects('handleOverlayClose');
                 } else {
-                    sandbox
-                        .mock(instance)
-                        .expects('handleOverlayClose')
-                        .never();
+                    sandbox.mock(instance).expects('handleOverlayClose').never();
                 }
                 act(() => {
                     instance.handleOverlayClick(event);
@@ -432,10 +429,7 @@ describe('components/flyout/Flyout', () => {
 
             const instance = wrapper.instance();
             setTimeout(() => {
-                sandbox
-                    .mock(instance)
-                    .expects('openOverlay')
-                    .never();
+                sandbox.mock(instance).expects('openOverlay').never();
             }, 310); // default timeout is 300ms
 
             instance.handleButtonHover(event);
@@ -452,10 +446,7 @@ describe('components/flyout/Flyout', () => {
 
             const instance = wrapper.instance();
             setTimeout(() => {
-                sandbox
-                    .mock(instance)
-                    .expects('openOverlay')
-                    .never();
+                sandbox.mock(instance).expects('openOverlay').never();
             }, timeout - 10);
 
             setTimeout(() => {
@@ -485,6 +476,32 @@ describe('components/flyout/Flyout', () => {
         });
     });
 
+    describe('handleKeyPress()', () => {
+        test('should call openOverlay() and focusButton() when enter key is pressed', () => {
+            const wrapper = shallow(
+                <Flyout>
+                    <FakeButton />
+                    <FakeOverlay />
+                </Flyout>,
+            );
+
+            const instance = wrapper.instance();
+            const openOverlaySpy = sandbox.spy(instance, 'openOverlay');
+            const focusButtonSpy = sandbox.spy(instance, 'focusButton');
+
+            const event = {
+                key: 'Enter',
+                preventDefault: sandbox.spy(),
+            };
+
+            instance.handleKeyPress(event);
+
+            expect(openOverlaySpy.calledOnce).toBe(true);
+            expect(focusButtonSpy.calledOnce).toBe(true);
+            expect(event.preventDefault.calledOnce).toBe(true);
+        });
+    });
+
     describe('closeOverlay()', () => {
         [
             {
@@ -803,10 +820,7 @@ describe('components/flyout/Flyout', () => {
                         if (shouldCallCloseOverlay) {
                             sandbox.mock(instance).expects('closeOverlay');
                         } else {
-                            sandbox
-                                .mock(instance)
-                                .expects('closeOverlay')
-                                .never();
+                            sandbox.mock(instance).expects('closeOverlay').never();
                         }
 
                         if (isInsideToggleButton) {
@@ -833,10 +847,7 @@ describe('components/flyout/Flyout', () => {
                 const el = document.createElement('div');
                 el.innerHTML = '<div class="class"><div class="target"></div></div>';
 
-                sandbox
-                    .mock(instance)
-                    .expects('closeOverlay')
-                    .never();
+                sandbox.mock(instance).expects('closeOverlay').never();
 
                 instance.handleDocumentClickOrWindowBlur({
                     target: el.querySelector('.target'),

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;