@strapi/content-manager 0.0.0-next.bb6ff32f5168f3e380d3d9acba90a9d53bfcfb89 → 0.0.0-next.bffd3c1819cd08304e7d270e88b4973e9fcbc183

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/dist/_chunks/CardDragPreview-C0QyJgRA.js.map +1 -1
  2. package/dist/_chunks/CardDragPreview-DOxamsuj.mjs.map +1 -1
  3. package/dist/_chunks/{ComponentConfigurationPage-DqB7veg_.mjs → ComponentConfigurationPage-9_4yUE9L.mjs} +3 -3
  4. package/dist/_chunks/{ComponentConfigurationPage-DqB7veg_.mjs.map → ComponentConfigurationPage-9_4yUE9L.mjs.map} +1 -1
  5. package/dist/_chunks/{ComponentConfigurationPage-Bmwd-G2q.js → ComponentConfigurationPage-DBSh-kET.js} +4 -5
  6. package/dist/_chunks/{ComponentConfigurationPage-Bmwd-G2q.js.map → ComponentConfigurationPage-DBSh-kET.js.map} +1 -1
  7. package/dist/_chunks/{ComponentIcon-BXdiCGQp.js → ComponentIcon-CRbtQEUV.js} +2 -3
  8. package/dist/_chunks/{ComponentIcon-BXdiCGQp.js.map → ComponentIcon-CRbtQEUV.js.map} +1 -1
  9. package/dist/_chunks/ComponentIcon-u4bIXTFY.mjs.map +1 -1
  10. package/dist/_chunks/{EditConfigurationPage-DmruXqgR.js → EditConfigurationPage-Bl_U2JgH.js} +4 -5
  11. package/dist/_chunks/{EditConfigurationPage-DmruXqgR.js.map → EditConfigurationPage-Bl_U2JgH.js.map} +1 -1
  12. package/dist/_chunks/{EditConfigurationPage-CDLVqqay.mjs → EditConfigurationPage-COe6hjPC.mjs} +3 -3
  13. package/dist/_chunks/{EditConfigurationPage-CDLVqqay.mjs.map → EditConfigurationPage-COe6hjPC.mjs.map} +1 -1
  14. package/dist/_chunks/{EditViewPage-0zrWXtMz.js → EditViewPage-D4yFJET6.js} +14 -78
  15. package/dist/_chunks/EditViewPage-D4yFJET6.js.map +1 -0
  16. package/dist/_chunks/{EditViewPage-BgcbLW7w.mjs → EditViewPage-DrmVmYN0.mjs} +11 -74
  17. package/dist/_chunks/EditViewPage-DrmVmYN0.mjs.map +1 -0
  18. package/dist/_chunks/FieldTypeIcon-CMlNO8PE.mjs.map +1 -1
  19. package/dist/_chunks/FieldTypeIcon-Dnwq_IRF.js.map +1 -1
  20. package/dist/_chunks/{Form-CIDoAFoD.js → Form-C4rSaGsz.js} +5 -6
  21. package/dist/_chunks/{Form-CIDoAFoD.js.map → Form-C4rSaGsz.js.map} +1 -1
  22. package/dist/_chunks/{Form-WNWgTBtb.mjs → Form-DamaxNpG.mjs} +3 -3
  23. package/dist/_chunks/{Form-WNWgTBtb.mjs.map → Form-DamaxNpG.mjs.map} +1 -1
  24. package/dist/_chunks/{History-DEZDHwP0.mjs → History-D1PreDSY.mjs} +36 -10
  25. package/dist/_chunks/History-D1PreDSY.mjs.map +1 -0
  26. package/dist/_chunks/{History-BNvm2TK2.js → History-DTm8UCCQ.js} +47 -22
  27. package/dist/_chunks/History-DTm8UCCQ.js.map +1 -0
  28. package/dist/_chunks/{Field-BV7ZYdqe.js → Input-B7sapvBG.js} +1331 -1329
  29. package/dist/_chunks/Input-B7sapvBG.js.map +1 -0
  30. package/dist/_chunks/{Field-fTjqtEem.mjs → Input-CZ1YvjHR.mjs} +1245 -1243
  31. package/dist/_chunks/Input-CZ1YvjHR.mjs.map +1 -0
  32. package/dist/_chunks/{ListConfigurationPage-Ddz3G-It.mjs → ListConfigurationPage-Bbi32isk.mjs} +6 -5
  33. package/dist/_chunks/ListConfigurationPage-Bbi32isk.mjs.map +1 -0
  34. package/dist/_chunks/{ListConfigurationPage-B3FZwPHp.js → ListConfigurationPage-ysFMjKI3.js} +6 -6
  35. package/dist/_chunks/ListConfigurationPage-ysFMjKI3.js.map +1 -0
  36. package/dist/_chunks/{ListViewPage-BsLdw25U.mjs → ListViewPage-Bud_jBDQ.mjs} +55 -51
  37. package/dist/_chunks/ListViewPage-Bud_jBDQ.mjs.map +1 -0
  38. package/dist/_chunks/{ListViewPage-BEilNylQ.js → ListViewPage-DTuuxU3n.js} +61 -58
  39. package/dist/_chunks/ListViewPage-DTuuxU3n.js.map +1 -0
  40. package/dist/_chunks/{NoContentTypePage-BD2C-IMr.js → NoContentTypePage-CL7VVeYs.js} +2 -2
  41. package/dist/_chunks/{NoContentTypePage-BD2C-IMr.js.map → NoContentTypePage-CL7VVeYs.js.map} +1 -1
  42. package/dist/_chunks/{NoContentTypePage-D0jXEWKM.mjs → NoContentTypePage-DVhkugsf.mjs} +2 -2
  43. package/dist/_chunks/{NoContentTypePage-D0jXEWKM.mjs.map → NoContentTypePage-DVhkugsf.mjs.map} +1 -1
  44. package/dist/_chunks/{NoPermissionsPage-CIPqlrQq.mjs → NoPermissionsPage-CMdM-dCo.mjs} +2 -2
  45. package/dist/_chunks/{NoPermissionsPage-CIPqlrQq.mjs.map → NoPermissionsPage-CMdM-dCo.mjs.map} +1 -1
  46. package/dist/_chunks/{NoPermissionsPage-yNOvz9XO.js → NoPermissionsPage-v7I599vC.js} +2 -2
  47. package/dist/_chunks/{NoPermissionsPage-yNOvz9XO.js.map → NoPermissionsPage-v7I599vC.js.map} +1 -1
  48. package/dist/_chunks/{Preview-ot2fh0yZ.mjs → Preview-BNuU0SuQ.mjs} +74 -24
  49. package/dist/_chunks/Preview-BNuU0SuQ.mjs.map +1 -0
  50. package/dist/_chunks/{Preview-1cqLecKr.js → Preview-Cxq-uI6D.js} +73 -24
  51. package/dist/_chunks/Preview-Cxq-uI6D.js.map +1 -0
  52. package/dist/_chunks/{Relations-CfdwHP-0.mjs → Relations-C2Ahkrdg.mjs} +6 -8
  53. package/dist/_chunks/{Relations-CfdwHP-0.mjs.map → Relations-C2Ahkrdg.mjs.map} +1 -1
  54. package/dist/_chunks/{Relations-C3U9SKEb.js → Relations-CWS79QQn.js} +7 -10
  55. package/dist/_chunks/{Relations-C3U9SKEb.js.map → Relations-CWS79QQn.js.map} +1 -1
  56. package/dist/_chunks/{en-CHOp_xJv.js → en-BR48D_RH.js} +13 -3
  57. package/dist/_chunks/{en-CHOp_xJv.js.map → en-BR48D_RH.js.map} +1 -1
  58. package/dist/_chunks/{en-D_BMf0hT.mjs → en-D65uIF6Y.mjs} +13 -3
  59. package/dist/_chunks/{en-D_BMf0hT.mjs.map → en-D65uIF6Y.mjs.map} +1 -1
  60. package/dist/_chunks/{fr-B2Kyv8Z9.js → fr-C43IbhA_.js} +4 -1
  61. package/dist/_chunks/{fr-B2Kyv8Z9.js.map → fr-C43IbhA_.js.map} +1 -1
  62. package/dist/_chunks/{fr--pg5jUbt.mjs → fr-DBseuRuB.mjs} +4 -1
  63. package/dist/_chunks/{fr--pg5jUbt.mjs.map → fr-DBseuRuB.mjs.map} +1 -1
  64. package/dist/_chunks/hooks-BAaaKPS_.js.map +1 -1
  65. package/dist/_chunks/{index-Cg4RLIAw.js → index-DQsvBb_N.js} +518 -207
  66. package/dist/_chunks/index-DQsvBb_N.js.map +1 -0
  67. package/dist/_chunks/{index-BzUT1l9A.mjs → index-ZKrsjv-2.mjs} +536 -224
  68. package/dist/_chunks/index-ZKrsjv-2.mjs.map +1 -0
  69. package/dist/_chunks/{layout-Cj_1EKbm.js → layout-Cl0NhlQB.js} +5 -6
  70. package/dist/_chunks/{layout-Cj_1EKbm.js.map → layout-Cl0NhlQB.js.map} +1 -1
  71. package/dist/_chunks/{layout-C0QEDBAh.mjs → layout-fQk1rMk9.mjs} +4 -4
  72. package/dist/_chunks/{layout-C0QEDBAh.mjs.map → layout-fQk1rMk9.mjs.map} +1 -1
  73. package/dist/_chunks/objects-BcXOv6_9.js.map +1 -1
  74. package/dist/_chunks/objects-D6yBsdmx.mjs.map +1 -1
  75. package/dist/_chunks/{relations-hDOgJy2R.js → relations-BRfBxVbX.js} +2 -2
  76. package/dist/_chunks/{relations-hDOgJy2R.js.map → relations-BRfBxVbX.js.map} +1 -1
  77. package/dist/_chunks/{relations-CgPG3AwU.mjs → relations-BakOFl_1.mjs} +2 -2
  78. package/dist/_chunks/{relations-CgPG3AwU.mjs.map → relations-BakOFl_1.mjs.map} +1 -1
  79. package/dist/_chunks/{useDragAndDrop-J0TUUbR6.js → useDragAndDrop-BMtgCYzL.js} +5 -9
  80. package/dist/_chunks/{useDragAndDrop-J0TUUbR6.js.map → useDragAndDrop-BMtgCYzL.js.map} +1 -1
  81. package/dist/_chunks/{useDragAndDrop-DdHgKsqq.mjs → useDragAndDrop-DJ6jqvZN.mjs} +4 -7
  82. package/dist/_chunks/{useDragAndDrop-DdHgKsqq.mjs.map → useDragAndDrop-DJ6jqvZN.mjs.map} +1 -1
  83. package/dist/_chunks/{useDebounce-DmuSJIF3.mjs → usePrev-CZGy2Vjf.mjs} +11 -11
  84. package/dist/_chunks/usePrev-CZGy2Vjf.mjs.map +1 -0
  85. package/dist/_chunks/{useDebounce-CtcjDB3L.js → usePrev-D5J_2fEu.js} +8 -8
  86. package/dist/_chunks/usePrev-D5J_2fEu.js.map +1 -0
  87. package/dist/admin/index.js +2 -1
  88. package/dist/admin/index.js.map +1 -1
  89. package/dist/admin/index.mjs +6 -5
  90. package/dist/admin/src/content-manager.d.ts +3 -2
  91. package/dist/admin/src/exports.d.ts +1 -0
  92. package/dist/admin/src/history/services/historyVersion.d.ts +1 -1
  93. package/dist/admin/src/hooks/useDocument.d.ts +19 -2
  94. package/dist/admin/src/pages/EditView/components/DocumentActions.d.ts +1 -1
  95. package/dist/admin/src/pages/EditView/components/DocumentStatus.d.ts +1 -1
  96. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Code.d.ts +7 -0
  97. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/utils/prismLanguages.d.ts +49 -0
  98. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/constants.d.ts +1 -0
  99. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.d.ts +4 -1
  100. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.d.ts +4 -1
  101. package/dist/admin/src/pages/EditView/components/FormLayout.d.ts +27 -0
  102. package/dist/admin/src/pages/EditView/utils/data.d.ts +1 -0
  103. package/dist/admin/src/preview/pages/Preview.d.ts +1 -1
  104. package/dist/admin/src/preview/services/preview.d.ts +1 -1
  105. package/dist/admin/src/services/api.d.ts +1 -1
  106. package/dist/admin/src/services/components.d.ts +2 -2
  107. package/dist/admin/src/services/contentTypes.d.ts +3 -3
  108. package/dist/admin/src/services/documents.d.ts +16 -19
  109. package/dist/admin/src/services/init.d.ts +1 -1
  110. package/dist/admin/src/services/relations.d.ts +2 -2
  111. package/dist/admin/src/services/uid.d.ts +3 -3
  112. package/dist/server/index.js +230 -187
  113. package/dist/server/index.js.map +1 -1
  114. package/dist/server/index.mjs +231 -187
  115. package/dist/server/index.mjs.map +1 -1
  116. package/dist/server/src/controllers/utils/metadata.d.ts +1 -0
  117. package/dist/server/src/controllers/utils/metadata.d.ts.map +1 -1
  118. package/dist/server/src/history/controllers/history-version.d.ts +1 -1
  119. package/dist/server/src/history/controllers/history-version.d.ts.map +1 -1
  120. package/dist/server/src/history/services/history.d.ts +3 -3
  121. package/dist/server/src/history/services/history.d.ts.map +1 -1
  122. package/dist/server/src/history/services/utils.d.ts +6 -10
  123. package/dist/server/src/history/services/utils.d.ts.map +1 -1
  124. package/dist/server/src/index.d.ts +3 -2
  125. package/dist/server/src/index.d.ts.map +1 -1
  126. package/dist/server/src/preview/controllers/validation/preview.d.ts.map +1 -1
  127. package/dist/server/src/preview/index.d.ts.map +1 -1
  128. package/dist/server/src/preview/services/index.d.ts +1 -0
  129. package/dist/server/src/preview/services/index.d.ts.map +1 -1
  130. package/dist/server/src/preview/services/preview-config.d.ts +2 -0
  131. package/dist/server/src/preview/services/preview-config.d.ts.map +1 -1
  132. package/dist/server/src/preview/utils.d.ts +1 -0
  133. package/dist/server/src/preview/utils.d.ts.map +1 -1
  134. package/dist/server/src/register.d.ts.map +1 -1
  135. package/dist/server/src/services/document-metadata.d.ts +4 -2
  136. package/dist/server/src/services/document-metadata.d.ts.map +1 -1
  137. package/dist/server/src/services/index.d.ts +3 -2
  138. package/dist/server/src/services/index.d.ts.map +1 -1
  139. package/dist/server/src/services/utils/configuration/index.d.ts +2 -2
  140. package/dist/server/src/services/utils/configuration/layouts.d.ts +2 -2
  141. package/dist/server/src/services/utils/populate.d.ts +2 -2
  142. package/dist/server/src/services/utils/populate.d.ts.map +1 -1
  143. package/package.json +12 -11
  144. package/dist/_chunks/EditViewPage-0zrWXtMz.js.map +0 -1
  145. package/dist/_chunks/EditViewPage-BgcbLW7w.mjs.map +0 -1
  146. package/dist/_chunks/Field-BV7ZYdqe.js.map +0 -1
  147. package/dist/_chunks/Field-fTjqtEem.mjs.map +0 -1
  148. package/dist/_chunks/History-BNvm2TK2.js.map +0 -1
  149. package/dist/_chunks/History-DEZDHwP0.mjs.map +0 -1
  150. package/dist/_chunks/ListConfigurationPage-B3FZwPHp.js.map +0 -1
  151. package/dist/_chunks/ListConfigurationPage-Ddz3G-It.mjs.map +0 -1
  152. package/dist/_chunks/ListViewPage-BEilNylQ.js.map +0 -1
  153. package/dist/_chunks/ListViewPage-BsLdw25U.mjs.map +0 -1
  154. package/dist/_chunks/Preview-1cqLecKr.js.map +0 -1
  155. package/dist/_chunks/Preview-ot2fh0yZ.mjs.map +0 -1
  156. package/dist/_chunks/index-BzUT1l9A.mjs.map +0 -1
  157. package/dist/_chunks/index-Cg4RLIAw.js.map +0 -1
  158. package/dist/_chunks/useDebounce-CtcjDB3L.js.map +0 -1
  159. package/dist/_chunks/useDebounce-DmuSJIF3.mjs.map +0 -1
  160. package/dist/admin/src/preview/constants.d.ts +0 -1
  161. package/dist/server/src/preview/constants.d.ts +0 -2
  162. package/dist/server/src/preview/constants.d.ts.map +0 -1
@@ -3,23 +3,73 @@ const jsxRuntime = require("react/jsx-runtime");
3
3
  const React = require("react");
4
4
  const strapiAdmin = require("@strapi/admin/strapi-admin");
5
5
  const designSystem = require("@strapi/design-system");
6
- const pipe$1 = require("lodash/fp/pipe");
7
- const reactIntl = require("react-intl");
8
- const index = require("./index-Cg4RLIAw.js");
9
- const fractionalIndexing = require("fractional-indexing");
10
- const Relations = require("./Relations-C3U9SKEb.js");
11
6
  const Icons = require("@strapi/icons");
7
+ const reactIntl = require("react-intl");
8
+ const index = require("./index-DQsvBb_N.js");
12
9
  const styledComponents = require("styled-components");
13
- const ComponentIcon = require("./ComponentIcon-BXdiCGQp.js");
14
- const reactDndHtml5Backend = require("react-dnd-html5-backend");
15
- const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
16
- const objects = require("./objects-BcXOv6_9.js");
17
10
  const slate = require("slate");
18
11
  const slateHistory = require("slate-history");
19
12
  const slateReact = require("slate-react");
