@strapi/content-manager 0.0.0-next.bec3f8cddf61be32ee5516609a1d4d6032933972 → 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 (168) 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-BUOQFZ08.mjs → ComponentConfigurationPage-9_4yUE9L.mjs} +3 -3
  4. package/dist/_chunks/{ComponentConfigurationPage-BUOQFZ08.mjs.map → ComponentConfigurationPage-9_4yUE9L.mjs.map} +1 -1
  5. package/dist/_chunks/{ComponentConfigurationPage-WtZ2yaRP.js → ComponentConfigurationPage-DBSh-kET.js} +4 -5
  6. package/dist/_chunks/{ComponentConfigurationPage-WtZ2yaRP.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-BVrCP5lF.js → EditConfigurationPage-Bl_U2JgH.js} +4 -5
  11. package/dist/_chunks/{EditConfigurationPage-BVrCP5lF.js.map → EditConfigurationPage-Bl_U2JgH.js.map} +1 -1
  12. package/dist/_chunks/{EditConfigurationPage-D7HkxcAN.mjs → EditConfigurationPage-COe6hjPC.mjs} +3 -3
  13. package/dist/_chunks/{EditConfigurationPage-D7HkxcAN.mjs.map → EditConfigurationPage-COe6hjPC.mjs.map} +1 -1
  14. package/dist/_chunks/{EditViewPage-BKQ83NAk.js → EditViewPage-D4yFJET6.js} +23 -57
  15. package/dist/_chunks/EditViewPage-D4yFJET6.js.map +1 -0
  16. package/dist/_chunks/{EditViewPage-zKmMBER4.mjs → EditViewPage-DrmVmYN0.mjs} +21 -54
  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-CkbrtNZd.js → Form-C4rSaGsz.js} +5 -6
  21. package/dist/_chunks/{Form-CkbrtNZd.js.map → Form-C4rSaGsz.js.map} +1 -1
  22. package/dist/_chunks/{Form-B-E8l73g.mjs → Form-DamaxNpG.mjs} +3 -3
  23. package/dist/_chunks/{Form-B-E8l73g.mjs.map → Form-DamaxNpG.mjs.map} +1 -1
  24. package/dist/_chunks/{History-C72HQ0-i.mjs → History-D1PreDSY.mjs} +37 -67
  25. package/dist/_chunks/History-D1PreDSY.mjs.map +1 -0
  26. package/dist/_chunks/{History-B2Dg9q7H.js → History-DTm8UCCQ.js} +48 -79
  27. package/dist/_chunks/History-DTm8UCCQ.js.map +1 -0
  28. package/dist/_chunks/{Field-BhN0lyyZ.js → Input-B7sapvBG.js} +1293 -1271
  29. package/dist/_chunks/Input-B7sapvBG.js.map +1 -0
  30. package/dist/_chunks/{Field-BbrX_tUG.mjs → Input-CZ1YvjHR.mjs} +1332 -1310
  31. package/dist/_chunks/Input-CZ1YvjHR.mjs.map +1 -0
  32. package/dist/_chunks/{ListConfigurationPage-BalSo5dp.mjs → ListConfigurationPage-Bbi32isk.mjs} +6 -5
  33. package/dist/_chunks/ListConfigurationPage-Bbi32isk.mjs.map +1 -0
  34. package/dist/_chunks/{ListConfigurationPage-BQCc3BnJ.js → ListConfigurationPage-ysFMjKI3.js} +6 -6
  35. package/dist/_chunks/ListConfigurationPage-ysFMjKI3.js.map +1 -0
  36. package/dist/_chunks/{ListViewPage-Dfue5wQ2.mjs → ListViewPage-Bud_jBDQ.mjs} +68 -53
  37. package/dist/_chunks/ListViewPage-Bud_jBDQ.mjs.map +1 -0
  38. package/dist/_chunks/{ListViewPage-Cu5dZKZe.js → ListViewPage-DTuuxU3n.js} +74 -60
  39. package/dist/_chunks/ListViewPage-DTuuxU3n.js.map +1 -0
  40. package/dist/_chunks/{NoContentTypePage-MGzn4JPu.js → NoContentTypePage-CL7VVeYs.js} +2 -2
  41. package/dist/_chunks/{NoContentTypePage-MGzn4JPu.js.map → NoContentTypePage-CL7VVeYs.js.map} +1 -1
  42. package/dist/_chunks/{NoContentTypePage-BLC8M9U0.mjs → NoContentTypePage-DVhkugsf.mjs} +2 -2
  43. package/dist/_chunks/{NoContentTypePage-BLC8M9U0.mjs.map → NoContentTypePage-DVhkugsf.mjs.map} +1 -1
  44. package/dist/_chunks/{NoPermissionsPage-BpAoEQy_.mjs → NoPermissionsPage-CMdM-dCo.mjs} +2 -2
  45. package/dist/_chunks/{NoPermissionsPage-BpAoEQy_.mjs.map → NoPermissionsPage-CMdM-dCo.mjs.map} +1 -1
  46. package/dist/_chunks/{NoPermissionsPage-DJPwEpOD.js → NoPermissionsPage-v7I599vC.js} +2 -2
  47. package/dist/_chunks/{NoPermissionsPage-DJPwEpOD.js.map → NoPermissionsPage-v7I599vC.js.map} +1 -1
  48. package/dist/_chunks/Preview-BNuU0SuQ.mjs +287 -0
  49. package/dist/_chunks/Preview-BNuU0SuQ.mjs.map +1 -0
  50. package/dist/_chunks/Preview-Cxq-uI6D.js +305 -0
  51. package/dist/_chunks/Preview-Cxq-uI6D.js.map +1 -0
  52. package/dist/_chunks/{Relations-BULOkyWN.mjs → Relations-C2Ahkrdg.mjs} +6 -8
  53. package/dist/_chunks/{Relations-BULOkyWN.mjs.map → Relations-C2Ahkrdg.mjs.map} +1 -1
  54. package/dist/_chunks/{Relations-DTiqnyGx.js → Relations-CWS79QQn.js} +7 -10
  55. package/dist/_chunks/{Relations-DTiqnyGx.js.map → Relations-CWS79QQn.js.map} +1 -1
  56. package/dist/_chunks/{en-C-J4DGEe.js → en-BR48D_RH.js} +20 -3
  57. package/dist/_chunks/{en-C-J4DGEe.js.map → en-BR48D_RH.js.map} +1 -1
  58. package/dist/_chunks/{en-DPfZ6tPQ.mjs → en-D65uIF6Y.mjs} +20 -3
  59. package/dist/_chunks/{en-DPfZ6tPQ.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-76eawJUd.js → index-DQsvBb_N.js} +568 -243
  66. package/dist/_chunks/index-DQsvBb_N.js.map +1 -0
  67. package/dist/_chunks/{index-DW7xp_LG.mjs → index-ZKrsjv-2.mjs} +585 -259
  68. package/dist/_chunks/index-ZKrsjv-2.mjs.map +1 -0
  69. package/dist/_chunks/{layout-CVz8WiDC.js → layout-Cl0NhlQB.js} +5 -6
  70. package/dist/_chunks/{layout-CVz8WiDC.js.map → layout-Cl0NhlQB.js.map} +1 -1
  71. package/dist/_chunks/{layout-DNfLIjbP.mjs → layout-fQk1rMk9.mjs} +4 -4
  72. package/dist/_chunks/{layout-DNfLIjbP.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-B6K4WRjW.js → relations-BRfBxVbX.js} +6 -3
  76. package/dist/_chunks/relations-BRfBxVbX.js.map +1 -0
  77. package/dist/_chunks/{relations-ByHSIjSe.mjs → relations-BakOFl_1.mjs} +6 -3
  78. package/dist/_chunks/relations-BakOFl_1.mjs.map +1 -0
  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/EditViewPage.d.ts +9 -1
  95. package/dist/admin/src/pages/EditView/components/DocumentActions.d.ts +1 -1
  96. package/dist/admin/src/pages/EditView/components/DocumentStatus.d.ts +3 -3
  97. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Code.d.ts +7 -0
  98. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/utils/prismLanguages.d.ts +49 -0
  99. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/constants.d.ts +1 -0
  100. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.d.ts +4 -1
  101. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.d.ts +4 -1
  102. package/dist/admin/src/pages/EditView/components/FormLayout.d.ts +27 -0
  103. package/dist/admin/src/pages/EditView/utils/data.d.ts +1 -0
  104. package/dist/admin/src/preview/components/PreviewContent.d.ts +2 -0
  105. package/dist/admin/src/preview/components/PreviewHeader.d.ts +2 -0
  106. package/dist/admin/src/preview/pages/Preview.d.ts +11 -0
  107. package/dist/admin/src/preview/routes.d.ts +3 -0
  108. package/dist/admin/src/preview/services/preview.d.ts +1 -1
  109. package/dist/admin/src/router.d.ts +1 -1
  110. package/dist/admin/src/services/api.d.ts +1 -1
  111. package/dist/admin/src/services/components.d.ts +2 -2
  112. package/dist/admin/src/services/contentTypes.d.ts +3 -3
  113. package/dist/admin/src/services/documents.d.ts +16 -19
  114. package/dist/admin/src/services/init.d.ts +1 -1
  115. package/dist/admin/src/services/relations.d.ts +2 -2
  116. package/dist/admin/src/services/uid.d.ts +3 -3
  117. package/dist/server/index.js +230 -187
  118. package/dist/server/index.js.map +1 -1
  119. package/dist/server/index.mjs +231 -187
  120. package/dist/server/index.mjs.map +1 -1
  121. package/dist/server/src/controllers/utils/metadata.d.ts +1 -0
  122. package/dist/server/src/controllers/utils/metadata.d.ts.map +1 -1
  123. package/dist/server/src/history/controllers/history-version.d.ts +1 -1
  124. package/dist/server/src/history/controllers/history-version.d.ts.map +1 -1
  125. package/dist/server/src/history/services/history.d.ts +3 -3
  126. package/dist/server/src/history/services/history.d.ts.map +1 -1
  127. package/dist/server/src/history/services/utils.d.ts +6 -10
  128. package/dist/server/src/history/services/utils.d.ts.map +1 -1
  129. package/dist/server/src/index.d.ts +3 -2
  130. package/dist/server/src/index.d.ts.map +1 -1
  131. package/dist/server/src/preview/controllers/validation/preview.d.ts.map +1 -1
  132. package/dist/server/src/preview/index.d.ts.map +1 -1
  133. package/dist/server/src/preview/services/index.d.ts +1 -0
  134. package/dist/server/src/preview/services/index.d.ts.map +1 -1
  135. package/dist/server/src/preview/services/preview-config.d.ts +2 -0
  136. package/dist/server/src/preview/services/preview-config.d.ts.map +1 -1
  137. package/dist/server/src/preview/utils.d.ts +1 -0
  138. package/dist/server/src/preview/utils.d.ts.map +1 -1
  139. package/dist/server/src/register.d.ts.map +1 -1
  140. package/dist/server/src/services/document-manager.d.ts.map +1 -1
  141. package/dist/server/src/services/document-metadata.d.ts +4 -2
  142. package/dist/server/src/services/document-metadata.d.ts.map +1 -1
  143. package/dist/server/src/services/index.d.ts +3 -2
  144. package/dist/server/src/services/index.d.ts.map +1 -1
  145. package/dist/server/src/services/utils/configuration/index.d.ts +2 -2
  146. package/dist/server/src/services/utils/configuration/layouts.d.ts +2 -2
  147. package/dist/server/src/services/utils/populate.d.ts +2 -2
  148. package/dist/server/src/services/utils/populate.d.ts.map +1 -1
  149. package/package.json +12 -11
  150. package/dist/_chunks/EditViewPage-BKQ83NAk.js.map +0 -1
  151. package/dist/_chunks/EditViewPage-zKmMBER4.mjs.map +0 -1
  152. package/dist/_chunks/Field-BbrX_tUG.mjs.map +0 -1
  153. package/dist/_chunks/Field-BhN0lyyZ.js.map +0 -1
  154. package/dist/_chunks/History-B2Dg9q7H.js.map +0 -1
  155. package/dist/_chunks/History-C72HQ0-i.mjs.map +0 -1
  156. package/dist/_chunks/ListConfigurationPage-BQCc3BnJ.js.map +0 -1
  157. package/dist/_chunks/ListConfigurationPage-BalSo5dp.mjs.map +0 -1
  158. package/dist/_chunks/ListViewPage-Cu5dZKZe.js.map +0 -1
  159. package/dist/_chunks/ListViewPage-Dfue5wQ2.mjs.map +0 -1
  160. package/dist/_chunks/index-76eawJUd.js.map +0 -1
  161. package/dist/_chunks/index-DW7xp_LG.mjs.map +0 -1
  162. package/dist/_chunks/relations-B6K4WRjW.js.map +0 -1
  163. package/dist/_chunks/relations-ByHSIjSe.mjs.map +0 -1
  164. package/dist/_chunks/useDebounce-CtcjDB3L.js.map +0 -1
  165. package/dist/_chunks/useDebounce-DmuSJIF3.mjs.map +0 -1
  166. package/dist/admin/src/preview/constants.d.ts +0 -1
  167. package/dist/server/src/preview/constants.d.ts +0 -2
  168. 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-76eawJUd.js");
