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