20
- const useDebounce = require("./useDebounce-CtcjDB3L.js");
13
+ const Prism = require("prismjs");
14
+ require("prismjs/themes/prism-solarizedlight.css");
15
+ require("prismjs/components/prism-asmatmel");
16
+ require("prismjs/components/prism-bash");
17
+ require("prismjs/components/prism-basic");
18
+ require("prismjs/components/prism-c");
19
+ require("prismjs/components/prism-clojure");
20
+ require("prismjs/components/prism-cobol");
21
+ require("prismjs/components/prism-cpp");
22
+ require("prismjs/components/prism-csharp");
23
+ require("prismjs/components/prism-dart");
24
+ require("prismjs/components/prism-docker");
25
+ require("prismjs/components/prism-elixir");
26
+ require("prismjs/components/prism-erlang");
27
+ require("prismjs/components/prism-fortran");
28
+ require("prismjs/components/prism-fsharp");
29
+ require("prismjs/components/prism-go");
30
+ require("prismjs/components/prism-graphql");
31
+ require("prismjs/components/prism-groovy");
32
+ require("prismjs/components/prism-haskell");
33
+ require("prismjs/components/prism-haxe");
34
+ require("prismjs/components/prism-ini");
35
+ require("prismjs/components/prism-java");
36
+ require("prismjs/components/prism-javascript");
37
+ require("prismjs/components/prism-jsx");
38
+ require("prismjs/components/prism-json");
39
+ require("prismjs/components/prism-julia");
40
+ require("prismjs/components/prism-kotlin");
41
+ require("prismjs/components/prism-latex");
42
+ require("prismjs/components/prism-lua");
43
+ require("prismjs/components/prism-markdown");
44
+ require("prismjs/components/prism-matlab");
45
+ require("prismjs/components/prism-makefile");
46
+ require("prismjs/components/prism-objectivec");
47
+ require("prismjs/components/prism-perl");
48
+ require("prismjs/components/prism-php");
49
+ require("prismjs/components/prism-powershell");
50
+ require("prismjs/components/prism-python");
51
+ require("prismjs/components/prism-r");
52
+ require("prismjs/components/prism-ruby");
53
+ require("prismjs/components/prism-rust");
54
+ require("prismjs/components/prism-sas");
55
+ require("prismjs/components/prism-scala");
56
+ require("prismjs/components/prism-scheme");
57
+ require("prismjs/components/prism-sql");
58
+ require("prismjs/components/prism-stata");
59
+ require("prismjs/components/prism-swift");
60
+ require("prismjs/components/prism-typescript");
61
+ require("prismjs/components/prism-tsx");
62
+ require("prismjs/components/prism-vbnet");
63
+ require("prismjs/components/prism-yaml");
64
+ const usePrev = require("./usePrev-D5J_2fEu.js");
65
+ const useDragAndDrop = require("./useDragAndDrop-BMtgCYzL.js");
21
66
  const Toolbar = require("@radix-ui/react-toolbar");
67
+ const reactDndHtml5Backend = require("react-dnd-html5-backend");
22
68
  const reactRouterDom = require("react-router-dom");
69
+ const objects = require("./objects-BcXOv6_9.js");
70
+ const Relations = require("./Relations-CWS79QQn.js");
71
+ const pipe$1 = require("lodash/fp/pipe");
72
+ const ComponentIcon = require("./ComponentIcon-CRbtQEUV.js");
23
73
  const CodeMirror = require("codemirror5");
24
74
  const sanitizeHtml = require("sanitize-html");
25
75
  const highlight_js = require("highlight.js");
@@ -37,8 +87,7 @@ require("highlight.js/styles/solarized-dark.css");
37
87
  require("codemirror5/addon/display/placeholder");
38
88
  const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
