@strapi/content-manager 0.0.0-experimental.a65a85fdea97faae8679d3ffc5f9d79af61abd26 → 0.0.0-experimental.a6728ad43ac70ae19dabb624dbfca1f2d9610a86

package/dist/_chunks/{ListViewPage-BwrZrPsh.js → ListViewPage-BBAC9aPu.js}

@@ -9,13 +9,13 @@ const isEqual = require("lodash/isEqual");
 const qs = require("qs");
 const reactIntl = require("react-intl");
 const reactRouterDom = require("react-router-dom");
-const styled = require("styled-components");
-const index = require("./index-X_2tafck.js");
+const styledComponents = require("styled-components");
+const index = require("./index-CBX6KyXv.js");
+const useDebounce = require("./useDebounce-CtcjDB3L.js");
 const isEmpty = require("lodash/isEmpty");
 const parseISO = require("date-fns/parseISO");
 const toString = require("lodash/toString");
-const urls = require("./urls-DzZya_gm.js");
-const relations = require("./relations-4pHtBrHJ.js");
+const relations = require("./relations-DIjTADIu.js");
 const hooks = require("./hooks-BAaaKPS_.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 function _interopNamespace(e) {
@@ -38,17 +38,9 @@ function _interopNamespace(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
 const isEqual__default = /* @__PURE__ */ _interopDefault(isEqual);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const isEmpty__default = /* @__PURE__ */ _interopDefault(isEmpty);
 const parseISO__default = /* @__PURE__ */ _interopDefault(parseISO);
 const toString__default = /* @__PURE__ */ _interopDefault(toString);
-const usePrev = (value) => {
-  const ref = React.useRef();
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-};
 const NOT_ALLOWED_FILTERS = [
   "json",
   "component",
@@ -155,6 +147,15 @@ const FiltersImpl = ({ disabled, schema }) => {
           }
         };
       }
+      if (attribute.type === "enumeration") {
+        filter = {
+          ...filter,
+          options: attribute.enum.map((value) => ({
+            label: value,
+            value
+          }))
+        };
+      }
       return filter;
     }).filter(Boolean).toSorted((a, b) => formatter.compare(a.label, b.label));
   }, [
@@ -197,18 +198,22 @@ const FiltersImpl = ({ disabled, schema }) => {
   );
 };
 const AdminUsersFilter = ({ name }) => {
-  const [page, setPage] = React__namespace.useState(1);
+  const [pageSize, setPageSize] = React__namespace.useState(10);
+  const [search, setSearch] = React__namespace.useState("");
   const { formatMessage } = reactIntl.useIntl();
+  const debouncedSearch = useDebounce.useDebounce(search, 300);
   const { data, isLoading } = strapiAdmin.useAdminUsers({
-    page
+    pageSize,
+    _q: debouncedSearch
   });
   const field = strapiAdmin.useField(name);
   const handleOpenChange = (isOpen) => {
     if (!isOpen) {
-      setPage(1);
+      setPageSize(10);
     }
   };
-  const users = data?.users || [];
+  const { users = [], pagination } = data ?? {};
+  const { pageCount = 1, page = 1 } = pagination ?? {};
   return /* @__PURE__ */ jsxRuntime.jsx(
     designSystem.Combobox,
     {
@@ -220,7 +225,11 @@ const AdminUsersFilter = ({ name }) => {
       onOpenChange: handleOpenChange,
       onChange: (value) => field.onChange(name, value),
       loading: isLoading,
-      onLoadMore: () => setPage((prev) => prev + 1),
+      onLoadMore: () => setPageSize(pageSize + 10),
+      hasMoreItems: page < pageCount,
+      onInputChange: (e) => {
+        setSearch(e.currentTarget.value);
+      },
       children: users.map((user) => {
         return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: user.id.toString(), children: index.getDisplayName(user) }, user.id);
       })
@@ -262,20 +271,16 @@ const SingleComponent = ({ content, mainField }) => {
   if (!mainField) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: content[mainField.name], children: /* @__PURE__ */ jsxRuntime.jsx(SingleComponentTypography, { textColor: "neutral800", ellipsis: true, children: /* @__PURE__ */ jsxRuntime.jsx(CellValue, { type: mainField.type, value: content[mainField.name] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: content[mainField.name], children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { maxWidth: "25rem", textColor: "neutral800", ellipsis: true, children: /* @__PURE__ */ jsxRuntime.jsx(CellValue, { type: mainField.type, value: content[mainField.name] }) }) });
 };
-const SingleComponentTypography = styled__default.default(designSystem.Typography)`
-  max-width: 250px;
-`;
 const RepeatableComponent = ({ content, mainField }) => {
   const { formatMessage } = reactIntl.useIntl();
   if (!mainField) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(MenuTrigger$1, { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Trigger, { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: content.length }),
-      " ",
       formatMessage(
         {
           id: "content-manager.containers.list.items",
@@ -284,25 +289,24 @@ const RepeatableComponent = ({ content, mainField }) => {
         { number: content.length }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Content, { children: content.map((item) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Item, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(RepeatableComponentTypography, { ellipsis: true, children: /* @__PURE__ */ jsxRuntime.jsx(CellValue, { type: mainField.type, value: item[mainField.name] }) }) }, item.id)) })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Content, { children: content.map((item) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Item, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { maxWidth: "50rem", ellipsis: true, children: /* @__PURE__ */ jsxRuntime.jsx(CellValue, { type: mainField.type, value: item[mainField.name] }) }) }, item.id)) })
   ] });
 };