9
- const fractionalIndexing = require("fractional-indexing");
10
- const Relations = require("./Relations-DTiqnyGx.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,631 +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
- const { value } = strapiAdmin.useField(name2);
2696
- const level = Relations.useComponent("NonRepeatableComponent", (state) => state.level);
2697
- const isNested = level > 0;
2698
- return /* @__PURE__ */ jsxRuntime.jsx(Relations.ComponentProvider, { id: value?.id, uid: attribute.component, level: level + 1, type: "component", children: /* @__PURE__ */ jsxRuntime.jsx(
2703
+ const { formatMessage } = reactIntl.useIntl();
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(
2699
2767
  designSystem.Box,
2700
2768
  {
2701
- background: "neutral100",
2702
- paddingLeft: 6,
2703
- paddingRight: 6,
2704
2769
  paddingTop: 6,
2705
2770
  paddingBottom: 6,
2706
- hasRadius: isNested,
2707
- borderColor: isNested ? "neutral200" : void 0,
2708
- children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index2) => {
2709
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
2710
- const completeFieldName = `${name2}.${field.name}`;
2711
- return /* @__PURE__ */ jsxRuntime.jsx(
2712
- designSystem.Grid.Item,
2713
- {
2714
- col: size,
2715
- s: 12,
2716
- xs: 12,
2717
- direction: "column",
2718
- alignItems: "stretch",
2719
- children: children({ ...field, name: completeFieldName })
2720
- },
2721
- completeFieldName
2722
- );
2723
- }) }, index2);
2724
- }) })
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
+ ]
2725
2793
  }
2726
- ) });
2794
+ );
2727
2795
  };
2728
- const RepeatableComponent = ({
2729
- attribute,
2796
+ const DynamicComponent = ({
2797
+ componentUid,
2730
2798
  disabled,
2799
+ index: index$1,
2731
2800
  name: name2,
2732
- mainField,
2733
- children,
2734
- layout
2801
+ onRemoveComponentClick,
2802
+ onMoveComponent,
2803
+ onGrabItem,
2804
+ onDropItem,
2805
+ onCancel,
2806
+ dynamicComponentsByCategory = {},
2807
+ onAddComponent,
2808
+ children
2735
2809
  }) => {
2736
- const { toggleNotification } = strapiAdmin.useNotification();
2737
2810
  const { formatMessage } = reactIntl.useIntl();
2738
- const { search: searchString } = reactRouterDom.useLocation();
2739
- const search = React__namespace.useMemo(() => new URLSearchParams(searchString), [searchString]);
2740
- const { components } = index.useDoc();
2811
+ const formValues = strapiAdmin.useForm("DynamicComponent", (state) => state.values);
2741
2812
  const {
2742
- value = [],
2743
- error,
2744
- rawError
2745
- } = strapiAdmin.useField(name2);
2746
- const addFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.addFieldRow);
2747
- const moveFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.moveFieldRow);
2748
- const removeFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.removeFieldRow);
2749
- const { max = Infinity } = attribute;
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]);
2829
+ const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
2830
+ type: `${useDragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name2}`,
2831
+ index: index$1,
2832
+ item: {
2833
+ index: index$1,
2834
+ displayedValue: `${displayName} ${title}`,
2835
+ icon
2836
+ },
2837
+ onMoveItem: onMoveComponent,
2838
+ onDropItem,
2839
+ onGrabItem,
2840
+ onCancel
2841
+ });
2842
+ React__namespace.useEffect(() => {
2843
+ dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
2844
+ }, [dragPreviewRef, index$1]);
2845
+ const accordionValue = React__namespace.useId();
2846
+ const { value = [], rawError } = strapiAdmin.useField(`${name2}.${index$1}`);
2750
2847
  const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