39
89
  function _interopNamespace(e) {
40
- if (e && e.__esModule)
41
- return e;
90
+ if (e && e.__esModule) return e;
42
91
  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
43
92
  if (e) {
44
93
  for (const k in e) {
@@ -55,8 +104,9 @@ function _interopNamespace(e) {
55
104
  return Object.freeze(n);
56
105
  }
57
106
  const React__namespace = /* @__PURE__ */ _interopNamespace(React);
58
- const pipe__default = /* @__PURE__ */ _interopDefault(pipe$1);
107
+ const Prism__namespace = /* @__PURE__ */ _interopNamespace(Prism);
59
108
  const Toolbar__namespace = /* @__PURE__ */ _interopNamespace(Toolbar);
109
+ const pipe__default = /* @__PURE__ */ _interopDefault(pipe$1);
60
110
  const CodeMirror__default = /* @__PURE__ */ _interopDefault(CodeMirror);
61
111
  const sanitizeHtml__default = /* @__PURE__ */ _interopDefault(sanitizeHtml);
62
112
  const Markdown__default = /* @__PURE__ */ _interopDefault(Markdown);
@@ -69,93 +119,6 @@ const ins__default = /* @__PURE__ */ _interopDefault(ins);
69
119
  const mark__default = /* @__PURE__ */ _interopDefault(mark);
70
120
  const sub__default = /* @__PURE__ */ _interopDefault(sub);
71
121
  const sup__default = /* @__PURE__ */ _interopDefault(sup);
72
- const BLOCK_LIST_ATTRIBUTE_KEYS = ["__component", "__temp_key__"];
73
- const traverseData = (predicate, transform) => (schema, components = {}) => (data = {}) => {
74
- const traverse = (datum, attributes) => {
75
- return Object.entries(datum).reduce((acc, [key, value]) => {
76
- const attribute = attributes[key];
77
- if (BLOCK_LIST_ATTRIBUTE_KEYS.includes(key) || value === null || value === void 0) {
78
- acc[key] = value;
79
- return acc;
80
- }
81
- if (attribute.type === "component") {
82
- if (attribute.repeatable) {
83
- const componentValue = predicate(attribute, value) ? transform(value, attribute) : value;
84
- acc[key] = componentValue.map(
85
- (componentData) => traverse(componentData, components[attribute.component]?.attributes ?? {})
86
- );
87
- } else {
88
- const componentValue = predicate(attribute, value) ? transform(value, attribute) : value;
89
- acc[key] = traverse(componentValue, components[attribute.component]?.attributes ?? {});
90
- }
91
- } else if (attribute.type === "dynamiczone") {
92
- const dynamicZoneValue = predicate(attribute, value) ? transform(value, attribute) : value;
93
- acc[key] = dynamicZoneValue.map(
94
- (componentData) => traverse(componentData, components[componentData.__component]?.attributes ?? {})
95
- );
96
- } else if (predicate(attribute, value)) {
97
- acc[key] = transform(value, attribute);
98
- } else {
99
- acc[key] = value;
100
- }
101
- return acc;
102
- }, {});
103
- };
104
- return traverse(data, schema.attributes);
105
- };
106
- const removeProhibitedFields = (prohibitedFields) => traverseData(
107
- (attribute) => prohibitedFields.includes(attribute.type),
108
- () => ""
109
- );
110
- const prepareRelations = traverseData(
111
- (attribute) => attribute.type === "relation",
112
- () => ({
113
- connect: [],
114
- disconnect: []
115
- })
116
- );
117
- const prepareTempKeys = traverseData(
118
- (attribute) => attribute.type === "component" && attribute.repeatable || attribute.type === "dynamiczone",
119
- (data) => {
120
- if (Array.isArray(data) && data.length > 0) {
121
- const keys = fractionalIndexing.generateNKeysBetween(void 0, void 0, data.length);
122
- return data.map((datum, index2) => ({
123
- ...datum,
124
- __temp_key__: keys[index2]
125
- }));
126
- }
127
- return data;
128
- }
129
- );
130
- const removeFieldsThatDontExistOnSchema = (schema) => (data) => {
131
- const schemaKeys = Object.keys(schema.attributes);
132
- const dataKeys = Object.keys(data);
133
- const keysToRemove = dataKeys.filter((key) => !schemaKeys.includes(key));
134
- const revisedData = [...keysToRemove, ...index.DOCUMENT_META_FIELDS].reduce((acc, key) => {
135
- delete acc[key];
136
- return acc;
137
- }, structuredClone(data));
138
- return revisedData;
139
- };
140
- const removeNullValues = (data) => {
141
- return Object.entries(data).reduce((acc, [key, value]) => {
142
- if (value === null) {
143
- return acc;
144
- }
145
- acc[key] = value;
146
- return acc;
147
- }, {});
148
- };
149
- const transformDocument = (schema, components = {}) => (document2) => {
150
- const transformations = pipe__default.default(
151
- removeFieldsThatDontExistOnSchema(schema),
152
- removeProhibitedFields(["password"])(schema, components),
153
- removeNullValues,
154
- prepareRelations(schema, components),
155
- prepareTempKeys(schema, components)
156
- );
157
- return transformations(document2);
158
- };
159
122
  const componentStore = /* @__PURE__ */ new Map();
160
123
  const useLazyComponents = (componentUids = []) => {
161
124
  const [lazyComponentStore, setLazyComponentStore] = React.useState(Object.fromEntries(componentStore));
@@ -197,7 +160,8 @@ const useLazyComponents = (componentUids = []) => {
197
160
  const codeLanguages = [
198
161
  {
199
162
  value: "asm",
200
- label: "Assembly"
163
+ label: "Assembly",
164
+ decorate: "asmatmel"
201
165
  },
202
166
  {
203
167
  value: "bash",
@@ -233,7 +197,8 @@ const codeLanguages = [
233
197
  },
234
198
  {
235
199
  value: "dockerfile",
236
- label: "Dockerfile"
200
+ label: "Dockerfile",
201
+ decorate: "docker"
237
202
  },
238
203
  {
239
204
  value: "elixir",
@@ -389,7 +354,8 @@ const codeLanguages = [
389
354
  },
390
355
  {
391
356
  value: "typescript",
392
- label: "TypeScript"
357
+ label: "TypeScript",
358
+ decorate: "ts"
393
359
  },
394
360
  {
395
361
  value: "tsx",
@@ -405,7 +371,8 @@ const codeLanguages = [
405
371
  },
406
372
  {
407
373
  value: "yaml",
408
- label: "YAML"
374
+ label: "YAML",
375
+ decorate: "yml"
409
376
  }
410
377
  ];
411
378
  const baseHandleConvert = (editor, attributesToSet) => {
@@ -471,6 +438,29 @@ const pressEnterTwiceToExit = (editor) => {
471
438
  });
472
439
  }
473
440
  };
441
+ const decorateCode = ([node, path]) => {
442
+ const ranges = [];
443
+ if (!slate.Element.isElement(node) || node.type !== "code") return ranges;
444
+ const text = slate.Node.string(node);
445
+ const language = codeLanguages.find((lang) => lang.value === node.language);
446
+ const decorateKey = language?.decorate ?? language?.value;
447
+ const selectedLanguage = Prism__namespace.languages[decorateKey || "plaintext"];
448
+ const tokens = Prism__namespace.tokenize(text, selectedLanguage);
449
+ let start = 0;
450
+ for (const token of tokens) {
451
+ const length = token.length;
452
+ const end = start + length;
453
+ if (typeof token !== "string") {
454
+ ranges.push({
455
+ anchor: { path, offset: start },
456
+ focus: { path, offset: end },
457
+ className: `token ${token.type}`
458
+ });
459
+ }
460
+ start = end;
461
+ }
462
+ return ranges;
463
+ };
474
464
  const CodeBlock = styledComponents.styled.pre`
475
465
  border-radius: ${({ theme }) => theme.borderRadius};
476
466
  background-color: ${({ theme }) => theme.colors.neutral100};
@@ -542,7 +532,7 @@ const CodeEditor = (props) => {
542
532
  const codeBlocks = {
543
533
  code: {
544
534
  renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(CodeEditor, { ...props }),
545
- icon: Icons.Code,
535
+ icon: Icons.CodeBlock,
546
536
  label: {
547
537
  id: "components.Blocks.blocks.code",
548
538
  defaultMessage: "Code block"
@@ -555,8 +545,7 @@ const codeBlocks = {
555
545
  handleEnterKey(editor) {
556
546
  pressEnterTwiceToExit(editor);
557
547
  },
558
- snippets: ["```"],
559
- dragHandleTopMargin: "10px"
548
+ snippets: ["```"]
560
549
  }
561
550
  };
562
551
  const H1 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h1" })`
@@ -731,8 +720,7 @@ const ImageDialog = () => {
731
720
  const [isOpen, setIsOpen] = React__namespace.useState(true);
732
721
  const { editor } = useBlocksEditorContext("ImageDialog");
733
722
  const components = strapiAdmin.useStrapiApp("ImageDialog", (state) => state.components);
734
- if (!components || !isOpen)
735
- return null;
723
+ if (!components || !isOpen) return null;
736
724
  const MediaLibraryDialog = components["media-library"];
737
725
  const insertImages = (images) => {
738
726
  slate.Transforms.unwrapNodes(editor, {
@@ -741,14 +729,12 @@ const ImageDialog = () => {
741
729
  });
742
730
  const nodeEntryBeingReplaced = slate.Editor.above(editor, {
743
731
  match(node) {
744
- if (slate.Editor.isEditor(node))
745
- return false;
732
+ if (slate.Editor.isEditor(node)) return false;
746
733
  const isInlineNode = ["text", "link"].includes(node.type);
747
734
  return !isInlineNode;
748
735
  }
749
736
  });
750
- if (!nodeEntryBeingReplaced)
751
- return;
737
+ if (!nodeEntryBeingReplaced) return;
752
738
  const [, pathToInsert] = nodeEntryBeingReplaced;
753
739
  slate.Transforms.removeNodes(editor);
754
740
  const nodesToInsert = images.map((image) => {
@@ -768,7 +754,7 @@ const ImageDialog = () => {
768
754
  const nodeImage = {
769
755
  ...expectedImage,
770
756
  alternativeText: expectedImage.alternativeText || expectedImage.name,
771
- url: useDebounce.prefixFileUrlWithBackendUrl(image.url)
757
+ url: usePrev.prefixFileUrlWithBackendUrl(image.url)
772
758
  };
773
759
  return nodeImage;
774
760
  });
@@ -926,8 +912,7 @@ const LinkContent = React__namespace.forwardRef(
926
912
  slateReact.ReactEditor.focus(editor);
927
913
  };
928
914
  React__namespace.useEffect(() => {
929
- if (popoverOpen)
930
- linkInputRef.current?.focus();
915
+ if (popoverOpen) linkInputRef.current?.focus();
931
916
  }, [popoverOpen]);
932
917
  const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
933
918
  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { open: popoverOpen, children: [
@@ -997,11 +982,11 @@ const LinkContent = React__namespace.forwardRef(
997
982
  ),
998
983
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
999
984
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: handleClose, children: formatMessage({
1000
- id: "components.Blocks.popover.cancel",
985
+ id: "global.cancel",
1001
986
  defaultMessage: "Cancel"
1002
987
  }) }),
1003
988
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { disabled: Boolean(inputNotDirty) || isSaveDisabled, onClick: handleSave, children: formatMessage({
1004
- id: "components.Blocks.popover.save",
989
+ id: "global.save",
1005
990
  defaultMessage: "Save"
1006
991
  }) })
1007
992
  ] })
@@ -1082,8 +1067,7 @@ const isText$1 = (node) => {
1082
1067
  return slate.Node.isNode(node) && !slate.Editor.isEditor(node) && node.type === "text";
1083
1068
  };
1084
1069
  const handleBackspaceKeyOnList = (editor, event) => {
1085
- if (!editor.selection)
1086
- return;
1070
+ if (!editor.selection) return;
1087
1071
  const [currentListItem, currentListItemPath] = slate.Editor.parent(editor, editor.selection.anchor);
1088
1072
  const [currentList, currentListPath] = slate.Editor.parent(editor, currentListItemPath);
1089
1073
  const isListEmpty = currentList.children.length === 1 && isText$1(currentListItem.children[0]) && currentListItem.children[0].text === "";
@@ -1192,8 +1176,7 @@ const handleEnterKeyOnList = (editor) => {
1192
1176
  };
1193
1177
  const handleConvertToList = (editor, format) => {
1194
1178
  const convertedPath = baseHandleConvert(editor, { type: "list-item" });
1195
- if (!convertedPath)
1196
- return;
1179
+ if (!convertedPath) return;
1197
1180
  slate.Transforms.wrapNodes(editor, { type: "list", format, children: [] }, { at: convertedPath });
1198
1181
  };
1199
1182
  const handleTabOnList = (editor) => {
@@ -1205,8 +1188,7 @@ const handleTabOnList = (editor) => {
1205
1188
  }
1206
1189
  const [currentListItem, currentListItemPath] = currentListItemEntry;
1207
1190
  const [currentList] = slate.Editor.parent(editor, currentListItemPath);
1208
- if (currentListItem === currentList.children[0])
1209
- return;
1191
+ if (currentListItem === currentList.children[0]) return;
1210
1192
  const currentListItemIndex = currentList.children.findIndex((item) => item === currentListItem);
1211
1193
  const previousNode = currentList.children[currentListItemIndex - 1];
1212
1194
  if (previousNode.type === "list") {
@@ -1342,13 +1324,13 @@ const quoteBlocks = {
1342
1324
  handleEnterKey(editor) {
1343
1325
  pressEnterTwiceToExit(editor);
1344
1326
  },
1345
- snippets: [">"],
1346
- dragHandleTopMargin: "6px"
1327
+ snippets: [">"]
1347
1328
  }
1348
1329
  };
1349
1330
  const ToolbarWrapper = styledComponents.styled(designSystem.Flex)`
1350
1331
  &[aria-disabled='true'] {
1351
1332
  cursor: not-allowed;
1333
+ background: ${({ theme }) => theme.colors.neutral150};
1352
1334
  }
1353
1335
  `;
1354
1336
  const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
@@ -1359,7 +1341,7 @@ const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
1359
1341
  const FlexButton = styledComponents.styled(designSystem.Flex)`
1360
1342
  // Inherit the not-allowed cursor from ToolbarWrapper when disabled
1361
1343
  &[aria-disabled] {
1362
- cursor: inherit;
1344
+ cursor: not-allowed;
1363
1345
  }
1364
1346
 
1365
1347
  &[aria-disabled='false'] {
@@ -1573,8 +1555,7 @@ const isListNode = (node) => {
1573
1555
  const ListButton = ({ block, format }) => {
1574
1556
  const { editor, disabled, blocks } = useBlocksEditorContext("ListButton");
1575
1557
  const isListActive = () => {
1576
- if (!editor.selection)
1577
- return false;
1558
+ if (!editor.selection) return false;
1578
1559
  const currentListEntry = slate.Editor.above(editor, {
1579
1560
  match: (node) => !slate.Editor.isEditor(node) && node.type === "list",
1580
1561
  at: editor.selection.anchor
@@ -1648,8 +1629,7 @@ const LinkButton = ({ disabled }) => {
1648
1629
  const { editor } = useBlocksEditorContext("LinkButton");
1649
1630
  const isLinkActive = () => {
1650
1631
  const { selection } = editor;
1651
- if (!selection)
1652
- return false;
1632
+ if (!selection) return false;
1653
1633
  const [match] = Array.from(
1654
1634
  slate.Editor.nodes(editor, {
1655
1635
  at: slate.Editor.unhangRange(editor, selection),
@@ -1713,7 +1693,7 @@ const BlocksToolbar = () => {
1713
1693
  return false;
1714
1694
  };
1715
1695
  const isButtonDisabled = checkButtonDisabled();
1716
- return /* @__PURE__ */ jsxRuntime.jsx(Toolbar__namespace.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarWrapper, { gap: 2, padding: 2, children: [
1696
+ return /* @__PURE__ */ jsxRuntime.jsx(Toolbar__namespace.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarWrapper, { gap: 2, padding: 2, width: "100%", children: [
1717
1697
  /* @__PURE__ */ jsxRuntime.jsx(BlocksDropdown, {}),
1718
1698
  /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
1719
1699
  /* @__PURE__ */ jsxRuntime.jsx(Toolbar__namespace.ToggleGroup, { type: "multiple", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
@@ -1787,30 +1767,32 @@ const DragIconButton = styledComponents.styled(designSystem.IconButton)`
1787
1767
  display: flex;
1788
1768
  align-items: center;
1789
1769
  justify-content: center;
1770
+ border: none;
1790
1771
  border-radius: ${({ theme }) => theme.borderRadius};
1791
- width: ${({ theme }) => theme.spaces[4]};
1792
- height: ${({ theme }) => theme.spaces[6]};
1772
+ padding-left: ${({ theme }) => theme.spaces[0]};
1773
+ padding-right: ${({ theme }) => theme.spaces[0]};
1774
+ padding-top: ${({ theme }) => theme.spaces[1]};
1775
+ padding-bottom: ${({ theme }) => theme.spaces[1]};
1793
1776
  visibility: hidden;
1794
1777
  cursor: grab;
1795
1778
  opacity: inherit;
1796
1779
  margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
1797
1780
 
1798
1781
  &:hover {
1799
- background: ${({ theme }) => theme.colors.neutral200};
1782
+ background: ${({ theme }) => theme.colors.neutral100};
1800
1783
  }
1801
1784
  &:active {
1802
1785
  cursor: grabbing;
1786
+ background: ${({ theme }) => theme.colors.neutral150};
1803
1787
  }
1804
1788
  &[aria-disabled='true'] {
1805
- cursor: not-allowed;
1806
- background: transparent;
1789
+ visibility: hidden;
1807
1790
  }
1808
1791
  svg {
1809
- height: auto;
1810
1792
  min-width: ${({ theme }) => theme.spaces[3]};
1811
1793
 
1812
1794
  path {
1813
- fill: ${({ theme }) => theme.colors.neutral700};
1795
+ fill: ${({ theme }) => theme.colors.neutral500};
1814
1796
  }
1815
1797
  }
1816
1798
  `;
@@ -1855,8 +1837,7 @@ const DragAndDropElement = ({
1855
1837
  displayedValue: children
1856
1838
  },
1857
1839
  onDropItem(currentIndex, newIndex) {
1858
- if (newIndex)
1859
- handleMoveBlock(newIndex, currentIndex);
1840
+ if (newIndex) handleMoveBlock(newIndex, currentIndex);
1860
1841
  }
1861
1842
  });
1862
1843
  const composedBoxRefs = designSystem.useComposedRefs(blockRef, dropRef);
@@ -1962,7 +1943,7 @@ const baseRenderLeaf = (props, modifiers2) => {
1962
1943
  }
1963
1944
  return currentChildren;
1964
1945
  }, props.children);
1965
- return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props.attributes, children: wrappedChildren });
1946
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props.attributes, className: props.leaf.className, children: wrappedChildren });
1966
1947
  };
1967
1948
  const baseRenderElement = ({
1968
1949
  props,
@@ -2000,8 +1981,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
2000
1981
  [modifiers2]
2001
1982
  );
2002
1983
  const handleMoveBlocks = (editor2, event) => {
2003
- if (!editor2.selection)
2004
- return;
1984
+ if (!editor2.selection) return;
2005
1985
  const start = slate.Range.start(editor2.selection);
2006
1986
  const currentIndex = [start.path[0]];
2007
1987
  let newIndexPosition = 0;
@@ -2138,8 +2118,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
2138
2118
  }
2139
2119
  };
2140
2120
  const handleScrollSelectionIntoView = () => {
2141
- if (!editor.selection)
2142
- return;
2121
+ if (!editor.selection) return;
2143
2122
  const domRange = slateReact.ReactEditor.toDOMRange(editor, editor.selection);
2144
2123
  const domRect = domRange.getBoundingClientRect();
2145
2124
  const blocksInput = blocksRef.current;
@@ -2166,7 +2145,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
2166
2145
  background: "neutral0",
2167
2146
  color: "neutral800",
2168
2147
  lineHeight: 6,
2169
- paddingRight: 4,
2148
+ paddingRight: 7,
2170
2149
  paddingTop: 6,
2171
2150
  paddingBottom: 3,
2172
2151
  children: [
@@ -2177,6 +2156,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
2177
2156
  readOnly: disabled,
2178
2157
  placeholder,
2179
2158
  isExpandedMode,
2159
+ decorate: decorateCode,
2180
2160
  renderElement,
2181
2161
  renderLeaf,
2182
2162
  onKeyDown: handleKeyDown,
@@ -2333,8 +2313,7 @@ const InlineCode = styledComponents.styled.code`
2333
2313
  `;
2334
2314
  const baseCheckIsActive = (editor, name2) => {
2335
2315
  const marks = slate.Editor.marks(editor);
2336
- if (!marks)
2337
- return false;
2316
+ if (!marks) return false;
2338
2317
  return Boolean(marks[name2]);
2339
2318
  };
2340
2319
  const baseHandleToggle = (editor, name2) => {
@@ -2500,6 +2479,7 @@ const ExpandIconButton = styledComponents.styled(designSystem.IconButton)`
2500
2479
  position: absolute;
2501
2480
  bottom: 1.2rem;
2502
2481
  right: 1.2rem;
2482
+ box-shadow: ${({ theme }) => theme.shadows.filterShadow};
2503
2483
  `;
2504
2484
  function useResetKey(value) {
2505
2485
  const slateUpdatesCount = React__namespace.useRef(0);
@@ -2631,26 +2611,6 @@ const BlocksInput = React__namespace.forwardRef(
2631
2611
  }
2632
2612
  );
2633
2613
  const MemoizedBlocksInput = React__namespace.memo(BlocksInput);
2634
- const createDefaultForm = (contentType, components = {}) => {
2635
- const traverseSchema = (attributes) => {
2636
- return Object.entries(attributes).reduce((acc, [key, attribute]) => {
2637
- if ("default" in attribute) {
2638
- acc[key] = attribute.default;
2639
- } else if (attribute.type === "component" && attribute.required) {
2640
- const defaultComponentForm = traverseSchema(components[attribute.component].attributes);
2641
- if (attribute.repeatable) {
2642
- acc[key] = attribute.min ? [...Array(attribute.min).fill(defaultComponentForm)] : [];
2643
- } else {
2644
- acc[key] = defaultComponentForm;
2645
- }
2646
- } else if (attribute.type === "dynamiczone" && attribute.required) {
2647
- acc[key] = [];
2648
- }
2649
- return acc;
2650
- }, {});
2651
- };
2652
- return traverseSchema(contentType.attributes);
2653
- };
2654
2614
  const Initializer = ({ disabled, name: name2, onClick }) => {
2655
2615
  const { formatMessage } = reactIntl.useIntl();
2656
2616
  const field = strapiAdmin.useField(name2);
@@ -2658,7 +2618,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
2658
2618
  designSystem.Box,
2659
2619
  {
2660
2620
  tag: "button",
2661
- background: "neutral100",
2621
+ background: disabled ? "neutral150" : "neutral100",
2662
2622
  borderColor: field.error ? "danger600" : "neutral200",
2663
2623
  hasRadius: true,
2664
2624
  disabled,
@@ -2666,644 +2626,638 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
2666
2626
  paddingTop: 9,
2667
2627
  paddingBottom: 9,
2668
2628
  type: "button",
2629
+ style: { cursor: disabled ? "not-allowed" : "pointer" },
2669
2630
  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
2670
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CircleIcon, {}) }),
2671
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "primary600", variant: "pi", fontWeight: "bold", children: formatMessage({
2672
- id: index.getTranslation("components.empty-repeatable"),
2673
- defaultMessage: "No entry yet. Click to add one."
2674
- }) }) })
2631
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", color: disabled ? "neutral500" : "primary600", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.PlusCircle, { width: "3.2rem", height: "3.2rem" }) }),
2632
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
2633
+ designSystem.Typography,
2634
+ {
2635
+ textColor: disabled ? "neutral600" : "primary600",
2636
+ variant: "pi",
2637
+ fontWeight: "bold",
2638
+ children: formatMessage({
2639
+ id: index.getTranslation("components.empty-repeatable"),
2640
+ defaultMessage: "No entry yet. Click to add one."
2641
+ })
2642
+ }
2643
+ ) })
2675
2644
  ] })
2676
2645
  }
2677
2646
  ) });
2678
2647
  };
2679
- const CircleIcon = styledComponents.styled(Icons.PlusCircle)`
2680
- width: 2.4rem;
2681
- height: 2.4rem;
2648
+ const AddComponentButton = ({
2649
+ hasError,
2650
+ isDisabled,
2651
+ isOpen,
2652
+ children,
2653
+ onClick
2654
+ }) => {
2655
+ return /* @__PURE__ */ jsxRuntime.jsx(
2656
+ StyledButton,
2657
+ {
2658
+ type: "button",
2659
+ onClick,
2660
+ disabled: isDisabled,
2661
+ background: "neutral0",
2662
+ style: { cursor: isDisabled ? "not-allowed" : "pointer" },
2663
+ variant: "tertiary",
2664
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "span", gap: 2, children: [
2665
+ /* @__PURE__ */ jsxRuntime.jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
2666
+ /* @__PURE__ */ jsxRuntime.jsx(
2667
+ designSystem.Typography,
2668
+ {
2669
+ variant: "pi",
2670
+ fontWeight: "bold",
2671
+ textColor: hasError && !isOpen ? "danger600" : "neutral600",
2672
+ children
2673
+ }
2674
+ )
2675
+ ] })
2676
+ }
2677
+ );
2678
+ };
2679
+ const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
2680
+ height: ${({ theme }) => theme.spaces[6]};
2681
+ width: ${({ theme }) => theme.spaces[6]};
2682
+ transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
2683
+
2682
2684
  > circle {
2683
- fill: ${({ theme }) => theme.colors.primary200};
2685
+ fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
2684
2686
  }
2685
2687
  > path {
2686
- fill: ${({ theme }) => theme.colors.primary600};
2688
+ fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral500};
2687
2689
  }
2688
2690
  `;
2689
- const NonRepeatableComponent = ({
2690
- attribute,
2691
- name: name2,
2692
- children,
2693
- layout
2691
+ const StyledButton = styledComponents.styled(designSystem.Button)`
2692
+ padding-left: ${({ theme }) => theme.spaces[3]};
2693
+ border-radius: 26px;
2694
+ box-shadow: ${({ theme }) => theme.shadows.filterShadow};
2695
+ height: 5rem;
2696
+ `;
2697
+ const ComponentCategory = ({
2698
+ category,
2699
+ components = [],
2700
+ variant = "primary",
2701
+ onAddComponent
2694
2702
  }) => {
2695
2703
  const { formatMessage } = reactIntl.useIntl();
2696
- const { value } = strapiAdmin.useField(name2);
2697
- const level = Relations.useComponent("NonRepeatableComponent", (state) => state.level);
2698
- const isNested = level > 0;
2699
- return /* @__PURE__ */ jsxRuntime.jsx(Relations.ComponentProvider, { id: value?.id, uid: attribute.component, level: level + 1, type: "component", children: /* @__PURE__ */ jsxRuntime.jsx(
2704
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: category, children: [
2705
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { variant, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
2706
+ /* @__PURE__ */ jsxRuntime.jsx(ResponsiveAccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
2707
+ ComponentBox,
2708
+ {
2709
+ tag: "button",
2710
+ type: "button",
2711
+ background: "neutral100",
2712
+ justifyContent: "center",
2713
+ onClick: onAddComponent(uid),
2714
+ hasRadius: true,
2715
+ height: "8.4rem",
2716
+ shrink: 0,
2717
+ borderColor: "neutral200",
2718
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
2719
+ /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { color: "currentColor", background: "primary200", icon }),
2720
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: displayName })
2721
+ ] })
2722
+ },
2723
+ uid
2724
+ )) }) })
2725
+ ] });
2726
+ };
2727
+ const ResponsiveAccordionContent = styledComponents.styled(designSystem.Accordion.Content)`
2728
+ container-type: inline-size;
2729
+ `;
2730
+ const Grid = styledComponents.styled(designSystem.Box)`
2731
+ display: grid;
2732
+ grid-template-columns: repeat(auto-fill, 100%);
2733
+ grid-gap: ${({ theme }) => theme.spaces[1]};
2734
+
2735
+ @container (min-width: ${() => RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
2736
+ grid-template-columns: repeat(auto-fill, 14rem);
2737
+ }
2738
+ `;
2739
+ const ComponentBox = styledComponents.styled(designSystem.Flex)`
2740
+ color: ${({ theme }) => theme.colors.neutral600};
2741
+ cursor: pointer;
2742
+
2743
+ @media (prefers-reduced-motion: no-preference) {
2744
+ transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
2745
+ }
2746
+
2747
+ &:focus,
2748
+ &:hover {
2749
+ border: 1px solid ${({ theme }) => theme.colors.primary200};
2750
+ background: ${({ theme }) => theme.colors.primary100};
2751
+ color: ${({ theme }) => theme.colors.primary600};
2752
+ }
2753
+ `;
2754
+ const ComponentPicker = ({
2755
+ dynamicComponentsByCategory = {},
2756
+ isOpen,
2757
+ onClickAddComponent
2758
+ }) => {
2759
+ const { formatMessage } = reactIntl.useIntl();
2760
+ const handleAddComponentToDz = (componentUid) => () => {
2761
+ onClickAddComponent(componentUid);
2762
+ };
2763
+ if (!isOpen) {
2764
+ return null;
2765
+ }
2766
+ return /* @__PURE__ */ jsxRuntime.jsxs(
2700
2767
  designSystem.Box,
2701
2768
  {
2702
- background: "neutral100",
2703
- paddingLeft: 6,
2704
- paddingRight: 6,
2705
2769
  paddingTop: 6,
2706
2770
  paddingBottom: 6,
2707
- hasRadius: isNested,
2708
- borderColor: isNested ? "neutral200" : void 0,
2709
- children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index2) => {
2710
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
2711
- const completeFieldName = `${name2}.${field.name}`;
2712
- const translatedLabel = formatMessage({
2713
- id: `content-manager.components.${attribute.component}.${field.name}`,
2714
- defaultMessage: field.label
2715
- });
2716
- return /* @__PURE__ */ jsxRuntime.jsx(
2717
- designSystem.Grid.Item,
2718
- {
2719
- col: size,
2720
- s: 12,
2721
- xs: 12,
2722
- direction: "column",
2723
- alignItems: "stretch",
2724
- children: children({ ...field, label: translatedLabel, name: completeFieldName })
2725
- },
2726
- completeFieldName
2727
- );
2728
- }) }, index2);
2729
- }) })
2771
+ paddingLeft: 5,
2772
+ paddingRight: 5,
2773
+ background: "neutral0",
2774
+ shadow: "tableShadow",
2775
+ borderColor: "neutral150",
2776
+ hasRadius: true,
2777
+ children: [
2778
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral600", children: formatMessage({
2779
+ id: index.getTranslation("components.DynamicZone.ComponentPicker-label"),
2780
+ defaultMessage: "Pick one component"
2781
+ }) }) }),
2782
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { defaultValue: Object.keys(dynamicComponentsByCategory)[0], children: Object.entries(dynamicComponentsByCategory).map(([category, components], index2) => /* @__PURE__ */ jsxRuntime.jsx(
2783
+ ComponentCategory,
2784
+ {
2785
+ category,
2786
+ components,
2787
+ onAddComponent: handleAddComponentToDz,
2788
+ variant: index2 % 2 === 1 ? "primary" : "secondary"
2789
+ },
2790
+ category
2791
+ )) }) })
2792
+ ]
2730
2793
  }
2731
- ) });
2794
+ );
2732
2795
  };
2733
- const RepeatableComponent = ({
2734
- attribute,
2796
+ const DynamicComponent = ({
2797
+ componentUid,
2735
2798
  disabled,
2799
+ index: index$1,
2736
2800
  name: name2,
2737
- mainField,
2738
- children,
2739
- layout
2801
+ onRemoveComponentClick,
2802
+ onMoveComponent,
2803
+ onGrabItem,
2804
+ onDropItem,
2805
+ onCancel,
2806
+ dynamicComponentsByCategory = {},
2807
+ onAddComponent,
2808
+ children
2740
2809
  }) => {
2741
- const { toggleNotification } = strapiAdmin.useNotification();
2742
2810
  const { formatMessage } = reactIntl.useIntl();
2743
- const { search: searchString } = reactRouterDom.useLocation();
2744
- const search = React__namespace.useMemo(() => new URLSearchParams(searchString), [searchString]);
2745
- const { components } = index.useDoc();
2811
+ const formValues = strapiAdmin.useForm("DynamicComponent", (state) => state.values);
2746
2812
  const {
2747
- value = [],
2748
- error,
2749
- rawError
2750
- } = strapiAdmin.useField(name2);
2751
- const addFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.addFieldRow);
2752
- const moveFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.moveFieldRow);
2753
- const removeFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.removeFieldRow);
2754
- const { max = Infinity } = attribute;
2755
- const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
2756
- const [liveText, setLiveText] = React__namespace.useState("");
2757
- React__namespace.useEffect(() => {
2758
- const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;
2759
- const hasNestedValue = value && Array.isArray(value) && value.length > 0;
2760
- if (hasNestedErrors && hasNestedValue) {
2761
- const errorOpenItems = rawError.map((_, idx) => {
2762
- return value[idx] ? value[idx].__temp_key__ : null;
2763
- }).filter((value2) => !!value2);
2764
- if (errorOpenItems && errorOpenItems.length > 0) {
2765
- setCollapseToOpen((collapseToOpen2) => {
2766
- if (!errorOpenItems.includes(collapseToOpen2)) {
2767
- return errorOpenItems[0];
2768
- }
2769
- return collapseToOpen2;
2770
- });
2771
- }
2772
- }
2773
- }, [rawError, value]);
2774
- const componentTmpKeyWithFocussedField = React__namespace.useMemo(() => {
2775
- if (search.has("field")) {
2776
- const fieldParam = search.get("field");
2777
- if (!fieldParam) {
2778
- return void 0;
2779
- }
2780
- const [, path] = fieldParam.split(`${name2}.`);
2781
- if (objects.getIn(value, path, void 0) !== void 0) {
2782
- const [subpath] = path.split(".");
2783
- return objects.getIn(value, subpath, void 0)?.__temp_key__;
2784
- }
2785
- }
2786
- return void 0;
2787
- }, [search, name2, value]);
2788
- const prevValue = useDebounce.usePrev(value);
2789
- React__namespace.useEffect(() => {
2790
- if (prevValue && prevValue.length < value.length) {
2791
- setCollapseToOpen(value[value.length - 1].__temp_key__);
2792
- }
2793
- }, [value, prevValue]);
2794
- React__namespace.useEffect(() => {
2795
- if (typeof componentTmpKeyWithFocussedField === "string") {
2796
- setCollapseToOpen(componentTmpKeyWithFocussedField);
2797
- }
2798
- }, [componentTmpKeyWithFocussedField]);
2799
- const toggleCollapses = () => {
2800
- setCollapseToOpen("");
2801
- };
2802
- const handleClick = () => {
2803
- if (value.length < max) {
2804
- const schema = components[attribute.component];
2805
- const form = createDefaultForm(schema, components);
2806
- const data = transformDocument(schema, components)(form);
2807
- addFieldRow(name2, data);
2808
- } else if (value.length >= max) {
2809
- toggleNotification({
2810
- type: "info",
2811
- message: formatMessage({
2812
- id: index.getTranslation("components.notification.info.maximum-requirement")
2813
- })
2814
- });
2815
- }
2816
- };
2817
- const handleMoveComponentField = (newIndex, currentIndex) => {
2818
- setLiveText(
2819
- formatMessage(
2820
- {
2821
- id: index.getTranslation("dnd.reorder"),
2822
- defaultMessage: "{item}, moved. New position in list: {position}."
2823
- },
2824
- {
2825
- item: `${name2}.${currentIndex}`,
2826
- position: getItemPos(newIndex)
2827
- }
2828
- )
2829
- );
2830
- moveFieldRow(name2, currentIndex, newIndex);
2831
- };
2832
- const handleValueChange = (key) => {
2833
- setCollapseToOpen(key);
2834
- };
2835
- const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
2836
- const handleCancel = (index$1) => {
2837
- setLiveText(
2838
- formatMessage(
2839
- {
2840
- id: index.getTranslation("dnd.cancel-item"),
2841
- defaultMessage: "{item}, dropped. Re-order cancelled."
2842
- },
2843
- {
2844
- item: `${name2}.${index$1}`
2845
- }
2846
- )
2847
- );
2848
- };
2849
- const handleGrabItem = (index$1) => {
2850
- setLiveText(
2851
- formatMessage(
2852
- {
2853
- id: index.getTranslation("dnd.grab-item"),
2854
- defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
2855
- },
2856
- {
2857
- item: `${name2}.${index$1}`,
2858
- position: getItemPos(index$1)
2859
- }
2860
- )
2861
- );
2862
- };
2863
- const handleDropItem = (index$1) => {
2864
- setLiveText(
2865
- formatMessage(
2866
- {
2867
- id: index.getTranslation("dnd.drop-item"),
2868
- defaultMessage: `{item}, dropped. Final position in list: {position}.`
2869
- },
2870
- {
2871
- item: `${name2}.${index$1}`,
2872
- position: getItemPos(index$1)
2873
- }
2874
- )
2875
- );
2876
- };
2877
- const ariaDescriptionId = React__namespace.useId();
2878
- const level = Relations.useComponent("RepeatableComponent", (state) => state.level);
2879
- if (value.length === 0) {
2880
- return /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleClick });
2881
- }
2882
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { hasRadius: true, children: [
2883
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
2884
- id: index.getTranslation("dnd.instructions"),
2885
- defaultMessage: `Press spacebar to grab and re-order`
2886
- }) }),
2887
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
2888
- /* @__PURE__ */ jsxRuntime.jsxs(
2889
- AccordionRoot,
2890
- {
2891
- $error: error,
2892
- value: collapseToOpen,
2893
- onValueChange: handleValueChange,
2894
- "aria-describedby": ariaDescriptionId,
2895
- children: [
2896
- value.map(({ __temp_key__: key, id }, index2) => {
2897
- const nameWithIndex = `${name2}.${index2}`;
2898
- return /* @__PURE__ */ jsxRuntime.jsx(
2899
- Relations.ComponentProvider,
2900
- {
2901
- id,
2902
- uid: attribute.component,
2903
- level: level + 1,
2904
- type: "repeatable",
2905
- children: /* @__PURE__ */ jsxRuntime.jsx(
2906
- Component,
2907
- {
2908
- disabled,
2909
- name: nameWithIndex,
2910
- attribute,
2911
- index: index2,
2912
- mainField,
2913
- onMoveItem: handleMoveComponentField,
2914
- onDeleteComponent: () => {
2915
- removeFieldRow(name2, index2);
2916
- toggleCollapses();
2917
- },
2918
- toggleCollapses,
2919
- onCancel: handleCancel,
2920
- onDropItem: handleDropItem,
2921
- onGrabItem: handleGrabItem,
2922
- __temp_key__: key,
2923
- children: layout.map((row, index22) => {
2924
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
2925
- const completeFieldName = `${nameWithIndex}.${field.name}`;
2926
- const translatedLabel = formatMessage({
2927
- id: `content-manager.components.${attribute.component}.${field.name}`,
2928
- defaultMessage: field.label
2929
- });
2930
- return /* @__PURE__ */ jsxRuntime.jsx(
2931
- designSystem.Grid.Item,
2932
- {
2933
- col: size,
2934
- s: 12,
2935
- xs: 12,
2936
- direction: "column",
2937
- alignItems: "stretch",
2938
- children: children({
2939
- ...field,
2940
- label: translatedLabel,
2941
- name: completeFieldName
2942
- })
2943
- },
2944
- completeFieldName
2945
- );
2946
- }) }, index22);
2947
- })
2948
- }
2949
- )
2950
- },
2951
- key
2952
- );
2953
- }),
2954
- /* @__PURE__ */ jsxRuntime.jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
2955
- id: index.getTranslation("containers.EditView.add.new-entry"),
2956
- defaultMessage: "Add an entry"
2957
- }) })
2958
- ]
2959
- }
2960
- )
2961
- ] });
2962
- };
2963
- const AccordionRoot = styledComponents.styled(designSystem.Accordion.Root)`
2964
- border: 1px solid
2965
- ${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
2966
- `;
2967
- const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
2968
- width: 100%;
2969
- display: flex;
2970
- justify-content: center;
2971
- border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
2972
- padding-inline: ${(props) => props.theme.spaces[6]};
2973
- padding-block: ${(props) => props.theme.spaces[3]};
2974
-
2975
- &:not([disabled]) {
2976
- cursor: pointer;
2977
-
2978
- &:hover {
2979
- background-color: ${(props) => props.theme.colors.primary100};
2980
- }
2981
- }
2982
-
2983
- span {
2984
- font-weight: 600;
2985
- font-size: 1.4rem;
2986
- line-height: 2.4rem;
2987
- }
2988
-
2989
- @media (prefers-reduced-motion: no-preference) {
2990
- transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
2991
- }
2992
- `;
2993
- const Component = ({
2994
- disabled,
2995
- index: index$1,
2996
- name: name2,
2997
- mainField = {
2998
- name: "id",
2999
- type: "integer"
3000
- },
3001
- children,
3002
- onDeleteComponent,
3003
- toggleCollapses,
3004
- __temp_key__,
3005
- ...dragProps
3006
- }) => {
3007
- const { formatMessage } = reactIntl.useIntl();
3008
- const displayValue = strapiAdmin.useForm("RepeatableComponent", (state) => {
3009
- return objects.getIn(state.values, [...name2.split("."), mainField.name]);
3010
- });
3011
- const accordionRef = React__namespace.useRef(null);
3012
- const componentKey = name2.split(".").slice(0, -1).join(".");
2813
+ edit: { components }
2814
+ } = index.useDocLayout();
2815
+ const title = React__namespace.useMemo(() => {
2816
+ const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
2817
+ const mainFieldValue = objects.getIn(formValues, `${name2}.${index$1}.${mainField}`);
2818
+ const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
2819
+ const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
2820
+ return mainValue;
2821
+ }, [componentUid, components, formValues, name2, index$1]);
2822
+ const { icon, displayName } = React__namespace.useMemo(() => {
2823
+ const [category] = componentUid.split(".");
2824
+ const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
2825
+ (component) => component.uid === componentUid
2826
+ ) ?? { icon: null, displayName: null };
2827
+ return { icon: icon2, displayName: displayName2 };
2828
+ }, [componentUid, dynamicComponentsByCategory]);
3013
2829
  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
3014
- type: `${useDragAndDrop.ItemTypes.COMPONENT}_${componentKey}`,
2830
+ type: `${useDragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name2}`,
3015
2831
  index: index$1,
3016
2832
  item: {
3017
2833
  index: index$1,
3018
- displayedValue: displayValue
3019
- },
3020
- onStart() {
3021
- toggleCollapses();
2834
+ displayedValue: `${displayName} ${title}`,
2835
+ icon
3022
2836
  },
3023
- ...dragProps
2837
+ onMoveItem: onMoveComponent,
2838
+ onDropItem,
2839
+ onGrabItem,
2840
+ onCancel
3024
2841
  });
3025
2842
  React__namespace.useEffect(() => {
3026
2843
  dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
3027
2844
  }, [dragPreviewRef, index$1]);
3028
- const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
3029
- const composedBoxRefs = designSystem.useComposedRefs(
3030
- boxRef,
3031
- dropRef
3032
- );
3033
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
3034
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
3035
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: displayValue }),
3036
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Actions, { children: [
3037
- /* @__PURE__ */ jsxRuntime.jsx(
3038
- designSystem.IconButton,
2845
+ const accordionValue = React__namespace.useId();
2846
+ const { value = [], rawError } = strapiAdmin.useField(`${name2}.${index$1}`);
2847
+ const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
2848
+ React__namespace.useEffect(() => {
2849
+ if (rawError && value) {
2850
+ setCollapseToOpen(accordionValue);
2851
+ }
2852
+ }, [rawError, value, accordionValue]);
2853
+ const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
2854
+ const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2855
+ /* @__PURE__ */ jsxRuntime.jsx(
2856
+ designSystem.IconButton,
2857
+ {
2858
+ variant: "ghost",
2859
+ label: formatMessage(
3039
2860
  {
3040
- variant: "ghost",
3041
- onClick: onDeleteComponent,
3042
- label: formatMessage({
3043
- id: index.getTranslation("containers.Edit.delete"),
3044
- defaultMessage: "Delete"
3045
- }),
3046
- children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
3047
- }
2861
+ id: index.getTranslation("components.DynamicZone.delete-label"),
2862
+ defaultMessage: "Delete {name}"
2863
+ },
2864
+ { name: title }
3048
2865
  ),
3049
- /* @__PURE__ */ jsxRuntime.jsx(
3050
- designSystem.IconButton,
3051
- {
3052
- ref: composedAccordionRefs,
3053
- variant: "ghost",
3054
- onClick: (e) => e.stopPropagation(),
3055
- "data-handler-id": handlerId,
3056
- label: formatMessage({
3057
- id: index.getTranslation("components.DragHandle-label"),
3058
- defaultMessage: "Drag"
3059
- }),
3060
- onKeyDown: handleKeyDown,
3061
- children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
3062
- }
3063
- )
3064
- ] })
3065
- ] }),
3066
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
3067
- designSystem.Flex,
2866
+ onClick: onRemoveComponentClick,
2867
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
2868
+ }
2869
+ ),
2870
+ /* @__PURE__ */ jsxRuntime.jsx(
2871
+ designSystem.IconButton,
3068
2872
  {
3069
- direction: "column",
3070
- alignItems: "stretch",
3071
- background: "neutral100",
3072
- padding: 6,
3073
- gap: 6,
3074
- children
2873
+ variant: "ghost",
2874
+ onClick: (e) => e.stopPropagation(),
2875
+ "data-handler-id": handlerId,
2876
+ ref: dragRef,
2877
+ label: formatMessage({
2878
+ id: index.getTranslation("components.DragHandle-label"),
2879
+ defaultMessage: "Drag"
2880
+ }),
2881
+ onKeyDown: handleKeyDown,
2882
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
3075
2883
  }
3076
- ) })
3077
- ] }) });
3078
- };
3079
- const Preview$1 = () => {
3080
- return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
3081
- };
3082
- const StyledSpan = styledComponents.styled(designSystem.Box)`
3083
- display: block;
3084
- outline: 1px dashed ${({ theme }) => theme.colors.primary500};
3085
- outline-offset: -1px;
3086
- `;
3087
- const ComponentInput = ({
3088
- label,
3089
- required,
3090
- name: name2,
3091
- attribute,
3092
- disabled,
3093
- labelAction,
3094
- ...props
3095
- }) => {
3096
- const { formatMessage } = reactIntl.useIntl();
3097
- const field = strapiAdmin.useField(name2);
3098
- const showResetComponent = !attribute.repeatable && field.value && !disabled;
3099
- const { components } = index.useDoc();
3100
- const handleInitialisationClick = () => {
3101
- const schema = components[attribute.component];
3102
- const form = createDefaultForm(schema, components);
3103
- const data = transformDocument(schema, components)(form);
3104
- field.onChange(name2, data);
3105
- };
3106
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, required, children: [
3107
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
3108
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { action: labelAction, children: [
3109
- label,
3110
- attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3111
- " (",
3112
- Array.isArray(field.value) ? field.value.length : 0,
3113
- ")"
3114
- ] })
3115
- ] }),
3116
- showResetComponent && /* @__PURE__ */ jsxRuntime.jsx(
2884
+ ),
2885
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
2886
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 0, paddingRight: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
3117
2887
  designSystem.IconButton,
