@strapi/upload 5.12.1 → 5.12.3

package/dist/admin/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js

@@ -0,0 +1,206 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+require('byte-size');
+require('date-fns');
+var getTrad = require('../../../utils/getTrad.js');
+require('qs');
+require('../../../constants.js');
+require('../../../utils/urlYupSchema.js');
+var AssetCard = require('../../AssetCard/AssetCard.js');
+var UploadingAssetCard = require('../../AssetCard/UploadingAssetCard.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Status = {
+    Idle: 'IDLE',
+    Uploading: 'UPLOADING',
+    Intermediate: 'INTERMEDIATE'
+};
+const PendingAssetStep = ({ addUploadedFiles, folderId, onClose, onEditAsset, onRemoveAsset, assets, onClickAddAsset, onCancelUpload, onUploadSucceed, trackedLocation })=>{
+    const assetCountRef = React__namespace.useRef(0);
+    const { formatMessage } = reactIntl.useIntl();
+    const { trackUsage } = strapiAdmin.useTracking();
+    const [uploadStatus, setUploadStatus] = React__namespace.useState(Status.Idle);
+    const handleSubmit = async (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        const assetsCountByType = assets.reduce((acc, asset)=>{
+            const { type } = asset;
+            if (type !== undefined && !acc[type]) {
+                acc[type] = 0;
+            }
+            if (type !== undefined) {
+                const accType = acc[type];
+                const currentCount = typeof accType === 'string' ? accType : accType.toString();
+                acc[type] = `${parseInt(currentCount, 10) + 1}`;
+            }
+            return acc;
+        }, {});
+        trackUsage('willAddMediaLibraryAssets', {
+            location: trackedLocation,
+            ...assetsCountByType
+        });
+        setUploadStatus(Status.Uploading);
+    };
+    const handleStatusChange = (status, file)=>{
+        if (status === 'success' || status === 'error') {
+            assetCountRef.current++;
+            // There's no "terminated" status. When all the files have called their
+            // onUploadSucceed callback, the parent component filters the asset list
+            // and closes the modal when the asset list is empty
+            if (assetCountRef.current === assets.length) {
+                assetCountRef.current = 0;
+                setUploadStatus(Status.Intermediate);
+            }
+        }
+        if (status === 'success') {
+            onUploadSucceed(file);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Header, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Title, {
+                    children: formatMessage({
+                        id: getTrad.getTrad('header.actions.add-assets'),
+                        defaultMessage: 'Add new assets'
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    direction: "column",
+                    alignItems: "stretch",
+                    gap: 7,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            justifyContent: "space-between",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                    direction: "column",
+                                    alignItems: "stretch",
+                                    gap: 0,
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            variant: "pi",
+                                            fontWeight: "bold",
+                                            textColor: "neutral800",
+                                            children: formatMessage({
+                                                id: getTrad.getTrad('list.assets.to-upload'),
+                                                defaultMessage: '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload'
+                                            }, {
+                                                number: assets.length
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            variant: "pi",
+                                            textColor: "neutral600",
+                                            children: formatMessage({
+                                                id: getTrad.getTrad('modal.upload-list.sub-header-subtitle'),
+                                                defaultMessage: 'Manage the assets before adding them to the Media Library'
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                    size: "S",
+                                    onClick: onClickAddAsset,
+                                    children: formatMessage({
+                                        id: getTrad.getTrad('header.actions.add-assets'),
+                                        defaultMessage: 'Add new assets'
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.KeyboardNavigable, {
+                            tagName: "article",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                                gap: 4,
+                                children: assets.map((asset)=>{
+                                    const assetKey = asset.url;
+                                    if (uploadStatus === Status.Uploading || uploadStatus === Status.Intermediate) {
+                                        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                                            col: 4,
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(UploadingAssetCard.UploadingAssetCard, {
+                                                // Props used to store the newly uploaded files
+                                                addUploadedFiles: addUploadedFiles,
+                                                asset: asset,
+                                                id: assetKey,
+                                                onCancel: onCancelUpload,
+                                                onStatusChange: (status)=>handleStatusChange(status, asset.rawFile),
+                                                size: "S",
+                                                folderId: folderId
+                                            })
+                                        }, assetKey);
+                                    }
+                                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                                        col: 4,
+                                        direction: "column",
+                                        alignItems: "stretch",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(AssetCard.AssetCard, {
+                                            asset: asset,
+                                            size: "S",
+                                            local: true,
+                                            alt: asset.name,
+                                            onEdit: onEditAsset,
+                                            onRemove: onRemoveAsset
+                                        }, assetKey)
+                                    }, assetKey);
+                                })
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Footer, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                        onClick: onClose,
+                        variant: "tertiary",
+                        children: formatMessage({
+                            id: 'app.components.Button.cancel',
+                            defaultMessage: 'cancel'
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                        onClick: handleSubmit,
+                        loading: uploadStatus === Status.Uploading,
+                        children: formatMessage({
+                            id: getTrad.getTrad('modal.upload-list.footer.button'),
+                            defaultMessage: 'Upload {number, plural, one {# asset} other {# assets}} to the library'
+                        }, {
+                            number: assets.length
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.PendingAssetStep = PendingAssetStep;
+//# sourceMappingURL=PendingAssetStep.js.map

package/dist/admin/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PendingAssetStep.js","sources":["../../../../../admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Button, Flex, Grid, KeyboardNavigable, Modal, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { AssetType } from '../../../constants';\nimport { getTrad } from '../../../utils';\nimport { AssetCard } from '../../AssetCard/AssetCard';\nimport { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard';\n\nimport type { File, RawFile } from '../../../../../shared/contracts/files';\n\nconst Status = {\n  Idle: 'IDLE',\n  Uploading: 'UPLOADING',\n  Intermediate: 'INTERMEDIATE',\n};\n\ninterface Asset extends File {\n  rawFile?: RawFile;\n  type?: AssetType;\n}\n\ninterface PendingAssetStepProps {\n  addUploadedFiles?: (files: File[]) => void;\n  folderId?: string | number | null;\n  onClose: () => void;\n  onEditAsset: (asset: File) => void;\n  onRemoveAsset: (asset: File) => void;\n  onAddAsset?: (asset: File) => void;\n  assets: Asset[];\n  onClickAddAsset: () => void;\n  onCancelUpload: (rawFile: RawFile) => void;\n  onUploadSucceed: (file: RawFile) => void;\n  trackedLocation?: string;\n  initialAssetsToAdd?: File[];\n}\n\nexport const PendingAssetStep = ({\n  addUploadedFiles,\n  folderId,\n  onClose,\n  onEditAsset,\n  onRemoveAsset,\n  assets,\n  onClickAddAsset,\n  onCancelUpload,\n  onUploadSucceed,\n  trackedLocation,\n}: PendingAssetStepProps) => {\n  const assetCountRef = React.useRef(0);\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const [uploadStatus, setUploadStatus] = React.useState(Status.Idle);\n\n  const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const assetsCountByType = assets.reduce(\n      (acc: Record<AssetType, string | number>, asset) => {\n        const { type } = asset;\n\n        if (type !== undefined && !acc[type]) {\n          acc[type] = 0;\n        }\n\n        if (type !== undefined) {\n          const accType = acc[type];\n          const currentCount = typeof accType === 'string' ? accType : accType.toString();\n          acc[type] = `${parseInt(currentCount, 10) + 1}`;\n        }\n\n        return acc;\n      },\n      {} as Record<AssetType, string | number>\n    );\n\n    trackUsage('willAddMediaLibraryAssets', {\n      location: trackedLocation!,\n      ...assetsCountByType,\n    });\n\n    setUploadStatus(Status.Uploading);\n  };\n\n  const handleStatusChange = (status: string, file: RawFile) => {\n    if (status === 'success' || status === 'error') {\n      assetCountRef.current++;\n\n      // There's no \"terminated\" status. When all the files have called their\n      // onUploadSucceed callback, the parent component filters the asset list\n      // and closes the modal when the asset list is empty\n      if (assetCountRef.current === assets.length) {\n        assetCountRef.current = 0;\n        setUploadStatus(Status.Intermediate);\n      }\n    }\n\n    if (status === 'success') {\n      onUploadSucceed(file);\n    }\n  };\n\n  return (\n    <>\n      <Modal.Header>\n        <Modal.Title>\n          {formatMessage({\n            id: getTrad('header.actions.add-assets'),\n            defaultMessage: 'Add new assets',\n          })}\n        </Modal.Title>\n      </Modal.Header>\n\n      <Modal.Body>\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={7}>\n          <Flex justifyContent=\"space-between\">\n            <Flex direction=\"column\" alignItems=\"stretch\" gap={0}>\n              <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\">\n                {formatMessage(\n                  {\n                    id: getTrad('list.assets.to-upload'),\n                    defaultMessage:\n                      '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload',\n                  },\n                  { number: assets.length }\n                )}\n              </Typography>\n              <Typography variant=\"pi\" textColor=\"neutral600\">\n                {formatMessage({\n                  id: getTrad('modal.upload-list.sub-header-subtitle'),\n                  defaultMessage: 'Manage the assets before adding them to the Media Library',\n                })}\n              </Typography>\n            </Flex>\n            <Button size=\"S\" onClick={onClickAddAsset}>\n              {formatMessage({\n                id: getTrad('header.actions.add-assets'),\n                defaultMessage: 'Add new assets',\n              })}\n            </Button>\n          </Flex>\n          <KeyboardNavigable tagName=\"article\">\n            <Grid.Root gap={4}>\n              {assets.map((asset) => {\n                const assetKey = asset.url;\n\n                if (uploadStatus === Status.Uploading || uploadStatus === Status.Intermediate) {\n                  return (\n                    <Grid.Item col={4} key={assetKey} direction=\"column\" alignItems=\"stretch\">\n                      <UploadingAssetCard\n                        // Props used to store the newly uploaded files\n                        addUploadedFiles={addUploadedFiles!}\n                        asset={asset}\n                        id={assetKey}\n                        onCancel={onCancelUpload}\n                        onStatusChange={(status) => handleStatusChange(status, asset.rawFile!)}\n                        size=\"S\"\n                        folderId={folderId}\n                      />\n                    </Grid.Item>\n                  );\n                }\n\n                return (\n                  <Grid.Item col={4} key={assetKey} direction=\"column\" alignItems=\"stretch\">\n                    <AssetCard\n                      asset={asset}\n                      size=\"S\"\n                      key={assetKey}\n                      local\n                      alt={asset.name}\n                      onEdit={onEditAsset}\n                      onRemove={onRemoveAsset}\n                    />\n                  </Grid.Item>\n                );\n              })}\n            </Grid.Root>\n          </KeyboardNavigable>\n        </Flex>\n      </Modal.Body>\n      <Modal.Footer>\n        <Button onClick={onClose} variant=\"tertiary\">\n          {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n        </Button>\n        <Button onClick={handleSubmit} loading={uploadStatus === Status.Uploading}>\n          {formatMessage(\n            {\n              id: getTrad('modal.upload-list.footer.button'),\n              defaultMessage:\n                'Upload {number, plural, one {# asset} other {# assets}} to the library',\n            },\n            { number: assets.length }\n          )}\n        </Button>\n      </Modal.Footer>\n    </>\n  );\n};\n"],"names":["Status","Idle","Uploading","Intermediate","PendingAssetStep","addUploadedFiles","folderId","onClose","onEditAsset","onRemoveAsset","assets","onClickAddAsset","onCancelUpload","onUploadSucceed","trackedLocation","assetCountRef","React","useRef","formatMessage","useIntl","trackUsage","useTracking","uploadStatus","setUploadStatus","useState","handleSubmit","e","preventDefault","stopPropagation","assetsCountByType","reduce","acc","asset","type","undefined","accType","currentCount","toString","parseInt","location","handleStatusChange","status","file","current","length","_jsxs","_Fragment","_jsx","Modal","Header","Title","id","getTrad","defaultMessage","Body","Flex","direction","alignItems","gap","justifyContent","Typography","variant","fontWeight","textColor","number","Button","size","onClick","KeyboardNavigable","tagName","Grid","Root","map","assetKey","url","Item","col","UploadingAssetCard","onCancel","onStatusChange","rawFile","AssetCard","local","alt","name","onEdit","onRemove","Footer","loading"],"mappings":"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"}

package/dist/admin/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.mjs

@@ -0,0 +1,185 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useTracking } from '@strapi/admin/strapi-admin';
+import { Modal, Flex, Typography, Button, KeyboardNavigable, Grid } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import 'byte-size';
+import 'date-fns';
+import { getTrad } from '../../../utils/getTrad.mjs';
+import 'qs';
+import '../../../constants.mjs';
+import '../../../utils/urlYupSchema.mjs';
+import { AssetCard } from '../../AssetCard/AssetCard.mjs';
+import { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard.mjs';
+
+const Status = {
+    Idle: 'IDLE',
+    Uploading: 'UPLOADING',
+    Intermediate: 'INTERMEDIATE'
+};
+const PendingAssetStep = ({ addUploadedFiles, folderId, onClose, onEditAsset, onRemoveAsset, assets, onClickAddAsset, onCancelUpload, onUploadSucceed, trackedLocation })=>{
+    const assetCountRef = React.useRef(0);
+    const { formatMessage } = useIntl();
+    const { trackUsage } = useTracking();
+    const [uploadStatus, setUploadStatus] = React.useState(Status.Idle);
+    const handleSubmit = async (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        const assetsCountByType = assets.reduce((acc, asset)=>{
+            const { type } = asset;
+            if (type !== undefined && !acc[type]) {
+                acc[type] = 0;
+            }
+            if (type !== undefined) {
+                const accType = acc[type];
+                const currentCount = typeof accType === 'string' ? accType : accType.toString();
+                acc[type] = `${parseInt(currentCount, 10) + 1}`;
+            }
+            return acc;
+        }, {});
+        trackUsage('willAddMediaLibraryAssets', {
+            location: trackedLocation,
+            ...assetsCountByType
+        });
+        setUploadStatus(Status.Uploading);
+    };
+    const handleStatusChange = (status, file)=>{
+        if (status === 'success' || status === 'error') {
+            assetCountRef.current++;
+            // There's no "terminated" status. When all the files have called their
+            // onUploadSucceed callback, the parent component filters the asset list
+            // and closes the modal when the asset list is empty
+            if (assetCountRef.current === assets.length) {
+                assetCountRef.current = 0;
+                setUploadStatus(Status.Intermediate);
+            }
+        }
+        if (status === 'success') {
+            onUploadSucceed(file);
+        }
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Modal.Header, {
+                children: /*#__PURE__*/ jsx(Modal.Title, {
+                    children: formatMessage({
+                        id: getTrad('header.actions.add-assets'),
+                        defaultMessage: 'Add new assets'
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Modal.Body, {
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    direction: "column",
+                    alignItems: "stretch",
+                    gap: 7,
+                    children: [
+                        /*#__PURE__*/ jsxs(Flex, {
+                            justifyContent: "space-between",
+                            children: [
+                                /*#__PURE__*/ jsxs(Flex, {
+                                    direction: "column",
+                                    alignItems: "stretch",
+                                    gap: 0,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            variant: "pi",
+                                            fontWeight: "bold",
+                                            textColor: "neutral800",
+                                            children: formatMessage({
+                                                id: getTrad('list.assets.to-upload'),
+                                                defaultMessage: '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload'
+                                            }, {
+                                                number: assets.length
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            variant: "pi",
+                                            textColor: "neutral600",
+                                            children: formatMessage({
+                                                id: getTrad('modal.upload-list.sub-header-subtitle'),
+                                                defaultMessage: 'Manage the assets before adding them to the Media Library'
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "S",
+                                    onClick: onClickAddAsset,
+                                    children: formatMessage({
+                                        id: getTrad('header.actions.add-assets'),
+                                        defaultMessage: 'Add new assets'
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(KeyboardNavigable, {
+                            tagName: "article",
+                            children: /*#__PURE__*/ jsx(Grid.Root, {
+                                gap: 4,
+                                children: assets.map((asset)=>{
+                                    const assetKey = asset.url;
+                                    if (uploadStatus === Status.Uploading || uploadStatus === Status.Intermediate) {
+                                        return /*#__PURE__*/ jsx(Grid.Item, {
+                                            col: 4,
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: /*#__PURE__*/ jsx(UploadingAssetCard, {
+                                                // Props used to store the newly uploaded files
+                                                addUploadedFiles: addUploadedFiles,
+                                                asset: asset,
+                                                id: assetKey,
+                                                onCancel: onCancelUpload,
+                                                onStatusChange: (status)=>handleStatusChange(status, asset.rawFile),
+                                                size: "S",
+                                                folderId: folderId
+                                            })
+                                        }, assetKey);
+                                    }
+                                    return /*#__PURE__*/ jsx(Grid.Item, {
+                                        col: 4,
+                                        direction: "column",
+                                        alignItems: "stretch",
+                                        children: /*#__PURE__*/ jsx(AssetCard, {
+                                            asset: asset,
+                                            size: "S",
+                                            local: true,
+                                            alt: asset.name,
+                                            onEdit: onEditAsset,
+                                            onRemove: onRemoveAsset
+                                        }, assetKey)
+                                    }, assetKey);
+                                })
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs(Modal.Footer, {
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        onClick: onClose,
+                        variant: "tertiary",
+                        children: formatMessage({
+                            id: 'app.components.Button.cancel',
+                            defaultMessage: 'cancel'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        onClick: handleSubmit,
+                        loading: uploadStatus === Status.Uploading,
+                        children: formatMessage({
+                            id: getTrad('modal.upload-list.footer.button'),
+                            defaultMessage: 'Upload {number, plural, one {# asset} other {# assets}} to the library'
+                        }, {
+                            number: assets.length
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { PendingAssetStep };
+//# sourceMappingURL=PendingAssetStep.mjs.map

package/dist/admin/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PendingAssetStep.mjs","sources":["../../../../../admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Button, Flex, Grid, KeyboardNavigable, Modal, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { AssetType } from '../../../constants';\nimport { getTrad } from '../../../utils';\nimport { AssetCard } from '../../AssetCard/AssetCard';\nimport { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard';\n\nimport type { File, RawFile } from '../../../../../shared/contracts/files';\n\nconst Status = {\n  Idle: 'IDLE',\n  Uploading: 'UPLOADING',\n  Intermediate: 'INTERMEDIATE',\n};\n\ninterface Asset extends File {\n  rawFile?: RawFile;\n  type?: AssetType;\n}\n\ninterface PendingAssetStepProps {\n  addUploadedFiles?: (files: File[]) => void;\n  folderId?: string | number | null;\n  onClose: () => void;\n  onEditAsset: (asset: File) => void;\n  onRemoveAsset: (asset: File) => void;\n  onAddAsset?: (asset: File) => void;\n  assets: Asset[];\n  onClickAddAsset: () => void;\n  onCancelUpload: (rawFile: RawFile) => void;\n  onUploadSucceed: (file: RawFile) => void;\n  trackedLocation?: string;\n  initialAssetsToAdd?: File[];\n}\n\nexport const PendingAssetStep = ({\n  addUploadedFiles,\n  folderId,\n  onClose,\n  onEditAsset,\n  onRemoveAsset,\n  assets,\n  onClickAddAsset,\n  onCancelUpload,\n  onUploadSucceed,\n  trackedLocation,\n}: PendingAssetStepProps) => {\n  const assetCountRef = React.useRef(0);\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const [uploadStatus, setUploadStatus] = React.useState(Status.Idle);\n\n  const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const assetsCountByType = assets.reduce(\n      (acc: Record<AssetType, string | number>, asset) => {\n        const { type } = asset;\n\n        if (type !== undefined && !acc[type]) {\n          acc[type] = 0;\n        }\n\n        if (type !== undefined) {\n          const accType = acc[type];\n          const currentCount = typeof accType === 'string' ? accType : accType.toString();\n          acc[type] = `${parseInt(currentCount, 10) + 1}`;\n        }\n\n        return acc;\n      },\n      {} as Record<AssetType, string | number>\n    );\n\n    trackUsage('willAddMediaLibraryAssets', {\n      location: trackedLocation!,\n      ...assetsCountByType,\n    });\n\n    setUploadStatus(Status.Uploading);\n  };\n\n  const handleStatusChange = (status: string, file: RawFile) => {\n    if (status === 'success' || status === 'error') {\n      assetCountRef.current++;\n\n      // There's no \"terminated\" status. When all the files have called their\n      // onUploadSucceed callback, the parent component filters the asset list\n      // and closes the modal when the asset list is empty\n      if (assetCountRef.current === assets.length) {\n        assetCountRef.current = 0;\n        setUploadStatus(Status.Intermediate);\n      }\n    }\n\n    if (status === 'success') {\n      onUploadSucceed(file);\n    }\n  };\n\n  return (\n    <>\n      <Modal.Header>\n        <Modal.Title>\n          {formatMessage({\n            id: getTrad('header.actions.add-assets'),\n            defaultMessage: 'Add new assets',\n          })}\n        </Modal.Title>\n      </Modal.Header>\n\n      <Modal.Body>\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={7}>\n          <Flex justifyContent=\"space-between\">\n            <Flex direction=\"column\" alignItems=\"stretch\" gap={0}>\n              <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\">\n                {formatMessage(\n                  {\n                    id: getTrad('list.assets.to-upload'),\n                    defaultMessage:\n                      '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload',\n                  },\n                  { number: assets.length }\n                )}\n              </Typography>\n              <Typography variant=\"pi\" textColor=\"neutral600\">\n                {formatMessage({\n                  id: getTrad('modal.upload-list.sub-header-subtitle'),\n                  defaultMessage: 'Manage the assets before adding them to the Media Library',\n                })}\n              </Typography>\n            </Flex>\n            <Button size=\"S\" onClick={onClickAddAsset}>\n              {formatMessage({\n                id: getTrad('header.actions.add-assets'),\n                defaultMessage: 'Add new assets',\n              })}\n            </Button>\n          </Flex>\n          <KeyboardNavigable tagName=\"article\">\n            <Grid.Root gap={4}>\n              {assets.map((asset) => {\n                const assetKey = asset.url;\n\n                if (uploadStatus === Status.Uploading || uploadStatus === Status.Intermediate) {\n                  return (\n                    <Grid.Item col={4} key={assetKey} direction=\"column\" alignItems=\"stretch\">\n                      <UploadingAssetCard\n                        // Props used to store the newly uploaded files\n                        addUploadedFiles={addUploadedFiles!}\n                        asset={asset}\n                        id={assetKey}\n                        onCancel={onCancelUpload}\n                        onStatusChange={(status) => handleStatusChange(status, asset.rawFile!)}\n                        size=\"S\"\n                        folderId={folderId}\n                      />\n                    </Grid.Item>\n                  );\n                }\n\n                return (\n                  <Grid.Item col={4} key={assetKey} direction=\"column\" alignItems=\"stretch\">\n                    <AssetCard\n                      asset={asset}\n                      size=\"S\"\n                      key={assetKey}\n                      local\n                      alt={asset.name}\n                      onEdit={onEditAsset}\n                      onRemove={onRemoveAsset}\n                    />\n                  </Grid.Item>\n                );\n              })}\n            </Grid.Root>\n          </KeyboardNavigable>\n        </Flex>\n      </Modal.Body>\n      <Modal.Footer>\n        <Button onClick={onClose} variant=\"tertiary\">\n          {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n        </Button>\n        <Button onClick={handleSubmit} loading={uploadStatus === Status.Uploading}>\n          {formatMessage(\n            {\n              id: getTrad('modal.upload-list.footer.button'),\n              defaultMessage:\n                'Upload {number, plural, one {# asset} other {# assets}} to the library',\n            },\n            { number: assets.length }\n          )}\n        </Button>\n      </Modal.Footer>\n    </>\n  );\n};\n"],"names":["Status","Idle","Uploading","Intermediate","PendingAssetStep","addUploadedFiles","folderId","onClose","onEditAsset","onRemoveAsset","assets","onClickAddAsset","onCancelUpload","onUploadSucceed","trackedLocation","assetCountRef","React","useRef","formatMessage","useIntl","trackUsage","useTracking","uploadStatus","setUploadStatus","useState","handleSubmit","e","preventDefault","stopPropagation","assetsCountByType","reduce","acc","asset","type","undefined","accType","currentCount","toString","parseInt","location","handleStatusChange","status","file","current","length","_jsxs","_Fragment","_jsx","Modal","Header","Title","id","getTrad","defaultMessage","Body","Flex","direction","alignItems","gap","justifyContent","Typography","variant","fontWeight","textColor","number","Button","size","onClick","KeyboardNavigable","tagName","Grid","Root","map","assetKey","url","Item","col","UploadingAssetCard","onCancel","onStatusChange","rawFile","AssetCard","local","alt","name","onEdit","onRemove","Footer","loading"],"mappings":";;;;;;;;;;;;;;AAaA,MAAMA,MAAS,GAAA;IACbC,IAAM,EAAA,MAAA;IACNC,SAAW,EAAA,WAAA;IACXC,YAAc,EAAA;AAChB,CAAA;AAsBO,MAAMC,mBAAmB,CAAC,EAC/BC,gBAAgB,EAChBC,QAAQ,EACRC,OAAO,EACPC,WAAW,EACXC,aAAa,EACbC,MAAM,EACNC,eAAe,EACfC,cAAc,EACdC,eAAe,EACfC,eAAe,EACO,GAAA;IACtB,MAAMC,aAAAA,GAAgBC,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAA;IACnC,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;IACvB,MAAM,CAACC,cAAcC,eAAgB,CAAA,GAAGP,MAAMQ,QAAQ,CAACxB,OAAOC,IAAI,CAAA;AAElE,IAAA,MAAMwB,eAAe,OAAOC,CAAAA,GAAAA;AAC1BA,QAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBD,QAAAA,CAAAA,CAAEE,eAAe,EAAA;AAEjB,QAAA,MAAMC,iBAAoBnB,GAAAA,MAAAA,CAAOoB,MAAM,CACrC,CAACC,GAAyCC,EAAAA,KAAAA,GAAAA;YACxC,MAAM,EAAEC,IAAI,EAAE,GAAGD,KAAAA;AAEjB,YAAA,IAAIC,SAASC,SAAa,IAAA,CAACH,GAAG,CAACE,KAAK,EAAE;gBACpCF,GAAG,CAACE,KAAK,GAAG,CAAA;AACd;AAEA,YAAA,IAAIA,SAASC,SAAW,EAAA;gBACtB,MAAMC,OAAAA,GAAUJ,GAAG,CAACE,IAAK,CAAA;AACzB,gBAAA,MAAMG,eAAe,OAAOD,OAAAA,KAAY,QAAWA,GAAAA,OAAAA,GAAUA,QAAQE,QAAQ,EAAA;gBAC7EN,GAAG,CAACE,KAAK,GAAG,CAAC,EAAEK,QAASF,CAAAA,YAAAA,EAAc,EAAM,CAAA,GAAA,CAAA,CAAE,CAAC;AACjD;YAEA,OAAOL,GAAAA;AACT,SAAA,EACA,EAAC,CAAA;AAGHX,QAAAA,UAAAA,CAAW,2BAA6B,EAAA;YACtCmB,QAAUzB,EAAAA,eAAAA;AACV,YAAA,GAAGe;AACL,SAAA,CAAA;AAEAN,QAAAA,eAAAA,CAAgBvB,OAAOE,SAAS,CAAA;AAClC,KAAA;IAEA,MAAMsC,kBAAAA,GAAqB,CAACC,MAAgBC,EAAAA,IAAAA,GAAAA;QAC1C,IAAID,MAAAA,KAAW,SAAaA,IAAAA,MAAAA,KAAW,OAAS,EAAA;AAC9C1B,YAAAA,aAAAA,CAAc4B,OAAO,EAAA;;;;AAKrB,YAAA,IAAI5B,aAAc4B,CAAAA,OAAO,KAAKjC,MAAAA,CAAOkC,MAAM,EAAE;AAC3C7B,gBAAAA,aAAAA,CAAc4B,OAAO,GAAG,CAAA;AACxBpB,gBAAAA,eAAAA,CAAgBvB,OAAOG,YAAY,CAAA;AACrC;AACF;AAEA,QAAA,IAAIsC,WAAW,SAAW,EAAA;YACxB5B,eAAgB6B,CAAAA,IAAAA,CAAAA;AAClB;AACF,KAAA;IAEA,qBACEG,IAAA,CAAAC,QAAA,EAAA;;AACE,0BAAAC,GAAA,CAACC,MAAMC,MAAM,EAAA;wCACXF,GAAA,CAACC,MAAME,KAAK,EAAA;8BACThC,aAAc,CAAA;AACbiC,wBAAAA,EAAAA,EAAIC,OAAQ,CAAA,2BAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA;;;AAIJ,0BAAAN,GAAA,CAACC,MAAMM,IAAI,EAAA;AACT,gBAAA,QAAA,gBAAAT,IAACU,CAAAA,IAAAA,EAAAA;oBAAKC,SAAU,EAAA,QAAA;oBAASC,UAAW,EAAA,SAAA;oBAAUC,GAAK,EAAA,CAAA;;sCACjDb,IAACU,CAAAA,IAAAA,EAAAA;4BAAKI,cAAe,EAAA,eAAA;;8CACnBd,IAACU,CAAAA,IAAAA,EAAAA;oCAAKC,SAAU,EAAA,QAAA;oCAASC,UAAW,EAAA,SAAA;oCAAUC,GAAK,EAAA,CAAA;;sDACjDX,GAACa,CAAAA,UAAAA,EAAAA;4CAAWC,OAAQ,EAAA,IAAA;4CAAKC,UAAW,EAAA,MAAA;4CAAOC,SAAU,EAAA,YAAA;sDAClD7C,aACC,CAAA;AACEiC,gDAAAA,EAAAA,EAAIC,OAAQ,CAAA,uBAAA,CAAA;gDACZC,cACE,EAAA;6CAEJ,EAAA;AAAEW,gDAAAA,MAAAA,EAAQtD,OAAOkC;AAAO,6CAAA;;sDAG5BG,GAACa,CAAAA,UAAAA,EAAAA;4CAAWC,OAAQ,EAAA,IAAA;4CAAKE,SAAU,EAAA,YAAA;sDAChC7C,aAAc,CAAA;AACbiC,gDAAAA,EAAAA,EAAIC,OAAQ,CAAA,uCAAA,CAAA;gDACZC,cAAgB,EAAA;AAClB,6CAAA;;;;8CAGJN,GAACkB,CAAAA,MAAAA,EAAAA;oCAAOC,IAAK,EAAA,GAAA;oCAAIC,OAASxD,EAAAA,eAAAA;8CACvBO,aAAc,CAAA;AACbiC,wCAAAA,EAAAA,EAAIC,OAAQ,CAAA,2BAAA,CAAA;wCACZC,cAAgB,EAAA;AAClB,qCAAA;;;;sCAGJN,GAACqB,CAAAA,iBAAAA,EAAAA;4BAAkBC,OAAQ,EAAA,SAAA;oDACzBtB,GAAA,CAACuB,KAAKC,IAAI,EAAA;gCAACb,GAAK,EAAA,CAAA;0CACbhD,MAAO8D,CAAAA,GAAG,CAAC,CAACxC,KAAAA,GAAAA;oCACX,MAAMyC,QAAAA,GAAWzC,MAAM0C,GAAG;AAE1B,oCAAA,IAAIpD,iBAAiBtB,MAAOE,CAAAA,SAAS,IAAIoB,YAAiBtB,KAAAA,MAAAA,CAAOG,YAAY,EAAE;wCAC7E,qBACE4C,GAAA,CAACuB,KAAKK,IAAI,EAAA;4CAACC,GAAK,EAAA,CAAA;4CAAkBpB,SAAU,EAAA,QAAA;4CAASC,UAAW,EAAA,SAAA;AAC9D,4CAAA,QAAA,gBAAAV,GAAC8B,CAAAA,kBAAAA,EAAAA;;gDAECxE,gBAAkBA,EAAAA,gBAAAA;gDAClB2B,KAAOA,EAAAA,KAAAA;gDACPmB,EAAIsB,EAAAA,QAAAA;gDACJK,QAAUlE,EAAAA,cAAAA;AACVmE,gDAAAA,cAAAA,EAAgB,CAACtC,MAAAA,GAAWD,kBAAmBC,CAAAA,MAAAA,EAAQT,MAAMgD,OAAO,CAAA;gDACpEd,IAAK,EAAA,GAAA;gDACL5D,QAAUA,EAAAA;;AATUmE,yCAAAA,EAAAA,QAAAA,CAAAA;AAa5B;oCAEA,qBACE1B,GAAA,CAACuB,KAAKK,IAAI,EAAA;wCAACC,GAAK,EAAA,CAAA;wCAAkBpB,SAAU,EAAA,QAAA;wCAASC,UAAW,EAAA,SAAA;AAC9D,wCAAA,QAAA,gBAAAV,GAACkC,CAAAA,SAAAA,EAAAA;4CACCjD,KAAOA,EAAAA,KAAAA;4CACPkC,IAAK,EAAA,GAAA;4CAELgB,KAAK,EAAA,IAAA;AACLC,4CAAAA,GAAAA,EAAKnD,MAAMoD,IAAI;4CACfC,MAAQ7E,EAAAA,WAAAA;4CACR8E,QAAU7E,EAAAA;AAJLgE,yCAAAA,EAAAA,QAAAA;AAJeA,qCAAAA,EAAAA,QAAAA,CAAAA;AAY5B,iCAAA;;;;;;AAKR,0BAAA5B,IAAA,CAACG,MAAMuC,MAAM,EAAA;;kCACXxC,GAACkB,CAAAA,MAAAA,EAAAA;wBAAOE,OAAS5D,EAAAA,OAAAA;wBAASsD,OAAQ,EAAA,UAAA;kCAC/B3C,aAAc,CAAA;4BAAEiC,EAAI,EAAA,8BAAA;4BAAgCE,cAAgB,EAAA;AAAS,yBAAA;;kCAEhFN,GAACkB,CAAAA,MAAAA,EAAAA;wBAAOE,OAAS1C,EAAAA,YAAAA;wBAAc+D,OAASlE,EAAAA,YAAAA,KAAiBtB,OAAOE,SAAS;kCACtEgB,aACC,CAAA;AACEiC,4BAAAA,EAAAA,EAAIC,OAAQ,CAAA,iCAAA,CAAA;4BACZC,cACE,EAAA;yBAEJ,EAAA;AAAEW,4BAAAA,MAAAA,EAAQtD,OAAOkC;AAAO,yBAAA;;;;;;AAMpC;;;;"}

package/dist/admin/components/UploadAssetDialog/UploadAssetDialog.js

@@ -0,0 +1,129 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var EditAssetContent = require('../EditAssetDialog/EditAssetContent.js');
+var AddAssetStep = require('./AddAssetStep/AddAssetStep.js');
+var PendingAssetStep = require('./PendingAssetStep/PendingAssetStep.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Steps = {
+    AddAsset: 'AddAsset',
+    PendingAsset: 'PendingAsset'
+};
+const UploadAssetDialog = ({ initialAssetsToAdd, folderId = null, onClose = ()=>{}, addUploadedFiles, trackedLocation, open, validateAssetsTypes = (_, cb)=>cb() })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const [step, setStep] = React__namespace.useState(initialAssetsToAdd ? Steps.PendingAsset : Steps.AddAsset);
+    const [assets, setAssets] = React__namespace.useState(initialAssetsToAdd || []);
+    const [assetToEdit, setAssetToEdit] = React__namespace.useState(undefined);
+    const handleAddToPendingAssets = (nextAssets)=>{
+        validateAssetsTypes(nextAssets, ()=>{
+            setAssets((prevAssets)=>prevAssets.concat(nextAssets));
+            setStep(Steps.PendingAsset);
+        });
+    };
+    const moveToAddAsset = ()=>{
+        setStep(Steps.AddAsset);
+    };
+    const handleCancelUpload = (file)=>{
+        const nextAssets = assets.filter((asset)=>asset.rawFile !== file);
+        setAssets(nextAssets);
+        // When there's no asset, transition to the AddAsset step
+        if (nextAssets.length === 0) {
+            moveToAddAsset();
+        }
+    };
+    const handleUploadSuccess = (file)=>{
+        const nextAssets = assets.filter((asset)=>asset.rawFile !== file);
+        setAssets(nextAssets);
+        if (nextAssets.length === 0) {
+            onClose();
+        }
+    };
+    const handleAssetEditValidation = (nextAsset)=>{
+        if (nextAsset && typeof nextAsset !== 'boolean') {
+            const nextAssets = assets.map((asset)=>asset === assetToEdit ? nextAsset : asset);
+            setAssets(nextAssets);
+        }
+        setAssetToEdit(undefined);
+    };
+    const handleClose = ()=>{
+        if (step === Steps.PendingAsset && assets.length > 0) {
+            // eslint-disable-next-line no-alert
+            const confirm = window.confirm(formatMessage({
+                id: 'window.confirm.close-modal.files',
+                defaultMessage: 'Are you sure? You have some files that have not been uploaded yet.'
+            }));
+            if (confirm) {
+                onClose();
+            }
+        } else {
+            onClose();
+        }
+    };
+    const handleRemoveAsset = (assetToRemove)=>{
+        const nextAssets = assets.filter((asset)=>asset !== assetToRemove);
+        setAssets(nextAssets);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Root, {
+        open: open,
+        onOpenChange: handleClose,
+        children: [
+            step === Steps.AddAsset && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(AddAssetStep.AddAssetStep, {
+                    onClose: onClose,
+                    onAddAsset: (assets)=>handleAddToPendingAssets(assets),
+                    trackedLocation: trackedLocation
+                })
+            }),
+            step === Steps.PendingAsset && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(PendingAssetStep.PendingAssetStep, {
+                    onClose: handleClose,
+                    assets: assets,
+                    onEditAsset: setAssetToEdit,
+                    onRemoveAsset: handleRemoveAsset,
+                    onClickAddAsset: moveToAddAsset,
+                    onCancelUpload: handleCancelUpload,
+                    onUploadSucceed: handleUploadSuccess,
+                    initialAssetsToAdd: initialAssetsToAdd,
+                    addUploadedFiles: addUploadedFiles,
+                    folderId: folderId,
+                    trackedLocation: trackedLocation
+                })
+            }),
+            assetToEdit && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(EditAssetContent.EditAssetContent, {
+                    onClose: handleAssetEditValidation,
+                    asset: assetToEdit,
+                    canUpdate: true,
+                    canCopyLink: false,
+                    canDownload: false,
+                    trackedLocation: trackedLocation
+                })
+            })
+        ]
+    });
+};
+
+exports.UploadAssetDialog = UploadAssetDialog;
+//# sourceMappingURL=UploadAssetDialog.js.map

package/dist/admin/components/UploadAssetDialog/UploadAssetDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadAssetDialog.js","sources":["../../../../admin/src/components/UploadAssetDialog/UploadAssetDialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { EditAssetContent } from '../EditAssetDialog/EditAssetContent';\n\nimport { AddAssetStep } from './AddAssetStep/AddAssetStep';\nimport { PendingAssetStep } from './PendingAssetStep/PendingAssetStep';\n\nimport type { File, RawFile } from '../../../../shared/contracts/files';\nimport type { AllowedFiles } from '../../utils';\n\nconst Steps = {\n  AddAsset: 'AddAsset',\n  PendingAsset: 'PendingAsset',\n};\n\ninterface FileWithRawFile extends Omit<File, 'id' | 'hash'> {\n  id?: string;\n  hash?: string;\n  rawFile: RawFile;\n}\n\ntype FileWithoutIdHash = Omit<File, 'id' | 'hash'>;\n\nexport interface Asset extends Omit<File, 'folder'> {\n  isLocal?: boolean;\n  rawFile?: RawFile;\n  folder?: File['folder'] & { id: number };\n}\n\nexport interface UploadAssetDialogProps {\n  addUploadedFiles?: (files: Asset[] | File[]) => void;\n  folderId?: string | number | null;\n  initialAssetsToAdd?: Asset[];\n  onClose: () => void;\n  open: boolean;\n  trackedLocation?: string;\n  validateAssetsTypes?: (\n    assets: FileWithoutIdHash[] | Asset[],\n    cb: (assets?: AllowedFiles[], error?: string) => void\n  ) => void;\n}\n\nexport const UploadAssetDialog = ({\n  initialAssetsToAdd,\n  folderId = null,\n  onClose = () => {},\n  addUploadedFiles,\n  trackedLocation,\n  open,\n  validateAssetsTypes = (_, cb) => cb(),\n}: UploadAssetDialogProps) => {\n  const { formatMessage } = useIntl();\n  const [step, setStep] = React.useState(initialAssetsToAdd ? Steps.PendingAsset : Steps.AddAsset);\n  const [assets, setAssets] = React.useState(initialAssetsToAdd || []);\n  const [assetToEdit, setAssetToEdit] = React.useState<File | Asset | undefined>(undefined);\n\n  const handleAddToPendingAssets = (nextAssets: Asset[]) => {\n    validateAssetsTypes(nextAssets, () => {\n      setAssets((prevAssets) => prevAssets.concat(nextAssets));\n      setStep(Steps.PendingAsset);\n    });\n  };\n\n  const moveToAddAsset = () => {\n    setStep(Steps.AddAsset);\n  };\n\n  const handleCancelUpload = (file: RawFile) => {\n    const nextAssets = assets.filter((asset) => asset.rawFile !== file);\n    setAssets(nextAssets);\n\n    // When there's no asset, transition to the AddAsset step\n    if (nextAssets.length === 0) {\n      moveToAddAsset();\n    }\n  };\n\n  const handleUploadSuccess = (file: RawFile) => {\n    const nextAssets = assets.filter((asset) => asset.rawFile !== file);\n    setAssets(nextAssets);\n\n    if (nextAssets.length === 0) {\n      onClose();\n    }\n  };\n\n  const handleAssetEditValidation = (nextAsset?: Asset | boolean | null) => {\n    if (nextAsset && typeof nextAsset !== 'boolean') {\n      const nextAssets = assets.map((asset) => (asset === assetToEdit ? nextAsset : asset));\n      setAssets(nextAssets);\n    }\n\n    setAssetToEdit(undefined);\n  };\n\n  const handleClose = () => {\n    if (step === Steps.PendingAsset && assets.length > 0) {\n      // eslint-disable-next-line no-alert\n      const confirm = window.confirm(\n        formatMessage({\n          id: 'window.confirm.close-modal.files',\n          defaultMessage: 'Are you sure? You have some files that have not been uploaded yet.',\n        })\n      );\n\n      if (confirm) {\n        onClose();\n      }\n    } else {\n      onClose();\n    }\n  };\n\n  const handleRemoveAsset = (assetToRemove: File) => {\n    const nextAssets = assets.filter((asset) => asset !== assetToRemove);\n    setAssets(nextAssets);\n  };\n\n  return (\n    <Modal.Root open={open} onOpenChange={handleClose}>\n      {step === Steps.AddAsset && (\n        <Modal.Content>\n          <AddAssetStep\n            onClose={onClose}\n            onAddAsset={(assets: FileWithRawFile[]) =>\n              handleAddToPendingAssets(assets as unknown as Asset[])\n            }\n            trackedLocation={trackedLocation}\n          />\n        </Modal.Content>\n      )}\n\n      {step === Steps.PendingAsset && (\n        <Modal.Content>\n          <PendingAssetStep\n            onClose={handleClose}\n            assets={assets}\n            onEditAsset={setAssetToEdit}\n            onRemoveAsset={handleRemoveAsset}\n            onClickAddAsset={moveToAddAsset}\n            onCancelUpload={handleCancelUpload}\n            onUploadSucceed={handleUploadSuccess}\n            initialAssetsToAdd={initialAssetsToAdd}\n            addUploadedFiles={addUploadedFiles}\n            folderId={folderId}\n            trackedLocation={trackedLocation}\n          />\n        </Modal.Content>\n      )}\n\n      {assetToEdit && (\n        <Modal.Content>\n          <EditAssetContent\n            onClose={handleAssetEditValidation}\n            asset={assetToEdit as Asset}\n            canUpdate\n            canCopyLink={false}\n            canDownload={false}\n            trackedLocation={trackedLocation}\n          />\n        </Modal.Content>\n      )}\n    </Modal.Root>\n  );\n};\n"],"names":["Steps","AddAsset","PendingAsset","UploadAssetDialog","initialAssetsToAdd","folderId","onClose","addUploadedFiles","trackedLocation","open","validateAssetsTypes","_","cb","formatMessage","useIntl","step","setStep","React","useState","assets","setAssets","assetToEdit","setAssetToEdit","undefined","handleAddToPendingAssets","nextAssets","prevAssets","concat","moveToAddAsset","handleCancelUpload","file","filter","asset","rawFile","length","handleUploadSuccess","handleAssetEditValidation","nextAsset","map","handleClose","confirm","window","id","defaultMessage","handleRemoveAsset","assetToRemove","_jsxs","Modal","Root","onOpenChange","_jsx","Content","AddAssetStep","onAddAsset","PendingAssetStep","onEditAsset","onRemoveAsset","onClickAddAsset","onCancelUpload","onUploadSucceed","EditAssetContent","canUpdate","canCopyLink","canDownload"],"mappings":"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"}