-const RepeatableComponentTypography = styled__default.default(designSystem.Typography)`
-  max-width: 500px;
-`;
-const MenuTrigger$1 = styled__default.default(designSystem.Menu.Trigger)`
-  svg {
-    width: 0.6rem;
-    height: 0.4rem;
-  }
-`;
 const getFileExtension = (ext) => ext && ext[0] === "." ? ext.substring(1) : ext;
 const MediaSingle = ({ url, mime, alternativeText, name, ext, formats }) => {
-  const fileURL = urls.prefixFileUrlWithBackendUrl(url);
+  const fileURL = useDebounce.prefixFileUrlWithBackendUrl(url);
   if (mime.includes("image")) {
     const thumbnail = formats?.thumbnail?.url;
-    const mediaURL = urls.prefixFileUrlWithBackendUrl(thumbnail) || fileURL;
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Avatar, { src: mediaURL, alt: alternativeText || name, preview: true });
+    const mediaURL = useDebounce.prefixFileUrlWithBackendUrl(thumbnail) || fileURL;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Avatar.Item,
+      {
+        src: mediaURL,
+        alt: alternativeText || name,
+        fallback: alternativeText || name,
+        preview: true
+      }
+    );
   }
   const fileExtension = getFileExtension(ext);
   const fileName = name.length > 100 ? `${name.substring(0, 100)}...` : name;
@@ -312,7 +316,7 @@ const FileWrapper = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     designSystem.Flex,
     {
-      as: "span",
+      tag: "span",
       position: "relative",
       borderRadius: "50%",
       width: "26px",
@@ -326,12 +330,12 @@ const FileWrapper = ({ children }) => {
     }
   );
 };