3118
2888
  {
2889
+ variant: "ghost",
3119
2890
  label: formatMessage({
3120
- id: index.getTranslation("components.reset-entry"),
3121
- defaultMessage: "Reset Entry"
2891
+ id: index.getTranslation("components.DynamicZone.more-actions"),
2892
+ defaultMessage: "More actions"
3122
2893
  }),
3123
- variant: "ghost",
3124
- onClick: () => {
3125
- field.onChange(name2, null);
3126
- },
3127
- children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
2894
+ tag: "span",
2895
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false })
3128
2896
  }
3129
- )
3130
- ] }),
3131
- !attribute.repeatable && !field.value && /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
3132
- !attribute.repeatable && field.value ? /* @__PURE__ */ jsxRuntime.jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
3133
- attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
3134
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
2897
+ ) }),
2898
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Content, { children: [
2899
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
2900
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
2901
+ id: index.getTranslation("components.DynamicZone.add-item-above"),
2902
+ defaultMessage: "Add component above"
2903
+ }) }),
2904
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
2905
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
2906
+ components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1), children: displayName2 }, componentUid))
2907
+ ] }, category)) })
2908
+ ] }),
2909
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
2910
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
2911
+ id: index.getTranslation("components.DynamicZone.add-item-below"),
2912
+ defaultMessage: "Add component below"
2913
+ }) }),
2914
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
2915
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
2916
+ components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1 + 1), children: displayName2 }, componentUid))
2917
+ ] }, category)) })
2918
+ ] })
2919
+ ] })
2920
+ ] })
2921
+ ] });
2922
+ const accordionTitle = title ? `${displayName} ${title}` : displayName;
2923
+ return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
2924
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Rectangle, { background: "neutral200" }) }),
2925
+ /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { value: collapseToOpen, onValueChange: setCollapseToOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: accordionValue, children: [
2926
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
2927
+ /* @__PURE__ */ jsxRuntime.jsx(
2928
+ designSystem.Accordion.Trigger,
2929
+ {
2930
+ icon: icon && ComponentIcon.COMPONENT_ICONS[icon] ? ComponentIcon.COMPONENT_ICONS[icon] : ComponentIcon.COMPONENT_ICONS.dashboard,
2931
+ children: accordionTitle
2932
+ }
2933
+ ),
2934
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Actions, { children: accordionActions })
2935
+ ] }),
2936
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(
2937
+ designSystem.Grid.Item,
2938
+ {
2939
+ col: 12,
2940
+ s: 12,
2941
+ xs: 12,
2942
+ direction: "column",
2943
+ alignItems: "stretch",
2944
+ children: /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
2945
+ const fieldName = `${name2}.${index$1}.${field.name}`;
2946
+ const fieldWithTranslatedLabel = {
2947
+ ...field,
2948
+ label: formatMessage({
2949
+ id: `content-manager.components.${componentUid}.${field.name}`,
2950
+ defaultMessage: field.label
2951
+ })
2952
+ };
2953
+ return /* @__PURE__ */ jsxRuntime.jsx(
2954
+ ResponsiveGridItem,
2955
+ {
2956
+ col: size,
2957
+ s: 12,
2958
+ xs: 12,
2959
+ direction: "column",
2960
+ alignItems: "stretch",
2961
+ children: children ? children({ ...fieldWithTranslatedLabel, name: fieldName }) : /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
2962
+ },
2963
+ fieldName
2964
+ );
2965
+ }) })
2966
+ },
2967
+ rowInd
2968
+ )) }) }) }) })
2969
+ ] }) }) })
3135
2970
  ] });
