@strapi/content-type-builder 5.12.1 → 5.12.3

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

@@ -0,0 +1,74 @@
+'use strict';
+
+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 reducer = require('../../../FormModal/reducer.js');
+
+const RelationTargetPicker = ({ oneThatIsCreatingARelationWithAnother, target })=>{
+    const { contentTypes, sortedContentTypesList } = useDataManager.useDataManager();
+    const dispatch = reactRedux.useDispatch();
+    // TODO: replace with an obj { relation: 'x', bidirctional: true|false }
+    const allowedContentTypesForRelation = sortedContentTypesList.filter(isAllowedContentTypesForRelations.isAllowedContentTypesForRelations);
+    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({
+                target: {
+                    value: uid,
+                    oneThatIsCreatingARelationWithAnother,
+                    selectedContentTypeFriendlyName,
+                    targetContentTypeAllowedRelations: restrictRelationsTo
+                }
+            }));
+        };
+    /**
+   * TODO: This should be a Select but the design doesn't match the
+   * styles of the select component and there isn't the ability to
+   * change it correctly.
+   */ return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(MenuTrigger, {
+                children: `${displayName} ${plugin ? `(from: ${plugin})` : ''}`
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Content, {
+                zIndex: "popover",
+                children: allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo, plugin })=>/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Item, {
+                        onSelect: handleSelect({
+                            uid,
+                            plugin,
+                            title,
+                            restrictRelationsTo
+                        }),
+                        children: [
+                            title,
+                            " ",
+                            plugin && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                                children: [
+                                    "(from: ",
+                                    plugin,
+                                    ")"
+                                ]
+                            })
+                        ]
+                    }, uid))
+            })
+        ]
+    });
+};
+const MenuTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
+  max-width: 16.8rem;
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+exports.RelationTargetPicker = RelationTargetPicker;
+//# sourceMappingURL=RelationTargetPicker.js.map

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