2751
- const [liveText, setLiveText] = React__namespace.useState("");
2752
2848
  React__namespace.useEffect(() => {
2753
- const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;
2754
- const hasNestedValue = value && Array.isArray(value) && value.length > 0;
2755
- if (hasNestedErrors && hasNestedValue) {
2756
- const errorOpenItems = rawError.map((_, idx) => {
2757
- return value[idx] ? value[idx].__temp_key__ : null;
2758
- }).filter((value2) => !!value2);
2759
- if (errorOpenItems && errorOpenItems.length > 0) {
2760
- setCollapseToOpen((collapseToOpen2) => {
2761
- if (!errorOpenItems.includes(collapseToOpen2)) {
2762
- return errorOpenItems[0];
2763
- }
2764
- return collapseToOpen2;
2765
- });
2766
- }
2849
+ if (rawError && value) {
2850
+ setCollapseToOpen(accordionValue);
2767
2851
  }
2768
- }, [rawError, value]);
2769
- const componentTmpKeyWithFocussedField = React__namespace.useMemo(() => {
2770
- if (search.has("field")) {
2771
- const fieldParam = search.get("field");
2772
- if (!fieldParam) {
2773
- return void 0;
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(
2860
+ {
2861
+ id: index.getTranslation("components.DynamicZone.delete-label"),
2862
+ defaultMessage: "Delete {name}"
2863
+ },
2864
+ { name: title }
2865
+ ),
2866
+ onClick: onRemoveComponentClick,
2867
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
2774
2868
  }
2775
- const [, path] = fieldParam.split(`${name2}.`);
2776
- if (objects.getIn(value, path, void 0) !== void 0) {
2777
- const [subpath] = path.split(".");
2778
- return objects.getIn(value, subpath, void 0)?.__temp_key__;
2869
+ ),
2870
+ /* @__PURE__ */ jsxRuntime.jsx(
2871
+ designSystem.IconButton,
2872
+ {
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, {})
2779
2883
  }
2780
- }
2781
- return void 0;
2782
- }, [search, name2, value]);
2783
- const prevValue = useDebounce.usePrev(value);
2784
- React__namespace.useEffect(() => {
2785
- if (prevValue && prevValue.length < value.length) {
2786
- setCollapseToOpen(value[value.length - 1].__temp_key__);
2787
- }
2788
- }, [value, prevValue]);
2789
- React__namespace.useEffect(() => {
2790
- if (typeof componentTmpKeyWithFocussedField === "string") {
2791
- setCollapseToOpen(componentTmpKeyWithFocussedField);
2792
- }
2793
- }, [componentTmpKeyWithFocussedField]);
2794
- const toggleCollapses = () => {
2795
- setCollapseToOpen("");
2796
- };
2797
- const handleClick = () => {
2798
- if (value.length < max) {
2799
- const schema = components[attribute.component];
2800
- const form = createDefaultForm(schema, components);
2801
- const data = transformDocument(schema, components)(form);
2802
- addFieldRow(name2, data);
2803
- } else if (value.length >= max) {
2804
- toggleNotification({
2805
- type: "info",
2806
- message: formatMessage({
2807
- id: index.getTranslation("components.notification.info.maximum-requirement")
2808
- })
2809
- });
2810
- }
2811
- };
2812
- const handleMoveComponentField = (newIndex, currentIndex) => {
2813
- setLiveText(
2814
- formatMessage(
2815
- {
2816
- id: index.getTranslation("dnd.reorder"),
2817
- defaultMessage: "{item}, moved. New position in list: {position}."
2818
- },
2819
- {
2820
- item: `${name2}.${currentIndex}`,
2821
- position: getItemPos(newIndex)
2822
- }
2823
- )
2824
- );
2825
- moveFieldRow(name2, currentIndex, newIndex);
2826
- };
2827
- const handleValueChange = (key) => {
2828
- setCollapseToOpen(key);
2829
- };
2830
- const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
2831
- const handleCancel = (index$1) => {
2832
- setLiveText(
2833
- formatMessage(
2834
- {
2835
- id: index.getTranslation("dnd.cancel-item"),
2836
- defaultMessage: "{item}, dropped. Re-order cancelled."
2837
- },
2838
- {
2839
- item: `${name2}.${index$1}`
2840
- }
2841
- )
2842
- );
2843
- };
2844
- const handleGrabItem = (index$1) => {
2845
- setLiveText(
2846
- formatMessage(
2847
- {
2848
- id: index.getTranslation("dnd.grab-item"),
2849
- defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
2850
- },
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(
2887
+ designSystem.IconButton,
2851
2888
  {
2852
- item: `${name2}.${index$1}`,
2853
- position: getItemPos(index$1)
2889
+ variant: "ghost",
2890
+ label: formatMessage({
2891
+ id: index.getTranslation("components.DynamicZone.more-actions"),
2892
+ defaultMessage: "More actions"
2893
+ }),
2894
+ tag: "span",
2895
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false })
2854
2896
  }
2855
- )
2856
- );
2857
- };
2858
- const handleDropItem = (index$1) => {
2859
- setLiveText(
2860
- formatMessage(
2861
- {
2862
- id: index.getTranslation("dnd.drop-item"),
2863
- defaultMessage: `{item}, dropped. Final position in list: {position}.`
2864
- },
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,
2865
2938
  {
2866
- item: `${name2}.${index$1}`,
2867
- position: getItemPos(index$1)
2868
- }
2869
- )
2870
- );
2871
- };
2872
- const ariaDescriptionId = React__namespace.useId();
2873
- const level = Relations.useComponent("RepeatableComponent", (state) => state.level);
2874
- if (value.length === 0) {
2875
- return /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleClick });
2876
- }
2877
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { hasRadius: true, children: [
2878
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
2879
- id: index.getTranslation("dnd.instructions"),
2880
- defaultMessage: `Press spacebar to grab and re-order`
2881
- }) }),
2882
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
2883
- /* @__PURE__ */ jsxRuntime.jsxs(
2884
- AccordionRoot,
2885
- {
2886
- $error: error,
2887
- value: collapseToOpen,
2888
- onValueChange: handleValueChange,
2889
- "aria-describedby": ariaDescriptionId,
2890
- children: [
2891
- value.map(({ __temp_key__: key, id }, index2) => {
2892
- const nameWithIndex = `${name2}.${index2}`;
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
+ };
2893
2953
  return /* @__PURE__ */ jsxRuntime.jsx(
2894
- Relations.ComponentProvider,
2954
+ ResponsiveGridItem,
2895
2955
  {
2896
- id,
2897
- uid: attribute.component,
2898
- level: level + 1,
2899
- type: "repeatable",
2900
- children: /* @__PURE__ */ jsxRuntime.jsx(
2901
- Component,
2902
- {
2903
- disabled,
2904
- name: nameWithIndex,
2905
- attribute,
2906
- index: index2,
2907
- mainField,
2908
- onMoveItem: handleMoveComponentField,
2909
- onDeleteComponent: () => {
2910
- removeFieldRow(name2, index2);
2911
- toggleCollapses();
2912
- },
2913
- toggleCollapses,
2914
- onCancel: handleCancel,
2915
- onDropItem: handleDropItem,
2916
- onGrabItem: handleGrabItem,
2917
- __temp_key__: key,
2918
- children: layout.map((row, index22) => {
2919
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
2920
- const completeFieldName = `${nameWithIndex}.${field.name}`;
2921
- return /* @__PURE__ */ jsxRuntime.jsx(
2922
- designSystem.Grid.Item,
2923
- {
2924
- col: size,
2925
- s: 12,
2926
- xs: 12,
2927
- direction: "column",
2928
- alignItems: "stretch",
2929
- children: children({ ...field, name: completeFieldName })
2930
- },
2931
- completeFieldName
2932
- );
2933
- }) }, index22);
2934
- })
2935
- }
2936
- )
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 })
2937
2962
  },