-const FileTypography = styled__default.default(designSystem.Typography)`
+const FileTypography = styledComponents.styled(designSystem.Typography)`
   font-size: 0.9rem;
   line-height: 0.9rem;
 `;
 const MediaMultiple = ({ content }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.AvatarGroup, { children: content.map((file, index2) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Avatar.Group, { children: content.map((file, index2) => {
     const key = `${file.id}${index2}`;
     if (index2 === 3) {
       const remainingFiles = `+${content.length - 3}`;
@@ -344,11 +348,8 @@ const MediaMultiple = ({ content }) => {
   }) });
 };
 const RelationSingle = ({ mainField, content }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(TypographyMaxWidth$1, { textColor: "neutral800", ellipsis: true, children: relations.getRelationLabel(content, mainField) });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { maxWidth: "50rem", textColor: "neutral800", ellipsis: true, children: relations.getRelationLabel(content, mainField) });
 };
-const TypographyMaxWidth$1 = styled__default.default(designSystem.Typography)`
-  max-width: 500px;
-`;
 const RelationMultiple = ({ mainField, content, rowId, name }) => {
   const { model } = index.useDoc();
   const { formatMessage } = reactIntl.useIntl();
@@ -366,6 +367,7 @@ const RelationMultiple = ({ mainField, content, rowId, name }) => {
       refetchOnMountOrArgChange: true
     }
   );
+  const contentCount = Array.isArray(content) ? content.length : content.count;
   React__namespace.useEffect(() => {
     if (data) {
       notifyStatus(
@@ -377,23 +379,20 @@ const RelationMultiple = ({ mainField, content, rowId, name }) => {
     }
   }, [data, formatMessage, notifyStatus]);
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { onOpenChange: (isOpen2) => setIsOpen(isOpen2), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(MenuTrigger, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, wrap: "nowrap", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: content.count }),
-      formatMessage(
-        {
-          id: "content-manager.containers.list.items",
-          defaultMessage: "{number, plural, =0 {items} one {item} other {items}}"
-        },
-        { number: content.count }
-      )
-    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Trigger, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { style: { cursor: "pointer" }, textColor: "neutral800", fontWeight: "regular", children: contentCount > 0 ? formatMessage(
+      {
+        id: "content-manager.containers.list.items",
+        defaultMessage: "{number} {number, plural, =0 {items} one {item} other {items}}"
+      },
+      { number: contentCount }
+    ) : "-" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Content, { children: [
       isLoading && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Item, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true, children: formatMessage({
         id: index.getTranslation("ListViewTable.relation-loading"),
         defaultMessage: "Relations are loading"
       }) }) }),
       data?.results && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        data.results.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Item, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(TypographyMaxWidth$1, { ellipsis: true, children: relations.getRelationLabel(entry, mainField) }) }, entry.documentId)),
+        data.results.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Item, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { maxWidth: "50rem", ellipsis: true, children: relations.getRelationLabel(entry, mainField) }) }, entry.documentId)),
         data?.pagination && data?.pagination.total > 10 && /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.Menu.Item,
           {
@@ -409,15 +408,17 @@ const RelationMultiple = ({ mainField, content, rowId, name }) => {
     ] })
   ] });
 };
-const MenuTrigger = styled__default.default(designSystem.Menu.Trigger)`
-  svg {
-    width: 0.6rem;
-    height: 0.4rem;
-  }
-`;
 const CellContent = ({ content, mainField, attribute, rowId, name }) => {
   if (!hasContent(content, mainField, attribute)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: "-" });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Typography,
+      {
+        textColor: "neutral800",
+        paddingLeft: attribute.type === "relation" ? "1.6rem" : 0,
+        paddingRight: attribute.type === "relation" ? "1.6rem" : 0,
+        children: "-"
+      }
+    );
   }
   switch (attribute.type) {
     case "media":
@@ -437,14 +438,11 @@ const CellContent = ({ content, mainField, attribute, rowId, name }) => {
       }
       return /* @__PURE__ */ jsxRuntime.jsx(SingleComponent, { mainField, content });
     case "string":
-      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { description: content, children: /* @__PURE__ */ jsxRuntime.jsx(TypographyMaxWidth, { ellipsis: true, textColor: "neutral800", children: /* @__PURE__ */ jsxRuntime.jsx(CellValue, { type: attribute.type, value: content }) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { description: content, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { maxWidth: "30rem", ellipsis: true, textColor: "neutral800", children: /* @__PURE__ */ jsxRuntime.jsx(CellValue, { type: attribute.type, value: content }) }) });
     default:
-      return /* @__PURE__ */ jsxRuntime.jsx(TypographyMaxWidth, { ellipsis: true, textColor: "neutral800", children: /* @__PURE__ */ jsxRuntime.jsx(CellValue, { type: attribute.type, value: content }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { maxWidth: "30rem", ellipsis: true, textColor: "neutral800", children: /* @__PURE__ */ jsxRuntime.jsx(CellValue, { type: attribute.type, value: content }) });
   }
 };
-const TypographyMaxWidth = styled__default.default(designSystem.Typography)`
-  max-width: 300px;
-`;
 const hasContent = (content, mainField, attribute) => {
   if (attribute.type === "component") {
     if (attribute.repeatable || !mainField) {
@@ -460,6 +458,9 @@ const hasContent = (content, mainField, attribute) => {
     if (isSingleRelation(attribute.relation)) {
       return !isEmpty__default.default(content);
     }
+    if (Array.isArray(content)) {
+      return content.length > 0;
+    }
     return content?.count > 0;
   }
   if (["integer", "decimal", "float", "number"].includes(attribute.type)) {
@@ -472,8 +473,6 @@ const hasContent = (content, mainField, attribute) => {
 };
 const isSingleRelation = (type) => ["oneToOne", "manyToOne", "oneToOneMorph"].includes(type);
 const ViewSettingsMenu = (props) => {
-  const [isVisible, setIsVisible] = React__namespace.useState(false);
-  const cogButtonRef = React__namespace.useRef(null);
   const permissions = hooks.useTypedSelector(
     (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations ?? []
   );
@@ -482,52 +481,37 @@ const ViewSettingsMenu = (props) => {
   const {
     allowedActions: { canConfigureView }
   } = strapiAdmin.useRBAC(permissions);
-  const handleToggle = () => {
-    setIsVisible((prev) => !prev);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.IconButton,
       {
-        icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Cog, {}),
         label: formatMessage({
           id: "components.ViewSettings.tooltip",
           defaultMessage: "View Settings"
         }),
-        ref: cogButtonRef,
-        onClick: handleToggle
-      }
-    ),
-    isVisible && /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Popover,
-      {
-        placement: "bottom-end",
-        source: cogButtonRef,
-        onDismiss: handleToggle,
-        spacing: 4,
-        padding: 3,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "stretch", direction: "column", gap: 3, children: [
-          canConfigureView ? /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.LinkButton,
-            {
-              size: "S",
-              startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.ListPlus, {}),
-              variant: "secondary",
-              as: reactRouterDom.NavLink,
-              to: {
-                pathname: "configurations/list",
-                search: query.plugins ? qs.stringify({ plugins: query.plugins }, { encode: false }) : ""
-              },
-              children: formatMessage({
-                id: "app.links.configure-view",
-                defaultMessage: "Configure the view"
-              })
-            }
-          ) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(FieldPicker, { ...props })
-        ] })
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Cog, {})
       }
-    )
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Content, { side: "bottom", align: "end", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "stretch", direction: "column", padding: 3, gap: 3, children: [
+      canConfigureView ? /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.LinkButton,
+        {
+          size: "S",
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.ListPlus, {}),
+          variant: "secondary",
+          tag: reactRouterDom.NavLink,
+          to: {
+            pathname: "configurations/list",
+            search: query.plugins ? qs.stringify({ plugins: query.plugins }, { encode: false }) : ""
+          },
+          children: formatMessage({
+            id: "app.links.configure-view",
+            defaultMessage: "Configure the view"
+          })
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(FieldPicker, { ...props })
+    ] }) })
   ] });
 };
 const FieldPicker = ({ headers = [], resetHeaders, setHeaders }) => {
@@ -551,9 +535,9 @@ const FieldPicker = ({ headers = [], resetHeaders, setHeaders }) => {
   const handleReset = () => {
     resetHeaders();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { as: "fieldset", direction: "column", alignItems: "stretch", gap: 3, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "fieldset", direction: "column", alignItems: "stretch", gap: 3, borderWidth: 0, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "legend", variant: "pi", fontWeight: "bold", children: formatMessage({
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "legend", variant: "pi", fontWeight: "bold", children: formatMessage({
         id: "containers.list.displayedFields",
         defaultMessage: "Displayed fields"
       }) }),
@@ -564,38 +548,33 @@ const FieldPicker = ({ headers = [], resetHeaders, setHeaders }) => {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", children: columns.map((header) => {
       const isActive = headers.includes(header.name);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        ChackboxWrapper,
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Flex,
         {
           wrap: "wrap",
           gap: 2,
-          as: "label",
           background: isActive ? "primary100" : "transparent",
           hasRadius: true,
           padding: 2,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.BaseCheckbox,
-              {
-                onChange: () => handleChange(header.name),
-                value: isActive,
-                name: header.name
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontSize: 1, children: header.label })
-          ]
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Checkbox,
+            {
+              onCheckedChange: () => handleChange(header.name),
+              checked: isActive,
+              name: header.name,
+              children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontSize: 1, children: header.label })
+            }
+          )
         },
         header.name
       );
     }) })
   ] });
 };
-const ChackboxWrapper = styled__default.default(designSystem.Flex)`
-  :hover {
-    background-color: ${(props) => props.theme.colors.primary100};
-  }
-`;
 const { INJECT_COLUMN_IN_TABLE } = index.HOOKS;
+const LayoutsHeaderCustom = styledComponents.styled(strapiAdmin.Layouts.Header)`
+  overflow-wrap: anywhere;
+`;
 const ListViewPage = () => {
   const { trackUsage } = strapiAdmin.useTracking();
   const navigate = reactRouterDom.useNavigate();
@@ -605,7 +584,7 @@ const ListViewPage = () => {
   const { collectionType, model, schema } = index.useDoc();
   const { list } = index.useDocumentLayout(model);
   const [displayedHeaders, setDisplayedHeaders] = React__namespace.useState([]);
-  const listLayout = usePrev(list.layout);
+  const listLayout = useDebounce.usePrev(list.layout);
   React__namespace.useEffect(() => {
     if (!isEqual__default.default(listLayout, list.layout)) {
       setDisplayedHeaders(list.layout);
@@ -622,7 +601,7 @@ const ListViewPage = () => {
     sort: list.settings.defaultSortBy ? `${list.settings.defaultSortBy}:${list.settings.defaultSortOrder}` : ""
   });
   const params = React__namespace.useMemo(() => index.buildValidParams(query), [query]);
-  const { data, error, isLoading } = index.useGetAllDocumentsQuery({
+  const { data, error, isFetching } = index.useGetAllDocumentsQuery({
     model,
     params
   });
@@ -680,7 +659,7 @@ const ListViewPage = () => {
     }
     return formattedHeaders;
   }, [displayedHeaders, formatMessage, list, runHookWaterfall, schema?.options?.draftAndPublish]);
-  if (isLoading) {
+  if (isFetching) {
     return /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Page.Loading, {});
   }
   if (error) {
@@ -697,7 +676,7 @@ const ListViewPage = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(strapiAdmin.Page.Main, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Page.Title, { children: `${contentTypeTitle}` }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.HeaderLayout,
+      LayoutsHeaderCustom,
       {
         primaryAction: canCreate ? /* @__PURE__ */ jsxRuntime.jsx(CreateButton, {}) : null,
         subtitle: formatMessage(
@@ -712,7 +691,7 @@ const ListViewPage = () => {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.ActionLayout,
+      strapiAdmin.Layouts.Action,
       {
         endActions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(index.InjectionZone, { area: "listView.actions" }),
@@ -745,9 +724,9 @@ const ListViewPage = () => {
         ] })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ContentLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, direction: "column", alignItems: "stretch", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(strapiAdmin.Table.Root, { rows: results, headers: tableHeaders, isLoading, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Table.ActionBar, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, direction: "column", alignItems: "stretch", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(strapiAdmin.Table.Root, { rows: results, headers: tableHeaders, isLoading: isFetching, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableActionsBar, {}),
         /* @__PURE__ */ jsxRuntime.jsxs(strapiAdmin.Table.Content, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(strapiAdmin.Table.Head, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Table.HeaderCheckboxCell, {}),
@@ -805,10 +784,22 @@ const ListViewPage = () => {
     ] }) })
   ] });
 };
-const ActionsCell = styled__default.default(strapiAdmin.Table.Cell)`
+const ActionsCell = styledComponents.styled(strapiAdmin.Table.Cell)`
   display: flex;
   justify-content: flex-end;
 `;
