@strapi/content-manager 5.49.0 → 5.50.0

package/dist/admin/layout.js

@@ -96,7 +96,9 @@ var translations = require('./utils/translations.js');
                     /*#__PURE__*/ jsxRuntime.jsx(DragLayer.DragLayer, {
                         renderItem: renderDraglayerItem
                     }),
-                    /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Outlet, {})
+                    /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.LazyOutlet, {
+                        nested: true
+                    })
                 ]
             })
         ]

package/dist/admin/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sources":["../../admin/src/layout.tsx"],"sourcesContent":["/* eslint-disable check-file/filename-naming-convention */\nimport * as React from 'react';\n\nimport { Page, Layouts, SubNav, useIsMobile } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Navigate, Outlet, useLocation, useMatch } from 'react-router-dom';\n\nimport { DragLayer, DragLayerProps } from './components/DragLayer';\nimport { CardDragPreview } from './components/DragPreviews/CardDragPreview';\nimport { ComponentDragPreview } from './components/DragPreviews/ComponentDragPreview';\nimport { RelationDragPreview } from './components/DragPreviews/RelationDragPreview';\nimport { LeftMenu } from './components/LeftMenu';\nimport { ItemTypes } from './constants/dragAndDrop';\nimport { useContentManagerInitData } from './hooks/useContentManagerInitData';\nimport { getTranslation } from './utils/translations';\n\n/* -------------------------------------------------------------------------------------------------\n * Layout\n * -----------------------------------------------------------------------------------------------*/\n\nconst Layout = () => {\n  const contentTypeMatch = useMatch('/content-manager/:kind/:uid/*');\n  const isMobile = useIsMobile();\n\n  const { isLoading, collectionTypeLinks, models, singleTypeLinks } = useContentManagerInitData();\n  const authorisedModels = [...collectionTypeLinks, ...singleTypeLinks].sort((a, b) =>\n    a.title.localeCompare(b.title)\n  );\n\n  const { pathname } = useLocation();\n  const { formatMessage } = useIntl();\n\n  if (isLoading) {\n    return (\n      <>\n        <Page.Title>\n          {formatMessage({\n            id: getTranslation('plugin.name'),\n            defaultMessage: 'Content Manager',\n          })}\n        </Page.Title>\n        <Page.Loading />\n      </>\n    );\n  }\n\n  // Array of models that are displayed in the content manager\n  const supportedModelsToDisplay = models.filter(({ isDisplayed }) => isDisplayed);\n\n  // Redirect the user to the 403 page\n  if (\n    authorisedModels.length === 0 &&\n    supportedModelsToDisplay.length > 0 &&\n    pathname !== '/content-manager/403'\n  ) {\n    return <Navigate to=\"/403\" />;\n  }\n\n  // Redirect the user to the create content type page\n  if (supportedModelsToDisplay.length === 0 && pathname !== '/no-content-types') {\n    return <Navigate to=\"/no-content-types\" />;\n  }\n\n  // On /content-manager base route\n  if (!contentTypeMatch && authorisedModels.length > 0) {\n    // On desktop: redirect to first collection type\n    if (!isMobile) {\n      return (\n        <Navigate\n          to={{\n            pathname: authorisedModels[0].to,\n            search: authorisedModels[0].search ?? '',\n          }}\n          replace\n        />\n      );\n    }\n\n    // On mobile: show navigation page\n    return (\n      <>\n        <Page.Title>\n          {formatMessage({\n            id: getTranslation('plugin.name'),\n            defaultMessage: 'Content Manager',\n          })}\n        </Page.Title>\n        <SubNav.PageWrapper>\n          <LeftMenu isFullPage />\n        </SubNav.PageWrapper>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Page.Title>\n        {formatMessage({\n          id: getTranslation('plugin.name'),\n          defaultMessage: 'Content Manager',\n        })}\n      </Page.Title>\n      <Layouts.Root sideNav={<LeftMenu />}>\n        <DragLayer renderItem={renderDraglayerItem} />\n        <Outlet />\n      </Layouts.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * renderDraglayerItem\n * -----------------------------------------------------------------------------------------------*/\n\nfunction renderDraglayerItem({ type, item }: Parameters<DragLayerProps['renderItem']>[0]) {\n  if (!type || (type && typeof type !== 'string')) {\n    return null;\n  }\n\n  /**\n   * Because a user may have multiple relations / dynamic zones / repeable fields in the same content type,\n   * we append the fieldName for the item type to make them unique, however, we then want to extract that\n   * first type to apply the correct preview.\n   */\n  const [actualType] = type.split('_');\n\n  switch (actualType) {\n    case ItemTypes.EDIT_FIELD:\n    case ItemTypes.FIELD:\n      return <CardDragPreview label={item.label} />;\n    case ItemTypes.COMPONENT:\n    case ItemTypes.DYNAMIC_ZONE:\n      return <ComponentDragPreview displayedValue={item.displayedValue} />;\n\n    case ItemTypes.RELATION:\n      return <RelationDragPreview {...item} />;\n\n    default:\n      return null;\n  }\n}\n\nexport { Layout };\n"],"names":["Layout","contentTypeMatch","useMatch","isMobile","useIsMobile","isLoading","collectionTypeLinks","models","singleTypeLinks","useContentManagerInitData","authorisedModels","sort","a","b","title","localeCompare","pathname","useLocation","formatMessage","useIntl","_jsxs","_Fragment","_jsx","Page","Title","id","getTranslation","defaultMessage","Loading","supportedModelsToDisplay","filter","isDisplayed","length","Navigate","to","search","replace","SubNav","PageWrapper","LeftMenu","isFullPage","Layouts","Root","sideNav","DragLayer","renderItem","renderDraglayerItem","Outlet","type","item","actualType","split","ItemTypes","EDIT_FIELD","FIELD","CardDragPreview","label","COMPONENT","DYNAMIC_ZONE","ComponentDragPreview","displayedValue","RELATION","RelationDragPreview"],"mappings":"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"}
+{"version":3,"file":"layout.js","sources":["../../admin/src/layout.tsx"],"sourcesContent":["/* eslint-disable check-file/filename-naming-convention */\nimport * as React from 'react';\n\nimport { Page, Layouts, SubNav, useIsMobile, LazyOutlet } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Navigate, useLocation, useMatch } from 'react-router-dom';\n\nimport { DragLayer, DragLayerProps } from './components/DragLayer';\nimport { CardDragPreview } from './components/DragPreviews/CardDragPreview';\nimport { ComponentDragPreview } from './components/DragPreviews/ComponentDragPreview';\nimport { RelationDragPreview } from './components/DragPreviews/RelationDragPreview';\nimport { LeftMenu } from './components/LeftMenu';\nimport { ItemTypes } from './constants/dragAndDrop';\nimport { useContentManagerInitData } from './hooks/useContentManagerInitData';\nimport { getTranslation } from './utils/translations';\n\n/* -------------------------------------------------------------------------------------------------\n * Layout\n * -----------------------------------------------------------------------------------------------*/\n\nconst Layout = () => {\n  const contentTypeMatch = useMatch('/content-manager/:kind/:uid/*');\n  const isMobile = useIsMobile();\n\n  const { isLoading, collectionTypeLinks, models, singleTypeLinks } = useContentManagerInitData();\n  const authorisedModels = [...collectionTypeLinks, ...singleTypeLinks].sort((a, b) =>\n    a.title.localeCompare(b.title)\n  );\n\n  const { pathname } = useLocation();\n  const { formatMessage } = useIntl();\n\n  if (isLoading) {\n    return (\n      <>\n        <Page.Title>\n          {formatMessage({\n            id: getTranslation('plugin.name'),\n            defaultMessage: 'Content Manager',\n          })}\n        </Page.Title>\n        <Page.Loading />\n      </>\n    );\n  }\n\n  // Array of models that are displayed in the content manager\n  const supportedModelsToDisplay = models.filter(({ isDisplayed }) => isDisplayed);\n\n  // Redirect the user to the 403 page\n  if (\n    authorisedModels.length === 0 &&\n    supportedModelsToDisplay.length > 0 &&\n    pathname !== '/content-manager/403'\n  ) {\n    return <Navigate to=\"/403\" />;\n  }\n\n  // Redirect the user to the create content type page\n  if (supportedModelsToDisplay.length === 0 && pathname !== '/no-content-types') {\n    return <Navigate to=\"/no-content-types\" />;\n  }\n\n  // On /content-manager base route\n  if (!contentTypeMatch && authorisedModels.length > 0) {\n    // On desktop: redirect to first collection type\n    if (!isMobile) {\n      return (\n        <Navigate\n          to={{\n            pathname: authorisedModels[0].to,\n            search: authorisedModels[0].search ?? '',\n          }}\n          replace\n        />\n      );\n    }\n\n    // On mobile: show navigation page\n    return (\n      <>\n        <Page.Title>\n          {formatMessage({\n            id: getTranslation('plugin.name'),\n            defaultMessage: 'Content Manager',\n          })}\n        </Page.Title>\n        <SubNav.PageWrapper>\n          <LeftMenu isFullPage />\n        </SubNav.PageWrapper>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Page.Title>\n        {formatMessage({\n          id: getTranslation('plugin.name'),\n          defaultMessage: 'Content Manager',\n        })}\n      </Page.Title>\n      <Layouts.Root sideNav={<LeftMenu />}>\n        <DragLayer renderItem={renderDraglayerItem} />\n        <LazyOutlet nested />\n      </Layouts.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * renderDraglayerItem\n * -----------------------------------------------------------------------------------------------*/\n\nfunction renderDraglayerItem({ type, item }: Parameters<DragLayerProps['renderItem']>[0]) {\n  if (!type || (type && typeof type !== 'string')) {\n    return null;\n  }\n\n  /**\n   * Because a user may have multiple relations / dynamic zones / repeable fields in the same content type,\n   * we append the fieldName for the item type to make them unique, however, we then want to extract that\n   * first type to apply the correct preview.\n   */\n  const [actualType] = type.split('_');\n\n  switch (actualType) {\n    case ItemTypes.EDIT_FIELD:\n    case ItemTypes.FIELD:\n      return <CardDragPreview label={item.label} />;\n    case ItemTypes.COMPONENT:\n    case ItemTypes.DYNAMIC_ZONE:\n      return <ComponentDragPreview displayedValue={item.displayedValue} />;\n\n    case ItemTypes.RELATION:\n      return <RelationDragPreview {...item} />;\n\n    default:\n      return null;\n  }\n}\n\nexport { Layout };\n"],"names":["Layout","contentTypeMatch","useMatch","isMobile","useIsMobile","isLoading","collectionTypeLinks","models","singleTypeLinks","useContentManagerInitData","authorisedModels","sort","a","b","title","localeCompare","pathname","useLocation","formatMessage","useIntl","_jsxs","_Fragment","_jsx","Page","Title","id","getTranslation","defaultMessage","Loading","supportedModelsToDisplay","filter","isDisplayed","length","Navigate","to","search","replace","SubNav","PageWrapper","LeftMenu","isFullPage","Layouts","Root","sideNav","DragLayer","renderItem","renderDraglayerItem","LazyOutlet","nested","type","item","actualType","split","ItemTypes","EDIT_FIELD","FIELD","CardDragPreview","label","COMPONENT","DYNAMIC_ZONE","ComponentDragPreview","displayedValue","RELATION","RelationDragPreview"],"mappings":"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"}

package/dist/admin/layout.mjs

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'react';
-import { useIsMobile, Page, SubNav, Layouts } from '@strapi/admin/strapi-admin';
+import { useIsMobile, Page, SubNav, Layouts, LazyOutlet } from '@strapi/admin/strapi-admin';
 import { useIntl } from 'react-intl';
-import { useMatch, useLocation, Navigate, Outlet } from 'react-router-dom';
+import { useMatch, useLocation, Navigate } from 'react-router-dom';
 import { DragLayer } from './components/DragLayer.mjs';
 import { CardDragPreview } from './components/DragPreviews/CardDragPreview.mjs';
 import { ComponentDragPreview } from './components/DragPreviews/ComponentDragPreview.mjs';
@@ -94,7 +94,9 @@ import { getTranslation } from './utils/translations.mjs';
                     /*#__PURE__*/ jsx(DragLayer, {
                         renderItem: renderDraglayerItem
                     }),
-                    /*#__PURE__*/ jsx(Outlet, {})
+                    /*#__PURE__*/ jsx(LazyOutlet, {
+                        nested: true
+                    })
                 ]
             })
         ]

