box-ui-elements 23.4.0-beta.23 → 23.4.0-beta.25

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.4.0-beta.23",
+    "version": "23.4.0-beta.25",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -137,10 +137,10 @@
         "@box/frontend": "^11.0.1",
         "@box/item-icon": "^0.9.83",
         "@box/languages": "^1.0.0",
-        "@box/metadata-editor": "^0.115.0",
+        "@box/metadata-editor": "^0.117.0",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
-        "@chromatic-com/storybook": "^1.6.1",
+        "@chromatic-com/storybook": "^4.0.1",
         "@commitlint/cli": "^19.8.0",
         "@commitlint/config-conventional": "^19.8.0",
         "@eslint/eslintrc": "^3.1.0",
@@ -149,23 +149,14 @@
         "@formatjs/intl-relativetimeformat": "^4.5.9",
         "@formatjs/intl-unified-numberformat": "^3.2.0",
         "@hapi/address": "^2.1.4",
-        "@storybook/addon-actions": "^8.2.4",
-        "@storybook/addon-docs": "^8.2.4",
-        "@storybook/addon-essentials": "^8.2.4",
-        "@storybook/addon-interactions": "^8.2.4",
-        "@storybook/addon-knobs": "^8.0.1",
-        "@storybook/addon-links": "^8.2.4",
-        "@storybook/addon-styling-webpack": "^1.0.1",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/blocks": "^8.2.4",
-        "@storybook/manager-api": "^8.2.4",
-        "@storybook/preview-api": "^8.2.4",
-        "@storybook/react-webpack5": "^8.6.14",
-        "@storybook/test": "^8.2.4",
-        "@storybook/theming": "^8.2.4",
+        "@storybook/addon-docs": "^9.0.14",
+        "@storybook/addon-styling-webpack": "^2.0.0",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+        "@storybook/react-webpack5": "^9.0.14",
+        "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^16.0.0",
-        "@testing-library/user-event": "^14.5.2",
+        "@testing-library/user-event": "14.5.2",
         "@types/classnames": "^2.2.9",
         "@types/color": "^3.0.2",
         "@types/enzyme": "^3.10.18",
@@ -204,7 +195,7 @@
         "css-loader": "^7.1.2",
         "css-minimizer-webpack-plugin": "^7.0.0",
         "cssnano": "^4.1.10",
-        "cypress": "^13.7.3",
+        "cypress": "^13.17.0",
         "deepmerge": "^4.2.2",
         "draft-js": "^0.11.7",
         "enzyme": "^3.11.0",
@@ -242,8 +233,9 @@
         "message-accumulator": "^2.1.1",
         "mini-css-extract-plugin": "^2.9.0",
         "mousetrap": "^1.6.3",
-        "msw": "^2.1.5",
-        "msw-storybook-addon": "^2.0.2",
+        "msw": "^2.10.2",
+        "msw-storybook-addon": "^2.0.5",
+        "node-polyfill-webpack-plugin": "^4.1.0",
         "npm-run-all": "^4.1.5",
         "pikaday": "^1.8.0",
         "postcss": "^8.5.3",
@@ -280,8 +272,8 @@
         "semantic-release": "^24.2.3",
         "sinon": "^2.3.7",
         "source-map-loader": "^0.2.4",
-        "storybook": "^8.6.14",
-        "storybook-react-intl": "^3.1.1",
+        "storybook": "^9.0.14",
+        "storybook-react-intl": "^4.0.7",
         "string-replace-loader": "^3.1.0",
         "styled-components": "5.0.0",
         "stylelint": "^16.18.0",
@@ -306,7 +298,7 @@
         "@box/cldr-data": ">=34.2.0",
         "@box/combobox-with-api": "^0.34.9",
         "@box/item-icon": "^0.9.83",
-        "@box/metadata-editor": "^0.115.0",
+        "@box/metadata-editor": "^0.117.0",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@hapi/address": "^2.1.4",
         "axios": "^0.30.0",

package/src/api/uploads/BaseUpload.js