2938
- key
2963
+ fieldName
2939
2964
  );
2940
- }),
2941
- /* @__PURE__ */ jsxRuntime.jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
2942
- id: index.getTranslation("containers.EditView.add.new-entry"),
2943
- defaultMessage: "Add an entry"
2944
2965
  }) })
2945
- ]
2946
- }
2947
- )
2966
+ },
2967
+ rowInd
2968
+ )) }) }) }) })
2969
+ ] }) }) })
2948
2970
  ] });
2949
2971
  };
2950
- const AccordionRoot = styledComponents.styled(designSystem.Accordion.Root)`
2951
- border: 1px solid
2952
- ${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
2953
- `;
2954
- const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
2955
- width: 100%;
2956
- display: flex;
2957
- justify-content: center;
2958
- border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
2959
- padding-inline: ${(props) => props.theme.spaces[6]};
2960
- padding-block: ${(props) => props.theme.spaces[3]};
2961
-
2962
- &:not([disabled]) {
2963
- cursor: pointer;
2964
-
2965
- &:hover {
2966
- background-color: ${(props) => props.theme.colors.primary100};
2967
- }
2968
- }
2969
-
2970
- span {
2971
- font-weight: 600;
2972
- font-size: 1.4rem;
2973
- line-height: 2.4rem;
2974
- }
2975
-
2976
- @media (prefers-reduced-motion: no-preference) {
2977
- transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
2972
+ const StyledBox = styledComponents.styled(designSystem.Box)`
2973
+ > div:first-child {
2974
+ box-shadow: ${({ theme }) => theme.shadows.tableShadow};
2978
2975
  }
2979
2976
  `;
2980
- const Component = ({
2981
- disabled,
2982
- index: index$1,
2983
- name: name2,
2984
- mainField = {
2985
- name: "id",
2986
- type: "integer"
2987
- },
2988
- children,
2989
- onDeleteComponent,
2990
- toggleCollapses,
2991
- __temp_key__,
2992
- ...dragProps
2993
- }) => {
2994
- const { formatMessage } = reactIntl.useIntl();
2995
- const displayValue = strapiAdmin.useForm("RepeatableComponent", (state) => {
2996
- return objects.getIn(state.values, [...name2.split("."), mainField.name]);
2997
- });
2998
- const accordionRef = React__namespace.useRef(null);
2999
- const componentKey = name2.split(".").slice(0, -1).join(".");
3000
- const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
3001
- type: `${useDragAndDrop.ItemTypes.COMPONENT}_${componentKey}`,
3002
- index: index$1,
3003
- item: {
3004
- index: index$1,
3005
- displayedValue: displayValue
3006
- },
3007
- onStart() {
3008
- toggleCollapses();
3009
- },
3010
- ...dragProps
3011
- });
3012
- React__namespace.useEffect(() => {
3013
- dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
3014
- }, [dragPreviewRef, index$1]);
3015
- const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
3016
- const composedBoxRefs = designSystem.useComposedRefs(
3017
- boxRef,
3018
- dropRef
3019
- );
3020
- 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: [
3021
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
3022
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: displayValue }),
3023
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Actions, { children: [
3024
- /* @__PURE__ */ jsxRuntime.jsx(
3025
- designSystem.IconButton,
3026
- {
3027
- variant: "ghost",
3028
- onClick: onDeleteComponent,
3029
- label: formatMessage({
3030
- id: index.getTranslation("containers.Edit.delete"),
3031
- defaultMessage: "Delete"
3032
- }),
3033
- children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
3034
- }
3035
- ),
3036
- /* @__PURE__ */ jsxRuntime.jsx(
3037
- designSystem.IconButton,
3038
- {
3039
- ref: composedAccordionRefs,
3040
- variant: "ghost",
3041
- onClick: (e) => e.stopPropagation(),
3042
- "data-handler-id": handlerId,
3043
- label: formatMessage({
3044
- id: index.getTranslation("components.DragHandle-label"),
3045
- defaultMessage: "Drag"
3046
- }),
3047
- onKeyDown: handleKeyDown,
3048
- children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
3049
- }
3050
- )
3051
- ] })
3052
- ] }),
3053
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
3054
- designSystem.Flex,
3055
- {
3056
- direction: "column",
3057
- alignItems: "stretch",
3058
- background: "neutral100",
3059
- padding: 6,
3060
- gap: 6,
3061
- children
3062
- }
3063
- ) })
3064
- ] }) });
3065
- };
3066
- const Preview$1 = () => {
3067
- return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
3068
- };
3069
- const StyledSpan = styledComponents.styled(designSystem.Box)`
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`
3070
2985
  display: block;
2986
+ background-color: ${({ theme }) => theme.colors.primary100};
3071
2987
  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
3072
2988
  outline-offset: -1px;