package/dist/admin/layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"layout.mjs","sources":["../../admin/src/layout.tsx"],"sourcesContent":["/* eslint-disable check-file/filename-naming-convention */\nimport * as React from 'react';\n\nimport { Page, Layouts, SubNav, useIsMobile } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Navigate, Outlet, useLocation, useMatch } from 'react-router-dom';\n\nimport { DragLayer, DragLayerProps } from './components/DragLayer';\nimport { CardDragPreview } from './components/DragPreviews/CardDragPreview';\nimport { ComponentDragPreview } from './components/DragPreviews/ComponentDragPreview';\nimport { RelationDragPreview } from './components/DragPreviews/RelationDragPreview';\nimport { LeftMenu } from './components/LeftMenu';\nimport { ItemTypes } from './constants/dragAndDrop';\nimport { useContentManagerInitData } from './hooks/useContentManagerInitData';\nimport { getTranslation } from './utils/translations';\n\n/* -------------------------------------------------------------------------------------------------\n * Layout\n * -----------------------------------------------------------------------------------------------*/\n\nconst Layout = () => {\n  const contentTypeMatch = useMatch('/content-manager/:kind/:uid/*');\n  const isMobile = useIsMobile();\n\n  const { isLoading, collectionTypeLinks, models, singleTypeLinks } = useContentManagerInitData();\n  const authorisedModels = [...collectionTypeLinks, ...singleTypeLinks].sort((a, b) =>\n    a.title.localeCompare(b.title)\n  );\n\n  const { pathname } = useLocation();\n  const { formatMessage } = useIntl();\n\n  if (isLoading) {\n    return (\n      <>\n        <Page.Title>\n          {formatMessage({\n            id: getTranslation('plugin.name'),\n            defaultMessage: 'Content Manager',\n          })}\n        </Page.Title>\n        <Page.Loading />\n      </>\n    );\n  }\n\n  // Array of models that are displayed in the content manager\n  const supportedModelsToDisplay = models.filter(({ isDisplayed }) => isDisplayed);\n\n  // Redirect the user to the 403 page\n  if (\n    authorisedModels.length === 0 &&\n    supportedModelsToDisplay.length > 0 &&\n    pathname !== '/content-manager/403'\n  ) {\n    return <Navigate to=\"/403\" />;\n  }\n\n  // Redirect the user to the create content type page\n  if (supportedModelsToDisplay.length === 0 && pathname !== '/no-content-types') {\n    return <Navigate to=\"/no-content-types\" />;\n  }\n\n  // On /content-manager base route\n  if (!contentTypeMatch && authorisedModels.length > 0) {\n    // On desktop: redirect to first collection type\n    if (!isMobile) {\n      return (\n        <Navigate\n          to={{\n            pathname: authorisedModels[0].to,\n            search: authorisedModels[0].search ?? '',\n          }}\n          replace\n        />\n      );\n    }\n\n    // On mobile: show navigation page\n    return (\n      <>\n        <Page.Title>\n          {formatMessage({\n            id: getTranslation('plugin.name'),\n            defaultMessage: 'Content Manager',\n          })}\n        </Page.Title>\n        <SubNav.PageWrapper>\n          <LeftMenu isFullPage />\n        </SubNav.PageWrapper>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Page.Title>\n        {formatMessage({\n          id: getTranslation('plugin.name'),\n          defaultMessage: 'Content Manager',\n        })}\n      </Page.Title>\n      <Layouts.Root sideNav={<LeftMenu />}>\n        <DragLayer renderItem={renderDraglayerItem} />\n        <Outlet />\n      </Layouts.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * renderDraglayerItem\n * -----------------------------------------------------------------------------------------------*/\n\nfunction renderDraglayerItem({ type, item }: Parameters<DragLayerProps['renderItem']>[0]) {\n  if (!type || (type && typeof type !== 'string')) {\n    return null;\n  }\n\n  /**\n   * Because a user may have multiple relations / dynamic zones / repeable fields in the same content type,\n   * we append the fieldName for the item type to make them unique, however, we then want to extract that\n   * first type to apply the correct preview.\n   */\n  const [actualType] = type.split('_');\n\n  switch (actualType) {\n    case ItemTypes.EDIT_FIELD:\n    case ItemTypes.FIELD:\n      return <CardDragPreview label={item.label} />;\n    case ItemTypes.COMPONENT:\n    case ItemTypes.DYNAMIC_ZONE:\n      return <ComponentDragPreview displayedValue={item.displayedValue} />;\n\n    case ItemTypes.RELATION:\n      return <RelationDragPreview {...item} />;\n\n    default:\n      return null;\n  }\n}\n\nexport { Layout };\n"],"names":["Layout","contentTypeMatch","useMatch","isMobile","useIsMobile","isLoading","collectionTypeLinks","models","singleTypeLinks","useContentManagerInitData","authorisedModels","sort","a","b","title","localeCompare","pathname","useLocation","formatMessage","useIntl","_jsxs","_Fragment","_jsx","Page","Title","id","getTranslation","defaultMessage","Loading","supportedModelsToDisplay","filter","isDisplayed","length","Navigate","to","search","replace","SubNav","PageWrapper","LeftMenu","isFullPage","Layouts","Root","sideNav","DragLayer","renderItem","renderDraglayerItem","Outlet","type","item","actualType","split","ItemTypes","EDIT_FIELD","FIELD","CardDragPreview","label","COMPONENT","DYNAMIC_ZONE","ComponentDragPreview","displayedValue","RELATION","RelationDragPreview"],"mappings":";;;;;;;;;;;;;;AAgBA;;AAEkG,2GAE5FA,MAAAA,GAAS,IAAA;AACb,IAAA,MAAMC,mBAAmBC,QAAAA,CAAS,+BAAA,CAAA;AAClC,IAAA,MAAMC,QAAAA,GAAWC,WAAAA,EAAAA;IAEjB,MAAM,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,EAAEC,eAAe,EAAE,GAAGC,yBAAAA,EAAAA;AACpE,IAAA,MAAMC,gBAAAA,GAAmB;AAAIJ,QAAAA,GAAAA,mBAAAA;AAAwBE,QAAAA,GAAAA;KAAgB,CAACG,IAAI,CAAC,CAACC,CAAAA,EAAGC,CAAAA,GAC7ED,CAAAA,CAAEE,KAAK,CAACC,aAAa,CAACF,CAAAA,CAAEC,KAAK,CAAA,CAAA;IAG/B,MAAM,EAAEE,QAAQ,EAAE,GAAGC,WAAAA,EAAAA;IACrB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,IAAId,SAAAA,EAAW;QACb,qBACEe,IAAA,CAAAC,QAAA,EAAA;;AACE,8BAAAC,GAAA,CAACC,KAAKC,KAAK,EAAA;8BACRN,aAAAA,CAAc;AACbO,wBAAAA,EAAAA,EAAIC,cAAAA,CAAe,aAAA,CAAA;wBACnBC,cAAAA,EAAgB;AAClB,qBAAA;;AAEF,8BAAAL,GAAA,CAACC,KAAKK,OAAO,EAAA,EAAA;;;AAGnB,IAAA;;IAGA,MAAMC,wBAAAA,GAA2BtB,OAAOuB,MAAM,CAAC,CAAC,EAAEC,WAAW,EAAE,GAAKA,WAAAA,CAAAA;;IAGpE,IACErB,gBAAAA,CAAiBsB,MAAM,KAAK,CAAA,IAC5BH,yBAAyBG,MAAM,GAAG,CAAA,IAClChB,QAAAA,KAAa,sBAAA,EACb;AACA,QAAA,qBAAOM,GAAA,CAACW,QAAAA,EAAAA;YAASC,EAAAA,EAAG;;AACtB,IAAA;;AAGA,IAAA,IAAIL,wBAAAA,CAAyBG,MAAM,KAAK,CAAA,IAAKhB,aAAa,mBAAA,EAAqB;AAC7E,QAAA,qBAAOM,GAAA,CAACW,QAAAA,EAAAA;YAASC,EAAAA,EAAG;;AACtB,IAAA;;AAGA,IAAA,IAAI,CAACjC,gBAAAA,IAAoBS,gBAAAA,CAAiBsB,MAAM,GAAG,CAAA,EAAG;;AAEpD,QAAA,IAAI,CAAC7B,QAAAA,EAAU;AACb,YAAA,qBACEmB,GAAA,CAACW,QAAAA,EAAAA;gBACCC,EAAAA,EAAI;AACFlB,oBAAAA,QAAAA,EAAUN,gBAAgB,CAAC,CAAA,CAAE,CAACwB,EAAE;AAChCC,oBAAAA,MAAAA,EAAQzB,gBAAgB,CAAC,CAAA,CAAE,CAACyB,MAAM,IAAI;AACxC,iBAAA;gBACAC,OAAO,EAAA;;AAGb,QAAA;;QAGA,qBACEhB,IAAA,CAAAC,QAAA,EAAA;;AACE,8BAAAC,GAAA,CAACC,KAAKC,KAAK,EAAA;8BACRN,aAAAA,CAAc;AACbO,wBAAAA,EAAAA,EAAIC,cAAAA,CAAe,aAAA,CAAA;wBACnBC,cAAAA,EAAgB;AAClB,qBAAA;;AAEF,8BAAAL,GAAA,CAACe,OAAOC,WAAW,EAAA;AACjB,oBAAA,QAAA,gBAAAhB,GAAA,CAACiB,QAAAA,EAAAA;wBAASC,UAAU,EAAA;;;;;AAI5B,IAAA;IAEA,qBACEpB,IAAA,CAAAC,QAAA,EAAA;;AACE,0BAAAC,GAAA,CAACC,KAAKC,KAAK,EAAA;0BACRN,aAAAA,CAAc;AACbO,oBAAAA,EAAAA,EAAIC,cAAAA,CAAe,aAAA,CAAA;oBACnBC,cAAAA,EAAgB;AAClB,iBAAA;;AAEF,0BAAAP,IAAA,CAACqB,QAAQC,IAAI,EAAA;AAACC,gBAAAA,OAAAA,gBAASrB,GAAA,CAACiB,QAAAA,EAAAA,EAAAA,CAAAA;;kCACtBjB,GAAA,CAACsB,SAAAA,EAAAA;wBAAUC,UAAAA,EAAYC;;kCACvBxB,GAAA,CAACyB,MAAAA,EAAAA,EAAAA;;;;;AAIT;AAEA;;AAEkG,qGAElG,SAASD,mBAAAA,CAAoB,EAAEE,IAAI,EAAEC,IAAI,EAA+C,EAAA;AACtF,IAAA,IAAI,CAACD,IAAAA,IAASA,IAAAA,IAAQ,OAAOA,SAAS,QAAA,EAAW;QAC/C,OAAO,IAAA;AACT,IAAA;AAEA;;;;AAIC,MACD,MAAM,CAACE,UAAAA,CAAW,GAAGF,IAAAA,CAAKG,KAAK,CAAC,GAAA,CAAA;IAEhC,OAAQD,UAAAA;AACN,QAAA,KAAKE,UAAUC,UAAU;AACzB,QAAA,KAAKD,UAAUE,KAAK;AAClB,YAAA,qBAAOhC,GAAA,CAACiC,eAAAA,EAAAA;AAAgBC,gBAAAA,KAAAA,EAAOP,KAAKO;;AACtC,QAAA,KAAKJ,UAAUK,SAAS;AACxB,QAAA,KAAKL,UAAUM,YAAY;AACzB,YAAA,qBAAOpC,GAAA,CAACqC,oBAAAA,EAAAA;AAAqBC,gBAAAA,cAAAA,EAAgBX,KAAKW;;AAEpD,QAAA,KAAKR,UAAUS,QAAQ;AACrB,YAAA,qBAAOvC,GAAA,CAACwC,mBAAAA,EAAAA;AAAqB,gBAAA,GAAGb;;AAElC,QAAA;YACE,OAAO,IAAA;AACX;AACF;;;;"}
+{"version":3,"file":"layout.mjs","sources":["../../admin/src/layout.tsx"],"sourcesContent":["/* eslint-disable check-file/filename-naming-convention */\nimport * as React from 'react';\n\nimport { Page, Layouts, SubNav, useIsMobile, LazyOutlet } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Navigate, useLocation, useMatch } from 'react-router-dom';\n\nimport { DragLayer, DragLayerProps } from './components/DragLayer';\nimport { CardDragPreview } from './components/DragPreviews/CardDragPreview';\nimport { ComponentDragPreview } from './components/DragPreviews/ComponentDragPreview';\nimport { RelationDragPreview } from './components/DragPreviews/RelationDragPreview';\nimport { LeftMenu } from './components/LeftMenu';\nimport { ItemTypes } from './constants/dragAndDrop';\nimport { useContentManagerInitData } from './hooks/useContentManagerInitData';\nimport { getTranslation } from './utils/translations';\n\n/* -------------------------------------------------------------------------------------------------\n * Layout\n * -----------------------------------------------------------------------------------------------*/\n\nconst Layout = () => {\n  const contentTypeMatch = useMatch('/content-manager/:kind/:uid/*');\n  const isMobile = useIsMobile();\n\n  const { isLoading, collectionTypeLinks, models, singleTypeLinks } = useContentManagerInitData();\n  const authorisedModels = [...collectionTypeLinks, ...singleTypeLinks].sort((a, b) =>\n    a.title.localeCompare(b.title)\n  );\n\n  const { pathname } = useLocation();\n  const { formatMessage } = useIntl();\n\n  if (isLoading) {\n    return (\n      <>\n        <Page.Title>\n          {formatMessage({\n            id: getTranslation('plugin.name'),\n            defaultMessage: 'Content Manager',\n          })}\n        </Page.Title>\n        <Page.Loading />\n      </>\n    );\n  }\n\n  // Array of models that are displayed in the content manager\n  const supportedModelsToDisplay = models.filter(({ isDisplayed }) => isDisplayed);\n\n  // Redirect the user to the 403 page\n  if (\n    authorisedModels.length === 0 &&\n    supportedModelsToDisplay.length > 0 &&\n    pathname !== '/content-manager/403'\n  ) {\n    return <Navigate to=\"/403\" />;\n  }\n\n  // Redirect the user to the create content type page\n  if (supportedModelsToDisplay.length === 0 && pathname !== '/no-content-types') {\n    return <Navigate to=\"/no-content-types\" />;\n  }\n\n  // On /content-manager base route\n  if (!contentTypeMatch && authorisedModels.length > 0) {\n    // On desktop: redirect to first collection type\n    if (!isMobile) {\n      return (\n        <Navigate\n          to={{\n            pathname: authorisedModels[0].to,\n            search: authorisedModels[0].search ?? '',\n          }}\n          replace\n        />\n      );\n    }\n\n    // On mobile: show navigation page\n    return (\n      <>\n        <Page.Title>\n          {formatMessage({\n            id: getTranslation('plugin.name'),\n            defaultMessage: 'Content Manager',\n          })}\n        </Page.Title>\n        <SubNav.PageWrapper>\n          <LeftMenu isFullPage />\n        </SubNav.PageWrapper>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Page.Title>\n        {formatMessage({\n          id: getTranslation('plugin.name'),\n          defaultMessage: 'Content Manager',\n        })}\n      </Page.Title>\n      <Layouts.Root sideNav={<LeftMenu />}>\n        <DragLayer renderItem={renderDraglayerItem} />\n        <LazyOutlet nested />\n      </Layouts.Root>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * renderDraglayerItem\n * -----------------------------------------------------------------------------------------------*/\n\nfunction renderDraglayerItem({ type, item }: Parameters<DragLayerProps['renderItem']>[0]) {\n  if (!type || (type && typeof type !== 'string')) {\n    return null;\n  }\n\n  /**\n   * Because a user may have multiple relations / dynamic zones / repeable fields in the same content type,\n   * we append the fieldName for the item type to make them unique, however, we then want to extract that\n   * first type to apply the correct preview.\n   */\n  const [actualType] = type.split('_');\n\n  switch (actualType) {\n    case ItemTypes.EDIT_FIELD:\n    case ItemTypes.FIELD:\n      return <CardDragPreview label={item.label} />;\n    case ItemTypes.COMPONENT:\n    case ItemTypes.DYNAMIC_ZONE:\n      return <ComponentDragPreview displayedValue={item.displayedValue} />;\n\n    case ItemTypes.RELATION:\n      return <RelationDragPreview {...item} />;\n\n    default:\n      return null;\n  }\n}\n\nexport { Layout };\n"],"names":["Layout","contentTypeMatch","useMatch","isMobile","useIsMobile","isLoading","collectionTypeLinks","models","singleTypeLinks","useContentManagerInitData","authorisedModels","sort","a","b","title","localeCompare","pathname","useLocation","formatMessage","useIntl","_jsxs","_Fragment","_jsx","Page","Title","id","getTranslation","defaultMessage","Loading","supportedModelsToDisplay","filter","isDisplayed","length","Navigate","to","search","replace","SubNav","PageWrapper","LeftMenu","isFullPage","Layouts","Root","sideNav","DragLayer","renderItem","renderDraglayerItem","LazyOutlet","nested","type","item","actualType","split","ItemTypes","EDIT_FIELD","FIELD","CardDragPreview","label","COMPONENT","DYNAMIC_ZONE","ComponentDragPreview","displayedValue","RELATION","RelationDragPreview"],"mappings":"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"}