+const TableActionsBar = () => {
+  const selectRow = strapiAdmin.useTable("TableActionsBar", (state) => state.selectRow);
+  const [{ query }] = strapiAdmin.useQueryParams();
+  const locale = query?.plugins?.i18n?.locale;
+  const prevLocale = useDebounce.usePrev(locale);
+  React__namespace.useEffect(() => {
+    if (prevLocale !== locale) {
+      selectRow([]);
+    }
+  }, [selectRow, prevLocale, locale]);
+  return /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Table.ActionBar, { children: /* @__PURE__ */ jsxRuntime.jsx(index.BulkActionsRenderer, {}) });
+};
 const CreateButton = ({ variant }) => {
   const { formatMessage } = reactIntl.useIntl();
   const { trackUsage } = strapiAdmin.useTracking();
@@ -817,7 +808,7 @@ const CreateButton = ({ variant }) => {
     designSystem.Button,
     {
       variant,
-      forwardedAs: reactRouterDom.Link,
+      tag: reactRouterDom.Link,
       onClick: () => {
         trackUsage("willCreateEntry", { status: "draft" });
       },
@@ -827,6 +818,8 @@ const CreateButton = ({ variant }) => {
         pathname: "create",
         search: qs.stringify({ plugins: query.plugins })
       },
+      minWidth: "max-content",
+      marginLeft: 2,
       children: formatMessage({
         id: index.getTranslation("HeaderLayout.button.label-add-entry"),
         defaultMessage: "Create new entry"
@@ -856,4 +849,4 @@ const ProtectedListViewPage = () => {
 };
 exports.ListViewPage = ListViewPage;
 exports.ProtectedListViewPage = ProtectedListViewPage;
-//# sourceMappingURL=ListViewPage-BwrZrPsh.js.map
+//# sourceMappingURL=ListViewPage-BBAC9aPu.js.map