2989
+ padding: ${({ theme }) => theme.spaces[6]};
3073
2990
  `;
3074
- const ComponentInput = ({
2991
+ const ComponentContainer = styledComponents.styled(designSystem.Box)`
2992
+ list-style: none;
2993
+ padding: 0;
2994
+ margin: 0;
2995
+ `;
2996
+ const DynamicZoneLabel = ({
2997
+ hint,
3075
2998
  label,
3076
- required,
3077
- name: name2,
3078
- attribute,
3079
- disabled,
3080
2999
  labelAction,
3081
- ...props
3082
- }) => {
3083
- const { formatMessage } = reactIntl.useIntl();
3084
- const field = strapiAdmin.useField(name2);
3085
- const showResetComponent = !attribute.repeatable && field.value && !disabled;
3086
- const { components } = index.useDoc();
3087
- const handleInitialisationClick = () => {
3088
- const schema = components[attribute.component];
3089
- const form = createDefaultForm(schema, components);
3090
- const data = transformDocument(schema, components)(form);
3091
- field.onChange(name2, data);
3092
- };
3093
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, required, children: [
3094
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
3095
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { action: labelAction, children: [
3096
- label,
3097
- attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3098
- " (",
3099
- Array.isArray(field.value) ? field.value.length : 0,
3100
- ")"
3101
- ] })
3102
- ] }),
3103
- showResetComponent && /* @__PURE__ */ jsxRuntime.jsx(
3104
- designSystem.IconButton,
3105
- {
3106
- label: formatMessage({
3107
- id: index.getTranslation("components.reset-entry"),
3108
- defaultMessage: "Reset Entry"
3109
- }),
3110
- variant: "ghost",
3111
- onClick: () => {
3112
- field.onChange(name2, null);
3113
- },
3114
- children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
3115
- }
3116
- )
3117
- ] }),
3118
- !attribute.repeatable && !field.value && /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
3119
- !attribute.repeatable && field.value ? /* @__PURE__ */ jsxRuntime.jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
3120
- attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
3121
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
3122
- ] });
3123
- };
3124
- const MemoizedComponentInput = React__namespace.memo(ComponentInput);
3125
- const AddComponentButton = ({
3126
- hasError,
3127
- isDisabled,
3128
- isOpen,
3129
- children,
3130
- onClick
3000
+ name: name2,
3001
+ numberOfComponents = 0,
3002
+ required
3131
3003
  }) => {
3132
- return /* @__PURE__ */ jsxRuntime.jsx(
3133
- StyledButton,
3004
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
3005
+ designSystem.Box,
3134
3006
  {
3135
- type: "button",
3136
- onClick,
3137
- disabled: isDisabled,
3007
+ paddingTop: 3,
3008
+ paddingBottom: 3,
3009
+ paddingRight: 4,
3010
+ paddingLeft: 4,
3011
+ borderRadius: "26px",
3138
3012
  background: "neutral0",
3139
- style: { cursor: isDisabled ? "not-allowed" : "pointer" },
3140
- variant: "tertiary",
3141
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "span", gap: 2, children: [
3142
- /* @__PURE__ */ jsxRuntime.jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
3143
- /* @__PURE__ */ jsxRuntime.jsx(
3144
- AddComponentTitle,
3145
- {
3146
- variant: "pi",
3147
- fontWeight: "bold",
3148
- textColor: hasError && !isOpen ? "danger600" : "neutral500",
3149
- children
3150
- }
3151
- )
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 }) })
3152
3030
  ] })
3153
3031
  }
3154
- );
3032
+ ) });
3155
3033
  };
3156
- const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
3157
- height: ${({ theme }) => theme.spaces[6]};
3158
- width: ${({ theme }) => theme.spaces[6]};
3159
- transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
3160
-
3161
- > circle {
3162
- fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
3163
- }
3164
- > path {
3165
- fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
3034
+ const [DynamicZoneProvider, useDynamicZone] = strapiAdmin.createContext(
3035
+ "DynamicZone",
3036
+ {
3037
+ isInDynamicZone: false
3166
3038
  }
3167
- `;
3168
- const AddComponentTitle = styledComponents.styled(designSystem.Typography)``;
3169
- const StyledButton = styledComponents.styled(designSystem.Button)`
3170
- border-radius: 26px;
3171
- border-color: ${({ theme }) => theme.colors.neutral150};
3172
- box-shadow: ${({ theme }) => theme.shadows.filterShadow};
3173
- height: 5rem;
3174
-
3175
- &:hover {
3176
- ${AddComponentTitle} {
3177
- color: ${({ theme }) => theme.colors.primary600};
3178
- }
3179
-
3180
- ${StyledAddIcon} {
3181
- > circle {
3182
- fill: ${({ theme }) => theme.colors.primary600};
3183
- }
3184
- > path {
3185
- 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] = [];
3186
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
+ });
3187
3099
  }
3188
- }
3189
- &:active {
3190
- ${AddComponentTitle} {
3191
- 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" });
3192
3165
  }
3193
- ${StyledAddIcon} {
3194
- > circle {
3195
- fill: ${({ theme }) => theme.colors.primary600};
3196
- }
3197
- > path {
3198
- fill: ${({ theme }) => theme.colors.neutral100};
3199
- }
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
+ );
3200
3176
  }
3201
- }
3202
- `;
3203
- const ComponentCategory = ({
3204
- category,
3205
- components = [],
3206
- variant = "primary",
3207
- onAddComponent
3208
- }) => {
3209
- const { formatMessage } = reactIntl.useIntl();
3210
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: category, children: [
3211
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { variant, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
3212
- /* @__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(
3213
- ComponentBox,
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
+ );
3185
+ }
3186
+ return formatMessage(
3214
3187
  {
3215
- tag: "button",
3216
- type: "button",
3217
- background: "neutral100",
3218
- justifyContent: "center",
3219
- onClick: onAddComponent(uid),
3220
- hasRadius: true,
3221
- height: "8.4rem",
3222
- shrink: 0,
3223
- borderColor: "neutral200",
3224
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
3225
- /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { color: "currentColor", background: "primary200", icon }),
3226
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: displayName })
3227
- ] })
3188
+ id: index.getTranslation("components.DynamicZone.add-component"),
3189
+ defaultMessage: "Add a component to {componentName}"
3228
3190
  },
3229
- uid
3230
- )) }) })
3231
- ] });
3232
- };
3233
- const Grid = styledComponents.styled(designSystem.Box)`
3234
- display: grid;
3235
- grid-template-columns: repeat(auto-fit, 14rem);
3236
- grid-gap: ${({ theme }) => theme.spaces[1]};
3237
- `;
3238
- const ComponentBox = styledComponents.styled(designSystem.Flex)`
3239
- color: ${({ theme }) => theme.colors.neutral600};
3240
- cursor: pointer;
3241
-
3242
- @media (prefers-reduced-motion: no-preference) {
3243
- transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
3244
- }
3245
-
3246
- &:focus,
3247
- &:hover {
3248
- border: 1px solid ${({ theme }) => theme.colors.primary200};
3249
- background: ${({ theme }) => theme.colors.primary100};
3250
- color: ${({ theme }) => theme.colors.primary600};
3251
- }
3252
- `;
3253
- const ComponentPicker = ({
3254
- dynamicComponentsByCategory = {},
3255
- isOpen,
3256
- onClickAddComponent
3257
- }) => {
3258
- const { formatMessage } = reactIntl.useIntl();
3259
- const handleAddComponentToDz = (componentUid) => () => {
3260
- onClickAddComponent(componentUid);
3191
+ { componentName: label || name2 }
3192
+ );
3261
3193
  };
3262
- if (!isOpen) {
3263
- return null;
3264
- }
3265
- return /* @__PURE__ */ jsxRuntime.jsxs(
3266
- designSystem.Box,
3267
- {
3268
- paddingTop: 6,
3269
- paddingBottom: 6,
3270
- paddingLeft: 5,
3271
- paddingRight: 5,
3272
- background: "neutral0",
3273
- shadow: "tableShadow",
3274
- borderColor: "neutral150",
3275
- hasRadius: true,
3276
- children: [
3277
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral600", children: formatMessage({
3278
- id: index.getTranslation("components.DynamicZone.ComponentPicker-label"),
3279
- defaultMessage: "Pick one component"
3280
- }) }) }),
3281
- /* @__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(
3282
- ComponentCategory,
3283
- {
3284
- category,
3285
- components,
3286
- onAddComponent: handleAddComponentToDz,
3287
- variant: index2 % 2 === 1 ? "primary" : "secondary"
3288
- },
3289
- category
3290
- )) }) })
3291
- ]
3292
- }
3293
- );
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
+ ] }) });
3294
3261
  };
3295
3262
  const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
3296
3263
  const { formatMessage } = reactIntl.useIntl();
@@ -3364,7 +3331,7 @@ const UIDInput = React__namespace.forwardRef(
3364
3331
  const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
3365
3332
  const isCloning = reactRouterDom.useMatch(index.CLONE_PATH) !== null;
3366
3333
  const field = strapiAdmin.useField(name2);
3367
- const debouncedValue = useDebounce.useDebounce(field.value, 300);
3334
+ const debouncedValue = usePrev.useDebounce(field.value, 300);
3368
3335
  const hasChanged = debouncedValue !== field.initialValue;
3369
3336
  const { toggleNotification } = strapiAdmin.useNotification();
3370
3337
  const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
@@ -3770,8 +3737,7 @@ const Wrapper = styledComponents.styled.div`
3770
3737
  `;
3771
3738
  var listRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]))(\s*)/, emptyListRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]|[*+-]|(\d+)[.)])(\s*)$/, unorderedListRE = /[*+-]\s/;
3772
3739
  function newlineAndIndentContinueMarkdownList(cm) {
3773
- if (cm.getOption("disableInput"))
3774
- return CodeMirror__default.default.Pass;
3740
+ if (cm.getOption("disableInput")) return CodeMirror__default.default.Pass;
3775
3741
  var ranges = cm.listSelections(), replacements = [];
3776
3742
  for (var i = 0; i < ranges.length; i++) {
3777
3743
  var pos = ranges[i].head;
@@ -3805,8 +3771,7 @@ function newlineAndIndentContinueMarkdownList(cm) {
3805
3771
  var numbered = !(unorderedListRE.test(match[2]) || match[2].indexOf(">") >= 0);
3806
3772
  var bullet = numbered ? parseInt(match[3], 10) + 1 + match[4] : match[2].replace("x", " ");
3807
3773
  replacements[i] = "\n" + indent + bullet + after;
3808
- if (numbered)
3809
- incrementRemainingMarkdownListNumbers(cm, pos);
3774
+ if (numbered) incrementRemainingMarkdownListNumbers(cm, pos);
3810
3775
  }
3811
3776
  }
3812
3777
  cm.replaceSelections(replacements);
@@ -3824,10 +3789,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
3824
3789
  var newNumber = parseInt(startItem[3], 10) + lookAhead - skipCount;
3825
3790
  var nextNumber = parseInt(nextItem[3], 10), itemNumber = nextNumber;
3826
3791
  if (startIndent === nextIndent && !isNaN(nextNumber)) {
3827
- if (newNumber === nextNumber)
3828
- itemNumber = nextNumber + 1;
3829
- if (newNumber > nextNumber)
3830
- itemNumber = newNumber + 1;
3792
+ if (newNumber === nextNumber) itemNumber = nextNumber + 1;
3793
+ if (newNumber > nextNumber) itemNumber = newNumber + 1;
3831
3794
  cm.replaceRange(
3832
3795
  nextLine.replace(listRE, nextIndent + itemNumber + nextItem[4] + nextItem[5]),
3833
3796
  {
@@ -3840,10 +3803,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
3840
3803
  }
3841
3804
  );
3842
3805
  } else {
3843
- if (startIndent.length > nextIndent.length)
3844
- return;
3845
- if (startIndent.length < nextIndent.length && lookAhead === 1)
3846
- return;
3806
+ if (startIndent.length > nextIndent.length) return;
3807
+ if (startIndent.length < nextIndent.length && lookAhead === 1) return;
3847
3808
  skipCount += 1;
3848
3809
  }
3849
3810
  }
@@ -4921,7 +4882,7 @@ const Wysiwyg = React__namespace.forwardRef(
4921
4882
  const handleSelectAssets = (files) => {
4922
4883
  const formattedFiles = files.map((f) => ({
4923
4884
  alt: f.alternativeText || f.name,
4924
- url: useDebounce.prefixFileUrlWithBackendUrl(f.url),
4885
+ url: usePrev.prefixFileUrlWithBackendUrl(f.url),
4925
4886
  mime: f.mime
4926
4887
  }));
4927
4888
  insertFile(editorRef, formattedFiles);
@@ -5025,571 +4986,632 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
5025
4986
  disabled: fieldIsDisabled
5026
4987
  }
5027
4988
  );
5028
- }
5029
- const addedInputTypes = Object.keys(fields);
5030
- if (!attributeHasCustomFieldProperty(props.attribute) && addedInputTypes.includes(props.type)) {
5031
- const CustomInput = fields[props.type];
5032
- return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, hint, disabled: fieldIsDisabled });
5033
- }
5034
- switch (props.type) {
5035
- case "blocks":
5036
- return /* @__PURE__ */ jsxRuntime.jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
5037
- case "component":
5038
- return /* @__PURE__ */ jsxRuntime.jsx(
5039
- MemoizedComponentInput,
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;
5047
+ }
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
+ }
5076
+ );
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 };
5088
+ }
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};`}
5103
+ }
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);
5120
+ }
5121
+ return /* @__PURE__ */ jsxRuntime.jsx(
5122
+ designSystem.Box,
5123
+ {
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__;
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
+ )
5298
+ );
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(
5040
5308
  {
5041
- ...props,
5042
- hint,
5043
- layout: components[props.attribute.component].layout,
5044
- disabled: fieldIsDisabled,
5045
- 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}`
5046
5314
  }