package/dist/admin/pages/EditView/components/DocumentActions.js

@@ -23,6 +23,7 @@ var documents = require('../../../services/documents.js');
 var api = require('../../../utils/api.js');
 var translations = require('../../../utils/translations.js');
 var data = require('../utils/data.js');
+var draftRelationCounts = require('../utils/draftRelationCounts.js');
 var keyboardShortcuts = require('../utils/keyboardShortcuts.js');
 var RelationModal = require('./FormInputs/Relations/RelationModal.js');
 
@@ -52,6 +53,10 @@ var get__default = /*#__PURE__*/_interopDefault(get);
 var merge__default = /*#__PURE__*/_interopDefault(merge);
 var set__default = /*#__PURE__*/_interopDefault(set);
 
+const publishConfirmDialogOpeners = new Map();
+const openPublishConfirmDialog = (scope)=>{
+    publishConfirmDialogOpeners.get(scope)?.();
+};
 const connectRelationToParent = (parentDataToUpdate, fieldToConnect, data, fieldToConnectUID)=>{
     /*
    * Check if the fieldToConnect is already present in the parentDataToUpdate.
@@ -179,6 +184,24 @@ const DocumentActions = ({ actions })=>{
 const DocumentActionButton = ({ buttonType = 'button', ...action })=>{
     const [dialogId, setDialogId] = React__namespace.useState(null);
     const { toggleNotification } = strapiAdmin.useNotification();
+    React__namespace.useEffect(()=>{
+        const scope = action.publishConfirmScope;
+        if (action.type !== 'publish' || !action.dialog || !scope) {
+            return;
+        }
+        const open = ()=>setDialogId(action.id);
+        publishConfirmDialogOpeners.set(scope, open);
+        return ()=>{
+            if (publishConfirmDialogOpeners.get(scope) === open) {
+                publishConfirmDialogOpeners.delete(scope);
+            }
+        };
+    }, [
+        action.type,
+        action.dialog,
+        action.id,
+        action.publishConfirmScope
+    ]);
     const handleClick = (action)=>async (e)=>{
             const { onClick = ()=>false, dialog, id } = action;
             const muteDialog = await onClick(e);
@@ -329,7 +352,7 @@ const DocumentActionsMenu = ({ actions, children, label, variant = 'tertiary' })
         ]
     });
 };
-const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, content, isOpen, variant = 'secondary', loading })=>{
+const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, content, bodyIcon, confirmLabel, isOpen, variant = 'secondary', loading })=>{
     const { formatMessage } = reactIntl.useIntl();
     const handleClose = async ()=>{
         if (onCancel) {
@@ -343,6 +366,28 @@ const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, cont
         }
         onClose();
     };
+    const dialogBody = bodyIcon ? /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 2,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                justifyContent: "center",
+                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.WarningCircle, {
+                    width: "24px",
+                    height: "24px",
+                    fill: bodyIcon === 'danger' ? 'danger600' : 'primary600'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                id: "confirm-description",
+                tag: "p",
+                variant: "omega",
+                textAlign: "center",
+                children: content
+            })
+        ]
+    }) : content;
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
         open: isOpen,
         onOpenChange: handleClose,
@@ -352,7 +397,7 @@ const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, cont
                     children: title
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Body, {
-                    children: content
+                    children: dialogBody
                 }),
                 /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Dialog.Footer, {
                     children: [
@@ -371,7 +416,7 @@ const DocumentActionConfirmDialog = ({ onClose, onCancel, onConfirm, title, cont
                             variant: variant,
                             fullWidth: true,
                             loading: loading,
-                            children: formatMessage({
+                            children: confirmLabel ?? formatMessage({
                                 id: 'app.components.Button.confirm',
                                 defaultMessage: 'Confirm'
                             })
@@ -439,10 +484,11 @@ const transformData = (data)=>{
             canReadFields
         }));
     const { publish, isLoading } = useDocumentActions.useDocumentActions();
-    const onPreview = Preview.usePreviewContext('UpdateAction', (state)=>state.onPreview, false);
-    const [countDraftRelations, { isLoading: isLoadingDraftRelations, isError: isErrorDraftRelations }] = documents.useGetDraftRelationCountQuery();
-    const [localCountOfDraftRelations, setLocalCountOfDraftRelations] = React__namespace.useState(0);
-    const [serverCountOfDraftRelations, setServerCountOfDraftRelations] = React__namespace.useState(0);
+    const onPreview = Preview.usePreviewContext('PublishAction', (state)=>state.onPreview, false);
+    const [countDraftRelations, { isError: isErrorDraftRelations }] = documents.useGetDraftRelationCountQuery();
+    const [localDraftRelationCounts, setLocalDraftRelationCounts] = React__namespace.useState(draftRelationCounts.EMPTY_DRAFT_RELATION_COUNTS);
+    const [serverDraftRelationCounts, setServerDraftRelationCounts] = React__namespace.useState(draftRelationCounts.EMPTY_DRAFT_RELATION_COUNTS);
+    const [isFetchingDraftRelations, setIsFetchingDraftRelations] = React__namespace.useState(false);
     const [{ rawQuery }] = strapiAdmin.useQueryParams();
     const modified = strapiAdmin.useForm('PublishAction', ({ modified })=>modified);
     const setSubmitting = strapiAdmin.useForm('PublishAction', ({ setSubmitting })=>setSubmitting);
@@ -456,6 +502,8 @@ const transformData = (data)=>{
     // need to discriminate if the publish is coming from a relation modal or in the edit view
     const relationContext = RelationModal.useRelationModal('PublishAction', ()=>true, false);
     const fromRelationModal = relationContext != undefined;
+    const isRelationModalOpen = RelationModal.useRelationModal('PublishAction', (state)=>state.state.isModalOpen, false);
+    const publishConfirmScope = fromRelationModal ? 'relation-modal' : onPreview ? 'preview' : 'panel';
     const dispatch = RelationModal.useRelationModal('PublishAction', (state)=>state.dispatch);
     const fieldToConnect = RelationModal.useRelationModal('PublishAction', (state)=>state.state.fieldToConnect, false);
     const fieldToConnectUID = RelationModal.useRelationModal('PublishAction', (state)=>state.state.fieldToConnectUID, false);
@@ -482,49 +530,19 @@ const transformData = (data)=>{
         formatMessage
     ]);
     React__namespace.useEffect(()=>{
-        const localDraftRelations = new Set();
-        /**
-     * Extracts draft relations from the provided data object.
-     * It checks for a connect array of relations.
-     * If a relation has a status of 'draft', its id is added to the localDraftRelations set.
-     */ const extractDraftRelations = (data)=>{
-            const relations = data.connect || [];
-            relations.forEach((relation)=>{
-                if (relation.status === 'draft') {
-                    localDraftRelations.add(relation.id);
-                }
-            });
-        };
-        /**
-     * Recursively traverses the provided data object to extract draft relations from arrays within 'connect' keys.
-     * If the data is an object, it looks for 'connect' keys to pass their array values to extractDraftRelations.
-     * It recursively calls itself for any non-null objects it contains.
-     */ const traverseAndExtract = (data)=>{
-            Object.entries(data).forEach(([key, value])=>{
-                if (key === 'connect' && Array.isArray(value)) {
-                    extractDraftRelations({
-                        connect: value
-                    });
-                } else if (typeof value === 'object' && value !== null) {
-                    traverseAndExtract(value);
-                }
-            });
-        };
-        if (!documentId || modified) {
-            traverseAndExtract(formValues);
-            setLocalCountOfDraftRelations(localDraftRelations.size);
-        }
+        setLocalDraftRelationCounts(draftRelationCounts.countLocalDraftRelations(formValues, schema, components, model));
     }, [
-        documentId,
-        modified,
+        components,
         formValues,
-        setLocalCountOfDraftRelations
+        model,
+        schema
     ]);
