@strapi/content-manager 0.0.0-experimental.7afdc9b682bc83a53ce599c4fb7c9e4506b31fff → 0.0.0-experimental.7bc5339b0393e53f9f568301594621e7fb466e2f

package/dist/_chunks/Preview-DwWET-X7.mjs

@@ -0,0 +1,278 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useNotification, useClipboard, useQueryParams, createContext, useRBAC, Page } from "@strapi/admin/strapi-admin";
+import { Box, Typography, Tabs, Grid, IconButton, Portal, FocusTrap, Flex } from "@strapi/design-system";
+import { useIntl } from "react-intl";
+import { Link as Link$1, useParams } from "react-router-dom";
+import { D as DocumentStatus, l as DocumentRBAC, d as buildValidParams, C as COLLECTION_TYPES, K as useGetPreviewUrlQuery, J as useDocument, h as useDocumentLayout } from "./index-BeYsz0Vi.mjs";
+import { Link, Cross } from "@strapi/icons";
+import { stringify } from "qs";
+import { styled } from "styled-components";
+import { getDocumentStatus } from "./EditViewPage-D2FPb5Mh.mjs";
+const PreviewContent = () => {
+  const previewUrl = usePreviewContext("PreviewContent", (state) => state.url);
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      src: previewUrl,
+      title: formatMessage({
+        id: "content-manager.preview.panel.title",
+        defaultMessage: "Preview"
+      }),
+      width: "100%",
+      height: "100%",
+      borderWidth: 0,
+      tag: "iframe"
+    }
+  );
+};
+const ClosePreviewButton = () => {
+  const [{ query }] = useQueryParams();
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      tag: Link$1,
+      relative: "path",
+      to: {
+        pathname: "..",
+        search: stringify({ plugins: query.plugins }, { encode: false })
+      },
+      label: formatMessage({
+        id: "content-manager.preview.header.close",
+        defaultMessage: "Close preview"
+      }),
+      children: /* @__PURE__ */ jsx(Cross, {})
+    }
+  );
+};
+const Status = () => {
+  const document = usePreviewContext("PreviewHeader", (state) => state.document);
+  const schema = usePreviewContext("PreviewHeader", (state) => state.schema);
+  const meta = usePreviewContext("PreviewHeader", (state) => state.meta);
+  const hasDraftAndPublished = schema?.options?.draftAndPublish ?? false;
+  if (!hasDraftAndPublished) {
+    return null;
+  }
+  const status = getDocumentStatus(document, meta);
+  return /* @__PURE__ */ jsx(DocumentStatus, { status, size: "XS" });
+};
+const PreviewTabs = () => {
+  const { formatMessage } = useIntl();
+  const [{ query }, setQuery] = useQueryParams();
+  const document = usePreviewContext("PreviewHeader", (state) => state.document);
+  const schema = usePreviewContext("PreviewHeader", (state) => state.schema);
+  const meta = usePreviewContext("PreviewHeader", (state) => state.meta);
+  const hasDraftAndPublish = schema?.options?.draftAndPublish ?? false;
+  const documentStatus = getDocumentStatus(document, meta);
+  const handleTabChange = (status) => {
+    if (status === "published" || status === "draft") {
+      setQuery({ status }, "push", true);
+    }
+  };
+  if (!hasDraftAndPublish) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Tabs.Root, { variant: "simple", value: query.status || "draft", onValueChange: handleTabChange, children: /* @__PURE__ */ jsxs(
+    Tabs.List,
+    {
+      "aria-label": formatMessage({
+        id: "preview.tabs.label",
+        defaultMessage: "Document status"
+      }),
+      children: [
+        /* @__PURE__ */ jsx(StatusTab, { value: "draft", children: formatMessage({
+          id: "content-manager.containers.List.draft",
+          defaultMessage: "draft"
+        }) }),
+        /* @__PURE__ */ jsx(StatusTab, { value: "published", disabled: documentStatus === "draft", children: formatMessage({
+          id: "content-manager.containers.List.published",
+          defaultMessage: "published"
+        }) })
+      ]
+    }
+  ) }) });
+};
+const PreviewHeader = () => {
+  const mainField = usePreviewContext("PreviewHeader", (state) => state.mainField);
+  const document = usePreviewContext("PreviewHeader", (state) => state.document);
+  const schema = usePreviewContext("PreviewHeader", (state) => state.schema);
+  let documentTitle = "Untitled";
+  if (mainField !== "id" && document?.[mainField]) {
+    documentTitle = document[mainField];
+  } else if (schema.kind === "singleType" && schema?.info.displayName) {
+    documentTitle = schema.info.displayName;
+  }
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const { copy } = useClipboard();
+  const handleCopyLink = () => {
+    copy(window.location.href);
+    toggleNotification({
+      message: formatMessage({
+        id: "content-manager.preview.copy.success",
+        defaultMessage: "Copied preview link"
+      }),
+      type: "success"
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    Grid.Root,
+    {
+      gap: 3,
+      gridCols: 3,
+      paddingLeft: 2,
+      paddingRight: 2,
+      background: "neutral0",
+      borderColor: "neutral150",
+      tag: "header",
+      children: [
+        /* @__PURE__ */ jsxs(Grid.Item, { xs: 1, paddingTop: 2, paddingBottom: 2, gap: 3, children: [
+          /* @__PURE__ */ jsx(ClosePreviewButton, {}),
+          /* @__PURE__ */ jsx(PreviewTitle, { tag: "h1", fontWeight: 600, fontSize: 2, maxWidth: "200px", title: documentTitle, children: documentTitle }),
+          /* @__PURE__ */ jsx(Status, {})
+        ] }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 1, marginBottom: "-1px", alignItems: "end", margin: "auto", children: /* @__PURE__ */ jsx(PreviewTabs, {}) }),
+        /* @__PURE__ */ jsx(Grid.Item, { xs: 1, justifyContent: "end", paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            label: formatMessage({
+              id: "preview.copy.label",
+              defaultMessage: "Copy preview link"
+            }),
+            onClick: handleCopyLink,
+            children: /* @__PURE__ */ jsx(Link, {})
+          }
+        ) })
+      ]
+    }
+  );
+};
+const PreviewTitle = styled(Typography)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const StatusTab = styled(Tabs.Trigger)`
+  text-transform: uppercase;
+`;
+const [PreviewProvider, usePreviewContext] = createContext("PreviewPage");
+const PreviewPage = () => {
+  const { formatMessage } = useIntl();
+  const {
+    slug: model,
+    id: documentId,
+    collectionType
+  } = useParams();
+  const [{ query }] = useQueryParams();
+  const params = React.useMemo(() => buildValidParams(query), [query]);
+  if (!collectionType) {
+    throw new Error("Could not find collectionType in url params");
+  }
+  if (!model) {
+    throw new Error("Could not find model in url params");
+  }
+  if (collectionType === COLLECTION_TYPES && !documentId) {
+    throw new Error("Could not find documentId in url params");
+  }
+  const previewUrlResponse = useGetPreviewUrlQuery({
+    params: {
+      contentType: model
+    },
+    query: {
+      documentId,
+      locale: params.locale,
+      status: params.status
+    }
+  });
+  const documentResponse = useDocument({
+    model,
+    collectionType,
+    documentId,
+    params
+  });
+  const documentLayoutResponse = useDocumentLayout(model);
+  if (documentResponse.isLoading || previewUrlResponse.isLoading || documentLayoutResponse.isLoading) {
+    return /* @__PURE__ */ jsx(Page.Loading, {});
+  }
+  if (previewUrlResponse.error || documentLayoutResponse.error || !documentResponse.document || !documentResponse.meta || !documentResponse.schema) {
+    return /* @__PURE__ */ jsx(Page.Error, {});
+  }
+  if (!previewUrlResponse.data?.data?.url) {
+    return /* @__PURE__ */ jsx(Page.NoData, {});
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: formatMessage(
+      {
+        id: "content-manager.preview.page-title",
+        defaultMessage: "{contentType} preview"
+      },
+      {
+        contentType: documentLayoutResponse.edit.settings.displayName
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PreviewProvider,
+      {
+        url: previewUrlResponse.data.data.url,
+        mainField: documentLayoutResponse.edit.settings.mainField,
+        document: documentResponse.document,
+        meta: documentResponse.meta,
+        schema: documentResponse.schema,
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", height: "100%", alignItems: "stretch", children: [
+          /* @__PURE__ */ jsx(PreviewHeader, {}),
+          /* @__PURE__ */ jsx(PreviewContent, {})
+        ] })
+      }
+    )
+  ] });
+};
+const ProtectedPreviewPageImpl = () => {
+  const { slug: model } = useParams();
+  const {
+    permissions = [],
+    isLoading,
+    error
+  } = useRBAC([{ action: "plugin::content-manager.explorer.read", subject: model }]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Page.Loading, {});
+  }
+  if (error || !model) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        height: "100vh",
+        width: "100vw",
+        position: "fixed",
+        top: 0,
+        left: 0,
+        zIndex: 2,
+        background: "neutral0",
+        children: /* @__PURE__ */ jsx(Page.Error, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      height: "100vh",
+      width: "100vw",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      zIndex: 2,
+      background: "neutral0",
+      children: /* @__PURE__ */ jsx(Page.Protect, { permissions, children: ({ permissions: permissions2 }) => /* @__PURE__ */ jsx(DocumentRBAC, { permissions: permissions2, children: /* @__PURE__ */ jsx(PreviewPage, {}) }) })
+    }
+  );
+};
+const ProtectedPreviewPage = () => {
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsx(ProtectedPreviewPageImpl, {}) }) });
+};
+export {
+  ProtectedPreviewPage,
+  usePreviewContext
+};
+//# sourceMappingURL=Preview-DwWET-X7.mjs.map