5047
- );
5048
- case "dynamiczone":
5049
- return /* @__PURE__ */ jsxRuntime.jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
5050
- case "relation":
5051
- return /* @__PURE__ */ jsxRuntime.jsx(Relations.MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
5052
- case "richtext":
5053
- return /* @__PURE__ */ jsxRuntime.jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
5054
- case "uid":
5055
- return /* @__PURE__ */ jsxRuntime.jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
5056
- case "enumeration":
5057
- return /* @__PURE__ */ jsxRuntime.jsx(
5058
- strapiAdmin.InputRenderer,
5315
+ )
5316
+ );
5317
+ };
5318
+ const handleGrabItem = (index$1) => {
5319
+ setLiveText(
5320
+ formatMessage(
5059
5321
  {
5060
- ...props,
5061
- hint,
5062
- options: props.attribute.enum.map((value) => ({ value })),
5063
- type: props.customField ? "custom-field" : props.type,
5064
- 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)
5065
5328
  }
5066
- );
5067
- default:
5068
- const { unique: _unique, mainField: _mainField, ...restProps } = props;
5069
- return /* @__PURE__ */ jsxRuntime.jsx(
5070
- strapiAdmin.InputRenderer,
5329
+ )
5330
+ );
5331
+ };
5332
+ const handleDropItem = (index$1) => {
5333
+ setLiveText(
5334
+ formatMessage(
5071
5335
  {
5072
- ...restProps,
5073
- hint,
5074
- type: props.customField ? "custom-field" : props.type,
5075
- 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)
5076
5342
  }
5077
- );
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 });
5078
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
+ ] });
5079
5431
  };
