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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/dist/_chunks/CardDragPreview-C0QyJgRA.js.map +1 -1
  2. package/dist/_chunks/CardDragPreview-DOxamsuj.mjs.map +1 -1
  3. package/dist/_chunks/{ComponentConfigurationPage-DqB7veg_.mjs → ComponentConfigurationPage-9_4yUE9L.mjs} +3 -3
  4. package/dist/_chunks/{ComponentConfigurationPage-DqB7veg_.mjs.map → ComponentConfigurationPage-9_4yUE9L.mjs.map} +1 -1
  5. package/dist/_chunks/{ComponentConfigurationPage-Bmwd-G2q.js → ComponentConfigurationPage-DBSh-kET.js} +4 -5
  6. package/dist/_chunks/{ComponentConfigurationPage-Bmwd-G2q.js.map → ComponentConfigurationPage-DBSh-kET.js.map} +1 -1
  7. package/dist/_chunks/{ComponentIcon-BXdiCGQp.js → ComponentIcon-CRbtQEUV.js} +2 -3
  8. package/dist/_chunks/{ComponentIcon-BXdiCGQp.js.map → ComponentIcon-CRbtQEUV.js.map} +1 -1
  9. package/dist/_chunks/ComponentIcon-u4bIXTFY.mjs.map +1 -1
  10. package/dist/_chunks/{EditConfigurationPage-DmruXqgR.js → EditConfigurationPage-Bl_U2JgH.js} +4 -5
  11. package/dist/_chunks/{EditConfigurationPage-DmruXqgR.js.map → EditConfigurationPage-Bl_U2JgH.js.map} +1 -1
  12. package/dist/_chunks/{EditConfigurationPage-CDLVqqay.mjs → EditConfigurationPage-COe6hjPC.mjs} +3 -3
  13. package/dist/_chunks/{EditConfigurationPage-CDLVqqay.mjs.map → EditConfigurationPage-COe6hjPC.mjs.map} +1 -1
  14. package/dist/_chunks/{EditViewPage-0zrWXtMz.js → EditViewPage-D4yFJET6.js} +14 -78
  15. package/dist/_chunks/EditViewPage-D4yFJET6.js.map +1 -0
  16. package/dist/_chunks/{EditViewPage-BgcbLW7w.mjs → EditViewPage-DrmVmYN0.mjs} +11 -74
  17. package/dist/_chunks/EditViewPage-DrmVmYN0.mjs.map +1 -0
  18. package/dist/_chunks/FieldTypeIcon-CMlNO8PE.mjs.map +1 -1
  19. package/dist/_chunks/FieldTypeIcon-Dnwq_IRF.js.map +1 -1
  20. package/dist/_chunks/{Form-CIDoAFoD.js → Form-C4rSaGsz.js} +5 -6
  21. package/dist/_chunks/{Form-CIDoAFoD.js.map → Form-C4rSaGsz.js.map} +1 -1
  22. package/dist/_chunks/{Form-WNWgTBtb.mjs → Form-DamaxNpG.mjs} +3 -3
  23. package/dist/_chunks/{Form-WNWgTBtb.mjs.map → Form-DamaxNpG.mjs.map} +1 -1
  24. package/dist/_chunks/{History-DEZDHwP0.mjs → History-D1PreDSY.mjs} +36 -10
  25. package/dist/_chunks/History-D1PreDSY.mjs.map +1 -0
  26. package/dist/_chunks/{History-BNvm2TK2.js → History-DTm8UCCQ.js} +47 -22
  27. package/dist/_chunks/History-DTm8UCCQ.js.map +1 -0
  28. package/dist/_chunks/{Field-BV7ZYdqe.js → Input-B7sapvBG.js} +1331 -1329
  29. package/dist/_chunks/Input-B7sapvBG.js.map +1 -0
  30. package/dist/_chunks/{Field-fTjqtEem.mjs → Input-CZ1YvjHR.mjs} +1245 -1243
  31. package/dist/_chunks/Input-CZ1YvjHR.mjs.map +1 -0
  32. package/dist/_chunks/{ListConfigurationPage-Ddz3G-It.mjs → ListConfigurationPage-Bbi32isk.mjs} +6 -5
  33. package/dist/_chunks/ListConfigurationPage-Bbi32isk.mjs.map +1 -0
  34. package/dist/_chunks/{ListConfigurationPage-B3FZwPHp.js → ListConfigurationPage-ysFMjKI3.js} +6 -6
  35. package/dist/_chunks/ListConfigurationPage-ysFMjKI3.js.map +1 -0
  36. package/dist/_chunks/{ListViewPage-BsLdw25U.mjs → ListViewPage-Bud_jBDQ.mjs} +55 -51
  37. package/dist/_chunks/ListViewPage-Bud_jBDQ.mjs.map +1 -0
  38. package/dist/_chunks/{ListViewPage-BEilNylQ.js → ListViewPage-DTuuxU3n.js} +61 -58
  39. package/dist/_chunks/ListViewPage-DTuuxU3n.js.map +1 -0
  40. package/dist/_chunks/{NoContentTypePage-BD2C-IMr.js → NoContentTypePage-CL7VVeYs.js} +2 -2
  41. package/dist/_chunks/{NoContentTypePage-BD2C-IMr.js.map → NoContentTypePage-CL7VVeYs.js.map} +1 -1
  42. package/dist/_chunks/{NoContentTypePage-D0jXEWKM.mjs → NoContentTypePage-DVhkugsf.mjs} +2 -2
  43. package/dist/_chunks/{NoContentTypePage-D0jXEWKM.mjs.map → NoContentTypePage-DVhkugsf.mjs.map} +1 -1
  44. package/dist/_chunks/{NoPermissionsPage-CIPqlrQq.mjs → NoPermissionsPage-CMdM-dCo.mjs} +2 -2
  45. package/dist/_chunks/{NoPermissionsPage-CIPqlrQq.mjs.map → NoPermissionsPage-CMdM-dCo.mjs.map} +1 -1
  46. package/dist/_chunks/{NoPermissionsPage-yNOvz9XO.js → NoPermissionsPage-v7I599vC.js} +2 -2
  47. package/dist/_chunks/{NoPermissionsPage-yNOvz9XO.js.map → NoPermissionsPage-v7I599vC.js.map} +1 -1
  48. package/dist/_chunks/{Preview-ot2fh0yZ.mjs → Preview-BNuU0SuQ.mjs} +74 -24
  49. package/dist/_chunks/Preview-BNuU0SuQ.mjs.map +1 -0
  50. package/dist/_chunks/{Preview-1cqLecKr.js → Preview-Cxq-uI6D.js} +73 -24
  51. package/dist/_chunks/Preview-Cxq-uI6D.js.map +1 -0
  52. package/dist/_chunks/{Relations-CfdwHP-0.mjs → Relations-C2Ahkrdg.mjs} +6 -8
  53. package/dist/_chunks/{Relations-CfdwHP-0.mjs.map → Relations-C2Ahkrdg.mjs.map} +1 -1
  54. package/dist/_chunks/{Relations-C3U9SKEb.js → Relations-CWS79QQn.js} +7 -10
  55. package/dist/_chunks/{Relations-C3U9SKEb.js.map → Relations-CWS79QQn.js.map} +1 -1
  56. package/dist/_chunks/{en-CHOp_xJv.js → en-BR48D_RH.js} +13 -3
  57. package/dist/_chunks/{en-CHOp_xJv.js.map → en-BR48D_RH.js.map} +1 -1
  58. package/dist/_chunks/{en-D_BMf0hT.mjs → en-D65uIF6Y.mjs} +13 -3
  59. package/dist/_chunks/{en-D_BMf0hT.mjs.map → en-D65uIF6Y.mjs.map} +1 -1
  60. package/dist/_chunks/{fr-B2Kyv8Z9.js → fr-C43IbhA_.js} +4 -1
  61. package/dist/_chunks/{fr-B2Kyv8Z9.js.map → fr-C43IbhA_.js.map} +1 -1
  62. package/dist/_chunks/{fr--pg5jUbt.mjs → fr-DBseuRuB.mjs} +4 -1
  63. package/dist/_chunks/{fr--pg5jUbt.mjs.map → fr-DBseuRuB.mjs.map} +1 -1
  64. package/dist/_chunks/hooks-BAaaKPS_.js.map +1 -1
  65. package/dist/_chunks/{index-Cg4RLIAw.js → index-DQsvBb_N.js} +518 -207
  66. package/dist/_chunks/index-DQsvBb_N.js.map +1 -0
  67. package/dist/_chunks/{index-BzUT1l9A.mjs → index-ZKrsjv-2.mjs} +536 -224
  68. package/dist/_chunks/index-ZKrsjv-2.mjs.map +1 -0
  69. package/dist/_chunks/{layout-Cj_1EKbm.js → layout-Cl0NhlQB.js} +5 -6
  70. package/dist/_chunks/{layout-Cj_1EKbm.js.map → layout-Cl0NhlQB.js.map} +1 -1
  71. package/dist/_chunks/{layout-C0QEDBAh.mjs → layout-fQk1rMk9.mjs} +4 -4
  72. package/dist/_chunks/{layout-C0QEDBAh.mjs.map → layout-fQk1rMk9.mjs.map} +1 -1
  73. package/dist/_chunks/objects-BcXOv6_9.js.map +1 -1
  74. package/dist/_chunks/objects-D6yBsdmx.mjs.map +1 -1
  75. package/dist/_chunks/{relations-hDOgJy2R.js → relations-BRfBxVbX.js} +2 -2
  76. package/dist/_chunks/{relations-hDOgJy2R.js.map → relations-BRfBxVbX.js.map} +1 -1
  77. package/dist/_chunks/{relations-CgPG3AwU.mjs → relations-BakOFl_1.mjs} +2 -2
  78. package/dist/_chunks/{relations-CgPG3AwU.mjs.map → relations-BakOFl_1.mjs.map} +1 -1
  79. package/dist/_chunks/{useDragAndDrop-J0TUUbR6.js → useDragAndDrop-BMtgCYzL.js} +5 -9
  80. package/dist/_chunks/{useDragAndDrop-J0TUUbR6.js.map → useDragAndDrop-BMtgCYzL.js.map} +1 -1
  81. package/dist/_chunks/{useDragAndDrop-DdHgKsqq.mjs → useDragAndDrop-DJ6jqvZN.mjs} +4 -7
  82. package/dist/_chunks/{useDragAndDrop-DdHgKsqq.mjs.map → useDragAndDrop-DJ6jqvZN.mjs.map} +1 -1
  83. package/dist/_chunks/{useDebounce-DmuSJIF3.mjs → usePrev-CZGy2Vjf.mjs} +11 -11
  84. package/dist/_chunks/usePrev-CZGy2Vjf.mjs.map +1 -0
  85. package/dist/_chunks/{useDebounce-CtcjDB3L.js → usePrev-D5J_2fEu.js} +8 -8
  86. package/dist/_chunks/usePrev-D5J_2fEu.js.map +1 -0
  87. package/dist/admin/index.js +2 -1
  88. package/dist/admin/index.js.map +1 -1
  89. package/dist/admin/index.mjs +6 -5
  90. package/dist/admin/src/content-manager.d.ts +3 -2
  91. package/dist/admin/src/exports.d.ts +1 -0
  92. package/dist/admin/src/history/services/historyVersion.d.ts +1 -1
  93. package/dist/admin/src/hooks/useDocument.d.ts +19 -2
  94. package/dist/admin/src/pages/EditView/components/DocumentActions.d.ts +1 -1
  95. package/dist/admin/src/pages/EditView/components/DocumentStatus.d.ts +1 -1
  96. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Code.d.ts +7 -0
  97. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/utils/prismLanguages.d.ts +49 -0
  98. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/constants.d.ts +1 -0
  99. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.d.ts +4 -1
  100. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.d.ts +4 -1
  101. package/dist/admin/src/pages/EditView/components/FormLayout.d.ts +27 -0
  102. package/dist/admin/src/pages/EditView/utils/data.d.ts +1 -0
  103. package/dist/admin/src/preview/pages/Preview.d.ts +1 -1
  104. package/dist/admin/src/preview/services/preview.d.ts +1 -1
  105. package/dist/admin/src/services/api.d.ts +1 -1
  106. package/dist/admin/src/services/components.d.ts +2 -2
  107. package/dist/admin/src/services/contentTypes.d.ts +3 -3
  108. package/dist/admin/src/services/documents.d.ts +16 -19
  109. package/dist/admin/src/services/init.d.ts +1 -1
  110. package/dist/admin/src/services/relations.d.ts +2 -2
  111. package/dist/admin/src/services/uid.d.ts +3 -3
  112. package/dist/server/index.js +230 -187
  113. package/dist/server/index.js.map +1 -1
  114. package/dist/server/index.mjs +231 -187
  115. package/dist/server/index.mjs.map +1 -1
  116. package/dist/server/src/controllers/utils/metadata.d.ts +1 -0
  117. package/dist/server/src/controllers/utils/metadata.d.ts.map +1 -1
  118. package/dist/server/src/history/controllers/history-version.d.ts +1 -1
  119. package/dist/server/src/history/controllers/history-version.d.ts.map +1 -1
  120. package/dist/server/src/history/services/history.d.ts +3 -3
  121. package/dist/server/src/history/services/history.d.ts.map +1 -1
  122. package/dist/server/src/history/services/utils.d.ts +6 -10
  123. package/dist/server/src/history/services/utils.d.ts.map +1 -1
  124. package/dist/server/src/index.d.ts +3 -2
  125. package/dist/server/src/index.d.ts.map +1 -1
  126. package/dist/server/src/preview/controllers/validation/preview.d.ts.map +1 -1
  127. package/dist/server/src/preview/index.d.ts.map +1 -1
  128. package/dist/server/src/preview/services/index.d.ts +1 -0
  129. package/dist/server/src/preview/services/index.d.ts.map +1 -1
  130. package/dist/server/src/preview/services/preview-config.d.ts +2 -0
  131. package/dist/server/src/preview/services/preview-config.d.ts.map +1 -1
  132. package/dist/server/src/preview/utils.d.ts +1 -0
  133. package/dist/server/src/preview/utils.d.ts.map +1 -1
  134. package/dist/server/src/register.d.ts.map +1 -1
  135. package/dist/server/src/services/document-metadata.d.ts +4 -2
  136. package/dist/server/src/services/document-metadata.d.ts.map +1 -1
  137. package/dist/server/src/services/index.d.ts +3 -2
  138. package/dist/server/src/services/index.d.ts.map +1 -1
  139. package/dist/server/src/services/utils/configuration/index.d.ts +2 -2
  140. package/dist/server/src/services/utils/configuration/layouts.d.ts +2 -2
  141. package/dist/server/src/services/utils/populate.d.ts +2 -2
  142. package/dist/server/src/services/utils/populate.d.ts.map +1 -1
  143. package/package.json +12 -11
  144. package/dist/_chunks/EditViewPage-0zrWXtMz.js.map +0 -1
  145. package/dist/_chunks/EditViewPage-BgcbLW7w.mjs.map +0 -1
  146. package/dist/_chunks/Field-BV7ZYdqe.js.map +0 -1
  147. package/dist/_chunks/Field-fTjqtEem.mjs.map +0 -1
  148. package/dist/_chunks/History-BNvm2TK2.js.map +0 -1
  149. package/dist/_chunks/History-DEZDHwP0.mjs.map +0 -1
  150. package/dist/_chunks/ListConfigurationPage-B3FZwPHp.js.map +0 -1
  151. package/dist/_chunks/ListConfigurationPage-Ddz3G-It.mjs.map +0 -1
  152. package/dist/_chunks/ListViewPage-BEilNylQ.js.map +0 -1
  153. package/dist/_chunks/ListViewPage-BsLdw25U.mjs.map +0 -1
  154. package/dist/_chunks/Preview-1cqLecKr.js.map +0 -1
  155. package/dist/_chunks/Preview-ot2fh0yZ.mjs.map +0 -1
  156. package/dist/_chunks/index-BzUT1l9A.mjs.map +0 -1
  157. package/dist/_chunks/index-Cg4RLIAw.js.map +0 -1
  158. package/dist/_chunks/useDebounce-CtcjDB3L.js.map +0 -1
  159. package/dist/_chunks/useDebounce-DmuSJIF3.mjs.map +0 -1
  160. package/dist/admin/src/preview/constants.d.ts +0 -1
  161. package/dist/server/src/preview/constants.d.ts +0 -2
  162. package/dist/server/src/preview/constants.d.ts.map +0 -1
@@ -1,25 +1,75 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
3
  import { useState, useEffect, useCallback, memo } from "react";