package/dist/_chunks/Preview-DwWET-X7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preview-DwWET-X7.mjs","sources":["../../admin/src/preview/components/PreviewContent.tsx","../../admin/src/preview/components/PreviewHeader.tsx","../../admin/src/preview/pages/Preview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { usePreviewContext } from '../pages/Preview';\n\nconst PreviewContent = () => {\n  const previewUrl = usePreviewContext('PreviewContent', (state) => state.url);\n\n  const { formatMessage } = useIntl();\n\n  return (\n    <Box\n      src={previewUrl}\n      title={formatMessage({\n        id: 'content-manager.preview.panel.title',\n        defaultMessage: 'Preview',\n      })}\n      width=\"100%\"\n      height=\"100%\"\n      borderWidth={0}\n      tag=\"iframe\"\n    />\n  );\n};\n\nexport { PreviewContent };\n","import * as React from 'react';\n\nimport { useClipboard, useNotification, useQueryParams } from '@strapi/admin/strapi-admin';\nimport { IconButton, Tabs, Typography, Grid } from '@strapi/design-system';\nimport { Cross, Link as LinkIcon } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { DocumentStatus } from '../../pages/EditView/components/DocumentStatus';\nimport { getDocumentStatus } from '../../pages/EditView/EditViewPage';\nimport { usePreviewContext } from '../pages/Preview';\n\n/* -------------------------------------------------------------------------------------------------\n * ClosePreviewButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst ClosePreviewButton = () => {\n  const [{ query }] = useQueryParams<{\n    plugins?: Record<string, unknown>;\n  }>();\n  const { formatMessage } = useIntl();\n\n  return (\n    <IconButton\n      tag={Link}\n      relative=\"path\"\n      to={{\n        pathname: '..',\n        search: stringify({ plugins: query.plugins }, { encode: false }),\n      }}\n      label={formatMessage({\n        id: 'content-manager.preview.header.close',\n        defaultMessage: 'Close preview',\n      })}\n    >\n      <Cross />\n    </IconButton>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Status\n * -----------------------------------------------------------------------------------------------*/\n\nconst Status = () => {\n  // Get status\n  const document = usePreviewContext('PreviewHeader', (state) => state.document);\n  const schema = usePreviewContext('PreviewHeader', (state) => state.schema);\n  const meta = usePreviewContext('PreviewHeader', (state) => state.meta);\n  const hasDraftAndPublished = schema?.options?.draftAndPublish ?? false;\n\n  if (!hasDraftAndPublished) {\n    return null;\n  }\n\n  const status = getDocumentStatus(document, meta);\n\n  return <DocumentStatus status={status} size=\"XS\" />;\n};\n\nconst PreviewTabs = () => {\n  const { formatMessage } = useIntl();\n\n  // URL query params\n  const [{ query }, setQuery] = useQueryParams<{ status: 'draft' | 'published' }>();\n\n  // Get status\n  const document = usePreviewContext('PreviewHeader', (state) => state.document);\n  const schema = usePreviewContext('PreviewHeader', (state) => state.schema);\n  const meta = usePreviewContext('PreviewHeader', (state) => state.meta);\n  const hasDraftAndPublish = schema?.options?.draftAndPublish ?? false;\n  const documentStatus = getDocumentStatus(document, meta);\n\n  const handleTabChange = (status: string) => {\n    if (status === 'published' || status === 'draft') {\n      setQuery({ status }, 'push', true);\n    }\n  };\n\n  if (!hasDraftAndPublish) {\n    return null;\n  }\n\n  return (\n    <>\n      <Tabs.Root variant=\"simple\" value={query.status || 'draft'} onValueChange={handleTabChange}>\n        <Tabs.List\n          aria-label={formatMessage({\n            id: 'preview.tabs.label',\n            defaultMessage: 'Document status',\n          })}\n        >\n          <StatusTab value=\"draft\">\n            {formatMessage({\n              id: 'content-manager.containers.List.draft',\n              defaultMessage: 'draft',\n            })}\n          </StatusTab>\n          <StatusTab value=\"published\" disabled={documentStatus === 'draft'}>\n            {formatMessage({\n              id: 'content-manager.containers.List.published',\n              defaultMessage: 'published',\n            })}\n          </StatusTab>\n        </Tabs.List>\n      </Tabs.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * PreviewHeader\n * -----------------------------------------------------------------------------------------------*/\n\nconst PreviewHeader = () => {\n  // Get main field\n  const mainField = usePreviewContext('PreviewHeader', (state) => state.mainField);\n  const document = usePreviewContext('PreviewHeader', (state) => state.document);\n  const schema = usePreviewContext('PreviewHeader', (state) => state.schema);\n\n  /**\n   * We look to see what the mainField is from the configuration, if it's an id\n   * we don't use it because it's a uuid format and not very user friendly.\n   * Instead, we display the schema name for single-type documents\n   * or \"Untitled\".\n   */\n  let documentTitle = 'Untitled';\n  if (mainField !== 'id' && document?.[mainField]) {\n    documentTitle = document[mainField];\n  } else if (schema.kind === 'singleType' && schema?.info.displayName) {\n    documentTitle = schema.info.displayName;\n  }\n\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { copy } = useClipboard();\n\n  const handleCopyLink = () => {\n    copy(window.location.href);\n    toggleNotification({\n      message: formatMessage({\n        id: 'content-manager.preview.copy.success',\n        defaultMessage: 'Copied preview link',\n      }),\n      type: 'success',\n    });\n  };\n\n  return (\n    <Grid.Root\n      gap={3}\n      gridCols={3}\n      paddingLeft={2}\n      paddingRight={2}\n      background=\"neutral0\"\n      borderColor=\"neutral150\"\n      tag=\"header\"\n    >\n      {/* Title and status */}\n      <Grid.Item xs={1} paddingTop={2} paddingBottom={2} gap={3}>\n        <ClosePreviewButton />\n        <PreviewTitle tag=\"h1\" fontWeight={600} fontSize={2} maxWidth=\"200px\" title={documentTitle}>\n          {documentTitle}\n        </PreviewTitle>\n        <Status />\n      </Grid.Item>\n      {/* Tabs */}\n      <Grid.Item xs={1} marginBottom=\"-1px\" alignItems=\"end\" margin=\"auto\">\n        <PreviewTabs />\n      </Grid.Item>\n      {/* Copy link */}\n      <Grid.Item xs={1} justifyContent=\"end\" paddingTop={2} paddingBottom={2}>\n        <IconButton\n          type=\"button\"\n          label={formatMessage({\n            id: 'preview.copy.label',\n            defaultMessage: 'Copy preview link',\n          })}\n          onClick={handleCopyLink}\n        >\n          <LinkIcon />\n        </IconButton>\n      </Grid.Item>\n    </Grid.Root>\n  );\n};\n\nconst PreviewTitle = styled(Typography)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst StatusTab = styled(Tabs.Trigger)`\n  text-transform: uppercase;\n`;\n\nexport { PreviewHeader };\n","import * as React from 'react';\n\nimport { Page, useQueryParams, useRBAC, createContext } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, FocusTrap, Portal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { useParams } from 'react-router-dom';\n\nimport { GetPreviewUrl } from '../../../../shared/contracts/preview';\nimport { COLLECTION_TYPES } from '../../constants/collections';\nimport { DocumentRBAC } from '../../features/DocumentRBAC';\nimport { type UseDocument, useDocument } from '../../hooks/useDocument';\nimport { useDocumentLayout } from '../../hooks/useDocumentLayout';\nimport { buildValidParams } from '../../utils/api';\nimport { PreviewContent } from '../components/PreviewContent';\nimport { PreviewHeader } from '../components/PreviewHeader';\nimport { useGetPreviewUrlQuery } from '../services/preview';\n\nimport type { UID } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * PreviewProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface PreviewContextValue {\n  url: string;\n  mainField: string;\n  document: NonNullable<ReturnType<UseDocument>['document']>;\n  meta: NonNullable<ReturnType<UseDocument>['meta']>;\n  schema: NonNullable<ReturnType<UseDocument>['schema']>;\n}\n\nconst [PreviewProvider, usePreviewContext] = createContext<PreviewContextValue>('PreviewPage');\n\n/* -------------------------------------------------------------------------------------------------\n * PreviewPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst PreviewPage = () => {\n  const { formatMessage } = useIntl();\n\n  // Read all the necessary data from the URL to find the right preview URL\n  const {\n    slug: model,\n    id: documentId,\n    collectionType,\n  } = useParams<{\n    slug: UID.ContentType;\n    id: string;\n    collectionType: string;\n  }>();\n  const [{ query }] = useQueryParams<{\n    plugins?: Record<string, unknown>;\n  }>();\n\n  const params = React.useMemo(() => buildValidParams(query), [query]);\n\n  if (!collectionType) {\n    throw new Error('Could not find collectionType in url params');\n  }\n\n  if (!model) {\n    throw new Error('Could not find model in url params');\n  }\n\n  // Only collection types must have a documentId\n  if (collectionType === COLLECTION_TYPES && !documentId) {\n    throw new Error('Could not find documentId in url params');\n  }\n\n  const previewUrlResponse = useGetPreviewUrlQuery({\n    params: {\n      contentType: model,\n    },\n    query: {\n      documentId,\n      locale: params.locale,\n      status: params.status as GetPreviewUrl.Request['query']['status'],\n    },\n  });\n\n  const documentResponse = useDocument({\n    model,\n    collectionType,\n    documentId,\n    params,\n  });\n\n  const documentLayoutResponse = useDocumentLayout(model);\n\n  if (\n    documentResponse.isLoading ||\n    previewUrlResponse.isLoading ||\n    documentLayoutResponse.isLoading\n  ) {\n    return <Page.Loading />;\n  }\n\n  if (\n    previewUrlResponse.error ||\n    documentLayoutResponse.error ||\n    !documentResponse.document ||\n    !documentResponse.meta ||\n    !documentResponse.schema\n  ) {\n    return <Page.Error />;\n  }\n\n  if (!previewUrlResponse.data?.data?.url) {\n    return <Page.NoData />;\n  }\n\n  return (\n    <>\n      <Page.Title>\n        {formatMessage(\n          {\n            id: 'content-manager.preview.page-title',\n            defaultMessage: '{contentType} preview',\n          },\n          {\n            contentType: documentLayoutResponse.edit.settings.displayName,\n          }\n        )}\n      </Page.Title>\n      <PreviewProvider\n        url={previewUrlResponse.data.data.url}\n        mainField={documentLayoutResponse.edit.settings.mainField}\n        document={documentResponse.document}\n        meta={documentResponse.meta}\n        schema={documentResponse.schema}\n      >\n        <Flex direction=\"column\" height=\"100%\" alignItems={'stretch'}>\n          <PreviewHeader />\n          <PreviewContent />\n        </Flex>\n      </PreviewProvider>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ProtectedPreviewPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst ProtectedPreviewPageImpl = () => {\n  const { slug: model } = useParams<{\n    slug: string;\n  }>();\n  const {\n    permissions = [],\n    isLoading,\n    error,\n  } = useRBAC([{ action: 'plugin::content-manager.explorer.read', subject: model }]);\n\n  if (isLoading) {\n    return <Page.Loading />;\n  }\n\n  if (error || !model) {\n    return (\n      <Box\n        height=\"100vh\"\n        width=\"100vw\"\n        position=\"fixed\"\n        top={0}\n        left={0}\n        zIndex={2}\n        background=\"neutral0\"\n      >\n        <Page.Error />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      height=\"100vh\"\n      width=\"100vw\"\n      position=\"fixed\"\n      top={0}\n      left={0}\n      zIndex={2}\n      background=\"neutral0\"\n    >\n      <Page.Protect permissions={permissions}>\n        {({ permissions }) => (\n          <DocumentRBAC permissions={permissions}>\n            <PreviewPage />\n          </DocumentRBAC>\n        )}\n      </Page.Protect>\n    </Box>\n  );\n};\n\nconst ProtectedPreviewPage = () => {\n  return (\n    <Portal>\n      <FocusTrap>\n        <ProtectedPreviewPageImpl />\n      </FocusTrap>\n    </Portal>\n  );\n};\n\nexport { ProtectedPreviewPage, usePreviewContext };\n"],"names":["Link","LinkIcon","permissions"],"mappings":"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"}