5080
- const attributeHasCustomFieldProperty = (attribute) => "customField" in attribute && typeof attribute.customField === "string";
5081
- const useFieldHint = (hint = void 0, attribute) => {
5082
- const { formatMessage } = reactIntl.useIntl();
5083
- const { maximum, minimum } = getMinMax(attribute);
5084
- if (!maximum && !minimum) {
5085
- return hint;
5086
- }
5087
- const units = !["biginteger", "integer", "number", "dynamiczone", "component"].includes(
5088
- attribute.type
5089
- ) ? formatMessage(
5090
- {
5091
- id: "content-manager.form.Input.hint.character.unit",
5092
- defaultMessage: "{maxValue, plural, one { character} other { characters}}"
5093
- },
5094
- {
5095
- maxValue: Math.max(minimum || 0, maximum || 0)
5096
- }
5097
- ) : null;
5098
- const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
5099
- return formatMessage(
5100
- {
5101
- id: "content-manager.form.Input.hint.text",
5102
- defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
5103
- },
5104
- {
5105
- min: minimum,
5106
- max: maximum,
5107
- description: hint,
5108
- unit: units,
5109
- divider: hasMinAndMax ? formatMessage({
5110
- id: "content-manager.form.Input.hint.minMaxDivider",
5111
- defaultMessage: " / "
5112
- }) : null,
5113
- 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};
5114
5449
  }
5115
- );
5116
- };
5117
- const getMinMax = (attribute) => {
5118
- if ("min" in attribute || "max" in attribute) {
5119
- return {
5120
- maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
5121
- minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
5122
- };
5123
- } else if ("maxLength" in attribute || "minLength" in attribute) {
5124
- return { maximum: attribute.maxLength, minimum: attribute.minLength };
5125
- } else {
5126
- return { maximum: void 0, minimum: void 0 };
5127
5450
  }
5128
- };
5129
- const MemoizedInputRenderer = React.memo(InputRenderer);
5130
- const DynamicComponent = ({
5131
- componentUid,
5132
- disabled,
5133
- index: index$1,
5134
- name: name2,
5135
- onRemoveComponentClick,
5136
- onMoveComponent,
5137
- onGrabItem,
5138
- onDropItem,
5139
- onCancel,
5140
- dynamicComponentsByCategory = {},
5141
- onAddComponent
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 = ({
5463
+ disabled,
5464
+ index: index$1,
5465
+ name: name2,
5466
+ mainField = {
5467
+ name: "id",
5468
+ type: "integer"
5469
+ },
5470
+ children,
5471
+ onDeleteComponent,
5472
+ toggleCollapses,
5473
+ __temp_key__,
5474
+ ...dragProps
5142
5475
  }) => {
5143
5476
  const { formatMessage } = reactIntl.useIntl();
5144
- const formValues = strapiAdmin.useForm("DynamicComponent", (state) => state.values);
5145
- const {
5146
- edit: { components }
5147
- } = index.useDocLayout();
5148
- const title = React__namespace.useMemo(() => {
5149
- const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
5150
- const mainFieldValue = objects.getIn(formValues, `${name2}.${index$1}.${mainField}`);
5151
- const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
5152
- const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
5153
- return mainValue;
5154
- }, [componentUid, components, formValues, name2, index$1]);
5155
- const { icon, displayName } = React__namespace.useMemo(() => {
5156
- const [category] = componentUid.split(".");
5157
- const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
5158
- (component) => component.uid === componentUid
5159
- ) ?? { icon: null, displayName: null };
5160
- return { icon: icon2, displayName: displayName2 };
5161
- }, [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(".");
5162
5482
  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
5163
- type: `${useDragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name2}`,
5483
+ type: `${useDragAndDrop.ItemTypes.COMPONENT}_${componentKey}`,
5164
5484
  index: index$1,
5165
5485
  item: {
5166
5486
  index: index$1,
5167
- displayedValue: `${displayName} ${title}`,
5168
- icon
5487
+ displayedValue: displayValue
5169
5488
  },
5170
- onMoveItem: onMoveComponent,
5171
- onDropItem,
5172
- onGrabItem,
5173
- onCancel
5489
+ onStart() {
5490
+ toggleCollapses();
5491
+ },
5492
+ ...dragProps
5174
5493
  });
5175
5494
  React__namespace.useEffect(() => {
5176
5495
  dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
5177
5496
  }, [dragPreviewRef, index$1]);
5178
- const accordionValue = React__namespace.useId();
5179
- const { value = [], rawError } = strapiAdmin.useField(`${name2}.${index$1}`);
5180
- const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
5181
- React__namespace.useEffect(() => {
5182
- if (rawError && value) {
5183
- setCollapseToOpen(accordionValue);
5184
- }
5185
- }, [rawError, value, accordionValue]);
5186
- const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
5187
- const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5188
- /* @__PURE__ */ jsxRuntime.jsx(
5189
- designSystem.IconButton,
5190
- {
5191
- variant: "ghost",
5192
- 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,
5193
5508
  {
5194
- id: index.getTranslation("components.DynamicZone.delete-label"),
5195
- defaultMessage: "Delete {name}"
5196
- },
5197
- { 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
+ }
5198
5517
  ),
5199
- onClick: onRemoveComponentClick,
5200
- children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
5201
- }
5202
- ),
5203
- /* @__PURE__ */ jsxRuntime.jsx(
5204
- designSystem.IconButton,
5205
- {
5206
- variant: "ghost",
5207
- onClick: (e) => e.stopPropagation(),
5208
- "data-handler-id": handlerId,
5209
- ref: dragRef,
5210
- label: formatMessage({
5211
- id: index.getTranslation("components.DragHandle-label"),
5212
- defaultMessage: "Drag"
5213
- }),
5214
- onKeyDown: handleKeyDown,
5215
- children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
5216
- }
5217
- ),
5218
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
5219
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
5220
- /* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false }),
5221
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "span", children: formatMessage({
5222
- id: index.getTranslation("components.DynamicZone.more-actions"),
5223
- defaultMessage: "More actions"
5224
- }) })
5225
- ] }),
5226
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Content, { children: [
5227
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
5228
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
5229
- id: index.getTranslation("components.DynamicZone.add-item-above"),
5230
- defaultMessage: "Add component above"
5231
- }) }),
5232
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
5233
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
5234
- components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1), children: displayName2 }, componentUid))
5235
- ] }, category)) })
5236
- ] }),
5237
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
5238
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
5239
- id: index.getTranslation("components.DynamicZone.add-item-below"),
5240
- defaultMessage: "Add component below"
5241
- }) }),
5242
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
5243
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
5244
- components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1 + 1), children: displayName2 }, componentUid))
5245
- ] }, category)) })
5246
- ] })
5247
- ] })
5248
- ] })
5249
- ] });
5250
- const accordionTitle = title ? `${displayName} ${title}` : displayName;
5251
- return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
5252
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Rectangle, { background: "neutral200" }) }),
5253
- /* @__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: [
5254
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
5255
5518
  /* @__PURE__ */ jsxRuntime.jsx(
5256
- designSystem.Accordion.Trigger,
5519
+ designSystem.IconButton,
5257
5520
  {
5258
- icon: icon && ComponentIcon.COMPONENT_ICONS[icon] ? ComponentIcon.COMPONENT_ICONS[icon] : ComponentIcon.COMPONENT_ICONS.dashboard,
5259
- 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, {})
5260
5531
  }
5261
- ),
5262
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Actions, { children: accordionActions })
5263
- ] }),
5264
- /* @__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(
5265
- designSystem.Grid.Item,
5266
- {
5267
- col: 12,
5268
- s: 12,
5269
- xs: 12,
5270
- direction: "column",
5271
- alignItems: "stretch",
5272
- children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
5273
- const fieldName = `${name2}.${index$1}.${field.name}`;
5274
- return /* @__PURE__ */ jsxRuntime.jsx(
5275
- designSystem.Grid.Item,
5276
- {
5277
- col: size,
5278
- s: 12,
5279
- xs: 12,
5280
- direction: "column",
5281
- alignItems: "stretch",
5282
- children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field, name: fieldName })
5283
- },
5284
- fieldName
5285
- );
5286
- }) })
5287
- },
5288
- rowInd
5289
- )) }) }) }) })
5290
- ] }) }) })
5291
- ] });
5292
- };
5293
- const StyledBox = styledComponents.styled(designSystem.Box)`
5294
- > div:first-child {
5295
- box-shadow: ${({ theme }) => theme.shadows.tableShadow};
5296
- }
5297
- `;
5298
- const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
5299
- border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
5300
- `;
5301
- const Rectangle = styledComponents.styled(designSystem.Box)`
5302
- width: ${({ theme }) => theme.spaces[2]};
5303
- height: ${({ theme }) => theme.spaces[4]};
5304
- `;
5305
- const Preview = styledComponents.styled.span`
5306
- display: block;
5307
- background-color: ${({ theme }) => theme.colors.primary100};
5308
- outline: 1px dashed ${({ theme }) => theme.colors.primary500};
5309
- outline-offset: -1px;
5310
- padding: ${({ theme }) => theme.spaces[6]};
5311
- `;
5312
- const ComponentContainer = styledComponents.styled(designSystem.Box)`
5313
- list-style: none;
5314
- padding: 0;
5315
- margin: 0;
5316
- `;
5317
- const DynamicZoneLabel = ({
5318
- hint,
5319
- label,
5320
- labelAction,
5321
- name: name2,
5322
- numberOfComponents = 0,
5323
- required
5324
- }) => {
5325
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
5326
- designSystem.Box,
5327
- {
5328
- paddingTop: 3,
5329
- paddingBottom: 3,
5330
- paddingRight: 4,
5331
- paddingLeft: 4,
5332
- borderRadius: "26px",
5333
- background: "neutral0",
5334
- shadow: "filterShadow",
5335
- color: "neutral500",
5336
- children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", justifyContent: "center", children: [
5337
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { maxWidth: "35.6rem", children: [
5338
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
5339
- label || name2,
5340
- " "
5341
- ] }),
5342
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
5343
- "(",
5344
- numberOfComponents,
5345
- ")"
5346
- ] }),
5347
- required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: "*" }),
5348
- labelAction && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 1, children: labelAction })
5349
- ] }),
5350
- 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
+ )
5351
5533
  ] })
5352
- }
5353
- ) });
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" });
5354
5550
  };
5355
- const [DynamicZoneProvider, useDynamicZone] = strapiAdmin.createContext(
5356
- "DynamicZone",
5357
- {
5358
- isInDynamicZone: false
5359
- }
5360
- );
5361
- const DynamicZone = ({
5362
- attribute,
5363
- disabled: disabledProp,
5364
- 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 = ({
5365
5557
  label,
5366
- labelAction,
5558
+ required,
5367
5559
  name: name2,
5368
- required = false
5560
+ attribute,
5561
+ disabled,
5562
+ labelAction,
5563
+ ...props
5369
5564
  }) => {
5370
- const { max = Infinity, min = -Infinity } = attribute ?? {};
5371
- const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
5372
- const [liveText, setLiveText] = React__namespace.useState("");
5373
- const { components, isLoading } = index.useDoc();
5374
- const disabled = disabledProp || isLoading;
5375
- const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm(
5376
- "DynamicZone",
5377
- ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
5378
- addFieldRow: addFieldRow2,
5379
- removeFieldRow: removeFieldRow2,
5380
- moveFieldRow: moveFieldRow2
5381
- })
5382
- );
5383
- const { value = [], error } = strapiAdmin.useField(name2);
5384
- const dynamicComponentsByCategory = React__namespace.useMemo(() => {
5385
- return attribute.components.reduce((acc, componentUid) => {
5386
- const { category, info } = components[componentUid] ?? { info: {} };
5387
- const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
5388
- if (!acc[category]) {
5389
- acc[category] = [];
5390
- }
5391
- acc[category] = [...acc[category], component];
5392
- return acc;
5393
- }, {});
5394
- }, [attribute.components, components]);
5395
5565
  const { formatMessage } = reactIntl.useIntl();
5396
- const { toggleNotification } = strapiAdmin.useNotification();
5397
- const dynamicDisplayedComponentsLength = value.length;
5398
- const handleAddComponent = (uid, position) => {
5399
- setAddComponentIsOpen(false);
5400
- const schema = components[uid];
5401
- const form = createDefaultForm(schema, components);
5402
- const transformations = pipe__default.default(transformDocument(schema, components), (data2) => ({
5403
- ...data2,
5404
- __component: uid
5405
- }));
5406
- const data = transformations(form);
5407
- addFieldRow(name2, data, position);
5408
- };
5409
- const handleClickOpenPicker = () => {
5410
- if (dynamicDisplayedComponentsLength < max) {
5411
- setAddComponentIsOpen((prev) => !prev);
5412
- } else {
5413
- toggleNotification({
5414
- type: "info",
5415
- message: formatMessage({
5416
- id: index.getTranslation("components.notification.info.maximum-requirement")
5417
- })
5418
- });
5419
- }
5420
- };
5421
- const handleMoveComponent = (newIndex, currentIndex) => {
5422
- setLiveText(
5423
- formatMessage(
5424
- {
5425
- id: index.getTranslation("dnd.reorder"),
5426
- defaultMessage: "{item}, moved. New position in list: {position}."
5427
- },
5428
- {
5429
- item: `${name2}.${currentIndex}`,
5430
- position: getItemPos(newIndex)
5431
- }
5432
- )
5433
- );
5434
- moveFieldRow(name2, currentIndex, newIndex);
5435
- };
5436
- const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
5437
- const handleCancel = (index$1) => {
5438
- setLiveText(
5439
- formatMessage(
5440
- {
5441
- id: index.getTranslation("dnd.cancel-item"),
5442
- defaultMessage: "{item}, dropped. Re-order cancelled."
5443
- },
5444
- {
5445
- item: `${name2}.${index$1}`
5446
- }
5447
- )
5448
- );
5449
- };
5450
- const handleGrabItem = (index$1) => {
5451
- setLiveText(
5452
- formatMessage(
5453
- {
5454
- id: index.getTranslation("dnd.grab-item"),
5455
- defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
5456
- },
5457
- {
5458
- item: `${name2}.${index$1}`,
5459
- position: getItemPos(index$1)
5460
- }
5461
- )
5462
- );
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);
5463
5574
  };
5464
- const handleDropItem = (index$1) => {
5465
- setLiveText(
5466
- formatMessage(
5467
- {
5468
- id: index.getTranslation("dnd.drop-item"),
5469
- defaultMessage: `{item}, dropped. Final position in list: {position}.`
5470
- },
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,
5471
5587
  {
5472
- item: `${name2}.${index$1}`,
5473
- 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, {})
5474
5597
  }
5475
5598
  )
5476
- );
5477
- };
5478
- const handleRemoveComponent = (name22, currentIndex) => () => {
5479
- removeFieldRow(name22, currentIndex);
5480
- };
5481
- const hasError = error !== void 0;
5482
- const renderButtonLabel = () => {
5483
- if (addComponentIsOpen) {
5484
- return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
5485
- }
5486
- if (hasError && dynamicDisplayedComponentsLength > max) {
5487
- return formatMessage(
5488
- {
5489
- id: index.getTranslation(`components.DynamicZone.extra-components`),
5490
- defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
5491
- },
5492
- {
5493
- number: dynamicDisplayedComponentsLength - max
5494
- }
5495
- );
5496
- }
5497
- if (hasError && dynamicDisplayedComponentsLength < min) {
5498
- return formatMessage(
5499
- {
5500
- id: index.getTranslation(`components.DynamicZone.missing-components`),
5501
- defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
5502
- },
5503
- { number: min - dynamicDisplayedComponentsLength }
5504
- );
5505
- }
5506
- return formatMessage(
5507
- {
5508
- id: index.getTranslation("components.DynamicZone.add-component"),
5509
- defaultMessage: "Add a component to {componentName}"
5510
- },
5511
- { componentName: label || name2 }
5512
- );
5513
- };
5514
- const level = Relations.useComponent("DynamicZone", (state) => state.level);
5515
- const ariaDescriptionId = React__namespace.useId();
5516
- return /* @__PURE__ */ jsxRuntime.jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
5517
- dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
5518
- /* @__PURE__ */ jsxRuntime.jsx(
5519
- DynamicZoneLabel,
5520
- {
5521
- hint,
5522
- label,
5523
- labelAction,
5524
- name: name2,
5525
- numberOfComponents: dynamicDisplayedComponentsLength,
5526
- required
5527
- }
5528
- ),
5529
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
5530
- id: index.getTranslation("dnd.instructions"),
5531
- defaultMessage: `Press spacebar to grab and re-order`
5532
- }) }),
5533
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
5534
- /* @__PURE__ */ jsxRuntime.jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index2) => /* @__PURE__ */ jsxRuntime.jsx(
5535
- Relations.ComponentProvider,
5536
- {
5537
- level: level + 1,
5538
- uid: field.__component,
5539
- id: field.id,
5540
- type: "dynamiczone",
5541
- children: /* @__PURE__ */ jsxRuntime.jsx(
5542
- DynamicComponent,
5543
- {
5544
- disabled,
5545
- name: name2,
5546
- index: index2,
5547
- componentUid: field.__component,
5548
- onMoveComponent: handleMoveComponent,
5549
- onRemoveComponentClick: handleRemoveComponent(name2, index2),
5550
- onCancel: handleCancel,
5551
- onDropItem: handleDropItem,
5552
- onGrabItem: handleGrabItem,
5553
- onAddComponent: handleAddComponent,
5554
- dynamicComponentsByCategory
5555
- }
5556
- )
5557
- },
5558
- field.__temp_key__
5559
- )) })
5560
5599
  ] }),
5561
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
5562
- AddComponentButton,
5563
- {
5564
- hasError,
5565
- isDisabled: disabled,
5566
- isOpen: addComponentIsOpen,
5567
- onClick: handleClickOpenPicker,
5568
- children: renderButtonLabel()
5569
- }
5570
- ) }),
5571
- /* @__PURE__ */ jsxRuntime.jsx(
5572
- ComponentPicker,
5573
- {
5574
- dynamicComponentsByCategory,
5575
- isOpen: addComponentIsOpen,
5576
- onClickAddComponent: handleAddComponent
5577
- }
5578
- )
5579
- ] }) });
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
+ ] });
5580
5605
  };
5606
+ const MemoizedComponentInput = React__namespace.memo(ComponentInput);
5581
5607
  exports.DynamicZone = DynamicZone;
5608
+ exports.FormLayout = FormLayout;
5582
5609
  exports.MemoizedBlocksInput = MemoizedBlocksInput;
5583
5610
  exports.MemoizedComponentInput = MemoizedComponentInput;
5584
- exports.MemoizedInputRenderer = MemoizedInputRenderer;
5585
5611
  exports.MemoizedUIDInput = MemoizedUIDInput;
5586
5612
  exports.MemoizedWysiwyg = MemoizedWysiwyg;
5587
5613
  exports.NotAllowedInput = NotAllowedInput;
5588
- exports.createDefaultForm = createDefaultForm;
5589
- exports.prepareTempKeys = prepareTempKeys;
5590
- exports.removeFieldsThatDontExistOnSchema = removeFieldsThatDontExistOnSchema;
5591
- exports.transformDocument = transformDocument;
5592
5614
  exports.useDynamicZone = useDynamicZone;
5593
5615
  exports.useFieldHint = useFieldHint;
5594
5616
  exports.useLazyComponents = useLazyComponents;
5595
- //# sourceMappingURL=Field-BhN0lyyZ.js.map
5617
+ //# sourceMappingURL=Input-B7sapvBG.js.map