@@ -0,0 +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 { 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

@@ -0,0 +1,72 @@
+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 { actions } from '../../../FormModal/reducer.mjs';
+
+const RelationTargetPicker = ({ oneThatIsCreatingARelationWithAnother, target })=>{
+    const { contentTypes, sortedContentTypesList } = useDataManager();
+    const dispatch = useDispatch();
+    // TODO: replace with an obj { relation: 'x', bidirctional: true|false }
+    const allowedContentTypesForRelation = sortedContentTypesList.filter(isAllowedContentTypesForRelations);
+    const { plugin = null, schema: { displayName } = {
+        displayName: 'error'
+    } } = contentTypes?.[target] ?? {};
+    const handleSelect = ({ uid, plugin, title, restrictRelationsTo })=>()=>{
+            const selectedContentTypeFriendlyName = plugin ? `${plugin}_${title}` : title;
+            dispatch(actions.onChangeRelationTarget({
+                target: {
+                    value: uid,
+                    oneThatIsCreatingARelationWithAnother,
+                    selectedContentTypeFriendlyName,
+                    targetContentTypeAllowedRelations: restrictRelationsTo
+                }
+            }));
+        };
+    /**
+   * TODO: This should be a Select but the design doesn't match the
+   * styles of the select component and there isn't the ability to
+   * change it correctly.
+   */ return /*#__PURE__*/ jsxs(Menu.Root, {
+        children: [
+            /*#__PURE__*/ jsx(MenuTrigger, {
+                children: `${displayName} ${plugin ? `(from: ${plugin})` : ''}`
+            }),
+            /*#__PURE__*/ jsx(Menu.Content, {
+                zIndex: "popover",
+                children: allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo, plugin })=>/*#__PURE__*/ jsxs(Menu.Item, {
+                        onSelect: handleSelect({
+                            uid,
+                            plugin,
+                            title,
+                            restrictRelationsTo
+                        }),
+                        children: [
+                            title,
+                            " ",
+                            plugin && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    "(from: ",
+                                    plugin,
+                                    ")"
+                                ]
+                            })
+                        ]
+                    }, uid))
+            })
+        ]
+    });
+};
+const MenuTrigger = styled(Menu.Trigger)`
+  max-width: 16.8rem;
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+export { RelationTargetPicker };
+//# sourceMappingURL=RelationTargetPicker.mjs.map

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

@@ -0,0 +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 { 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/Components.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+
+const Wrapper = styledComponents.styled(designSystem.Box)`
+  position: relative;
+  width: 100%;
+  &::before {
+    content: '';
+    position: absolute;
+    top: calc(50% - 0px);
+    height: 2px;
+    width: 100%;
+    background-color: ${({ theme })=>theme.colors.primary600};
+    z-index: 0;
+  }
+`;
+const IconWrapper = styledComponents.styled(designSystem.Box)`
+  background: ${({ theme, $isSelected })=>theme.colors[$isSelected ? 'primary100' : 'neutral0']};
+  border: 1px solid
+    ${({ theme, $isSelected })=>theme.colors[$isSelected ? 'primary700' : 'neutral200']};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  z-index: 1;
+  flex: 0 0 2.4rem;
+  svg {
+    width: 2.4rem;
+    height: 2.4rem;
+    max-width: unset;
+    path {
+      fill: ${({ theme, $isSelected })=>theme.colors[$isSelected ? 'primary700' : 'neutral500']};
+    }
+  }
+  cursor: pointer;
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+const InfosWrapper = styledComponents.styled(designSystem.Flex)`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`;
+
+exports.IconWrapper = IconWrapper;
+exports.InfosWrapper = InfosWrapper;
+exports.Wrapper = Wrapper;
+//# sourceMappingURL=Components.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Components.js","sources":["../../../../../admin/src/components/Relation/RelationNaturePicker/Components.tsx"],"sourcesContent":["import { Box, BoxComponent, Flex, FlexComponent } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst Wrapper = styled<BoxComponent>(Box)`\n  position: relative;\n  width: 100%;\n  &::before {\n    content: '';\n    position: absolute;\n    top: calc(50% - 0px);\n    height: 2px;\n    width: 100%;\n    background-color: ${({ theme }) => theme.colors.primary600};\n    z-index: 0;\n  }\n`;\n\nconst IconWrapper = styled<BoxComponent<'button'>>(Box)<{ $isSelected: boolean }>`\n  background: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary100' : 'neutral0']};\n  border: 1px solid\n    ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral200']};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 1;\n  flex: 0 0 2.4rem;\n  svg {\n    width: 2.4rem;\n    height: 2.4rem;\n    max-width: unset;\n    path {\n      fill: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral500']};\n    }\n  }\n  cursor: pointer;\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n\nconst InfosWrapper = styled<FlexComponent>(Flex)`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n`;\n\nexport { IconWrapper, InfosWrapper, Wrapper };\n"],"names":["Wrapper","styled","Box","theme","colors","primary600","IconWrapper","$isSelected","borderRadius","InfosWrapper","Flex"],"mappings":";;;;;AAGMA,MAAAA,OAAAA,GAAUC,uBAAqBC,CAAAA,gBAAAA,CAAI;;;;;;;;;sBASnB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAG/D;AAEMC,MAAAA,WAAAA,GAAcL,uBAA+BC,CAAAA,gBAAAA,CAA8B;AACnE,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,WAAW,CAAC;;AAE9F,IAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,aAAa,CAAC;AACzE,iBAAA,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,YAAY,CAAC;;;;;;;;AAQzC,YAAA,EAAE,CAAC,EAAEL,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,aAAa,CAAC;;;;;;;AAOlG;AAEME,MAAAA,YAAAA,GAAeR,uBAAsBS,CAAAA,iBAAAA,CAAK;;;;;AAKhD;;;;;;"}

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