3136
2971
  };
3137
- const MemoizedComponentInput = React__namespace.memo(ComponentInput);
3138
- const AddComponentButton = ({
3139
- hasError,
3140
- isDisabled,
3141
- isOpen,
3142
- children,
3143
- onClick
2972
+ const StyledBox = styledComponents.styled(designSystem.Box)`
2973
+ > div:first-child {
2974
+ box-shadow: ${({ theme }) => theme.shadows.tableShadow};
2975
+ }
2976
+ `;
2977
+ const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
2978
+ border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
2979
+ `;
2980
+ const Rectangle = styledComponents.styled(designSystem.Box)`
2981
+ width: ${({ theme }) => theme.spaces[2]};
2982
+ height: ${({ theme }) => theme.spaces[4]};
2983
+ `;
2984
+ const Preview$1 = styledComponents.styled.span`
2985
+ display: block;
2986
+ background-color: ${({ theme }) => theme.colors.primary100};
2987
+ outline: 1px dashed ${({ theme }) => theme.colors.primary500};
2988
+ outline-offset: -1px;
2989
+ padding: ${({ theme }) => theme.spaces[6]};
2990
+ `;
2991
+ const ComponentContainer = styledComponents.styled(designSystem.Box)`
2992
+ list-style: none;
2993
+ padding: 0;
2994
+ margin: 0;
2995
+ `;
2996
+ const DynamicZoneLabel = ({
2997
+ hint,
2998
+ label,
2999
+ labelAction,
3000
+ name: name2,
3001
+ numberOfComponents = 0,
3002
+ required
3144
3003
  }) => {
3145
- return /* @__PURE__ */ jsxRuntime.jsx(
3146
- StyledButton,
3004
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
3005
+ designSystem.Box,
3147
3006
  {
3148
- type: "button",
3149
- onClick,
3150
- disabled: isDisabled,
3007
+ paddingTop: 3,
3008
+ paddingBottom: 3,
3009
+ paddingRight: 4,
3010
+ paddingLeft: 4,
3011
+ borderRadius: "26px",
3151
3012
  background: "neutral0",
3152
- style: { cursor: isDisabled ? "not-allowed" : "pointer" },
3153
- variant: "tertiary",
3154
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "span", gap: 2, children: [
3155
- /* @__PURE__ */ jsxRuntime.jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
3156
- /* @__PURE__ */ jsxRuntime.jsx(
3157
- AddComponentTitle,
3158
- {
3159
- variant: "pi",
3160
- fontWeight: "bold",
3161
- textColor: hasError && !isOpen ? "danger600" : "neutral500",
3162
- children
3163
- }
3164
- )
3013
+ shadow: "filterShadow",
3014
+ color: "neutral500",
3015
+ children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", justifyContent: "center", children: [
3016
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { maxWidth: "35.6rem", children: [
3017
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
3018
+ label || name2,
3019
+ " "
3020
+ ] }),
3021
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
3022
+ "(",
3023
+ numberOfComponents,
3024
+ ")"
3025
+ ] }),
3026
+ required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: "*" }),
3027
+ labelAction && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 1, children: labelAction })
3028
+ ] }),
3029
+ hint && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, maxWidth: "35.6rem", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: hint }) })
3165
3030
  ] })
3166
3031
  }
3167
- );
3032
+ ) });
3168
3033
  };
3169
- const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
3170
- height: ${({ theme }) => theme.spaces[6]};
3171
- width: ${({ theme }) => theme.spaces[6]};
3172
- transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
3173
-
3174
- > circle {
3175
- fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
3176
- }
3177
- > path {
3178
- fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
3034
+ const [DynamicZoneProvider, useDynamicZone] = strapiAdmin.createContext(
3035
+ "DynamicZone",
3036
+ {
3037
+ isInDynamicZone: false
3179
3038
  }
3180
- `;
3181
- const AddComponentTitle = styledComponents.styled(designSystem.Typography)``;
3182
- const StyledButton = styledComponents.styled(designSystem.Button)`
3183
- border-radius: 26px;
3184
- border-color: ${({ theme }) => theme.colors.neutral150};
3185
- box-shadow: ${({ theme }) => theme.shadows.filterShadow};
3186
- height: 5rem;
3187
-
3188
- &:hover {
3189
- ${AddComponentTitle} {
3190
- color: ${({ theme }) => theme.colors.primary600};
3191
- }
3192
-
3193
- ${StyledAddIcon} {
3194
- > circle {
3195
- fill: ${({ theme }) => theme.colors.primary600};
3196
- }
3197
- > path {
3198
- fill: ${({ theme }) => theme.colors.primary600};
3039
+ );
3040
+ const DynamicZone = ({
3041
+ attribute,
3042
+ disabled: disabledProp,
3043
+ hint,
3044
+ label,
3045
+ labelAction,
3046
+ name: name2,
3047
+ required = false,
3048
+ children
3049
+ }) => {
3050
+ const { max = Infinity, min = -Infinity } = attribute ?? {};
3051
+ const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
3052
+ const [liveText, setLiveText] = React__namespace.useState("");
3053
+ const { components, isLoading } = index.useDoc();
3054
+ const disabled = disabledProp || isLoading;
3055
+ const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm(
3056
+ "DynamicZone",
3057
+ ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
3058
+ addFieldRow: addFieldRow2,
3059
+ removeFieldRow: removeFieldRow2,
3060
+ moveFieldRow: moveFieldRow2
3061
+ })
3062
+ );
3063
+ const { value = [], error } = strapiAdmin.useField(name2);
3064
+ const dynamicComponentsByCategory = React__namespace.useMemo(() => {
3065
+ return attribute.components.reduce((acc, componentUid) => {
3066
+ const { category, info } = components[componentUid] ?? { info: {} };
3067
+ const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
3068
+ if (!acc[category]) {
3069
+ acc[category] = [];
3199
3070
  }
3071
+ acc[category] = [...acc[category], component];
3072
+ return acc;
3073
+ }, {});
3074
+ }, [attribute.components, components]);
3075
+ const { formatMessage } = reactIntl.useIntl();
3076
+ const { toggleNotification } = strapiAdmin.useNotification();
3077
+ const dynamicDisplayedComponentsLength = value.length;
3078
+ const handleAddComponent = (uid, position) => {
3079
+ setAddComponentIsOpen(false);
3080
+ const schema = components[uid];
3081
+ const form = index.createDefaultForm(schema, components);
3082
+ const transformations = pipe__default.default(index.transformDocument(schema, components), (data2) => ({
3083
+ ...data2,
3084
+ __component: uid
3085
+ }));
3086
+ const data = transformations(form);
3087
+ addFieldRow(name2, data, position);
3088
+ };
3089
+ const handleClickOpenPicker = () => {
3090
+ if (dynamicDisplayedComponentsLength < max) {
3091
+ setAddComponentIsOpen((prev) => !prev);
3092
+ } else {
3093
+ toggleNotification({
3094
+ type: "info",
3095
+ message: formatMessage({
3096
+ id: index.getTranslation("components.notification.info.maximum-requirement")
3097
+ })
3098
+ });
3200
3099
  }
3201
- }
3202
- &:active {
3203
- ${AddComponentTitle} {
3204
- color: ${({ theme }) => theme.colors.primary600};
3100
+ };
3101
+ const handleMoveComponent = (newIndex, currentIndex) => {
3102
+ setLiveText(
3103
+ formatMessage(
3104
+ {
3105
+ id: index.getTranslation("dnd.reorder"),
3106
+ defaultMessage: "{item}, moved. New position in list: {position}."
3107
+ },
3108
+ {
3109
+ item: `${name2}.${currentIndex}`,
3110
+ position: getItemPos(newIndex)
3111
+ }
3112
+ )
3113
+ );
3114
+ moveFieldRow(name2, currentIndex, newIndex);
3115
+ };
3116
+ const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
3117
+ const handleCancel = (index$1) => {
3118
+ setLiveText(
3119
+ formatMessage(
3120
+ {
3121
+ id: index.getTranslation("dnd.cancel-item"),
3122
+ defaultMessage: "{item}, dropped. Re-order cancelled."
3123
+ },
3124
+ {
3125
+ item: `${name2}.${index$1}`
3126
+ }
3127
+ )
3128
+ );
3129
+ };
3130
+ const handleGrabItem = (index$1) => {
3131
+ setLiveText(
3132
+ formatMessage(
3133
+ {
3134
+ id: index.getTranslation("dnd.grab-item"),
3135
+ defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
3136
+ },
3137
+ {
3138
+ item: `${name2}.${index$1}`,
3139
+ position: getItemPos(index$1)
3140
+ }
3141
+ )
3142
+ );
3143
+ };
3144
+ const handleDropItem = (index$1) => {
3145
+ setLiveText(
3146
+ formatMessage(
3147
+ {
3148
+ id: index.getTranslation("dnd.drop-item"),
3149
+ defaultMessage: `{item}, dropped. Final position in list: {position}.`
3150
+ },
3151
+ {
3152
+ item: `${name2}.${index$1}`,
3153
+ position: getItemPos(index$1)
3154
+ }
3155
+ )
3156
+ );
3157
+ };
3158
+ const handleRemoveComponent = (name22, currentIndex) => () => {
3159
+ removeFieldRow(name22, currentIndex);
3160
+ };
3161
+ const hasError = error !== void 0;
3162
+ const renderButtonLabel = () => {
3163
+ if (addComponentIsOpen) {
3164
+ return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
3205
3165
  }
3206
- ${StyledAddIcon} {
3207
- > circle {
3208
- fill: ${({ theme }) => theme.colors.primary600};
3209
- }
3210
- > path {
3211
- fill: ${({ theme }) => theme.colors.neutral100};
3212
- }
3166
+ if (hasError && dynamicDisplayedComponentsLength > max) {
3167
+ return formatMessage(
3168
+ {
3169
+ id: index.getTranslation(`components.DynamicZone.extra-components`),
3170
+ defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
3171
+ },
3172
+ {
3173
+ number: dynamicDisplayedComponentsLength - max
3174
+ }
3175
+ );
3176
+ }
3177
+ if (hasError && dynamicDisplayedComponentsLength < min) {
3178
+ return formatMessage(
3179
+ {
3180
+ id: index.getTranslation(`components.DynamicZone.missing-components`),
3181
+ defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
3182
+ },
3183
+ { number: min - dynamicDisplayedComponentsLength }
3184
+ );
3213
3185
  }
3214
- }
3215
- `;
3216
- const ComponentCategory = ({
3217
- category,
3218
- components = [],
3219
- variant = "primary",
3220
- onAddComponent
3221
- }) => {
3222
- const { formatMessage } = reactIntl.useIntl();
3223
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: category, children: [
3224
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { variant, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
3225
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
3226
- ComponentBox,
3186
+ return formatMessage(
3227
3187
  {
3228
- tag: "button",
3229
- type: "button",
3230
- background: "neutral100",
3231
- justifyContent: "center",
3232
- onClick: onAddComponent(uid),
3233
- hasRadius: true,
3234
- height: "8.4rem",
3235
- shrink: 0,
3236
- borderColor: "neutral200",
3237
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
3238
- /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { color: "currentColor", background: "primary200", icon }),
3239
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: displayName })
3240
- ] })
3188
+ id: index.getTranslation("components.DynamicZone.add-component"),
3189
+ defaultMessage: "Add a component to {componentName}"
3241
3190
  },
3242
- uid
3243
- )) }) })
3244
- ] });
3245
- };
3246
- const Grid = styledComponents.styled(designSystem.Box)`
3247
- display: grid;
3248
- grid-template-columns: repeat(auto-fit, 14rem);
3249
- grid-gap: ${({ theme }) => theme.spaces[1]};
3250
- `;
3251
- const ComponentBox = styledComponents.styled(designSystem.Flex)`
3252
- color: ${({ theme }) => theme.colors.neutral600};
3253
- cursor: pointer;
3254
-
3255
- @media (prefers-reduced-motion: no-preference) {
3256
- transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
3257
- }
3258
-
3259
- &:focus,
3260
- &:hover {
3261
- border: 1px solid ${({ theme }) => theme.colors.primary200};
3262
- background: ${({ theme }) => theme.colors.primary100};
3263
- color: ${({ theme }) => theme.colors.primary600};
3264
- }
3265
- `;
3266
- const ComponentPicker = ({
3267
- dynamicComponentsByCategory = {},
3268
- isOpen,
3269
- onClickAddComponent
3270
- }) => {
3271
- const { formatMessage } = reactIntl.useIntl();
3272
- const handleAddComponentToDz = (componentUid) => () => {
3273
- onClickAddComponent(componentUid);
3191
+ { componentName: label || name2 }
3192
+ );
3274
3193
  };
3275
- if (!isOpen) {
3276
- return null;
3277
- }
3278
- return /* @__PURE__ */ jsxRuntime.jsxs(
3279
- designSystem.Box,
3280
- {
3281
- paddingTop: 6,
3282
- paddingBottom: 6,
3283
- paddingLeft: 5,
3284
- paddingRight: 5,
3285
- background: "neutral0",
3286
- shadow: "tableShadow",
3287
- borderColor: "neutral150",
3288
- hasRadius: true,
3289
- children: [
3290
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral600", children: formatMessage({
3291
- id: index.getTranslation("components.DynamicZone.ComponentPicker-label"),
3292
- defaultMessage: "Pick one component"
3293
- }) }) }),
3294
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { defaultValue: Object.keys(dynamicComponentsByCategory)[0], children: Object.entries(dynamicComponentsByCategory).map(([category, components], index2) => /* @__PURE__ */ jsxRuntime.jsx(
3295
- ComponentCategory,
3296
- {
3297
- category,
3298
- components,
3299
- onAddComponent: handleAddComponentToDz,
3300
- variant: index2 % 2 === 1 ? "primary" : "secondary"
3301
- },
3302
- category
3303
- )) }) })
3304
- ]
3305
- }
3306
- );
3194
+ const level = Relations.useComponent("DynamicZone", (state) => state.level);
3195
+ const ariaDescriptionId = React__namespace.useId();
3196
+ return /* @__PURE__ */ jsxRuntime.jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
3197
+ dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
3198
+ /* @__PURE__ */ jsxRuntime.jsx(
3199
+ DynamicZoneLabel,
3200
+ {
3201
+ hint,
3202
+ label,
3203
+ labelAction,
3204
+ name: name2,
3205
+ numberOfComponents: dynamicDisplayedComponentsLength,
3206
+ required
3207
+ }
3208
+ ),
3209
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
3210
+ id: index.getTranslation("dnd.instructions"),
3211
+ defaultMessage: `Press spacebar to grab and re-order`
3212
+ }) }),
3213
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
3214
+ /* @__PURE__ */ jsxRuntime.jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index2) => /* @__PURE__ */ jsxRuntime.jsx(
3215
+ Relations.ComponentProvider,
3216
+ {
3217
+ level: level + 1,
3218
+ uid: field.__component,
3219
+ id: field.id,
3220
+ type: "dynamiczone",
3221
+ children: /* @__PURE__ */ jsxRuntime.jsx(
3222
+ DynamicComponent,
3223
+ {
3224
+ disabled,
3225
+ name: name2,
3226
+ index: index2,
3227
+ componentUid: field.__component,
3228
+ onMoveComponent: handleMoveComponent,
3229
+ onRemoveComponentClick: handleRemoveComponent(name2, index2),
3230
+ onCancel: handleCancel,
3231
+ onDropItem: handleDropItem,
3232
+ onGrabItem: handleGrabItem,
3233
+ onAddComponent: handleAddComponent,
3234
+ dynamicComponentsByCategory,
3235
+ children
3236
+ }
3237
+ )
3238
+ },
3239
+ field.__temp_key__
3240
+ )) })
3241
+ ] }),
3242
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
3243
+ AddComponentButton,
3244
+ {
3245
+ hasError,
3246
+ isDisabled: disabled,
3247
+ isOpen: addComponentIsOpen,
3248
+ onClick: handleClickOpenPicker,
3249
+ children: renderButtonLabel()
3250
+ }
3251
+ ) }),
3252
+ /* @__PURE__ */ jsxRuntime.jsx(
3253
+ ComponentPicker,
3254
+ {
3255
+ dynamicComponentsByCategory,
3256
+ isOpen: addComponentIsOpen,
3257
+ onClickAddComponent: handleAddComponent
3258
+ }
3259
+ )
3260
+ ] }) });
3307
3261
  };
