@strapi/upload 0.0.0-experimental.abc → 0.0.0-experimental.af7e4e2471a04cc7f17b8ed3474530810efc02bc

package/dist/_chunks/{index-Sh4Ok2WQ.mjs → App-C5068OP3.mjs}

@@ -1,38 +1,36 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { useState, useRef, lazy, useEffect, Suspense } from "react";
 import { ConfirmDialog, useNotification, useFetchClient, useTracking, useQueryParams, Layouts, Page, SearchInput, Pagination } from "@strapi/admin/strapi-admin";
 import { useIntl } from "react-intl";
 import { useLocation, NavLink, useNavigate, Link as Link$1, Routes, Route } from "react-router-dom";
-import { g as getTrad, a as getFolderURL, u as useFolderCard, A as AssetDefinition, F as FolderDefinition, b as useBulkRemove, p as pluginId, c as useFolderStructure, S as SelectTree, n as normalizeAPIError, E as EmptyAssets, d as FilterPopover, e as displayedFilters, f as FilterList, B as BreadcrumbsDefinition, h as Breadcrumbs, i as useMediaLibraryPermissions, j as usePersistentState, v as viewOptions, l as localStorageKeys, k as useAssets, m as useFolders, o as containsAssetFilter, q as useFolder, r as useSelectionState, s as SortPicker, T as TableList, t as FolderGridList, w as FolderCard, x as FolderCardBody, y as FolderCardBodyAction, z as AssetGridList, U as UploadAssetDialog, C as EditFolderDialog, D as EditAssetDialog, G as useConfig } from "./index-CWKAMMzh.mjs";
+import { g as getTrad, a as getFolderURL, u as useFolderCard, b as useBulkRemove, p as pluginId, c as useFolderStructure, S as SelectTree, n as normalizeAPIError, E as EmptyAssets, F as FilterPopover, d as displayedFilters, e as FilterList, B as Breadcrumbs, f as useMediaLibraryPermissions, h as usePersistentState, v as viewOptions, l as localStorageKeys, i as useAssets, j as useFolders, k as containsAssetFilter, m as useFolder, o as useSelectionState, q as SortPicker, T as TableList, r as FolderGridList, s as FolderCard, t as FolderCardBody, w as FolderCardBodyAction, A as AssetGridList, U as UploadAssetDialog, x as EditFolderDialog, y as EditAssetDialog, z as useConfig } from "./index-DfCj4ffr.mjs";
 import "byte-size";
 import "date-fns";
 import { stringify } from "qs";
 import { Box, Checkbox, Dialog, Button, Modal, Flex, Loader, Grid, Field, Typography, Popover, Link, IconButton, VisuallyHidden, Divider } from "@strapi/design-system";
 import { Trash, Folder, Plus, Filter, ArrowLeft, Cog, List, GridFour, Pencil } from "@strapi/icons";
 import { styled } from "styled-components";
