@strapi/content-manager 0.0.0-experimental.a4df7ad5ff6a4366442059f7c067a0424ba1e2f9 → 0.0.0-experimental.a576251420eec95c5c06011dcf28202913fc8264

package/dist/admin/chunks/Preview-B6ThL2SA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preview-B6ThL2SA.js","sources":["../../../admin/src/preview/components/PreviewContent.tsx","../../../admin/src/preview/components/PreviewHeader.tsx","../../../admin/src/preview/pages/Preview.tsx"],"sourcesContent":["import { 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      /**\n       * For some reason, changing an iframe's src tag causes the browser to add a new item in the\n       * history stack. This is an issue for us as it means clicking the back button will not let us\n       * go back to the edit view. To fix it, we need to trick the browser into thinking this is a\n       * different iframe when the preview URL changes. So we set a key prop to force React\n       * to mount a different node when the src changes.\n       */\n      key={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 {\n  DescriptionComponentRenderer,\n  useClipboard,\n  useHistory,\n  useNotification,\n  useQueryParams,\n  useStrapiApp,\n} from '@strapi/admin/strapi-admin';\nimport { IconButton, Tabs, Typography, Grid, Flex } from '@strapi/design-system';\nimport { Cross, Link as LinkIcon } from '@strapi/icons';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { Link, type To } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { InjectionZone } from '../../components/InjectionZone';\nimport { DocumentActionButton } from '../../pages/EditView/components/DocumentActions';\nimport { DocumentStatus } from '../../pages/EditView/components/DocumentStatus';\nimport { getDocumentStatus } from '../../pages/EditView/EditViewPage';\nimport { usePreviewContext } from '../pages/Preview';\n\nimport type { ContentManagerPlugin, DocumentActionProps } from '../../content-manager';\n\n/* -------------------------------------------------------------------------------------------------\n * ClosePreviewButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst ClosePreviewButton = () => {\n  const [{ query }] = useQueryParams<{\n    plugins?: Record<string, unknown>;\n  }>();\n  const { formatMessage } = useIntl();\n\n  const canGoBack = useHistory('BackButton', (state) => state.canGoBack);\n  const goBack = useHistory('BackButton', (state) => state.goBack);\n  const history = useHistory('BackButton', (state) => state.history);\n  const locationIndex = useHistory('BackButton', (state) => state.currentLocationIndex);\n\n  /**\n   * Get the link destination from the history.\n   * Rely on a fallback (the parent edit view page) if there's no page to go back .\n   */\n  const historyTo = canGoBack ? history.at(locationIndex - 2) : undefined;\n  const fallback = {\n    pathname: '..',\n    search: stringify(query, { encode: false }),\n  } satisfies To;\n  const toWithFallback = historyTo ?? fallback;\n\n  const handleClick = (e: React.MouseEvent) => {\n    if (canGoBack) {\n      // Prevent normal link behavior, go back in the history stack instead\n      e.preventDefault();\n      goBack();\n      return;\n    }\n\n    // Otherwise rely on native link behavior to go back to the edit view. We don't use navigate()\n    // here in order to get the relative=\"path\" functionality from the Link component.\n  };\n\n  return (\n    <IconButton\n      variant=\"ghost\"\n      tag={Link}\n      relative=\"path\"\n      to={toWithFallback}\n      onClick={handleClick}\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    <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 * PreviewHeader\n * -----------------------------------------------------------------------------------------------*/\n\nconst UnstablePreviewHeader = () => {\n  const title = usePreviewContext('PreviewHeader', (state) => state.title);\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 plugins = useStrapiApp('PreviewHeader', (state) => state.plugins);\n  const iframeRef = usePreviewContext('PreviewHeader', (state) => state.iframeRef);\n\n  const [{ query }] = useQueryParams<{\n    status?: 'draft' | 'published';\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  const hasDraftAndPublish = schema.options?.draftAndPublish ?? false;\n  const documentActionProps = {\n    activeTab: query.status ?? null,\n    collectionType: schema.kind === 'collectionType' ? 'collection-types' : 'single-types',\n    model: schema.uid,\n    documentId: document.documentId,\n    document,\n    meta,\n    onPreview: () => {\n      iframeRef?.current?.contentWindow?.postMessage(\n        { type: 'strapiUpdate' },\n        // The iframe origin is safe to use since it must be provided through the allowedOrigins config\n        new URL(iframeRef.current.src).origin\n      );\n    },\n  } satisfies DocumentActionProps;\n\n  return (\n    <Flex height=\"48px\" gap={4} background=\"neutral0\" borderColor=\"neutral150\" tag=\"header\">\n      {/* Title and status */}\n      <TitleContainer height=\"100%\" paddingLeft={2} paddingRight={4}>\n        <ClosePreviewButton />\n        <PreviewTitle\n          tag=\"h1\"\n          title={title}\n          maxWidth=\"200px\"\n          fontSize={2}\n          paddingLeft={2}\n          paddingRight={3}\n          fontWeight={600}\n        >\n          {title}\n        </PreviewTitle>\n        <Status />\n      </TitleContainer>\n\n      {/* Tabs and actions */}\n      <Flex\n        flex={1}\n        paddingRight={2}\n        gap={2}\n        justifyContent={hasDraftAndPublish ? 'space-between' : 'flex-end'}\n      >\n        <Flex flex=\"1 1 70%\">\n          <PreviewTabs />\n        </Flex>\n        <Flex gap={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          <InjectionZone area=\"preview.actions\" />\n          <DescriptionComponentRenderer\n            props={documentActionProps}\n            descriptions={(\n              plugins['content-manager'].apis as ContentManagerPlugin['config']['apis']\n            ).getDocumentActions('preview')}\n          >\n            {(actions) => {\n              const filteredActions = actions.filter((action) =>\n                [action.position].flat().includes('preview')\n              );\n              const [primaryAction, secondaryAction] = filteredActions;\n\n              if (!primaryAction && !secondaryAction) return null;\n\n              // Both actions are available when draft and publish enabled\n              if (primaryAction && secondaryAction) {\n                return (\n                  <>\n                    {/* Save */}\n                    <DocumentActionButton\n                      {...secondaryAction}\n                      variant={secondaryAction.variant || 'secondary'}\n                    />\n                    {/* Publish */}\n                    <DocumentActionButton\n                      {...primaryAction}\n                      variant={primaryAction.variant || 'default'}\n                    />\n                  </>\n                );\n              }\n\n              // Otherwise we just have the save action\n              return (\n                <DocumentActionButton\n                  {...primaryAction}\n                  variant={primaryAction.variant || 'secondary'}\n                />\n              );\n            }}\n          </DescriptionComponentRenderer>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nconst PreviewHeader = () => {\n  // Get the document title\n  const title = usePreviewContext('PreviewHeader', (state) => state.title);\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={title}>\n          {title}\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\nconst TitleContainer = styled(Flex)`\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\nexport { PreviewHeader, UnstablePreviewHeader };\n","import * as React from 'react';\n\nimport {\n  Page,\n  useQueryParams,\n  useRBAC,\n  createContext,\n  Form as FormContext,\n} from '@strapi/admin/strapi-admin';\nimport { Box, Flex, FocusTrap, IconButton, Portal } from '@strapi/design-system';\nimport { ArrowLineLeft } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useLocation, useParams } from 'react-router-dom';\nimport { styled } from 'styled-components';\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 { type EditLayout, useDocumentLayout } from '../../hooks/useDocumentLayout';\nimport { FormLayout } from '../../pages/EditView/components/FormLayout';\nimport { buildValidParams } from '../../utils/api';\nimport { createYupSchema } from '../../utils/validation';\nimport { PreviewContent } from '../components/PreviewContent';\nimport { PreviewHeader, UnstablePreviewHeader } 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  title: string;\n  document: NonNullable<ReturnType<UseDocument>['document']>;\n  meta: NonNullable<ReturnType<UseDocument>['meta']>;\n  schema: NonNullable<ReturnType<UseDocument>['schema']>;\n  layout: EditLayout;\n  iframeRef?: React.RefObject<HTMLIFrameElement>;\n}\n\nconst [PreviewProvider, usePreviewContext] = createContext<PreviewContextValue>('PreviewPage');\n\n/* -------------------------------------------------------------------------------------------------\n * PreviewPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst AnimatedArrow = styled(ArrowLineLeft)<{ isSideEditorOpen: boolean }>`\n  will-change: transform;\n  rotate: ${(props) => (props.isSideEditorOpen ? '0deg' : '180deg')};\n  transition: rotate 0.2s ease-in-out;\n`;\n\nconst PreviewPage = () => {\n  const location = useLocation();\n  const { formatMessage } = useIntl();\n\n  const iframeRef = React.useRef<HTMLIFrameElement>(null);\n  const [isSideEditorOpen, setIsSideEditorOpen] = React.useState(true);\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    status?: string;\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  const documentResponse = useDocument({\n    model,\n    collectionType,\n    documentId,\n    params,\n  });\n  const documentLayoutResponse = useDocumentLayout(model);\n\n  const isLoading =\n    previewUrlResponse.isLoading || documentLayoutResponse.isLoading || documentResponse.isLoading;\n  if (isLoading && !documentResponse.document?.documentId) {\n    return <Page.Loading />;\n  }\n\n  const initialValues = documentResponse.getInitialFormValues();\n\n  if (\n    previewUrlResponse.error ||\n    documentLayoutResponse.error ||\n    !documentResponse.document ||\n    !documentResponse.meta ||\n    !documentResponse.schema ||\n    !initialValues\n  ) {\n    return <Page.Error />;\n  }\n\n  if (!previewUrlResponse.data?.data?.url) {\n    return <Page.NoData />;\n  }\n\n  const documentTitle = documentResponse.getTitle(documentLayoutResponse.edit.settings.mainField);\n\n  const validateSync = (values: Record<string, unknown>, options: Record<string, string>) => {\n    const yupSchema = createYupSchema(\n      documentResponse.schema?.attributes,\n      documentResponse.components,\n      {\n        status: documentResponse.document?.status,\n        ...options,\n      }\n    );\n\n    return yupSchema.validateSync(values, { abortEarly: false });\n  };\n\n  const previewUrl = previewUrlResponse.data.data.url;\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: documentTitle,\n          }\n        )}\n      </Page.Title>\n      <PreviewProvider\n        url={previewUrl}\n        document={documentResponse.document}\n        title={documentTitle}\n        meta={documentResponse.meta}\n        schema={documentResponse.schema}\n        layout={documentLayoutResponse.edit}\n        iframeRef={iframeRef}\n      >\n        <FormContext\n          method=\"PUT\"\n          disabled={\n            query.status === 'published' &&\n            documentResponse &&\n            documentResponse.document.status !== 'draft'\n          }\n          initialValues={documentResponse.getInitialFormValues()}\n          initialErrors={location?.state?.forceValidation ? validateSync(initialValues, {}) : {}}\n          height=\"100%\"\n          validate={(values: Record<string, unknown>, options: Record<string, string>) => {\n            const yupSchema = createYupSchema(\n              documentResponse.schema?.attributes,\n              documentResponse.components,\n              {\n                status: documentResponse.document?.status,\n                ...options,\n              }\n            );\n\n            return yupSchema.validate(values, { abortEarly: false });\n          }}\n        >\n          <Flex direction=\"column\" height=\"100%\" alignItems=\"stretch\">\n            {window.strapi.future.isEnabled('unstablePreviewSideEditor') ? (\n              <>\n                <UnstablePreviewHeader />\n                <Flex flex={1} overflow=\"auto\" alignItems=\"stretch\">\n                  <Box\n                    overflow=\"auto\"\n                    width={isSideEditorOpen ? '50%' : 0}\n                    borderWidth=\"0 1px 0 0\"\n                    borderColor=\"neutral150\"\n                    paddingTop={6}\n                    paddingBottom={6}\n                    // Remove horizontal padding when the editor is closed or it won't fully disappear\n                    paddingLeft={isSideEditorOpen ? 6 : 0}\n                    paddingRight={isSideEditorOpen ? 6 : 0}\n                    transition=\"all 0.2s ease-in-out\"\n                  >\n                    <FormLayout layout={documentLayoutResponse.edit.layout} hasBackground />\n                  </Box>\n                  <Box position=\"relative\" flex={1} height=\"100%\" overflow=\"hidden\">\n                    <Box\n                      data-testid=\"preview-iframe\"\n                      ref={iframeRef}\n                      src={previewUrl}\n                      /**\n                       * For some reason, changing an iframe's src tag causes the browser to add a new item in the\n                       * history stack. This is an issue for us as it means clicking the back button will not let us\n                       * go back to the edit view. To fix it, we need to trick the browser into thinking this is a\n                       * different iframe when the preview URL changes. So we set a key prop to force React\n                       * to mount a different node when the src changes.\n                       */\n                      key={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                    <IconButton\n                      variant=\"tertiary\"\n                      label={formatMessage(\n                        isSideEditorOpen\n                          ? {\n                              id: 'content-manager.preview.content.close-editor',\n                              defaultMessage: 'Close editor',\n                            }\n                          : {\n                              id: 'content-manager.preview.content.open-editor',\n                              defaultMessage: 'Open editor',\n                            }\n                      )}\n                      onClick={() => setIsSideEditorOpen((prev) => !prev)}\n                      position=\"absolute\"\n                      top={2}\n                      left={2}\n                    >\n                      <AnimatedArrow isSideEditorOpen={isSideEditorOpen} />\n                    </IconButton>\n                  </Box>\n                </Flex>\n              </>\n            ) : (\n              <>\n                <PreviewHeader />\n                <PreviewContent />\n              </>\n            )}\n          </Flex>\n        </FormContext>\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([\n    { action: 'plugin::content-manager.explorer.read', subject: model },\n    { action: 'plugin::content-manager.explorer.update', subject: model },\n    { action: 'plugin::content-manager.explorer.publish', subject: model },\n  ]);\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\n        permissions={permissions.filter((permission) =>\n          permission.action.includes('explorer.read')\n        )}\n      >\n        <DocumentRBAC permissions={permissions}>\n          <PreviewPage />\n        </DocumentRBAC>\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":["PreviewContent","previewUrl","usePreviewContext","state","url","formatMessage","useIntl","_jsx","Box","src","title","id","defaultMessage","width","height","borderWidth","tag","ClosePreviewButton","query","useQueryParams","canGoBack","useHistory","goBack","history","locationIndex","currentLocationIndex","historyTo","at","undefined","fallback","pathname","search","stringify","encode","toWithFallback","handleClick","e","preventDefault","IconButton","variant","Link","relative","to","onClick","label","Cross","Status","document","schema","meta","hasDraftAndPublished","options","draftAndPublish","status","getDocumentStatus","DocumentStatus","size","PreviewTabs","setQuery","hasDraftAndPublish","documentStatus","handleTabChange","Tabs","Root","value","onValueChange","_jsxs","List","aria-label","StatusTab","disabled","UnstablePreviewHeader","plugins","useStrapiApp","iframeRef","toggleNotification","useNotification","copy","useClipboard","handleCopyLink","window","location","href","message","type","documentActionProps","activeTab","collectionType","kind","model","uid","documentId","onPreview","current","contentWindow","postMessage","URL","origin","Flex","gap","background","borderColor","TitleContainer","paddingLeft","paddingRight","PreviewTitle","maxWidth","fontSize","fontWeight","flex","justifyContent","LinkIcon","InjectionZone","area","DescriptionComponentRenderer","props","descriptions","apis","getDocumentActions","actions","filteredActions","filter","action","position","flat","includes","primaryAction","secondaryAction","_Fragment","DocumentActionButton","PreviewHeader","Grid","gridCols","Item","xs","paddingTop","paddingBottom","marginBottom","alignItems","margin","styled","Typography","Trigger","theme","colors","neutral150","PreviewProvider","createContext","AnimatedArrow","ArrowLineLeft","isSideEditorOpen","PreviewPage","useLocation","React","useRef","setIsSideEditorOpen","useState","slug","useParams","params","useMemo","buildValidParams","Error","COLLECTION_TYPES","previewUrlResponse","useGetPreviewUrlQuery","contentType","locale","documentResponse","useDocument","documentLayoutResponse","useDocumentLayout","isLoading","Page","Loading","initialValues","getInitialFormValues","error","data","NoData","documentTitle","getTitle","edit","settings","mainField","validateSync","values","yupSchema","createYupSchema","attributes","components","abortEarly","Title","layout","FormContext","method","initialErrors","forceValidation","validate","direction","strapi","future","isEnabled","overflow","transition","FormLayout","hasBackground","data-testid","ref","prev","top","left","ProtectedPreviewPageImpl","permissions","useRBAC","subject","zIndex","Protect","permission","DocumentRBAC","ProtectedPreviewPage","Portal","FocusTrap"],"mappings":"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"}

package/dist/admin/chunks/{Relations-Bc1mVCAn.js → Relations-CJ0GWuqq.js}

@@ -12,9 +12,9 @@ var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
 var reactWindow = require('react-window');
 var styledComponents = require('styled-components');
-var index = require('./index-BERMAQwA.js');
+var index = require('./index-SQ88CePz.js');
 var useDragAndDrop = require('./useDragAndDrop-gcqEJMnO.js');
-var relations = require('./relations-DXceN3I-.js');
+var relations = require('./relations-VlsO9KQZ.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -101,7 +101,189 @@ const ONE_WAY_RELATIONS = [
  * @description The relations field holds a lot of domain logic for handling relations which is rather complicated
  * At present we do not expose this to plugin developers, however, they are able to overwrite it themselves should
  * they wish to do so.
- */ const RelationsField = /*#__PURE__*/ React__namespace.forwardRef(({ disabled, label, ...props }, ref)=>{
+ */ const UnstableRelationsField = /*#__PURE__*/ React__namespace.forwardRef(({ disabled, label, ...props }, ref)=>{
+    const [currentPage, setCurrentPage] = React__namespace.useState(1);
+    const { document, model: documentModel } = index.useDoc();
+    const documentId = document?.documentId;
+    const { formatMessage } = reactIntl.useIntl();
+    const [{ query }] = strapiAdmin.useQueryParams();
+    const params = index.buildValidParams(query);
+    const isMorph = props.attribute.relation.toLowerCase().includes('morph');
+    const isDisabled = isMorph || disabled;
+    const { componentId, componentUID } = useComponent('RelationsField', ({ uid, id })=>({
+            componentId: id,
+            componentUID: uid
+        }));
+    const isSubmitting = strapiAdmin.useForm('RelationsList', (state)=>state.isSubmitting);
+    React__namespace.useEffect(()=>{
+        setCurrentPage(1);
+    }, [
+        isSubmitting
+    ]);
+    /**
+     * We'll always have a documentId in a created entry, so we look for a componentId first.
+     * Same with `uid` and `documentModel`.
+     */ const id = componentId ? componentId.toString() : documentId;
+    const model = componentUID ?? documentModel;
+    /**
+     * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.
+     * Where the above example would a nested field within two components, however
+     * we only require the field on the component not the complete path since we query
+     * individual components. Therefore we split the string and take the last item.
+     */ const [targetField] = props.name.split('.').slice(-1);
+    const { data, isLoading, isFetching } = relations.useGetRelationsQuery({
+        model,
+        targetField,
+        // below we don't run the query if there is no id.
+        id: id,
+        params: {
+            ...params,
+            pageSize: RELATIONS_TO_DISPLAY,
+            page: currentPage
+        }
+    }, {
+        refetchOnMountOrArgChange: true,
+        skip: !id,
+        selectFromResult: (result)=>{
+            return {
+                ...result,
+                data: {
+                    ...result.data,
+                    results: result.data?.results ? result.data.results : []
+                }
+            };
+        }
+    });
+    const handleLoadMore = ()=>{
+        setCurrentPage((prev)=>prev + 1);
+    };
+    const field = strapiAdmin.useField(props.name);
+    const isFetchingMoreRelations = isLoading || isFetching;
+    const realServerRelationsCount = 'pagination' in data && data.pagination ? data.pagination.total : 0;
+    /**
+     * Items that are already connected, but reordered would be in
+     * this list, so to get an accurate figure, we remove them.
+     */ const relationsConnected = (field.value?.connect ?? []).filter((rel)=>data.results.findIndex((relation)=>relation.id === rel.id) === -1).length ?? 0;
+    const relationsDisconnected = field.value?.disconnect?.length ?? 0;
+    const relationsCount = realServerRelationsCount + relationsConnected - relationsDisconnected;
+    /**
+     * This is it, the source of truth for reordering in conjunction with partial loading & updating
+     * of relations. Relations on load are given __temp_key__ when fetched, because we don't want to
+     * create brand new keys everytime the data updates, just keep adding them onto the newly loaded ones.
+     */ const relations$1 = React__namespace.useMemo(()=>{
+        const ctx = {
+            field: field.value,
+            // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
+            href: `../${index.COLLECTION_TYPES}/${props.attribute.targetModel}`,
+            mainField: props.mainField
+        };
+        /**
+       * Tidy up our data.
+       */ const transformations = pipe(removeConnected(ctx), removeDisconnected(ctx), addLabelAndHref(ctx));
+        const transformedRels = transformations([
+            ...data.results
+        ]);
+        /**
+       * THIS IS CRUCIAL. If you don't sort by the __temp_key__ which comes from fractional indexing
+       * then the list will be in the wrong order.
+       */ 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;
+            return 0;
+        });
+    }, [
+        data.results,
+        field.value,
+        // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
+        props.attribute.targetModel,
+        props.mainField
+    ]);
+    const handleDisconnect = useHandleDisconnect(props.name, 'RelationsField');
+    const handleConnect = (relation)=>{
+        const [lastItemInList] = relations$1.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.
+         */ __temp_key__: fractionalIndexing.generateNKeysBetween(lastItemInList?.__temp_key__ ?? null, null, 1)[0],
+            // Fallback to `id` if there is no `mainField` value, which will overwrite the above `id` property with the exact same data.
+            [props.mainField?.name ?? 'documentId']: relation[props.mainField?.name ?? 'documentId'],
+            label: relations.getRelationLabel(relation, props.mainField),
+            // @ts-expect-error – targetModel does exist on the attribute, but it's not typed.
+            href: `../${index.COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ''}`
+        };
+        if (ONE_WAY_RELATIONS.includes(props.attribute.relation)) {
+            // Remove any existing relation so they can be replaced with the new one
+            field.value?.connect?.forEach(handleDisconnect);
+            relations$1.forEach(handleDisconnect);
+            field.onChange(`${props.name}.connect`, [
+                item
+            ]);
+        } else {
+            field.onChange(`${props.name}.connect`, [
+                ...field.value?.connect ?? [],
+                item
+            ]);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        ref: ref,
+        direction: "column",
+        gap: 3,
+        justifyContent: "space-between",
+        alignItems: "stretch",
+        wrap: "wrap",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(StyledFlex, {
+                direction: "column",
+                alignItems: "start",
+                gap: 2,
+                width: "100%",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(RelationsInput, {
+                        disabled: isDisabled,
+                        // NOTE: we should not default to using the documentId if the component is being created (componentUID is undefined)
+                        id: componentUID ? componentId ? `${componentId}` : '' : documentId,
+                        label: `${label} ${relationsCount > 0 ? `(${relationsCount})` : ''}`,
+                        model: model,
+                        onChange: handleConnect,
+                        ...props
+                    }),
+                    'pagination' in data && data.pagination && data.pagination.pageCount > data.pagination.page ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextButton, {
+                        disabled: isFetchingMoreRelations,
+                        onClick: handleLoadMore,
+                        loading: isFetchingMoreRelations,
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.ArrowClockwise, {}),
+                        // prevent the label from line-wrapping
+                        shrink: 0,
+                        children: formatMessage({
+                            id: index.getTranslation('relation.loadMore'),
+                            defaultMessage: 'Load More'
+                        })
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(UnstableRelationsList, {
+                data: relations$1,
+                serverData: data.results,
+                disabled: isDisabled,
+                name: props.name,
+                isLoading: isFetchingMoreRelations,
+                relationType: props.attribute.relation
+            })
+        ]
+    });
+});
+const RelationsField = /*#__PURE__*/ React__namespace.forwardRef(({ disabled, label, ...props }, ref)=>{
     const [currentPage, setCurrentPage] = React__namespace.useState(1);
     const { document, model: documentModel } = index.useDoc();
     const documentId = document?.documentId;
@@ -488,6 +670,179 @@ const ONE_WAY_RELATIONS = [
  * RelationsList
  * -----------------------------------------------------------------------------------------------*/ const RELATION_ITEM_HEIGHT = 50;
 const RELATION_GUTTER = 4;
+const UnstableRelationsList = ({ data, serverData, disabled, name, isLoading, relationType })=>{
+    const ariaDescriptionId = React__namespace.useId();
+    const { formatMessage } = reactIntl.useIntl();
+    const listRef = React__namespace.useRef(null);
+    const outerListRef = React__namespace.useRef(null);
+    const [overflow, setOverflow] = React__namespace.useState();
+    const [liveText, setLiveText] = React__namespace.useState('');
+    const field = strapiAdmin.useField(name);
+    React__namespace.useEffect(()=>{
+        if (data.length <= RELATIONS_TO_DISPLAY) {
+            return setOverflow(undefined);
+        }
+        const handleNativeScroll = (e)=>{
+            const el = e.target;
+            const parentScrollContainerHeight = el.parentNode.scrollHeight;
+            const maxScrollBottom = el.scrollHeight - el.scrollTop;
+            if (el.scrollTop === 0) {
+                return setOverflow('bottom');
+            }
+            if (maxScrollBottom === parentScrollContainerHeight) {
+                return setOverflow('top');
+            }
+            return setOverflow('top-bottom');
+        };
+        const outerListRefCurrent = outerListRef?.current;
+        if (!isLoading && data.length > 0 && outerListRefCurrent) {
+            outerListRef.current.addEventListener('scroll', handleNativeScroll);
+        }
+        return ()=>{
+            if (outerListRefCurrent) {
+                outerListRefCurrent.removeEventListener('scroll', handleNativeScroll);
+            }
+        };
+    }, [
+        isLoading,
+        data.length
+    ]);
+    const getItemPos = (index)=>`${index + 1} of ${data.length}`;
+    const handleMoveItem = (newIndex, oldIndex)=>{
+        const item = data[oldIndex];
+        setLiveText(formatMessage({
+            id: index.getTranslation('dnd.reorder'),
+            defaultMessage: '{item}, moved. New position in list: {position}.'
+        }, {
+            item: item.label ?? item.documentId,
+            position: getItemPos(newIndex)
+        }));
+        /**
+     * Splicing mutates the array, so we need to create a new array
+     */ const newData = [
+            ...data
+        ];
+        const currentRow = data[oldIndex];
+        const startKey = oldIndex > newIndex ? newData[newIndex - 1]?.__temp_key__ : newData[newIndex]?.__temp_key__;
+        const endKey = oldIndex > newIndex ? newData[newIndex]?.__temp_key__ : newData[newIndex + 1]?.__temp_key__;
+        /**
+     * We're moving the relation between two other relations, so
+     * we need to generate a new key that keeps the order
+     */ const [newKey] = fractionalIndexing.generateNKeysBetween(startKey, endKey, 1);
+        newData.splice(oldIndex, 1);
+        newData.splice(newIndex, 0, {
+            ...currentRow,
+            __temp_key__: newKey
+        });
+        /**
+     * Now we diff against the server to understand what's different so we
+     * can keep the connect array nice and tidy. It also needs reversing because
+     * we reverse the relations from the server in the first place.
+     */ const connectedRelations = newData.reduce((acc, relation, currentIndex, array)=>{
+            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: 'publishedAt' in relationInFront && relationInFront.publishedAt ? 'published' : 'draft'
+                } : {
+                    end: true
+                };
+                const relationWithPosition = {
+                    ...relation,
+                    ...{
+                        apiData: {
+                            id: relation.id,
+                            documentId: relation.documentId,
+                            locale: relation.locale,
+                            position
+                        }
+                    }
+                };
+                return [
+                    ...acc,
+                    relationWithPosition
+                ];
+            }
+            return acc;
+        }, []).toReversed();
+        field.onChange(`${name}.connect`, connectedRelations);
+    };
+    const handleGrabItem = (index$1)=>{
+        const item = data[index$1];
+        setLiveText(formatMessage({
+            id: index.getTranslation('dnd.grab-item'),
+            defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
+        }, {
+            item: item.label ?? item.documentId,
+            position: getItemPos(index$1)
+        }));
+    };
+    const handleDropItem = (index$1)=>{
+        const { href: _href, label, ...item } = data[index$1];
+        setLiveText(formatMessage({
+            id: index.getTranslation('dnd.drop-item'),
+            defaultMessage: `{item}, dropped. Final position in list: {position}.`
+        }, {
+            item: label ?? item.documentId,
+            position: getItemPos(index$1)
+        }));
+    };
+    const handleCancel = (index$1)=>{
+        const item = data[index$1];
+        setLiveText(formatMessage({
+            id: index.getTranslation('dnd.cancel-item'),
+            defaultMessage: '{item}, dropped. Re-order cancelled.'
+        }, {
+            item: item.label ?? item.documentId
+        }));
+    };
+    const handleDisconnect = useHandleDisconnect(name, 'RelationsList');
+    /**
+   * These relation types will only ever have one item
+   * in their list, so you can't reorder a single item!
+   */ 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__*/ jsxRuntime.jsxs(ShadowBox, {
+        $overflowDirection: overflow,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                id: ariaDescriptionId,
+                children: formatMessage({
+                    id: index.getTranslation('dnd.instructions'),
+                    defaultMessage: `Press spacebar to grab and re-order`
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                "aria-live": "assertive",
+                children: liveText
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(reactWindow.FixedSizeList, {
+                height: dynamicListHeight,
+                ref: listRef,
+                outerRef: outerListRef,
+                itemCount: data.length,
+                itemSize: RELATION_ITEM_HEIGHT + RELATION_GUTTER,
+                itemData: {
+                    ariaDescribedBy: ariaDescriptionId,
+                    canDrag: canReorder,
+                    disabled,
+                    handleCancel,
+                    handleDropItem,
+                    handleGrabItem,
+                    handleMoveItem,
+                    name,
+                    handleDisconnect,
+                    relations: data
+                },
+                itemKey: (index)=>data[index].id,
+                innerElementType: "ol",
+                children: UnstableListItem
+            })
+        ]
+    });
+};
 const RelationsList = ({ data, serverData, disabled, name, isLoading, relationType })=>{
     const ariaDescriptionId = React__namespace.useId();
     const { formatMessage } = reactIntl.useIntl();
@@ -692,6 +1047,114 @@ const ShadowBox = styledComponents.styled(designSystem.Box)`
     transition: opacity 0.2s ease-in-out;
   }
 `;
+const CustomTextButton = styledComponents.styled(designSystem.TextButton)`
+  & > span {
+    font-size: ${({ theme })=>theme.fontSizes[2]};
+  }
+`;
+const UnstableListItem = ({ data, index: index$1, style })=>{
+    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations } = data;
+    const { formatMessage } = reactIntl.useIntl();
+    const { id, label, status } = relations[index$1];
+    const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(canDrag && !disabled, {
+        type: `${useDragAndDrop.ItemTypes.RELATION}_${name}`,
+        index: index$1,
+        item: {
+            displayedValue: label,
+            status,
+            id: id,
+            index: index$1
+        },
+        onMoveItem: handleMoveItem,
+        onDropItem: handleDropItem,
+        onGrabItem: handleGrabItem,
+        onCancel: handleCancel,
+        dropSensitivity: useDragAndDrop.DROP_SENSITIVITY.REGULAR
+    });
+    const composedRefs = designSystem.useComposedRefs(relationRef, dragRef);
+    React__namespace.useEffect(()=>{
+        dragPreviewRef(reactDndHtml5Backend.getEmptyImage());
+    }, [
+        dragPreviewRef
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        style: style,
+        tag: "li",
+        ref: dropRef,
+        "aria-describedby": ariaDescribedBy,
+        cursor: canDrag ? 'all-scroll' : 'default',
+        children: isDragging ? /*#__PURE__*/ jsxRuntime.jsx(RelationItemPlaceholder, {}) : /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            paddingTop: 2,
+            paddingBottom: 2,
+            paddingLeft: canDrag ? 2 : 4,
+            paddingRight: 4,
+            hasRadius: true,
+            borderColor: "neutral200",
+            background: disabled ? 'neutral150' : 'neutral0',
+            justifyContent: "space-between",
+            ref: composedRefs,
+            "data-handler-id": handlerId,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(FlexWrapper, {
+                    gap: 1,
+                    children: [
+                        canDrag ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                            tag: "div",
+                            role: "button",
+                            tabIndex: 0,
+                            withTooltip: false,
+                            label: formatMessage({
+                                id: index.getTranslation('components.RelationInput.icon-button-aria-label'),
+                                defaultMessage: 'Drag'
+                            }),
+                            variant: "ghost",
+                            onKeyDown: handleKeyDown,
+                            disabled: disabled,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Drag, {})
+                        }) : null,
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            width: "100%",
+                            minWidth: 0,
+                            justifyContent: "space-between",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    minWidth: 0,
+                                    paddingTop: 1,
+                                    paddingBottom: 1,
+                                    paddingRight: 4,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                                        description: label,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(CustomTextButton, {
+                                            onClick: ()=>console.log('OPEN MODAL'),
+                                            children: label
+                                        })
+                                    })
+                                }),
+                                status ? /*#__PURE__*/ jsxRuntime.jsx(index.DocumentStatus, {
+                                    status: status
+                                }) : null
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    paddingLeft: 4,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        onClick: ()=>handleDisconnect(relations[index$1]),
+                        disabled: disabled,
+                        label: formatMessage({
+                            id: index.getTranslation('relation.disconnect'),
+                            defaultMessage: 'Remove'
+                        }),
+                        variant: "ghost",
+                        size: "S",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Cross, {})
+                    })
+                })
+            ]
+        })
+    });
+};
 const ListItem = ({ data, index: index$1, style })=>{
     const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations } = data;
     const { formatMessage } = reactIntl.useIntl();
@@ -843,11 +1306,13 @@ const RelationItemPlaceholder = ()=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Bo
         height: `calc(100% - ${RELATION_GUTTER}px)`
     });
 const MemoizedRelationsField = /*#__PURE__*/ React__namespace.memo(RelationsField);
+const MemoizedUnstableRelationsField = /*#__PURE__*/ React__namespace.memo(UnstableRelationsField);
 
 exports.ComponentProvider = ComponentProvider;
 exports.DisconnectButton = DisconnectButton;
 exports.FlexWrapper = FlexWrapper;
 exports.LinkEllipsis = LinkEllipsis;
 exports.MemoizedRelationsField = MemoizedRelationsField;
+exports.MemoizedUnstableRelationsField = MemoizedUnstableRelationsField;
 exports.useComponent = useComponent;
-//# sourceMappingURL=Relations-Bc1mVCAn.js.map
+//# sourceMappingURL=Relations-CJ0GWuqq.js.map