@@ -30,7 +30,7 @@ class BaseUpload extends Base {
 
     folderId: string;
 
-    overwrite: boolean;
+    overwrite: boolean | 'error';
 
     conflictCallback: ?(fileName: string) => string;
 
@@ -159,6 +159,10 @@ class BaseUpload extends Base {
             this.errorCallback(errorData);
             // Automatically handle name conflict errors
         } else if (errorData && errorData.status === 409) {
+            if (this.overwrite === 'error') {
+                this.errorCallback(errorData);
+                return;
+            }
             if (this.overwrite) {
                 // Error response contains file ID to upload a new file version for
                 const conflictFileId = errorData.context_info.conflicts.id;

package/src/api/uploads/MultiputUpload.js

@@ -173,6 +173,7 @@ class MultiputUpload extends BaseMultiput {
         errorCallback,
         progressCallback,
         successCallback,
+        // $FlowFixMe
         overwrite = true,
         conflictCallback,
         fileId,
@@ -182,7 +183,7 @@ class MultiputUpload extends BaseMultiput {
         file: File,
         fileId: ?string,
         folderId: string,
-        overwrite?: boolean,
+        overwrite?: boolean | 'error',
         progressCallback?: Function,
         successCallback?: Function,
     }): void {
@@ -217,6 +218,7 @@ class MultiputUpload extends BaseMultiput {
         errorCallback,
         progressCallback,
         successCallback,
+        // $FlowFixMe
         overwrite = true,
         conflictCallback,
         fileId,
@@ -227,7 +229,7 @@ class MultiputUpload extends BaseMultiput {
         fileDescription: ?string,
         fileId: ?string,
         folderId: string,
-        overwrite?: boolean,
+        overwrite?: boolean | 'error',
         progressCallback?: Function,
         successCallback?: Function,
     }): void {
@@ -337,6 +339,10 @@ class MultiputUpload extends BaseMultiput {
             }
 
             if (errorData && errorData.status === 409) {
+                if (this.overwrite === 'error') {
+                    this.errorCallback(errorData);
+                    return;
+                }
                 this.resolveConflict(errorData);
                 this.createSessionRetry();
                 return;
@@ -437,6 +443,7 @@ class MultiputUpload extends BaseMultiput {
         progressCallback,
         sessionId,
         successCallback,
+        // $FlowFixMe
         overwrite = true,
         conflictCallback,
         fileId,
@@ -446,7 +453,7 @@ class MultiputUpload extends BaseMultiput {
         file: File,
         fileId: ?string,
         folderId: string,
-        overwrite?: boolean,
+        overwrite?: boolean | 'error',
         progressCallback?: Function,
         sessionId: string,
         successCallback?: Function,
@@ -598,9 +605,7 @@ class MultiputUpload extends BaseMultiput {
 
             await retryNumOfTimes(
                 (resolve: Function, reject: Function): void => {
-                    this.logEvent(logEventType, logMessage)
-                        .then(resolve)
-                        .catch(reject);
+                    this.logEvent(logEventType, logMessage).then(resolve).catch(reject);
                 },
                 this.config.retries,
                 this.config.initialRetryDelayMs,

package/src/api/uploads/PlainUpload.js

@@ -116,7 +116,7 @@ class PlainUpload extends BaseUpload {
      * @param {Function} [options.errorCallback] - Function to call with errors
      * @param {Function} [options.progressCallback] - Function to call with progress
      * @param {Function} [options.conflictCallback] - Function to call on conflicting file names
-     * @param {boolean} [overwrite] - Should upload overwrite file with same name
+     * @param {boolean|'error'} [overwrite] - Should upload overwrite file with same name, throw error, or call conflictCallback to rename
      * @return {void}
      */
     upload({
@@ -128,6 +128,7 @@ class PlainUpload extends BaseUpload {
         errorCallback = noop,
         progressCallback = noop,
         conflictCallback,
+        // $FlowFixMe
         overwrite = true,
     }: {
         conflictCallback?: Function,
@@ -136,7 +137,7 @@ class PlainUpload extends BaseUpload {
         fileDescription: ?string,
         fileId: ?string,
         folderId: string,
-        overwrite: boolean,
+        overwrite: boolean | 'error',
         progressCallback: Function,
         successCallback: Function,
     }): void {

package/src/api/uploads/__tests__/BaseUpload.test.js

@@ -296,6 +296,20 @@ describe('api/uploads/BaseUpload', () => {
             expect(upload.makePreflightRequest).not.toHaveBeenCalled();
         });
 
+        test('should call error callback on file on 409 if overwrite property is "error"', () => {
+            const error = new Error();
+            error.status = 409;
+            
+            upload.fileId = '123';
+            upload.overwrite = 'error';
+            upload.makePreflightRequest = jest.fn();
+            upload.errorCallback = jest.fn();
+
+            upload.preflightErrorHandler(error, () => {});
+
+            expect(upload.errorCallback).toHaveBeenCalledWith(error);
+        });
+
         test('should overwrite file on 409 if overwrite property is true', () => {
             upload.fileId = '123';
             upload.overwrite = true;

package/src/components/avatar/__tests__/Avatar.test.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react';
+import React, { act } from 'react';
 import { shallow, mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
 import { IntlShape } from 'react-intl';
 import { AvatarBase as Avatar } from '../Avatar';
 import AvatarImage from '../AvatarImage';

package/src/components/button/Button.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
+import { action } from 'storybook/actions';
 
 import * as vars from '../../styles/variables';
 
@@ -14,20 +13,7 @@ import Button from './Button';
 import notes from './Button.stories.md';
 
 export const regular = () => {
-    const selectIcon = select('icon', { None: undefined, Icon: 'Icon' }, undefined);
-    const selectChildren = select('children', { None: undefined, Text: 'Click Here' }, 'Click Here');
-    return (
-        <Button
-            icon={selectIcon === 'Icon' ? <Icon /> : undefined}
-            isDisabled={boolean('isDisabled', false)}
-            isLoading={boolean('isLoading', false)}
-            onClick={action('onClick called')}
-            showRadar={boolean('showRadar', false)}
-            size={select('size', { None: undefined, Large: 'large' }, undefined)}
-        >
-            {selectChildren ? 'Click Here' : null}
-        </Button>
-    );
+    return <Button onClick={action('onClick called')}>Click Here</Button>;
 };
 
 export const loading = () => <Button isLoading>Click Here</Button>;

package/src/components/button-group/ButtonGroup.stories.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { boolean } from '@storybook/addon-knobs';
 
 import Button from '../button/Button';
 import ButtonGroup from './ButtonGroup';
 import notes from './ButtonGroup.stories.md';
 
 export const regular = () => (
-    <ButtonGroup isDisabled={boolean('isDisabled', false)}>
+    <ButtonGroup>
         <Button>Add</Button>
         <Button>Update</Button>
         <Button>Remove</Button>

package/src/components/nav-sidebar/NavSidebar.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import * as React from 'react';
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import NavSidebar from './NavSidebar';
 import NavListCollapseHeader from './NavListCollapseHeader';
 import NavList from './NavList';

package/src/components/plain-button/PlainButton.stories.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { boolean } from '@storybook/addon-knobs';
 
 import Icon from '../../icons/general/IconCopy';
 import * as vars from '../../styles/variables';
@@ -9,7 +8,7 @@ import { ButtonType } from '../button';
 import notes from './PlainButton.stories.md';
 
 export const regular = () => (
-    <PlainButton isDisabled={boolean('isDisabled', false)} type={ButtonType.BUTTON}>
+    <PlainButton type={ButtonType.BUTTON}>
         Click Here
     </PlainButton>
 );

package/src/components/primary-button/PrimaryButton.stories.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react';
-import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
+import { action } from 'storybook/actions';
 
 import PrimaryButton from './PrimaryButton';
 import notes from './PrimaryButton.stories.md';
 
 export const regular = () => (
     <PrimaryButton
-        isDisabled={boolean('isDisabled', false)}
-        isLoading={boolean('isLoading', false)}
         onClick={action('onClick called')}
     >
         Click Here

package/src/components/time-input/__tests__/TimeInput.test.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { mount } from 'enzyme';
 import debounce from 'lodash/debounce';
 // @ts-ignore flow import

package/src/elements/common/stories/PreviewDialog.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-import { useArgs } from '@storybook/preview-api';
+import { useArgs } from 'storybook/preview-api';
 import { Button } from '@box/blueprint-web';
 import PreviewDialog from '../preview-dialog/PreviewDialog';
 

package/src/elements/common/stories/__tests__/PreviewDialog-visual.stories.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-
-import { expect, screen, userEvent, within } from '@storybook/test';
+import { useArgs } from 'storybook/preview-api';
+import { expect, screen, userEvent, within } from 'storybook/test';
 import { Button } from '@box/blueprint-web';
-import { useArgs } from '@storybook/preview-api';
 import PreviewDialog from '../../preview-dialog';
 
 import { addRootElement } from '../../../../utils/storybook';

package/src/elements/content-explorer/stories/ContentExplorer.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import ContentExplorerStories from './ContentExplorer.stories';
 

package/src/elements/content-explorer/stories/DeleteConfirmationDialog.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useArgs } from '@storybook/preview-api';
-
+import { useArgs } from 'storybook/preview-api';
 import { Button } from '@box/blueprint-web';
 import { addRootElement } from '../../../utils/storybook';
 

package/src/elements/content-explorer/stories/RenameDialog.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useArgs } from '@storybook/preview-api';
+import { useArgs } from 'storybook/preview-api';
 import { Button } from '@box/blueprint-web';
 
 import { addRootElement } from '../../../utils/storybook';

package/src/elements/content-explorer/stories/ShareDialog.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useArgs } from '@storybook/preview-api';
+import { useArgs } from 'storybook/preview-api';
 import { Button } from '@box/blueprint-web';
 
 import { ACCESS_COLLAB, ACCESS_COMPANY, ACCESS_OPEN } from '../../../constants';

package/src/elements/content-explorer/stories/tests/ContentExplorer-visual.stories.js

@@ -1,6 +1,5 @@
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
-import { expect, screen, userEvent, waitFor, within } from '@storybook/test';
-
 import ContentExplorer from '../../ContentExplorer';
 import { mockEmptyRootFolder, mockRootFolder } from '../../../common/__mocks__/mockRootFolder';
 import mockSubfolder from '../../../common/__mocks__/mockSubfolder';

package/src/elements/content-open-with/stories/ContentOpenWith.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import ContentOpenWithStories from './ContentOpenWith.stories';
 

package/src/elements/content-picker/ContentPicker.js

@@ -189,7 +189,6 @@ class ContentPicker extends Component<Props, State> {
         clearSelectedItemsOnNavigation: false,
         isHeaderLogoVisible: true,
         isPaginationVisible: true,
-        itemActions: [],
     };
 
     /**

package/src/elements/content-picker/ItemList.js

@@ -176,7 +176,7 @@ const ItemList = ({
                                     flexShrink={0}
                                 />
                             )}
-                            {itemActions && (
+                            {!!itemActions?.length && (
                                 <Column
                                     disableSort
                                     dataKey={FIELD_ID}

package/src/elements/content-picker/stories/ContentPicker.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import ContentPickerStories from './ContentPicker.stories';
 

package/src/elements/content-picker/stories/tests/ContentPicker-visual.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
 import ContentPicker from '../../ContentPicker';
 import { mockRootFolder, mockEmptyRootFolder } from '../../../common/__mocks__/mockRootFolder';
@@ -118,30 +118,6 @@ export const customActionButtons = {
     },
 };
 
-export const itemCustomActions = {
-    args: {
-        itemActions: [
-            {
-                label: 'alert',
-                onAction: () => {
-                    // eslint-disable-next-line no-alert
-                    alert('You clicked me!');
-                },
-            },
-        ],
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        await waitFor(async () => {
-            const moreOptions = await canvas.findAllByRole('button', { name: 'More options' });
-            await userEvent.click(moreOptions[0]);
-
-            const menuItem = await waitFor(() => document.querySelector('[role="menuitem"]'));
-            expect(menuItem).toBeInTheDocument();
-        });
-    },
-};
-
 export default {
     title: 'Elements/ContentPicker/tests/visual',
     component: ContentPicker,

package/src/elements/content-preview/stories/ContentPreview.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import ContentPreviewStories from './ContentPreview.stories';
 

package/src/elements/content-preview/stories/tests/ContentPreview-visual.stories.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { Notification } from '@box/blueprint-web';
 import { http, HttpResponse } from 'msw';
 

package/src/elements/content-sharing/stories/ContentSharing.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 
 <Meta />

package/src/elements/content-sidebar/stories/BoxAISideBar.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import BoxAISidebarStories from './BoxAISidebar.stories';
 

package/src/elements/content-sidebar/stories/ContentSidebar.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import ContentSidebarStories from './ContentSidebar.stories';
 

package/src/elements/content-sidebar/stories/MetadataSidebar.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import MetadataSidebarStories from './MetadataSidebar.stories';
 

package/src/elements/content-sidebar/stories/MetadataSidebarRedesign.stories.tsx

@@ -1,6 +1,6 @@
-import { type StoryObj, Meta } from '@storybook/react';
-import { fn, userEvent, within } from '@storybook/test';
 import React, { type ComponentProps } from 'react';
+import { type StoryObj, Meta } from '@storybook/react';
+import { fn, userEvent, within } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
 import type { HttpHandler } from 'msw';
 import MetadataSidebarRedesign from '../MetadataSidebarRedesign';

package/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx

@@ -1,5 +1,5 @@
-import { expect, within } from '@storybook/test';
 import { type StoryObj, type Meta } from '@storybook/react';
+import { expect, within } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
 import type { HttpHandler } from 'msw';
 import ContentSidebar from '../../ContentSidebar';

package/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx

@@ -1,7 +1,7 @@
 import { type ComponentProps } from 'react';
-import { http, HttpResponse } from 'msw';
-import { expect, userEvent, waitFor, within, fn, screen } from '@storybook/test';
 import { type StoryObj, Meta } from '@storybook/react';
+import { expect, userEvent, waitFor, within, fn, screen } from 'storybook/test';
+import { http, HttpResponse } from 'msw';
 import type { HttpHandler } from 'msw';
 import ContentSidebar from '../../ContentSidebar';
 import MetadataSidebarRedesign from '../../MetadataSidebarRedesign';

package/src/elements/content-uploader/ContentUploader.tsx

@@ -34,6 +34,7 @@ import {
     CLIENT_NAME_CONTENT_UPLOADER,
     DEFAULT_HOSTNAME_API,
     DEFAULT_HOSTNAME_UPLOAD,
+    ERROR_CODE_ITEM_NAME_IN_USE,
     ERROR_CODE_UPLOAD_FILE_LIMIT,
     STATUS_COMPLETE,
     STATUS_ERROR,
@@ -90,7 +91,7 @@ export interface ContentUploaderProps {
     onResume: (item: UploadItem) => void;
     onUpgradeCTAClick?: () => void;
     onUpload: (item?: UploadItem | BoxItem) => void;
-    overwrite: boolean;
+    overwrite: boolean | 'error';
     requestInterceptor?: (response: AxiosResponse) => void;
     responseInterceptor?: (config: AxiosRequestConfig) => void;
     rootFolderId: string;
@@ -1083,7 +1084,7 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
      */
     onClick = (item: UploadItem) => {
         const { chunked, isResumableUploadsEnabled, onClickCancel, onClickResume, onClickRetry } = this.props;
-        const { file, status } = item;
+        const { file, status, error } = item;
         const isChunkedUpload =
             chunked && !item.isFolder && file.size > CHUNKED_UPLOAD_MIN_SIZE_BYTES && isMultiputSupported();
         const isResumable = isResumableUploadsEnabled && isChunkedUpload && item.api.sessionId;
@@ -1097,7 +1098,10 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
                 onClickCancel(item);
                 break;
             case STATUS_ERROR:
-                if (isResumable) {
+                if (error?.code === ERROR_CODE_ITEM_NAME_IN_USE) {
+                    this.removeFileFromUploadQueue(item);
+                    onClickCancel(item);
+                } else if (isResumable) {
                     item.bytesUploadedOnLastResume = item.api.totalUploadedBytes;
                     this.resumeFile(item);
                     onClickResume(item);

package/src/elements/content-uploader/ItemAction.tsx

@@ -8,6 +8,7 @@ import { Size5, SurfaceStatusSurfaceSuccess } from '@box/blueprint-web-assets/to
 import IconInProgress from './IconInProgress';
 
 import {
+    ERROR_CODE_ITEM_NAME_IN_USE,
     ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED,
     STATUS_COMPLETE,
     STATUS_ERROR,
@@ -70,8 +71,13 @@ const ItemAction = ({
             }
             break;
         case STATUS_ERROR:
-            Icon = ArrowCurveForward;
-            tooltip = isResumableUploadsEnabled ? messages.resume : messages.retry;
+            if (code === ERROR_CODE_ITEM_NAME_IN_USE) {
+                Icon = XMark;
+                tooltip = messages.uploadsCancelButtonTooltip;
+            } else {
+                Icon = ArrowCurveForward;
+                tooltip = isResumableUploadsEnabled ? messages.resume : messages.retry;
+            }
             break;
         case STATUS_IN_PROGRESS:
         case STATUS_STAGED:

package/src/elements/content-uploader/stories/ContentUploader.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 import ContentUploaderStories from './ContentUploader.stories';
 

package/src/elements/content-uploader/stories/tests/ContentUploader-visual.stories.js

@@ -1,4 +1,4 @@
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
 
 import ContentUploader from '../../ContentUploader';