-    React__namespace.useEffect(()=>{
-        if (!document || !document.documentId || isListView) {
+    const fetchDraftRelationsCount = React__namespace.useCallback(async ()=>{
+        if (!document?.documentId || isListView) {
             return;
         }
-        const fetchDraftRelationsCount = async ()=>{
+        setIsFetchingDraftRelations(true);
+        try {
             const { data, error } = await countDraftRelations({
                 collectionType,
                 model,
@@ -535,18 +553,36 @@ const transformData = (data)=>{
                 throw error;
             }
             if (data) {
-                setServerCountOfDraftRelations(data.data);
+                setServerDraftRelationCounts(draftRelationCounts.normalizeDraftRelationCounts(data));
             }
-        };
-        fetchDraftRelationsCount();
+        } finally{
+            setIsFetchingDraftRelations(false);
+        }
     }, [
-        isListView,
-        document,
-        documentId,
-        countDraftRelations,
         collectionType,
-        model,
-        currentDocumentMeta.params
+        countDraftRelations,
+        currentDocumentMeta.params,
+        document?.documentId,
+        documentId,
+        isListView,
+        model
+    ]);
+    React__namespace.useEffect(()=>{
+        fetchDraftRelationsCount();
+    }, [
+        fetchDraftRelationsCount,
+        document?.updatedAt
+    ]);
+    React__namespace.useEffect(()=>{
+        const handleWindowFocus = ()=>{
+            fetchDraftRelationsCount();
+        };
+        window.addEventListener('focus', handleWindowFocus);
+        return ()=>{
+            window.removeEventListener('focus', handleWindowFocus);
+        };
+    }, [
+        fetchDraftRelationsCount
     ]);
     const parentDocumentMetaToUpdate = documentHistory?.at(-2) ?? rootDocumentMeta;
     const parentDocumentData = useDocument.useDocument({
@@ -688,11 +724,18 @@ const transformData = (data)=>{
             }
         }
     };
-    const totalDraftRelations = localCountOfDraftRelations + serverCountOfDraftRelations;
-    // TODO skipping this for now as there is a bug with the draft relation count that will be worked on separately
-    // see RFC "Count draft relations" in Notion
-    const enableDraftRelationsCount = false;
-    const hasDraftRelations = enableDraftRelationsCount;
+    const getFreshDraftRelationCounts = React__namespace.useCallback(()=>draftRelationCounts.resolveDraftRelationCounts(documentId, modified, draftRelationCounts.countLocalDraftRelations(getValues(), schema, components, model), serverDraftRelationCounts), [
+        components,
+        documentId,
+        getValues,
+        model,
+        modified,
+        schema,
+        serverDraftRelationCounts
+    ]);
+    const draftRelationCounts$1 = draftRelationCounts.resolveDraftRelationCounts(documentId, modified, localDraftRelationCounts, serverDraftRelationCounts);
+    const { hasUnpublishedRelations, hasDraftM2mLinks, dialogVariant, bodyIcon, confirmLabel } = draftRelationCounts.getDraftRelationsPublishState(draftRelationCounts$1);
+    const supportsDraftRelationWarning = Boolean(schema?.options?.draftAndPublish);
     /**
    * Disabled when:
    *  - currently if you're cloning a document we don't support publish & clone at the same time.
@@ -701,7 +744,7 @@ const transformData = (data)=>{
    *  - the document is already published & not modified
    *  - the document is being created & not modified
    *  - the user doesn't have the permission to publish
-   */ const isDisabled = isCloning || isSubmitting || isLoadingDraftRelations || activeTab === 'published' || !modified && isDocumentPublished || !modified && !document?.documentId || !canPublish;
+   */ const isDisabled = isCloning || isSubmitting || isFetchingDraftRelations || activeTab === 'published' || !modified && isDocumentPublished || !modified && !document?.documentId || !canPublish;
     // Publish on CMD+Shift+Enter (macOS) / CTRL+Shift+Enter (Windows/Linux).
     // Saving a draft (CMD/CTRL+Enter) is handled by the UpdateAction.
     React__namespace.useEffect(()=>{
@@ -713,18 +756,29 @@ const transformData = (data)=>{
                 return;
             }
             e.preventDefault();
-            if (!isDisabled && !hasDraftRelations) {
-                performPublish();
+            if (!fromRelationModal && isRelationModalOpen) {
+                return;
+            }
+            if (isDisabled) {
+                return;
             }
+            if (draftRelationCounts.getDraftRelationsPublishState(getFreshDraftRelationCounts()).hasDraftRelations) {
+                openPublishConfirmDialog(publishConfirmScope);
+                return;
+            }
+            performPublish();
         };
         window.addEventListener('keydown', handleKeyDown);
         return ()=>{
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [
-        hasDraftRelations,
+        fromRelationModal,
+        getFreshDraftRelationCounts,
         isDisabled,
+        isRelationModalOpen,
         performPublish,
+        publishConfirmScope,
         schema?.options?.draftAndPublish
     ]);
     if (!schema?.options?.draftAndPublish) {
@@ -739,26 +793,60 @@ const transformData = (data)=>{
             'relation-modal'
         ],
         disabled: isDisabled,
+        publishConfirmScope: supportsDraftRelationWarning ? publishConfirmScope : undefined,
         label: formatMessage({
             id: 'app.utils.publish',
             defaultMessage: 'Publish'
         }),
         onClick: async ()=>{
+            if (draftRelationCounts.getDraftRelationsPublishState(getFreshDraftRelationCounts()).hasDraftRelations) {
+                // Let DocumentActionButton open the confirmation dialog.
+                return;
+            }
             await performPublish();
+            // Skip the registered dialog when publishing directly.
+            return true;
         },
-        dialog: hasDraftRelations ? {
+        dialog: supportsDraftRelationWarning ? {
             type: 'dialog',
-            variant: 'danger',
-            footer: null,
+            variant: dialogVariant,
+            bodyIcon,
             title: formatMessage({
-                id: translations.getTranslation(`popUpwarning.warning.bulk-has-draft-relations.title`),
+                id: translations.getTranslation('popUpWarning.warning.has-draft-relations.title'),
                 defaultMessage: 'Confirmation'
             }),
-            content: formatMessage({
-                id: translations.getTranslation(`popUpwarning.warning.bulk-has-draft-relations.message`),
-                defaultMessage: 'This entry is related to {count, plural, one {# draft entry} other {# draft entries}}. Publishing it could leave broken links in your app.'
-            }, {
-                count: totalDraftRelations
+            content: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                    hasUnpublishedRelations ? formatMessage({
+                        id: translations.getTranslation('popUpWarning.warning.has-draft-relations.message'),
+                        defaultMessage: 'This entry is related to {count, plural, one {# draft entry} other {# draft entries}}. {count, plural, one {That relation will not be included in the published version.} other {Those relations will not be included in the published version.}}'
+                    }, {
+                        count: draftRelationCounts$1.unpublishedRelations
+                    }) : formatMessage({
+                        id: translations.getTranslation('popUpWarning.warning.has-draft-m2m-relations.message'),
+                        defaultMessage: '{count, plural, one {# linked entry is still in draft. It will appear on the live site once that entry is published.} other {# linked entries are still in draft. They will appear on the live site once those entries are published.}}'
+                    }, {
+                        count: draftRelationCounts$1.draftM2mLinks
+                    }),
+                    hasUnpublishedRelations && hasDraftM2mLinks ? ` ${formatMessage({
+                        id: translations.getTranslation('popUpWarning.warning.has-draft-m2m-relations.additional'),
+                        defaultMessage: '{count, plural, one {# many-to-many link points} other {# many-to-many links point}} to draft entries that will become visible once published.'
+                    }, {
+                        count: draftRelationCounts$1.draftM2mLinks
+                    })}` : null,
+                    ' ',
+                    formatMessage({
+                        id: translations.getTranslation('popUpWarning.warning.publish-question'),
+                        defaultMessage: 'Do you still want to publish?'
+                    })
+                ]
+            }),
+            confirmLabel: confirmLabel === 'publish' ? formatMessage({
+                id: 'app.utils.publish',
+                defaultMessage: 'Publish'
+            }) : formatMessage({
+                id: translations.getTranslation('popUpwarning.warning.has-draft-relations.button-confirm'),
+                defaultMessage: 'Publish without relations'
             }),
             onConfirm: async ()=>{
                 await performPublish();
@@ -1236,4 +1324,5 @@ exports.DEFAULT_ACTIONS = DEFAULT_ACTIONS;
 exports.DocumentActionButton = DocumentActionButton;
 exports.DocumentActions = DocumentActions;
 exports.DocumentActionsMenu = DocumentActionsMenu;
+exports.openPublishConfirmDialog = openPublishConfirmDialog;
 //# sourceMappingURL=DocumentActions.js.map