-import PropTypes from "prop-types";
 import { Formik, Form } from "formik";
 import isEmpty from "lodash/isEmpty";
 import { useQueryClient, useMutation } from "react-query";
 import { EmptyPermissions } from "@strapi/icons/symbols";
 const getBreadcrumbDataML = (folder, { pathname, query }) => {
-  let data = [
+  const data = [
     {
       id: null,
       label: { id: getTrad("plugin.name"), defaultMessage: "Media Library" },
-      href: folder ? getFolderURL(pathname, query) : void 0
+      href: folder ? getFolderURL(pathname, query || {}) : void 0
     }
   ];
-  if (folder?.parent?.parent) {
+  if (folder?.parent && typeof folder?.parent !== "number" && folder?.parent?.parent) {
     data.push([]);
   }
-  if (folder?.parent) {
+  if (folder?.parent && typeof folder.parent !== "number") {
     data.push({
       id: folder.parent.id,
       label: folder.parent.name,
-      href: getFolderURL(pathname, query, {
-        folder: folder.parent.id,
+      href: getFolderURL(pathname, query || {}, {
+        folder: folder.parent.id?.toString(),
         folderPath: folder.parent.path
       })
     });
@@ -61,10 +59,6 @@ const BulkDeleteButton = ({ selected, onSuccess }) => {
     /* @__PURE__ */ jsx(ConfirmDialog, { onConfirm: handleConfirmRemove })
   ] });
 };
-BulkDeleteButton.propTypes = {
-  selected: PropTypes.arrayOf(AssetDefinition, FolderDefinition).isRequired,
-  onSuccess: PropTypes.func.isRequired
-};
 const useBulkMove = () => {
   const { formatMessage } = useIntl();
   const { toggleNotification } = useNotification();
@@ -104,7 +98,7 @@ const useBulkMove = () => {
   const move = (destinationFolderId, filesAndFolders) => mutation.mutateAsync({ destinationFolderId, filesAndFolders });
   return { ...mutation, move };
 };
-const BulkMoveDialog = ({ onClose, selected, currentFolder }) => {
+const BulkMoveDialog = ({ onClose, selected = [], currentFolder }) => {
   const { formatMessage } = useIntl();
   const { data: folderStructure, isLoading } = useFolderStructure();
   const { move } = useBulkMove();
@@ -113,16 +107,24 @@ const BulkMoveDialog = ({ onClose, selected, currentFolder }) => {
   }
   const handleSubmit = async (values, { setErrors }) => {
     try {
-      await move(values.destination.value, selected);
-      onClose();
+      if (typeof values.destination !== "string") {
+        const destinationValue = values.destination.value;
+        await move(destinationValue, selected);
+        onClose();
+      }
     } catch (error) {
       const normalizedError = normalizeAPIError(error);
-      const formikErrors = normalizedError.errors.reduce((acc, error2) => {
-        acc[error2.values?.path?.length || "destination"] = error2.defaultMessage;
-        return acc;
-      }, {});
-      if (!isEmpty(formikErrors)) {
-        setErrors(formikErrors);
+      if (normalizedError && "errors" in normalizedError) {
+        const formikErrors = normalizedError.errors?.reduce(
+          (acc, error2) => {
+            acc[error2.values?.path?.length || "destination"] = error2.defaultMessage;
+            return acc;
+          },
+          {}
+        );
+        if (!isEmpty(formikErrors)) {
+          setErrors(formikErrors);
+        }
       }
     }
   };
@@ -155,7 +157,7 @@ const BulkMoveDialog = ({ onClose, selected, currentFolder }) => {
           onChange: (value) => {
             setFieldValue("destination", value);
           },
-          defaultValue: values.destination,
+          defaultValue: typeof values.destination !== "string" ? values.destination : void 0,
           name: "destination",
           menuPortalTarget: document.querySelector("body"),
           inputId: "folder-destination",
@@ -171,18 +173,13 @@ const BulkMoveDialog = ({ onClose, selected, currentFolder }) => {
     ] })
   ] }) }) });
 };
-BulkMoveDialog.defaultProps = {
-  currentFolder: void 0,
-  selected: []
-};
-BulkMoveDialog.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  currentFolder: FolderDefinition,
-  selected: PropTypes.arrayOf(FolderDefinition, AssetDefinition)
-};
-const BulkMoveButton = ({ selected, onSuccess, currentFolder }) => {
+const BulkMoveButton = ({
+  selected = [],
+  onSuccess,
+  currentFolder
+}) => {
   const { formatMessage } = useIntl();
-  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
   const handleConfirmMove = () => {
     setShowConfirmDialog(false);
     onSuccess();
@@ -199,17 +196,11 @@ const BulkMoveButton = ({ selected, onSuccess, currentFolder }) => {
     )
   ] });
 };