@@ -0,0 +1,45 @@
+import { Box, Flex } from '@strapi/design-system';
+import { styled } from 'styled-components';
+
+const Wrapper = styled(Box)`
+  position: relative;
+  width: 100%;
+  &::before {
+    content: '';
+    position: absolute;
+    top: calc(50% - 0px);
+    height: 2px;
+    width: 100%;
+    background-color: ${({ theme })=>theme.colors.primary600};
+    z-index: 0;
+  }
+`;
+const IconWrapper = styled(Box)`
+  background: ${({ theme, $isSelected })=>theme.colors[$isSelected ? 'primary100' : 'neutral0']};
+  border: 1px solid
+    ${({ theme, $isSelected })=>theme.colors[$isSelected ? 'primary700' : 'neutral200']};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  z-index: 1;
+  flex: 0 0 2.4rem;
+  svg {
+    width: 2.4rem;
+    height: 2.4rem;
+    max-width: unset;
+    path {
+      fill: ${({ theme, $isSelected })=>theme.colors[$isSelected ? 'primary700' : 'neutral500']};
+    }
+  }
+  cursor: pointer;
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+const InfosWrapper = styled(Flex)`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`;
+
+export { IconWrapper, InfosWrapper, Wrapper };
+//# sourceMappingURL=Components.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Components.mjs","sources":["../../../../../admin/src/components/Relation/RelationNaturePicker/Components.tsx"],"sourcesContent":["import { Box, BoxComponent, Flex, FlexComponent } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nconst Wrapper = styled<BoxComponent>(Box)`\n  position: relative;\n  width: 100%;\n  &::before {\n    content: '';\n    position: absolute;\n    top: calc(50% - 0px);\n    height: 2px;\n    width: 100%;\n    background-color: ${({ theme }) => theme.colors.primary600};\n    z-index: 0;\n  }\n`;\n\nconst IconWrapper = styled<BoxComponent<'button'>>(Box)<{ $isSelected: boolean }>`\n  background: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary100' : 'neutral0']};\n  border: 1px solid\n    ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral200']};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  z-index: 1;\n  flex: 0 0 2.4rem;\n  svg {\n    width: 2.4rem;\n    height: 2.4rem;\n    max-width: unset;\n    path {\n      fill: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral500']};\n    }\n  }\n  cursor: pointer;\n  &:disabled {\n    cursor: not-allowed;\n  }\n`;\n\nconst InfosWrapper = styled<FlexComponent>(Flex)`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n`;\n\nexport { IconWrapper, InfosWrapper, Wrapper };\n"],"names":["Wrapper","styled","Box","theme","colors","primary600","IconWrapper","$isSelected","borderRadius","InfosWrapper","Flex"],"mappings":";;;AAGMA,MAAAA,OAAAA,GAAUC,MAAqBC,CAAAA,GAAAA,CAAI;;;;;;;;;sBASnB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAG/D;AAEMC,MAAAA,WAAAA,GAAcL,MAA+BC,CAAAA,GAAAA,CAA8B;AACnE,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,WAAW,CAAC;;AAE9F,IAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,aAAa,CAAC;AACzE,iBAAA,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,YAAY,CAAC;;;;;;;;AAQzC,YAAA,EAAE,CAAC,EAAEL,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAc,GAAA,YAAA,GAAe,aAAa,CAAC;;;;;;;AAOlG;AAEME,MAAAA,YAAAA,GAAeR,MAAsBS,CAAAA,IAAAA,CAAK;;;;;AAKhD;;;;"}

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

@@ -0,0 +1,149 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var get = require('lodash/get');
+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 reducer = require('../../FormModal/reducer.js');
+var Components = require('./Components.js');
+
+const relations = {
+    oneWay: Icons.OneWay,
+    oneToOne: Icons.OneToOne,
+    oneToMany: Icons.OneToMany,
+    manyToOne: Icons.ManyToOne,
+    manyToMany: Icons.ManyToMany,
+    manyWay: Icons.ManyWays
+};
+const RelationNaturePicker = ({ naturePickerType, oneThatIsCreatingARelationWithAnother, relationType, target })=>{
+    const dispatch = reactRedux.useDispatch();
+    const { formatMessage } = reactIntl.useIntl();
+    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,
+        'schema',
+        'displayName'
+    ], 'unknown');
+    const leftTarget = areDisplayedNamesInverted ? targetLabel : oneThatIsCreatingARelationWithAnother;
+    const rightTarget = areDisplayedNamesInverted ? oneThatIsCreatingARelationWithAnother : targetLabel;
+    const leftDisplayedValue = pluralize(leftTarget, relationType === 'manyToMany' ? 2 : 1);
+    const restrictedRelations = get(contentTypes, [
+        target,
+        'schema',
+        'restrictRelationsTo'
+    ], null);
+    const rightDisplayedValue = pluralize(rightTarget, [
+        'manyToMany',
+        'oneToMany',
+        'manyToOne',
+        'manyWay'
+    ].includes(relationType) ? 2 : 1);
+    if (!relationType) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        style: {
+            flex: 1
+        },
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(Components.Wrapper, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                    paddingLeft: 9,
+                    paddingRight: 9,
+                    paddingTop: 1,
+                    justifyContent: "center",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.KeyboardNavigable, {
+                        tagName: "button",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                            gap: 3,
+                            children: relationsType.map((relation)=>{
+                                const Asset = relations[relation];
+                                const isEnabled = restrictedRelations === null || restrictedRelations.includes(relation);
+                                return /*#__PURE__*/ jsxRuntime.jsx(Components.IconWrapper, {
+                                    tag: "button",
+                                    $isSelected: relationType === relation,
+                                    disabled: !isEnabled,
+                                    onClick: ()=>{
+                                        if (isEnabled) {
+                                            dispatch(reducer.actions.onChangeRelationType({
+                                                target: {
+                                                    oneThatIsCreatingARelationWithAnother,
+                                                    value: relation
+                                                }
+                                            }));
+                                        }
+                                    },
+                                    padding: 2,
+                                    type: "button",
+                                    "aria-label": formatMessage({
+                                        id: getTrad.getTrad(`relation.${relation}`)
+                                    }),
+                                    "aria-pressed": relationType === relation,
+                                    "data-relation-type": relation,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(Asset, {
+                                        "aria-hidden": "true"
+                                    }, relation)
+                                }, relation);
+                            })
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(Components.InfosWrapper, {
+                justifyContent: "center",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Typography, {
+                        children: [
+                            truncate(leftDisplayedValue, {
+                                length: 24
+                            }),
+                            " "
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Typography, {
+                        textColor: "primary600",
+                        children: [
+                            formatMessage({
+                                id: getTrad.getTrad(`relation.${relationType}`)
+                            }),
+                            " "
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        children: truncate(rightDisplayedValue, {
+                            length: 24
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.RelationNaturePicker = RelationNaturePicker;
+//# sourceMappingURL=RelationNaturePicker.js.map

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

@@ -0,0 +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 { 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

@@ -0,0 +1,147 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Flex, KeyboardNavigable, Typography } from '@strapi/design-system';
+import { OneWay, OneToOne, OneToMany, ManyToOne, ManyToMany, ManyWays } from '@strapi/icons';
+import get from 'lodash/get';
+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 { actions } from '../../FormModal/reducer.mjs';
+import { Wrapper, IconWrapper, InfosWrapper } from './Components.mjs';
+
+const relations = {
+    oneWay: OneWay,
+    oneToOne: OneToOne,
+    oneToMany: OneToMany,
+    manyToOne: ManyToOne,
+    manyToMany: ManyToMany,
+    manyWay: ManyWays
+};
+const RelationNaturePicker = ({ naturePickerType, oneThatIsCreatingARelationWithAnother, relationType, target })=>{
+    const dispatch = useDispatch();
+    const { formatMessage } = useIntl();
+    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,
+        'schema',
+        'displayName'
+    ], 'unknown');
+    const leftTarget = areDisplayedNamesInverted ? targetLabel : oneThatIsCreatingARelationWithAnother;
+    const rightTarget = areDisplayedNamesInverted ? oneThatIsCreatingARelationWithAnother : targetLabel;
+    const leftDisplayedValue = pluralize(leftTarget, relationType === 'manyToMany' ? 2 : 1);
+    const restrictedRelations = get(contentTypes, [
+        target,
+        'schema',
+        'restrictRelationsTo'
+    ], null);
+    const rightDisplayedValue = pluralize(rightTarget, [
+        'manyToMany',
+        'oneToMany',
+        'manyToOne',
+        'manyWay'
+    ].includes(relationType) ? 2 : 1);
+    if (!relationType) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxs(Flex, {
+        style: {
+            flex: 1
+        },
+        children: [
+            /*#__PURE__*/ jsx(Wrapper, {
+                children: /*#__PURE__*/ jsx(Flex, {
+                    paddingLeft: 9,
+                    paddingRight: 9,
+                    paddingTop: 1,
+                    justifyContent: "center",
+                    children: /*#__PURE__*/ jsx(KeyboardNavigable, {
+                        tagName: "button",
+                        children: /*#__PURE__*/ jsx(Flex, {
+                            gap: 3,
+                            children: relationsType.map((relation)=>{
+                                const Asset = relations[relation];
+                                const isEnabled = restrictedRelations === null || restrictedRelations.includes(relation);
+                                return /*#__PURE__*/ jsx(IconWrapper, {
+                                    tag: "button",
+                                    $isSelected: relationType === relation,
+                                    disabled: !isEnabled,
+                                    onClick: ()=>{
+                                        if (isEnabled) {
+                                            dispatch(actions.onChangeRelationType({
+                                                target: {
+                                                    oneThatIsCreatingARelationWithAnother,
+                                                    value: relation
+                                                }
+                                            }));
+                                        }
+                                    },
+                                    padding: 2,
+                                    type: "button",
+                                    "aria-label": formatMessage({
+                                        id: getTrad(`relation.${relation}`)
+                                    }),
+                                    "aria-pressed": relationType === relation,
+                                    "data-relation-type": relation,
+                                    children: /*#__PURE__*/ jsx(Asset, {
+                                        "aria-hidden": "true"
+                                    }, relation)
+                                }, relation);
+                            })
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxs(InfosWrapper, {
+                justifyContent: "center",
+                children: [
+                    /*#__PURE__*/ jsxs(Typography, {
+                        children: [
+                            truncate(leftDisplayedValue, {
+                                length: 24
+                            }),
+                            " "
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Typography, {
+                        textColor: "primary600",
+                        children: [
+                            formatMessage({
+                                id: getTrad(`relation.${relationType}`)
+                            }),
+                            " "
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        children: truncate(rightDisplayedValue, {
+                            length: 24
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { RelationNaturePicker };
+//# sourceMappingURL=RelationNaturePicker.mjs.map

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

@@ -0,0 +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 { 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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"}