3308
3262
  const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
3309
3263
  const { formatMessage } = reactIntl.useIntl();
@@ -3377,7 +3331,7 @@ const UIDInput = React__namespace.forwardRef(
3377
3331
  const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
3378
3332
  const isCloning = reactRouterDom.useMatch(index.CLONE_PATH) !== null;
3379
3333
  const field = strapiAdmin.useField(name2);
3380
- const debouncedValue = useDebounce.useDebounce(field.value, 300);
3334
+ const debouncedValue = usePrev.useDebounce(field.value, 300);
3381
3335
  const hasChanged = debouncedValue !== field.initialValue;
3382
3336
  const { toggleNotification } = strapiAdmin.useNotification();
3383
3337
  const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
@@ -3783,8 +3737,7 @@ const Wrapper = styledComponents.styled.div`
3783
3737
  `;
3784
3738
  var listRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]))(\s*)/, emptyListRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]|[*+-]|(\d+)[.)])(\s*)$/, unorderedListRE = /[*+-]\s/;
3785
3739
  function newlineAndIndentContinueMarkdownList(cm) {
3786
- if (cm.getOption("disableInput"))
3787
- return CodeMirror__default.default.Pass;
3740
+ if (cm.getOption("disableInput")) return CodeMirror__default.default.Pass;
3788
3741
  var ranges = cm.listSelections(), replacements = [];
3789
3742
  for (var i = 0; i < ranges.length; i++) {
3790
3743
  var pos = ranges[i].head;
@@ -3818,8 +3771,7 @@ function newlineAndIndentContinueMarkdownList(cm) {
3818
3771
  var numbered = !(unorderedListRE.test(match[2]) || match[2].indexOf(">") >= 0);
3819
3772
  var bullet = numbered ? parseInt(match[3], 10) + 1 + match[4] : match[2].replace("x", " ");
3820
3773
  replacements[i] = "\n" + indent + bullet + after;
3821
- if (numbered)
3822
- incrementRemainingMarkdownListNumbers(cm, pos);
3774
+ if (numbered) incrementRemainingMarkdownListNumbers(cm, pos);
3823
3775
  }
3824
3776
  }
3825
3777
  cm.replaceSelections(replacements);
@@ -3837,10 +3789,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
3837
3789
  var newNumber = parseInt(startItem[3], 10) + lookAhead - skipCount;
3838
3790
  var nextNumber = parseInt(nextItem[3], 10), itemNumber = nextNumber;
3839
3791
  if (startIndent === nextIndent && !isNaN(nextNumber)) {
3840
- if (newNumber === nextNumber)
3841
- itemNumber = nextNumber + 1;
3842
- if (newNumber > nextNumber)
3843
- itemNumber = newNumber + 1;
3792
+ if (newNumber === nextNumber) itemNumber = nextNumber + 1;
3793
+ if (newNumber > nextNumber) itemNumber = newNumber + 1;
3844
3794
  cm.replaceRange(
3845
3795
  nextLine.replace(listRE, nextIndent + itemNumber + nextItem[4] + nextItem[5]),
3846
3796
  {
@@ -3853,10 +3803,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
3853
3803
  }
3854
3804
  );
3855
3805
  } else {
3856
- if (startIndent.length > nextIndent.length)
3857
- return;
3858
- if (startIndent.length < nextIndent.length && lookAhead === 1)
3859
- return;
3806
+ if (startIndent.length > nextIndent.length) return;
3807
+ if (startIndent.length < nextIndent.length && lookAhead === 1) return;
3860
3808
  skipCount += 1;
3861
3809
  }
3862
3810
  }
@@ -4934,7 +4882,7 @@ const Wysiwyg = React__namespace.forwardRef(
4934
4882
  const handleSelectAssets = (files) => {
4935
4883
  const formattedFiles = files.map((f) => ({
4936
4884
  alt: f.alternativeText || f.name,
4937
- url: useDebounce.prefixFileUrlWithBackendUrl(f.url),
4885
+ url: usePrev.prefixFileUrlWithBackendUrl(f.url),
4938
4886
  mime: f.mime
4939
4887
  }));
4940
4888
  insertFile(editorRef, formattedFiles);
@@ -4990,626 +4938,680 @@ const Wysiwyg = React__namespace.forwardRef(
4990
4938
  /* @__PURE__ */ jsxRuntime.jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
4991
4939
  ] });
4992
4940
  }
4993
- );
4994
- const MemoizedWysiwyg = React__namespace.memo(Wysiwyg);
4995
- const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4996
- const { id, document: document2, collectionType } = index.useDoc();
4997
- const isFormDisabled = strapiAdmin.useForm("InputRenderer", (state) => state.disabled);
4998
- const isInDynamicZone = useDynamicZone("isInDynamicZone", (state) => state.isInDynamicZone);
4999
- const canCreateFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canCreateFields);
5000
- const canReadFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canReadFields);
5001
- const canUpdateFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canUpdateFields);
5002
- const canUserAction = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canUserAction);
5003
- let idToCheck = id;
5004
- if (collectionType === index.SINGLE_TYPES) {
5005
- idToCheck = document2?.documentId;
4941
+ );
4942
+ const MemoizedWysiwyg = React__namespace.memo(Wysiwyg);
4943
+ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4944
+ const { id, document: document2, collectionType } = index.useDoc();
4945
+ const isFormDisabled = strapiAdmin.useForm("InputRenderer", (state) => state.disabled);
4946
+ const isInDynamicZone = useDynamicZone("isInDynamicZone", (state) => state.isInDynamicZone);
4947
+ const canCreateFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canCreateFields);
4948
+ const canReadFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canReadFields);
4949
+ const canUpdateFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canUpdateFields);
4950
+ const canUserAction = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canUserAction);
4951
+ let idToCheck = id;
4952
+ if (collectionType === index.SINGLE_TYPES) {
4953
+ idToCheck = document2?.documentId;
4954
+ }
4955
+ const editableFields = idToCheck ? canUpdateFields : canCreateFields;
4956
+ const readableFields = idToCheck ? canReadFields : canCreateFields;
4957
+ const canUserReadField = canUserAction(props.name, readableFields, props.type);
4958
+ const canUserEditField = canUserAction(props.name, editableFields, props.type);
4959
+ const fields = strapiAdmin.useStrapiApp("InputRenderer", (app) => app.fields);
4960
+ const { lazyComponentStore } = useLazyComponents(
4961
+ attributeHasCustomFieldProperty(props.attribute) ? [props.attribute.customField] : void 0
4962
+ );
4963
+ const hint = useFieldHint(providedHint, props.attribute);
4964
+ const {
4965
+ edit: { components }
4966
+ } = index.useDocLayout();
4967
+ const field = strapiAdmin.useField(props.name);
4968
+ if (!visible) {
4969
+ return null;
4970
+ }
4971
+ if (!canUserReadField && !isInDynamicZone) {
4972
+ return /* @__PURE__ */ jsxRuntime.jsx(NotAllowedInput, { hint, ...props });
4973
+ }
4974
+ const fieldIsDisabled = !canUserEditField && !isInDynamicZone || props.disabled || isFormDisabled;
4975
+ if (attributeHasCustomFieldProperty(props.attribute)) {
4976
+ const CustomInput = lazyComponentStore[props.attribute.customField];
4977
+ if (CustomInput) {
4978
+ return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, ...field, hint, disabled: fieldIsDisabled });
4979
+ }
4980
+ return /* @__PURE__ */ jsxRuntime.jsx(
4981
+ strapiAdmin.InputRenderer,
4982
+ {
4983
+ ...props,
4984
+ hint,
4985
+ type: props.attribute.customField,
4986
+ disabled: fieldIsDisabled
4987
+ }
4988
+ );
4989
+ }
4990
+ const addedInputTypes = Object.keys(fields);
4991
+ if (!attributeHasCustomFieldProperty(props.attribute) && addedInputTypes.includes(props.type)) {
4992
+ const CustomInput = fields[props.type];
4993
+ return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, hint, disabled: fieldIsDisabled });
4994
+ }
4995
+ switch (props.type) {
4996
+ case "blocks":
4997
+ return /* @__PURE__ */ jsxRuntime.jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4998
+ case "component":
4999
+ return /* @__PURE__ */ jsxRuntime.jsx(
5000
+ MemoizedComponentInput,
5001
+ {
5002
+ ...props,
5003
+ hint,
5004
+ layout: components[props.attribute.component].layout,
5005
+ disabled: fieldIsDisabled,
5006
+ children: (inputProps) => /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...inputProps })
5007
+ }
5008
+ );
5009
+ case "dynamiczone":
5010
+ return /* @__PURE__ */ jsxRuntime.jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
5011
+ case "relation":
5012
+ return /* @__PURE__ */ jsxRuntime.jsx(Relations.MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
5013
+ case "richtext":
5014
+ return /* @__PURE__ */ jsxRuntime.jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
5015
+ case "uid":
5016
+ return /* @__PURE__ */ jsxRuntime.jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
5017
+ case "enumeration":
5018
+ return /* @__PURE__ */ jsxRuntime.jsx(
5019
+ strapiAdmin.InputRenderer,
5020
+ {
5021
+ ...props,
5022
+ hint,
5023
+ options: props.attribute.enum.map((value) => ({ value })),
5024
+ type: props.customField ? "custom-field" : props.type,
5025
+ disabled: fieldIsDisabled
5026
+ }
5027
+ );
5028
+ default:
5029
+ const { unique: _unique, mainField: _mainField, ...restProps } = props;
5030
+ return /* @__PURE__ */ jsxRuntime.jsx(
5031
+ strapiAdmin.InputRenderer,
5032
+ {
5033
+ ...restProps,
5034
+ hint,
5035
+ type: props.customField ? "custom-field" : props.type,
5036
+ disabled: fieldIsDisabled
5037
+ }
5038
+ );
5039
+ }
5040
+ };
5041
+ const attributeHasCustomFieldProperty = (attribute) => "customField" in attribute && typeof attribute.customField === "string";
5042
+ const useFieldHint = (hint = void 0, attribute) => {
5043
+ const { formatMessage } = reactIntl.useIntl();
5044
+ const { maximum, minimum } = getMinMax(attribute);
5045
+ if (!maximum && !minimum) {
5046
+ return hint;
5006
5047
  }
5007
- const editableFields = idToCheck ? canUpdateFields : canCreateFields;
5008
- const readableFields = idToCheck ? canReadFields : canCreateFields;
5009
- const canUserReadField = canUserAction(props.name, readableFields, props.type);
5010
- const canUserEditField = canUserAction(props.name, editableFields, props.type);
5011
- const fields = strapiAdmin.useStrapiApp("InputRenderer", (app) => app.fields);
5012
- const { lazyComponentStore } = useLazyComponents(
5013
- attributeHasCustomFieldProperty(props.attribute) ? [props.attribute.customField] : void 0
5048
+ const units = !["biginteger", "integer", "number", "dynamiczone", "component"].includes(
5049
+ attribute.type
5050
+ ) ? formatMessage(
5051
+ {
5052
+ id: "content-manager.form.Input.hint.character.unit",
5053
+ defaultMessage: "{maxValue, plural, one { character} other { characters}}"
5054
+ },
5055
+ {
5056
+ maxValue: Math.max(minimum || 0, maximum || 0)
5057
+ }
5058
+ ) : null;
5059
+ const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
5060
+ return formatMessage(
5061
+ {
5062
+ id: "content-manager.form.Input.hint.text",
5063
+ defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
5064
+ },
5065
+ {
5066
+ min: minimum,
5067
+ max: maximum,
5068
+ description: hint,
5069
+ unit: units,
5070
+ divider: hasMinAndMax ? formatMessage({
5071
+ id: "content-manager.form.Input.hint.minMaxDivider",
5072
+ defaultMessage: " / "
5073
+ }) : null,
5074
+ br: /* @__PURE__ */ jsxRuntime.jsx("br", {})
5075
+ }
5014
5076
  );
5015
- const hint = useFieldHint(providedHint, props.attribute);
5016
- const {
5017
- edit: { components }
5018
- } = index.useDocLayout();
5019
- const field = strapiAdmin.useField(props.name);
5020
- if (!visible) {
5021
- return null;
5077
+ };
5078
+ const getMinMax = (attribute) => {
5079
+ if ("min" in attribute || "max" in attribute) {
5080
+ return {
5081
+ maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
5082
+ minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
5083
+ };
5084
+ } else if ("maxLength" in attribute || "minLength" in attribute) {
5085
+ return { maximum: attribute.maxLength, minimum: attribute.minLength };
5086
+ } else {
5087
+ return { maximum: void 0, minimum: void 0 };
5022
5088
  }
5023
- if (!canUserReadField && !isInDynamicZone) {
5024
- return /* @__PURE__ */ jsxRuntime.jsx(NotAllowedInput, { hint, ...props });
5089
+ };
5090
+ const MemoizedInputRenderer = React.memo(InputRenderer);
5091
+ const RESPONSIVE_CONTAINER_BREAKPOINTS = {
5092
+ sm: "27.5rem"
5093
+ // 440px
5094
+ };
5095
+ const ResponsiveGridRoot = styledComponents.styled(designSystem.Grid.Root)`
5096
+ container-type: inline-size;
5097
+ `;
5098
+ const ResponsiveGridItem = styledComponents.styled(designSystem.Grid.Item)`
5099
+ grid-column: span 12;
5100
+
5101
+ @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
5102
+ ${({ col }) => col && `grid-column: span ${col};`}
5025
5103
  }
5026
- const fieldIsDisabled = !canUserEditField && !isInDynamicZone || props.disabled || isFormDisabled;
5027
- if (attributeHasCustomFieldProperty(props.attribute)) {
5028
- const CustomInput = lazyComponentStore[props.attribute.customField];
5029
- if (CustomInput) {
5030
- return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, ...field, hint, disabled: fieldIsDisabled });
5104
+ `;
5105
+ const FormLayout = ({ layout }) => {
5106
+ const { formatMessage } = reactIntl.useIntl();
5107
+ const { model } = index.useDoc();
5108
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((panel, index2) => {
5109
+ if (panel.some((row) => row.some((field) => field.type === "dynamiczone"))) {
5110
+ const [row] = panel;
5111
+ const [field] = row;
5112
+ const fieldWithTranslatedLabel = {
5113
+ ...field,
5114
+ label: formatMessage({
5115
+ id: `content-manager.content-types.${model}.${field.name}`,
5116
+ defaultMessage: field.label
5117
+ })
5118
+ };
5119
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, s: 12, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel }) }) }, field.name);
5031
5120
  }