package/dist/_chunks/{Relations-BOYZmuWy.mjs → Relations-BOTC_ZqE.mjs}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { createContext, useQueryParams, useField, useNotification, useFocusInputField, useForm } from "@strapi/admin/strapi-admin";
+import { createContext, useQueryParams, useForm, useField, useNotification, useFocusInputField } from "@strapi/admin/strapi-admin";
 import { Flex, TextButton, Field, Combobox, ComboboxOption, Typography, VisuallyHidden, Box, useComposedRefs, IconButton, Tooltip, Link } from "@strapi/design-system";
 import { ArrowClockwise, Drag, Cross } from "@strapi/icons";
 import { generateNKeysBetween } from "fractional-indexing";
@@ -10,15 +10,40 @@ import { useIntl } from "react-intl";
 import { NavLink } from "react-router-dom";
 import { FixedSizeList } from "react-window";
 import { styled } from "styled-components";
-import { b as useDoc, c as buildValidParams, C as COLLECTION_TYPES, g as getTranslation, D as DocumentStatus } from "./index-VHviNMeW.mjs";
-import { u as useDragAndDrop, I as ItemTypes, D as DROP_SENSITIVITY } from "./useDragAndDrop-DdHgKsqq.mjs";
-import { u as useGetRelationsQuery, g as getRelationLabel, a as useLazySearchRelationsQuery } from "./relations-BsqxS6tR.mjs";
+import { c as useDoc, d as buildValidParams, C as COLLECTION_TYPES, g as getTranslation, D as DocumentStatus } from "./index-BeYsz0Vi.mjs";
+import { u as useDragAndDrop, I as ItemTypes, D as DROP_SENSITIVITY } from "./useDragAndDrop-DJ6jqvZN.mjs";
+import { u as useGetRelationsQuery, g as getRelationLabel, a as useLazySearchRelationsQuery } from "./relations-DvzmDbWc.mjs";
 const [ComponentProvider, useComponent] = createContext("ComponentContext", {
   id: void 0,
   level: -1,
   uid: void 0,
   type: void 0
 });