4
- import { useStrapiApp, createContext, useField, useNotification, useForm, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from "@strapi/admin/strapi-admin";
5
- import { Box, SingleSelect, SingleSelectOption, Typography, Flex, BaseLink, Button, Popover, Field, Tooltip, IconButton, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, Accordion, TextButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
6
- import pipe$1 from "lodash/fp/pipe";
4
+ import { useStrapiApp, createContext, useField, useForm, useNotification, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from "@strapi/admin/strapi-admin";
5
+ import { Box, SingleSelect, SingleSelectOption, Typography, Flex, BaseLink, Button, Popover, Field, Tooltip, IconButton, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Accordion, Menu, MenuItem, Grid as Grid$1, TextInput, IconButtonGroup, TextButton } from "@strapi/design-system";
6
+ import { CodeBlock as CodeBlock$1, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Code, Expand, PlusCircle, Trash, More, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, Plus } from "@strapi/icons";
7
7
  import { useIntl } from "react-intl";
8
- import { m as DOCUMENT_META_FIELDS, g as getTranslation, c as useDoc, e as contentManagerApi, n as CLONE_PATH, d as buildValidParams, f as useDocumentRBAC, S as SINGLE_TYPES, o as useDocLayout } from "./index-BzUT1l9A.mjs";
9
- import { generateNKeysBetween } from "fractional-indexing";
10
- import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-CfdwHP-0.mjs";
11
- import { Code, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Expand, PlusCircle, Plus, Trash, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, More } from "@strapi/icons";
8
+ import { g as getTranslation, m as useDocLayout, c as useDoc, n as createDefaultForm, t as transformDocument, e as contentManagerApi, o as CLONE_PATH, d as buildValidParams, f as useDocumentRBAC, S as SINGLE_TYPES } from "./index-ZKrsjv-2.mjs";
12
9
  import { styled, css, keyframes } from "styled-components";
13
- import { C as ComponentIcon, a as COMPONENT_ICONS } from "./ComponentIcon-u4bIXTFY.mjs";
14
- import { getEmptyImage } from "react-dnd-html5-backend";
15
- import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from "./useDragAndDrop-DdHgKsqq.mjs";
16
- import { g as getIn } from "./objects-D6yBsdmx.mjs";
17
10
  import { Editor as Editor$1, Transforms, Node, Element, Range, Path, Point, createEditor } from "slate";
18
11
  import { withHistory } from "slate-history";
19
12
  import { useFocused, useSelected, ReactEditor, Editable, useSlate, Slate, withReact } from "slate-react";
20
- import { p as prefixFileUrlWithBackendUrl, u as usePrev, a as useDebounce } from "./useDebounce-DmuSJIF3.mjs";
13
+ import * as Prism from "prismjs";
14
+ import "prismjs/themes/prism-solarizedlight.css";
15
+ import "prismjs/components/prism-asmatmel";
16
+ import "prismjs/components/prism-bash";
17
+ import "prismjs/components/prism-basic";
18
+ import "prismjs/components/prism-c";
19
+ import "prismjs/components/prism-clojure";
20
+ import "prismjs/components/prism-cobol";
21
+ import "prismjs/components/prism-cpp";
22
+ import "prismjs/components/prism-csharp";
23
+ import "prismjs/components/prism-dart";
24
+ import "prismjs/components/prism-docker";
25
+ import "prismjs/components/prism-elixir";
26
+ import "prismjs/components/prism-erlang";
27
+ import "prismjs/components/prism-fortran";
28
+ import "prismjs/components/prism-fsharp";
29
+ import "prismjs/components/prism-go";
30
+ import "prismjs/components/prism-graphql";
31
+ import "prismjs/components/prism-groovy";
32
+ import "prismjs/components/prism-haskell";
33
+ import "prismjs/components/prism-haxe";
34
+ import "prismjs/components/prism-ini";
35
+ import "prismjs/components/prism-java";
36
+ import "prismjs/components/prism-javascript";
37
+ import "prismjs/components/prism-jsx";
38
+ import "prismjs/components/prism-json";
39
+ import "prismjs/components/prism-julia";
40
+ import "prismjs/components/prism-kotlin";
41
+ import "prismjs/components/prism-latex";
42
+ import "prismjs/components/prism-lua";
43
+ import "prismjs/components/prism-markdown";
44
+ import "prismjs/components/prism-matlab";
45
+ import "prismjs/components/prism-makefile";
46
+ import "prismjs/components/prism-objectivec";
47
+ import "prismjs/components/prism-perl";
48
+ import "prismjs/components/prism-php";
49
+ import "prismjs/components/prism-powershell";
50
+ import "prismjs/components/prism-python";
51
+ import "prismjs/components/prism-r";
52
+ import "prismjs/components/prism-ruby";
53
+ import "prismjs/components/prism-rust";
54
+ import "prismjs/components/prism-sas";
55
+ import "prismjs/components/prism-scala";
56
+ import "prismjs/components/prism-scheme";
57
+ import "prismjs/components/prism-sql";
58
+ import "prismjs/components/prism-stata";
59
+ import "prismjs/components/prism-swift";
60
+ import "prismjs/components/prism-typescript";
61
+ import "prismjs/components/prism-tsx";
62
+ import "prismjs/components/prism-vbnet";
63
+ import "prismjs/components/prism-yaml";
64
+ import { p as prefixFileUrlWithBackendUrl, u as useDebounce, a as usePrev } from "./usePrev-CZGy2Vjf.mjs";
65
+ import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from "./useDragAndDrop-DJ6jqvZN.mjs";
21
66
  import * as Toolbar from "@radix-ui/react-toolbar";
22
- import { useLocation, useMatch } from "react-router-dom";
67
+ import { getEmptyImage } from "react-dnd-html5-backend";
68
+ import { useMatch, useLocation } from "react-router-dom";
69
+ import { g as getIn } from "./objects-D6yBsdmx.mjs";
70
+ import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-C2Ahkrdg.mjs";
71
+ import pipe$1 from "lodash/fp/pipe";
72
+ import { C as ComponentIcon, a as COMPONENT_ICONS } from "./ComponentIcon-u4bIXTFY.mjs";
23
73
  import CodeMirror from "codemirror5";
24
74
  import sanitizeHtml from "sanitize-html";
25
75
  import { getLanguage, highlight, highlightAuto } from "highlight.js";
@@ -35,93 +85,6 @@ import sub from "markdown-it-sub";
35
85
  import sup from "markdown-it-sup";
36
86
  import "highlight.js/styles/solarized-dark.css";
37
87
  import "codemirror5/addon/display/placeholder";
38
- const BLOCK_LIST_ATTRIBUTE_KEYS = ["__component", "__temp_key__"];
39
- const traverseData = (predicate, transform) => (schema, components = {}) => (data = {}) => {
40
- const traverse = (datum, attributes) => {
41
- return Object.entries(datum).reduce((acc, [key, value]) => {
42
- const attribute = attributes[key];
43
- if (BLOCK_LIST_ATTRIBUTE_KEYS.includes(key) || value === null || value === void 0) {
44
- acc[key] = value;
45
- return acc;
46
- }
47
- if (attribute.type === "component") {
48
- if (attribute.repeatable) {
49
- const componentValue = predicate(attribute, value) ? transform(value, attribute) : value;
50
- acc[key] = componentValue.map(
51
- (componentData) => traverse(componentData, components[attribute.component]?.attributes ?? {})
52
- );
53
- } else {
54
- const componentValue = predicate(attribute, value) ? transform(value, attribute) : value;
55
- acc[key] = traverse(componentValue, components[attribute.component]?.attributes ?? {});
56
- }
57
- } else if (attribute.type === "dynamiczone") {
58
- const dynamicZoneValue = predicate(attribute, value) ? transform(value, attribute) : value;
59
- acc[key] = dynamicZoneValue.map(
60
- (componentData) => traverse(componentData, components[componentData.__component]?.attributes ?? {})
61
- );
62
- } else if (predicate(attribute, value)) {
63
- acc[key] = transform(value, attribute);
64
- } else {
65
- acc[key] = value;
66
- }
67
- return acc;
68
- }, {});
69
- };
70
- return traverse(data, schema.attributes);
71
- };
72
- const removeProhibitedFields = (prohibitedFields) => traverseData(
73
- (attribute) => prohibitedFields.includes(attribute.type),
74
- () => ""
75
- );
76
- const prepareRelations = traverseData(
77
- (attribute) => attribute.type === "relation",
78
- () => ({
79
- connect: [],
80
- disconnect: []
81
- })
82
- );
83
- const prepareTempKeys = traverseData(
84
- (attribute) => attribute.type === "component" && attribute.repeatable || attribute.type === "dynamiczone",
85
- (data) => {
86
- if (Array.isArray(data) && data.length > 0) {
87
- const keys = generateNKeysBetween(void 0, void 0, data.length);
88
- return data.map((datum, index) => ({
89
- ...datum,
90
- __temp_key__: keys[index]
91
- }));
92
- }
93
- return data;
94
- }
95
- );
96
- const removeFieldsThatDontExistOnSchema = (schema) => (data) => {
97
- const schemaKeys = Object.keys(schema.attributes);
98
- const dataKeys = Object.keys(data);
99
- const keysToRemove = dataKeys.filter((key) => !schemaKeys.includes(key));
100
- const revisedData = [...keysToRemove, ...DOCUMENT_META_FIELDS].reduce((acc, key) => {
101
- delete acc[key];
102
- return acc;
103
- }, structuredClone(data));
104
- return revisedData;
105
- };
106
- const removeNullValues = (data) => {
107
- return Object.entries(data).reduce((acc, [key, value]) => {
108
- if (value === null) {
109
- return acc;
110
- }
111
- acc[key] = value;
112
- return acc;
113
- }, {});
114
- };
115
- const transformDocument = (schema, components = {}) => (document2) => {
116
- const transformations = pipe$1(
117
- removeFieldsThatDontExistOnSchema(schema),
118
- removeProhibitedFields(["password"])(schema, components),
119
- removeNullValues,
120
- prepareRelations(schema, components),
121
- prepareTempKeys(schema, components)
122
- );
123
- return transformations(document2);
124
- };
125
88
  const componentStore = /* @__PURE__ */ new Map();
126
89
  const useLazyComponents = (componentUids = []) => {
127
90
  const [lazyComponentStore, setLazyComponentStore] = useState(Object.fromEntries(componentStore));
@@ -163,7 +126,8 @@ const useLazyComponents = (componentUids = []) => {
163
126
  const codeLanguages = [
164
127
  {
165
128
  value: "asm",
166
- label: "Assembly"
129
+ label: "Assembly",
130
+ decorate: "asmatmel"
167
131
  },
168
132
  {
169
133
  value: "bash",
@@ -199,7 +163,8 @@ const codeLanguages = [
199
163
  },
200
164
  {
201
165
  value: "dockerfile",
202
- label: "Dockerfile"
166
+ label: "Dockerfile",
167
+ decorate: "docker"
203
168
  },
204
169
  {
205
170
  value: "elixir",
@@ -355,7 +320,8 @@ const codeLanguages = [
355
320
  },
356
321
  {
357
322
  value: "typescript",
358
- label: "TypeScript"
323
+ label: "TypeScript",
324
+ decorate: "ts"
359
325
  },
360
326
  {
361
327
  value: "tsx",
@@ -371,7 +337,8 @@ const codeLanguages = [
371
337
  },
372
338
  {
373
339
  value: "yaml",
374
- label: "YAML"
340
+ label: "YAML",
341
+ decorate: "yml"
375
342
  }
376
343
  ];
377
344
  const baseHandleConvert = (editor, attributesToSet) => {
@@ -437,6 +404,29 @@ const pressEnterTwiceToExit = (editor) => {
437
404
  });
438
405
  }
439
406
  };
407
+ const decorateCode = ([node, path]) => {
408
+ const ranges = [];
409
+ if (!Element.isElement(node) || node.type !== "code") return ranges;
410
+ const text = Node.string(node);
411
+ const language = codeLanguages.find((lang) => lang.value === node.language);
412
+ const decorateKey = language?.decorate ?? language?.value;
413
+ const selectedLanguage = Prism.languages[decorateKey || "plaintext"];
414
+ const tokens = Prism.tokenize(text, selectedLanguage);
415
+ let start = 0;
416
+ for (const token of tokens) {
417
+ const length = token.length;
418
+ const end = start + length;
419
+ if (typeof token !== "string") {
420
+ ranges.push({
421
+ anchor: { path, offset: start },
422
+ focus: { path, offset: end },
423
+ className: `token ${token.type}`
424
+ });
425
+ }
426
+ start = end;
427
+ }
428
+ return ranges;
429
+ };
440
430
  const CodeBlock = styled.pre`
441
431
  border-radius: ${({ theme }) => theme.borderRadius};
442
432
  background-color: ${({ theme }) => theme.colors.neutral100};
@@ -508,7 +498,7 @@ const CodeEditor = (props) => {
508
498
  const codeBlocks = {
509
499
  code: {
510
500
  renderElement: (props) => /* @__PURE__ */ jsx(CodeEditor, { ...props }),
511
- icon: Code,
501
+ icon: CodeBlock$1,
512
502
  label: {
513
503
  id: "components.Blocks.blocks.code",
514
504
  defaultMessage: "Code block"
@@ -521,8 +511,7 @@ const codeBlocks = {
521
511
  handleEnterKey(editor) {
522
512
  pressEnterTwiceToExit(editor);
523
513
  },
524
- snippets: ["```"],
525
- dragHandleTopMargin: "10px"
514
+ snippets: ["```"]
526
515
  }
527
516
  };
528
517
  const H1 = styled(Typography).attrs({ tag: "h1" })`
@@ -697,8 +686,7 @@ const ImageDialog = () => {
697
686
  const [isOpen, setIsOpen] = React.useState(true);
698
687
  const { editor } = useBlocksEditorContext("ImageDialog");
699
688
  const components = useStrapiApp("ImageDialog", (state) => state.components);
700
- if (!components || !isOpen)
701
- return null;
689
+ if (!components || !isOpen) return null;
702
690
  const MediaLibraryDialog = components["media-library"];
703
691
  const insertImages = (images) => {
704
692
  Transforms.unwrapNodes(editor, {
@@ -707,14 +695,12 @@ const ImageDialog = () => {
707
695
  });
708
696
  const nodeEntryBeingReplaced = Editor$1.above(editor, {
709
697
  match(node) {
710
- if (Editor$1.isEditor(node))
711
- return false;
698
+ if (Editor$1.isEditor(node)) return false;
712
699
  const isInlineNode = ["text", "link"].includes(node.type);
713
700
  return !isInlineNode;
714
701
  }
715
702
  });
716
- if (!nodeEntryBeingReplaced)
717
- return;
703
+ if (!nodeEntryBeingReplaced) return;
718
704
  const [, pathToInsert] = nodeEntryBeingReplaced;
719
705
  Transforms.removeNodes(editor);
720
706
  const nodesToInsert = images.map((image) => {
@@ -892,8 +878,7 @@ const LinkContent = React.forwardRef(
892
878
  ReactEditor.focus(editor);
893
879
  };
894
880
  React.useEffect(() => {
895
- if (popoverOpen)
896
- linkInputRef.current?.focus();
881
+ if (popoverOpen) linkInputRef.current?.focus();
897
882
  }, [popoverOpen]);
898
883
  const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
899
884
  return /* @__PURE__ */ jsxs(Popover.Root, { open: popoverOpen, children: [
@@ -963,11 +948,11 @@ const LinkContent = React.forwardRef(
963
948
  ),
964
949
  /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
965
950
  /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: handleClose, children: formatMessage({
966
- id: "components.Blocks.popover.cancel",
951
+ id: "global.cancel",
967
952
  defaultMessage: "Cancel"
968
953
  }) }),
969
954
  /* @__PURE__ */ jsx(Button, { disabled: Boolean(inputNotDirty) || isSaveDisabled, onClick: handleSave, children: formatMessage({
970
- id: "components.Blocks.popover.save",
955
+ id: "global.save",
971
956
  defaultMessage: "Save"
972
957
  }) })
973
958
  ] })
@@ -1048,8 +1033,7 @@ const isText$1 = (node) => {
1048
1033
  return Node.isNode(node) && !Editor$1.isEditor(node) && node.type === "text";
1049
1034
  };
1050
1035
  const handleBackspaceKeyOnList = (editor, event) => {
1051
- if (!editor.selection)
1052
- return;
1036
+ if (!editor.selection) return;
1053
1037
  const [currentListItem, currentListItemPath] = Editor$1.parent(editor, editor.selection.anchor);
1054
1038
  const [currentList, currentListPath] = Editor$1.parent(editor, currentListItemPath);
1055
1039
  const isListEmpty = currentList.children.length === 1 && isText$1(currentListItem.children[0]) && currentListItem.children[0].text === "";
@@ -1158,8 +1142,7 @@ const handleEnterKeyOnList = (editor) => {
1158
1142
  };
1159
1143
  const handleConvertToList = (editor, format) => {
1160
1144
  const convertedPath = baseHandleConvert(editor, { type: "list-item" });
1161
- if (!convertedPath)
1162
- return;
1145
+ if (!convertedPath) return;
1163
1146
  Transforms.wrapNodes(editor, { type: "list", format, children: [] }, { at: convertedPath });
1164
1147
  };
1165
1148
  const handleTabOnList = (editor) => {
@@ -1171,8 +1154,7 @@ const handleTabOnList = (editor) => {
1171
1154
  }
1172
1155
  const [currentListItem, currentListItemPath] = currentListItemEntry;
1173
1156
  const [currentList] = Editor$1.parent(editor, currentListItemPath);
1174
- if (currentListItem === currentList.children[0])
1175
- return;
1157
+ if (currentListItem === currentList.children[0]) return;
1176
1158
  const currentListItemIndex = currentList.children.findIndex((item) => item === currentListItem);
1177
1159
  const previousNode = currentList.children[currentListItemIndex - 1];
1178
1160
  if (previousNode.type === "list") {
@@ -1308,13 +1290,13 @@ const quoteBlocks = {
1308
1290
  handleEnterKey(editor) {
1309
1291
  pressEnterTwiceToExit(editor);
1310
1292
  },
1311
- snippets: [">"],
1312
- dragHandleTopMargin: "6px"
1293
+ snippets: [">"]
1313
1294
  }
1314
1295
  };
1315
1296
  const ToolbarWrapper = styled(Flex)`
1316
1297
  &[aria-disabled='true'] {
1317
1298
  cursor: not-allowed;
1299
+ background: ${({ theme }) => theme.colors.neutral150};
1318
1300
  }
1319
1301
  `;
1320
1302
  const Separator = styled(Toolbar.Separator)`
@@ -1325,7 +1307,7 @@ const Separator = styled(Toolbar.Separator)`
1325
1307
  const FlexButton = styled(Flex)`
1326
1308
  // Inherit the not-allowed cursor from ToolbarWrapper when disabled
1327
1309
  &[aria-disabled] {
1328
- cursor: inherit;
1310
+ cursor: not-allowed;
1329
1311
  }
1330
1312
 
1331
1313
  &[aria-disabled='false'] {
@@ -1539,8 +1521,7 @@ const isListNode = (node) => {
1539
1521
  const ListButton = ({ block, format }) => {
1540
1522
  const { editor, disabled, blocks } = useBlocksEditorContext("ListButton");
1541
1523
  const isListActive = () => {
1542
- if (!editor.selection)
1543
- return false;
1524
+ if (!editor.selection) return false;
1544
1525
  const currentListEntry = Editor$1.above(editor, {
1545
1526
  match: (node) => !Editor$1.isEditor(node) && node.type === "list",
1546
1527
  at: editor.selection.anchor
@@ -1614,8 +1595,7 @@ const LinkButton = ({ disabled }) => {
1614
1595
  const { editor } = useBlocksEditorContext("LinkButton");
1615
1596
  const isLinkActive = () => {
1616
1597
  const { selection } = editor;
1617
- if (!selection)
1618
- return false;
1598
+ if (!selection) return false;
1619
1599
  const [match] = Array.from(
1620
1600
  Editor$1.nodes(editor, {
1621
1601
  at: Editor$1.unhangRange(editor, selection),
@@ -1679,7 +1659,7 @@ const BlocksToolbar = () => {
1679
1659
  return false;
1680
1660
  };
1681
1661
  const isButtonDisabled = checkButtonDisabled();
1682
- return /* @__PURE__ */ jsx(Toolbar.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxs(ToolbarWrapper, { gap: 2, padding: 2, children: [
1662
+ return /* @__PURE__ */ jsx(Toolbar.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxs(ToolbarWrapper, { gap: 2, padding: 2, width: "100%", children: [
1683
1663
  /* @__PURE__ */ jsx(BlocksDropdown, {}),
1684
1664
  /* @__PURE__ */ jsx(Separator, {}),
1685
1665
  /* @__PURE__ */ jsx(Toolbar.ToggleGroup, { type: "multiple", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
@@ -1753,30 +1733,32 @@ const DragIconButton = styled(IconButton)`
1753
1733
  display: flex;
1754
1734
  align-items: center;
1755
1735
  justify-content: center;
1736
+ border: none;
1756
1737
  border-radius: ${({ theme }) => theme.borderRadius};
1757
- width: ${({ theme }) => theme.spaces[4]};
1758
- height: ${({ theme }) => theme.spaces[6]};
1738
+ padding-left: ${({ theme }) => theme.spaces[0]};
1739
+ padding-right: ${({ theme }) => theme.spaces[0]};
1740
+ padding-top: ${({ theme }) => theme.spaces[1]};
1741
+ padding-bottom: ${({ theme }) => theme.spaces[1]};
1759
1742
  visibility: hidden;
1760
1743
  cursor: grab;
1761
1744
  opacity: inherit;
1762
1745
  margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
1763
1746
 
1764
1747
  &:hover {
1765
- background: ${({ theme }) => theme.colors.neutral200};
1748
+ background: ${({ theme }) => theme.colors.neutral100};
1766
1749
  }
1767
1750
  &:active {
1768
1751
  cursor: grabbing;
1752
+ background: ${({ theme }) => theme.colors.neutral150};
1769
1753
  }
1770
1754
  &[aria-disabled='true'] {
1771
- cursor: not-allowed;
1772
- background: transparent;
1755
+ visibility: hidden;
1773
1756
  }
1774
1757
  svg {
1775
- height: auto;
1776
1758
  min-width: ${({ theme }) => theme.spaces[3]};
1777
1759
 
1778
1760
  path {
1779
- fill: ${({ theme }) => theme.colors.neutral700};
1761
+ fill: ${({ theme }) => theme.colors.neutral500};
1780
1762
  }
1781
1763
  }
1782
1764
  `;
@@ -1821,8 +1803,7 @@ const DragAndDropElement = ({
1821
1803
  displayedValue: children
1822
1804
  },
1823
1805
  onDropItem(currentIndex, newIndex) {
1824
- if (newIndex)
1825
- handleMoveBlock(newIndex, currentIndex);
1806
+ if (newIndex) handleMoveBlock(newIndex, currentIndex);
1826
1807
  }
1827
1808
  });
1828
1809
  const composedBoxRefs = useComposedRefs(blockRef, dropRef);
@@ -1928,7 +1909,7 @@ const baseRenderLeaf = (props, modifiers2) => {
1928
1909
  }
1929
1910
  return currentChildren;
1930
1911
  }, props.children);
1931
- return /* @__PURE__ */ jsx("span", { ...props.attributes, children: wrappedChildren });
1912
+ return /* @__PURE__ */ jsx("span", { ...props.attributes, className: props.leaf.className, children: wrappedChildren });
1932
1913
  };
1933
1914
  const baseRenderElement = ({
1934
1915
  props,
@@ -1966,8 +1947,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
1966
1947
  [modifiers2]
1967
1948
  );
1968
1949
  const handleMoveBlocks = (editor2, event) => {
1969
- if (!editor2.selection)
1970
- return;
1950
+ if (!editor2.selection) return;
1971
1951
  const start = Range.start(editor2.selection);
1972
1952
  const currentIndex = [start.path[0]];
1973
1953
  let newIndexPosition = 0;
@@ -2104,8 +2084,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
2104
2084
  }
2105
2085
  };
2106
2086
  const handleScrollSelectionIntoView = () => {
2107
- if (!editor.selection)
2108
- return;
2087
+ if (!editor.selection) return;
2109
2088
  const domRange = ReactEditor.toDOMRange(editor, editor.selection);
2110
2089
  const domRect = domRange.getBoundingClientRect();
2111
2090
  const blocksInput = blocksRef.current;
@@ -2132,7 +2111,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
2132
2111
  background: "neutral0",
2133
2112
  color: "neutral800",
2134
2113
  lineHeight: 6,
2135
- paddingRight: 4,
2114
+ paddingRight: 7,
2136
2115
  paddingTop: 6,
2137
2116
  paddingBottom: 3,
2138
2117
  children: [
@@ -2143,6 +2122,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
2143
2122
  readOnly: disabled,
2144
2123
  placeholder,
2145
2124
  isExpandedMode,
2125
+ decorate: decorateCode,
2146
2126
  renderElement,
2147
2127
  renderLeaf,
2148
2128
  onKeyDown: handleKeyDown,
@@ -2299,8 +2279,7 @@ const InlineCode = styled.code`
2299
2279
  `;
2300
2280
  const baseCheckIsActive = (editor, name2) => {
2301
2281
  const marks = Editor$1.marks(editor);
2302
- if (!marks)
2303
- return false;
2282
+ if (!marks) return false;
2304
2283
  return Boolean(marks[name2]);
2305
2284
  };
2306
2285
  const baseHandleToggle = (editor, name2) => {
@@ -2466,6 +2445,7 @@ const ExpandIconButton = styled(IconButton)`
2466
2445
  position: absolute;
2467
2446
  bottom: 1.2rem;
2468
2447
  right: 1.2rem;
2448
+ box-shadow: ${({ theme }) => theme.shadows.filterShadow};
2469
2449
  `;
2470
2450
  function useResetKey(value) {
2471
2451
  const slateUpdatesCount = React.useRef(0);
@@ -2597,26 +2577,6 @@ const BlocksInput = React.forwardRef(
2597
2577
  }
2598
2578
  );
2599
2579
  const MemoizedBlocksInput = React.memo(BlocksInput);
2600
- const createDefaultForm = (contentType, components = {}) => {
2601
- const traverseSchema = (attributes) => {
2602
- return Object.entries(attributes).reduce((acc, [key, attribute]) => {
2603
- if ("default" in attribute) {
2604
- acc[key] = attribute.default;
2605
- } else if (attribute.type === "component" && attribute.required) {
2606
- const defaultComponentForm = traverseSchema(components[attribute.component].attributes);
2607
- if (attribute.repeatable) {
2608
- acc[key] = attribute.min ? [...Array(attribute.min).fill(defaultComponentForm)] : [];
2609
- } else {
2610
- acc[key] = defaultComponentForm;
2611
- }
2612
- } else if (attribute.type === "dynamiczone" && attribute.required) {
2613
- acc[key] = [];
2614
- }
2615
- return acc;
2616
- }, {});
2617
- };
2618
- return traverseSchema(contentType.attributes);
2619
- };
2620
2580
  const Initializer = ({ disabled, name: name2, onClick }) => {
2621
2581
  const { formatMessage } = useIntl();
2622
2582
  const field = useField(name2);
@@ -2624,7 +2584,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
2624
2584
  Box,
2625
2585
  {
2626
2586
  tag: "button",
2627
- background: "neutral100",
2587
+ background: disabled ? "neutral150" : "neutral100",
2628
2588
  borderColor: field.error ? "danger600" : "neutral200",
2629
2589
  hasRadius: true,
2630
2590
  disabled,
@@ -2632,146 +2592,470 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
2632
2592
  paddingTop: 9,
2633
2593
  paddingBottom: 9,
2634
2594
  type: "button",
2595
+ style: { cursor: disabled ? "not-allowed" : "pointer" },
2635
2596
  children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
2636
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(CircleIcon, {}) }),
2637
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { textColor: "primary600", variant: "pi", fontWeight: "bold", children: formatMessage({
2638
- id: getTranslation("components.empty-repeatable"),
2639
- defaultMessage: "No entry yet. Click to add one."
2640
- }) }) })
2597
+ /* @__PURE__ */ jsx(Flex, { justifyContent: "center", color: disabled ? "neutral500" : "primary600", children: /* @__PURE__ */ jsx(PlusCircle, { width: "3.2rem", height: "3.2rem" }) }),
2598
+ /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
2599
+ Typography,
2600
+ {
2601
+ textColor: disabled ? "neutral600" : "primary600",
2602
+ variant: "pi",
2603
+ fontWeight: "bold",
2604
+ children: formatMessage({
2605
+ id: getTranslation("components.empty-repeatable"),
2606
+ defaultMessage: "No entry yet. Click to add one."
2607
+ })
2608
+ }
2609
+ ) })
2641
2610
  ] })
2642
2611
  }
2643
2612
  ) });
2644
2613
  };
2645
- const CircleIcon = styled(PlusCircle)`
2646
- width: 2.4rem;
2647
- height: 2.4rem;
2614
+ const AddComponentButton = ({
2615
+ hasError,
2616
+ isDisabled,
2617
+ isOpen,
2618
+ children,
2619
+ onClick
2620
+ }) => {
2621
+ return /* @__PURE__ */ jsx(
2622
+ StyledButton,
2623
+ {
2624
+ type: "button",
2625
+ onClick,
2626
+ disabled: isDisabled,
2627
+ background: "neutral0",
2628
+ style: { cursor: isDisabled ? "not-allowed" : "pointer" },
2629
+ variant: "tertiary",
2630
+ children: /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
2631
+ /* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
2632
+ /* @__PURE__ */ jsx(
2633
+ Typography,
2634
+ {
2635
+ variant: "pi",
2636
+ fontWeight: "bold",
2637
+ textColor: hasError && !isOpen ? "danger600" : "neutral600",
2638
+ children
2639
+ }
2640
+ )
2641
+ ] })
2642
+ }
2643
+ );
2644
+ };
2645
+ const StyledAddIcon = styled(PlusCircle)`
2646
+ height: ${({ theme }) => theme.spaces[6]};
2647
+ width: ${({ theme }) => theme.spaces[6]};
2648
+ transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
2649
+
2648
2650
  > circle {
2649
- fill: ${({ theme }) => theme.colors.primary200};
2651
+ fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
2650
2652
  }
2651
2653
  > path {
2652
- fill: ${({ theme }) => theme.colors.primary600};
2654
+ fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral500};
2653
2655
  }
2654
2656
  `;
2655
- const NonRepeatableComponent = ({
2656
- attribute,
2657
- name: name2,
2658
- children,
2659
- layout
2657
+ const StyledButton = styled(Button)`
2658
+ padding-left: ${({ theme }) => theme.spaces[3]};
2659
+ border-radius: 26px;
2660
+ box-shadow: ${({ theme }) => theme.shadows.filterShadow};
2661
+ height: 5rem;
2662
+ `;
2663
+ const ComponentCategory = ({
2664
+ category,
2665
+ components = [],
2666
+ variant = "primary",
2667
+ onAddComponent
2660
2668
  }) => {
2661
2669
  const { formatMessage } = useIntl();
2662
- const { value } = useField(name2);
2663
- const level = useComponent("NonRepeatableComponent", (state) => state.level);
2664
- const isNested = level > 0;
2665
- return /* @__PURE__ */ jsx(ComponentProvider, { id: value?.id, uid: attribute.component, level: level + 1, type: "component", children: /* @__PURE__ */ jsx(
2670
+ return /* @__PURE__ */ jsxs(Accordion.Item, { value: category, children: [
2671
+ /* @__PURE__ */ jsx(Accordion.Header, { variant, children: /* @__PURE__ */ jsx(Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
2672
+ /* @__PURE__ */ jsx(ResponsiveAccordionContent, { children: /* @__PURE__ */ jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsx(
2673
+ ComponentBox,
2674
+ {
2675
+ tag: "button",
2676
+ type: "button",
2677
+ background: "neutral100",
2678
+ justifyContent: "center",
2679
+ onClick: onAddComponent(uid),
2680
+ hasRadius: true,
2681
+ height: "8.4rem",
2682
+ shrink: 0,
2683
+ borderColor: "neutral200",
2684
+ children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
2685
+ /* @__PURE__ */ jsx(ComponentIcon, { color: "currentColor", background: "primary200", icon }),
2686
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: displayName })
2687
+ ] })
2688
+ },
2689
+ uid
2690
+ )) }) })
2691
+ ] });
2692
+ };
2693
+ const ResponsiveAccordionContent = styled(Accordion.Content)`
2694
+ container-type: inline-size;
2695
+ `;
2696
+ const Grid = styled(Box)`
2697
+ display: grid;
2698
+ grid-template-columns: repeat(auto-fill, 100%);
2699
+ grid-gap: ${({ theme }) => theme.spaces[1]};
2700
+
2701
+ @container (min-width: ${() => RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
2702
+ grid-template-columns: repeat(auto-fill, 14rem);
2703
+ }
2704
+ `;
2705
+ const ComponentBox = styled(Flex)`
2706
+ color: ${({ theme }) => theme.colors.neutral600};
2707
+ cursor: pointer;
2708
+
2709
+ @media (prefers-reduced-motion: no-preference) {
2710
+ transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
2711
+ }
2712
+
2713
+ &:focus,
2714
+ &:hover {
2715
+ border: 1px solid ${({ theme }) => theme.colors.primary200};
2716
+ background: ${({ theme }) => theme.colors.primary100};
2717
+ color: ${({ theme }) => theme.colors.primary600};
2718
+ }
2719
+ `;
2720
+ const ComponentPicker = ({
2721
+ dynamicComponentsByCategory = {},
2722
+ isOpen,
2723
+ onClickAddComponent
2724
+ }) => {
2725
+ const { formatMessage } = useIntl();
2726
+ const handleAddComponentToDz = (componentUid) => () => {
2727
+ onClickAddComponent(componentUid);
2728
+ };
2729
+ if (!isOpen) {
2730
+ return null;
2731
+ }
2732
+ return /* @__PURE__ */ jsxs(
2666
2733
  Box,
2667
2734
  {
2668
- background: "neutral100",
2669
- paddingLeft: 6,
2670
- paddingRight: 6,
2671
2735
  paddingTop: 6,
2672
2736
  paddingBottom: 6,
2673
- hasRadius: isNested,
2674
- borderColor: isNested ? "neutral200" : void 0,
2675
- children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index) => {
2676
- return /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: row.map(({ size, ...field }) => {
2677
- const completeFieldName = `${name2}.${field.name}`;
2678
- const translatedLabel = formatMessage({
2679
- id: `content-manager.components.${attribute.component}.${field.name}`,
2680
- defaultMessage: field.label
2681
- });
2682
- return /* @__PURE__ */ jsx(
2683
- Grid$1.Item,
2684
- {
2685
- col: size,
2686
- s: 12,
2687
- xs: 12,
2688
- direction: "column",
2689
- alignItems: "stretch",
2690
- children: children({ ...field, label: translatedLabel, name: completeFieldName })
2691
- },
2692
- completeFieldName
2693
- );
2694
- }) }, index);
2695
- }) })
2737
+ paddingLeft: 5,
2738
+ paddingRight: 5,
2739
+ background: "neutral0",
2740
+ shadow: "tableShadow",
2741
+ borderColor: "neutral150",
2742
+ hasRadius: true,
2743
+ children: [
2744
+ /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral600", children: formatMessage({
2745
+ id: getTranslation("components.DynamicZone.ComponentPicker-label"),
2746
+ defaultMessage: "Pick one component"
2747
+ }) }) }),
2748
+ /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(Accordion.Root, { defaultValue: Object.keys(dynamicComponentsByCategory)[0], children: Object.entries(dynamicComponentsByCategory).map(([category, components], index) => /* @__PURE__ */ jsx(
2749
+ ComponentCategory,
2750
+ {
2751
+ category,
2752
+ components,
2753
+ onAddComponent: handleAddComponentToDz,
2754
+ variant: index % 2 === 1 ? "primary" : "secondary"
2755
+ },
2756
+ category
2757
+ )) }) })
2758
+ ]
2696
2759
  }
2697
- ) });
2760
+ );
2698
2761
  };
2699
- const RepeatableComponent = ({
2700
- attribute,
2762
+ const DynamicComponent = ({
2763
+ componentUid,
2701
2764
  disabled,
2765
+ index,
2702
2766
  name: name2,
2703
- mainField,
2704
- children,
2705
- layout
2767
+ onRemoveComponentClick,
2768
+ onMoveComponent,
2769
+ onGrabItem,
2770
+ onDropItem,
2771
+ onCancel,
2772
+ dynamicComponentsByCategory = {},
2773
+ onAddComponent,
2774
+ children
2706
2775
  }) => {
2707
- const { toggleNotification } = useNotification();
2708
2776
  const { formatMessage } = useIntl();
2709
- const { search: searchString } = useLocation();
2710
- const search = React.useMemo(() => new URLSearchParams(searchString), [searchString]);
2711
- const { components } = useDoc();
2777
+ const formValues = useForm("DynamicComponent", (state) => state.values);
2712
2778
  const {
2713
- value = [],
2714
- error,
2715
- rawError
2716
- } = useField(name2);
2717
- const addFieldRow = useForm("RepeatableComponent", (state) => state.addFieldRow);
2718
- const moveFieldRow = useForm("RepeatableComponent", (state) => state.moveFieldRow);
2719
- const removeFieldRow = useForm("RepeatableComponent", (state) => state.removeFieldRow);
2720
- const { max = Infinity } = attribute;
2779
+ edit: { components }
2780
+ } = useDocLayout();
2781
+ const title = React.useMemo(() => {
2782
+ const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
2783
+ const mainFieldValue = getIn(formValues, `${name2}.${index}.${mainField}`);
2784
+ const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
2785
+ const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
2786
+ return mainValue;
2787
+ }, [componentUid, components, formValues, name2, index]);
2788
+ const { icon, displayName } = React.useMemo(() => {
2789
+ const [category] = componentUid.split(".");
2790
+ const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
2791
+ (component) => component.uid === componentUid
2792
+ ) ?? { icon: null, displayName: null };
2793
+ return { icon: icon2, displayName: displayName2 };
2794
+ }, [componentUid, dynamicComponentsByCategory]);
2795
+ const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
2796
+ type: `${ItemTypes.DYNAMIC_ZONE}_${name2}`,
2797
+ index,
2798
+ item: {
2799
+ index,
2800
+ displayedValue: `${displayName} ${title}`,
2801
+ icon
2802
+ },
2803
+ onMoveItem: onMoveComponent,
2804
+ onDropItem,
2805
+ onGrabItem,
2806
+ onCancel
2807
+ });
2808
+ React.useEffect(() => {
2809
+ dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
2810
+ }, [dragPreviewRef, index]);
2811
+ const accordionValue = React.useId();
2812
+ const { value = [], rawError } = useField(`${name2}.${index}`);
2721
2813
  const [collapseToOpen, setCollapseToOpen] = React.useState("");
2722
- const [liveText, setLiveText] = React.useState("");
2723
2814
  React.useEffect(() => {
2724
- const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;
2725
- const hasNestedValue = value && Array.isArray(value) && value.length > 0;
2726
- if (hasNestedErrors && hasNestedValue) {
2727
- const errorOpenItems = rawError.map((_, idx) => {
2728
- return value[idx] ? value[idx].__temp_key__ : null;
2729
- }).filter((value2) => !!value2);
2730
- if (errorOpenItems && errorOpenItems.length > 0) {
2731
- setCollapseToOpen((collapseToOpen2) => {
2732
- if (!errorOpenItems.includes(collapseToOpen2)) {
2733
- return errorOpenItems[0];
2734
- }
2735
- return collapseToOpen2;
2736
- });
2737
- }
2815
+ if (rawError && value) {
2816
+ setCollapseToOpen(accordionValue);
2738
2817
  }
2739
- }, [rawError, value]);
2740
- const componentTmpKeyWithFocussedField = React.useMemo(() => {
2741
- if (search.has("field")) {
2742
- const fieldParam = search.get("field");
2743
- if (!fieldParam) {
2744
- return void 0;
2818
+ }, [rawError, value, accordionValue]);
2819
+ const composedBoxRefs = useComposedRefs(boxRef, dropRef);
2820
+ const accordionActions = disabled ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
2821
+ /* @__PURE__ */ jsx(
2822
+ IconButton,
2823
+ {
2824
+ variant: "ghost",
2825
+ label: formatMessage(
2826
+ {
2827
+ id: getTranslation("components.DynamicZone.delete-label"),
2828
+ defaultMessage: "Delete {name}"
2829
+ },
2830
+ { name: title }
2831
+ ),
2832
+ onClick: onRemoveComponentClick,
2833
+ children: /* @__PURE__ */ jsx(Trash, {})
2745
2834
  }
2746
- const [, path] = fieldParam.split(`${name2}.`);
2747
- if (getIn(value, path, void 0) !== void 0) {
2748
- const [subpath] = path.split(".");
2749
- return getIn(value, subpath, void 0)?.__temp_key__;
2835
+ ),
2836
+ /* @__PURE__ */ jsx(
2837
+ IconButton,
2838
+ {
2839
+ variant: "ghost",
2840
+ onClick: (e) => e.stopPropagation(),
2841
+ "data-handler-id": handlerId,
2842
+ ref: dragRef,
2843
+ label: formatMessage({
2844
+ id: getTranslation("components.DragHandle-label"),
2845
+ defaultMessage: "Drag"
2846
+ }),
2847
+ onKeyDown: handleKeyDown,
2848
+ children: /* @__PURE__ */ jsx(Drag, {})
2750
2849
  }
2850
+ ),
2851
+ /* @__PURE__ */ jsxs(Menu.Root, { children: [
2852
+ /* @__PURE__ */ jsx(Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 0, paddingRight: 0, children: /* @__PURE__ */ jsx(
2853
+ IconButton,
2854
+ {
2855
+ variant: "ghost",
2856
+ label: formatMessage({
2857
+ id: getTranslation("components.DynamicZone.more-actions"),
2858
+ defaultMessage: "More actions"
2859
+ }),
2860
+ tag: "span",
2861
+ children: /* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false })
2862
+ }
2863
+ ) }),
2864
+ /* @__PURE__ */ jsxs(Menu.Content, { children: [
2865
+ /* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
2866
+ /* @__PURE__ */ jsx(Menu.SubTrigger, { children: formatMessage({
2867
+ id: getTranslation("components.DynamicZone.add-item-above"),
2868
+ defaultMessage: "Add component above"
2869
+ }) }),
2870
+ /* @__PURE__ */ jsx(Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
2871
+ /* @__PURE__ */ jsx(Menu.Label, { children: category }),
2872
+ components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => onAddComponent(uid, index), children: displayName2 }, componentUid))
2873
+ ] }, category)) })
2874
+ ] }),
2875
+ /* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
2876
+ /* @__PURE__ */ jsx(Menu.SubTrigger, { children: formatMessage({
2877
+ id: getTranslation("components.DynamicZone.add-item-below"),
2878
+ defaultMessage: "Add component below"
2879
+ }) }),
2880
+ /* @__PURE__ */ jsx(Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
2881
+ /* @__PURE__ */ jsx(Menu.Label, { children: category }),
2882
+ components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => onAddComponent(uid, index + 1), children: displayName2 }, componentUid))
2883
+ ] }, category)) })
2884
+ ] })
2885
+ ] })
2886
+ ] })
2887
+ ] });
2888
+ const accordionTitle = title ? `${displayName} ${title}` : displayName;
2889
+ return /* @__PURE__ */ jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
2890
+ /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Rectangle, { background: "neutral200" }) }),
2891
+ /* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsx(Accordion.Root, { value: collapseToOpen, onValueChange: setCollapseToOpen, children: /* @__PURE__ */ jsxs(Accordion.Item, { value: accordionValue, children: [
2892
+ /* @__PURE__ */ jsxs(Accordion.Header, { children: [
2893
+ /* @__PURE__ */ jsx(
2894
+ Accordion.Trigger,
2895
+ {
2896
+ icon: icon && COMPONENT_ICONS[icon] ? COMPONENT_ICONS[icon] : COMPONENT_ICONS.dashboard,
2897
+ children: accordionTitle
2898
+ }
2899
+ ),
2900
+ /* @__PURE__ */ jsx(Accordion.Actions, { children: accordionActions })
2901
+ ] }),
2902
+ /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsx(
2903
+ Grid$1.Item,
2904
+ {
2905
+ col: 12,
2906
+ s: 12,
2907
+ xs: 12,
2908
+ direction: "column",
2909
+ alignItems: "stretch",
2910
+ children: /* @__PURE__ */ jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
2911
+ const fieldName = `${name2}.${index}.${field.name}`;
2912
+ const fieldWithTranslatedLabel = {
2913
+ ...field,
2914
+ label: formatMessage({
2915
+ id: `content-manager.components.${componentUid}.${field.name}`,
2916
+ defaultMessage: field.label
2917
+ })
2918
+ };
2919
+ return /* @__PURE__ */ jsx(
2920
+ ResponsiveGridItem,
2921
+ {
2922
+ col: size,
2923
+ s: 12,
2924
+ xs: 12,
2925
+ direction: "column",
2926
+ alignItems: "stretch",
2927
+ children: children ? children({ ...fieldWithTranslatedLabel, name: fieldName }) : /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
2928
+ },
2929
+ fieldName
2930
+ );
2931
+ }) })
2932
+ },
2933
+ rowInd
2934
+ )) }) }) }) })
2935
+ ] }) }) })
2936
+ ] });
2937
+ };
2938
+ const StyledBox = styled(Box)`
2939
+ > div:first-child {
2940
+ box-shadow: ${({ theme }) => theme.shadows.tableShadow};
2941
+ }
2942
+ `;
2943
+ const AccordionContentRadius = styled(Box)`
2944
+ border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
2945
+ `;
2946
+ const Rectangle = styled(Box)`
2947
+ width: ${({ theme }) => theme.spaces[2]};
2948
+ height: ${({ theme }) => theme.spaces[4]};
2949
+ `;
2950
+ const Preview$1 = styled.span`
2951
+ display: block;
2952
+ background-color: ${({ theme }) => theme.colors.primary100};
2953
+ outline: 1px dashed ${({ theme }) => theme.colors.primary500};
2954
+ outline-offset: -1px;
2955
+ padding: ${({ theme }) => theme.spaces[6]};
2956
+ `;
2957
+ const ComponentContainer = styled(Box)`
2958
+ list-style: none;
2959
+ padding: 0;
2960
+ margin: 0;
2961
+ `;
2962
+ const DynamicZoneLabel = ({
2963
+ hint,
2964
+ label,
2965
+ labelAction,
2966
+ name: name2,
2967
+ numberOfComponents = 0,
2968
+ required
2969
+ }) => {
2970
+ return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
2971
+ Box,
2972
+ {
2973
+ paddingTop: 3,
2974
+ paddingBottom: 3,
2975
+ paddingRight: 4,
2976
+ paddingLeft: 4,
2977
+ borderRadius: "26px",
2978
+ background: "neutral0",
2979
+ shadow: "filterShadow",
2980
+ color: "neutral500",
2981
+ children: /* @__PURE__ */ jsxs(Flex, { direction: "column", justifyContent: "center", children: [
2982
+ /* @__PURE__ */ jsxs(Flex, { maxWidth: "35.6rem", children: [
2983
+ /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
2984
+ label || name2,
2985
+ " "
2986
+ ] }),
2987
+ /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
2988
+ "(",
2989
+ numberOfComponents,
2990
+ ")"
2991
+ ] }),
2992
+ required && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: "*" }),
2993
+ labelAction && /* @__PURE__ */ jsx(Box, { paddingLeft: 1, children: labelAction })
2994
+ ] }),
2995
+ hint && /* @__PURE__ */ jsx(Box, { paddingTop: 1, maxWidth: "35.6rem", children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: hint }) })
2996
+ ] })
2751
2997
  }
2752
- return void 0;
2753
- }, [search, name2, value]);
2754
- const prevValue = usePrev(value);
2755
- React.useEffect(() => {
2756
- if (prevValue && prevValue.length < value.length) {
2757
- setCollapseToOpen(value[value.length - 1].__temp_key__);
2758
- }
2759
- }, [value, prevValue]);
2760
- React.useEffect(() => {
2761
- if (typeof componentTmpKeyWithFocussedField === "string") {
2762
- setCollapseToOpen(componentTmpKeyWithFocussedField);
2763
- }
2764
- }, [componentTmpKeyWithFocussedField]);
2765
- const toggleCollapses = () => {
2766
- setCollapseToOpen("");
2998
+ ) });
2999
+ };
3000
+ const [DynamicZoneProvider, useDynamicZone] = createContext(
3001
+ "DynamicZone",
3002
+ {
3003
+ isInDynamicZone: false
3004
+ }
3005
+ );
3006
+ const DynamicZone = ({
3007
+ attribute,
3008
+ disabled: disabledProp,
3009
+ hint,
3010
+ label,
3011
+ labelAction,
3012
+ name: name2,
3013
+ required = false,
3014
+ children
3015
+ }) => {
3016
+ const { max = Infinity, min = -Infinity } = attribute ?? {};
3017
+ const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);
3018
+ const [liveText, setLiveText] = React.useState("");
3019
+ const { components, isLoading } = useDoc();
3020
+ const disabled = disabledProp || isLoading;
3021
+ const { addFieldRow, removeFieldRow, moveFieldRow } = useForm(
3022
+ "DynamicZone",
3023
+ ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
3024
+ addFieldRow: addFieldRow2,
3025
+ removeFieldRow: removeFieldRow2,
3026
+ moveFieldRow: moveFieldRow2
3027
+ })
3028
+ );
3029
+ const { value = [], error } = useField(name2);
3030
+ const dynamicComponentsByCategory = React.useMemo(() => {
3031
+ return attribute.components.reduce((acc, componentUid) => {
3032
+ const { category, info } = components[componentUid] ?? { info: {} };
3033
+ const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
3034
+ if (!acc[category]) {
3035
+ acc[category] = [];
3036
+ }
3037
+ acc[category] = [...acc[category], component];
3038
+ return acc;
3039
+ }, {});
3040
+ }, [attribute.components, components]);
3041
+ const { formatMessage } = useIntl();
3042
+ const { toggleNotification } = useNotification();
3043
+ const dynamicDisplayedComponentsLength = value.length;
3044
+ const handleAddComponent = (uid, position) => {
3045
+ setAddComponentIsOpen(false);
3046
+ const schema = components[uid];
3047
+ const form = createDefaultForm(schema, components);
3048
+ const transformations = pipe$1(transformDocument(schema, components), (data2) => ({
3049
+ ...data2,
3050
+ __component: uid
3051
+ }));
3052
+ const data = transformations(form);
3053
+ addFieldRow(name2, data, position);
2767
3054
  };
2768
- const handleClick = () => {
2769
- if (value.length < max) {
2770
- const schema = components[attribute.component];
2771
- const form = createDefaultForm(schema, components);
2772
- const data = transformDocument(schema, components)(form);
2773
- addFieldRow(name2, data);
2774
- } else if (value.length >= max) {
3055
+ const handleClickOpenPicker = () => {
3056
+ if (dynamicDisplayedComponentsLength < max) {
3057
+ setAddComponentIsOpen((prev) => !prev);
3058
+ } else {
2775
3059
  toggleNotification({
2776
3060
  type: "info",
2777
3061
  message: formatMessage({
@@ -2780,7 +3064,7 @@ const RepeatableComponent = ({
2780
3064
  });
2781
3065
  }
2782
3066
  };
2783
- const handleMoveComponentField = (newIndex, currentIndex) => {
3067
+ const handleMoveComponent = (newIndex, currentIndex) => {
2784
3068
  setLiveText(
2785
3069
  formatMessage(
2786
3070
  {
@@ -2795,9 +3079,6 @@ const RepeatableComponent = ({
2795
3079
  );
2796
3080
  moveFieldRow(name2, currentIndex, newIndex);
2797
3081
  };
2798
- const handleValueChange = (key) => {
2799
- setCollapseToOpen(key);
2800
- };
2801
3082
  const getItemPos = (index) => `${index + 1} of ${value.length}`;
2802
3083
  const handleCancel = (index) => {
2803
3084
  setLiveText(
@@ -2830,446 +3111,119 @@ const RepeatableComponent = ({
2830
3111
  setLiveText(
2831
3112
  formatMessage(
2832
3113
  {
2833
- id: getTranslation("dnd.drop-item"),
2834
- defaultMessage: `{item}, dropped. Final position in list: {position}.`
2835
- },
2836
- {
2837
- item: `${name2}.${index}`,
2838
- position: getItemPos(index)
2839
- }
2840
- )
2841
- );
2842
- };
2843
- const ariaDescriptionId = React.useId();
2844
- const level = useComponent("RepeatableComponent", (state) => state.level);
2845
- if (value.length === 0) {
2846
- return /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleClick });
2847
- }
2848
- return /* @__PURE__ */ jsxs(Box, { hasRadius: true, children: [
2849
- /* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
2850
- id: getTranslation("dnd.instructions"),
2851
- defaultMessage: `Press spacebar to grab and re-order`
2852
- }) }),
2853
- /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
2854
- /* @__PURE__ */ jsxs(
2855
- AccordionRoot,
2856
- {
2857
- $error: error,
2858
- value: collapseToOpen,
2859
- onValueChange: handleValueChange,
2860
- "aria-describedby": ariaDescriptionId,
2861
- children: [
2862
- value.map(({ __temp_key__: key, id }, index) => {
2863
- const nameWithIndex = `${name2}.${index}`;
2864
- return /* @__PURE__ */ jsx(
2865
- ComponentProvider,
2866
- {
2867
- id,
2868
- uid: attribute.component,
2869
- level: level + 1,
2870
- type: "repeatable",
2871
- children: /* @__PURE__ */ jsx(
2872
- Component,
2873
- {
2874
- disabled,
2875
- name: nameWithIndex,
2876
- attribute,
2877
- index,
2878
- mainField,
2879
- onMoveItem: handleMoveComponentField,
2880
- onDeleteComponent: () => {
2881
- removeFieldRow(name2, index);
2882
- toggleCollapses();
2883
- },
2884
- toggleCollapses,
2885
- onCancel: handleCancel,
2886
- onDropItem: handleDropItem,
2887
- onGrabItem: handleGrabItem,
2888
- __temp_key__: key,
2889
- children: layout.map((row, index2) => {
2890
- return /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: row.map(({ size, ...field }) => {
2891
- const completeFieldName = `${nameWithIndex}.${field.name}`;
2892
- const translatedLabel = formatMessage({
2893
- id: `content-manager.components.${attribute.component}.${field.name}`,
2894
- defaultMessage: field.label
2895
- });
2896
- return /* @__PURE__ */ jsx(
2897
- Grid$1.Item,
2898
- {
2899
- col: size,
2900
- s: 12,
2901
- xs: 12,
2902
- direction: "column",
2903
- alignItems: "stretch",
2904
- children: children({
2905
- ...field,
2906
- label: translatedLabel,
2907
- name: completeFieldName
2908
- })
2909
- },
2910
- completeFieldName
2911
- );
2912
- }) }, index2);
2913
- })
2914
- }
2915
- )
2916
- },
2917
- key
2918
- );
2919
- }),
2920
- /* @__PURE__ */ jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsx(Plus, {}), children: formatMessage({
2921
- id: getTranslation("containers.EditView.add.new-entry"),
2922
- defaultMessage: "Add an entry"
2923
- }) })
2924
- ]
2925
- }
2926
- )
2927
- ] });
2928
- };
2929
- const AccordionRoot = styled(Accordion.Root)`
2930
- border: 1px solid
2931
- ${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
2932
- `;
2933
- const TextButtonCustom = styled(TextButton)`
2934
- width: 100%;
2935
- display: flex;
2936
- justify-content: center;
2937
- border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
2938
- padding-inline: ${(props) => props.theme.spaces[6]};
2939
- padding-block: ${(props) => props.theme.spaces[3]};
2940
-
2941
- &:not([disabled]) {
2942
- cursor: pointer;
2943
-
2944
- &:hover {
2945
- background-color: ${(props) => props.theme.colors.primary100};
2946
- }
2947
- }
2948
-
2949
- span {
2950
- font-weight: 600;
2951
- font-size: 1.4rem;
2952
- line-height: 2.4rem;
2953
- }
2954
-
2955
- @media (prefers-reduced-motion: no-preference) {
2956
- transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
2957
- }
2958
- `;
2959
- const Component = ({
2960
- disabled,
2961
- index,
2962
- name: name2,
2963
- mainField = {
2964
- name: "id",
2965
- type: "integer"
2966
- },
2967
- children,
2968
- onDeleteComponent,
2969
- toggleCollapses,
2970
- __temp_key__,
2971
- ...dragProps
2972
- }) => {
2973
- const { formatMessage } = useIntl();
2974
- const displayValue = useForm("RepeatableComponent", (state) => {
2975
- return getIn(state.values, [...name2.split("."), mainField.name]);
2976
- });
2977
- const accordionRef = React.useRef(null);
2978
- const componentKey = name2.split(".").slice(0, -1).join(".");
2979
- const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
2980
- type: `${ItemTypes.COMPONENT}_${componentKey}`,
2981
- index,
2982
- item: {
2983
- index,
2984
- displayedValue: displayValue
2985
- },
2986
- onStart() {
2987
- toggleCollapses();
2988
- },
2989
- ...dragProps
2990
- });
2991
- React.useEffect(() => {
2992
- dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
2993
- }, [dragPreviewRef, index]);
2994
- const composedAccordionRefs = useComposedRefs(accordionRef, dragRef);
2995
- const composedBoxRefs = useComposedRefs(
2996
- boxRef,
2997
- dropRef
2998
- );
2999
- return /* @__PURE__ */ jsx(Fragment, { children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsxs(Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
3000
- /* @__PURE__ */ jsxs(Accordion.Header, { children: [
3001
- /* @__PURE__ */ jsx(Accordion.Trigger, { children: displayValue }),
3002
- /* @__PURE__ */ jsxs(Accordion.Actions, { children: [
3003
- /* @__PURE__ */ jsx(
3004
- IconButton,
3005
- {
3006
- variant: "ghost",
3007
- onClick: onDeleteComponent,
3008
- label: formatMessage({
3009
- id: getTranslation("containers.Edit.delete"),
3010
- defaultMessage: "Delete"
3011
- }),
3012
- children: /* @__PURE__ */ jsx(Trash, {})
3013
- }
3014
- ),
3015
- /* @__PURE__ */ jsx(
3016
- IconButton,
3017
- {
3018
- ref: composedAccordionRefs,
3019
- variant: "ghost",
3020
- onClick: (e) => e.stopPropagation(),
3021
- "data-handler-id": handlerId,
3022
- label: formatMessage({
3023
- id: getTranslation("components.DragHandle-label"),
3024
- defaultMessage: "Drag"
3025
- }),
3026
- onKeyDown: handleKeyDown,
3027
- children: /* @__PURE__ */ jsx(Drag, {})
3028
- }
3029
- )
3030
- ] })
3031
- ] }),
3032
- /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(
3033
- Flex,
3034
- {
3035
- direction: "column",
3036
- alignItems: "stretch",
3037
- background: "neutral100",
3038
- padding: 6,
3039
- gap: 6,
3040
- children
3041
- }
3042
- ) })
3043
- ] }) });
3044
- };
3045
- const Preview$1 = () => {
3046
- return /* @__PURE__ */ jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
3047
- };
3048
- const StyledSpan = styled(Box)`
3049
- display: block;
3050
- outline: 1px dashed ${({ theme }) => theme.colors.primary500};
3051
- outline-offset: -1px;
3052
- `;
3053
- const ComponentInput = ({
3054
- label,
3055
- required,
3056
- name: name2,
3057
- attribute,
3058
- disabled,
3059
- labelAction,
3060
- ...props
3061
- }) => {
3062
- const { formatMessage } = useIntl();
3063
- const field = useField(name2);
3064
- const showResetComponent = !attribute.repeatable && field.value && !disabled;
3065
- const { components } = useDoc();
3066
- const handleInitialisationClick = () => {
3067
- const schema = components[attribute.component];
3068
- const form = createDefaultForm(schema, components);
3069
- const data = transformDocument(schema, components)(form);
3070
- field.onChange(name2, data);
3071
- };
3072
- return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, required, children: [
3073
- /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
3074
- /* @__PURE__ */ jsxs(Field.Label, { action: labelAction, children: [
3075
- label,
3076
- attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
3077
- " (",
3078
- Array.isArray(field.value) ? field.value.length : 0,
3079
- ")"
3080
- ] })
3081
- ] }),
3082
- showResetComponent && /* @__PURE__ */ jsx(
3083
- IconButton,
3114
+ id: getTranslation("dnd.drop-item"),
3115
+ defaultMessage: `{item}, dropped. Final position in list: {position}.`
3116
+ },
3084
3117
  {
3085
- label: formatMessage({
3086
- id: getTranslation("components.reset-entry"),
3087
- defaultMessage: "Reset Entry"
3088
- }),
3089
- variant: "ghost",
3090
- onClick: () => {
3091
- field.onChange(name2, null);
3092
- },
3093
- children: /* @__PURE__ */ jsx(Trash, {})
3118
+ item: `${name2}.${index}`,
3119
+ position: getItemPos(index)
3094
3120
  }
3095
3121
  )
3096
- ] }),
3097
- !attribute.repeatable && !field.value && /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
3098
- !attribute.repeatable && field.value ? /* @__PURE__ */ jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
3099
- attribute.repeatable && /* @__PURE__ */ jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
3100
- /* @__PURE__ */ jsx(Field.Error, {})
3101
- ] });
3102
- };
3103
- const MemoizedComponentInput = React.memo(ComponentInput);
3104
- const AddComponentButton = ({
3105
- hasError,
3106
- isDisabled,
3107
- isOpen,
3108
- children,
3109
- onClick
3110
- }) => {
3111
- return /* @__PURE__ */ jsx(
3112
- StyledButton,
3113
- {
3114
- type: "button",
3115
- onClick,
3116
- disabled: isDisabled,
3117
- background: "neutral0",
3118
- style: { cursor: isDisabled ? "not-allowed" : "pointer" },
3119
- variant: "tertiary",
3120
- children: /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
3121
- /* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
3122
- /* @__PURE__ */ jsx(
3123
- AddComponentTitle,
3124
- {
3125
- variant: "pi",
3126
- fontWeight: "bold",
3127
- textColor: hasError && !isOpen ? "danger600" : "neutral500",
3128
- children
3129
- }
3130
- )
3131
- ] })
3132
- }
3133
- );
3134
- };
3135
- const StyledAddIcon = styled(PlusCircle)`
3136
- height: ${({ theme }) => theme.spaces[6]};
3137
- width: ${({ theme }) => theme.spaces[6]};
3138
- transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
3139
-
3140
- > circle {
3141
- fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
3142
- }
3143
- > path {
3144
- fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
3145
- }
3146
- `;
3147
- const AddComponentTitle = styled(Typography)``;
3148
- const StyledButton = styled(Button)`
3149
- border-radius: 26px;
3150
- border-color: ${({ theme }) => theme.colors.neutral150};
3151
- box-shadow: ${({ theme }) => theme.shadows.filterShadow};
3152
- height: 5rem;
3153
-
3154
- &:hover {
3155
- ${AddComponentTitle} {
3156
- color: ${({ theme }) => theme.colors.primary600};
3157
- }
3158
-
3159
- ${StyledAddIcon} {
3160
- > circle {
3161
- fill: ${({ theme }) => theme.colors.primary600};
3162
- }
3163
- > path {
3164
- fill: ${({ theme }) => theme.colors.primary600};
3165
- }
3122
+ );
3123
+ };
3124
+ const handleRemoveComponent = (name22, currentIndex) => () => {
3125
+ removeFieldRow(name22, currentIndex);
3126
+ };
3127
+ const hasError = error !== void 0;
3128
+ const renderButtonLabel = () => {
3129
+ if (addComponentIsOpen) {
3130
+ return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
3166
3131
  }
3167
- }
3168
- &:active {
3169
- ${AddComponentTitle} {
3170
- color: ${({ theme }) => theme.colors.primary600};
3132
+ if (hasError && dynamicDisplayedComponentsLength > max) {
3133
+ return formatMessage(
3134
+ {
3135
+ id: getTranslation(`components.DynamicZone.extra-components`),
3136
+ defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
3137
+ },
3138
+ {
3139
+ number: dynamicDisplayedComponentsLength - max
3140
+ }
3141
+ );
3171
3142
  }
3172
- ${StyledAddIcon} {
3173
- > circle {
3174
- fill: ${({ theme }) => theme.colors.primary600};
3175
- }
3176
- > path {
3177
- fill: ${({ theme }) => theme.colors.neutral100};
3178
- }
3143
+ if (hasError && dynamicDisplayedComponentsLength < min) {
3144
+ return formatMessage(
3145
+ {
3146
+ id: getTranslation(`components.DynamicZone.missing-components`),
3147
+ defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
3148
+ },
3149
+ { number: min - dynamicDisplayedComponentsLength }
3150
+ );
3179
3151
  }
3180
- }
3181
- `;
3182
- const ComponentCategory = ({
3183
- category,
3184
- components = [],
3185
- variant = "primary",
3186
- onAddComponent
3187
- }) => {
3188
- const { formatMessage } = useIntl();
3189
- return /* @__PURE__ */ jsxs(Accordion.Item, { value: category, children: [
3190
- /* @__PURE__ */ jsx(Accordion.Header, { variant, children: /* @__PURE__ */ jsx(Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
3191
- /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsx(
3192
- ComponentBox,
3152
+ return formatMessage(
3193
3153
  {
3194
- tag: "button",
3195
- type: "button",
3196
- background: "neutral100",
3197
- justifyContent: "center",
3198
- onClick: onAddComponent(uid),
3199
- hasRadius: true,
3200
- height: "8.4rem",
3201
- shrink: 0,
3202
- borderColor: "neutral200",
3203
- children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
3204
- /* @__PURE__ */ jsx(ComponentIcon, { color: "currentColor", background: "primary200", icon }),
3205
- /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: displayName })
3206
- ] })
3154
+ id: getTranslation("components.DynamicZone.add-component"),
3155
+ defaultMessage: "Add a component to {componentName}"
3207
3156
  },
3208
- uid
3209
- )) }) })
3210
- ] });
3211
- };
3212
- const Grid = styled(Box)`
3213
- display: grid;
3214
- grid-template-columns: repeat(auto-fit, 14rem);
3215
- grid-gap: ${({ theme }) => theme.spaces[1]};
3216
- `;
3217
- const ComponentBox = styled(Flex)`
3218
- color: ${({ theme }) => theme.colors.neutral600};
3219
- cursor: pointer;
3220
-
3221
- @media (prefers-reduced-motion: no-preference) {
3222
- transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
3223
- }
3224
-
3225
- &:focus,
3226
- &:hover {
3227
- border: 1px solid ${({ theme }) => theme.colors.primary200};
3228
- background: ${({ theme }) => theme.colors.primary100};
3229
- color: ${({ theme }) => theme.colors.primary600};
3230
- }
3231
- `;
3232
- const ComponentPicker = ({
3233
- dynamicComponentsByCategory = {},
3234
- isOpen,
3235
- onClickAddComponent
3236
- }) => {
3237
- const { formatMessage } = useIntl();
3238
- const handleAddComponentToDz = (componentUid) => () => {
3239
- onClickAddComponent(componentUid);
3157
+ { componentName: label || name2 }
3158
+ );
3240
3159
  };
3241
- if (!isOpen) {
3242
- return null;
3243
- }
3244
- return /* @__PURE__ */ jsxs(
3245
- Box,
3246
- {
3247
- paddingTop: 6,
3248
- paddingBottom: 6,
3249
- paddingLeft: 5,
3250
- paddingRight: 5,
3251
- background: "neutral0",
3252
- shadow: "tableShadow",
3253
- borderColor: "neutral150",
3254
- hasRadius: true,
3255
- children: [
3256
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", textColor: "neutral600", children: formatMessage({
3257
- id: getTranslation("components.DynamicZone.ComponentPicker-label"),
3258
- defaultMessage: "Pick one component"
3259
- }) }) }),
3260
- /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(Accordion.Root, { defaultValue: Object.keys(dynamicComponentsByCategory)[0], children: Object.entries(dynamicComponentsByCategory).map(([category, components], index) => /* @__PURE__ */ jsx(
3261
- ComponentCategory,
3262
- {
3263
- category,
3264
- components,
3265
- onAddComponent: handleAddComponentToDz,
3266
- variant: index % 2 === 1 ? "primary" : "secondary"
3267
- },
3268
- category
3269
- )) }) })
3270
- ]
3271
- }
3272
- );
3160
+ const level = useComponent("DynamicZone", (state) => state.level);
3161
+ const ariaDescriptionId = React.useId();
3162
+ return /* @__PURE__ */ jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
3163
+ dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxs(Box, { children: [
3164
+ /* @__PURE__ */ jsx(
3165
+ DynamicZoneLabel,
3166
+ {
3167
+ hint,
3168
+ label,
3169
+ labelAction,
3170
+ name: name2,
3171
+ numberOfComponents: dynamicDisplayedComponentsLength,
3172
+ required
3173
+ }
3174
+ ),
3175
+ /* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
3176
+ id: getTranslation("dnd.instructions"),
3177
+ defaultMessage: `Press spacebar to grab and re-order`
3178
+ }) }),
3179
+ /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
3180
+ /* @__PURE__ */ jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index) => /* @__PURE__ */ jsx(
3181
+ ComponentProvider,
3182
+ {
3183
+ level: level + 1,
3184
+ uid: field.__component,
3185
+ id: field.id,
3186
+ type: "dynamiczone",
3187
+ children: /* @__PURE__ */ jsx(
3188
+ DynamicComponent,
3189
+ {
3190
+ disabled,
3191
+ name: name2,
3192
+ index,
3193
+ componentUid: field.__component,
3194
+ onMoveComponent: handleMoveComponent,
3195
+ onRemoveComponentClick: handleRemoveComponent(name2, index),
3196
+ onCancel: handleCancel,
3197
+ onDropItem: handleDropItem,
3198
+ onGrabItem: handleGrabItem,
3199
+ onAddComponent: handleAddComponent,
3200
+ dynamicComponentsByCategory,
3201
+ children
3202
+ }
3203
+ )
3204
+ },
3205
+ field.__temp_key__
3206
+ )) })
3207
+ ] }),
3208
+ /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
3209
+ AddComponentButton,
3210
+ {
3211
+ hasError,
3212
+ isDisabled: disabled,
3213
+ isOpen: addComponentIsOpen,
3214
+ onClick: handleClickOpenPicker,
3215
+ children: renderButtonLabel()
3216
+ }
3217
+ ) }),
3218
+ /* @__PURE__ */ jsx(
3219
+ ComponentPicker,
3220
+ {
3221
+ dynamicComponentsByCategory,
3222
+ isOpen: addComponentIsOpen,
3223
+ onClickAddComponent: handleAddComponent
3224
+ }
3225
+ )
3226
+ ] }) });
3273
3227
  };
3274
3228
  const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
3275
3229
  const { formatMessage } = useIntl();
@@ -3749,8 +3703,7 @@ const Wrapper = styled.div`
3749
3703
  `;
3750
3704
  var listRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]))(\s*)/, emptyListRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]|[*+-]|(\d+)[.)])(\s*)$/, unorderedListRE = /[*+-]\s/;
3751
3705
  function newlineAndIndentContinueMarkdownList(cm) {
3752
- if (cm.getOption("disableInput"))
3753
- return CodeMirror.Pass;
3706
+ if (cm.getOption("disableInput")) return CodeMirror.Pass;
3754
3707
  var ranges = cm.listSelections(), replacements = [];
3755
3708
  for (var i = 0; i < ranges.length; i++) {
3756
3709
  var pos = ranges[i].head;
@@ -3784,8 +3737,7 @@ function newlineAndIndentContinueMarkdownList(cm) {
3784
3737
  var numbered = !(unorderedListRE.test(match[2]) || match[2].indexOf(">") >= 0);
3785
3738
  var bullet = numbered ? parseInt(match[3], 10) + 1 + match[4] : match[2].replace("x", " ");
3786
3739
  replacements[i] = "\n" + indent + bullet + after;
3787
- if (numbered)
3788
- incrementRemainingMarkdownListNumbers(cm, pos);
3740
+ if (numbered) incrementRemainingMarkdownListNumbers(cm, pos);
3789
3741
  }
3790
3742
  }
3791
3743
  cm.replaceSelections(replacements);
@@ -3803,10 +3755,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
3803
3755
  var newNumber = parseInt(startItem[3], 10) + lookAhead - skipCount;
3804
3756
  var nextNumber = parseInt(nextItem[3], 10), itemNumber = nextNumber;
3805
3757
  if (startIndent === nextIndent && !isNaN(nextNumber)) {
3806
- if (newNumber === nextNumber)
3807
- itemNumber = nextNumber + 1;
3808
- if (newNumber > nextNumber)
3809
- itemNumber = newNumber + 1;
3758
+ if (newNumber === nextNumber) itemNumber = nextNumber + 1;
3759
+ if (newNumber > nextNumber) itemNumber = newNumber + 1;
3810
3760
  cm.replaceRange(
3811
3761
  nextLine.replace(listRE, nextIndent + itemNumber + nextItem[4] + nextItem[5]),
3812
3762
  {
@@ -3819,10 +3769,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
3819
3769
  }
3820
3770
  );
3821
3771
  } else {
3822
- if (startIndent.length > nextIndent.length)
3823
- return;
3824
- if (startIndent.length < nextIndent.length && lookAhead === 1)
3825
- return;
3772
+ if (startIndent.length > nextIndent.length) return;
3773
+ if (startIndent.length < nextIndent.length && lookAhead === 1) return;
3826
3774
  skipCount += 1;
3827
3775
  }
3828
3776
  }
@@ -5017,567 +4965,621 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
5017
4965
  return /* @__PURE__ */ jsx(
5018
4966
  MemoizedComponentInput,
5019
4967
  {
5020
- ...props,
5021
- hint,
5022
- layout: components[props.attribute.component].layout,
5023
- disabled: fieldIsDisabled,
5024
- children: (inputProps) => /* @__PURE__ */ jsx(InputRenderer, { ...inputProps })
4968
+ ...props,
4969
+ hint,
4970
+ layout: components[props.attribute.component].layout,
4971
+ disabled: fieldIsDisabled,
4972
+ children: (inputProps) => /* @__PURE__ */ jsx(InputRenderer, { ...inputProps })
4973
+ }
4974
+ );
4975
+ case "dynamiczone":
4976
+ return /* @__PURE__ */ jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
4977
+ case "relation":
4978
+ return /* @__PURE__ */ jsx(MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
4979
+ case "richtext":
4980
+ return /* @__PURE__ */ jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4981
+ case "uid":
4982
+ return /* @__PURE__ */ jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4983
+ case "enumeration":
4984
+ return /* @__PURE__ */ jsx(
4985
+ InputRenderer$1,
4986
+ {
4987
+ ...props,
4988
+ hint,
4989
+ options: props.attribute.enum.map((value) => ({ value })),
4990
+ type: props.customField ? "custom-field" : props.type,
4991
+ disabled: fieldIsDisabled
4992
+ }
4993
+ );
4994
+ default:
4995
+ const { unique: _unique, mainField: _mainField, ...restProps } = props;
4996
+ return /* @__PURE__ */ jsx(
4997
+ InputRenderer$1,
4998
+ {
4999
+ ...restProps,
5000
+ hint,
5001
+ type: props.customField ? "custom-field" : props.type,
5002
+ disabled: fieldIsDisabled
5003
+ }
5004
+ );
5005
+ }
5006
+ };
5007
+ const attributeHasCustomFieldProperty = (attribute) => "customField" in attribute && typeof attribute.customField === "string";
5008
+ const useFieldHint = (hint = void 0, attribute) => {
5009
+ const { formatMessage } = useIntl();
5010
+ const { maximum, minimum } = getMinMax(attribute);
5011
+ if (!maximum && !minimum) {
5012
+ return hint;
5013
+ }
5014
+ const units = !["biginteger", "integer", "number", "dynamiczone", "component"].includes(
5015
+ attribute.type
5016
+ ) ? formatMessage(
5017
+ {
5018
+ id: "content-manager.form.Input.hint.character.unit",
5019
+ defaultMessage: "{maxValue, plural, one { character} other { characters}}"
5020
+ },
5021
+ {
5022
+ maxValue: Math.max(minimum || 0, maximum || 0)
5023
+ }
5024
+ ) : null;
5025
+ const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
5026
+ return formatMessage(
5027
+ {
5028
+ id: "content-manager.form.Input.hint.text",
5029
+ defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
5030
+ },
5031
+ {
5032
+ min: minimum,
5033
+ max: maximum,
5034
+ description: hint,
5035
+ unit: units,
5036
+ divider: hasMinAndMax ? formatMessage({
5037
+ id: "content-manager.form.Input.hint.minMaxDivider",
5038
+ defaultMessage: " / "
5039
+ }) : null,
5040
+ br: /* @__PURE__ */ jsx("br", {})
5041
+ }
5042
+ );
5043
+ };
5044
+ const getMinMax = (attribute) => {
5045
+ if ("min" in attribute || "max" in attribute) {
5046
+ return {
5047
+ maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
5048
+ minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
5049
+ };
5050
+ } else if ("maxLength" in attribute || "minLength" in attribute) {
5051
+ return { maximum: attribute.maxLength, minimum: attribute.minLength };
5052
+ } else {
5053
+ return { maximum: void 0, minimum: void 0 };
5054
+ }
5055
+ };
5056
+ const MemoizedInputRenderer = memo(InputRenderer);
5057
+ const RESPONSIVE_CONTAINER_BREAKPOINTS = {
5058
+ sm: "27.5rem"
5059
+ // 440px
5060
+ };
5061
+ const ResponsiveGridRoot = styled(Grid$1.Root)`
5062
+ container-type: inline-size;
5063
+ `;
5064
+ const ResponsiveGridItem = styled(Grid$1.Item)`
5065
+ grid-column: span 12;
5066
+
5067
+ @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
5068
+ ${({ col }) => col && `grid-column: span ${col};`}
5069
+ }
5070
+ `;
5071
+ const FormLayout = ({ layout }) => {
5072
+ const { formatMessage } = useIntl();
5073
+ const { model } = useDoc();
5074
+ return /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((panel, index) => {
5075
+ if (panel.some((row) => row.some((field) => field.type === "dynamiczone"))) {
5076
+ const [row] = panel;
5077
+ const [field] = row;
5078
+ const fieldWithTranslatedLabel = {
5079
+ ...field,
5080
+ label: formatMessage({
5081
+ id: `content-manager.content-types.${model}.${field.name}`,
5082
+ defaultMessage: field.label
5083
+ })
5084
+ };
5085
+ return /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: /* @__PURE__ */ jsx(Grid$1.Item, { col: 12, s: 12, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel }) }) }, field.name);
5086
+ }
5087
+ return /* @__PURE__ */ jsx(
5088
+ Box,
5089
+ {
5090
+ hasRadius: true,
5091
+ background: "neutral0",
5092
+ shadow: "tableShadow",
5093
+ paddingLeft: 6,
5094
+ paddingRight: 6,
5095
+ paddingTop: 6,
5096
+ paddingBottom: 6,
5097
+ borderColor: "neutral150",
5098
+ children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: panel.map((row, gridRowIndex) => /* @__PURE__ */ jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
5099
+ const fieldWithTranslatedLabel = {
5100
+ ...field,
5101
+ label: formatMessage({
5102
+ id: `content-manager.content-types.${model}.${field.name}`,
5103
+ defaultMessage: field.label
5104
+ })
5105
+ };
5106
+ return /* @__PURE__ */ jsx(
5107
+ ResponsiveGridItem,
5108
+ {
5109
+ col: size,
5110
+ s: 12,
5111
+ xs: 12,
5112
+ direction: "column",
5113
+ alignItems: "stretch",
5114
+ children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel })
5115
+ },
5116
+ field.name
5117
+ );
5118
+ }) }, gridRowIndex)) })
5119
+ },
5120
+ index
5121
+ );
5122
+ }) });
5123
+ };
5124
+ const NonRepeatableComponent = ({
5125
+ attribute,
5126
+ name: name2,
5127
+ children,
5128
+ layout
5129
+ }) => {
5130
+ const { formatMessage } = useIntl();
5131
+ const { value } = useField(name2);
5132
+ const level = useComponent("NonRepeatableComponent", (state) => state.level);
5133
+ const isNested = level > 0;
5134
+ return /* @__PURE__ */ jsx(ComponentProvider, { id: value?.id, uid: attribute.component, level: level + 1, type: "component", children: /* @__PURE__ */ jsx(
5135
+ Box,
5136
+ {
5137
+ background: "neutral100",
5138
+ paddingLeft: 6,
5139
+ paddingRight: 6,
5140
+ paddingTop: 6,
5141
+ paddingBottom: 6,
5142
+ hasRadius: isNested,
5143
+ borderColor: isNested ? "neutral200" : void 0,
5144
+ children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index) => {
5145
+ return /* @__PURE__ */ jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
5146
+ const completeFieldName = `${name2}.${field.name}`;
5147
+ const translatedLabel = formatMessage({
5148
+ id: `content-manager.components.${attribute.component}.${field.name}`,
5149
+ defaultMessage: field.label
5150
+ });
5151
+ return /* @__PURE__ */ jsx(
5152
+ ResponsiveGridItem,
5153
+ {
5154
+ col: size,
5155
+ s: 12,
5156
+ xs: 12,
5157
+ direction: "column",
5158
+ alignItems: "stretch",
5159
+ children: children({ ...field, label: translatedLabel, name: completeFieldName })
5160
+ },
5161
+ completeFieldName
5162
+ );
5163
+ }) }, index);
5164
+ }) })
5165
+ }
5166
+ ) });
5167
+ };
5168
+ const RepeatableComponent = ({
5169
+ attribute,
5170
+ disabled,
5171
+ name: name2,
5172
+ mainField,
5173
+ children,
5174
+ layout
5175
+ }) => {
5176
+ const { toggleNotification } = useNotification();
5177
+ const { formatMessage } = useIntl();
5178
+ const { search: searchString } = useLocation();
5179
+ const search = React.useMemo(() => new URLSearchParams(searchString), [searchString]);
5180
+ const { components } = useDoc();
5181
+ const {
5182
+ value = [],
5183
+ error,
5184
+ rawError
5185
+ } = useField(name2);
5186
+ const addFieldRow = useForm("RepeatableComponent", (state) => state.addFieldRow);
5187
+ const moveFieldRow = useForm("RepeatableComponent", (state) => state.moveFieldRow);
5188
+ const removeFieldRow = useForm("RepeatableComponent", (state) => state.removeFieldRow);
5189
+ const { max = Infinity } = attribute;
5190
+ const [collapseToOpen, setCollapseToOpen] = React.useState("");
5191
+ const [liveText, setLiveText] = React.useState("");
5192
+ React.useEffect(() => {
5193
+ const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;
5194
+ const hasNestedValue = value && Array.isArray(value) && value.length > 0;
5195
+ if (hasNestedErrors && hasNestedValue) {
5196
+ const errorOpenItems = rawError.map((_, idx) => {
5197
+ return value[idx] ? value[idx].__temp_key__ : null;
5198
+ }).filter((value2) => !!value2);
5199
+ if (errorOpenItems && errorOpenItems.length > 0) {
5200
+ setCollapseToOpen((collapseToOpen2) => {
5201
+ if (!errorOpenItems.includes(collapseToOpen2)) {
5202
+ return errorOpenItems[0];
5203
+ }
5204
+ return collapseToOpen2;
5205
+ });
5206
+ }
5207
+ }
5208
+ }, [rawError, value]);
5209
+ const componentTmpKeyWithFocussedField = React.useMemo(() => {
5210
+ if (search.has("field")) {
5211
+ const fieldParam = search.get("field");
5212
+ if (!fieldParam) {
5213
+ return void 0;
5214
+ }
5215
+ const [, path] = fieldParam.split(`${name2}.`);
5216
+ if (getIn(value, path, void 0) !== void 0) {
5217
+ const [subpath] = path.split(".");
5218
+ return getIn(value, subpath, void 0)?.__temp_key__;
5219
+ }
5220
+ }
5221
+ return void 0;
5222
+ }, [search, name2, value]);
5223
+ const prevValue = usePrev(value);
5224
+ React.useEffect(() => {
5225
+ if (prevValue && prevValue.length < value.length) {
5226
+ setCollapseToOpen(value[value.length - 1].__temp_key__);
5227
+ }
5228
+ }, [value, prevValue]);
5229
+ React.useEffect(() => {
5230
+ if (typeof componentTmpKeyWithFocussedField === "string") {
5231
+ setCollapseToOpen(componentTmpKeyWithFocussedField);
5232
+ }
5233
+ }, [componentTmpKeyWithFocussedField]);
5234
+ const toggleCollapses = () => {
5235
+ setCollapseToOpen("");
5236
+ };
5237
+ const handleClick = () => {
5238
+ if (value.length < max) {
5239
+ const schema = components[attribute.component];
5240
+ const form = createDefaultForm(schema, components);
5241
+ const data = transformDocument(schema, components)(form);
5242
+ addFieldRow(name2, data);
5243
+ } else if (value.length >= max) {
5244
+ toggleNotification({
5245
+ type: "info",
5246
+ message: formatMessage({
5247
+ id: getTranslation("components.notification.info.maximum-requirement")
5248
+ })
5249
+ });
5250
+ }
5251
+ };
5252
+ const handleMoveComponentField = (newIndex, currentIndex) => {
5253
+ setLiveText(
5254
+ formatMessage(
5255
+ {
5256
+ id: getTranslation("dnd.reorder"),
5257
+ defaultMessage: "{item}, moved. New position in list: {position}."
5258
+ },
5259
+ {
5260
+ item: `${name2}.${currentIndex}`,
5261
+ position: getItemPos(newIndex)
5025
5262
  }
5026
- );
5027
- case "dynamiczone":
5028
- return /* @__PURE__ */ jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
5029
- case "relation":
5030
- return /* @__PURE__ */ jsx(MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
5031
- case "richtext":
5032
- return /* @__PURE__ */ jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
5033
- case "uid":
5034
- return /* @__PURE__ */ jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
5035
- case "enumeration":
5036
- return /* @__PURE__ */ jsx(
5037
- InputRenderer$1,
5263
+ )
5264
+ );
5265
+ moveFieldRow(name2, currentIndex, newIndex);
5266
+ };
5267
+ const handleValueChange = (key) => {
5268
+ setCollapseToOpen(key);
5269
+ };
5270
+ const getItemPos = (index) => `${index + 1} of ${value.length}`;
5271
+ const handleCancel = (index) => {
5272
+ setLiveText(
5273
+ formatMessage(
5038
5274
  {
5039
- ...props,
5040
- hint,
5041
- options: props.attribute.enum.map((value) => ({ value })),
5042
- type: props.customField ? "custom-field" : props.type,
5043
- disabled: fieldIsDisabled
5275
+ id: getTranslation("dnd.cancel-item"),
5276
+ defaultMessage: "{item}, dropped. Re-order cancelled."
5277
+ },
5278
+ {
5279
+ item: `${name2}.${index}`
5044
5280
  }
5045
- );
5046
- default:
5047
- const { unique: _unique, mainField: _mainField, ...restProps } = props;
5048
- return /* @__PURE__ */ jsx(
5049
- InputRenderer$1,
5281
+ )
5282
+ );
5283
+ };
5284
+ const handleGrabItem = (index) => {
5285
+ setLiveText(
5286
+ formatMessage(
5050
5287
  {
5051
- ...restProps,
5052
- hint,
5053
- type: props.customField ? "custom-field" : props.type,
5054
- disabled: fieldIsDisabled
5288
+ id: getTranslation("dnd.grab-item"),
5289
+ defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
5290
+ },
5291
+ {
5292
+ item: `${name2}.${index}`,
5293
+ position: getItemPos(index)
5055
5294
  }
5056
- );
5295
+ )
5296
+ );
5297
+ };
5298
+ const handleDropItem = (index) => {
5299
+ setLiveText(
5300
+ formatMessage(
5301
+ {
5302
+ id: getTranslation("dnd.drop-item"),
5303
+ defaultMessage: `{item}, dropped. Final position in list: {position}.`
5304
+ },
5305
+ {
5306
+ item: `${name2}.${index}`,
5307
+ position: getItemPos(index)
5308
+ }
5309
+ )
5310
+ );
5311
+ };
5312
+ const ariaDescriptionId = React.useId();
5313
+ const level = useComponent("RepeatableComponent", (state) => state.level);
5314
+ if (value.length === 0) {
5315
+ return /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleClick });
5057
5316
  }
5317
+ return /* @__PURE__ */ jsxs(Box, { hasRadius: true, children: [
5318
+ /* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
5319
+ id: getTranslation("dnd.instructions"),
5320
+ defaultMessage: `Press spacebar to grab and re-order`
5321
+ }) }),
5322
+ /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
5323
+ /* @__PURE__ */ jsxs(
5324
+ AccordionRoot,
5325
+ {
5326
+ $error: error,
5327
+ value: collapseToOpen,
5328
+ onValueChange: handleValueChange,
5329
+ "aria-describedby": ariaDescriptionId,
5330
+ children: [
5331
+ value.map(({ __temp_key__: key, id }, index) => {
5332
+ const nameWithIndex = `${name2}.${index}`;
5333
+ return /* @__PURE__ */ jsx(
5334
+ ComponentProvider,
5335
+ {
5336
+ id,
5337
+ uid: attribute.component,
5338
+ level: level + 1,
5339
+ type: "repeatable",
5340
+ children: /* @__PURE__ */ jsx(
5341
+ Component,
5342
+ {
5343
+ disabled,
5344
+ name: nameWithIndex,
5345
+ attribute,
5346
+ index,
5347
+ mainField,
5348
+ onMoveItem: handleMoveComponentField,
5349
+ onDeleteComponent: () => {
5350
+ removeFieldRow(name2, index);
5351
+ toggleCollapses();
5352
+ },
5353
+ toggleCollapses,
5354
+ onCancel: handleCancel,
5355
+ onDropItem: handleDropItem,
5356
+ onGrabItem: handleGrabItem,
5357
+ __temp_key__: key,
5358
+ children: layout.map((row, index2) => {
5359
+ return /* @__PURE__ */ jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
5360
+ const completeFieldName = `${nameWithIndex}.${field.name}`;
5361
+ const translatedLabel = formatMessage({
5362
+ id: `content-manager.components.${attribute.component}.${field.name}`,
5363
+ defaultMessage: field.label
5364
+ });
5365
+ return /* @__PURE__ */ jsx(
5366
+ ResponsiveGridItem,
5367
+ {
5368
+ col: size,
5369
+ s: 12,
5370
+ xs: 12,
5371
+ direction: "column",
5372
+ alignItems: "stretch",
5373
+ children: children({
5374
+ ...field,
5375
+ label: translatedLabel,
5376
+ name: completeFieldName
5377
+ })
5378
+ },
5379
+ completeFieldName
5380
+ );
5381
+ }) }, index2);
5382
+ })
5383
+ }
5384
+ )
5385
+ },
5386
+ key
5387
+ );
5388
+ }),
5389
+ /* @__PURE__ */ jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsx(Plus, {}), children: formatMessage({
5390
+ id: getTranslation("containers.EditView.add.new-entry"),
5391
+ defaultMessage: "Add an entry"
5392
+ }) })
5393
+ ]
5394
+ }
5395
+ )
5396
+ ] });
5058
5397
  };
5059
- const attributeHasCustomFieldProperty = (attribute) => "customField" in attribute && typeof attribute.customField === "string";
5060
- const useFieldHint = (hint = void 0, attribute) => {
5061
- const { formatMessage } = useIntl();
5062
- const { maximum, minimum } = getMinMax(attribute);
5063
- if (!maximum && !minimum) {
5064
- return hint;
5065
- }
5066
- const units = !["biginteger", "integer", "number", "dynamiczone", "component"].includes(
5067
- attribute.type
5068
- ) ? formatMessage(
5069
- {
5070
- id: "content-manager.form.Input.hint.character.unit",
5071
- defaultMessage: "{maxValue, plural, one { character} other { characters}}"
5072
- },
5073
- {
5074
- maxValue: Math.max(minimum || 0, maximum || 0)
5075
- }
5076
- ) : null;
5077
- const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
5078
- return formatMessage(
5079
- {
5080
- id: "content-manager.form.Input.hint.text",
5081
- defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
5082
- },
5083
- {
5084
- min: minimum,
5085
- max: maximum,
5086
- description: hint,
5087
- unit: units,
5088
- divider: hasMinAndMax ? formatMessage({
5089
- id: "content-manager.form.Input.hint.minMaxDivider",
5090
- defaultMessage: " / "
5091
- }) : null,
5092
- br: /* @__PURE__ */ jsx("br", {})
5398
+ const AccordionRoot = styled(Accordion.Root)`
5399
+ border: 1px solid
5400
+ ${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
5401
+ `;
5402
+ const TextButtonCustom = styled(TextButton)`
5403
+ width: 100%;
5404
+ display: flex;
5405
+ justify-content: center;
5406
+ border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
5407
+ padding-inline: ${(props) => props.theme.spaces[6]};
5408
+ padding-block: ${(props) => props.theme.spaces[3]};
5409
+
5410
+ &:not([disabled]) {
5411
+ cursor: pointer;
5412
+
5413
+ &:hover {
5414
+ background-color: ${(props) => props.theme.colors.primary100};
5093
5415
  }
5094
- );
5095
- };
5096
- const getMinMax = (attribute) => {
5097
- if ("min" in attribute || "max" in attribute) {
5098
- return {
5099
- maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
5100
- minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
5101
- };
5102
- } else if ("maxLength" in attribute || "minLength" in attribute) {
5103
- return { maximum: attribute.maxLength, minimum: attribute.minLength };
5104
- } else {
5105
- return { maximum: void 0, minimum: void 0 };
5106
5416
  }
5107
- };
5108
- const MemoizedInputRenderer = memo(InputRenderer);
5109
- const DynamicComponent = ({
5110
- componentUid,
5417
+
5418
+ span {
5419
+ font-weight: 600;
5420
+ font-size: 1.4rem;
5421
+ line-height: 2.4rem;
5422
+ }
5423
+
5424
+ @media (prefers-reduced-motion: no-preference) {
5425
+ transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
5426
+ }
5427
+ `;
5428
+ const Component = ({
5111
5429
  disabled,
5112
5430
  index,
5113
5431
  name: name2,
5114
- onRemoveComponentClick,
5115
- onMoveComponent,
5116
- onGrabItem,
5117
- onDropItem,
5118
- onCancel,
5119
- dynamicComponentsByCategory = {},
5120
- onAddComponent
5432
+ mainField = {
5433
+ name: "id",
5434
+ type: "integer"
5435
+ },
5436
+ children,
5437
+ onDeleteComponent,
5438
+ toggleCollapses,
5439
+ __temp_key__,
5440
+ ...dragProps
5121
5441
  }) => {
5122
5442
  const { formatMessage } = useIntl();
5123
- const formValues = useForm("DynamicComponent", (state) => state.values);
5124
- const {
5125
- edit: { components }
5126
- } = useDocLayout();
5127
- const title = React.useMemo(() => {
5128
- const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
5129
- const mainFieldValue = getIn(formValues, `${name2}.${index}.${mainField}`);
5130
- const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
5131
- const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
5132
- return mainValue;
5133
- }, [componentUid, components, formValues, name2, index]);
5134
- const { icon, displayName } = React.useMemo(() => {
5135
- const [category] = componentUid.split(".");
5136
- const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
5137
- (component) => component.uid === componentUid
5138
- ) ?? { icon: null, displayName: null };
5139
- return { icon: icon2, displayName: displayName2 };
5140
- }, [componentUid, dynamicComponentsByCategory]);
5443
+ const displayValue = useForm("RepeatableComponent", (state) => {
5444
+ return getIn(state.values, [...name2.split("."), mainField.name]);
5445
+ });
5446
+ const accordionRef = React.useRef(null);
5447
+ const componentKey = name2.split(".").slice(0, -1).join(".");
5141
5448
  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
5142
- type: `${ItemTypes.DYNAMIC_ZONE}_${name2}`,
5449
+ type: `${ItemTypes.COMPONENT}_${componentKey}`,
5143
5450
  index,
5144
5451
  item: {
5145
5452
  index,
5146
- displayedValue: `${displayName} ${title}`,
5147
- icon
5453
+ displayedValue: displayValue
5148
5454
  },
5149
- onMoveItem: onMoveComponent,
5150
- onDropItem,
5151
- onGrabItem,
5152
- onCancel
5455
+ onStart() {
5456
+ toggleCollapses();
5457
+ },
5458
+ ...dragProps
5153
5459
  });
5154
5460
  React.useEffect(() => {
5155
5461
  dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
5156
5462
  }, [dragPreviewRef, index]);
5157
- const accordionValue = React.useId();
5158
- const { value = [], rawError } = useField(`${name2}.${index}`);
5159
- const [collapseToOpen, setCollapseToOpen] = React.useState("");
5160
- React.useEffect(() => {
5161
- if (rawError && value) {
5162
- setCollapseToOpen(accordionValue);
5163
- }
5164
- }, [rawError, value, accordionValue]);
5165
- const composedBoxRefs = useComposedRefs(boxRef, dropRef);
5166
- const accordionActions = disabled ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
5167
- /* @__PURE__ */ jsx(
5168
- IconButton,
5169
- {
5170
- variant: "ghost",
5171
- label: formatMessage(
5463
+ const composedAccordionRefs = useComposedRefs(accordionRef, dragRef);
5464
+ const composedBoxRefs = useComposedRefs(
5465
+ boxRef,
5466
+ dropRef
5467
+ );
5468
+ return /* @__PURE__ */ jsx(Fragment, { children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsxs(Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
5469
+ /* @__PURE__ */ jsxs(Accordion.Header, { children: [
5470
+ /* @__PURE__ */ jsx(Accordion.Trigger, { children: displayValue }),
5471
+ /* @__PURE__ */ jsxs(Accordion.Actions, { children: [
5472
+ /* @__PURE__ */ jsx(
5473
+ IconButton,
5172
5474
  {
5173
- id: getTranslation("components.DynamicZone.delete-label"),
5174
- defaultMessage: "Delete {name}"
5175
- },
5176
- { name: title }
5475
+ variant: "ghost",
5476
+ onClick: onDeleteComponent,
5477
+ label: formatMessage({
5478
+ id: getTranslation("containers.Edit.delete"),
5479
+ defaultMessage: "Delete"
5480
+ }),
5481
+ children: /* @__PURE__ */ jsx(Trash, {})
5482
+ }
5177
5483
  ),
5178
- onClick: onRemoveComponentClick,
5179
- children: /* @__PURE__ */ jsx(Trash, {})
5180
- }
5181
- ),
5182
- /* @__PURE__ */ jsx(
5183
- IconButton,
5184
- {
5185
- variant: "ghost",
5186
- onClick: (e) => e.stopPropagation(),
5187
- "data-handler-id": handlerId,
5188
- ref: dragRef,
5189
- label: formatMessage({
5190
- id: getTranslation("components.DragHandle-label"),
5191
- defaultMessage: "Drag"
5192
- }),
5193
- onKeyDown: handleKeyDown,
5194
- children: /* @__PURE__ */ jsx(Drag, {})
5195
- }
5196
- ),
5197
- /* @__PURE__ */ jsxs(Menu.Root, { children: [
5198
- /* @__PURE__ */ jsxs(Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
5199
- /* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false }),
5200
- /* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children: formatMessage({
5201
- id: getTranslation("components.DynamicZone.more-actions"),
5202
- defaultMessage: "More actions"
5203
- }) })
5204
- ] }),
5205
- /* @__PURE__ */ jsxs(Menu.Content, { children: [
5206
- /* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
5207
- /* @__PURE__ */ jsx(Menu.SubTrigger, { children: formatMessage({
5208
- id: getTranslation("components.DynamicZone.add-item-above"),
5209
- defaultMessage: "Add component above"
5210
- }) }),
5211
- /* @__PURE__ */ jsx(Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
5212
- /* @__PURE__ */ jsx(Menu.Label, { children: category }),
5213
- components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => onAddComponent(uid, index), children: displayName2 }, componentUid))
5214
- ] }, category)) })
5215
- ] }),
5216
- /* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
5217
- /* @__PURE__ */ jsx(Menu.SubTrigger, { children: formatMessage({
5218
- id: getTranslation("components.DynamicZone.add-item-below"),
5219
- defaultMessage: "Add component below"
5220
- }) }),
5221
- /* @__PURE__ */ jsx(Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
5222
- /* @__PURE__ */ jsx(Menu.Label, { children: category }),
5223
- components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => onAddComponent(uid, index + 1), children: displayName2 }, componentUid))
5224
- ] }, category)) })
5225
- ] })
5226
- ] })
5227
- ] })
5228
- ] });
5229
- const accordionTitle = title ? `${displayName} ${title}` : displayName;
5230
- return /* @__PURE__ */ jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
5231
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Rectangle, { background: "neutral200" }) }),
5232
- /* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsx(Accordion.Root, { value: collapseToOpen, onValueChange: setCollapseToOpen, children: /* @__PURE__ */ jsxs(Accordion.Item, { value: accordionValue, children: [
5233
- /* @__PURE__ */ jsxs(Accordion.Header, { children: [
5234
5484
  /* @__PURE__ */ jsx(
5235
- Accordion.Trigger,
5485
+ IconButton,
5236
5486
  {
5237
- icon: icon && COMPONENT_ICONS[icon] ? COMPONENT_ICONS[icon] : COMPONENT_ICONS.dashboard,
5238
- children: accordionTitle
5487
+ ref: composedAccordionRefs,
5488
+ variant: "ghost",
5489
+ onClick: (e) => e.stopPropagation(),
5490
+ "data-handler-id": handlerId,
5491
+ label: formatMessage({
5492
+ id: getTranslation("components.DragHandle-label"),
5493
+ defaultMessage: "Drag"
5494
+ }),
5495
+ onKeyDown: handleKeyDown,
5496
+ children: /* @__PURE__ */ jsx(Drag, {})
5239
5497
  }
5240
- ),
5241
- /* @__PURE__ */ jsx(Accordion.Actions, { children: accordionActions })
5242
- ] }),
5243
- /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsx(
5244
- Grid$1.Item,
5245
- {
5246
- col: 12,
5247
- s: 12,
5248
- xs: 12,
5249
- direction: "column",
5250
- alignItems: "stretch",
5251
- children: /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: row.map(({ size, ...field }) => {
5252
- const fieldName = `${name2}.${index}.${field.name}`;
5253
- const fieldWithTranslatedLabel = {
5254
- ...field,
5255
- label: formatMessage({
5256
- id: `content-manager.components.${componentUid}.${field.name}`,
5257
- defaultMessage: field.label
5258
- })
5259
- };
5260
- return /* @__PURE__ */ jsx(
5261
- Grid$1.Item,
5262
- {
5263
- col: size,
5264
- s: 12,
5265
- xs: 12,
5266
- direction: "column",
5267
- alignItems: "stretch",
5268
- children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
5269
- },
5270
- fieldName
5271
- );
5272
- }) })
5273
- },
5274
- rowInd
5275
- )) }) }) }) })
5276
- ] }) }) })
5277
- ] });
5278
- };
5279
- const StyledBox = styled(Box)`
5280
- > div:first-child {
5281
- box-shadow: ${({ theme }) => theme.shadows.tableShadow};
5282
- }
5283
- `;
5284
- const AccordionContentRadius = styled(Box)`
5285
- border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
5286
- `;
5287
- const Rectangle = styled(Box)`
5288
- width: ${({ theme }) => theme.spaces[2]};
5289
- height: ${({ theme }) => theme.spaces[4]};
5290
- `;
5291
- const Preview = styled.span`
5292
- display: block;
5293
- background-color: ${({ theme }) => theme.colors.primary100};
5294
- outline: 1px dashed ${({ theme }) => theme.colors.primary500};
5295
- outline-offset: -1px;
5296
- padding: ${({ theme }) => theme.spaces[6]};
5297
- `;
5298
- const ComponentContainer = styled(Box)`
5299
- list-style: none;
5300
- padding: 0;
5301
- margin: 0;
5302
- `;
5303
- const DynamicZoneLabel = ({
5304
- hint,
5305
- label,
5306
- labelAction,
5307
- name: name2,
5308
- numberOfComponents = 0,
5309
- required
5310
- }) => {
5311
- return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
5312
- Box,
5313
- {
5314
- paddingTop: 3,
5315
- paddingBottom: 3,
5316
- paddingRight: 4,
5317
- paddingLeft: 4,
5318
- borderRadius: "26px",
5319
- background: "neutral0",
5320
- shadow: "filterShadow",
5321
- color: "neutral500",
5322
- children: /* @__PURE__ */ jsxs(Flex, { direction: "column", justifyContent: "center", children: [
5323
- /* @__PURE__ */ jsxs(Flex, { maxWidth: "35.6rem", children: [
5324
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
5325
- label || name2,
5326
- " "
5327
- ] }),
5328
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
5329
- "(",
5330
- numberOfComponents,
5331
- ")"
5332
- ] }),
5333
- required && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: "*" }),
5334
- labelAction && /* @__PURE__ */ jsx(Box, { paddingLeft: 1, children: labelAction })
5335
- ] }),
5336
- hint && /* @__PURE__ */ jsx(Box, { paddingTop: 1, maxWidth: "35.6rem", children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: hint }) })
5498
+ )
5337
5499
  ] })
5338
- }
5339
- ) });
5340
- };
5341
- const [DynamicZoneProvider, useDynamicZone] = createContext(
5342
- "DynamicZone",
5343
- {
5344
- isInDynamicZone: false
5345
- }
5346
- );
5347
- const DynamicZone = ({
5348
- attribute,
5349
- disabled: disabledProp,
5350
- hint,
5500
+ ] }),
5501
+ /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(
5502
+ Flex,
5503
+ {
5504
+ direction: "column",
5505
+ alignItems: "stretch",
5506
+ background: "neutral100",
5507
+ padding: 6,
5508
+ gap: 6,
5509
+ children
5510
+ }
5511
+ ) })
5512
+ ] }) });
5513
+ };
5514
+ const Preview = () => {
5515
+ return /* @__PURE__ */ jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
5516
+ };
5517
+ const StyledSpan = styled(Box)`
5518
+ display: block;
5519
+ outline: 1px dashed ${({ theme }) => theme.colors.primary500};
5520
+ outline-offset: -1px;
5521
+ `;
5522
+ const ComponentInput = ({
5351
5523
  label,
5352
- labelAction,
5524
+ required,
5353
5525
  name: name2,
5354
- required = false
5526
+ attribute,
5527
+ disabled,
5528
+ labelAction,
5529
+ ...props
5355
5530
  }) => {
5356
- const { max = Infinity, min = -Infinity } = attribute ?? {};
5357
- const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);
5358
- const [liveText, setLiveText] = React.useState("");
5359
- const { components, isLoading } = useDoc();
5360
- const disabled = disabledProp || isLoading;
5361
- const { addFieldRow, removeFieldRow, moveFieldRow } = useForm(
5362
- "DynamicZone",
5363
- ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
5364
- addFieldRow: addFieldRow2,
5365
- removeFieldRow: removeFieldRow2,
5366
- moveFieldRow: moveFieldRow2
5367
- })
5368
- );
5369
- const { value = [], error } = useField(name2);
5370
- const dynamicComponentsByCategory = React.useMemo(() => {
5371
- return attribute.components.reduce((acc, componentUid) => {
5372
- const { category, info } = components[componentUid] ?? { info: {} };
5373
- const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
5374
- if (!acc[category]) {
5375
- acc[category] = [];
5376
- }
5377
- acc[category] = [...acc[category], component];
5378
- return acc;
5379
- }, {});
5380
- }, [attribute.components, components]);
5381
5531
  const { formatMessage } = useIntl();
5382
- const { toggleNotification } = useNotification();
5383
- const dynamicDisplayedComponentsLength = value.length;
5384
- const handleAddComponent = (uid, position) => {
5385
- setAddComponentIsOpen(false);
5386
- const schema = components[uid];
5532
+ const field = useField(name2);
5533
+ const showResetComponent = !attribute.repeatable && field.value && !disabled;
5534
+ const { components } = useDoc();
5535
+ const handleInitialisationClick = () => {
5536
+ const schema = components[attribute.component];
5387
5537
  const form = createDefaultForm(schema, components);
5388
- const transformations = pipe$1(transformDocument(schema, components), (data2) => ({
5389
- ...data2,
5390
- __component: uid
5391
- }));
5392
- const data = transformations(form);
5393
- addFieldRow(name2, data, position);
5394
- };
5395
- const handleClickOpenPicker = () => {
5396
- if (dynamicDisplayedComponentsLength < max) {
5397
- setAddComponentIsOpen((prev) => !prev);
5398
- } else {
5399
- toggleNotification({
5400
- type: "info",
5401
- message: formatMessage({
5402
- id: getTranslation("components.notification.info.maximum-requirement")
5403
- })
5404
- });
5405
- }
5406
- };
5407
- const handleMoveComponent = (newIndex, currentIndex) => {
5408
- setLiveText(
5409
- formatMessage(
5410
- {
5411
- id: getTranslation("dnd.reorder"),
5412
- defaultMessage: "{item}, moved. New position in list: {position}."
5413
- },
5414
- {
5415
- item: `${name2}.${currentIndex}`,
5416
- position: getItemPos(newIndex)
5417
- }
5418
- )
5419
- );
5420
- moveFieldRow(name2, currentIndex, newIndex);
5421
- };
5422
- const getItemPos = (index) => `${index + 1} of ${value.length}`;
5423
- const handleCancel = (index) => {
5424
- setLiveText(
5425
- formatMessage(
5426
- {
5427
- id: getTranslation("dnd.cancel-item"),
5428
- defaultMessage: "{item}, dropped. Re-order cancelled."
5429
- },
5430
- {
5431
- item: `${name2}.${index}`
5432
- }
5433
- )
5434
- );
5435
- };
5436
- const handleGrabItem = (index) => {
5437
- setLiveText(
5438
- formatMessage(
5439
- {
5440
- id: getTranslation("dnd.grab-item"),
5441
- defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
5442
- },
5443
- {
5444
- item: `${name2}.${index}`,
5445
- position: getItemPos(index)
5446
- }
5447
- )
5448
- );
5538
+ const data = transformDocument(schema, components)(form);
5539
+ field.onChange(name2, data);
5449
5540
  };
5450
- const handleDropItem = (index) => {
5451
- setLiveText(
5452
- formatMessage(
5453
- {
5454
- id: getTranslation("dnd.drop-item"),
5455
- defaultMessage: `{item}, dropped. Final position in list: {position}.`
5456
- },
5541
+ return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, required, children: [
5542
+ /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
5543
+ /* @__PURE__ */ jsxs(Field.Label, { action: labelAction, children: [
5544
+ label,
5545
+ attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
5546
+ " (",
5547
+ Array.isArray(field.value) ? field.value.length : 0,
5548
+ ")"
5549
+ ] })
5550
+ ] }),
5551
+ showResetComponent && /* @__PURE__ */ jsx(
5552
+ IconButton,
5457
5553
  {
5458
- item: `${name2}.${index}`,
5459
- position: getItemPos(index)
5554
+ label: formatMessage({
5555
+ id: getTranslation("components.reset-entry"),
5556
+ defaultMessage: "Reset Entry"
5557
+ }),
5558
+ variant: "ghost",
5559
+ onClick: () => {
5560
+ field.onChange(name2, null);
5561
+ },
5562
+ children: /* @__PURE__ */ jsx(Trash, {})
5460
5563
  }
5461
5564
  )
5462
- );
5463
- };
5464
- const handleRemoveComponent = (name22, currentIndex) => () => {
5465
- removeFieldRow(name22, currentIndex);
5466
- };
5467
- const hasError = error !== void 0;
5468
- const renderButtonLabel = () => {
5469
- if (addComponentIsOpen) {
5470
- return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
5471
- }
5472
- if (hasError && dynamicDisplayedComponentsLength > max) {
5473
- return formatMessage(
5474
- {
5475
- id: getTranslation(`components.DynamicZone.extra-components`),
5476
- defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
5477
- },
5478
- {
5479
- number: dynamicDisplayedComponentsLength - max
5480
- }
5481
- );
5482
- }
5483
- if (hasError && dynamicDisplayedComponentsLength < min) {
5484
- return formatMessage(
5485
- {
5486
- id: getTranslation(`components.DynamicZone.missing-components`),
5487
- defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
5488
- },
5489
- { number: min - dynamicDisplayedComponentsLength }
5490
- );
5491
- }
5492
- return formatMessage(
5493
- {
5494
- id: getTranslation("components.DynamicZone.add-component"),
5495
- defaultMessage: "Add a component to {componentName}"
5496
- },
5497
- { componentName: label || name2 }
5498
- );
5499
- };
5500
- const level = useComponent("DynamicZone", (state) => state.level);
5501
- const ariaDescriptionId = React.useId();
5502
- return /* @__PURE__ */ jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
5503
- dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxs(Box, { children: [
5504
- /* @__PURE__ */ jsx(
5505
- DynamicZoneLabel,
5506
- {
5507
- hint,
5508
- label,
5509
- labelAction,
5510
- name: name2,
5511
- numberOfComponents: dynamicDisplayedComponentsLength,
5512
- required
5513
- }
5514
- ),
5515
- /* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
5516
- id: getTranslation("dnd.instructions"),
5517
- defaultMessage: `Press spacebar to grab and re-order`
5518
- }) }),
5519
- /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
5520
- /* @__PURE__ */ jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index) => /* @__PURE__ */ jsx(
5521
- ComponentProvider,
5522
- {
5523
- level: level + 1,
5524
- uid: field.__component,
5525
- id: field.id,
5526
- type: "dynamiczone",
5527
- children: /* @__PURE__ */ jsx(
5528
- DynamicComponent,
5529
- {
5530
- disabled,
5531
- name: name2,
5532
- index,
5533
- componentUid: field.__component,
5534
- onMoveComponent: handleMoveComponent,
5535
- onRemoveComponentClick: handleRemoveComponent(name2, index),
5536
- onCancel: handleCancel,
5537
- onDropItem: handleDropItem,
5538
- onGrabItem: handleGrabItem,
5539
- onAddComponent: handleAddComponent,
5540
- dynamicComponentsByCategory
5541
- }
5542
- )
5543
- },
5544
- field.__temp_key__
5545
- )) })
5546
5565
  ] }),
5547
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
5548
- AddComponentButton,
5549
- {
5550
- hasError,
5551
- isDisabled: disabled,
5552
- isOpen: addComponentIsOpen,
5553
- onClick: handleClickOpenPicker,
5554
- children: renderButtonLabel()
5555
- }
5556
- ) }),
5557
- /* @__PURE__ */ jsx(
5558
- ComponentPicker,
5559
- {
5560
- dynamicComponentsByCategory,
5561
- isOpen: addComponentIsOpen,
5562
- onClickAddComponent: handleAddComponent
5563
- }
5564
- )
5565
- ] }) });
5566
+ !attribute.repeatable && !field.value && /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
5567
+ !attribute.repeatable && field.value ? /* @__PURE__ */ jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
5568
+ attribute.repeatable && /* @__PURE__ */ jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
5569
+ /* @__PURE__ */ jsx(Field.Error, {})
5570
+ ] });
5566
5571
  };
5572
+ const MemoizedComponentInput = React.memo(ComponentInput);
5567
5573
  export {
5568
5574
  DynamicZone as D,
5569
- MemoizedInputRenderer as M,
5575
+ FormLayout as F,
5576
+ MemoizedUIDInput as M,
5570
5577
  NotAllowedInput as N,
5571
5578
  useDynamicZone as a,
5572
5579
  useFieldHint as b,
5573
- createDefaultForm as c,
5574
- MemoizedUIDInput as d,
5575
- MemoizedWysiwyg as e,
5576
- MemoizedComponentInput as f,
5577
- MemoizedBlocksInput as g,
5578
- prepareTempKeys as p,
5579
- removeFieldsThatDontExistOnSchema as r,
5580
- transformDocument as t,
5580
+ MemoizedWysiwyg as c,
5581
+ MemoizedComponentInput as d,
5582
+ MemoizedBlocksInput as e,
5581
5583
  useLazyComponents as u
5582
5584
  };
5583
- //# sourceMappingURL=Field-fTjqtEem.mjs.map
5585
+ //# sourceMappingURL=Input-CZ1YvjHR.mjs.map