5032
5121
  return /* @__PURE__ */ jsxRuntime.jsx(
5033
- strapiAdmin.InputRenderer,
5122
+ designSystem.Box,
5034
5123
  {
5035
- ...props,
5036
- hint,
5037
- type: props.attribute.customField,
5038
- disabled: fieldIsDisabled
5124
+ hasRadius: true,
5125
+ background: "neutral0",
5126
+ shadow: "tableShadow",
5127
+ paddingLeft: 6,
5128
+ paddingRight: 6,
5129
+ paddingTop: 6,
5130
+ paddingBottom: 6,
5131
+ borderColor: "neutral150",
5132
+ children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: panel.map((row, gridRowIndex) => /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
5133
+ const fieldWithTranslatedLabel = {
5134
+ ...field,
5135
+ label: formatMessage({
5136
+ id: `content-manager.content-types.${model}.${field.name}`,
5137
+ defaultMessage: field.label
5138
+ })
5139
+ };
5140
+ return /* @__PURE__ */ jsxRuntime.jsx(
5141
+ ResponsiveGridItem,
5142
+ {
5143
+ col: size,
5144
+ s: 12,
5145
+ xs: 12,
5146
+ direction: "column",
5147
+ alignItems: "stretch",
5148
+ children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel })
5149
+ },
5150
+ field.name
5151
+ );
5152
+ }) }, gridRowIndex)) })
5153
+ },
5154
+ index2
5155
+ );
5156
+ }) });
5157
+ };
5158
+ const NonRepeatableComponent = ({
5159
+ attribute,
5160
+ name: name2,
5161
+ children,
5162
+ layout
5163
+ }) => {
5164
+ const { formatMessage } = reactIntl.useIntl();
5165
+ const { value } = strapiAdmin.useField(name2);
5166
+ const level = Relations.useComponent("NonRepeatableComponent", (state) => state.level);
5167
+ const isNested = level > 0;
5168
+ return /* @__PURE__ */ jsxRuntime.jsx(Relations.ComponentProvider, { id: value?.id, uid: attribute.component, level: level + 1, type: "component", children: /* @__PURE__ */ jsxRuntime.jsx(
5169
+ designSystem.Box,
5170
+ {
5171
+ background: "neutral100",
5172
+ paddingLeft: 6,
5173
+ paddingRight: 6,
5174
+ paddingTop: 6,
5175
+ paddingBottom: 6,
5176
+ hasRadius: isNested,
5177
+ borderColor: isNested ? "neutral200" : void 0,
5178
+ children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index2) => {
5179
+ return /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
5180
+ const completeFieldName = `${name2}.${field.name}`;
5181
+ const translatedLabel = formatMessage({
5182
+ id: `content-manager.components.${attribute.component}.${field.name}`,
5183
+ defaultMessage: field.label
5184
+ });
5185
+ return /* @__PURE__ */ jsxRuntime.jsx(
5186
+ ResponsiveGridItem,
5187
+ {
5188
+ col: size,
5189
+ s: 12,
5190
+ xs: 12,
5191
+ direction: "column",
5192
+ alignItems: "stretch",
5193
+ children: children({ ...field, label: translatedLabel, name: completeFieldName })
5194
+ },
5195
+ completeFieldName
5196
+ );
5197
+ }) }, index2);
5198
+ }) })
5199
+ }
5200
+ ) });
5201
+ };
5202
+ const RepeatableComponent = ({
5203
+ attribute,
5204
+ disabled,
5205
+ name: name2,
5206
+ mainField,
5207
+ children,
5208
+ layout
5209
+ }) => {
5210
+ const { toggleNotification } = strapiAdmin.useNotification();
5211
+ const { formatMessage } = reactIntl.useIntl();
5212
+ const { search: searchString } = reactRouterDom.useLocation();
5213
+ const search = React__namespace.useMemo(() => new URLSearchParams(searchString), [searchString]);
5214
+ const { components } = index.useDoc();
5215
+ const {
5216
+ value = [],
5217
+ error,
5218
+ rawError
5219
+ } = strapiAdmin.useField(name2);
5220
+ const addFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.addFieldRow);
5221
+ const moveFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.moveFieldRow);
5222
+ const removeFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.removeFieldRow);
5223
+ const { max = Infinity } = attribute;
5224
+ const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
5225
+ const [liveText, setLiveText] = React__namespace.useState("");
5226
+ React__namespace.useEffect(() => {
5227
+ const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;
5228
+ const hasNestedValue = value && Array.isArray(value) && value.length > 0;
5229
+ if (hasNestedErrors && hasNestedValue) {
5230
+ const errorOpenItems = rawError.map((_, idx) => {
5231
+ return value[idx] ? value[idx].__temp_key__ : null;
5232
+ }).filter((value2) => !!value2);
5233
+ if (errorOpenItems && errorOpenItems.length > 0) {
5234
+ setCollapseToOpen((collapseToOpen2) => {
5235
+ if (!errorOpenItems.includes(collapseToOpen2)) {
5236
+ return errorOpenItems[0];
5237
+ }
5238
+ return collapseToOpen2;
5239
+ });
5240
+ }
5241
+ }
5242
+ }, [rawError, value]);
5243
+ const componentTmpKeyWithFocussedField = React__namespace.useMemo(() => {
5244
+ if (search.has("field")) {
5245
+ const fieldParam = search.get("field");
5246
+ if (!fieldParam) {
5247
+ return void 0;
5248
+ }
5249
+ const [, path] = fieldParam.split(`${name2}.`);
5250
+ if (objects.getIn(value, path, void 0) !== void 0) {
5251
+ const [subpath] = path.split(".");
5252
+ return objects.getIn(value, subpath, void 0)?.__temp_key__;
5039
5253
  }
5254
+ }
5255
+ return void 0;
5256
+ }, [search, name2, value]);
5257
+ const prevValue = usePrev.usePrev(value);
5258
+ React__namespace.useEffect(() => {
5259
+ if (prevValue && prevValue.length < value.length) {
5260
+ setCollapseToOpen(value[value.length - 1].__temp_key__);
5261
+ }
5262
+ }, [value, prevValue]);
5263
+ React__namespace.useEffect(() => {
5264
+ if (typeof componentTmpKeyWithFocussedField === "string") {
5265
+ setCollapseToOpen(componentTmpKeyWithFocussedField);
5266
+ }
5267
+ }, [componentTmpKeyWithFocussedField]);
5268
+ const toggleCollapses = () => {
5269
+ setCollapseToOpen("");
5270
+ };
5271
+ const handleClick = () => {
5272
+ if (value.length < max) {
5273
+ const schema = components[attribute.component];
5274
+ const form = index.createDefaultForm(schema, components);
5275
+ const data = index.transformDocument(schema, components)(form);
5276
+ addFieldRow(name2, data);
5277
+ } else if (value.length >= max) {
5278
+ toggleNotification({
5279
+ type: "info",
5280
+ message: formatMessage({
5281
+ id: index.getTranslation("components.notification.info.maximum-requirement")
5282
+ })
5283
+ });
5284
+ }
5285
+ };
5286
+ const handleMoveComponentField = (newIndex, currentIndex) => {
5287
+ setLiveText(
5288
+ formatMessage(
5289
+ {
5290
+ id: index.getTranslation("dnd.reorder"),
5291
+ defaultMessage: "{item}, moved. New position in list: {position}."
5292
+ },
5293
+ {
5294
+ item: `${name2}.${currentIndex}`,
5295
+ position: getItemPos(newIndex)
5296
+ }
5297
+ )
5040
5298
  );
5041
- }
5042
- const addedInputTypes = Object.keys(fields);
5043
- if (!attributeHasCustomFieldProperty(props.attribute) && addedInputTypes.includes(props.type)) {
5044
- const CustomInput = fields[props.type];
5045
- return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, hint, disabled: fieldIsDisabled });
5046
- }
5047
- switch (props.type) {
5048
- case "blocks":
5049
- return /* @__PURE__ */ jsxRuntime.jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
5050
- case "component":
5051
- return /* @__PURE__ */ jsxRuntime.jsx(
5052
- MemoizedComponentInput,
5299
+ moveFieldRow(name2, currentIndex, newIndex);
5300
+ };
5301
+ const handleValueChange = (key) => {
5302
+ setCollapseToOpen(key);
5303
+ };
5304
+ const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
5305
+ const handleCancel = (index$1) => {
5306
+ setLiveText(
5307
+ formatMessage(
5053
5308
  {
5054
- ...props,
5055
- hint,
5056
- layout: components[props.attribute.component].layout,
5057
- disabled: fieldIsDisabled,
5058
- children: (inputProps) => /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...inputProps })
5309
+ id: index.getTranslation("dnd.cancel-item"),
5310
+ defaultMessage: "{item}, dropped. Re-order cancelled."
5311
+ },
5312
+ {
5313
+ item: `${name2}.${index$1}`
5059
5314
  }
5060
- );
5061
- case "dynamiczone":
5062
- return /* @__PURE__ */ jsxRuntime.jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
5063
- case "relation":
5064
- return /* @__PURE__ */ jsxRuntime.jsx(Relations.MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
5065
- case "richtext":
5066
- return /* @__PURE__ */ jsxRuntime.jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
5067
- case "uid":
5068
- return /* @__PURE__ */ jsxRuntime.jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
5069
- case "enumeration":
5070
- return /* @__PURE__ */ jsxRuntime.jsx(
5071
- strapiAdmin.InputRenderer,
5315
+ )
5316
+ );
5317
+ };
5318
+ const handleGrabItem = (index$1) => {
5319
+ setLiveText(
5320
+ formatMessage(
5072
5321
  {
5073
- ...props,
5074
- hint,
5075
- options: props.attribute.enum.map((value) => ({ value })),
5076
- type: props.customField ? "custom-field" : props.type,
5077
- disabled: fieldIsDisabled
5322
+ id: index.getTranslation("dnd.grab-item"),
5323
+ defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
5324
+ },
5325
+ {
5326
+ item: `${name2}.${index$1}`,
5327
+ position: getItemPos(index$1)
5078
5328
  }
5079
- );
5080
- default:
5081
- const { unique: _unique, mainField: _mainField, ...restProps } = props;
5082
- return /* @__PURE__ */ jsxRuntime.jsx(
5083
- strapiAdmin.InputRenderer,
5329
+ )
5330
+ );
5331
+ };
5332
+ const handleDropItem = (index$1) => {
5333
+ setLiveText(
5334
+ formatMessage(
5084
5335
  {
5085
- ...restProps,
5086
- hint,
5087
- type: props.customField ? "custom-field" : props.type,
5088
- disabled: fieldIsDisabled
5336
+ id: index.getTranslation("dnd.drop-item"),
5337
+ defaultMessage: `{item}, dropped. Final position in list: {position}.`
5338
+ },
5339
+ {
5340
+ item: `${name2}.${index$1}`,
5341
+ position: getItemPos(index$1)
5089
5342
  }
5090
- );
5343
+ )
5344
+ );
5345
+ };
5346
+ const ariaDescriptionId = React__namespace.useId();
5347
+ const level = Relations.useComponent("RepeatableComponent", (state) => state.level);
5348
+ if (value.length === 0) {
5349
+ return /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleClick });
5091
5350
  }
5351
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { hasRadius: true, children: [
5352
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
5353
+ id: index.getTranslation("dnd.instructions"),
5354
+ defaultMessage: `Press spacebar to grab and re-order`
5355
+ }) }),
5356
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
5357
+ /* @__PURE__ */ jsxRuntime.jsxs(
5358
+ AccordionRoot,
5359
+ {
5360
+ $error: error,
5361
+ value: collapseToOpen,
5362
+ onValueChange: handleValueChange,
5363
+ "aria-describedby": ariaDescriptionId,
5364
+ children: [
5365
+ value.map(({ __temp_key__: key, id }, index2) => {
5366
+ const nameWithIndex = `${name2}.${index2}`;
5367
+ return /* @__PURE__ */ jsxRuntime.jsx(
5368
+ Relations.ComponentProvider,
5369
+ {
5370
+ id,
5371
+ uid: attribute.component,
5372
+ level: level + 1,
5373
+ type: "repeatable",
5374
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5375
+ Component,
5376
+ {
5377
+ disabled,
5378
+ name: nameWithIndex,
5379
+ attribute,
5380
+ index: index2,
5381
+ mainField,
5382
+ onMoveItem: handleMoveComponentField,
5383
+ onDeleteComponent: () => {
5384
+ removeFieldRow(name2, index2);
5385
+ toggleCollapses();
5386
+ },
5387
+ toggleCollapses,
5388
+ onCancel: handleCancel,
5389
+ onDropItem: handleDropItem,
5390
+ onGrabItem: handleGrabItem,
5391
+ __temp_key__: key,
5392
+ children: layout.map((row, index22) => {
5393
+ return /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
5394
+ const completeFieldName = `${nameWithIndex}.${field.name}`;
5395
+ const translatedLabel = formatMessage({
5396
+ id: `content-manager.components.${attribute.component}.${field.name}`,
5397
+ defaultMessage: field.label
5398
+ });
5399
+ return /* @__PURE__ */ jsxRuntime.jsx(
5400
+ ResponsiveGridItem,
5401
+ {
5402
+ col: size,
5403
+ s: 12,
5404
+ xs: 12,
5405
+ direction: "column",
5406
+ alignItems: "stretch",
5407
+ children: children({
5408
+ ...field,
5409
+ label: translatedLabel,
5410
+ name: completeFieldName
5411
+ })
5412
+ },
5413
+ completeFieldName
5414
+ );
5415
+ }) }, index22);
5416
+ })
5417
+ }
5418
+ )
5419
+ },
5420
+ key
5421
+ );
5422
+ }),
5423
+ /* @__PURE__ */ jsxRuntime.jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
5424
+ id: index.getTranslation("containers.EditView.add.new-entry"),
5425
+ defaultMessage: "Add an entry"
5426
+ }) })
5427
+ ]
5428
+ }
5429
+ )
5430
+ ] });
5092
5431
  };
5093
- const attributeHasCustomFieldProperty = (attribute) => "customField" in attribute && typeof attribute.customField === "string";
5094
- const useFieldHint = (hint = void 0, attribute) => {
5095
- const { formatMessage } = reactIntl.useIntl();
5096
- const { maximum, minimum } = getMinMax(attribute);
5097
- if (!maximum && !minimum) {
5098
- return hint;
5099
- }
5100
- const units = !["biginteger", "integer", "number", "dynamiczone", "component"].includes(
5101
- attribute.type
5102
- ) ? formatMessage(
5103
- {
5104
- id: "content-manager.form.Input.hint.character.unit",
5105
- defaultMessage: "{maxValue, plural, one { character} other { characters}}"
5106
- },
5107
- {
5108
- maxValue: Math.max(minimum || 0, maximum || 0)
5109
- }
5110
- ) : null;
5111
- const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
5112
- return formatMessage(
5113
- {
5114
- id: "content-manager.form.Input.hint.text",
5115
- defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
5116
- },
5117
- {
5118
- min: minimum,
5119
- max: maximum,
5120
- description: hint,
5121
- unit: units,
5122
- divider: hasMinAndMax ? formatMessage({
5123
- id: "content-manager.form.Input.hint.minMaxDivider",
5124
- defaultMessage: " / "
5125
- }) : null,
5126
- br: /* @__PURE__ */ jsxRuntime.jsx("br", {})
5432
+ const AccordionRoot = styledComponents.styled(designSystem.Accordion.Root)`
5433
+ border: 1px solid
5434
+ ${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
5435
+ `;
5436
+ const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
5437
+ width: 100%;
5438
+ display: flex;
5439
+ justify-content: center;
5440
+ border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
5441
+ padding-inline: ${(props) => props.theme.spaces[6]};
5442
+ padding-block: ${(props) => props.theme.spaces[3]};
5443
+
5444
+ &:not([disabled]) {
5445
+ cursor: pointer;
5446
+
5447
+ &:hover {
5448
+ background-color: ${(props) => props.theme.colors.primary100};
5127
5449
  }
5128
- );
5129
- };
5130
- const getMinMax = (attribute) => {
5131
- if ("min" in attribute || "max" in attribute) {
5132
- return {
5133
- maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
5134
- minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
5135
- };
5136
- } else if ("maxLength" in attribute || "minLength" in attribute) {
5137
- return { maximum: attribute.maxLength, minimum: attribute.minLength };
5138
- } else {
5139
- return { maximum: void 0, minimum: void 0 };
5140
5450
  }
5141
- };
5142
- const MemoizedInputRenderer = React.memo(InputRenderer);
5143
- const DynamicComponent = ({
5144
- componentUid,
5451
+
5452
+ span {
5453
+ font-weight: 600;
5454
+ font-size: 1.4rem;
5455
+ line-height: 2.4rem;
5456
+ }
5457
+
5458
+ @media (prefers-reduced-motion: no-preference) {
5459
+ transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
5460
+ }
5461
+ `;
5462
+ const Component = ({
5145
5463
  disabled,
5146
5464
  index: index$1,
5147
5465
  name: name2,
5148
- onRemoveComponentClick,
5149
- onMoveComponent,
5150
- onGrabItem,
5151
- onDropItem,
5152
- onCancel,
5153
- dynamicComponentsByCategory = {},
5154
- onAddComponent
5466
+ mainField = {
5467
+ name: "id",
5468
+ type: "integer"
5469
+ },
5470
+ children,
5471
+ onDeleteComponent,
5472
+ toggleCollapses,
5473
+ __temp_key__,
5474
+ ...dragProps
5155
5475
  }) => {
5156
5476
  const { formatMessage } = reactIntl.useIntl();
5157
- const formValues = strapiAdmin.useForm("DynamicComponent", (state) => state.values);
5158
- const {
5159
- edit: { components }
5160
- } = index.useDocLayout();
5161
- const title = React__namespace.useMemo(() => {
5162
- const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
5163
- const mainFieldValue = objects.getIn(formValues, `${name2}.${index$1}.${mainField}`);
5164
- const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
5165
- const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
5166
- return mainValue;
5167
- }, [componentUid, components, formValues, name2, index$1]);
5168
- const { icon, displayName } = React__namespace.useMemo(() => {
5169
- const [category] = componentUid.split(".");
5170
- const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
5171
- (component) => component.uid === componentUid
5172
- ) ?? { icon: null, displayName: null };
5173
- return { icon: icon2, displayName: displayName2 };
5174
- }, [componentUid, dynamicComponentsByCategory]);
5477
+ const displayValue = strapiAdmin.useForm("RepeatableComponent", (state) => {
5478
+ return objects.getIn(state.values, [...name2.split("."), mainField.name]);
5479
+ });
5480
+ const accordionRef = React__namespace.useRef(null);
5481
+ const componentKey = name2.split(".").slice(0, -1).join(".");
5175
5482
  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
5176
- type: `${useDragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name2}`,
5483
+ type: `${useDragAndDrop.ItemTypes.COMPONENT}_${componentKey}`,
5177
5484
  index: index$1,
5178
5485
  item: {
5179
5486
  index: index$1,
5180
- displayedValue: `${displayName} ${title}`,
5181
- icon
5487
+ displayedValue: displayValue
5182
5488
  },
5183
- onMoveItem: onMoveComponent,
5184
- onDropItem,
5185
- onGrabItem,
5186
- onCancel
5489
+ onStart() {
5490
+ toggleCollapses();
5491
+ },
5492
+ ...dragProps
5187
5493
  });
5188
5494
  React__namespace.useEffect(() => {
5189
5495
  dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
5190
5496
  }, [dragPreviewRef, index$1]);
5191
- const accordionValue = React__namespace.useId();
5192
- const { value = [], rawError } = strapiAdmin.useField(`${name2}.${index$1}`);
5193
- const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
5194
- React__namespace.useEffect(() => {
5195
- if (rawError && value) {
5196
- setCollapseToOpen(accordionValue);
5197
- }
5198
- }, [rawError, value, accordionValue]);
5199
- const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
5200
- const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5201
- /* @__PURE__ */ jsxRuntime.jsx(
5202
- designSystem.IconButton,
5203
- {
5204
- variant: "ghost",
5205
- label: formatMessage(
5497
+ const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
5498
+ const composedBoxRefs = designSystem.useComposedRefs(
5499
+ boxRef,
5500
+ dropRef
5501
+ );
5502
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
5503
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
5504
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: displayValue }),
5505
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Actions, { children: [
5506
+ /* @__PURE__ */ jsxRuntime.jsx(
5507
+ designSystem.IconButton,
5206
5508
  {
5207
- id: index.getTranslation("components.DynamicZone.delete-label"),
5208
- defaultMessage: "Delete {name}"
5209
- },
5210
- { name: title }
5509
+ variant: "ghost",
5510
+ onClick: onDeleteComponent,
5511
+ label: formatMessage({
5512
+ id: index.getTranslation("containers.Edit.delete"),
5513
+ defaultMessage: "Delete"
5514
+ }),
5515
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
5516
+ }
5211
5517
  ),
5212
- onClick: onRemoveComponentClick,
5213
- children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
5214
- }
5215
- ),
5216
- /* @__PURE__ */ jsxRuntime.jsx(
5217
- designSystem.IconButton,
5218
- {
5219
- variant: "ghost",
5220
- onClick: (e) => e.stopPropagation(),
5221
- "data-handler-id": handlerId,
5222
- ref: dragRef,
5223
- label: formatMessage({
5224
- id: index.getTranslation("components.DragHandle-label"),
5225
- defaultMessage: "Drag"
5226
- }),
5227
- onKeyDown: handleKeyDown,
5228
- children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
5229
- }
5230
- ),
5231
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
5232
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
5233
- /* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false }),
5234
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "span", children: formatMessage({
5235
- id: index.getTranslation("components.DynamicZone.more-actions"),
5236
- defaultMessage: "More actions"
5237
- }) })
5238
- ] }),
5239
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Content, { children: [
5240
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
5241
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
5242
- id: index.getTranslation("components.DynamicZone.add-item-above"),
5243
- defaultMessage: "Add component above"
5244
- }) }),
5245
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
5246
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
5247
- components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1), children: displayName2 }, componentUid))
5248
- ] }, category)) })
5249
- ] }),
5250
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
5251
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
5252
- id: index.getTranslation("components.DynamicZone.add-item-below"),
5253
- defaultMessage: "Add component below"
5254
- }) }),
5255
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
5256
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
5257
- components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1 + 1), children: displayName2 }, componentUid))
5258
- ] }, category)) })
5259
- ] })
5260
- ] })
5261
- ] })
5262
- ] });
5263
- const accordionTitle = title ? `${displayName} ${title}` : displayName;
5264
- return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
5265
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Rectangle, { background: "neutral200" }) }),
5266
- /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { value: collapseToOpen, onValueChange: setCollapseToOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: accordionValue, children: [
5267
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
5268
5518
  /* @__PURE__ */ jsxRuntime.jsx(
5269
- designSystem.Accordion.Trigger,
5519
+ designSystem.IconButton,
5270
5520
  {
5271
- icon: icon && ComponentIcon.COMPONENT_ICONS[icon] ? ComponentIcon.COMPONENT_ICONS[icon] : ComponentIcon.COMPONENT_ICONS.dashboard,
5272
- children: accordionTitle
5521
+ ref: composedAccordionRefs,
5522
+ variant: "ghost",
5523
+ onClick: (e) => e.stopPropagation(),
5524
+ "data-handler-id": handlerId,
5525
+ label: formatMessage({
5526
+ id: index.getTranslation("components.DragHandle-label"),
5527
+ defaultMessage: "Drag"
5528
+ }),
5529
+ onKeyDown: handleKeyDown,
5530
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
5273
5531
  }
5274
- ),
5275
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Actions, { children: accordionActions })
5276
- ] }),
5277
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(
5278
- designSystem.Grid.Item,
5279
- {
5280
- col: 12,
5281
- s: 12,
5282
- xs: 12,
5283
- direction: "column",
5284
- alignItems: "stretch",
5285
- children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
5286
- const fieldName = `${name2}.${index$1}.${field.name}`;
5287
- const fieldWithTranslatedLabel = {
5288
- ...field,
5289
- label: formatMessage({
5290
- id: `content-manager.components.${componentUid}.${field.name}`,
5291
- defaultMessage: field.label
5292
- })
5293
- };
5294
- return /* @__PURE__ */ jsxRuntime.jsx(
5295
- designSystem.Grid.Item,
5296
- {
5297
- col: size,
5298
- s: 12,
5299
- xs: 12,
5300
- direction: "column",
5301
- alignItems: "stretch",
5302
- children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
5303
- },
5304
- fieldName
5305
- );
5306
- }) })
5307
- },
5308
- rowInd
5309
- )) }) }) }) })
5310
- ] }) }) })
5311
- ] });
5312
- };
5313
- const StyledBox = styledComponents.styled(designSystem.Box)`
5314
- > div:first-child {
5315
- box-shadow: ${({ theme }) => theme.shadows.tableShadow};
5316
- }
5317
- `;
5318
- const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
5319
- border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
5320
- `;
5321
- const Rectangle = styledComponents.styled(designSystem.Box)`
5322
- width: ${({ theme }) => theme.spaces[2]};
5323
- height: ${({ theme }) => theme.spaces[4]};
5324
- `;
5325
- const Preview = styledComponents.styled.span`
5326
- display: block;
5327
- background-color: ${({ theme }) => theme.colors.primary100};
5328
- outline: 1px dashed ${({ theme }) => theme.colors.primary500};
5329
- outline-offset: -1px;
5330
- padding: ${({ theme }) => theme.spaces[6]};
5331
- `;
5332
- const ComponentContainer = styledComponents.styled(designSystem.Box)`
5333
- list-style: none;
5334
- padding: 0;
5335
- margin: 0;
5336
- `;
5337
- const DynamicZoneLabel = ({
5338
- hint,
5339
- label,
5340
- labelAction,
5341
- name: name2,
5342
- numberOfComponents = 0,
5343
- required
5344
- }) => {
5345
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
5346
- designSystem.Box,
5347
- {
5348
- paddingTop: 3,
5349
- paddingBottom: 3,
5350
- paddingRight: 4,
5351
- paddingLeft: 4,
5352
- borderRadius: "26px",
5353
- background: "neutral0",
5354
- shadow: "filterShadow",
5355
- color: "neutral500",
5356
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", justifyContent: "center", children: [
5357
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { maxWidth: "35.6rem", children: [
5358
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
5359
- label || name2,
5360
- " "
5361
- ] }),
5362
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
5363
- "(",
5364
- numberOfComponents,
5365
- ")"
5366
- ] }),
5367
- required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: "*" }),
5368
- labelAction && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 1, children: labelAction })
5369
- ] }),
5370
- hint && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, maxWidth: "35.6rem", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: hint }) })
5532
+ )
5371
5533
  ] })
