@akbarsafari00/bonyan-content-type-builder 5.52.1-fa.2

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

@@ -0,0 +1,59 @@
+'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;
+    background: ${({ theme })=>theme.colors.neutral150};
+
+    svg {
+      path {
+        fill: ${({ theme })=>theme.colors.neutral300};
+      }
+    }
+  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+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';\r\nimport { styled } from 'styled-components';\r\n\r\nconst Wrapper = styled<BoxComponent>(Box)`\r\n  position: relative;\r\n  width: 100%;\r\n  &::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: calc(50% - 0px);\r\n    height: 2px;\r\n    width: 100%;\r\n    background-color: ${({ theme }) => theme.colors.primary600};\r\n    z-index: 0;\r\n  }\r\n`;\r\n\r\nconst IconWrapper = styled<BoxComponent<'button'>>(Box)<{ $isSelected: boolean }>`\r\n  background: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary100' : 'neutral0']};\r\n  border: 1px solid\r\n    ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral200']};\r\n  border-radius: ${({ theme }) => theme.borderRadius};\r\n  z-index: 1;\r\n  flex: 0 0 2.4rem;\r\n  svg {\r\n    width: 2.4rem;\r\n    height: 2.4rem;\r\n    max-width: unset;\r\n    path {\r\n      fill: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral500']};\r\n    }\r\n  }\r\n  cursor: pointer;\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n    background: ${({ theme }) => theme.colors.neutral150};\r\n\r\n    svg {\r\n      path {\r\n        fill: ${({ theme }) => theme.colors.neutral300};\r\n      }\r\n    }\r\n  }\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n`;\r\n\r\nconst InfosWrapper = styled<FlexComponent>(Flex)`\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n`;\r\n\r\nexport { IconWrapper, InfosWrapper, Wrapper };\r\n"],"names":["Wrapper","styled","Box","theme","colors","primary600","IconWrapper","$isSelected","borderRadius","neutral150","neutral300","InfosWrapper","Flex"],"mappings":";;;;;AAGA,MAAMA,OAAAA,GAAUC,uBAAAA,CAAqBC,gBAAAA,CAAI,CAAC;;;;;;;;;sBASpB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;;AAG/D;AAEA,MAAMC,WAAAA,GAAcL,uBAAAA,CAA+BC,gBAAAA,CAA8B,CAAC;AACpE,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAAA,GAAc,YAAA,GAAe,WAAW,CAAC;;AAE9F,IAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAAA,GAAc,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,WAAAA,GAAc,YAAA,GAAe,aAAa,CAAC;;;;;;gBAMlF,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACK,UAAU,CAAC;;;;cAI3C,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACM,UAAU,CAAC;;;;;;;AAOvD;AAEA,MAAMC,YAAAA,GAAeV,uBAAAA,CAAsBW,iBAAAA,CAAK,CAAC;;;;;AAKjD;;;;;;"}

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

@@ -0,0 +1,55 @@
+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;
+    background: ${({ theme })=>theme.colors.neutral150};
+
+    svg {
+      path {
+        fill: ${({ theme })=>theme.colors.neutral300};
+      }
+    }
+  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+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';\r\nimport { styled } from 'styled-components';\r\n\r\nconst Wrapper = styled<BoxComponent>(Box)`\r\n  position: relative;\r\n  width: 100%;\r\n  &::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: calc(50% - 0px);\r\n    height: 2px;\r\n    width: 100%;\r\n    background-color: ${({ theme }) => theme.colors.primary600};\r\n    z-index: 0;\r\n  }\r\n`;\r\n\r\nconst IconWrapper = styled<BoxComponent<'button'>>(Box)<{ $isSelected: boolean }>`\r\n  background: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary100' : 'neutral0']};\r\n  border: 1px solid\r\n    ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral200']};\r\n  border-radius: ${({ theme }) => theme.borderRadius};\r\n  z-index: 1;\r\n  flex: 0 0 2.4rem;\r\n  svg {\r\n    width: 2.4rem;\r\n    height: 2.4rem;\r\n    max-width: unset;\r\n    path {\r\n      fill: ${({ theme, $isSelected }) => theme.colors[$isSelected ? 'primary700' : 'neutral500']};\r\n    }\r\n  }\r\n  cursor: pointer;\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n    background: ${({ theme }) => theme.colors.neutral150};\r\n\r\n    svg {\r\n      path {\r\n        fill: ${({ theme }) => theme.colors.neutral300};\r\n      }\r\n    }\r\n  }\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n`;\r\n\r\nconst InfosWrapper = styled<FlexComponent>(Flex)`\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n`;\r\n\r\nexport { IconWrapper, InfosWrapper, Wrapper };\r\n"],"names":["Wrapper","styled","Box","theme","colors","primary600","IconWrapper","$isSelected","borderRadius","neutral150","neutral300","InfosWrapper","Flex"],"mappings":";;;AAGA,MAAMA,OAAAA,GAAUC,MAAAA,CAAqBC,GAAAA,CAAI,CAAC;;;;;;;;;sBASpB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;;;AAG/D;AAEA,MAAMC,WAAAA,GAAcL,MAAAA,CAA+BC,GAAAA,CAA8B,CAAC;AACpE,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAAA,GAAc,YAAA,GAAe,WAAW,CAAC;;AAE9F,IAAA,EAAE,CAAC,EAAEJ,KAAK,EAAEI,WAAW,EAAE,GAAKJ,KAAAA,CAAMC,MAAM,CAACG,WAAAA,GAAc,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,WAAAA,GAAc,YAAA,GAAe,aAAa,CAAC;;;;;;gBAMlF,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACK,UAAU,CAAC;;;;cAI3C,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACM,UAAU,CAAC;;;;;;;AAOvD;AAEA,MAAMC,YAAAA,GAAeV,MAAAA,CAAsBW,IAAAA,CAAK,CAAC;;;;;AAKjD;;;;"}

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

@@ -0,0 +1,153 @@
+'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 getTrad = require('../../../utils/getTrad.js');
+var useDataManager = require('../../DataManager/useDataManager.js');
+var reducer = require('../../FormModal/reducer.js');
+var Components = require('./Components.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var get__default = /*#__PURE__*/_interopDefault(get);
+var truncate__default = /*#__PURE__*/_interopDefault(truncate);
+var pluralize__default = /*#__PURE__*/_interopDefault(pluralize);
+
+const relations = {
+    oneWay: Icons.OneWay,
+    oneToOne: Icons.OneToOne,
+    oneToMany: Icons.OneToMany,
+    manyToOne: Icons.ManyToOne,
+    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 dispatch = reactRedux.useDispatch();
+    const { formatMessage } = reactIntl.useIntl();
+    const { contentTypes } = useDataManager.useDataManager();
+    const dataType = naturePickerType === 'component' ? 'component' : get__default.default(contentTypes, [
+        targetUid,
+        'kind'
+    ], '');
+    const relationsType = dataType === 'collectionType' ? ctRelations : componentRelations;
+    const areDisplayedNamesInverted = relationType === 'manyToOne';
+    const targetLabel = get__default.default(contentTypes, [
+        target,
+        'info',
+        'displayName'
+    ], 'unknown');
+    const leftTarget = areDisplayedNamesInverted ? targetLabel : oneThatIsCreatingARelationWithAnother;
+    const rightTarget = areDisplayedNamesInverted ? oneThatIsCreatingARelationWithAnother : targetLabel;
+    const leftDisplayedValue = pluralize__default.default(leftTarget, relationType === 'manyToMany' ? 2 : 1);
+    const restrictedRelations = get__default.default(contentTypes, [
+        target,
+        'restrictRelationsTo'
+    ], null);
+    const rightDisplayedValue = pluralize__default.default(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__default.default(leftDisplayedValue, {
+                                length: 24
+                            }),
+                            " "
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Typography, {
+                        textColor: "primary600",
+                        children: [
+                            formatMessage({
+                                id: getTrad.getTrad(`relation.${relationType}`)
+                            }),
+                            " "
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        children: truncate__default.default(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';\r\nimport {\r\n  ManyToMany,\r\n  ManyToOne,\r\n  ManyWays as ManyWay,\r\n  OneToMany,\r\n  OneToOne,\r\n  OneWay,\r\n} from '@strapi/icons';\r\nimport get from 'lodash/get';\r\nimport truncate from 'lodash/truncate';\r\nimport pluralize from 'pluralize';\r\nimport { useIntl } from 'react-intl';\r\nimport { useDispatch } from 'react-redux';\r\n\r\nimport { getTrad } from '../../../utils/getTrad';\r\nimport { useDataManager } from '../../DataManager/useDataManager';\r\nimport { actions } from '../../FormModal/reducer';\r\n\r\nimport { IconWrapper, InfosWrapper, Wrapper } from './Components';\r\n\r\nconst relations = {\r\n  oneWay: OneWay,\r\n  oneToOne: OneToOne,\r\n  oneToMany: OneToMany,\r\n  manyToOne: ManyToOne,\r\n  manyToMany: ManyToMany,\r\n  manyWay: ManyWay,\r\n};\r\n\r\ntype RelationType = keyof typeof relations;\r\n\r\ninterface RelationNaturePickerProps {\r\n  naturePickerType: string;\r\n  oneThatIsCreatingARelationWithAnother: string;\r\n  relationType: string;\r\n  target: string;\r\n  targetUid: string;\r\n}\r\n\r\nconst ctRelations = ['oneWay', 'oneToOne', 'oneToMany', 'manyToOne', 'manyToMany', 'manyWay'];\r\nconst componentRelations = ['oneWay', 'manyWay'];\r\n\r\nexport const RelationNaturePicker = ({\r\n  naturePickerType,\r\n  oneThatIsCreatingARelationWithAnother,\r\n  relationType,\r\n  target,\r\n  targetUid,\r\n}: RelationNaturePickerProps) => {\r\n  const dispatch = useDispatch();\r\n  const { formatMessage } = useIntl();\r\n\r\n  const { contentTypes } = useDataManager();\r\n\r\n  const dataType =\r\n    naturePickerType === 'component' ? 'component' : get(contentTypes, [targetUid, 'kind'], '');\r\n\r\n  const relationsType = (\r\n    dataType === 'collectionType' ? ctRelations : componentRelations\r\n  ) as RelationType[];\r\n\r\n  const areDisplayedNamesInverted = relationType === 'manyToOne';\r\n  const targetLabel = get(contentTypes, [target, 'info', 'displayName'], 'unknown');\r\n  const leftTarget = areDisplayedNamesInverted\r\n    ? targetLabel\r\n    : oneThatIsCreatingARelationWithAnother;\r\n  const rightTarget = areDisplayedNamesInverted\r\n    ? oneThatIsCreatingARelationWithAnother\r\n    : targetLabel;\r\n  const leftDisplayedValue = pluralize(leftTarget, relationType === 'manyToMany' ? 2 : 1);\r\n  const restrictedRelations = get(contentTypes, [target, 'restrictRelationsTo'], null);\r\n\r\n  const rightDisplayedValue = pluralize(\r\n    rightTarget,\r\n    ['manyToMany', 'oneToMany', 'manyToOne', 'manyWay'].includes(relationType) ? 2 : 1\r\n  );\r\n\r\n  if (!relationType) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Flex style={{ flex: 1 }}>\r\n      <Wrapper>\r\n        <Flex paddingLeft={9} paddingRight={9} paddingTop={1} justifyContent=\"center\">\r\n          <KeyboardNavigable tagName=\"button\">\r\n            <Flex gap={3}>\r\n              {relationsType.map((relation) => {\r\n                const Asset = relations[relation];\r\n                const isEnabled =\r\n                  restrictedRelations === null || restrictedRelations.includes(relation);\r\n\r\n                return (\r\n                  <IconWrapper\r\n                    tag=\"button\"\r\n                    $isSelected={relationType === relation}\r\n                    disabled={!isEnabled}\r\n                    key={relation}\r\n                    onClick={() => {\r\n                      if (isEnabled) {\r\n                        dispatch(\r\n                          actions.onChangeRelationType({\r\n                            target: {\r\n                              oneThatIsCreatingARelationWithAnother,\r\n                              value: relation,\r\n                            },\r\n                          })\r\n                        );\r\n                      }\r\n                    }}\r\n                    padding={2}\r\n                    type=\"button\"\r\n                    aria-label={formatMessage({ id: getTrad(`relation.${relation}`) })}\r\n                    aria-pressed={relationType === relation}\r\n                    data-relation-type={relation}\r\n                  >\r\n                    <Asset key={relation} aria-hidden=\"true\" />\r\n                  </IconWrapper>\r\n                );\r\n              })}\r\n            </Flex>\r\n          </KeyboardNavigable>\r\n        </Flex>\r\n      </Wrapper>\r\n      <InfosWrapper justifyContent=\"center\">\r\n        <Typography>{truncate(leftDisplayedValue, { length: 24 })}&nbsp;</Typography>\r\n        <Typography textColor=\"primary600\">\r\n          {formatMessage({ id: getTrad(`relation.${relationType}`) })}&nbsp;\r\n        </Typography>\r\n        <Typography>{truncate(rightDisplayedValue, { length: 24 })}</Typography>\r\n      </InfosWrapper>\r\n    </Flex>\r\n  );\r\n};\r\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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"}

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

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

package/dist/admin/components/SelectCategory.js

@@ -0,0 +1,66 @@
+'use strict';
+
+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');
+
+const SelectCategory = ({ error = null, intlLabel, name, onChange, value = undefined, isCreating, dynamicZoneTarget })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { allComponentsCategories } = useDataManager.useDataManager();
+    const [categories, setCategories] = React.useState(allComponentsCategories);
+    const errorMessage = error ? formatMessage({
+        id: error,
+        defaultMessage: error
+    }) : '';
+    const label = formatMessage(intlLabel);
+    const handleChange = (value)=>{
+        if (value === undefined) {
+            return;
+        }
+        onChange({
+            target: {
+                name,
+                value,
+                type: 'select-category'
+            }
+        });
+    };
+    const handleCreateOption = (value)=>{
+        if (value === undefined) {
+            return;
+        }
+        setCategories((prev)=>[
+                ...prev,
+                value
+            ]);
+        handleChange(value);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        error: errorMessage,
+        name: name,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Combobox, {
+                // TODO: re-enable category edits, renaming categories of already existing components currently breaks other functionality
+                // See https://github.com/strapi/strapi/issues/20356
+                disabled: !isCreating && !dynamicZoneTarget,
+                onChange: handleChange,
+                onCreateOption: handleCreateOption,
+                value: value,
+                creatable: true,
+                children: categories.map((category)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.ComboboxOption, {
+                        value: category,
+                        children: category
+                    }, category))
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+        ]
+    });
+};
+
+exports.SelectCategory = SelectCategory;
+//# sourceMappingURL=SelectCategory.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCategory.js","sources":["../../../admin/src/components/SelectCategory.tsx"],"sourcesContent":["import { useState } from 'react';\r\n\r\nimport { ComboboxOption, Combobox, Field } from '@strapi/design-system';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { useDataManager } from './DataManager/useDataManager';\r\n\r\nimport type { FormChangeHandler, IntlLabel } from '../types';\r\n\r\ninterface SelectCategoryProps {\r\n  error?: string | null;\r\n  intlLabel: IntlLabel;\r\n  name: string;\r\n  onChange: FormChangeHandler<string, 'select-category'>;\r\n  value?: string;\r\n  isCreating?: boolean;\r\n  dynamicZoneTarget?: string | null;\r\n}\r\n\r\nexport const SelectCategory = ({\r\n  error = null,\r\n  intlLabel,\r\n  name,\r\n  onChange,\r\n  value = undefined,\r\n  isCreating,\r\n  dynamicZoneTarget,\r\n}: SelectCategoryProps) => {\r\n  const { formatMessage } = useIntl();\r\n  const { allComponentsCategories } = useDataManager();\r\n  const [categories, setCategories] = useState(allComponentsCategories);\r\n\r\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\r\n  const label = formatMessage(intlLabel);\r\n\r\n  const handleChange = (value?: string) => {\r\n    if (value === undefined) {\r\n      return;\r\n    }\r\n\r\n    onChange({ target: { name, value, type: 'select-category' } });\r\n  };\r\n\r\n  const handleCreateOption = (value?: string) => {\r\n    if (value === undefined) {\r\n      return;\r\n    }\r\n\r\n    setCategories((prev) => [...prev, value]);\r\n    handleChange(value);\r\n  };\r\n\r\n  return (\r\n    <Field.Root error={errorMessage} name={name}>\r\n      <Field.Label>{label}</Field.Label>\r\n      <Combobox\r\n        // TODO: re-enable category edits, renaming categories of already existing components currently breaks other functionality\r\n        // See https://github.com/strapi/strapi/issues/20356\r\n        disabled={!isCreating && !dynamicZoneTarget}\r\n        onChange={handleChange}\r\n        onCreateOption={handleCreateOption}\r\n        value={value}\r\n        creatable\r\n      >\r\n        {categories.map((category) => (\r\n          <ComboboxOption key={category} value={category}>\r\n            {category}\r\n          </ComboboxOption>\r\n        ))}\r\n      </Combobox>\r\n      <Field.Error />\r\n    </Field.Root>\r\n  );\r\n};\r\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":";;;;;;;;MAmBaA,cAAAA,GAAiB,CAAC,EAC7BC,KAAAA,GAAQ,IAAI,EACZC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,KAAAA,GAAQC,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,aAAAA,CAAc,GAAGC,cAAAA,CAASJ,uBAAAA,CAAAA;IAE7C,MAAMK,YAAAA,GAAef,QAAQQ,aAAAA,CAAc;QAAEQ,EAAAA,EAAIhB,KAAAA;QAAOiB,cAAAA,EAAgBjB;KAAM,CAAA,GAAK,EAAA;AACnF,IAAA,MAAMkB,QAAQV,aAAAA,CAAcP,SAAAA,CAAAA;AAE5B,IAAA,MAAMkB,eAAe,CAACf,KAAAA,GAAAA;AACpB,QAAA,IAAIA,UAAUC,SAAAA,EAAW;AACvB,YAAA;AACF,QAAA;QAEAF,QAAAA,CAAS;YAAEiB,MAAAA,EAAQ;AAAElB,gBAAAA,IAAAA;AAAME,gBAAAA,KAAAA;gBAAOiB,IAAAA,EAAM;AAAkB;AAAE,SAAA,CAAA;AAC9D,IAAA,CAAA;AAEA,IAAA,MAAMC,qBAAqB,CAAClB,KAAAA,GAAAA;AAC1B,QAAA,IAAIA,UAAUC,SAAAA,EAAW;AACvB,YAAA;AACF,QAAA;AAEAQ,QAAAA,aAAAA,CAAc,CAACU,IAAAA,GAAS;AAAIA,gBAAAA,GAAAA,IAAAA;AAAMnB,gBAAAA;AAAM,aAAA,CAAA;QACxCe,YAAAA,CAAaf,KAAAA,CAAAA;AACf,IAAA,CAAA;IAEA,qBACEoB,eAAA,CAACC,mBAAMC,IAAI,EAAA;QAAC1B,KAAAA,EAAOe,YAAAA;QAAcb,IAAAA,EAAMA,IAAAA;;AACrC,0BAAAyB,cAAA,CAACF,mBAAMG,KAAK,EAAA;AAAEV,gBAAAA,QAAAA,EAAAA;;0BACdS,cAAA,CAACE,qBAAAA,EAAAA;;;gBAGCC,QAAAA,EAAU,CAACxB,cAAc,CAACC,iBAAAA;gBAC1BJ,QAAAA,EAAUgB,YAAAA;gBACVY,cAAAA,EAAgBT,kBAAAA;gBAChBlB,KAAAA,EAAOA,KAAAA;gBACP4B,SAAS,EAAA,IAAA;AAERpB,gBAAAA,QAAAA,EAAAA,UAAAA,CAAWqB,GAAG,CAAC,CAACC,QAAAA,iBACfP,cAAA,CAACQ,2BAAAA,EAAAA;wBAA8B/B,KAAAA,EAAO8B,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

@@ -0,0 +1,64 @@
+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';
+
+const SelectCategory = ({ error = null, intlLabel, name, onChange, value = undefined, isCreating, dynamicZoneTarget })=>{
+    const { formatMessage } = useIntl();
+    const { allComponentsCategories } = useDataManager();
+    const [categories, setCategories] = useState(allComponentsCategories);
+    const errorMessage = error ? formatMessage({
+        id: error,
+        defaultMessage: error
+    }) : '';
+    const label = formatMessage(intlLabel);
+    const handleChange = (value)=>{
+        if (value === undefined) {
+            return;
+        }
+        onChange({
+            target: {
+                name,
+                value,
+                type: 'select-category'
+            }
+        });
+    };
+    const handleCreateOption = (value)=>{
+        if (value === undefined) {
+            return;
+        }
+        setCategories((prev)=>[
+                ...prev,
+                value
+            ]);
+        handleChange(value);
+    };
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        error: errorMessage,
+        name: name,
+        children: [
+            /*#__PURE__*/ jsx(Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsx(Combobox, {
+                // TODO: re-enable category edits, renaming categories of already existing components currently breaks other functionality
+                // See https://github.com/strapi/strapi/issues/20356
+                disabled: !isCreating && !dynamicZoneTarget,
+                onChange: handleChange,
+                onCreateOption: handleCreateOption,
+                value: value,
+                creatable: true,
+                children: categories.map((category)=>/*#__PURE__*/ jsx(ComboboxOption, {
+                        value: category,
+                        children: category
+                    }, category))
+            }),
+            /*#__PURE__*/ jsx(Field.Error, {})
+        ]
+    });
+};
+
+export { SelectCategory };
+//# sourceMappingURL=SelectCategory.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCategory.mjs","sources":["../../../admin/src/components/SelectCategory.tsx"],"sourcesContent":["import { useState } from 'react';\r\n\r\nimport { ComboboxOption, Combobox, Field } from '@strapi/design-system';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { useDataManager } from './DataManager/useDataManager';\r\n\r\nimport type { FormChangeHandler, IntlLabel } from '../types';\r\n\r\ninterface SelectCategoryProps {\r\n  error?: string | null;\r\n  intlLabel: IntlLabel;\r\n  name: string;\r\n  onChange: FormChangeHandler<string, 'select-category'>;\r\n  value?: string;\r\n  isCreating?: boolean;\r\n  dynamicZoneTarget?: string | null;\r\n}\r\n\r\nexport const SelectCategory = ({\r\n  error = null,\r\n  intlLabel,\r\n  name,\r\n  onChange,\r\n  value = undefined,\r\n  isCreating,\r\n  dynamicZoneTarget,\r\n}: SelectCategoryProps) => {\r\n  const { formatMessage } = useIntl();\r\n  const { allComponentsCategories } = useDataManager();\r\n  const [categories, setCategories] = useState(allComponentsCategories);\r\n\r\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\r\n  const label = formatMessage(intlLabel);\r\n\r\n  const handleChange = (value?: string) => {\r\n    if (value === undefined) {\r\n      return;\r\n    }\r\n\r\n    onChange({ target: { name, value, type: 'select-category' } });\r\n  };\r\n\r\n  const handleCreateOption = (value?: string) => {\r\n    if (value === undefined) {\r\n      return;\r\n    }\r\n\r\n    setCategories((prev) => [...prev, value]);\r\n    handleChange(value);\r\n  };\r\n\r\n  return (\r\n    <Field.Root error={errorMessage} name={name}>\r\n      <Field.Label>{label}</Field.Label>\r\n      <Combobox\r\n        // TODO: re-enable category edits, renaming categories of already existing components currently breaks other functionality\r\n        // See https://github.com/strapi/strapi/issues/20356\r\n        disabled={!isCreating && !dynamicZoneTarget}\r\n        onChange={handleChange}\r\n        onCreateOption={handleCreateOption}\r\n        value={value}\r\n        creatable\r\n      >\r\n        {categories.map((category) => (\r\n          <ComboboxOption key={category} value={category}>\r\n            {category}\r\n          </ComboboxOption>\r\n        ))}\r\n      </Combobox>\r\n      <Field.Error />\r\n    </Field.Root>\r\n  );\r\n};\r\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":";;;;;;MAmBaA,cAAAA,GAAiB,CAAC,EAC7BC,KAAAA,GAAQ,IAAI,EACZC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,KAAAA,GAAQC,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,aAAAA,CAAc,GAAGC,QAAAA,CAASJ,uBAAAA,CAAAA;IAE7C,MAAMK,YAAAA,GAAef,QAAQQ,aAAAA,CAAc;QAAEQ,EAAAA,EAAIhB,KAAAA;QAAOiB,cAAAA,EAAgBjB;KAAM,CAAA,GAAK,EAAA;AACnF,IAAA,MAAMkB,QAAQV,aAAAA,CAAcP,SAAAA,CAAAA;AAE5B,IAAA,MAAMkB,eAAe,CAACf,KAAAA,GAAAA;AACpB,QAAA,IAAIA,UAAUC,SAAAA,EAAW;AACvB,YAAA;AACF,QAAA;QAEAF,QAAAA,CAAS;YAAEiB,MAAAA,EAAQ;AAAElB,gBAAAA,IAAAA;AAAME,gBAAAA,KAAAA;gBAAOiB,IAAAA,EAAM;AAAkB;AAAE,SAAA,CAAA;AAC9D,IAAA,CAAA;AAEA,IAAA,MAAMC,qBAAqB,CAAClB,KAAAA,GAAAA;AAC1B,QAAA,IAAIA,UAAUC,SAAAA,EAAW;AACvB,YAAA;AACF,QAAA;AAEAQ,QAAAA,aAAAA,CAAc,CAACU,IAAAA,GAAS;AAAIA,gBAAAA,GAAAA,IAAAA;AAAMnB,gBAAAA;AAAM,aAAA,CAAA;QACxCe,YAAAA,CAAaf,KAAAA,CAAAA;AACf,IAAA,CAAA;IAEA,qBACEoB,IAAA,CAACC,MAAMC,IAAI,EAAA;QAAC1B,KAAAA,EAAOe,YAAAA;QAAcb,IAAAA,EAAMA,IAAAA;;AACrC,0BAAAyB,GAAA,CAACF,MAAMG,KAAK,EAAA;AAAEV,gBAAAA,QAAAA,EAAAA;;0BACdS,GAAA,CAACE,QAAAA,EAAAA;;;gBAGCC,QAAAA,EAAU,CAACxB,cAAc,CAACC,iBAAAA;gBAC1BJ,QAAAA,EAAUgB,YAAAA;gBACVY,cAAAA,EAAgBT,kBAAAA;gBAChBlB,KAAAA,EAAOA,KAAAA;gBACP4B,SAAS,EAAA,IAAA;AAERpB,gBAAAA,QAAAA,EAAAA,UAAAA,CAAWqB,GAAG,CAAC,CAACC,QAAAA,iBACfP,GAAA,CAACQ,cAAAA,EAAAA;wBAA8B/B,KAAAA,EAAO8B,QAAAA;AACnCA,wBAAAA,QAAAA,EAAAA;AADkBA,qBAAAA,EAAAA,QAAAA,CAAAA;;AAKzB,0BAAAP,GAAA,CAACF,MAAMW,KAAK,EAAA,EAAA;;;AAGlB;;;;"}