+function useHandleDisconnect(fieldName, consumerName) {
+  const field = useField(fieldName);
+  const removeFieldRow = useForm(consumerName, (state) => state.removeFieldRow);
+  const addFieldRow = useForm(consumerName, (state) => state.addFieldRow);
+  const handleDisconnect = (relation) => {
+    if (field.value && field.value.connect) {
+      const indexOfRelationInConnectArray = field.value.connect.findIndex(
+        (rel) => rel.id === relation.id
+      );
+      if (indexOfRelationInConnectArray >= 0) {
+        removeFieldRow(`${fieldName}.connect`, indexOfRelationInConnectArray);
+        return;
+      }
+    }
+    addFieldRow(`${fieldName}.disconnect`, {
+      id: relation.id,
+      apiData: {
+        id: relation.id,
+        documentId: relation.documentId,
+        locale: relation.locale
+      }
+    });
+  };
+  return handleDisconnect;
+}
 const RELATIONS_TO_DISPLAY = 5;
 const ONE_WAY_RELATIONS = ["oneWay", "oneToOne", "manyToOne", "oneToManyMorph", "oneToOneMorph"];
 const RelationsField = React.forwardRef(
@@ -31,9 +56,16 @@ const RelationsField = React.forwardRef(
     const params = buildValidParams(query);
     const isMorph = props.attribute.relation.toLowerCase().includes("morph");
     const isDisabled = isMorph || disabled;
-    const { id: componentId, uid } = useComponent("RelationsField", ({ uid: uid2, id: id2 }) => ({ id: id2, uid: uid2 }));
+    const { componentId, componentUID } = useComponent("RelationsField", ({ uid, id: id2 }) => ({
+      componentId: id2,
+      componentUID: uid
+    }));
+    const isSubmitting = useForm("RelationsList", (state) => state.isSubmitting);
+    React.useEffect(() => {
+      setCurrentPage(1);
+    }, [isSubmitting]);
     const id = componentId ? componentId.toString() : documentId;
-    const model = uid ?? documentModel;
+    const model = componentUID ?? documentModel;
     const [targetField] = props.name.split(".").slice(-1);
     const { data, isLoading, isFetching } = useGetRelationsQuery(
       {
@@ -86,10 +118,8 @@ const RelationsField = React.forwardRef(
       );
       const transformedRels = transformations([...data.results]);
       return [...transformedRels, ...field.value?.connect ?? []].sort((a, b) => {
-        if (a.__temp_key__ < b.__temp_key__)
-          return -1;
-        if (a.__temp_key__ > b.__temp_key__)
-          return 1;
+        if (a.__temp_key__ < b.__temp_key__) return -1;
+        if (a.__temp_key__ > b.__temp_key__) return 1;
         return 0;
       });
     }, [
@@ -99,10 +129,16 @@ const RelationsField = React.forwardRef(
       props.attribute.targetModel,
       props.mainField
     ]);
+    const handleDisconnect = useHandleDisconnect(props.name, "RelationsField");
     const handleConnect = (relation) => {
       const [lastItemInList] = relations.slice(-1);
       const item = {
         id: relation.id,
+        apiData: {
+          id: relation.id,
+          documentId: relation.documentId,
+          locale: relation.locale
+        },
         status: relation.status,
         /**
          * If there's a last item, that's the first key we use to generate out next one.
@@ -112,9 +148,11 @@ const RelationsField = React.forwardRef(
         [props.mainField?.name ?? "documentId"]: relation[props.mainField?.name ?? "documentId"],
         label: getRelationLabel(relation, props.mainField),
         // @ts-expect-error – targetModel does exist on the attribute, but it's not typed.
-        href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}`
+        href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ""}`
       };
       if (ONE_WAY_RELATIONS.includes(props.attribute.relation)) {
+        field.value?.connect?.forEach(handleDisconnect);
+        relations.forEach(handleDisconnect);
         field.onChange(`${props.name}.connect`, [item]);
       } else {
         field.onChange(`${props.name}.connect`, [...field.value?.connect ?? [], item]);
@@ -135,7 +173,7 @@ const RelationsField = React.forwardRef(
               RelationsInput,
               {
                 disabled: isDisabled,
-                id,
+                id: componentUID ? componentId ? `${componentId}` : "" : documentId,
                 label: `${label} ${relationsCount > 0 ? `(${relationsCount})` : ""}`,
                 model,
                 onChange: handleConnect,
@@ -194,7 +232,7 @@ const addLabelAndHref = ({ mainField, href }) => (relations) => relations.map((r
     // Fallback to `id` if there is no `mainField` value, which will overwrite the above `documentId` property with the exact same data.
     [mainField?.name ?? "documentId"]: relation[mainField?.name ?? "documentId"],
     label: getRelationLabel(relation, mainField),
-    href: `${href}/${relation.documentId}`
+    href: `${href}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ""}`
   };
 });
 const RelationsInput = ({
@@ -289,7 +327,7 @@ const RelationsInput = ({
       {
         ref: fieldRef,
         name,
-        autocomplete: "none",
+        autocomplete: "list",
         placeholder: placeholder || formatMessage({
           id: getTranslation("relation.add"),
           defaultMessage: "Add relation"
@@ -347,8 +385,6 @@ const RelationsList = ({
   const [overflow, setOverflow] = React.useState();
   const [liveText, setLiveText] = React.useState("");
   const field = useField(name);
-  const removeFieldRow = useForm("RelationsList", (state) => state.removeFieldRow);
-  const addFieldRow = useForm("RelationsList", (state) => state.addFieldRow);
   React.useEffect(() => {
     if (data.length <= RELATIONS_TO_DISPLAY) {
       return setOverflow(void 0);
@@ -398,17 +434,25 @@ const RelationsList = ({
     newData.splice(oldIndex, 1);
     newData.splice(newIndex, 0, { ...currentRow, __temp_key__: newKey });
     const connectedRelations = newData.reduce((acc, relation, currentIndex, array) => {
-      const relationOnServer = serverData.find(
-        (oldRelation) => oldRelation.documentId === relation.documentId
-      );
+      const relationOnServer = serverData.find((oldRelation) => oldRelation.id === relation.id);
       const relationInFront = array[currentIndex + 1];
       if (!relationOnServer || relationOnServer.__temp_key__ !== relation.__temp_key__) {
         const position = relationInFront ? {
           before: relationInFront.documentId,
           locale: relationInFront.locale,
-          status: relationInFront.status
+          status: "publishedAt" in relationInFront && relationInFront.publishedAt ? "published" : "draft"
         } : { end: true };
-        const relationWithPosition = { ...relation, position };
+        const relationWithPosition = {
+          ...relation,
+          ...{
+            apiData: {
+              id: relation.id,
+              documentId: relation.documentId,
+              locale: relation.locale,
+              position
+            }
+          }
+        };
         return [...acc, relationWithPosition];
       }
       return acc;
@@ -459,18 +503,7 @@ const RelationsList = ({
       )
     );
   };
-  const handleDisconnect = (relation) => {
-    if (field.value && field.value.connect) {
-      const indexOfRelationInConnectArray = field.value.connect.findIndex(
-        (rel) => rel.id === relation.id
-      );
-      if (indexOfRelationInConnectArray >= 0) {
-        removeFieldRow(`${name}.connect`, indexOfRelationInConnectArray);
-        return;
-      }
-    }
-    addFieldRow(`${name}.disconnect`, { id: relation.id });
-  };
+  const handleDisconnect = useHandleDisconnect(name, "RelationsList");
   const canReorder = !ONE_WAY_RELATIONS.includes(relationType);
   const dynamicListHeight = data.length > RELATIONS_TO_DISPLAY ? Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER) + RELATION_ITEM_HEIGHT / 2 : Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER);
   return /* @__PURE__ */ jsxs(ShadowBox, { $overflowDirection: overflow, children: [
@@ -551,7 +584,7 @@ const ListItem = ({ data, index, style }) => {
     relations
   } = data;
   const { formatMessage } = useIntl();
-  const { href, documentId, label, status } = relations[index];
+  const { href, id, label, status } = relations[index];
   const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(
     canDrag && !disabled,
     {
@@ -560,7 +593,7 @@ const ListItem = ({ data, index, style }) => {
       item: {
         displayedValue: label,
         status,
-        id: documentId,
+        id,
         index
       },
       onMoveItem: handleMoveItem,
@@ -608,7 +641,7 @@ const ListItem = ({ data, index, style }) => {
                     id: getTranslation("components.RelationInput.icon-button-aria-label"),
                     defaultMessage: "Drag"
                   }),
-                  borderWidth: 0,
+                  variant: "ghost",
                   onKeyDown: handleKeyDown,
                   disabled,
                   children: /* @__PURE__ */ jsx(Drag, {})
@@ -620,16 +653,17 @@ const ListItem = ({ data, index, style }) => {
               ] })
             ] }),
             /* @__PURE__ */ jsx(Box, { paddingLeft: 4, children: /* @__PURE__ */ jsx(
-              DisconnectButton,
+              IconButton,
               {
-                disabled,
-                type: "button",
                 onClick: () => handleDisconnect(relations[index]),
-                "aria-label": formatMessage({
+                disabled,
+                label: formatMessage({
                   id: getTranslation("relation.disconnect"),
                   defaultMessage: "Remove"
                 }),
-                children: /* @__PURE__ */ jsx(Cross, { width: "12px" })
+                variant: "ghost",
+                size: "S",
+                children: /* @__PURE__ */ jsx(Cross, {})
               }
             ) })
           ]
@@ -691,4 +725,4 @@ export {
   MemoizedRelationsField as M,
   useComponent as u
 };
-//# sourceMappingURL=Relations-BOYZmuWy.mjs.map
+//# sourceMappingURL=Relations-BOTC_ZqE.mjs.map