5372
- }
5373
- ) });
5534
+ ] }),
5535
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
5536
+ designSystem.Flex,
5537
+ {
5538
+ direction: "column",
5539
+ alignItems: "stretch",
5540
+ background: "neutral100",
5541
+ padding: 6,
5542
+ gap: 6,
5543
+ children
5544
+ }
5545
+ ) })
5546
+ ] }) });
5547
+ };
5548
+ const Preview = () => {
5549
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
5374
5550
  };
5375
- const [DynamicZoneProvider, useDynamicZone] = strapiAdmin.createContext(
5376
- "DynamicZone",
5377
- {
5378
- isInDynamicZone: false
5379
- }
5380
- );
5381
- const DynamicZone = ({
5382
- attribute,
5383
- disabled: disabledProp,
5384
- hint,
5551
+ const StyledSpan = styledComponents.styled(designSystem.Box)`
5552
+ display: block;
5553
+ outline: 1px dashed ${({ theme }) => theme.colors.primary500};
5554
+ outline-offset: -1px;
5555
+ `;
5556
+ const ComponentInput = ({
5385
5557
  label,
5386
- labelAction,
5558
+ required,
5387
5559
  name: name2,
5388
- required = false
5560
+ attribute,
5561
+ disabled,
5562
+ labelAction,
5563
+ ...props
5389
5564
  }) => {
5390
- const { max = Infinity, min = -Infinity } = attribute ?? {};
5391
- const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
5392
- const [liveText, setLiveText] = React__namespace.useState("");
5393
- const { components, isLoading } = index.useDoc();
5394
- const disabled = disabledProp || isLoading;
5395
- const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm(
5396
- "DynamicZone",
5397
- ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
5398
- addFieldRow: addFieldRow2,
5399
- removeFieldRow: removeFieldRow2,
5400
- moveFieldRow: moveFieldRow2
5401
- })
5402
- );
5403
- const { value = [], error } = strapiAdmin.useField(name2);
5404
- const dynamicComponentsByCategory = React__namespace.useMemo(() => {
5405
- return attribute.components.reduce((acc, componentUid) => {
5406
- const { category, info } = components[componentUid] ?? { info: {} };
5407
- const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
5408
- if (!acc[category]) {
5409
- acc[category] = [];
5410
- }
5411
- acc[category] = [...acc[category], component];
5412
- return acc;
5413
- }, {});
5414
- }, [attribute.components, components]);
5415
5565
  const { formatMessage } = reactIntl.useIntl();
5416
- const { toggleNotification } = strapiAdmin.useNotification();
5417
- const dynamicDisplayedComponentsLength = value.length;
5418
- const handleAddComponent = (uid, position) => {
5419
- setAddComponentIsOpen(false);
5420
- const schema = components[uid];
5421
- const form = createDefaultForm(schema, components);
5422
- const transformations = pipe__default.default(transformDocument(schema, components), (data2) => ({
5423
- ...data2,
5424
- __component: uid
5425
- }));
5426
- const data = transformations(form);
5427
- addFieldRow(name2, data, position);
5428
- };
5429
- const handleClickOpenPicker = () => {
5430
- if (dynamicDisplayedComponentsLength < max) {
5431
- setAddComponentIsOpen((prev) => !prev);
5432
- } else {
5433
- toggleNotification({
5434
- type: "info",
5435
- message: formatMessage({
5436
- id: index.getTranslation("components.notification.info.maximum-requirement")
5437
- })
5438
- });
5439
- }
5440
- };
5441
- const handleMoveComponent = (newIndex, currentIndex) => {
5442
- setLiveText(
5443
- formatMessage(
5444
- {
5445
- id: index.getTranslation("dnd.reorder"),
5446
- defaultMessage: "{item}, moved. New position in list: {position}."
5447
- },
5448
- {
5449
- item: `${name2}.${currentIndex}`,
5450
- position: getItemPos(newIndex)
5451
- }
5452
- )
5453
- );
5454
- moveFieldRow(name2, currentIndex, newIndex);
5455
- };
5456
- const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
5457
- const handleCancel = (index$1) => {
5458
- setLiveText(
5459
- formatMessage(
5460
- {
5461
- id: index.getTranslation("dnd.cancel-item"),
5462
- defaultMessage: "{item}, dropped. Re-order cancelled."
5463
- },
5464
- {
5465
- item: `${name2}.${index$1}`
5466
- }
5467
- )
5468
- );
5469
- };
5470
- const handleGrabItem = (index$1) => {
5471
- setLiveText(
5472
- formatMessage(
5473
- {
5474
- id: index.getTranslation("dnd.grab-item"),
5475
- defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
5476
- },
5477
- {
5478
- item: `${name2}.${index$1}`,
5479
- position: getItemPos(index$1)
5480
- }
5481
- )
5482
- );
5566
+ const field = strapiAdmin.useField(name2);
5567
+ const showResetComponent = !attribute.repeatable && field.value && !disabled;
5568
+ const { components } = index.useDoc();
5569
+ const handleInitialisationClick = () => {
5570
+ const schema = components[attribute.component];
5571
+ const form = index.createDefaultForm(schema, components);
5572
+ const data = index.transformDocument(schema, components)(form);
5573
+ field.onChange(name2, data);
5483
5574
  };
5484
- const handleDropItem = (index$1) => {
5485
- setLiveText(
5486
- formatMessage(
5487
- {
5488
- id: index.getTranslation("dnd.drop-item"),
5489
- defaultMessage: `{item}, dropped. Final position in list: {position}.`
5490
- },
5575
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, required, children: [
5576
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
5577
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { action: labelAction, children: [
5578
+ label,
5579
+ attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5580
+ " (",
5581
+ Array.isArray(field.value) ? field.value.length : 0,
5582
+ ")"
5583
+ ] })
5584
+ ] }),
5585
+ showResetComponent && /* @__PURE__ */ jsxRuntime.jsx(
5586
+ designSystem.IconButton,
5491
5587
  {
5492
- item: `${name2}.${index$1}`,
5493
- position: getItemPos(index$1)
5588
+ label: formatMessage({
5589
+ id: index.getTranslation("components.reset-entry"),
5590
+ defaultMessage: "Reset Entry"
5591
+ }),
5592
+ variant: "ghost",
5593
+ onClick: () => {
5594
+ field.onChange(name2, null);
5595
+ },
5596
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
5494
5597
  }
5495
5598
  )
5496
- );
5497
- };
5498
- const handleRemoveComponent = (name22, currentIndex) => () => {
5499
- removeFieldRow(name22, currentIndex);
5500
- };
5501
- const hasError = error !== void 0;
5502
- const renderButtonLabel = () => {
5503
- if (addComponentIsOpen) {
5504
- return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
5505
- }
5506
- if (hasError && dynamicDisplayedComponentsLength > max) {
5507
- return formatMessage(
5508
- {
5509
- id: index.getTranslation(`components.DynamicZone.extra-components`),
5510
- defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
5511
- },
5512
- {
5513
- number: dynamicDisplayedComponentsLength - max
5514
- }
5515
- );
5516
- }
5517
- if (hasError && dynamicDisplayedComponentsLength < min) {
5518
- return formatMessage(
5519
- {
5520
- id: index.getTranslation(`components.DynamicZone.missing-components`),
5521
- defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
5522
- },
5523
- { number: min - dynamicDisplayedComponentsLength }
5524
- );
5525
- }
5526
- return formatMessage(
5527
- {
5528
- id: index.getTranslation("components.DynamicZone.add-component"),
5529
- defaultMessage: "Add a component to {componentName}"
5530
- },
5531
- { componentName: label || name2 }
5532
- );
5533
- };
5534
- const level = Relations.useComponent("DynamicZone", (state) => state.level);
5535
- const ariaDescriptionId = React__namespace.useId();
5536
- return /* @__PURE__ */ jsxRuntime.jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
5537
- dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
5538
- /* @__PURE__ */ jsxRuntime.jsx(
5539
- DynamicZoneLabel,
5540
- {
5541
- hint,
5542
- label,
5543
- labelAction,
5544
- name: name2,
5545
- numberOfComponents: dynamicDisplayedComponentsLength,
5546
- required
5547
- }
5548
- ),
5549
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
5550
- id: index.getTranslation("dnd.instructions"),
5551
- defaultMessage: `Press spacebar to grab and re-order`
5552
- }) }),
5553
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
5554
- /* @__PURE__ */ jsxRuntime.jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index2) => /* @__PURE__ */ jsxRuntime.jsx(
5555
- Relations.ComponentProvider,
5556
- {
5557
- level: level + 1,
5558
- uid: field.__component,
5559
- id: field.id,
5560
- type: "dynamiczone",
5561
- children: /* @__PURE__ */ jsxRuntime.jsx(
5562
- DynamicComponent,
5563
- {
5564
- disabled,
5565
- name: name2,
5566
- index: index2,
5567
- componentUid: field.__component,
5568
- onMoveComponent: handleMoveComponent,
5569
- onRemoveComponentClick: handleRemoveComponent(name2, index2),
5570
- onCancel: handleCancel,
5571
- onDropItem: handleDropItem,
5572
- onGrabItem: handleGrabItem,
5573
- onAddComponent: handleAddComponent,
5574
- dynamicComponentsByCategory
5575
- }
5576
- )
5577
- },
5578
- field.__temp_key__
5579
- )) })
5580
5599
  ] }),
5581
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
5582
- AddComponentButton,
5583
- {
5584
- hasError,
5585
- isDisabled: disabled,
5586
- isOpen: addComponentIsOpen,
5587
- onClick: handleClickOpenPicker,
5588
- children: renderButtonLabel()
5589
- }
5590
- ) }),
5591
- /* @__PURE__ */ jsxRuntime.jsx(
5592
- ComponentPicker,
5593
- {
5594
- dynamicComponentsByCategory,
5595
- isOpen: addComponentIsOpen,
5596
- onClickAddComponent: handleAddComponent
5597
- }
5598
- )
5599
- ] }) });
5600
+ !attribute.repeatable && !field.value && /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
5601
+ !attribute.repeatable && field.value ? /* @__PURE__ */ jsxRuntime.jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
5602
+ attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
5603
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
5604
+ ] });
5600
5605
  };
5606
+ const MemoizedComponentInput = React__namespace.memo(ComponentInput);
5601
5607
  exports.DynamicZone = DynamicZone;
5608
+ exports.FormLayout = FormLayout;
5602
5609
  exports.MemoizedBlocksInput = MemoizedBlocksInput;
5603
5610
  exports.MemoizedComponentInput = MemoizedComponentInput;
5604
- exports.MemoizedInputRenderer = MemoizedInputRenderer;
5605
5611
  exports.MemoizedUIDInput = MemoizedUIDInput;
5606
5612
  exports.MemoizedWysiwyg = MemoizedWysiwyg;
5607
5613
  exports.NotAllowedInput = NotAllowedInput;
5608
- exports.createDefaultForm = createDefaultForm;
5609
- exports.prepareTempKeys = prepareTempKeys;
5610
- exports.removeFieldsThatDontExistOnSchema = removeFieldsThatDontExistOnSchema;
5611
- exports.transformDocument = transformDocument;
5612
5614
  exports.useDynamicZone = useDynamicZone;
5613
5615
  exports.useFieldHint = useFieldHint;
5614
5616
  exports.useLazyComponents = useLazyComponents;
5615
- //# sourceMappingURL=Field-BV7ZYdqe.js.map
5617
+ //# sourceMappingURL=Input-B7sapvBG.js.map