-BulkMoveButton.defaultProps = {
-  currentFolder: void 0,
-  selected: []
-};
-BulkMoveButton.propTypes = {
-  onSuccess: PropTypes.func.isRequired,
-  currentFolder: FolderDefinition,
-  selected: PropTypes.arrayOf(AssetDefinition, FolderDefinition)
-};
-const BulkActions = ({ selected, onSuccess, currentFolder }) => {
+const BulkActions = ({ selected = [], onSuccess, currentFolder }) => {
   const { formatMessage } = useIntl();
+  const numberAssets = selected?.reduce(function(_this, val) {
+    return val?.type === "folder" && "files" in val && val?.files && "count" in val.files ? _this + val?.files?.count : _this + 1;
+  }, 0);
   return /* @__PURE__ */ jsxs(Flex, { gap: 2, paddingBottom: 5, children: [
     /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage(
       {
@@ -217,24 +208,32 @@ const BulkActions = ({ selected, onSuccess, currentFolder }) => {
         defaultMessage: "{numberFolders, plural, one {1 folder} other {# folders}} - {numberAssets, plural, one {1 asset} other {# assets}} selected"
       },
       {
-        numberFolders: selected.filter(({ type }) => type === "folder").length,
-        numberAssets: selected.filter(({ type }) => type === "asset").length
+        numberFolders: selected?.filter(({ type }) => type === "folder").length,
+        numberAssets
       }
     ) }),
-    /* @__PURE__ */ jsx(BulkDeleteButton, { selected, onSuccess }),
-    /* @__PURE__ */ jsx(BulkMoveButton, { currentFolder, selected, onSuccess })
+    /* @__PURE__ */ jsx(
+      BulkDeleteButton,
+      {
+        selected,
+        onSuccess
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BulkMoveButton,
+      {
+        currentFolder,
+        selected,
+        onSuccess
+      }
+    )
   ] });
 };
-BulkActions.defaultProps = {
-  currentFolder: void 0,
-  selected: []
-};
-BulkActions.propTypes = {
-  onSuccess: PropTypes.func.isRequired,
-  currentFolder: FolderDefinition,
-  selected: PropTypes.arrayOf(AssetDefinition, FolderDefinition)
-};
-const getContentIntlMessage = ({ isFiltering, canCreate, canRead }) => {
+const getContentIntlMessage = ({
+  isFiltering,
+  canCreate,
+  canRead
+}) => {
   if (isFiltering) {
     return {
       id: "list.assets-empty.title-withSearch",
@@ -258,7 +257,12 @@ const getContentIntlMessage = ({ isFiltering, canCreate, canRead }) => {
     defaultMessage: "No permissions to view"
   };
 };
-const EmptyOrNoPermissions = ({ canCreate, isFiltering, canRead, onActionClick }) => {
+const EmptyOrNoPermissions = ({
+  canCreate,
+  isFiltering,
+  canRead,
+  onActionClick
+}) => {
   const { formatMessage } = useIntl();
   const content = getContentIntlMessage({ isFiltering, canCreate, canRead });
   return /* @__PURE__ */ jsx(
@@ -276,12 +280,6 @@ const EmptyOrNoPermissions = ({ canCreate, isFiltering, canRead, onActionClick }
     }
   );
 };
-EmptyOrNoPermissions.propTypes = {
-  canCreate: PropTypes.bool.isRequired,
-  canRead: PropTypes.bool.isRequired,
-  isFiltering: PropTypes.bool.isRequired,
-  onActionClick: PropTypes.func.isRequired
-};
 const Filters = () => {
   const [open, setOpen] = React.useState(false);
   const { formatMessage } = useIntl();
@@ -320,9 +318,9 @@ const Filters = () => {
   ] });
 };
 const Header = ({
-  breadcrumbs,
+  breadcrumbs = null,
   canCreate,
-  folder,
+  folder = null,
   onToggleEditFolderDialog,
   onToggleUploadAssetDialog
 }) => {
@@ -331,8 +329,8 @@ const Header = ({
   const [{ query }] = useQueryParams();
   const backQuery = {
     ...query,
-    folder: folder?.parent?.id ?? void 0,
-    folderPath: folder?.parent?.path ?? void 0
+    folder: folder?.parent && typeof folder.parent !== "number" && folder.parent.id ? folder.parent.id : void 0,
+    folderPath: folder?.parent && typeof folder.parent !== "number" && folder.parent.path ? folder.parent.path : void 0
   };
   return /* @__PURE__ */ jsx(
     Layouts.Header,
@@ -341,10 +339,9 @@ const Header = ({
         id: getTrad("plugin.name"),
         defaultMessage: `Media Library`
       }),
-      subtitle: breadcrumbs && folder && /* @__PURE__ */ jsx(
+      subtitle: breadcrumbs && typeof breadcrumbs !== "boolean" && folder && /* @__PURE__ */ jsx(
         Breadcrumbs,
         {
-          tag: "nav",
           label: formatMessage({
             id: getTrad("header.breadcrumbs.nav.label"),
             defaultMessage: "Folders navigation"
@@ -378,17 +375,6 @@ const Header = ({
     }
   );
 };
-Header.defaultProps = {
-  breadcrumbs: false,
-  folder: null
-};
-Header.propTypes = {
-  breadcrumbs: PropTypes.oneOfType([BreadcrumbsDefinition, PropTypes.bool]),
-  canCreate: PropTypes.bool.isRequired,
-  folder: FolderDefinition,
-  onToggleEditFolderDialog: PropTypes.func.isRequired,
-  onToggleUploadAssetDialog: PropTypes.func.isRequired
-};
 const BoxWithHeight = styled(Box)`
   height: 3.2rem;
   display: flex;
@@ -415,7 +401,7 @@ const MediaLibrary = () => {
     canConfigureView,
     isLoading: permissionsLoading
   } = useMediaLibraryPermissions();
-  const currentFolderToEditRef = useRef();
+  const currentFolderToEditRef = React.useRef();
   const { formatMessage } = useIntl();
   const { pathname } = useLocation();
   const { trackUsage } = useTracking();
@@ -426,7 +412,7 @@ const MediaLibrary = () => {
   const {
     data: assetsData,
     isLoading: assetsLoading,
-    errors: assetsError
+    error: assetsError
   } = useAssets({
     skipWhen: !canRead,
     query
@@ -434,7 +420,7 @@ const MediaLibrary = () => {
   const {
     data: foldersData,
     isLoading: foldersLoading,
-    errors: foldersError
+    error: foldersError
   } = useFolders({
     enabled: canRead && assetsData?.pagination?.page === 1 && !containsAssetFilter(query),
     query
@@ -446,13 +432,16 @@ const MediaLibrary = () => {
   } = useFolder(query?.folder, {
     enabled: canRead && !!query?.folder
   });
-  if (currentFolderError?.response?.status === 404) {
+  if (currentFolderError?.name === "NotFoundError") {
     navigate(pathname);
   }
   const folders = foldersData?.map((folder) => ({
     ...folder,
     type: "folder",
-    folderURL: getFolderURL(pathname, query, folder.id),
+    folderURL: getFolderURL(pathname, query, {
+      folder: folder.id.toString(),
+      folderPath: folder.path
+    }),
     isSelectable: canUpdate
   })) ?? [];
   const folderCount = folders?.length || 0;
@@ -460,11 +449,14 @@ const MediaLibrary = () => {
   const assetCount = assets?.length ?? 0;
   const totalAssetCount = assetsData?.pagination?.total;
   const isLoading = isCurrentFolderLoading || foldersLoading || permissionsLoading || assetsLoading;
-  const [showUploadAssetDialog, setShowUploadAssetDialog] = useState(false);
-  const [showEditFolderDialog, setShowEditFolderDialog] = useState(false);
-  const [assetToEdit, setAssetToEdit] = useState(void 0);
-  const [folderToEdit, setFolderToEdit] = useState(void 0);
-  const [selected, { selectOne, selectAll }] = useSelectionState(["type", "id"], []);
+  const [showUploadAssetDialog, setShowUploadAssetDialog] = React.useState(false);
+  const [showEditFolderDialog, setShowEditFolderDialog] = React.useState(false);
+  const [assetToEdit, setAssetToEdit] = React.useState(void 0);
+  const [folderToEdit, setFolderToEdit] = React.useState(void 0);
+  const [selected, { selectOne, selectAll }] = useSelectionState(
+    ["type", "id"],
+    []
+  );
   const indeterminateBulkSelect = selected?.length > 0 && selected?.length !== assetCount + folderCount;
   const toggleUploadAssetDialog = () => setShowUploadAssetDialog((prev) => !prev);
   const toggleEditFolderDialog = ({ created = false } = {}) => {
@@ -501,7 +493,7 @@ const MediaLibrary = () => {
     }
   };
   const handleAssetDeleted = (numberOfAssets) => {
-    if (numberOfAssets === assetCount && assetsData.pagination.page === assetsData.pagination.pageCount && assetsData.pagination.page > 1) {
+    if (numberOfAssets === assetCount && assetsData?.pagination?.page === assetsData?.pagination?.pageCount && assetsData?.pagination?.page && assetsData.pagination.page > 1) {
       setQuery({
         ...query,
         page: assetsData.pagination.page - 1
@@ -523,7 +515,10 @@ const MediaLibrary = () => {
       /* @__PURE__ */ jsx(
         Header,
         {
-          breadcrumbs: !isCurrentFolderLoading && getBreadcrumbDataML(currentFolder, { pathname, query }),
+          breadcrumbs: !isCurrentFolderLoading ? getBreadcrumbDataML(currentFolder, {
+            pathname,
+            query
+          }) : null,
           canCreate,
           onToggleEditFolderDialog: toggleEditFolderDialog,
           onToggleUploadAssetDialog: toggleUploadAssetDialog,
@@ -627,7 +622,7 @@ const MediaLibrary = () => {
             folderCount,
             indeterminate: indeterminateBulkSelect,
             onChangeSort: handleChangeSort,
-            onChangeFolder: (folderID, folderPath) => navigate(getFolderURL(pathname, query, { folder: folderID, folderPath })),
+            onChangeFolder: (folderID, folderPath) => navigate(getFolderURL(pathname, query, { folder: folderID.toString(), folderPath })),
             onEditAsset: setAssetToEdit,
             onEditFolder: handleEditFolder,
             onSelectOne: selectOne,
@@ -660,7 +655,7 @@ const MediaLibrary = () => {
                   (currentFolder2) => currentFolder2.id === folder.id
                 );
                 const url = getFolderURL(pathname, query, {
-                  folder: folder?.id,
+                  folder: folder?.id.toString(),
                   folderPath: folder?.path
                 });
                 return /* @__PURE__ */ jsx(
@@ -676,7 +671,7 @@ const MediaLibrary = () => {
                         ariaLabel: folder.name,
                         id: `folder-${folder.id}`,
                         to: url,
-                        startAction: selectOne && folder.isSelectable ? /* @__PURE__ */ jsx(
+                        startAction: folder.isSelectable ? /* @__PURE__ */ jsx(
                           FolderCardCheckbox,
                           {
                             "data-testid": `folder-checkbox-${folder.id}`,
@@ -687,7 +682,7 @@ const MediaLibrary = () => {
                         cardActions: /* @__PURE__ */ jsx(
                           IconButton,
                           {
-                            "aria-label": formatMessage({
+                            label: formatMessage({
                               id: getTrad("list.folder.edit"),
                               defaultMessage: "Edit folder"
                             }),
@@ -721,8 +716,8 @@ const MediaLibrary = () => {
                                   defaultMessage: "{folderCount, plural, =0 {# folder} one {# folder} other {# folders}}, {filesCount, plural, =0 {# asset} one {# asset} other {# assets}}"
                                 },
                                 {
-                                  folderCount: folder.children.count,
-                                  filesCount: folder.files.count
+                                  folderCount: folder.children?.count,
+                                  filesCount: folder.files?.count
                                 }
                               )
                             }
@@ -743,7 +738,9 @@ const MediaLibrary = () => {
               assets,
               onEditAsset: setAssetToEdit,
               onSelectAsset: selectOne,
-              selectedAssets: selected.filter(({ type }) => type === "asset"),
+              selectedAssets: selected.filter(
+                ({ type }) => type === "asset"
+              ),
               title: (
                 // Assets title should only appear if:
                 // - user is not filtering
@@ -760,7 +757,7 @@ const MediaLibrary = () => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs(Pagination.Root, { ...assetsData.pagination, children: [
+        /* @__PURE__ */ jsxs(Pagination.Root, { ...assetsData?.pagination, children: [
           /* @__PURE__ */ jsx(Pagination.PageSize, {}),
           /* @__PURE__ */ jsx(Pagination.Links, {})
         ] })
@@ -779,7 +776,7 @@ const MediaLibrary = () => {
       EditFolderDialog,
       {
         open: showEditFolderDialog,
-        onClose: handleEditFolderClose,
+        onClose: () => handleEditFolderClose(),
         folder: folderToEdit,
         parentFolderId: query?.folder,
         location: "upload"
@@ -804,7 +801,9 @@ const MediaLibrary = () => {
     )
   ] });
 };
-const ConfigureTheView = lazy(() => import("./index-DesgImRq.mjs"));
+const ConfigureTheView = React.lazy(
+  async () => import("./ConfigureTheView-DgN6B288.mjs").then((mod) => ({ default: mod.ConfigureTheView }))
+);
 const Upload = () => {
   const {
     config: { isLoading, isError, data: config }
@@ -812,11 +811,15 @@ const Upload = () => {
   const [{ rawQuery }, setQuery] = useQueryParams();
   const { formatMessage } = useIntl();
   const title = formatMessage({ id: getTrad("plugin.name"), defaultMessage: "Media Library" });
-  useEffect(() => {
+  React.useEffect(() => {
     if (isLoading || isError || rawQuery) {
       return;
     }
-    setQuery({ sort: config.sort, page: 1, pageSize: config.pageSize });
+    setQuery({
+      sort: config.sort,
+      page: 1,
+      pageSize: config.pageSize
+    });
   }, [isLoading, isError, config, rawQuery, setQuery]);
   if (isLoading) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -824,12 +827,18 @@ const Upload = () => {
       /* @__PURE__ */ jsx(Page.Loading, {})
     ] });
   }
-  return /* @__PURE__ */ jsx(Page.Main, { children: rawQuery ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Page.Loading, {}), children: /* @__PURE__ */ jsxs(Routes, { children: [
+  return /* @__PURE__ */ jsx(Page.Main, { children: rawQuery ? /* @__PURE__ */ jsx(React.Suspense, { fallback: /* @__PURE__ */ jsx(Page.Loading, {}), children: /* @__PURE__ */ jsxs(Routes, { children: [
     /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(MediaLibrary, {}) }),
-    /* @__PURE__ */ jsx(Route, { path: "configuration", element: /* @__PURE__ */ jsx(ConfigureTheView, { config }) })
+    /* @__PURE__ */ jsx(
+      Route,
+      {
+        path: "configuration",
+        element: /* @__PURE__ */ jsx(ConfigureTheView, { config })
+      }
+    )
   ] }) }) : null });
 };
 export {
-  Upload as default
+  Upload
 };
-//# sourceMappingURL=index-Sh4Ok2WQ.mjs.map
+//# sourceMappingURL=App-C5068OP3.mjs.map