@strapi/content-type-builder 5.13.0-beta.1 → 5.13.1

package/dist/admin/components/Relation/RelationField/RelationTargetPicker/RelationTargetPicker.js

@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var designSystem = require('@strapi/design-system');
 var reactRedux = require('react-redux');
 var styledComponents = require('styled-components');
+var useDataManager = require('../../../../hooks/useDataManager.js');
 var isAllowedContentTypesForRelations = require('../../../../utils/isAllowedContentTypesForRelations.js');
-var useDataManager = require('../../../DataManager/useDataManager.js');
 var reducer = require('../../../FormModal/reducer.js');
 
 const RelationTargetPicker = ({ oneThatIsCreatingARelationWithAnother, target })=>{
@@ -13,10 +13,9 @@ const RelationTargetPicker = ({ oneThatIsCreatingARelationWithAnother, target })
     const dispatch = reactRedux.useDispatch();
     // TODO: replace with an obj { relation: 'x', bidirctional: true|false }
     const allowedContentTypesForRelation = sortedContentTypesList.filter(isAllowedContentTypesForRelations.isAllowedContentTypesForRelations);
-    const type = contentTypes[target];
-    if (!type) {
-        return null;
-    }
+    const { plugin = null, schema: { displayName } = {
+        displayName: 'error'
+    } } = contentTypes?.[target] ?? {};
     const handleSelect = ({ uid, plugin, title, restrictRelationsTo })=>()=>{
             const selectedContentTypeFriendlyName = plugin ? `${plugin}_${title}` : title;
             dispatch(reducer.actions.onChangeRelationTarget({
@@ -35,7 +34,7 @@ const RelationTargetPicker = ({ oneThatIsCreatingARelationWithAnother, target })
    */ return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(MenuTrigger, {
-                children: `${type.info.displayName} ${type.plugin ? `(from: ${type.plugin})` : ''}`
+                children: `${displayName} ${plugin ? `(from: ${plugin})` : ''}`
             }),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Content, {
                 zIndex: "popover",

package/dist/admin/components/Relation/RelationField/RelationTargetPicker/RelationTargetPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelationTargetPicker.js","sources":["../../../../../../admin/src/components/Relation/RelationField/RelationTargetPicker/RelationTargetPicker.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { useDispatch } from 'react-redux';\nimport { styled } from 'styled-components';\n\nimport { isAllowedContentTypesForRelations } from '../../../../utils';\nimport { useDataManager } from '../../../DataManager/useDataManager';\nimport { actions } from '../../../FormModal/reducer';\n\nimport type { Internal, Schema } from '@strapi/types';\ninterface RelationTargetPickerProps {\n  oneThatIsCreatingARelationWithAnother: string;\n  target: Internal.UID.ContentType;\n}\n\ntype SelectOpts = {\n  uid: string;\n  plugin?: string;\n  title: string;\n  restrictRelationsTo: Schema.Attribute.RelationKind.Any[] | null;\n};\n\nexport const RelationTargetPicker = ({\n  oneThatIsCreatingARelationWithAnother,\n  target,\n}: RelationTargetPickerProps) => {\n  const { contentTypes, sortedContentTypesList } = useDataManager();\n  const dispatch = useDispatch();\n  // TODO: replace with an obj { relation: 'x', bidirctional: true|false }\n  const allowedContentTypesForRelation = sortedContentTypesList.filter(\n    isAllowedContentTypesForRelations\n  );\n\n  const type = contentTypes[target];\n\n  if (!type) {\n    return null;\n  }\n\n  const handleSelect =\n    ({ uid, plugin, title, restrictRelationsTo }: SelectOpts) =>\n    () => {\n      const selectedContentTypeFriendlyName = plugin ? `${plugin}_${title}` : title;\n\n      dispatch(\n        actions.onChangeRelationTarget({\n          target: {\n            value: uid,\n            oneThatIsCreatingARelationWithAnother,\n            selectedContentTypeFriendlyName,\n            targetContentTypeAllowedRelations: restrictRelationsTo,\n          },\n        })\n      );\n    };\n\n  /**\n   * TODO: This should be a Select but the design doesn't match the\n   * styles of the select component and there isn't the ability to\n   * change it correctly.\n   */\n  return (\n    <Menu.Root>\n      <MenuTrigger>{`${type.info.displayName} ${type.plugin ? `(from: ${type.plugin})` : ''}`}</MenuTrigger>\n      <Menu.Content zIndex=\"popover\">\n        {allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo, plugin }) => (\n          <Menu.Item key={uid} onSelect={handleSelect({ uid, plugin, title, restrictRelationsTo })}>\n            {title}&nbsp;\n            {plugin && <>(from: {plugin})</>}\n          </Menu.Item>\n        ))}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nconst MenuTrigger = styled(Menu.Trigger)`\n  max-width: 16.8rem;\n  span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n"],"names":["RelationTargetPicker","oneThatIsCreatingARelationWithAnother","target","contentTypes","sortedContentTypesList","useDataManager","dispatch","useDispatch","allowedContentTypesForRelation","filter","isAllowedContentTypesForRelations","type","handleSelect","uid","plugin","title","restrictRelationsTo","selectedContentTypeFriendlyName","actions","onChangeRelationTarget","value","targetContentTypeAllowedRelations","_jsxs","Menu","Root","_jsx","MenuTrigger","info","displayName","Content","zIndex","map","Item","onSelect","_Fragment","styled","Trigger"],"mappings":";;;;;;;;;;MAqBaA,oBAAuB,GAAA,CAAC,EACnCC,qCAAqC,EACrCC,MAAM,EACoB,GAAA;AAC1B,IAAA,MAAM,EAAEC,YAAY,EAAEC,sBAAsB,EAAE,GAAGC,6BAAAA,EAAAA;AACjD,IAAA,MAAMC,QAAWC,GAAAA,sBAAAA,EAAAA;;IAEjB,MAAMC,8BAAAA,GAAiCJ,sBAAuBK,CAAAA,MAAM,CAClEC,mEAAAA,CAAAA;IAGF,MAAMC,IAAAA,GAAOR,YAAY,CAACD,MAAO,CAAA;AAEjC,IAAA,IAAI,CAACS,IAAM,EAAA;QACT,OAAO,IAAA;AACT;IAEA,MAAMC,YAAAA,GACJ,CAAC,EAAEC,GAAG,EAAEC,MAAM,EAAEC,KAAK,EAAEC,mBAAmB,EAAc,GACxD,IAAA;YACE,MAAMC,+BAAAA,GAAkCH,SAAS,CAAC,EAAEA,OAAO,CAAC,EAAEC,KAAM,CAAA,CAAC,GAAGA,KAAAA;YAExET,QACEY,CAAAA,eAAAA,CAAQC,sBAAsB,CAAC;gBAC7BjB,MAAQ,EAAA;oBACNkB,KAAOP,EAAAA,GAAAA;AACPZ,oBAAAA,qCAAAA;AACAgB,oBAAAA,+BAAAA;oBACAI,iCAAmCL,EAAAA;AACrC;AACF,aAAA,CAAA,CAAA;AAEJ,SAAA;AAEF;;;;MAKA,qBACEM,eAACC,CAAAA,iBAAAA,CAAKC,IAAI,EAAA;;0BACRC,cAACC,CAAAA,WAAAA,EAAAA;0BAAa,CAAC,EAAEf,KAAKgB,IAAI,CAACC,WAAW,CAAC,CAAC,EAAEjB,IAAKG,CAAAA,MAAM,GAAG,CAAC,OAAO,EAAEH,IAAKG,CAAAA,MAAM,CAAC,CAAC,CAAC,GAAG,EAAA,CAAG;;AACtF,0BAAAW,cAAA,CAACF,kBAAKM,OAAO,EAAA;gBAACC,MAAO,EAAA,SAAA;AAClBtB,gBAAAA,QAAAA,EAAAA,8BAAAA,CAA+BuB,GAAG,CAAC,CAAC,EAAElB,GAAG,EAAEE,KAAK,EAAEC,mBAAmB,EAAEF,MAAM,EAAE,iBAC9EQ,eAAA,CAACC,kBAAKS,IAAI,EAAA;AAAWC,wBAAAA,QAAAA,EAAUrB,YAAa,CAAA;AAAEC,4BAAAA,GAAAA;AAAKC,4BAAAA,MAAAA;AAAQC,4BAAAA,KAAAA;AAAOC,4BAAAA;AAAoB,yBAAA,CAAA;;AACnFD,4BAAAA,KAAAA;AAAM,4BAAA,GAAA;4BACND,MAAU,kBAAAQ,eAAA,CAAAY,mBAAA,EAAA;;AAAE,oCAAA,SAAA;AAAQpB,oCAAAA,MAAAA;AAAO,oCAAA;;;;AAFdD,qBAAAA,EAAAA,GAAAA,CAAAA;;;;AAQ1B;AAEA,MAAMa,WAAcS,GAAAA,uBAAAA,CAAOZ,iBAAKa,CAAAA,OAAO,CAAC;;;;;;;AAOxC,CAAC;;;;"}
+{"version":3,"file":"RelationTargetPicker.js","sources":["../../../../../../admin/src/components/Relation/RelationField/RelationTargetPicker/RelationTargetPicker.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { useDispatch } from 'react-redux';\nimport { styled } from 'styled-components';\n\nimport { useDataManager } from '../../../../hooks/useDataManager';\nimport { isAllowedContentTypesForRelations } from '../../../../utils';\nimport { actions } from '../../../FormModal/reducer';\n\ninterface RelationTargetPickerProps {\n  oneThatIsCreatingARelationWithAnother: string;\n  target: string;\n}\n\nexport const RelationTargetPicker = ({\n  oneThatIsCreatingARelationWithAnother,\n  target,\n}: RelationTargetPickerProps) => {\n  const { contentTypes, sortedContentTypesList } = useDataManager();\n  const dispatch = useDispatch();\n  // TODO: replace with an obj { relation: 'x', bidirctional: true|false }\n  const allowedContentTypesForRelation = sortedContentTypesList.filter(\n    isAllowedContentTypesForRelations\n  );\n\n  const { plugin = null, schema: { displayName } = { displayName: 'error' } } =\n    contentTypes?.[target] ?? {};\n\n  const handleSelect =\n    ({\n      uid,\n      plugin,\n      title,\n      restrictRelationsTo,\n    }: {\n      uid: string;\n      plugin: boolean;\n      title: string;\n      restrictRelationsTo: any;\n    }) =>\n    () => {\n      const selectedContentTypeFriendlyName = plugin ? `${plugin}_${title}` : title;\n\n      dispatch(\n        actions.onChangeRelationTarget({\n          target: {\n            value: uid,\n            oneThatIsCreatingARelationWithAnother,\n            selectedContentTypeFriendlyName,\n            targetContentTypeAllowedRelations: restrictRelationsTo,\n          },\n        })\n      );\n    };\n\n  /**\n   * TODO: This should be a Select but the design doesn't match the\n   * styles of the select component and there isn't the ability to\n   * change it correctly.\n   */\n  return (\n    <Menu.Root>\n      <MenuTrigger>{`${displayName} ${plugin ? `(from: ${plugin})` : ''}`}</MenuTrigger>\n      <Menu.Content zIndex=\"popover\">\n        {allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo, plugin }) => (\n          <Menu.Item key={uid} onSelect={handleSelect({ uid, plugin, title, restrictRelationsTo })}>\n            {title}&nbsp;\n            {plugin && <>(from: {plugin})</>}\n          </Menu.Item>\n        ))}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nconst MenuTrigger = styled(Menu.Trigger)`\n  max-width: 16.8rem;\n  span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n"],"names":["RelationTargetPicker","oneThatIsCreatingARelationWithAnother","target","contentTypes","sortedContentTypesList","useDataManager","dispatch","useDispatch","allowedContentTypesForRelation","filter","isAllowedContentTypesForRelations","plugin","schema","displayName","handleSelect","uid","title","restrictRelationsTo","selectedContentTypeFriendlyName","actions","onChangeRelationTarget","value","targetContentTypeAllowedRelations","_jsxs","Menu","Root","_jsx","MenuTrigger","Content","zIndex","map","Item","onSelect","_Fragment","styled","Trigger"],"mappings":";;;;;;;;;;MAaaA,oBAAuB,GAAA,CAAC,EACnCC,qCAAqC,EACrCC,MAAM,EACoB,GAAA;AAC1B,IAAA,MAAM,EAAEC,YAAY,EAAEC,sBAAsB,EAAE,GAAGC,6BAAAA,EAAAA;AACjD,IAAA,MAAMC,QAAWC,GAAAA,sBAAAA,EAAAA;;IAEjB,MAAMC,8BAAAA,GAAiCJ,sBAAuBK,CAAAA,MAAM,CAClEC,mEAAAA,CAAAA;IAGF,MAAM,EAAEC,SAAS,IAAI,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAG;QAAEA,WAAa,EAAA;AAAQ,KAAC,EAAE,GACzEV,YAAAA,GAAeD,MAAAA,CAAO,IAAI,EAAC;IAE7B,MAAMY,YAAAA,GACJ,CAAC,EACCC,GAAG,EACHJ,MAAM,EACNK,KAAK,EACLC,mBAAmB,EAMpB,GACD,IAAA;YACE,MAAMC,+BAAAA,GAAkCP,SAAS,CAAC,EAAEA,OAAO,CAAC,EAAEK,KAAM,CAAA,CAAC,GAAGA,KAAAA;YAExEV,QACEa,CAAAA,eAAAA,CAAQC,sBAAsB,CAAC;gBAC7BlB,MAAQ,EAAA;oBACNmB,KAAON,EAAAA,GAAAA;AACPd,oBAAAA,qCAAAA;AACAiB,oBAAAA,+BAAAA;oBACAI,iCAAmCL,EAAAA;AACrC;AACF,aAAA,CAAA,CAAA;AAEJ,SAAA;AAEF;;;;MAKA,qBACEM,eAACC,CAAAA,iBAAAA,CAAKC,IAAI,EAAA;;0BACRC,cAACC,CAAAA,WAAAA,EAAAA;AAAa,gBAAA,QAAA,EAAA,CAAC,EAAEd,WAAAA,CAAY,CAAC,EAAEF,MAAS,GAAA,CAAC,OAAO,EAAEA,MAAO,CAAA,CAAC,CAAC,GAAG,GAAG;;AAClE,0BAAAe,cAAA,CAACF,kBAAKI,OAAO,EAAA;gBAACC,MAAO,EAAA,SAAA;AAClBrB,gBAAAA,QAAAA,EAAAA,8BAAAA,CAA+BsB,GAAG,CAAC,CAAC,EAAEf,GAAG,EAAEC,KAAK,EAAEC,mBAAmB,EAAEN,MAAM,EAAE,iBAC9EY,eAAA,CAACC,kBAAKO,IAAI,EAAA;AAAWC,wBAAAA,QAAAA,EAAUlB,YAAa,CAAA;AAAEC,4BAAAA,GAAAA;AAAKJ,4BAAAA,MAAAA;AAAQK,4BAAAA,KAAAA;AAAOC,4BAAAA;AAAoB,yBAAA,CAAA;;AACnFD,4BAAAA,KAAAA;AAAM,4BAAA,GAAA;4BACNL,MAAU,kBAAAY,eAAA,CAAAU,mBAAA,EAAA;;AAAE,oCAAA,SAAA;AAAQtB,oCAAAA,MAAAA;AAAO,oCAAA;;;;AAFdI,qBAAAA,EAAAA,GAAAA,CAAAA;;;;AAQ1B;AAEA,MAAMY,WAAcO,GAAAA,uBAAAA,CAAOV,iBAAKW,CAAAA,OAAO,CAAC;;;;;;;AAOxC,CAAC;;;;"}

package/dist/admin/components/Relation/RelationField/RelationTargetPicker/RelationTargetPicker.mjs

@@ -2,8 +2,8 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Menu } from '@strapi/design-system';
 import { useDispatch } from 'react-redux';
 import { styled } from 'styled-components';
+import { useDataManager } from '../../../../hooks/useDataManager.mjs';
 import { isAllowedContentTypesForRelations } from '../../../../utils/isAllowedContentTypesForRelations.mjs';
-import { useDataManager } from '../../../DataManager/useDataManager.mjs';
 import { actions } from '../../../FormModal/reducer.mjs';
 
 const RelationTargetPicker = ({ oneThatIsCreatingARelationWithAnother, target })=>{
@@ -11,10 +11,9 @@ const RelationTargetPicker = ({ oneThatIsCreatingARelationWithAnother, target })
     const dispatch = useDispatch();
     // TODO: replace with an obj { relation: 'x', bidirctional: true|false }
     const allowedContentTypesForRelation = sortedContentTypesList.filter(isAllowedContentTypesForRelations);
-    const type = contentTypes[target];
-    if (!type) {
-        return null;
-    }
+    const { plugin = null, schema: { displayName } = {
+        displayName: 'error'
+    } } = contentTypes?.[target] ?? {};
     const handleSelect = ({ uid, plugin, title, restrictRelationsTo })=>()=>{
             const selectedContentTypeFriendlyName = plugin ? `${plugin}_${title}` : title;
             dispatch(actions.onChangeRelationTarget({
@@ -33,7 +32,7 @@ const RelationTargetPicker = ({ oneThatIsCreatingARelationWithAnother, target })
    */ return /*#__PURE__*/ jsxs(Menu.Root, {
         children: [
             /*#__PURE__*/ jsx(MenuTrigger, {
-                children: `${type.info.displayName} ${type.plugin ? `(from: ${type.plugin})` : ''}`
+                children: `${displayName} ${plugin ? `(from: ${plugin})` : ''}`
             }),
             /*#__PURE__*/ jsx(Menu.Content, {
                 zIndex: "popover",

package/dist/admin/components/Relation/RelationField/RelationTargetPicker/RelationTargetPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RelationTargetPicker.mjs","sources":["../../../../../../admin/src/components/Relation/RelationField/RelationTargetPicker/RelationTargetPicker.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { useDispatch } from 'react-redux';\nimport { styled } from 'styled-components';\n\nimport { isAllowedContentTypesForRelations } from '../../../../utils';\nimport { useDataManager } from '../../../DataManager/useDataManager';\nimport { actions } from '../../../FormModal/reducer';\n\nimport type { Internal, Schema } from '@strapi/types';\ninterface RelationTargetPickerProps {\n  oneThatIsCreatingARelationWithAnother: string;\n  target: Internal.UID.ContentType;\n}\n\ntype SelectOpts = {\n  uid: string;\n  plugin?: string;\n  title: string;\n  restrictRelationsTo: Schema.Attribute.RelationKind.Any[] | null;\n};\n\nexport const RelationTargetPicker = ({\n  oneThatIsCreatingARelationWithAnother,\n  target,\n}: RelationTargetPickerProps) => {\n  const { contentTypes, sortedContentTypesList } = useDataManager();\n  const dispatch = useDispatch();\n  // TODO: replace with an obj { relation: 'x', bidirctional: true|false }\n  const allowedContentTypesForRelation = sortedContentTypesList.filter(\n    isAllowedContentTypesForRelations\n  );\n\n  const type = contentTypes[target];\n\n  if (!type) {\n    return null;\n  }\n\n  const handleSelect =\n    ({ uid, plugin, title, restrictRelationsTo }: SelectOpts) =>\n    () => {\n      const selectedContentTypeFriendlyName = plugin ? `${plugin}_${title}` : title;\n\n      dispatch(\n        actions.onChangeRelationTarget({\n          target: {\n            value: uid,\n            oneThatIsCreatingARelationWithAnother,\n            selectedContentTypeFriendlyName,\n            targetContentTypeAllowedRelations: restrictRelationsTo,\n          },\n        })\n      );\n    };\n\n  /**\n   * TODO: This should be a Select but the design doesn't match the\n   * styles of the select component and there isn't the ability to\n   * change it correctly.\n   */\n  return (\n    <Menu.Root>\n      <MenuTrigger>{`${type.info.displayName} ${type.plugin ? `(from: ${type.plugin})` : ''}`}</MenuTrigger>\n      <Menu.Content zIndex=\"popover\">\n        {allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo, plugin }) => (\n          <Menu.Item key={uid} onSelect={handleSelect({ uid, plugin, title, restrictRelationsTo })}>\n            {title}&nbsp;\n            {plugin && <>(from: {plugin})</>}\n          </Menu.Item>\n        ))}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nconst MenuTrigger = styled(Menu.Trigger)`\n  max-width: 16.8rem;\n  span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n"],"names":["RelationTargetPicker","oneThatIsCreatingARelationWithAnother","target","contentTypes","sortedContentTypesList","useDataManager","dispatch","useDispatch","allowedContentTypesForRelation","filter","isAllowedContentTypesForRelations","type","handleSelect","uid","plugin","title","restrictRelationsTo","selectedContentTypeFriendlyName","actions","onChangeRelationTarget","value","targetContentTypeAllowedRelations","_jsxs","Menu","Root","_jsx","MenuTrigger","info","displayName","Content","zIndex","map","Item","onSelect","_Fragment","styled","Trigger"],"mappings":";;;;;;;;MAqBaA,oBAAuB,GAAA,CAAC,EACnCC,qCAAqC,EACrCC,MAAM,EACoB,GAAA;AAC1B,IAAA,MAAM,EAAEC,YAAY,EAAEC,sBAAsB,EAAE,GAAGC,cAAAA,EAAAA;AACjD,IAAA,MAAMC,QAAWC,GAAAA,WAAAA,EAAAA;;IAEjB,MAAMC,8BAAAA,GAAiCJ,sBAAuBK,CAAAA,MAAM,CAClEC,iCAAAA,CAAAA;IAGF,MAAMC,IAAAA,GAAOR,YAAY,CAACD,MAAO,CAAA;AAEjC,IAAA,IAAI,CAACS,IAAM,EAAA;QACT,OAAO,IAAA;AACT;IAEA,MAAMC,YAAAA,GACJ,CAAC,EAAEC,GAAG,EAAEC,MAAM,EAAEC,KAAK,EAAEC,mBAAmB,EAAc,GACxD,IAAA;YACE,MAAMC,+BAAAA,GAAkCH,SAAS,CAAC,EAAEA,OAAO,CAAC,EAAEC,KAAM,CAAA,CAAC,GAAGA,KAAAA;YAExET,QACEY,CAAAA,OAAAA,CAAQC,sBAAsB,CAAC;gBAC7BjB,MAAQ,EAAA;oBACNkB,KAAOP,EAAAA,GAAAA;AACPZ,oBAAAA,qCAAAA;AACAgB,oBAAAA,+BAAAA;oBACAI,iCAAmCL,EAAAA;AACrC;AACF,aAAA,CAAA,CAAA;AAEJ,SAAA;AAEF;;;;MAKA,qBACEM,IAACC,CAAAA,IAAAA,CAAKC,IAAI,EAAA;;0BACRC,GAACC,CAAAA,WAAAA,EAAAA;0BAAa,CAAC,EAAEf,KAAKgB,IAAI,CAACC,WAAW,CAAC,CAAC,EAAEjB,IAAKG,CAAAA,MAAM,GAAG,CAAC,OAAO,EAAEH,IAAKG,CAAAA,MAAM,CAAC,CAAC,CAAC,GAAG,EAAA,CAAG;;AACtF,0BAAAW,GAAA,CAACF,KAAKM,OAAO,EAAA;gBAACC,MAAO,EAAA,SAAA;AAClBtB,gBAAAA,QAAAA,EAAAA,8BAAAA,CAA+BuB,GAAG,CAAC,CAAC,EAAElB,GAAG,EAAEE,KAAK,EAAEC,mBAAmB,EAAEF,MAAM,EAAE,iBAC9EQ,IAAA,CAACC,KAAKS,IAAI,EAAA;AAAWC,wBAAAA,QAAAA,EAAUrB,YAAa,CAAA;AAAEC,4BAAAA,GAAAA;AAAKC,4BAAAA,MAAAA;AAAQC,4BAAAA,KAAAA;AAAOC,4BAAAA;AAAoB,yBAAA,CAAA;;AACnFD,4BAAAA,KAAAA;AAAM,4BAAA,GAAA;4BACND,MAAU,kBAAAQ,IAAA,CAAAY,QAAA,EAAA;;AAAE,oCAAA,SAAA;AAAQpB,oCAAAA,MAAAA;AAAO,oCAAA;;;;AAFdD,qBAAAA,EAAAA,GAAAA,CAAAA;;;;AAQ1B;AAEA,MAAMa,WAAcS,GAAAA,MAAAA,CAAOZ,IAAKa,CAAAA,OAAO,CAAC;;;;;;;AAOxC,CAAC;;;;"}
+{"version":3,"file":"RelationTargetPicker.mjs","sources":["../../../../../../admin/src/components/Relation/RelationField/RelationTargetPicker/RelationTargetPicker.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { useDispatch } from 'react-redux';\nimport { styled } from 'styled-components';\n\nimport { useDataManager } from '../../../../hooks/useDataManager';\nimport { isAllowedContentTypesForRelations } from '../../../../utils';\nimport { actions } from '../../../FormModal/reducer';\n\ninterface RelationTargetPickerProps {\n  oneThatIsCreatingARelationWithAnother: string;\n  target: string;\n}\n\nexport const RelationTargetPicker = ({\n  oneThatIsCreatingARelationWithAnother,\n  target,\n}: RelationTargetPickerProps) => {\n  const { contentTypes, sortedContentTypesList } = useDataManager();\n  const dispatch = useDispatch();\n  // TODO: replace with an obj { relation: 'x', bidirctional: true|false }\n  const allowedContentTypesForRelation = sortedContentTypesList.filter(\n    isAllowedContentTypesForRelations\n  );\n\n  const { plugin = null, schema: { displayName } = { displayName: 'error' } } =\n    contentTypes?.[target] ?? {};\n\n  const handleSelect =\n    ({\n      uid,\n      plugin,\n      title,\n      restrictRelationsTo,\n    }: {\n      uid: string;\n      plugin: boolean;\n      title: string;\n      restrictRelationsTo: any;\n    }) =>\n    () => {\n      const selectedContentTypeFriendlyName = plugin ? `${plugin}_${title}` : title;\n\n      dispatch(\n        actions.onChangeRelationTarget({\n          target: {\n            value: uid,\n            oneThatIsCreatingARelationWithAnother,\n            selectedContentTypeFriendlyName,\n            targetContentTypeAllowedRelations: restrictRelationsTo,\n          },\n        })\n      );\n    };\n\n  /**\n   * TODO: This should be a Select but the design doesn't match the\n   * styles of the select component and there isn't the ability to\n   * change it correctly.\n   */\n  return (\n    <Menu.Root>\n      <MenuTrigger>{`${displayName} ${plugin ? `(from: ${plugin})` : ''}`}</MenuTrigger>\n      <Menu.Content zIndex=\"popover\">\n        {allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo, plugin }) => (\n          <Menu.Item key={uid} onSelect={handleSelect({ uid, plugin, title, restrictRelationsTo })}>\n            {title}&nbsp;\n            {plugin && <>(from: {plugin})</>}\n          </Menu.Item>\n        ))}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nconst MenuTrigger = styled(Menu.Trigger)`\n  max-width: 16.8rem;\n  span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n"],"names":["RelationTargetPicker","oneThatIsCreatingARelationWithAnother","target","contentTypes","sortedContentTypesList","useDataManager","dispatch","useDispatch","allowedContentTypesForRelation","filter","isAllowedContentTypesForRelations","plugin","schema","displayName","handleSelect","uid","title","restrictRelationsTo","selectedContentTypeFriendlyName","actions","onChangeRelationTarget","value","targetContentTypeAllowedRelations","_jsxs","Menu","Root","_jsx","MenuTrigger","Content","zIndex","map","Item","onSelect","_Fragment","styled","Trigger"],"mappings":";;;;;;;;MAaaA,oBAAuB,GAAA,CAAC,EACnCC,qCAAqC,EACrCC,MAAM,EACoB,GAAA;AAC1B,IAAA,MAAM,EAAEC,YAAY,EAAEC,sBAAsB,EAAE,GAAGC,cAAAA,EAAAA;AACjD,IAAA,MAAMC,QAAWC,GAAAA,WAAAA,EAAAA;;IAEjB,MAAMC,8BAAAA,GAAiCJ,sBAAuBK,CAAAA,MAAM,CAClEC,iCAAAA,CAAAA;IAGF,MAAM,EAAEC,SAAS,IAAI,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAG;QAAEA,WAAa,EAAA;AAAQ,KAAC,EAAE,GACzEV,YAAAA,GAAeD,MAAAA,CAAO,IAAI,EAAC;IAE7B,MAAMY,YAAAA,GACJ,CAAC,EACCC,GAAG,EACHJ,MAAM,EACNK,KAAK,EACLC,mBAAmB,EAMpB,GACD,IAAA;YACE,MAAMC,+BAAAA,GAAkCP,SAAS,CAAC,EAAEA,OAAO,CAAC,EAAEK,KAAM,CAAA,CAAC,GAAGA,KAAAA;YAExEV,QACEa,CAAAA,OAAAA,CAAQC,sBAAsB,CAAC;gBAC7BlB,MAAQ,EAAA;oBACNmB,KAAON,EAAAA,GAAAA;AACPd,oBAAAA,qCAAAA;AACAiB,oBAAAA,+BAAAA;oBACAI,iCAAmCL,EAAAA;AACrC;AACF,aAAA,CAAA,CAAA;AAEJ,SAAA;AAEF;;;;MAKA,qBACEM,IAACC,CAAAA,IAAAA,CAAKC,IAAI,EAAA;;0BACRC,GAACC,CAAAA,WAAAA,EAAAA;AAAa,gBAAA,QAAA,EAAA,CAAC,EAAEd,WAAAA,CAAY,CAAC,EAAEF,MAAS,GAAA,CAAC,OAAO,EAAEA,MAAO,CAAA,CAAC,CAAC,GAAG,GAAG;;AAClE,0BAAAe,GAAA,CAACF,KAAKI,OAAO,EAAA;gBAACC,MAAO,EAAA,SAAA;AAClBrB,gBAAAA,QAAAA,EAAAA,8BAAAA,CAA+BsB,GAAG,CAAC,CAAC,EAAEf,GAAG,EAAEC,KAAK,EAAEC,mBAAmB,EAAEN,MAAM,EAAE,iBAC9EY,IAAA,CAACC,KAAKO,IAAI,EAAA;AAAWC,wBAAAA,QAAAA,EAAUlB,YAAa,CAAA;AAAEC,4BAAAA,GAAAA;AAAKJ,4BAAAA,MAAAA;AAAQK,4BAAAA,KAAAA;AAAOC,4BAAAA;AAAoB,yBAAA,CAAA;;AACnFD,4BAAAA,KAAAA;AAAM,4BAAA,GAAA;4BACNL,MAAU,kBAAAY,IAAA,CAAAU,QAAA,EAAA;;AAAE,oCAAA,SAAA;AAAQtB,oCAAAA,MAAAA;AAAO,oCAAA;;;;AAFdI,qBAAAA,EAAAA,GAAAA,CAAAA;;;;AAQ1B;AAEA,MAAMY,WAAcO,GAAAA,MAAAA,CAAOV,IAAKW,CAAAA,OAAO,CAAC;;;;;;;AAOxC,CAAC;;;;"}

package/dist/admin/components/Relation/RelationNaturePicker/RelationNaturePicker.js

@@ -8,8 +8,8 @@ var truncate = require('lodash/truncate');
 var pluralize = require('pluralize');
 var reactIntl = require('react-intl');
 var reactRedux = require('react-redux');
+var useDataManager = require('../../../hooks/useDataManager.js');
 var getTrad = require('../../../utils/getTrad.js');
-var useDataManager = require('../../DataManager/useDataManager.js');
 var reducer = require('../../FormModal/reducer.js');
 var Components = require('./Components.js');
 
@@ -21,31 +21,32 @@ const relations = {
     manyToMany: Icons.ManyToMany,
     manyWay: Icons.ManyWays
 };
-const ctRelations = [
-    'oneWay',
-    'oneToOne',
-    'oneToMany',
-    'manyToOne',
-    'manyToMany',
-    'manyWay'
-];
-const componentRelations = [
-    'oneWay',
-    'manyWay'
-];
-const RelationNaturePicker = ({ naturePickerType, oneThatIsCreatingARelationWithAnother, relationType, target, targetUid })=>{
+const RelationNaturePicker = ({ naturePickerType, oneThatIsCreatingARelationWithAnother, relationType, target })=>{
     const dispatch = reactRedux.useDispatch();
     const { formatMessage } = reactIntl.useIntl();
-    const { contentTypes } = useDataManager.useDataManager();
-    const dataType = naturePickerType === 'component' ? 'component' : get(contentTypes, [
-        targetUid,
+    const { contentTypes, modifiedData } = useDataManager.useDataManager();
+    const ctRelations = [
+        'oneWay',
+        'oneToOne',
+        'oneToMany',
+        'manyToOne',
+        'manyToMany',
+        'manyWay'
+    ];
+    const componentRelations = [
+        'oneWay',
+        'manyWay'
+    ];
+    const dataType = naturePickerType === 'contentType' ? get(modifiedData, [
+        naturePickerType,
+        'schema',
         'kind'
-    ], '');
+    ], '') : naturePickerType;
     const relationsType = dataType === 'collectionType' ? ctRelations : componentRelations;
     const areDisplayedNamesInverted = relationType === 'manyToOne';
     const targetLabel = get(contentTypes, [
         target,
-        'info',
+        'schema',
         'displayName'
     ], 'unknown');
     const leftTarget = areDisplayedNamesInverted ? targetLabel : oneThatIsCreatingARelationWithAnother;
@@ -53,6 +54,7 @@ const RelationNaturePicker = ({ naturePickerType, oneThatIsCreatingARelationWith
     const leftDisplayedValue = pluralize(leftTarget, relationType === 'manyToMany' ? 2 : 1);
     const restrictedRelations = get(contentTypes, [
         target,
+        'schema',
         'restrictRelationsTo'
     ], null);
     const rightDisplayedValue = pluralize(rightTarget, [

package/dist/admin/components/Relation/RelationNaturePicker/RelationNaturePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelationNaturePicker.js","sources":["../../../../../admin/src/components/Relation/RelationNaturePicker/RelationNaturePicker.tsx"],"sourcesContent":["import { Flex, KeyboardNavigable, Typography } from '@strapi/design-system';\nimport {\n  ManyToMany,\n  ManyToOne,\n  ManyWays as ManyWay,\n  OneToMany,\n  OneToOne,\n  OneWay,\n} from '@strapi/icons';\nimport get from 'lodash/get';\nimport truncate from 'lodash/truncate';\nimport pluralize from 'pluralize';\nimport { useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\n\nimport { getTrad } from '../../../utils/getTrad';\nimport { useDataManager } from '../../DataManager/useDataManager';\nimport { actions } from '../../FormModal/reducer';\n\nimport { IconWrapper, InfosWrapper, Wrapper } from './Components';\n\nconst relations = {\n  oneWay: OneWay,\n  oneToOne: OneToOne,\n  oneToMany: OneToMany,\n  manyToOne: ManyToOne,\n  manyToMany: ManyToMany,\n  manyWay: ManyWay,\n};\n\ntype RelationType = keyof typeof relations;\n\ninterface RelationNaturePickerProps {\n  naturePickerType: string;\n  oneThatIsCreatingARelationWithAnother: string;\n  relationType: string;\n  target: string;\n  targetUid: string;\n}\n\nconst ctRelations = ['oneWay', 'oneToOne', 'oneToMany', 'manyToOne', 'manyToMany', 'manyWay'];\nconst componentRelations = ['oneWay', 'manyWay'];\n\nexport const RelationNaturePicker = ({\n  naturePickerType,\n  oneThatIsCreatingARelationWithAnother,\n  relationType,\n  target,\n  targetUid,\n}: RelationNaturePickerProps) => {\n  const dispatch = useDispatch();\n  const { formatMessage } = useIntl();\n\n  const { contentTypes } = useDataManager();\n\n  const dataType =\n    naturePickerType === 'component' ? 'component' : get(contentTypes, [targetUid, 'kind'], '');\n\n  const relationsType = (\n    dataType === 'collectionType' ? ctRelations : componentRelations\n  ) as RelationType[];\n\n  const areDisplayedNamesInverted = relationType === 'manyToOne';\n  const targetLabel = get(contentTypes, [target, 'info', 'displayName'], 'unknown');\n  const leftTarget = areDisplayedNamesInverted\n    ? targetLabel\n    : oneThatIsCreatingARelationWithAnother;\n  const rightTarget = areDisplayedNamesInverted\n    ? oneThatIsCreatingARelationWithAnother\n    : targetLabel;\n  const leftDisplayedValue = pluralize(leftTarget, relationType === 'manyToMany' ? 2 : 1);\n  const restrictedRelations = get(contentTypes, [target, 'restrictRelationsTo'], null);\n\n  const rightDisplayedValue = pluralize(\n    rightTarget,\n    ['manyToMany', 'oneToMany', 'manyToOne', 'manyWay'].includes(relationType) ? 2 : 1\n  );\n\n  if (!relationType) {\n    return null;\n  }\n\n  return (\n    <Flex style={{ flex: 1 }}>\n      <Wrapper>\n        <Flex paddingLeft={9} paddingRight={9} paddingTop={1} justifyContent=\"center\">\n          <KeyboardNavigable tagName=\"button\">\n            <Flex gap={3}>\n              {relationsType.map((relation) => {\n                const Asset = relations[relation];\n                const isEnabled =\n                  restrictedRelations === null || restrictedRelations.includes(relation);\n\n                return (\n                  <IconWrapper\n                    tag=\"button\"\n                    $isSelected={relationType === relation}\n                    disabled={!isEnabled}\n                    key={relation}\n                    onClick={() => {\n                      if (isEnabled) {\n                        dispatch(\n                          actions.onChangeRelationType({\n                            target: {\n                              oneThatIsCreatingARelationWithAnother,\n                              value: relation,\n                            },\n                          })\n                        );\n                      }\n                    }}\n                    padding={2}\n                    type=\"button\"\n                    aria-label={formatMessage({ id: getTrad(`relation.${relation}`) })}\n                    aria-pressed={relationType === relation}\n                    data-relation-type={relation}\n                  >\n                    <Asset key={relation} aria-hidden=\"true\" />\n                  </IconWrapper>\n                );\n              })}\n            </Flex>\n          </KeyboardNavigable>\n        </Flex>\n      </Wrapper>\n      <InfosWrapper justifyContent=\"center\">\n        <Typography>{truncate(leftDisplayedValue, { length: 24 })}&nbsp;</Typography>\n        <Typography textColor=\"primary600\">\n          {formatMessage({ id: getTrad(`relation.${relationType}`) })}&nbsp;\n        </Typography>\n        <Typography>{truncate(rightDisplayedValue, { length: 24 })}</Typography>\n      </InfosWrapper>\n    </Flex>\n  );\n};\n"],"names":["relations","oneWay","OneWay","oneToOne","OneToOne","oneToMany","OneToMany","manyToOne","ManyToOne","manyToMany","ManyToMany","manyWay","ManyWay","ctRelations","componentRelations","RelationNaturePicker","naturePickerType","oneThatIsCreatingARelationWithAnother","relationType","target","targetUid","dispatch","useDispatch","formatMessage","useIntl","contentTypes","useDataManager","dataType","get","relationsType","areDisplayedNamesInverted","targetLabel","leftTarget","rightTarget","leftDisplayedValue","pluralize","restrictedRelations","rightDisplayedValue","includes","_jsxs","Flex","style","flex","_jsx","Wrapper","paddingLeft","paddingRight","paddingTop","justifyContent","KeyboardNavigable","tagName","gap","map","relation","Asset","isEnabled","IconWrapper","tag","$isSelected","disabled","onClick","actions","onChangeRelationType","value","padding","type","aria-label","id","getTrad","aria-pressed","data-relation-type","aria-hidden","InfosWrapper","Typography","truncate","length","textColor"],"mappings":";;;;;;;;;;;;;;;AAqBA,MAAMA,SAAY,GAAA;IAChBC,MAAQC,EAAAA,YAAAA;IACRC,QAAUC,EAAAA,cAAAA;IACVC,SAAWC,EAAAA,eAAAA;IACXC,SAAWC,EAAAA,eAAAA;IACXC,UAAYC,EAAAA,gBAAAA;IACZC,OAASC,EAAAA;AACX,CAAA;AAYA,MAAMC,WAAc,GAAA;AAAC,IAAA,QAAA;AAAU,IAAA,UAAA;AAAY,IAAA,WAAA;AAAa,IAAA,WAAA;AAAa,IAAA,YAAA;AAAc,IAAA;AAAU,CAAA;AAC7F,MAAMC,kBAAqB,GAAA;AAAC,IAAA,QAAA;AAAU,IAAA;AAAU,CAAA;AAEnCC,MAAAA,oBAAAA,GAAuB,CAAC,EACnCC,gBAAgB,EAChBC,qCAAqC,EACrCC,YAAY,EACZC,MAAM,EACNC,SAAS,EACiB,GAAA;AAC1B,IAAA,MAAMC,QAAWC,GAAAA,sBAAAA,EAAAA;IACjB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,MAAM,EAAEC,YAAY,EAAE,GAAGC,6BAAAA,EAAAA;AAEzB,IAAA,MAAMC,QACJX,GAAAA,gBAAAA,KAAqB,WAAc,GAAA,WAAA,GAAcY,IAAIH,YAAc,EAAA;AAACL,QAAAA,SAAAA;AAAW,QAAA;KAAO,EAAE,EAAA,CAAA;IAE1F,MAAMS,aAAAA,GACJF,QAAa,KAAA,gBAAA,GAAmBd,WAAcC,GAAAA,kBAAAA;AAGhD,IAAA,MAAMgB,4BAA4BZ,YAAiB,KAAA,WAAA;IACnD,MAAMa,WAAAA,GAAcH,IAAIH,YAAc,EAAA;AAACN,QAAAA,MAAAA;AAAQ,QAAA,MAAA;AAAQ,QAAA;KAAc,EAAE,SAAA,CAAA;IACvE,MAAMa,UAAAA,GAAaF,4BACfC,WACAd,GAAAA,qCAAAA;IACJ,MAAMgB,WAAAA,GAAcH,4BAChBb,qCACAc,GAAAA,WAAAA;AACJ,IAAA,MAAMG,kBAAqBC,GAAAA,SAAAA,CAAUH,UAAYd,EAAAA,YAAAA,KAAiB,eAAe,CAAI,GAAA,CAAA,CAAA;IACrF,MAAMkB,mBAAAA,GAAsBR,IAAIH,YAAc,EAAA;AAACN,QAAAA,MAAAA;AAAQ,QAAA;KAAsB,EAAE,IAAA,CAAA;IAE/E,MAAMkB,mBAAAA,GAAsBF,UAC1BF,WACA,EAAA;AAAC,QAAA,YAAA;AAAc,QAAA,WAAA;AAAa,QAAA,WAAA;AAAa,QAAA;KAAU,CAACK,QAAQ,CAACpB,YAAAA,CAAAA,GAAgB,CAAI,GAAA,CAAA,CAAA;AAGnF,IAAA,IAAI,CAACA,YAAc,EAAA;QACjB,OAAO,IAAA;AACT;AAEA,IAAA,qBACEqB,eAACC,CAAAA,iBAAAA,EAAAA;QAAKC,KAAO,EAAA;YAAEC,IAAM,EAAA;AAAE,SAAA;;0BACrBC,cAACC,CAAAA,kBAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAD,cAACH,CAAAA,iBAAAA,EAAAA;oBAAKK,WAAa,EAAA,CAAA;oBAAGC,YAAc,EAAA,CAAA;oBAAGC,UAAY,EAAA,CAAA;oBAAGC,cAAe,EAAA,QAAA;AACnE,oBAAA,QAAA,gBAAAL,cAACM,CAAAA,8BAAAA,EAAAA;wBAAkBC,OAAQ,EAAA,QAAA;AACzB,wBAAA,QAAA,gBAAAP,cAACH,CAAAA,iBAAAA,EAAAA;4BAAKW,GAAK,EAAA,CAAA;sCACRtB,aAAcuB,CAAAA,GAAG,CAAC,CAACC,QAAAA,GAAAA;gCAClB,MAAMC,KAAAA,GAAQtD,SAAS,CAACqD,QAAS,CAAA;AACjC,gCAAA,MAAME,SACJnB,GAAAA,mBAAAA,KAAwB,IAAQA,IAAAA,mBAAAA,CAAoBE,QAAQ,CAACe,QAAAA,CAAAA;AAE/D,gCAAA,qBACEV,cAACa,CAAAA,sBAAAA,EAAAA;oCACCC,GAAI,EAAA,QAAA;AACJC,oCAAAA,WAAAA,EAAaxC,YAAiBmC,KAAAA,QAAAA;AAC9BM,oCAAAA,QAAAA,EAAU,CAACJ,SAAAA;oCAEXK,OAAS,EAAA,IAAA;AACP,wCAAA,IAAIL,SAAW,EAAA;4CACblC,QACEwC,CAAAA,eAAAA,CAAQC,oBAAoB,CAAC;gDAC3B3C,MAAQ,EAAA;AACNF,oDAAAA,qCAAAA;oDACA8C,KAAOV,EAAAA;AACT;AACF,6CAAA,CAAA,CAAA;AAEJ;AACF,qCAAA;oCACAW,OAAS,EAAA,CAAA;oCACTC,IAAK,EAAA,QAAA;AACLC,oCAAAA,YAAAA,EAAY3C,aAAc,CAAA;AAAE4C,wCAAAA,EAAAA,EAAIC,eAAQ,CAAA,CAAC,SAAS,EAAEf,SAAS,CAAC;AAAE,qCAAA,CAAA;AAChEgB,oCAAAA,cAAAA,EAAcnD,YAAiBmC,KAAAA,QAAAA;oCAC/BiB,oBAAoBjB,EAAAA,QAAAA;AAEpB,oCAAA,QAAA,gBAAAV,cAACW,CAAAA,KAAAA,EAAAA;wCAAqBiB,aAAY,EAAA;AAAtBlB,qCAAAA,EAAAA,QAAAA;AAnBPA,iCAAAA,EAAAA,QAAAA,CAAAA;AAsBX,6BAAA;;;;;0BAKRd,eAACiC,CAAAA,uBAAAA,EAAAA;gBAAaxB,cAAe,EAAA,QAAA;;kCAC3BT,eAACkC,CAAAA,uBAAAA,EAAAA;;AAAYC,4BAAAA,QAAAA,CAASxC,kBAAoB,EAAA;gCAAEyC,MAAQ,EAAA;AAAG,6BAAA,CAAA;AAAG,4BAAA;;;kCAC1DpC,eAACkC,CAAAA,uBAAAA,EAAAA;wBAAWG,SAAU,EAAA,YAAA;;4BACnBrD,aAAc,CAAA;AAAE4C,gCAAAA,EAAAA,EAAIC,eAAQ,CAAA,CAAC,SAAS,EAAElD,aAAa,CAAC;AAAE,6BAAA,CAAA;AAAG,4BAAA;;;kCAE9DyB,cAAC8B,CAAAA,uBAAAA,EAAAA;AAAYC,wBAAAA,QAAAA,EAAAA,QAAAA,CAASrC,mBAAqB,EAAA;4BAAEsC,MAAQ,EAAA;AAAG,yBAAA;;;;;;AAIhE;;;;"}
+{"version":3,"file":"RelationNaturePicker.js","sources":["../../../../../admin/src/components/Relation/RelationNaturePicker/RelationNaturePicker.tsx"],"sourcesContent":["import { Flex, KeyboardNavigable, Typography } from '@strapi/design-system';\nimport {\n  ManyToMany,\n  ManyToOne,\n  ManyWays as ManyWay,\n  OneToMany,\n  OneToOne,\n  OneWay,\n} from '@strapi/icons';\nimport get from 'lodash/get';\nimport truncate from 'lodash/truncate';\nimport pluralize from 'pluralize';\nimport { useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\n\nimport { useDataManager } from '../../../hooks/useDataManager';\nimport { getTrad } from '../../../utils/getTrad';\nimport { actions } from '../../FormModal/reducer';\n\nimport { IconWrapper, InfosWrapper, Wrapper } from './Components';\n\nconst relations = {\n  oneWay: OneWay,\n  oneToOne: OneToOne,\n  oneToMany: OneToMany,\n  manyToOne: ManyToOne,\n  manyToMany: ManyToMany,\n  manyWay: ManyWay,\n};\n\ntype RelationType = keyof typeof relations;\n\ninterface RelationNaturePickerProps {\n  naturePickerType: string;\n  oneThatIsCreatingARelationWithAnother: string;\n  relationType: string;\n  target: string;\n}\n\nexport const RelationNaturePicker = ({\n  naturePickerType,\n  oneThatIsCreatingARelationWithAnother,\n  relationType,\n  target,\n}: RelationNaturePickerProps) => {\n  const dispatch = useDispatch();\n  const { formatMessage } = useIntl();\n\n  const { contentTypes, modifiedData } = useDataManager();\n  const ctRelations = ['oneWay', 'oneToOne', 'oneToMany', 'manyToOne', 'manyToMany', 'manyWay'];\n  const componentRelations = ['oneWay', 'manyWay'];\n  const dataType =\n    naturePickerType === 'contentType'\n      ? get(modifiedData, [naturePickerType, 'schema', 'kind'], '')\n      : naturePickerType;\n  const relationsType = (\n    dataType === 'collectionType' ? ctRelations : componentRelations\n  ) as RelationType[];\n\n  const areDisplayedNamesInverted = relationType === 'manyToOne';\n  const targetLabel = get(contentTypes, [target, 'schema', 'displayName'], 'unknown');\n  const leftTarget = areDisplayedNamesInverted\n    ? targetLabel\n    : oneThatIsCreatingARelationWithAnother;\n  const rightTarget = areDisplayedNamesInverted\n    ? oneThatIsCreatingARelationWithAnother\n    : targetLabel;\n  const leftDisplayedValue = pluralize(leftTarget, relationType === 'manyToMany' ? 2 : 1);\n  const restrictedRelations = get(contentTypes, [target, 'schema', 'restrictRelationsTo'], null);\n\n  const rightDisplayedValue = pluralize(\n    rightTarget,\n    ['manyToMany', 'oneToMany', 'manyToOne', 'manyWay'].includes(relationType) ? 2 : 1\n  );\n\n  if (!relationType) {\n    return null;\n  }\n\n  return (\n    <Flex style={{ flex: 1 }}>\n      <Wrapper>\n        <Flex paddingLeft={9} paddingRight={9} paddingTop={1} justifyContent=\"center\">\n          <KeyboardNavigable tagName=\"button\">\n            <Flex gap={3}>\n              {relationsType.map((relation) => {\n                const Asset = relations[relation];\n                const isEnabled =\n                  restrictedRelations === null || restrictedRelations.includes(relation);\n\n                return (\n                  <IconWrapper\n                    tag=\"button\"\n                    $isSelected={relationType === relation}\n                    disabled={!isEnabled}\n                    key={relation}\n                    onClick={() => {\n                      if (isEnabled) {\n                        dispatch(\n                          actions.onChangeRelationType({\n                            target: {\n                              oneThatIsCreatingARelationWithAnother,\n                              value: relation,\n                            },\n                          })\n                        );\n                      }\n                    }}\n                    padding={2}\n                    type=\"button\"\n                    aria-label={formatMessage({ id: getTrad(`relation.${relation}`) })}\n                    aria-pressed={relationType === relation}\n                    data-relation-type={relation}\n                  >\n                    <Asset key={relation} aria-hidden=\"true\" />\n                  </IconWrapper>\n                );\n              })}\n            </Flex>\n          </KeyboardNavigable>\n        </Flex>\n      </Wrapper>\n      <InfosWrapper justifyContent=\"center\">\n        <Typography>{truncate(leftDisplayedValue, { length: 24 })}&nbsp;</Typography>\n        <Typography textColor=\"primary600\">\n          {formatMessage({ id: getTrad(`relation.${relationType}`) })}&nbsp;\n        </Typography>\n        <Typography>{truncate(rightDisplayedValue, { length: 24 })}</Typography>\n      </InfosWrapper>\n    </Flex>\n  );\n};\n"],"names":["relations","oneWay","OneWay","oneToOne","OneToOne","oneToMany","OneToMany","manyToOne","ManyToOne","manyToMany","ManyToMany","manyWay","ManyWay","RelationNaturePicker","naturePickerType","oneThatIsCreatingARelationWithAnother","relationType","target","dispatch","useDispatch","formatMessage","useIntl","contentTypes","modifiedData","useDataManager","ctRelations","componentRelations","dataType","get","relationsType","areDisplayedNamesInverted","targetLabel","leftTarget","rightTarget","leftDisplayedValue","pluralize","restrictedRelations","rightDisplayedValue","includes","_jsxs","Flex","style","flex","_jsx","Wrapper","paddingLeft","paddingRight","paddingTop","justifyContent","KeyboardNavigable","tagName","gap","map","relation","Asset","isEnabled","IconWrapper","tag","$isSelected","disabled","onClick","actions","onChangeRelationType","value","padding","type","aria-label","id","getTrad","aria-pressed","data-relation-type","aria-hidden","InfosWrapper","Typography","truncate","length","textColor"],"mappings":"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"}

package/dist/admin/components/Relation/RelationNaturePicker/RelationNaturePicker.mjs

@@ -6,8 +6,8 @@ import truncate from 'lodash/truncate';
 import pluralize from 'pluralize';
 import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
+import { useDataManager } from '../../../hooks/useDataManager.mjs';
 import { getTrad } from '../../../utils/getTrad.mjs';
-import { useDataManager } from '../../DataManager/useDataManager.mjs';
 import { actions } from '../../FormModal/reducer.mjs';
 import { Wrapper, IconWrapper, InfosWrapper } from './Components.mjs';
 
@@ -19,31 +19,32 @@ const relations = {
     manyToMany: ManyToMany,
     manyWay: ManyWays
 };
-const ctRelations = [
-    'oneWay',
-    'oneToOne',
-    'oneToMany',
-    'manyToOne',
-    'manyToMany',
-    'manyWay'
-];
-const componentRelations = [
-    'oneWay',
-    'manyWay'
-];
-const RelationNaturePicker = ({ naturePickerType, oneThatIsCreatingARelationWithAnother, relationType, target, targetUid })=>{
+const RelationNaturePicker = ({ naturePickerType, oneThatIsCreatingARelationWithAnother, relationType, target })=>{
     const dispatch = useDispatch();
     const { formatMessage } = useIntl();
-    const { contentTypes } = useDataManager();
-    const dataType = naturePickerType === 'component' ? 'component' : get(contentTypes, [
-        targetUid,
+    const { contentTypes, modifiedData } = useDataManager();
+    const ctRelations = [
+        'oneWay',
+        'oneToOne',
+        'oneToMany',
+        'manyToOne',
+        'manyToMany',
+        'manyWay'
+    ];
+    const componentRelations = [
+        'oneWay',
+        'manyWay'
+    ];
+    const dataType = naturePickerType === 'contentType' ? get(modifiedData, [
+        naturePickerType,
+        'schema',
         'kind'
-    ], '');
+    ], '') : naturePickerType;
     const relationsType = dataType === 'collectionType' ? ctRelations : componentRelations;
     const areDisplayedNamesInverted = relationType === 'manyToOne';
     const targetLabel = get(contentTypes, [
         target,
-        'info',
+        'schema',
         'displayName'
     ], 'unknown');
     const leftTarget = areDisplayedNamesInverted ? targetLabel : oneThatIsCreatingARelationWithAnother;
@@ -51,6 +52,7 @@ const RelationNaturePicker = ({ naturePickerType, oneThatIsCreatingARelationWith
     const leftDisplayedValue = pluralize(leftTarget, relationType === 'manyToMany' ? 2 : 1);
     const restrictedRelations = get(contentTypes, [
         target,
+        'schema',
         'restrictRelationsTo'
     ], null);
     const rightDisplayedValue = pluralize(rightTarget, [

package/dist/admin/components/Relation/RelationNaturePicker/RelationNaturePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RelationNaturePicker.mjs","sources":["../../../../../admin/src/components/Relation/RelationNaturePicker/RelationNaturePicker.tsx"],"sourcesContent":["import { Flex, KeyboardNavigable, Typography } from '@strapi/design-system';\nimport {\n  ManyToMany,\n  ManyToOne,\n  ManyWays as ManyWay,\n  OneToMany,\n  OneToOne,\n  OneWay,\n} from '@strapi/icons';\nimport get from 'lodash/get';\nimport truncate from 'lodash/truncate';\nimport pluralize from 'pluralize';\nimport { useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\n\nimport { getTrad } from '../../../utils/getTrad';\nimport { useDataManager } from '../../DataManager/useDataManager';\nimport { actions } from '../../FormModal/reducer';\n\nimport { IconWrapper, InfosWrapper, Wrapper } from './Components';\n\nconst relations = {\n  oneWay: OneWay,\n  oneToOne: OneToOne,\n  oneToMany: OneToMany,\n  manyToOne: ManyToOne,\n  manyToMany: ManyToMany,\n  manyWay: ManyWay,\n};\n\ntype RelationType = keyof typeof relations;\n\ninterface RelationNaturePickerProps {\n  naturePickerType: string;\n  oneThatIsCreatingARelationWithAnother: string;\n  relationType: string;\n  target: string;\n  targetUid: string;\n}\n\nconst ctRelations = ['oneWay', 'oneToOne', 'oneToMany', 'manyToOne', 'manyToMany', 'manyWay'];\nconst componentRelations = ['oneWay', 'manyWay'];\n\nexport const RelationNaturePicker = ({\n  naturePickerType,\n  oneThatIsCreatingARelationWithAnother,\n  relationType,\n  target,\n  targetUid,\n}: RelationNaturePickerProps) => {\n  const dispatch = useDispatch();\n  const { formatMessage } = useIntl();\n\n  const { contentTypes } = useDataManager();\n\n  const dataType =\n    naturePickerType === 'component' ? 'component' : get(contentTypes, [targetUid, 'kind'], '');\n\n  const relationsType = (\n    dataType === 'collectionType' ? ctRelations : componentRelations\n  ) as RelationType[];\n\n  const areDisplayedNamesInverted = relationType === 'manyToOne';\n  const targetLabel = get(contentTypes, [target, 'info', 'displayName'], 'unknown');\n  const leftTarget = areDisplayedNamesInverted\n    ? targetLabel\n    : oneThatIsCreatingARelationWithAnother;\n  const rightTarget = areDisplayedNamesInverted\n    ? oneThatIsCreatingARelationWithAnother\n    : targetLabel;\n  const leftDisplayedValue = pluralize(leftTarget, relationType === 'manyToMany' ? 2 : 1);\n  const restrictedRelations = get(contentTypes, [target, 'restrictRelationsTo'], null);\n\n  const rightDisplayedValue = pluralize(\n    rightTarget,\n    ['manyToMany', 'oneToMany', 'manyToOne', 'manyWay'].includes(relationType) ? 2 : 1\n  );\n\n  if (!relationType) {\n    return null;\n  }\n\n  return (\n    <Flex style={{ flex: 1 }}>\n      <Wrapper>\n        <Flex paddingLeft={9} paddingRight={9} paddingTop={1} justifyContent=\"center\">\n          <KeyboardNavigable tagName=\"button\">\n            <Flex gap={3}>\n              {relationsType.map((relation) => {\n                const Asset = relations[relation];\n                const isEnabled =\n                  restrictedRelations === null || restrictedRelations.includes(relation);\n\n                return (\n                  <IconWrapper\n                    tag=\"button\"\n                    $isSelected={relationType === relation}\n                    disabled={!isEnabled}\n                    key={relation}\n                    onClick={() => {\n                      if (isEnabled) {\n                        dispatch(\n                          actions.onChangeRelationType({\n                            target: {\n                              oneThatIsCreatingARelationWithAnother,\n                              value: relation,\n                            },\n                          })\n                        );\n                      }\n                    }}\n                    padding={2}\n                    type=\"button\"\n                    aria-label={formatMessage({ id: getTrad(`relation.${relation}`) })}\n                    aria-pressed={relationType === relation}\n                    data-relation-type={relation}\n                  >\n                    <Asset key={relation} aria-hidden=\"true\" />\n                  </IconWrapper>\n                );\n              })}\n            </Flex>\n          </KeyboardNavigable>\n        </Flex>\n      </Wrapper>\n      <InfosWrapper justifyContent=\"center\">\n        <Typography>{truncate(leftDisplayedValue, { length: 24 })}&nbsp;</Typography>\n        <Typography textColor=\"primary600\">\n          {formatMessage({ id: getTrad(`relation.${relationType}`) })}&nbsp;\n        </Typography>\n        <Typography>{truncate(rightDisplayedValue, { length: 24 })}</Typography>\n      </InfosWrapper>\n    </Flex>\n  );\n};\n"],"names":["relations","oneWay","OneWay","oneToOne","OneToOne","oneToMany","OneToMany","manyToOne","ManyToOne","manyToMany","ManyToMany","manyWay","ManyWay","ctRelations","componentRelations","RelationNaturePicker","naturePickerType","oneThatIsCreatingARelationWithAnother","relationType","target","targetUid","dispatch","useDispatch","formatMessage","useIntl","contentTypes","useDataManager","dataType","get","relationsType","areDisplayedNamesInverted","targetLabel","leftTarget","rightTarget","leftDisplayedValue","pluralize","restrictedRelations","rightDisplayedValue","includes","_jsxs","Flex","style","flex","_jsx","Wrapper","paddingLeft","paddingRight","paddingTop","justifyContent","KeyboardNavigable","tagName","gap","map","relation","Asset","isEnabled","IconWrapper","tag","$isSelected","disabled","onClick","actions","onChangeRelationType","value","padding","type","aria-label","id","getTrad","aria-pressed","data-relation-type","aria-hidden","InfosWrapper","Typography","truncate","length","textColor"],"mappings":"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"}
+{"version":3,"file":"RelationNaturePicker.mjs","sources":["../../../../../admin/src/components/Relation/RelationNaturePicker/RelationNaturePicker.tsx"],"sourcesContent":["import { Flex, KeyboardNavigable, Typography } from '@strapi/design-system';\nimport {\n  ManyToMany,\n  ManyToOne,\n  ManyWays as ManyWay,\n  OneToMany,\n  OneToOne,\n  OneWay,\n} from '@strapi/icons';\nimport get from 'lodash/get';\nimport truncate from 'lodash/truncate';\nimport pluralize from 'pluralize';\nimport { useIntl } from 'react-intl';\nimport { useDispatch } from 'react-redux';\n\nimport { useDataManager } from '../../../hooks/useDataManager';\nimport { getTrad } from '../../../utils/getTrad';\nimport { actions } from '../../FormModal/reducer';\n\nimport { IconWrapper, InfosWrapper, Wrapper } from './Components';\n\nconst relations = {\n  oneWay: OneWay,\n  oneToOne: OneToOne,\n  oneToMany: OneToMany,\n  manyToOne: ManyToOne,\n  manyToMany: ManyToMany,\n  manyWay: ManyWay,\n};\n\ntype RelationType = keyof typeof relations;\n\ninterface RelationNaturePickerProps {\n  naturePickerType: string;\n  oneThatIsCreatingARelationWithAnother: string;\n  relationType: string;\n  target: string;\n}\n\nexport const RelationNaturePicker = ({\n  naturePickerType,\n  oneThatIsCreatingARelationWithAnother,\n  relationType,\n  target,\n}: RelationNaturePickerProps) => {\n  const dispatch = useDispatch();\n  const { formatMessage } = useIntl();\n\n  const { contentTypes, modifiedData } = useDataManager();\n  const ctRelations = ['oneWay', 'oneToOne', 'oneToMany', 'manyToOne', 'manyToMany', 'manyWay'];\n  const componentRelations = ['oneWay', 'manyWay'];\n  const dataType =\n    naturePickerType === 'contentType'\n      ? get(modifiedData, [naturePickerType, 'schema', 'kind'], '')\n      : naturePickerType;\n  const relationsType = (\n    dataType === 'collectionType' ? ctRelations : componentRelations\n  ) as RelationType[];\n\n  const areDisplayedNamesInverted = relationType === 'manyToOne';\n  const targetLabel = get(contentTypes, [target, 'schema', 'displayName'], 'unknown');\n  const leftTarget = areDisplayedNamesInverted\n    ? targetLabel\n    : oneThatIsCreatingARelationWithAnother;\n  const rightTarget = areDisplayedNamesInverted\n    ? oneThatIsCreatingARelationWithAnother\n    : targetLabel;\n  const leftDisplayedValue = pluralize(leftTarget, relationType === 'manyToMany' ? 2 : 1);\n  const restrictedRelations = get(contentTypes, [target, 'schema', 'restrictRelationsTo'], null);\n\n  const rightDisplayedValue = pluralize(\n    rightTarget,\n    ['manyToMany', 'oneToMany', 'manyToOne', 'manyWay'].includes(relationType) ? 2 : 1\n  );\n\n  if (!relationType) {\n    return null;\n  }\n\n  return (\n    <Flex style={{ flex: 1 }}>\n      <Wrapper>\n        <Flex paddingLeft={9} paddingRight={9} paddingTop={1} justifyContent=\"center\">\n          <KeyboardNavigable tagName=\"button\">\n            <Flex gap={3}>\n              {relationsType.map((relation) => {\n                const Asset = relations[relation];\n                const isEnabled =\n                  restrictedRelations === null || restrictedRelations.includes(relation);\n\n                return (\n                  <IconWrapper\n                    tag=\"button\"\n                    $isSelected={relationType === relation}\n                    disabled={!isEnabled}\n                    key={relation}\n                    onClick={() => {\n                      if (isEnabled) {\n                        dispatch(\n                          actions.onChangeRelationType({\n                            target: {\n                              oneThatIsCreatingARelationWithAnother,\n                              value: relation,\n                            },\n                          })\n                        );\n                      }\n                    }}\n                    padding={2}\n                    type=\"button\"\n                    aria-label={formatMessage({ id: getTrad(`relation.${relation}`) })}\n                    aria-pressed={relationType === relation}\n                    data-relation-type={relation}\n                  >\n                    <Asset key={relation} aria-hidden=\"true\" />\n                  </IconWrapper>\n                );\n              })}\n            </Flex>\n          </KeyboardNavigable>\n        </Flex>\n      </Wrapper>\n      <InfosWrapper justifyContent=\"center\">\n        <Typography>{truncate(leftDisplayedValue, { length: 24 })}&nbsp;</Typography>\n        <Typography textColor=\"primary600\">\n          {formatMessage({ id: getTrad(`relation.${relationType}`) })}&nbsp;\n        </Typography>\n        <Typography>{truncate(rightDisplayedValue, { length: 24 })}</Typography>\n      </InfosWrapper>\n    </Flex>\n  );\n};\n"],"names":["relations","oneWay","OneWay","oneToOne","OneToOne","oneToMany","OneToMany","manyToOne","ManyToOne","manyToMany","ManyToMany","manyWay","ManyWay","RelationNaturePicker","naturePickerType","oneThatIsCreatingARelationWithAnother","relationType","target","dispatch","useDispatch","formatMessage","useIntl","contentTypes","modifiedData","useDataManager","ctRelations","componentRelations","dataType","get","relationsType","areDisplayedNamesInverted","targetLabel","leftTarget","rightTarget","leftDisplayedValue","pluralize","restrictedRelations","rightDisplayedValue","includes","_jsxs","Flex","style","flex","_jsx","Wrapper","paddingLeft","paddingRight","paddingTop","justifyContent","KeyboardNavigable","tagName","gap","map","relation","Asset","isEnabled","IconWrapper","tag","$isSelected","disabled","onClick","actions","onChangeRelationType","value","padding","type","aria-label","id","getTrad","aria-pressed","data-relation-type","aria-hidden","InfosWrapper","Typography","truncate","length","textColor"],"mappings":"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"}

package/dist/admin/components/SelectCategory.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
-var useDataManager = require('./DataManager/useDataManager.js');
+var useDataManager = require('../hooks/useDataManager.js');
 
 const SelectCategory = ({ error = null, intlLabel, name, onChange, value = undefined, isCreating, dynamicZoneTarget })=>{
     const { formatMessage } = reactIntl.useIntl();

package/dist/admin/components/SelectCategory.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectCategory.js","sources":["../../../admin/src/components/SelectCategory.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { ComboboxOption, Combobox, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDataManager } from './DataManager/useDataManager';\n\ninterface SelectCategoryProps {\n  error?: string | null;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: Record<string, any>;\n  };\n  name: string;\n  onChange: (value: { target: { name: string; value: any; type: string } }) => void;\n  value?: string;\n  isCreating?: boolean;\n  dynamicZoneTarget?: string | null;\n}\n\nexport const SelectCategory = ({\n  error = null,\n  intlLabel,\n  name,\n  onChange,\n  value = undefined,\n  isCreating,\n  dynamicZoneTarget,\n}: SelectCategoryProps) => {\n  const { formatMessage } = useIntl();\n  const { allComponentsCategories } = useDataManager();\n  const [categories, setCategories] = useState(allComponentsCategories);\n\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const label = formatMessage(intlLabel);\n\n  const handleChange = (value: any) => {\n    onChange({ target: { name, value, type: 'select-category' } });\n  };\n\n  const handleCreateOption = (value: any) => {\n    setCategories((prev) => [...prev, value]);\n    handleChange(value);\n  };\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <Combobox\n        // TODO: re-enable category edits, renaming categories of already existing components currently breaks other functionality\n        // See https://github.com/strapi/strapi/issues/20356\n        disabled={!isCreating && !dynamicZoneTarget}\n        onChange={handleChange}\n        onCreateOption={handleCreateOption}\n        value={value}\n        creatable\n      >\n        {categories.map((category) => (\n          <ComboboxOption key={category} value={category}>\n            {category}\n          </ComboboxOption>\n        ))}\n      </Combobox>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectCategory","error","intlLabel","name","onChange","value","undefined","isCreating","dynamicZoneTarget","formatMessage","useIntl","allComponentsCategories","useDataManager","categories","setCategories","useState","errorMessage","id","defaultMessage","label","handleChange","target","type","handleCreateOption","prev","_jsxs","Field","Root","_jsx","Label","Combobox","disabled","onCreateOption","creatable","map","category","ComboboxOption","Error"],"mappings":";;;;;;;;MAqBaA,cAAiB,GAAA,CAAC,EAC7BC,KAAQ,GAAA,IAAI,EACZC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,KAAQC,GAAAA,SAAS,EACjBC,UAAU,EACVC,iBAAiB,EACG,GAAA;IACpB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,uBAAuB,EAAE,GAAGC,6BAAAA,EAAAA;AACpC,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAc,CAAA,GAAGC,cAASJ,CAAAA,uBAAAA,CAAAA;IAE7C,MAAMK,YAAAA,GAAef,QAAQQ,aAAc,CAAA;QAAEQ,EAAIhB,EAAAA,KAAAA;QAAOiB,cAAgBjB,EAAAA;KAAW,CAAA,GAAA,EAAA;AACnF,IAAA,MAAMkB,QAAQV,aAAcP,CAAAA,SAAAA,CAAAA;AAE5B,IAAA,MAAMkB,eAAe,CAACf,KAAAA,GAAAA;QACpBD,QAAS,CAAA;YAAEiB,MAAQ,EAAA;AAAElB,gBAAAA,IAAAA;AAAME,gBAAAA,KAAAA;gBAAOiB,IAAM,EAAA;AAAkB;AAAE,SAAA,CAAA;AAC9D,KAAA;AAEA,IAAA,MAAMC,qBAAqB,CAAClB,KAAAA,GAAAA;AAC1BS,QAAAA,aAAAA,CAAc,CAACU,IAAS,GAAA;AAAIA,gBAAAA,GAAAA,IAAAA;AAAMnB,gBAAAA;AAAM,aAAA,CAAA;QACxCe,YAAaf,CAAAA,KAAAA,CAAAA;AACf,KAAA;IAEA,qBACEoB,eAAA,CAACC,mBAAMC,IAAI,EAAA;QAAC1B,KAAOe,EAAAA,YAAAA;QAAcb,IAAMA,EAAAA,IAAAA;;AACrC,0BAAAyB,cAAA,CAACF,mBAAMG,KAAK,EAAA;AAAEV,gBAAAA,QAAAA,EAAAA;;0BACdS,cAACE,CAAAA,qBAAAA,EAAAA;;;gBAGCC,QAAU,EAAA,CAACxB,cAAc,CAACC,iBAAAA;gBAC1BJ,QAAUgB,EAAAA,YAAAA;gBACVY,cAAgBT,EAAAA,kBAAAA;gBAChBlB,KAAOA,EAAAA,KAAAA;gBACP4B,SAAS,EAAA,IAAA;AAERpB,gBAAAA,QAAAA,EAAAA,UAAAA,CAAWqB,GAAG,CAAC,CAACC,QAAAA,iBACfP,cAACQ,CAAAA,2BAAAA,EAAAA;wBAA8B/B,KAAO8B,EAAAA,QAAAA;AACnCA,wBAAAA,QAAAA,EAAAA;AADkBA,qBAAAA,EAAAA,QAAAA,CAAAA;;AAKzB,0BAAAP,cAAA,CAACF,mBAAMW,KAAK,EAAA,EAAA;;;AAGlB;;;;"}
+{"version":3,"file":"SelectCategory.js","sources":["../../../admin/src/components/SelectCategory.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { ComboboxOption, Combobox, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDataManager } from '../hooks/useDataManager';\n\ninterface SelectCategoryProps {\n  error?: string | null;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: Record<string, any>;\n  };\n  name: string;\n  onChange: (value: { target: { name: string; value: any; type: string } }) => void;\n  value?: string;\n  isCreating?: boolean;\n  dynamicZoneTarget?: string | null;\n}\n\nexport const SelectCategory = ({\n  error = null,\n  intlLabel,\n  name,\n  onChange,\n  value = undefined,\n  isCreating,\n  dynamicZoneTarget,\n}: SelectCategoryProps) => {\n  const { formatMessage } = useIntl();\n  const { allComponentsCategories } = useDataManager();\n  const [categories, setCategories] = useState(allComponentsCategories);\n\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const label = formatMessage(intlLabel);\n\n  const handleChange = (value: any) => {\n    onChange({ target: { name, value, type: 'select-category' } });\n  };\n\n  const handleCreateOption = (value: any) => {\n    setCategories((prev) => [...prev, value]);\n    handleChange(value);\n  };\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <Combobox\n        // TODO: re-enable category edits, renaming categories of already existing components currently breaks other functionality\n        // See https://github.com/strapi/strapi/issues/20356\n        disabled={!isCreating && !dynamicZoneTarget}\n        onChange={handleChange}\n        onCreateOption={handleCreateOption}\n        value={value}\n        creatable\n      >\n        {categories.map((category) => (\n          <ComboboxOption key={category} value={category}>\n            {category}\n          </ComboboxOption>\n        ))}\n      </Combobox>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectCategory","error","intlLabel","name","onChange","value","undefined","isCreating","dynamicZoneTarget","formatMessage","useIntl","allComponentsCategories","useDataManager","categories","setCategories","useState","errorMessage","id","defaultMessage","label","handleChange","target","type","handleCreateOption","prev","_jsxs","Field","Root","_jsx","Label","Combobox","disabled","onCreateOption","creatable","map","category","ComboboxOption","Error"],"mappings":";;;;;;;;MAqBaA,cAAiB,GAAA,CAAC,EAC7BC,KAAQ,GAAA,IAAI,EACZC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,KAAQC,GAAAA,SAAS,EACjBC,UAAU,EACVC,iBAAiB,EACG,GAAA;IACpB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,uBAAuB,EAAE,GAAGC,6BAAAA,EAAAA;AACpC,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAc,CAAA,GAAGC,cAASJ,CAAAA,uBAAAA,CAAAA;IAE7C,MAAMK,YAAAA,GAAef,QAAQQ,aAAc,CAAA;QAAEQ,EAAIhB,EAAAA,KAAAA;QAAOiB,cAAgBjB,EAAAA;KAAW,CAAA,GAAA,EAAA;AACnF,IAAA,MAAMkB,QAAQV,aAAcP,CAAAA,SAAAA,CAAAA;AAE5B,IAAA,MAAMkB,eAAe,CAACf,KAAAA,GAAAA;QACpBD,QAAS,CAAA;YAAEiB,MAAQ,EAAA;AAAElB,gBAAAA,IAAAA;AAAME,gBAAAA,KAAAA;gBAAOiB,IAAM,EAAA;AAAkB;AAAE,SAAA,CAAA;AAC9D,KAAA;AAEA,IAAA,MAAMC,qBAAqB,CAAClB,KAAAA,GAAAA;AAC1BS,QAAAA,aAAAA,CAAc,CAACU,IAAS,GAAA;AAAIA,gBAAAA,GAAAA,IAAAA;AAAMnB,gBAAAA;AAAM,aAAA,CAAA;QACxCe,YAAaf,CAAAA,KAAAA,CAAAA;AACf,KAAA;IAEA,qBACEoB,eAAA,CAACC,mBAAMC,IAAI,EAAA;QAAC1B,KAAOe,EAAAA,YAAAA;QAAcb,IAAMA,EAAAA,IAAAA;;AACrC,0BAAAyB,cAAA,CAACF,mBAAMG,KAAK,EAAA;AAAEV,gBAAAA,QAAAA,EAAAA;;0BACdS,cAACE,CAAAA,qBAAAA,EAAAA;;;gBAGCC,QAAU,EAAA,CAACxB,cAAc,CAACC,iBAAAA;gBAC1BJ,QAAUgB,EAAAA,YAAAA;gBACVY,cAAgBT,EAAAA,kBAAAA;gBAChBlB,KAAOA,EAAAA,KAAAA;gBACP4B,SAAS,EAAA,IAAA;AAERpB,gBAAAA,QAAAA,EAAAA,UAAAA,CAAWqB,GAAG,CAAC,CAACC,QAAAA,iBACfP,cAACQ,CAAAA,2BAAAA,EAAAA;wBAA8B/B,KAAO8B,EAAAA,QAAAA;AACnCA,wBAAAA,QAAAA,EAAAA;AADkBA,qBAAAA,EAAAA,QAAAA,CAAAA;;AAKzB,0BAAAP,cAAA,CAACF,mBAAMW,KAAK,EAAA,EAAA;;;AAGlB;;;;"}

package/dist/admin/components/SelectCategory.mjs

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Field, Combobox, ComboboxOption } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
-import { useDataManager } from './DataManager/useDataManager.mjs';
+import { useDataManager } from '../hooks/useDataManager.mjs';
 
 const SelectCategory = ({ error = null, intlLabel, name, onChange, value = undefined, isCreating, dynamicZoneTarget })=>{
     const { formatMessage } = useIntl();

package/dist/admin/components/SelectCategory.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectCategory.mjs","sources":["../../../admin/src/components/SelectCategory.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { ComboboxOption, Combobox, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDataManager } from './DataManager/useDataManager';\n\ninterface SelectCategoryProps {\n  error?: string | null;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: Record<string, any>;\n  };\n  name: string;\n  onChange: (value: { target: { name: string; value: any; type: string } }) => void;\n  value?: string;\n  isCreating?: boolean;\n  dynamicZoneTarget?: string | null;\n}\n\nexport const SelectCategory = ({\n  error = null,\n  intlLabel,\n  name,\n  onChange,\n  value = undefined,\n  isCreating,\n  dynamicZoneTarget,\n}: SelectCategoryProps) => {\n  const { formatMessage } = useIntl();\n  const { allComponentsCategories } = useDataManager();\n  const [categories, setCategories] = useState(allComponentsCategories);\n\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const label = formatMessage(intlLabel);\n\n  const handleChange = (value: any) => {\n    onChange({ target: { name, value, type: 'select-category' } });\n  };\n\n  const handleCreateOption = (value: any) => {\n    setCategories((prev) => [...prev, value]);\n    handleChange(value);\n  };\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <Combobox\n        // TODO: re-enable category edits, renaming categories of already existing components currently breaks other functionality\n        // See https://github.com/strapi/strapi/issues/20356\n        disabled={!isCreating && !dynamicZoneTarget}\n        onChange={handleChange}\n        onCreateOption={handleCreateOption}\n        value={value}\n        creatable\n      >\n        {categories.map((category) => (\n          <ComboboxOption key={category} value={category}>\n            {category}\n          </ComboboxOption>\n        ))}\n      </Combobox>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectCategory","error","intlLabel","name","onChange","value","undefined","isCreating","dynamicZoneTarget","formatMessage","useIntl","allComponentsCategories","useDataManager","categories","setCategories","useState","errorMessage","id","defaultMessage","label","handleChange","target","type","handleCreateOption","prev","_jsxs","Field","Root","_jsx","Label","Combobox","disabled","onCreateOption","creatable","map","category","ComboboxOption","Error"],"mappings":";;;;;;MAqBaA,cAAiB,GAAA,CAAC,EAC7BC,KAAQ,GAAA,IAAI,EACZC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,KAAQC,GAAAA,SAAS,EACjBC,UAAU,EACVC,iBAAiB,EACG,GAAA;IACpB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,uBAAuB,EAAE,GAAGC,cAAAA,EAAAA;AACpC,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAc,CAAA,GAAGC,QAASJ,CAAAA,uBAAAA,CAAAA;IAE7C,MAAMK,YAAAA,GAAef,QAAQQ,aAAc,CAAA;QAAEQ,EAAIhB,EAAAA,KAAAA;QAAOiB,cAAgBjB,EAAAA;KAAW,CAAA,GAAA,EAAA;AACnF,IAAA,MAAMkB,QAAQV,aAAcP,CAAAA,SAAAA,CAAAA;AAE5B,IAAA,MAAMkB,eAAe,CAACf,KAAAA,GAAAA;QACpBD,QAAS,CAAA;YAAEiB,MAAQ,EAAA;AAAElB,gBAAAA,IAAAA;AAAME,gBAAAA,KAAAA;gBAAOiB,IAAM,EAAA;AAAkB;AAAE,SAAA,CAAA;AAC9D,KAAA;AAEA,IAAA,MAAMC,qBAAqB,CAAClB,KAAAA,GAAAA;AAC1BS,QAAAA,aAAAA,CAAc,CAACU,IAAS,GAAA;AAAIA,gBAAAA,GAAAA,IAAAA;AAAMnB,gBAAAA;AAAM,aAAA,CAAA;QACxCe,YAAaf,CAAAA,KAAAA,CAAAA;AACf,KAAA;IAEA,qBACEoB,IAAA,CAACC,MAAMC,IAAI,EAAA;QAAC1B,KAAOe,EAAAA,YAAAA;QAAcb,IAAMA,EAAAA,IAAAA;;AACrC,0BAAAyB,GAAA,CAACF,MAAMG,KAAK,EAAA;AAAEV,gBAAAA,QAAAA,EAAAA;;0BACdS,GAACE,CAAAA,QAAAA,EAAAA;;;gBAGCC,QAAU,EAAA,CAACxB,cAAc,CAACC,iBAAAA;gBAC1BJ,QAAUgB,EAAAA,YAAAA;gBACVY,cAAgBT,EAAAA,kBAAAA;gBAChBlB,KAAOA,EAAAA,KAAAA;gBACP4B,SAAS,EAAA,IAAA;AAERpB,gBAAAA,QAAAA,EAAAA,UAAAA,CAAWqB,GAAG,CAAC,CAACC,QAAAA,iBACfP,GAACQ,CAAAA,cAAAA,EAAAA;wBAA8B/B,KAAO8B,EAAAA,QAAAA;AACnCA,wBAAAA,QAAAA,EAAAA;AADkBA,qBAAAA,EAAAA,QAAAA,CAAAA;;AAKzB,0BAAAP,GAAA,CAACF,MAAMW,KAAK,EAAA,EAAA;;;AAGlB;;;;"}
+{"version":3,"file":"SelectCategory.mjs","sources":["../../../admin/src/components/SelectCategory.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { ComboboxOption, Combobox, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDataManager } from '../hooks/useDataManager';\n\ninterface SelectCategoryProps {\n  error?: string | null;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: Record<string, any>;\n  };\n  name: string;\n  onChange: (value: { target: { name: string; value: any; type: string } }) => void;\n  value?: string;\n  isCreating?: boolean;\n  dynamicZoneTarget?: string | null;\n}\n\nexport const SelectCategory = ({\n  error = null,\n  intlLabel,\n  name,\n  onChange,\n  value = undefined,\n  isCreating,\n  dynamicZoneTarget,\n}: SelectCategoryProps) => {\n  const { formatMessage } = useIntl();\n  const { allComponentsCategories } = useDataManager();\n  const [categories, setCategories] = useState(allComponentsCategories);\n\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const label = formatMessage(intlLabel);\n\n  const handleChange = (value: any) => {\n    onChange({ target: { name, value, type: 'select-category' } });\n  };\n\n  const handleCreateOption = (value: any) => {\n    setCategories((prev) => [...prev, value]);\n    handleChange(value);\n  };\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <Combobox\n        // TODO: re-enable category edits, renaming categories of already existing components currently breaks other functionality\n        // See https://github.com/strapi/strapi/issues/20356\n        disabled={!isCreating && !dynamicZoneTarget}\n        onChange={handleChange}\n        onCreateOption={handleCreateOption}\n        value={value}\n        creatable\n      >\n        {categories.map((category) => (\n          <ComboboxOption key={category} value={category}>\n            {category}\n          </ComboboxOption>\n        ))}\n      </Combobox>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectCategory","error","intlLabel","name","onChange","value","undefined","isCreating","dynamicZoneTarget","formatMessage","useIntl","allComponentsCategories","useDataManager","categories","setCategories","useState","errorMessage","id","defaultMessage","label","handleChange","target","type","handleCreateOption","prev","_jsxs","Field","Root","_jsx","Label","Combobox","disabled","onCreateOption","creatable","map","category","ComboboxOption","Error"],"mappings":";;;;;;MAqBaA,cAAiB,GAAA,CAAC,EAC7BC,KAAQ,GAAA,IAAI,EACZC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,KAAQC,GAAAA,SAAS,EACjBC,UAAU,EACVC,iBAAiB,EACG,GAAA;IACpB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,uBAAuB,EAAE,GAAGC,cAAAA,EAAAA;AACpC,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAc,CAAA,GAAGC,QAASJ,CAAAA,uBAAAA,CAAAA;IAE7C,MAAMK,YAAAA,GAAef,QAAQQ,aAAc,CAAA;QAAEQ,EAAIhB,EAAAA,KAAAA;QAAOiB,cAAgBjB,EAAAA;KAAW,CAAA,GAAA,EAAA;AACnF,IAAA,MAAMkB,QAAQV,aAAcP,CAAAA,SAAAA,CAAAA;AAE5B,IAAA,MAAMkB,eAAe,CAACf,KAAAA,GAAAA;QACpBD,QAAS,CAAA;YAAEiB,MAAQ,EAAA;AAAElB,gBAAAA,IAAAA;AAAME,gBAAAA,KAAAA;gBAAOiB,IAAM,EAAA;AAAkB;AAAE,SAAA,CAAA;AAC9D,KAAA;AAEA,IAAA,MAAMC,qBAAqB,CAAClB,KAAAA,GAAAA;AAC1BS,QAAAA,aAAAA,CAAc,CAACU,IAAS,GAAA;AAAIA,gBAAAA,GAAAA,IAAAA;AAAMnB,gBAAAA;AAAM,aAAA,CAAA;QACxCe,YAAaf,CAAAA,KAAAA,CAAAA;AACf,KAAA;IAEA,qBACEoB,IAAA,CAACC,MAAMC,IAAI,EAAA;QAAC1B,KAAOe,EAAAA,YAAAA;QAAcb,IAAMA,EAAAA,IAAAA;;AACrC,0BAAAyB,GAAA,CAACF,MAAMG,KAAK,EAAA;AAAEV,gBAAAA,QAAAA,EAAAA;;0BACdS,GAACE,CAAAA,QAAAA,EAAAA;;;gBAGCC,QAAU,EAAA,CAACxB,cAAc,CAACC,iBAAAA;gBAC1BJ,QAAUgB,EAAAA,YAAAA;gBACVY,cAAgBT,EAAAA,kBAAAA;gBAChBlB,KAAOA,EAAAA,KAAAA;gBACP4B,SAAS,EAAA,IAAA;AAERpB,gBAAAA,QAAAA,EAAAA,UAAAA,CAAWqB,GAAG,CAAC,CAACC,QAAAA,iBACfP,GAACQ,CAAAA,cAAAA,EAAAA;wBAA8B/B,KAAO8B,EAAAA,QAAAA;AACnCA,wBAAAA,QAAAA,EAAAA;AADkBA,qBAAAA,EAAAA,QAAAA,CAAAA;;AAKzB,0BAAAP,GAAA,CAACF,MAAMW,KAAK,EAAA,EAAA;;;AAGlB;;;;"}

package/dist/admin/components/SelectComponent.js

@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
 var constants = require('../constants.js');
+var useDataManager = require('../hooks/useDataManager.js');
 var getMaxDepth = require('../utils/getMaxDepth.js');
-var useDataManager = require('./DataManager/useDataManager.js');
 
 const SelectComponent = ({ error = null, intlLabel, isAddingAComponentToAnotherComponent, isCreating, isCreatingComponentWhileAddingAField, componentToCreate, name, onChange, targetUid, forTarget, value })=>{
     const { formatMessage } = reactIntl.useIntl();
@@ -15,13 +15,16 @@ const SelectComponent = ({ error = null, intlLabel, isAddingAComponentToAnotherC
     }) : '';
     const label = formatMessage(intlLabel);
     const { componentsGroupedByCategory, componentsThatHaveOtherComponentInTheirAttributes, nestedComponents } = useDataManager.useDataManager();
-    const isTargetAComponent = forTarget === 'component';
+    const isTargetAComponent = [
+        'component',
+        'components'
+    ].includes(forTarget);
     let options = Object.entries(componentsGroupedByCategory).reduce((acc, current)=>{
         const [categoryName, components] = current;
         const compos = components.map((component)=>{
             return {
                 uid: component.uid,
-                label: component.info.displayName,
+                label: component.schema.displayName,
                 categoryName
             };
         });

package/dist/admin/components/SelectComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectComponent.js","sources":["../../../admin/src/components/SelectComponent.tsx"],"sourcesContent":["import { SingleSelectOption, SingleSelect, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { MAX_COMPONENT_DEPTH } from '../constants';\nimport { getChildrenMaxDepth, getComponentDepth } from '../utils/getMaxDepth';\n\nimport { useDataManager } from './DataManager/useDataManager';\n\nimport type { Internal } from '@strapi/types';\ninterface Option {\n  uid: string;\n  label: string;\n  categoryName: string;\n}\n\ninterface SelectComponentProps {\n  componentToCreate?: Record<string, any> | null;\n  error?: string | null;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: Record<string, any>;\n  };\n  isAddingAComponentToAnotherComponent: boolean;\n  isCreating: boolean;\n  isCreatingComponentWhileAddingAField: boolean;\n  name: string;\n  onChange: (value: any) => void;\n  targetUid: Internal.UID.Schema;\n  value: string;\n  forTarget: string;\n}\n\nexport const SelectComponent = ({\n  error = null,\n  intlLabel,\n  isAddingAComponentToAnotherComponent,\n  isCreating,\n  isCreatingComponentWhileAddingAField,\n  componentToCreate,\n  name,\n  onChange,\n  targetUid,\n  forTarget,\n  value,\n}: SelectComponentProps) => {\n  const { formatMessage } = useIntl();\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const label = formatMessage(intlLabel);\n\n  const {\n    componentsGroupedByCategory,\n    componentsThatHaveOtherComponentInTheirAttributes,\n    nestedComponents,\n  } = useDataManager();\n\n  const isTargetAComponent = forTarget === 'component';\n\n  let options: Option[] = Object.entries(componentsGroupedByCategory).reduce(\n    (acc: Option[], current) => {\n      const [categoryName, components] = current;\n      const compos = components.map((component) => {\n        return {\n          uid: component.uid,\n          label: component.info.displayName,\n          categoryName,\n        };\n      });\n\n      return [...acc, ...compos];\n    },\n    []\n  );\n\n  if (isAddingAComponentToAnotherComponent) {\n    options = options.filter(({ uid }: any) => {\n      const maxDepth = getChildrenMaxDepth(uid, componentsThatHaveOtherComponentInTheirAttributes);\n      const componentDepth = getComponentDepth(targetUid, nestedComponents);\n      const totalDepth = maxDepth + componentDepth;\n      return totalDepth <= MAX_COMPONENT_DEPTH;\n    });\n  }\n\n  if (isTargetAComponent) {\n    options = options.filter((option) => {\n      return option.uid !== targetUid;\n    });\n  }\n\n  if (isCreatingComponentWhileAddingAField) {\n    options = [\n      {\n        uid: value,\n        label: componentToCreate?.displayName,\n        categoryName: componentToCreate?.category,\n      },\n    ];\n  }\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <SingleSelect\n        disabled={isCreatingComponentWhileAddingAField || !isCreating}\n        onChange={(value: any) => {\n          onChange({ target: { name, value, type: 'select-category' } });\n        }}\n        value={value || ''}\n      >\n        {options.map((option) => {\n          return (\n            <SingleSelectOption key={option.uid} value={option.uid}>\n              {`${option.categoryName} - ${option.label}`}\n            </SingleSelectOption>\n          );\n        })}\n      </SingleSelect>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectComponent","error","intlLabel","isAddingAComponentToAnotherComponent","isCreating","isCreatingComponentWhileAddingAField","componentToCreate","name","onChange","targetUid","forTarget","value","formatMessage","useIntl","errorMessage","id","defaultMessage","label","componentsGroupedByCategory","componentsThatHaveOtherComponentInTheirAttributes","nestedComponents","useDataManager","isTargetAComponent","options","Object","entries","reduce","acc","current","categoryName","components","compos","map","component","uid","info","displayName","filter","maxDepth","getChildrenMaxDepth","componentDepth","getComponentDepth","totalDepth","MAX_COMPONENT_DEPTH","option","category","_jsxs","Field","Root","_jsx","Label","SingleSelect","disabled","target","type","SingleSelectOption","Error"],"mappings":";;;;;;;;;AAiCO,MAAMA,eAAkB,GAAA,CAAC,EAC9BC,KAAAA,GAAQ,IAAI,EACZC,SAAS,EACTC,oCAAoC,EACpCC,UAAU,EACVC,oCAAoC,EACpCC,iBAAiB,EACjBC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,KAAK,EACgB,GAAA;IACrB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAMC,YAAAA,GAAeb,QAAQW,aAAc,CAAA;QAAEG,EAAId,EAAAA,KAAAA;QAAOe,cAAgBf,EAAAA;KAAW,CAAA,GAAA,EAAA;AACnF,IAAA,MAAMgB,QAAQL,aAAcV,CAAAA,SAAAA,CAAAA;AAE5B,IAAA,MAAM,EACJgB,2BAA2B,EAC3BC,iDAAiD,EACjDC,gBAAgB,EACjB,GAAGC,6BAAAA,EAAAA;AAEJ,IAAA,MAAMC,qBAAqBZ,SAAc,KAAA,WAAA;IAEzC,IAAIa,OAAAA,GAAoBC,OAAOC,OAAO,CAACP,6BAA6BQ,MAAM,CACxE,CAACC,GAAeC,EAAAA,OAAAA,GAAAA;QACd,MAAM,CAACC,YAAcC,EAAAA,UAAAA,CAAW,GAAGF,OAAAA;AACnC,QAAA,MAAMG,MAASD,GAAAA,UAAAA,CAAWE,GAAG,CAAC,CAACC,SAAAA,GAAAA;YAC7B,OAAO;AACLC,gBAAAA,GAAAA,EAAKD,UAAUC,GAAG;gBAClBjB,KAAOgB,EAAAA,SAAAA,CAAUE,IAAI,CAACC,WAAW;AACjCP,gBAAAA;AACF,aAAA;AACF,SAAA,CAAA;QAEA,OAAO;AAAIF,YAAAA,GAAAA,GAAAA;AAAQI,YAAAA,GAAAA;AAAO,SAAA;AAC5B,KAAA,EACA,EAAE,CAAA;AAGJ,IAAA,IAAI5B,oCAAsC,EAAA;AACxCoB,QAAAA,OAAAA,GAAUA,QAAQc,MAAM,CAAC,CAAC,EAAEH,GAAG,EAAO,GAAA;YACpC,MAAMI,QAAAA,GAAWC,gCAAoBL,GAAKf,EAAAA,iDAAAA,CAAAA;YAC1C,MAAMqB,cAAAA,GAAiBC,8BAAkBhC,SAAWW,EAAAA,gBAAAA,CAAAA;AACpD,YAAA,MAAMsB,aAAaJ,QAAWE,GAAAA,cAAAA;AAC9B,YAAA,OAAOE,UAAcC,IAAAA,6BAAAA;AACvB,SAAA,CAAA;AACF;AAEA,IAAA,IAAIrB,kBAAoB,EAAA;QACtBC,OAAUA,GAAAA,OAAAA,CAAQc,MAAM,CAAC,CAACO,MAAAA,GAAAA;YACxB,OAAOA,MAAAA,CAAOV,GAAG,KAAKzB,SAAAA;AACxB,SAAA,CAAA;AACF;AAEA,IAAA,IAAIJ,oCAAsC,EAAA;QACxCkB,OAAU,GAAA;AACR,YAAA;gBACEW,GAAKvB,EAAAA,KAAAA;AACLM,gBAAAA,KAAAA,EAAOX,iBAAmB8B,EAAAA,WAAAA;AAC1BP,gBAAAA,YAAAA,EAAcvB,iBAAmBuC,EAAAA;AACnC;AACD,SAAA;AACH;IAEA,qBACEC,eAAA,CAACC,mBAAMC,IAAI,EAAA;QAAC/C,KAAOa,EAAAA,YAAAA;QAAcP,IAAMA,EAAAA,IAAAA;;AACrC,0BAAA0C,cAAA,CAACF,mBAAMG,KAAK,EAAA;AAAEjC,gBAAAA,QAAAA,EAAAA;;0BACdgC,cAACE,CAAAA,yBAAAA,EAAAA;AACCC,gBAAAA,QAAAA,EAAU/C,wCAAwC,CAACD,UAAAA;AACnDI,gBAAAA,QAAAA,EAAU,CAACG,KAAAA,GAAAA;oBACTH,QAAS,CAAA;wBAAE6C,MAAQ,EAAA;AAAE9C,4BAAAA,IAAAA;AAAMI,4BAAAA,KAAAA;4BAAO2C,IAAM,EAAA;AAAkB;AAAE,qBAAA,CAAA;AAC9D,iBAAA;AACA3C,gBAAAA,KAAAA,EAAOA,KAAS,IAAA,EAAA;0BAEfY,OAAQS,CAAAA,GAAG,CAAC,CAACY,MAAAA,GAAAA;AACZ,oBAAA,qBACEK,cAACM,CAAAA,+BAAAA,EAAAA;AAAoC5C,wBAAAA,KAAAA,EAAOiC,OAAOV,GAAG;kCACnD,CAAC,EAAEU,OAAOf,YAAY,CAAC,GAAG,EAAEe,MAAAA,CAAO3B,KAAK,CAAC;AADnB2B,qBAAAA,EAAAA,MAAAA,CAAOV,GAAG,CAAA;AAIvC,iBAAA;;AAEF,0BAAAe,cAAA,CAACF,mBAAMS,KAAK,EAAA,EAAA;;;AAGlB;;;;"}
+{"version":3,"file":"SelectComponent.js","sources":["../../../admin/src/components/SelectComponent.tsx"],"sourcesContent":["import { SingleSelectOption, SingleSelect, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { MAX_COMPONENT_DEPTH } from '../constants';\nimport { useDataManager } from '../hooks/useDataManager';\nimport { getChildrenMaxDepth, getComponentDepth } from '../utils/getMaxDepth';\n\nimport type { Internal } from '@strapi/types';\ninterface Option {\n  uid: string;\n  label: string;\n  categoryName: string;\n}\n\ninterface SelectComponentProps {\n  componentToCreate?: Record<string, any> | null;\n  error?: string | null;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: Record<string, any>;\n  };\n  isAddingAComponentToAnotherComponent: boolean;\n  isCreating: boolean;\n  isCreatingComponentWhileAddingAField: boolean;\n  name: string;\n  onChange: (value: any) => void;\n  targetUid: Internal.UID.Schema;\n  value: string;\n  forTarget: string;\n}\n\nexport const SelectComponent = ({\n  error = null,\n  intlLabel,\n  isAddingAComponentToAnotherComponent,\n  isCreating,\n  isCreatingComponentWhileAddingAField,\n  componentToCreate,\n  name,\n  onChange,\n  targetUid,\n  forTarget,\n  value,\n}: SelectComponentProps) => {\n  const { formatMessage } = useIntl();\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const label = formatMessage(intlLabel);\n\n  const {\n    componentsGroupedByCategory,\n    componentsThatHaveOtherComponentInTheirAttributes,\n    nestedComponents,\n  } = useDataManager();\n\n  const isTargetAComponent = ['component', 'components'].includes(forTarget);\n\n  let options: Option[] = Object.entries(componentsGroupedByCategory).reduce(\n    (acc: Option[], current) => {\n      const [categoryName, components] = current;\n      const compos = components.map((component) => {\n        return {\n          uid: component.uid,\n          label: component.schema.displayName,\n          categoryName,\n        };\n      });\n\n      return [...acc, ...compos];\n    },\n    []\n  );\n\n  if (isAddingAComponentToAnotherComponent) {\n    options = options.filter(({ uid }: any) => {\n      const maxDepth = getChildrenMaxDepth(uid, componentsThatHaveOtherComponentInTheirAttributes);\n      const componentDepth = getComponentDepth(targetUid, nestedComponents);\n      const totalDepth = maxDepth + componentDepth;\n      return totalDepth <= MAX_COMPONENT_DEPTH;\n    });\n  }\n\n  if (isTargetAComponent) {\n    options = options.filter((option) => {\n      return option.uid !== targetUid;\n    });\n  }\n\n  if (isCreatingComponentWhileAddingAField) {\n    options = [\n      {\n        uid: value,\n        label: componentToCreate?.displayName,\n        categoryName: componentToCreate?.category,\n      },\n    ];\n  }\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <SingleSelect\n        disabled={isCreatingComponentWhileAddingAField || !isCreating}\n        onChange={(value: any) => {\n          onChange({ target: { name, value, type: 'select-category' } });\n        }}\n        value={value || ''}\n      >\n        {options.map((option) => {\n          return (\n            <SingleSelectOption key={option.uid} value={option.uid}>\n              {`${option.categoryName} - ${option.label}`}\n            </SingleSelectOption>\n          );\n        })}\n      </SingleSelect>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectComponent","error","intlLabel","isAddingAComponentToAnotherComponent","isCreating","isCreatingComponentWhileAddingAField","componentToCreate","name","onChange","targetUid","forTarget","value","formatMessage","useIntl","errorMessage","id","defaultMessage","label","componentsGroupedByCategory","componentsThatHaveOtherComponentInTheirAttributes","nestedComponents","useDataManager","isTargetAComponent","includes","options","Object","entries","reduce","acc","current","categoryName","components","compos","map","component","uid","schema","displayName","filter","maxDepth","getChildrenMaxDepth","componentDepth","getComponentDepth","totalDepth","MAX_COMPONENT_DEPTH","option","category","_jsxs","Field","Root","_jsx","Label","SingleSelect","disabled","target","type","SingleSelectOption","Error"],"mappings":"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"}

package/dist/admin/components/SelectComponent.mjs

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Field, SingleSelect, SingleSelectOption } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { MAX_COMPONENT_DEPTH } from '../constants.mjs';
+import { useDataManager } from '../hooks/useDataManager.mjs';
 import { getChildrenMaxDepth, getComponentDepth } from '../utils/getMaxDepth.mjs';
-import { useDataManager } from './DataManager/useDataManager.mjs';
 
 const SelectComponent = ({ error = null, intlLabel, isAddingAComponentToAnotherComponent, isCreating, isCreatingComponentWhileAddingAField, componentToCreate, name, onChange, targetUid, forTarget, value })=>{
     const { formatMessage } = useIntl();
@@ -13,13 +13,16 @@ const SelectComponent = ({ error = null, intlLabel, isAddingAComponentToAnotherC
     }) : '';
     const label = formatMessage(intlLabel);
     const { componentsGroupedByCategory, componentsThatHaveOtherComponentInTheirAttributes, nestedComponents } = useDataManager();
-    const isTargetAComponent = forTarget === 'component';
+    const isTargetAComponent = [
+        'component',
+        'components'
+    ].includes(forTarget);
     let options = Object.entries(componentsGroupedByCategory).reduce((acc, current)=>{
         const [categoryName, components] = current;
         const compos = components.map((component)=>{
             return {
                 uid: component.uid,
-                label: component.info.displayName,
+                label: component.schema.displayName,
                 categoryName
             };
         });

package/dist/admin/components/SelectComponent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectComponent.mjs","sources":["../../../admin/src/components/SelectComponent.tsx"],"sourcesContent":["import { SingleSelectOption, SingleSelect, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { MAX_COMPONENT_DEPTH } from '../constants';\nimport { getChildrenMaxDepth, getComponentDepth } from '../utils/getMaxDepth';\n\nimport { useDataManager } from './DataManager/useDataManager';\n\nimport type { Internal } from '@strapi/types';\ninterface Option {\n  uid: string;\n  label: string;\n  categoryName: string;\n}\n\ninterface SelectComponentProps {\n  componentToCreate?: Record<string, any> | null;\n  error?: string | null;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: Record<string, any>;\n  };\n  isAddingAComponentToAnotherComponent: boolean;\n  isCreating: boolean;\n  isCreatingComponentWhileAddingAField: boolean;\n  name: string;\n  onChange: (value: any) => void;\n  targetUid: Internal.UID.Schema;\n  value: string;\n  forTarget: string;\n}\n\nexport const SelectComponent = ({\n  error = null,\n  intlLabel,\n  isAddingAComponentToAnotherComponent,\n  isCreating,\n  isCreatingComponentWhileAddingAField,\n  componentToCreate,\n  name,\n  onChange,\n  targetUid,\n  forTarget,\n  value,\n}: SelectComponentProps) => {\n  const { formatMessage } = useIntl();\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const label = formatMessage(intlLabel);\n\n  const {\n    componentsGroupedByCategory,\n    componentsThatHaveOtherComponentInTheirAttributes,\n    nestedComponents,\n  } = useDataManager();\n\n  const isTargetAComponent = forTarget === 'component';\n\n  let options: Option[] = Object.entries(componentsGroupedByCategory).reduce(\n    (acc: Option[], current) => {\n      const [categoryName, components] = current;\n      const compos = components.map((component) => {\n        return {\n          uid: component.uid,\n          label: component.info.displayName,\n          categoryName,\n        };\n      });\n\n      return [...acc, ...compos];\n    },\n    []\n  );\n\n  if (isAddingAComponentToAnotherComponent) {\n    options = options.filter(({ uid }: any) => {\n      const maxDepth = getChildrenMaxDepth(uid, componentsThatHaveOtherComponentInTheirAttributes);\n      const componentDepth = getComponentDepth(targetUid, nestedComponents);\n      const totalDepth = maxDepth + componentDepth;\n      return totalDepth <= MAX_COMPONENT_DEPTH;\n    });\n  }\n\n  if (isTargetAComponent) {\n    options = options.filter((option) => {\n      return option.uid !== targetUid;\n    });\n  }\n\n  if (isCreatingComponentWhileAddingAField) {\n    options = [\n      {\n        uid: value,\n        label: componentToCreate?.displayName,\n        categoryName: componentToCreate?.category,\n      },\n    ];\n  }\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <SingleSelect\n        disabled={isCreatingComponentWhileAddingAField || !isCreating}\n        onChange={(value: any) => {\n          onChange({ target: { name, value, type: 'select-category' } });\n        }}\n        value={value || ''}\n      >\n        {options.map((option) => {\n          return (\n            <SingleSelectOption key={option.uid} value={option.uid}>\n              {`${option.categoryName} - ${option.label}`}\n            </SingleSelectOption>\n          );\n        })}\n      </SingleSelect>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectComponent","error","intlLabel","isAddingAComponentToAnotherComponent","isCreating","isCreatingComponentWhileAddingAField","componentToCreate","name","onChange","targetUid","forTarget","value","formatMessage","useIntl","errorMessage","id","defaultMessage","label","componentsGroupedByCategory","componentsThatHaveOtherComponentInTheirAttributes","nestedComponents","useDataManager","isTargetAComponent","options","Object","entries","reduce","acc","current","categoryName","components","compos","map","component","uid","info","displayName","filter","maxDepth","getChildrenMaxDepth","componentDepth","getComponentDepth","totalDepth","MAX_COMPONENT_DEPTH","option","category","_jsxs","Field","Root","_jsx","Label","SingleSelect","disabled","target","type","SingleSelectOption","Error"],"mappings":"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"}
+{"version":3,"file":"SelectComponent.mjs","sources":["../../../admin/src/components/SelectComponent.tsx"],"sourcesContent":["import { SingleSelectOption, SingleSelect, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { MAX_COMPONENT_DEPTH } from '../constants';\nimport { useDataManager } from '../hooks/useDataManager';\nimport { getChildrenMaxDepth, getComponentDepth } from '../utils/getMaxDepth';\n\nimport type { Internal } from '@strapi/types';\ninterface Option {\n  uid: string;\n  label: string;\n  categoryName: string;\n}\n\ninterface SelectComponentProps {\n  componentToCreate?: Record<string, any> | null;\n  error?: string | null;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: Record<string, any>;\n  };\n  isAddingAComponentToAnotherComponent: boolean;\n  isCreating: boolean;\n  isCreatingComponentWhileAddingAField: boolean;\n  name: string;\n  onChange: (value: any) => void;\n  targetUid: Internal.UID.Schema;\n  value: string;\n  forTarget: string;\n}\n\nexport const SelectComponent = ({\n  error = null,\n  intlLabel,\n  isAddingAComponentToAnotherComponent,\n  isCreating,\n  isCreatingComponentWhileAddingAField,\n  componentToCreate,\n  name,\n  onChange,\n  targetUid,\n  forTarget,\n  value,\n}: SelectComponentProps) => {\n  const { formatMessage } = useIntl();\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const label = formatMessage(intlLabel);\n\n  const {\n    componentsGroupedByCategory,\n    componentsThatHaveOtherComponentInTheirAttributes,\n    nestedComponents,\n  } = useDataManager();\n\n  const isTargetAComponent = ['component', 'components'].includes(forTarget);\n\n  let options: Option[] = Object.entries(componentsGroupedByCategory).reduce(\n    (acc: Option[], current) => {\n      const [categoryName, components] = current;\n      const compos = components.map((component) => {\n        return {\n          uid: component.uid,\n          label: component.schema.displayName,\n          categoryName,\n        };\n      });\n\n      return [...acc, ...compos];\n    },\n    []\n  );\n\n  if (isAddingAComponentToAnotherComponent) {\n    options = options.filter(({ uid }: any) => {\n      const maxDepth = getChildrenMaxDepth(uid, componentsThatHaveOtherComponentInTheirAttributes);\n      const componentDepth = getComponentDepth(targetUid, nestedComponents);\n      const totalDepth = maxDepth + componentDepth;\n      return totalDepth <= MAX_COMPONENT_DEPTH;\n    });\n  }\n\n  if (isTargetAComponent) {\n    options = options.filter((option) => {\n      return option.uid !== targetUid;\n    });\n  }\n\n  if (isCreatingComponentWhileAddingAField) {\n    options = [\n      {\n        uid: value,\n        label: componentToCreate?.displayName,\n        categoryName: componentToCreate?.category,\n      },\n    ];\n  }\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <SingleSelect\n        disabled={isCreatingComponentWhileAddingAField || !isCreating}\n        onChange={(value: any) => {\n          onChange({ target: { name, value, type: 'select-category' } });\n        }}\n        value={value || ''}\n      >\n        {options.map((option) => {\n          return (\n            <SingleSelectOption key={option.uid} value={option.uid}>\n              {`${option.categoryName} - ${option.label}`}\n            </SingleSelectOption>\n          );\n        })}\n      </SingleSelect>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectComponent","error","intlLabel","isAddingAComponentToAnotherComponent","isCreating","isCreatingComponentWhileAddingAField","componentToCreate","name","onChange","targetUid","forTarget","value","formatMessage","useIntl","errorMessage","id","defaultMessage","label","componentsGroupedByCategory","componentsThatHaveOtherComponentInTheirAttributes","nestedComponents","useDataManager","isTargetAComponent","includes","options","Object","entries","reduce","acc","current","categoryName","components","compos","map","component","uid","schema","displayName","filter","maxDepth","getChildrenMaxDepth","componentDepth","getComponentDepth","totalDepth","MAX_COMPONENT_DEPTH","option","category","_jsxs","Field","Root","_jsx","Label","SingleSelect","disabled","target","type","SingleSelectOption","Error"],"mappings":"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"}