@strapi/content-manager 0.0.0-next.bb6ff32f5168f3e380d3d9acba90a9d53bfcfb89 → 0.0.0-next.bffd3c1819cd08304e7d270e88b4973e9fcbc183
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_chunks/CardDragPreview-C0QyJgRA.js.map +1 -1
- package/dist/_chunks/CardDragPreview-DOxamsuj.mjs.map +1 -1
- package/dist/_chunks/{ComponentConfigurationPage-DqB7veg_.mjs → ComponentConfigurationPage-9_4yUE9L.mjs} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage-DqB7veg_.mjs.map → ComponentConfigurationPage-9_4yUE9L.mjs.map} +1 -1
- package/dist/_chunks/{ComponentConfigurationPage-Bmwd-G2q.js → ComponentConfigurationPage-DBSh-kET.js} +4 -5
- package/dist/_chunks/{ComponentConfigurationPage-Bmwd-G2q.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-DmruXqgR.js → EditConfigurationPage-Bl_U2JgH.js} +4 -5
- package/dist/_chunks/{EditConfigurationPage-DmruXqgR.js.map → EditConfigurationPage-Bl_U2JgH.js.map} +1 -1
- package/dist/_chunks/{EditConfigurationPage-CDLVqqay.mjs → EditConfigurationPage-COe6hjPC.mjs} +3 -3
- package/dist/_chunks/{EditConfigurationPage-CDLVqqay.mjs.map → EditConfigurationPage-COe6hjPC.mjs.map} +1 -1
- package/dist/_chunks/{EditViewPage-0zrWXtMz.js → EditViewPage-D4yFJET6.js} +14 -78
- package/dist/_chunks/EditViewPage-D4yFJET6.js.map +1 -0
- package/dist/_chunks/{EditViewPage-BgcbLW7w.mjs → EditViewPage-DrmVmYN0.mjs} +11 -74
- 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-CIDoAFoD.js → Form-C4rSaGsz.js} +5 -6
- package/dist/_chunks/{Form-CIDoAFoD.js.map → Form-C4rSaGsz.js.map} +1 -1
- package/dist/_chunks/{Form-WNWgTBtb.mjs → Form-DamaxNpG.mjs} +3 -3
- package/dist/_chunks/{Form-WNWgTBtb.mjs.map → Form-DamaxNpG.mjs.map} +1 -1
- package/dist/_chunks/{History-DEZDHwP0.mjs → History-D1PreDSY.mjs} +36 -10
- package/dist/_chunks/History-D1PreDSY.mjs.map +1 -0
- package/dist/_chunks/{History-BNvm2TK2.js → History-DTm8UCCQ.js} +47 -22
- package/dist/_chunks/History-DTm8UCCQ.js.map +1 -0
- package/dist/_chunks/{Field-BV7ZYdqe.js → Input-B7sapvBG.js} +1331 -1329
- package/dist/_chunks/Input-B7sapvBG.js.map +1 -0
- package/dist/_chunks/{Field-fTjqtEem.mjs → Input-CZ1YvjHR.mjs} +1245 -1243
- package/dist/_chunks/Input-CZ1YvjHR.mjs.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-Ddz3G-It.mjs → ListConfigurationPage-Bbi32isk.mjs} +6 -5
- package/dist/_chunks/ListConfigurationPage-Bbi32isk.mjs.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-B3FZwPHp.js → ListConfigurationPage-ysFMjKI3.js} +6 -6
- package/dist/_chunks/ListConfigurationPage-ysFMjKI3.js.map +1 -0
- package/dist/_chunks/{ListViewPage-BsLdw25U.mjs → ListViewPage-Bud_jBDQ.mjs} +55 -51
- package/dist/_chunks/ListViewPage-Bud_jBDQ.mjs.map +1 -0
- package/dist/_chunks/{ListViewPage-BEilNylQ.js → ListViewPage-DTuuxU3n.js} +61 -58
- package/dist/_chunks/ListViewPage-DTuuxU3n.js.map +1 -0
- package/dist/_chunks/{NoContentTypePage-BD2C-IMr.js → NoContentTypePage-CL7VVeYs.js} +2 -2
- package/dist/_chunks/{NoContentTypePage-BD2C-IMr.js.map → NoContentTypePage-CL7VVeYs.js.map} +1 -1
- package/dist/_chunks/{NoContentTypePage-D0jXEWKM.mjs → NoContentTypePage-DVhkugsf.mjs} +2 -2
- package/dist/_chunks/{NoContentTypePage-D0jXEWKM.mjs.map → NoContentTypePage-DVhkugsf.mjs.map} +1 -1
- package/dist/_chunks/{NoPermissionsPage-CIPqlrQq.mjs → NoPermissionsPage-CMdM-dCo.mjs} +2 -2
- package/dist/_chunks/{NoPermissionsPage-CIPqlrQq.mjs.map → NoPermissionsPage-CMdM-dCo.mjs.map} +1 -1
- package/dist/_chunks/{NoPermissionsPage-yNOvz9XO.js → NoPermissionsPage-v7I599vC.js} +2 -2
- package/dist/_chunks/{NoPermissionsPage-yNOvz9XO.js.map → NoPermissionsPage-v7I599vC.js.map} +1 -1
- package/dist/_chunks/{Preview-ot2fh0yZ.mjs → Preview-BNuU0SuQ.mjs} +74 -24
- package/dist/_chunks/Preview-BNuU0SuQ.mjs.map +1 -0
- package/dist/_chunks/{Preview-1cqLecKr.js → Preview-Cxq-uI6D.js} +73 -24
- package/dist/_chunks/Preview-Cxq-uI6D.js.map +1 -0
- package/dist/_chunks/{Relations-CfdwHP-0.mjs → Relations-C2Ahkrdg.mjs} +6 -8
- package/dist/_chunks/{Relations-CfdwHP-0.mjs.map → Relations-C2Ahkrdg.mjs.map} +1 -1
- package/dist/_chunks/{Relations-C3U9SKEb.js → Relations-CWS79QQn.js} +7 -10
- package/dist/_chunks/{Relations-C3U9SKEb.js.map → Relations-CWS79QQn.js.map} +1 -1
- package/dist/_chunks/{en-CHOp_xJv.js → en-BR48D_RH.js} +13 -3
- package/dist/_chunks/{en-CHOp_xJv.js.map → en-BR48D_RH.js.map} +1 -1
- package/dist/_chunks/{en-D_BMf0hT.mjs → en-D65uIF6Y.mjs} +13 -3
- package/dist/_chunks/{en-D_BMf0hT.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-Cg4RLIAw.js → index-DQsvBb_N.js} +518 -207
- package/dist/_chunks/index-DQsvBb_N.js.map +1 -0
- package/dist/_chunks/{index-BzUT1l9A.mjs → index-ZKrsjv-2.mjs} +536 -224
- package/dist/_chunks/index-ZKrsjv-2.mjs.map +1 -0
- package/dist/_chunks/{layout-Cj_1EKbm.js → layout-Cl0NhlQB.js} +5 -6
- package/dist/_chunks/{layout-Cj_1EKbm.js.map → layout-Cl0NhlQB.js.map} +1 -1
- package/dist/_chunks/{layout-C0QEDBAh.mjs → layout-fQk1rMk9.mjs} +4 -4
- package/dist/_chunks/{layout-C0QEDBAh.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-hDOgJy2R.js → relations-BRfBxVbX.js} +2 -2
- package/dist/_chunks/{relations-hDOgJy2R.js.map → relations-BRfBxVbX.js.map} +1 -1
- package/dist/_chunks/{relations-CgPG3AwU.mjs → relations-BakOFl_1.mjs} +2 -2
- package/dist/_chunks/{relations-CgPG3AwU.mjs.map → relations-BakOFl_1.mjs.map} +1 -1
- 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/components/DocumentActions.d.ts +1 -1
- package/dist/admin/src/pages/EditView/components/DocumentStatus.d.ts +1 -1
- 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/pages/Preview.d.ts +1 -1
- package/dist/admin/src/preview/services/preview.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-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-0zrWXtMz.js.map +0 -1
- package/dist/_chunks/EditViewPage-BgcbLW7w.mjs.map +0 -1
- package/dist/_chunks/Field-BV7ZYdqe.js.map +0 -1
- package/dist/_chunks/Field-fTjqtEem.mjs.map +0 -1
- package/dist/_chunks/History-BNvm2TK2.js.map +0 -1
- package/dist/_chunks/History-DEZDHwP0.mjs.map +0 -1
- package/dist/_chunks/ListConfigurationPage-B3FZwPHp.js.map +0 -1
- package/dist/_chunks/ListConfigurationPage-Ddz3G-It.mjs.map +0 -1
- package/dist/_chunks/ListViewPage-BEilNylQ.js.map +0 -1
- package/dist/_chunks/ListViewPage-BsLdw25U.mjs.map +0 -1
- package/dist/_chunks/Preview-1cqLecKr.js.map +0 -1
- package/dist/_chunks/Preview-ot2fh0yZ.mjs.map +0 -1
- package/dist/_chunks/index-BzUT1l9A.mjs.map +0 -1
- package/dist/_chunks/index-Cg4RLIAw.js.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-Cg4RLIAw.js");
|
9
|
-
const fractionalIndexing = require("fractional-indexing");
|
10
|
-
const Relations = require("./Relations-C3U9SKEb.js");
|
11
6
|
const Icons = require("@strapi/icons");
|
7
|
+
const reactIntl = require("react-intl");
|
8
|
+
const index = require("./index-DQsvBb_N.js");
|
12
9
|
const styledComponents = require("styled-components");
|
13
|
-
const ComponentIcon = require("./ComponentIcon-BXdiCGQp.js");
|
14
|
-
const reactDndHtml5Backend = require("react-dnd-html5-backend");
|
15
|
-
const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
|
16
|
-
const objects = require("./objects-BcXOv6_9.js");
|
17
10
|
const slate = require("slate");
|
18
11
|
const slateHistory = require("slate-history");
|
19
12
|
const slateReact = require("slate-react");
|
20
|
-
const
|
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,644 +2626,638 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
|
|
2666
2626
|
paddingTop: 9,
|
2667
2627
|
paddingBottom: 9,
|
2668
2628
|
type: "button",
|
2629
|
+
style: { cursor: disabled ? "not-allowed" : "pointer" },
|
2669
2630
|
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
|
2670
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
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
2703
|
const { formatMessage } = reactIntl.useIntl();
|
2696
|
-
|
2697
|
-
|
2698
|
-
|
2699
|
-
|
2704
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: category, children: [
|
2705
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { variant, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
|
2706
|
+
/* @__PURE__ */ jsxRuntime.jsx(ResponsiveAccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
|
2707
|
+
ComponentBox,
|
2708
|
+
{
|
2709
|
+
tag: "button",
|
2710
|
+
type: "button",
|
2711
|
+
background: "neutral100",
|
2712
|
+
justifyContent: "center",
|
2713
|
+
onClick: onAddComponent(uid),
|
2714
|
+
hasRadius: true,
|
2715
|
+
height: "8.4rem",
|
2716
|
+
shrink: 0,
|
2717
|
+
borderColor: "neutral200",
|
2718
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
|
2719
|
+
/* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { color: "currentColor", background: "primary200", icon }),
|
2720
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: displayName })
|
2721
|
+
] })
|
2722
|
+
},
|
2723
|
+
uid
|
2724
|
+
)) }) })
|
2725
|
+
] });
|
2726
|
+
};
|
2727
|
+
const ResponsiveAccordionContent = styledComponents.styled(designSystem.Accordion.Content)`
|
2728
|
+
container-type: inline-size;
|
2729
|
+
`;
|
2730
|
+
const Grid = styledComponents.styled(designSystem.Box)`
|
2731
|
+
display: grid;
|
2732
|
+
grid-template-columns: repeat(auto-fill, 100%);
|
2733
|
+
grid-gap: ${({ theme }) => theme.spaces[1]};
|
2734
|
+
|
2735
|
+
@container (min-width: ${() => RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
|
2736
|
+
grid-template-columns: repeat(auto-fill, 14rem);
|
2737
|
+
}
|
2738
|
+
`;
|
2739
|
+
const ComponentBox = styledComponents.styled(designSystem.Flex)`
|
2740
|
+
color: ${({ theme }) => theme.colors.neutral600};
|
2741
|
+
cursor: pointer;
|
2742
|
+
|
2743
|
+
@media (prefers-reduced-motion: no-preference) {
|
2744
|
+
transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
|
2745
|
+
}
|
2746
|
+
|
2747
|
+
&:focus,
|
2748
|
+
&:hover {
|
2749
|
+
border: 1px solid ${({ theme }) => theme.colors.primary200};
|
2750
|
+
background: ${({ theme }) => theme.colors.primary100};
|
2751
|
+
color: ${({ theme }) => theme.colors.primary600};
|
2752
|
+
}
|
2753
|
+
`;
|
2754
|
+
const ComponentPicker = ({
|
2755
|
+
dynamicComponentsByCategory = {},
|
2756
|
+
isOpen,
|
2757
|
+
onClickAddComponent
|
2758
|
+
}) => {
|
2759
|
+
const { formatMessage } = reactIntl.useIntl();
|
2760
|
+
const handleAddComponentToDz = (componentUid) => () => {
|
2761
|
+
onClickAddComponent(componentUid);
|
2762
|
+
};
|
2763
|
+
if (!isOpen) {
|
2764
|
+
return null;
|
2765
|
+
}
|
2766
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
2700
2767
|
designSystem.Box,
|
2701
2768
|
{
|
2702
|
-
background: "neutral100",
|
2703
|
-
paddingLeft: 6,
|
2704
|
-
paddingRight: 6,
|
2705
2769
|
paddingTop: 6,
|
2706
2770
|
paddingBottom: 6,
|
2707
|
-
|
2708
|
-
|
2709
|
-
|
2710
|
-
|
2711
|
-
|
2712
|
-
|
2713
|
-
|
2714
|
-
|
2715
|
-
|
2716
|
-
|
2717
|
-
|
2718
|
-
|
2719
|
-
|
2720
|
-
|
2721
|
-
|
2722
|
-
|
2723
|
-
|
2724
|
-
|
2725
|
-
|
2726
|
-
|
2727
|
-
|
2728
|
-
|
2729
|
-
}) })
|
2771
|
+
paddingLeft: 5,
|
2772
|
+
paddingRight: 5,
|
2773
|
+
background: "neutral0",
|
2774
|
+
shadow: "tableShadow",
|
2775
|
+
borderColor: "neutral150",
|
2776
|
+
hasRadius: true,
|
2777
|
+
children: [
|
2778
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral600", children: formatMessage({
|
2779
|
+
id: index.getTranslation("components.DynamicZone.ComponentPicker-label"),
|
2780
|
+
defaultMessage: "Pick one component"
|
2781
|
+
}) }) }),
|
2782
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { defaultValue: Object.keys(dynamicComponentsByCategory)[0], children: Object.entries(dynamicComponentsByCategory).map(([category, components], index2) => /* @__PURE__ */ jsxRuntime.jsx(
|
2783
|
+
ComponentCategory,
|
2784
|
+
{
|
2785
|
+
category,
|
2786
|
+
components,
|
2787
|
+
onAddComponent: handleAddComponentToDz,
|
2788
|
+
variant: index2 % 2 === 1 ? "primary" : "secondary"
|
2789
|
+
},
|
2790
|
+
category
|
2791
|
+
)) }) })
|
2792
|
+
]
|
2730
2793
|
}
|
2731
|
-
)
|
2794
|
+
);
|
2732
2795
|
};
|
2733
|
-
const
|
2734
|
-
|
2796
|
+
const DynamicComponent = ({
|
2797
|
+
componentUid,
|
2735
2798
|
disabled,
|
2799
|
+
index: index$1,
|
2736
2800
|
name: name2,
|
2737
|
-
|
2738
|
-
|
2739
|
-
|
2801
|
+
onRemoveComponentClick,
|
2802
|
+
onMoveComponent,
|
2803
|
+
onGrabItem,
|
2804
|
+
onDropItem,
|
2805
|
+
onCancel,
|
2806
|
+
dynamicComponentsByCategory = {},
|
2807
|
+
onAddComponent,
|
2808
|
+
children
|
2740
2809
|
}) => {
|
2741
|
-
const { toggleNotification } = strapiAdmin.useNotification();
|
2742
2810
|
const { formatMessage } = reactIntl.useIntl();
|
2743
|
-
const
|
2744
|
-
const search = React__namespace.useMemo(() => new URLSearchParams(searchString), [searchString]);
|
2745
|
-
const { components } = index.useDoc();
|
2811
|
+
const formValues = strapiAdmin.useForm("DynamicComponent", (state) => state.values);
|
2746
2812
|
const {
|
2747
|
-
|
2748
|
-
|
2749
|
-
|
2750
|
-
|
2751
|
-
|
2752
|
-
|
2753
|
-
|
2754
|
-
|
2755
|
-
|
2756
|
-
const
|
2757
|
-
|
2758
|
-
const
|
2759
|
-
|
2760
|
-
|
2761
|
-
|
2762
|
-
|
2763
|
-
}).filter((value2) => !!value2);
|
2764
|
-
if (errorOpenItems && errorOpenItems.length > 0) {
|
2765
|
-
setCollapseToOpen((collapseToOpen2) => {
|
2766
|
-
if (!errorOpenItems.includes(collapseToOpen2)) {
|
2767
|
-
return errorOpenItems[0];
|
2768
|
-
}
|
2769
|
-
return collapseToOpen2;
|
2770
|
-
});
|
2771
|
-
}
|
2772
|
-
}
|
2773
|
-
}, [rawError, value]);
|
2774
|
-
const componentTmpKeyWithFocussedField = React__namespace.useMemo(() => {
|
2775
|
-
if (search.has("field")) {
|
2776
|
-
const fieldParam = search.get("field");
|
2777
|
-
if (!fieldParam) {
|
2778
|
-
return void 0;
|
2779
|
-
}
|
2780
|
-
const [, path] = fieldParam.split(`${name2}.`);
|
2781
|
-
if (objects.getIn(value, path, void 0) !== void 0) {
|
2782
|
-
const [subpath] = path.split(".");
|
2783
|
-
return objects.getIn(value, subpath, void 0)?.__temp_key__;
|
2784
|
-
}
|
2785
|
-
}
|
2786
|
-
return void 0;
|
2787
|
-
}, [search, name2, value]);
|
2788
|
-
const prevValue = useDebounce.usePrev(value);
|
2789
|
-
React__namespace.useEffect(() => {
|
2790
|
-
if (prevValue && prevValue.length < value.length) {
|
2791
|
-
setCollapseToOpen(value[value.length - 1].__temp_key__);
|
2792
|
-
}
|
2793
|
-
}, [value, prevValue]);
|
2794
|
-
React__namespace.useEffect(() => {
|
2795
|
-
if (typeof componentTmpKeyWithFocussedField === "string") {
|
2796
|
-
setCollapseToOpen(componentTmpKeyWithFocussedField);
|
2797
|
-
}
|
2798
|
-
}, [componentTmpKeyWithFocussedField]);
|
2799
|
-
const toggleCollapses = () => {
|
2800
|
-
setCollapseToOpen("");
|
2801
|
-
};
|
2802
|
-
const handleClick = () => {
|
2803
|
-
if (value.length < max) {
|
2804
|
-
const schema = components[attribute.component];
|
2805
|
-
const form = createDefaultForm(schema, components);
|
2806
|
-
const data = transformDocument(schema, components)(form);
|
2807
|
-
addFieldRow(name2, data);
|
2808
|
-
} else if (value.length >= max) {
|
2809
|
-
toggleNotification({
|
2810
|
-
type: "info",
|
2811
|
-
message: formatMessage({
|
2812
|
-
id: index.getTranslation("components.notification.info.maximum-requirement")
|
2813
|
-
})
|
2814
|
-
});
|
2815
|
-
}
|
2816
|
-
};
|
2817
|
-
const handleMoveComponentField = (newIndex, currentIndex) => {
|
2818
|
-
setLiveText(
|
2819
|
-
formatMessage(
|
2820
|
-
{
|
2821
|
-
id: index.getTranslation("dnd.reorder"),
|
2822
|
-
defaultMessage: "{item}, moved. New position in list: {position}."
|
2823
|
-
},
|
2824
|
-
{
|
2825
|
-
item: `${name2}.${currentIndex}`,
|
2826
|
-
position: getItemPos(newIndex)
|
2827
|
-
}
|
2828
|
-
)
|
2829
|
-
);
|
2830
|
-
moveFieldRow(name2, currentIndex, newIndex);
|
2831
|
-
};
|
2832
|
-
const handleValueChange = (key) => {
|
2833
|
-
setCollapseToOpen(key);
|
2834
|
-
};
|
2835
|
-
const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
|
2836
|
-
const handleCancel = (index$1) => {
|
2837
|
-
setLiveText(
|
2838
|
-
formatMessage(
|
2839
|
-
{
|
2840
|
-
id: index.getTranslation("dnd.cancel-item"),
|
2841
|
-
defaultMessage: "{item}, dropped. Re-order cancelled."
|
2842
|
-
},
|
2843
|
-
{
|
2844
|
-
item: `${name2}.${index$1}`
|
2845
|
-
}
|
2846
|
-
)
|
2847
|
-
);
|
2848
|
-
};
|
2849
|
-
const handleGrabItem = (index$1) => {
|
2850
|
-
setLiveText(
|
2851
|
-
formatMessage(
|
2852
|
-
{
|
2853
|
-
id: index.getTranslation("dnd.grab-item"),
|
2854
|
-
defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
|
2855
|
-
},
|
2856
|
-
{
|
2857
|
-
item: `${name2}.${index$1}`,
|
2858
|
-
position: getItemPos(index$1)
|
2859
|
-
}
|
2860
|
-
)
|
2861
|
-
);
|
2862
|
-
};
|
2863
|
-
const handleDropItem = (index$1) => {
|
2864
|
-
setLiveText(
|
2865
|
-
formatMessage(
|
2866
|
-
{
|
2867
|
-
id: index.getTranslation("dnd.drop-item"),
|
2868
|
-
defaultMessage: `{item}, dropped. Final position in list: {position}.`
|
2869
|
-
},
|
2870
|
-
{
|
2871
|
-
item: `${name2}.${index$1}`,
|
2872
|
-
position: getItemPos(index$1)
|
2873
|
-
}
|
2874
|
-
)
|
2875
|
-
);
|
2876
|
-
};
|
2877
|
-
const ariaDescriptionId = React__namespace.useId();
|
2878
|
-
const level = Relations.useComponent("RepeatableComponent", (state) => state.level);
|
2879
|
-
if (value.length === 0) {
|
2880
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleClick });
|
2881
|
-
}
|
2882
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { hasRadius: true, children: [
|
2883
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
|
2884
|
-
id: index.getTranslation("dnd.instructions"),
|
2885
|
-
defaultMessage: `Press spacebar to grab and re-order`
|
2886
|
-
}) }),
|
2887
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
|
2888
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
2889
|
-
AccordionRoot,
|
2890
|
-
{
|
2891
|
-
$error: error,
|
2892
|
-
value: collapseToOpen,
|
2893
|
-
onValueChange: handleValueChange,
|
2894
|
-
"aria-describedby": ariaDescriptionId,
|
2895
|
-
children: [
|
2896
|
-
value.map(({ __temp_key__: key, id }, index2) => {
|
2897
|
-
const nameWithIndex = `${name2}.${index2}`;
|
2898
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
2899
|
-
Relations.ComponentProvider,
|
2900
|
-
{
|
2901
|
-
id,
|
2902
|
-
uid: attribute.component,
|
2903
|
-
level: level + 1,
|
2904
|
-
type: "repeatable",
|
2905
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
2906
|
-
Component,
|
2907
|
-
{
|
2908
|
-
disabled,
|
2909
|
-
name: nameWithIndex,
|
2910
|
-
attribute,
|
2911
|
-
index: index2,
|
2912
|
-
mainField,
|
2913
|
-
onMoveItem: handleMoveComponentField,
|
2914
|
-
onDeleteComponent: () => {
|
2915
|
-
removeFieldRow(name2, index2);
|
2916
|
-
toggleCollapses();
|
2917
|
-
},
|
2918
|
-
toggleCollapses,
|
2919
|
-
onCancel: handleCancel,
|
2920
|
-
onDropItem: handleDropItem,
|
2921
|
-
onGrabItem: handleGrabItem,
|
2922
|
-
__temp_key__: key,
|
2923
|
-
children: layout.map((row, index22) => {
|
2924
|
-
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
|
2925
|
-
const completeFieldName = `${nameWithIndex}.${field.name}`;
|
2926
|
-
const translatedLabel = formatMessage({
|
2927
|
-
id: `content-manager.components.${attribute.component}.${field.name}`,
|
2928
|
-
defaultMessage: field.label
|
2929
|
-
});
|
2930
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
2931
|
-
designSystem.Grid.Item,
|
2932
|
-
{
|
2933
|
-
col: size,
|
2934
|
-
s: 12,
|
2935
|
-
xs: 12,
|
2936
|
-
direction: "column",
|
2937
|
-
alignItems: "stretch",
|
2938
|
-
children: children({
|
2939
|
-
...field,
|
2940
|
-
label: translatedLabel,
|
2941
|
-
name: completeFieldName
|
2942
|
-
})
|
2943
|
-
},
|
2944
|
-
completeFieldName
|
2945
|
-
);
|
2946
|
-
}) }, index22);
|
2947
|
-
})
|
2948
|
-
}
|
2949
|
-
)
|
2950
|
-
},
|
2951
|
-
key
|
2952
|
-
);
|
2953
|
-
}),
|
2954
|
-
/* @__PURE__ */ jsxRuntime.jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
|
2955
|
-
id: index.getTranslation("containers.EditView.add.new-entry"),
|
2956
|
-
defaultMessage: "Add an entry"
|
2957
|
-
}) })
|
2958
|
-
]
|
2959
|
-
}
|
2960
|
-
)
|
2961
|
-
] });
|
2962
|
-
};
|
2963
|
-
const AccordionRoot = styledComponents.styled(designSystem.Accordion.Root)`
|
2964
|
-
border: 1px solid
|
2965
|
-
${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
|
2966
|
-
`;
|
2967
|
-
const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
|
2968
|
-
width: 100%;
|
2969
|
-
display: flex;
|
2970
|
-
justify-content: center;
|
2971
|
-
border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2972
|
-
padding-inline: ${(props) => props.theme.spaces[6]};
|
2973
|
-
padding-block: ${(props) => props.theme.spaces[3]};
|
2974
|
-
|
2975
|
-
&:not([disabled]) {
|
2976
|
-
cursor: pointer;
|
2977
|
-
|
2978
|
-
&:hover {
|
2979
|
-
background-color: ${(props) => props.theme.colors.primary100};
|
2980
|
-
}
|
2981
|
-
}
|
2982
|
-
|
2983
|
-
span {
|
2984
|
-
font-weight: 600;
|
2985
|
-
font-size: 1.4rem;
|
2986
|
-
line-height: 2.4rem;
|
2987
|
-
}
|
2988
|
-
|
2989
|
-
@media (prefers-reduced-motion: no-preference) {
|
2990
|
-
transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
|
2991
|
-
}
|
2992
|
-
`;
|
2993
|
-
const Component = ({
|
2994
|
-
disabled,
|
2995
|
-
index: index$1,
|
2996
|
-
name: name2,
|
2997
|
-
mainField = {
|
2998
|
-
name: "id",
|
2999
|
-
type: "integer"
|
3000
|
-
},
|
3001
|
-
children,
|
3002
|
-
onDeleteComponent,
|
3003
|
-
toggleCollapses,
|
3004
|
-
__temp_key__,
|
3005
|
-
...dragProps
|
3006
|
-
}) => {
|
3007
|
-
const { formatMessage } = reactIntl.useIntl();
|
3008
|
-
const displayValue = strapiAdmin.useForm("RepeatableComponent", (state) => {
|
3009
|
-
return objects.getIn(state.values, [...name2.split("."), mainField.name]);
|
3010
|
-
});
|
3011
|
-
const accordionRef = React__namespace.useRef(null);
|
3012
|
-
const componentKey = name2.split(".").slice(0, -1).join(".");
|
2813
|
+
edit: { components }
|
2814
|
+
} = index.useDocLayout();
|
2815
|
+
const title = React__namespace.useMemo(() => {
|
2816
|
+
const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
|
2817
|
+
const mainFieldValue = objects.getIn(formValues, `${name2}.${index$1}.${mainField}`);
|
2818
|
+
const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
|
2819
|
+
const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
|
2820
|
+
return mainValue;
|
2821
|
+
}, [componentUid, components, formValues, name2, index$1]);
|
2822
|
+
const { icon, displayName } = React__namespace.useMemo(() => {
|
2823
|
+
const [category] = componentUid.split(".");
|
2824
|
+
const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
|
2825
|
+
(component) => component.uid === componentUid
|
2826
|
+
) ?? { icon: null, displayName: null };
|
2827
|
+
return { icon: icon2, displayName: displayName2 };
|
2828
|
+
}, [componentUid, dynamicComponentsByCategory]);
|
3013
2829
|
const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
|
3014
|
-
type: `${useDragAndDrop.ItemTypes.
|
2830
|
+
type: `${useDragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name2}`,
|
3015
2831
|
index: index$1,
|
3016
2832
|
item: {
|
3017
2833
|
index: index$1,
|
3018
|
-
displayedValue:
|
3019
|
-
|
3020
|
-
onStart() {
|
3021
|
-
toggleCollapses();
|
2834
|
+
displayedValue: `${displayName} ${title}`,
|
2835
|
+
icon
|
3022
2836
|
},
|
3023
|
-
|
2837
|
+
onMoveItem: onMoveComponent,
|
2838
|
+
onDropItem,
|
2839
|
+
onGrabItem,
|
2840
|
+
onCancel
|
3024
2841
|
});
|
3025
2842
|
React__namespace.useEffect(() => {
|
3026
2843
|
dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
|
3027
2844
|
}, [dragPreviewRef, index$1]);
|
3028
|
-
const
|
3029
|
-
const
|
3030
|
-
|
3031
|
-
|
3032
|
-
|
3033
|
-
|
3034
|
-
|
3035
|
-
|
3036
|
-
|
3037
|
-
|
3038
|
-
|
2845
|
+
const accordionValue = React__namespace.useId();
|
2846
|
+
const { value = [], rawError } = strapiAdmin.useField(`${name2}.${index$1}`);
|
2847
|
+
const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
|
2848
|
+
React__namespace.useEffect(() => {
|
2849
|
+
if (rawError && value) {
|
2850
|
+
setCollapseToOpen(accordionValue);
|
2851
|
+
}
|
2852
|
+
}, [rawError, value, accordionValue]);
|
2853
|
+
const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
|
2854
|
+
const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
2855
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
2856
|
+
designSystem.IconButton,
|
2857
|
+
{
|
2858
|
+
variant: "ghost",
|
2859
|
+
label: formatMessage(
|
3039
2860
|
{
|
3040
|
-
|
3041
|
-
|
3042
|
-
|
3043
|
-
|
3044
|
-
defaultMessage: "Delete"
|
3045
|
-
}),
|
3046
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
|
3047
|
-
}
|
2861
|
+
id: index.getTranslation("components.DynamicZone.delete-label"),
|
2862
|
+
defaultMessage: "Delete {name}"
|
2863
|
+
},
|
2864
|
+
{ name: title }
|
3048
2865
|
),
|
3049
|
-
|
3050
|
-
|
3051
|
-
|
3052
|
-
|
3053
|
-
|
3054
|
-
|
3055
|
-
"data-handler-id": handlerId,
|
3056
|
-
label: formatMessage({
|
3057
|
-
id: index.getTranslation("components.DragHandle-label"),
|
3058
|
-
defaultMessage: "Drag"
|
3059
|
-
}),
|
3060
|
-
onKeyDown: handleKeyDown,
|
3061
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
|
3062
|
-
}
|
3063
|
-
)
|
3064
|
-
] })
|
3065
|
-
] }),
|
3066
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
3067
|
-
designSystem.Flex,
|
2866
|
+
onClick: onRemoveComponentClick,
|
2867
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
|
2868
|
+
}
|
2869
|
+
),
|
2870
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
2871
|
+
designSystem.IconButton,
|
3068
2872
|
{
|
3069
|
-
|
3070
|
-
|
3071
|
-
|
3072
|
-
|
3073
|
-
|
3074
|
-
|
2873
|
+
variant: "ghost",
|
2874
|
+
onClick: (e) => e.stopPropagation(),
|
2875
|
+
"data-handler-id": handlerId,
|
2876
|
+
ref: dragRef,
|
2877
|
+
label: formatMessage({
|
2878
|
+
id: index.getTranslation("components.DragHandle-label"),
|
2879
|
+
defaultMessage: "Drag"
|
2880
|
+
}),
|
2881
|
+
onKeyDown: handleKeyDown,
|
2882
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
|
3075
2883
|
}
|
3076
|
-
)
|
3077
|
-
|
3078
|
-
|
3079
|
-
const Preview$1 = () => {
|
3080
|
-
return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
|
3081
|
-
};
|
3082
|
-
const StyledSpan = styledComponents.styled(designSystem.Box)`
|
3083
|
-
display: block;
|
3084
|
-
outline: 1px dashed ${({ theme }) => theme.colors.primary500};
|
3085
|
-
outline-offset: -1px;
|
3086
|
-
`;
|
3087
|
-
const ComponentInput = ({
|
3088
|
-
label,
|
3089
|
-
required,
|
3090
|
-
name: name2,
|
3091
|
-
attribute,
|
3092
|
-
disabled,
|
3093
|
-
labelAction,
|
3094
|
-
...props
|
3095
|
-
}) => {
|
3096
|
-
const { formatMessage } = reactIntl.useIntl();
|
3097
|
-
const field = strapiAdmin.useField(name2);
|
3098
|
-
const showResetComponent = !attribute.repeatable && field.value && !disabled;
|
3099
|
-
const { components } = index.useDoc();
|
3100
|
-
const handleInitialisationClick = () => {
|
3101
|
-
const schema = components[attribute.component];
|
3102
|
-
const form = createDefaultForm(schema, components);
|
3103
|
-
const data = transformDocument(schema, components)(form);
|
3104
|
-
field.onChange(name2, data);
|
3105
|
-
};
|
3106
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, required, children: [
|
3107
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
|
3108
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { action: labelAction, children: [
|
3109
|
-
label,
|
3110
|
-
attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
3111
|
-
" (",
|
3112
|
-
Array.isArray(field.value) ? field.value.length : 0,
|
3113
|
-
")"
|
3114
|
-
] })
|
3115
|
-
] }),
|
3116
|
-
showResetComponent && /* @__PURE__ */ jsxRuntime.jsx(
|
2884
|
+
),
|
2885
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
|
2886
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 0, paddingRight: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
|
3117
2887
|
designSystem.IconButton,
|
3118
2888
|
{
|
2889
|
+
variant: "ghost",
|
3119
2890
|
label: formatMessage({
|
3120
|
-
id: index.getTranslation("components.
|
3121
|
-
defaultMessage: "
|
2891
|
+
id: index.getTranslation("components.DynamicZone.more-actions"),
|
2892
|
+
defaultMessage: "More actions"
|
3122
2893
|
}),
|
3123
|
-
|
3124
|
-
|
3125
|
-
field.onChange(name2, null);
|
3126
|
-
},
|
3127
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
|
2894
|
+
tag: "span",
|
2895
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false })
|
3128
2896
|
}
|
3129
|
-
)
|
3130
|
-
|
3131
|
-
|
3132
|
-
|
3133
|
-
|
3134
|
-
|
2897
|
+
) }),
|
2898
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Content, { children: [
|
2899
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
|
2900
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
|
2901
|
+
id: index.getTranslation("components.DynamicZone.add-item-above"),
|
2902
|
+
defaultMessage: "Add component above"
|
2903
|
+
}) }),
|
2904
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
|
2905
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
|
2906
|
+
components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1), children: displayName2 }, componentUid))
|
2907
|
+
] }, category)) })
|
2908
|
+
] }),
|
2909
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
|
2910
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
|
2911
|
+
id: index.getTranslation("components.DynamicZone.add-item-below"),
|
2912
|
+
defaultMessage: "Add component below"
|
2913
|
+
}) }),
|
2914
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
|
2915
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
|
2916
|
+
components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1 + 1), children: displayName2 }, componentUid))
|
2917
|
+
] }, category)) })
|
2918
|
+
] })
|
2919
|
+
] })
|
2920
|
+
] })
|
2921
|
+
] });
|
2922
|
+
const accordionTitle = title ? `${displayName} ${title}` : displayName;
|
2923
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
|
2924
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Rectangle, { background: "neutral200" }) }),
|
2925
|
+
/* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { value: collapseToOpen, onValueChange: setCollapseToOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: accordionValue, children: [
|
2926
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
|
2927
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
2928
|
+
designSystem.Accordion.Trigger,
|
2929
|
+
{
|
2930
|
+
icon: icon && ComponentIcon.COMPONENT_ICONS[icon] ? ComponentIcon.COMPONENT_ICONS[icon] : ComponentIcon.COMPONENT_ICONS.dashboard,
|
2931
|
+
children: accordionTitle
|
2932
|
+
}
|
2933
|
+
),
|
2934
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Actions, { children: accordionActions })
|
2935
|
+
] }),
|
2936
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(
|
2937
|
+
designSystem.Grid.Item,
|
2938
|
+
{
|
2939
|
+
col: 12,
|
2940
|
+
s: 12,
|
2941
|
+
xs: 12,
|
2942
|
+
direction: "column",
|
2943
|
+
alignItems: "stretch",
|
2944
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
|
2945
|
+
const fieldName = `${name2}.${index$1}.${field.name}`;
|
2946
|
+
const fieldWithTranslatedLabel = {
|
2947
|
+
...field,
|
2948
|
+
label: formatMessage({
|
2949
|
+
id: `content-manager.components.${componentUid}.${field.name}`,
|
2950
|
+
defaultMessage: field.label
|
2951
|
+
})
|
2952
|
+
};
|
2953
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
2954
|
+
ResponsiveGridItem,
|
2955
|
+
{
|
2956
|
+
col: size,
|
2957
|
+
s: 12,
|
2958
|
+
xs: 12,
|
2959
|
+
direction: "column",
|
2960
|
+
alignItems: "stretch",
|
2961
|
+
children: children ? children({ ...fieldWithTranslatedLabel, name: fieldName }) : /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
|
2962
|
+
},
|
2963
|
+
fieldName
|
2964
|
+
);
|
2965
|
+
}) })
|
2966
|
+
},
|
2967
|
+
rowInd
|
2968
|
+
)) }) }) }) })
|
2969
|
+
] }) }) })
|
3135
2970
|
] });
|
3136
2971
|
};
|
3137
|
-
const
|
3138
|
-
|
3139
|
-
|
3140
|
-
|
3141
|
-
|
3142
|
-
|
3143
|
-
|
2972
|
+
const StyledBox = styledComponents.styled(designSystem.Box)`
|
2973
|
+
> div:first-child {
|
2974
|
+
box-shadow: ${({ theme }) => theme.shadows.tableShadow};
|
2975
|
+
}
|
2976
|
+
`;
|
2977
|
+
const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
|
2978
|
+
border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
|
2979
|
+
`;
|
2980
|
+
const Rectangle = styledComponents.styled(designSystem.Box)`
|
2981
|
+
width: ${({ theme }) => theme.spaces[2]};
|
2982
|
+
height: ${({ theme }) => theme.spaces[4]};
|
2983
|
+
`;
|
2984
|
+
const Preview$1 = styledComponents.styled.span`
|
2985
|
+
display: block;
|
2986
|
+
background-color: ${({ theme }) => theme.colors.primary100};
|
2987
|
+
outline: 1px dashed ${({ theme }) => theme.colors.primary500};
|
2988
|
+
outline-offset: -1px;
|
2989
|
+
padding: ${({ theme }) => theme.spaces[6]};
|
2990
|
+
`;
|
2991
|
+
const ComponentContainer = styledComponents.styled(designSystem.Box)`
|
2992
|
+
list-style: none;
|
2993
|
+
padding: 0;
|
2994
|
+
margin: 0;
|
2995
|
+
`;
|
2996
|
+
const DynamicZoneLabel = ({
|
2997
|
+
hint,
|
2998
|
+
label,
|
2999
|
+
labelAction,
|
3000
|
+
name: name2,
|
3001
|
+
numberOfComponents = 0,
|
3002
|
+
required
|
3144
3003
|
}) => {
|
3145
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
3146
|
-
|
3004
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
3005
|
+
designSystem.Box,
|
3147
3006
|
{
|
3148
|
-
|
3149
|
-
|
3150
|
-
|
3007
|
+
paddingTop: 3,
|
3008
|
+
paddingBottom: 3,
|
3009
|
+
paddingRight: 4,
|
3010
|
+
paddingLeft: 4,
|
3011
|
+
borderRadius: "26px",
|
3151
3012
|
background: "neutral0",
|
3152
|
-
|
3153
|
-
|
3154
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, {
|
3155
|
-
/* @__PURE__ */ jsxRuntime.
|
3156
|
-
|
3157
|
-
|
3158
|
-
|
3159
|
-
|
3160
|
-
|
3161
|
-
|
3162
|
-
|
3163
|
-
|
3164
|
-
|
3013
|
+
shadow: "filterShadow",
|
3014
|
+
color: "neutral500",
|
3015
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", justifyContent: "center", children: [
|
3016
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { maxWidth: "35.6rem", children: [
|
3017
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
|
3018
|
+
label || name2,
|
3019
|
+
" "
|
3020
|
+
] }),
|
3021
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
|
3022
|
+
"(",
|
3023
|
+
numberOfComponents,
|
3024
|
+
")"
|
3025
|
+
] }),
|
3026
|
+
required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: "*" }),
|
3027
|
+
labelAction && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 1, children: labelAction })
|
3028
|
+
] }),
|
3029
|
+
hint && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, maxWidth: "35.6rem", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: hint }) })
|
3165
3030
|
] })
|
3166
3031
|
}
|
3167
|
-
);
|
3032
|
+
) });
|
3168
3033
|
};
|
3169
|
-
const
|
3170
|
-
|
3171
|
-
|
3172
|
-
|
3173
|
-
|
3174
|
-
> circle {
|
3175
|
-
fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
|
3176
|
-
}
|
3177
|
-
> path {
|
3178
|
-
fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
|
3034
|
+
const [DynamicZoneProvider, useDynamicZone] = strapiAdmin.createContext(
|
3035
|
+
"DynamicZone",
|
3036
|
+
{
|
3037
|
+
isInDynamicZone: false
|
3179
3038
|
}
|
3180
|
-
|
3181
|
-
const
|
3182
|
-
|
3183
|
-
|
3184
|
-
|
3185
|
-
|
3186
|
-
|
3187
|
-
|
3188
|
-
|
3189
|
-
|
3190
|
-
|
3191
|
-
|
3192
|
-
|
3193
|
-
|
3194
|
-
|
3195
|
-
|
3196
|
-
|
3197
|
-
|
3198
|
-
|
3039
|
+
);
|
3040
|
+
const DynamicZone = ({
|
3041
|
+
attribute,
|
3042
|
+
disabled: disabledProp,
|
3043
|
+
hint,
|
3044
|
+
label,
|
3045
|
+
labelAction,
|
3046
|
+
name: name2,
|
3047
|
+
required = false,
|
3048
|
+
children
|
3049
|
+
}) => {
|
3050
|
+
const { max = Infinity, min = -Infinity } = attribute ?? {};
|
3051
|
+
const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
|
3052
|
+
const [liveText, setLiveText] = React__namespace.useState("");
|
3053
|
+
const { components, isLoading } = index.useDoc();
|
3054
|
+
const disabled = disabledProp || isLoading;
|
3055
|
+
const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm(
|
3056
|
+
"DynamicZone",
|
3057
|
+
({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
|
3058
|
+
addFieldRow: addFieldRow2,
|
3059
|
+
removeFieldRow: removeFieldRow2,
|
3060
|
+
moveFieldRow: moveFieldRow2
|
3061
|
+
})
|
3062
|
+
);
|
3063
|
+
const { value = [], error } = strapiAdmin.useField(name2);
|
3064
|
+
const dynamicComponentsByCategory = React__namespace.useMemo(() => {
|
3065
|
+
return attribute.components.reduce((acc, componentUid) => {
|
3066
|
+
const { category, info } = components[componentUid] ?? { info: {} };
|
3067
|
+
const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
|
3068
|
+
if (!acc[category]) {
|
3069
|
+
acc[category] = [];
|
3199
3070
|
}
|
3071
|
+
acc[category] = [...acc[category], component];
|
3072
|
+
return acc;
|
3073
|
+
}, {});
|
3074
|
+
}, [attribute.components, components]);
|
3075
|
+
const { formatMessage } = reactIntl.useIntl();
|
3076
|
+
const { toggleNotification } = strapiAdmin.useNotification();
|
3077
|
+
const dynamicDisplayedComponentsLength = value.length;
|
3078
|
+
const handleAddComponent = (uid, position) => {
|
3079
|
+
setAddComponentIsOpen(false);
|
3080
|
+
const schema = components[uid];
|
3081
|
+
const form = index.createDefaultForm(schema, components);
|
3082
|
+
const transformations = pipe__default.default(index.transformDocument(schema, components), (data2) => ({
|
3083
|
+
...data2,
|
3084
|
+
__component: uid
|
3085
|
+
}));
|
3086
|
+
const data = transformations(form);
|
3087
|
+
addFieldRow(name2, data, position);
|
3088
|
+
};
|
3089
|
+
const handleClickOpenPicker = () => {
|
3090
|
+
if (dynamicDisplayedComponentsLength < max) {
|
3091
|
+
setAddComponentIsOpen((prev) => !prev);
|
3092
|
+
} else {
|
3093
|
+
toggleNotification({
|
3094
|
+
type: "info",
|
3095
|
+
message: formatMessage({
|
3096
|
+
id: index.getTranslation("components.notification.info.maximum-requirement")
|
3097
|
+
})
|
3098
|
+
});
|
3200
3099
|
}
|
3201
|
-
}
|
3202
|
-
|
3203
|
-
|
3204
|
-
|
3100
|
+
};
|
3101
|
+
const handleMoveComponent = (newIndex, currentIndex) => {
|
3102
|
+
setLiveText(
|
3103
|
+
formatMessage(
|
3104
|
+
{
|
3105
|
+
id: index.getTranslation("dnd.reorder"),
|
3106
|
+
defaultMessage: "{item}, moved. New position in list: {position}."
|
3107
|
+
},
|
3108
|
+
{
|
3109
|
+
item: `${name2}.${currentIndex}`,
|
3110
|
+
position: getItemPos(newIndex)
|
3111
|
+
}
|
3112
|
+
)
|
3113
|
+
);
|
3114
|
+
moveFieldRow(name2, currentIndex, newIndex);
|
3115
|
+
};
|
3116
|
+
const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
|
3117
|
+
const handleCancel = (index$1) => {
|
3118
|
+
setLiveText(
|
3119
|
+
formatMessage(
|
3120
|
+
{
|
3121
|
+
id: index.getTranslation("dnd.cancel-item"),
|
3122
|
+
defaultMessage: "{item}, dropped. Re-order cancelled."
|
3123
|
+
},
|
3124
|
+
{
|
3125
|
+
item: `${name2}.${index$1}`
|
3126
|
+
}
|
3127
|
+
)
|
3128
|
+
);
|
3129
|
+
};
|
3130
|
+
const handleGrabItem = (index$1) => {
|
3131
|
+
setLiveText(
|
3132
|
+
formatMessage(
|
3133
|
+
{
|
3134
|
+
id: index.getTranslation("dnd.grab-item"),
|
3135
|
+
defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
|
3136
|
+
},
|
3137
|
+
{
|
3138
|
+
item: `${name2}.${index$1}`,
|
3139
|
+
position: getItemPos(index$1)
|
3140
|
+
}
|
3141
|
+
)
|
3142
|
+
);
|
3143
|
+
};
|
3144
|
+
const handleDropItem = (index$1) => {
|
3145
|
+
setLiveText(
|
3146
|
+
formatMessage(
|
3147
|
+
{
|
3148
|
+
id: index.getTranslation("dnd.drop-item"),
|
3149
|
+
defaultMessage: `{item}, dropped. Final position in list: {position}.`
|
3150
|
+
},
|
3151
|
+
{
|
3152
|
+
item: `${name2}.${index$1}`,
|
3153
|
+
position: getItemPos(index$1)
|
3154
|
+
}
|
3155
|
+
)
|
3156
|
+
);
|
3157
|
+
};
|
3158
|
+
const handleRemoveComponent = (name22, currentIndex) => () => {
|
3159
|
+
removeFieldRow(name22, currentIndex);
|
3160
|
+
};
|
3161
|
+
const hasError = error !== void 0;
|
3162
|
+
const renderButtonLabel = () => {
|
3163
|
+
if (addComponentIsOpen) {
|
3164
|
+
return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
|
3205
3165
|
}
|
3206
|
-
|
3207
|
-
|
3208
|
-
|
3209
|
-
|
3210
|
-
|
3211
|
-
|
3212
|
-
|
3166
|
+
if (hasError && dynamicDisplayedComponentsLength > max) {
|
3167
|
+
return formatMessage(
|
3168
|
+
{
|
3169
|
+
id: index.getTranslation(`components.DynamicZone.extra-components`),
|
3170
|
+
defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
|
3171
|
+
},
|
3172
|
+
{
|
3173
|
+
number: dynamicDisplayedComponentsLength - max
|
3174
|
+
}
|
3175
|
+
);
|
3176
|
+
}
|
3177
|
+
if (hasError && dynamicDisplayedComponentsLength < min) {
|
3178
|
+
return formatMessage(
|
3179
|
+
{
|
3180
|
+
id: index.getTranslation(`components.DynamicZone.missing-components`),
|
3181
|
+
defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
|
3182
|
+
},
|
3183
|
+
{ number: min - dynamicDisplayedComponentsLength }
|
3184
|
+
);
|
3213
3185
|
}
|
3214
|
-
|
3215
|
-
`;
|
3216
|
-
const ComponentCategory = ({
|
3217
|
-
category,
|
3218
|
-
components = [],
|
3219
|
-
variant = "primary",
|
3220
|
-
onAddComponent
|
3221
|
-
}) => {
|
3222
|
-
const { formatMessage } = reactIntl.useIntl();
|
3223
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: category, children: [
|
3224
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { variant, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
|
3225
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
|
3226
|
-
ComponentBox,
|
3186
|
+
return formatMessage(
|
3227
3187
|
{
|
3228
|
-
|
3229
|
-
|
3230
|
-
background: "neutral100",
|
3231
|
-
justifyContent: "center",
|
3232
|
-
onClick: onAddComponent(uid),
|
3233
|
-
hasRadius: true,
|
3234
|
-
height: "8.4rem",
|
3235
|
-
shrink: 0,
|
3236
|
-
borderColor: "neutral200",
|
3237
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
|
3238
|
-
/* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { color: "currentColor", background: "primary200", icon }),
|
3239
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: displayName })
|
3240
|
-
] })
|
3188
|
+
id: index.getTranslation("components.DynamicZone.add-component"),
|
3189
|
+
defaultMessage: "Add a component to {componentName}"
|
3241
3190
|
},
|
3242
|
-
|
3243
|
-
)
|
3244
|
-
] });
|
3245
|
-
};
|
3246
|
-
const Grid = styledComponents.styled(designSystem.Box)`
|
3247
|
-
display: grid;
|
3248
|
-
grid-template-columns: repeat(auto-fit, 14rem);
|
3249
|
-
grid-gap: ${({ theme }) => theme.spaces[1]};
|
3250
|
-
`;
|
3251
|
-
const ComponentBox = styledComponents.styled(designSystem.Flex)`
|
3252
|
-
color: ${({ theme }) => theme.colors.neutral600};
|
3253
|
-
cursor: pointer;
|
3254
|
-
|
3255
|
-
@media (prefers-reduced-motion: no-preference) {
|
3256
|
-
transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
|
3257
|
-
}
|
3258
|
-
|
3259
|
-
&:focus,
|
3260
|
-
&:hover {
|
3261
|
-
border: 1px solid ${({ theme }) => theme.colors.primary200};
|
3262
|
-
background: ${({ theme }) => theme.colors.primary100};
|
3263
|
-
color: ${({ theme }) => theme.colors.primary600};
|
3264
|
-
}
|
3265
|
-
`;
|
3266
|
-
const ComponentPicker = ({
|
3267
|
-
dynamicComponentsByCategory = {},
|
3268
|
-
isOpen,
|
3269
|
-
onClickAddComponent
|
3270
|
-
}) => {
|
3271
|
-
const { formatMessage } = reactIntl.useIntl();
|
3272
|
-
const handleAddComponentToDz = (componentUid) => () => {
|
3273
|
-
onClickAddComponent(componentUid);
|
3191
|
+
{ componentName: label || name2 }
|
3192
|
+
);
|
3274
3193
|
};
|
3275
|
-
|
3276
|
-
|
3277
|
-
|
3278
|
-
|
3279
|
-
|
3280
|
-
|
3281
|
-
|
3282
|
-
|
3283
|
-
|
3284
|
-
|
3285
|
-
|
3286
|
-
|
3287
|
-
|
3288
|
-
|
3289
|
-
|
3290
|
-
|
3291
|
-
|
3292
|
-
|
3293
|
-
|
3294
|
-
|
3295
|
-
|
3296
|
-
|
3297
|
-
|
3298
|
-
|
3299
|
-
|
3300
|
-
|
3301
|
-
|
3302
|
-
|
3303
|
-
|
3304
|
-
|
3305
|
-
|
3306
|
-
|
3194
|
+
const level = Relations.useComponent("DynamicZone", (state) => state.level);
|
3195
|
+
const ariaDescriptionId = React__namespace.useId();
|
3196
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
|
3197
|
+
dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
|
3198
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
3199
|
+
DynamicZoneLabel,
|
3200
|
+
{
|
3201
|
+
hint,
|
3202
|
+
label,
|
3203
|
+
labelAction,
|
3204
|
+
name: name2,
|
3205
|
+
numberOfComponents: dynamicDisplayedComponentsLength,
|
3206
|
+
required
|
3207
|
+
}
|
3208
|
+
),
|
3209
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
|
3210
|
+
id: index.getTranslation("dnd.instructions"),
|
3211
|
+
defaultMessage: `Press spacebar to grab and re-order`
|
3212
|
+
}) }),
|
3213
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
|
3214
|
+
/* @__PURE__ */ jsxRuntime.jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index2) => /* @__PURE__ */ jsxRuntime.jsx(
|
3215
|
+
Relations.ComponentProvider,
|
3216
|
+
{
|
3217
|
+
level: level + 1,
|
3218
|
+
uid: field.__component,
|
3219
|
+
id: field.id,
|
3220
|
+
type: "dynamiczone",
|
3221
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
3222
|
+
DynamicComponent,
|
3223
|
+
{
|
3224
|
+
disabled,
|
3225
|
+
name: name2,
|
3226
|
+
index: index2,
|
3227
|
+
componentUid: field.__component,
|
3228
|
+
onMoveComponent: handleMoveComponent,
|
3229
|
+
onRemoveComponentClick: handleRemoveComponent(name2, index2),
|
3230
|
+
onCancel: handleCancel,
|
3231
|
+
onDropItem: handleDropItem,
|
3232
|
+
onGrabItem: handleGrabItem,
|
3233
|
+
onAddComponent: handleAddComponent,
|
3234
|
+
dynamicComponentsByCategory,
|
3235
|
+
children
|
3236
|
+
}
|
3237
|
+
)
|
3238
|
+
},
|
3239
|
+
field.__temp_key__
|
3240
|
+
)) })
|
3241
|
+
] }),
|
3242
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
3243
|
+
AddComponentButton,
|
3244
|
+
{
|
3245
|
+
hasError,
|
3246
|
+
isDisabled: disabled,
|
3247
|
+
isOpen: addComponentIsOpen,
|
3248
|
+
onClick: handleClickOpenPicker,
|
3249
|
+
children: renderButtonLabel()
|
3250
|
+
}
|
3251
|
+
) }),
|
3252
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
3253
|
+
ComponentPicker,
|
3254
|
+
{
|
3255
|
+
dynamicComponentsByCategory,
|
3256
|
+
isOpen: addComponentIsOpen,
|
3257
|
+
onClickAddComponent: handleAddComponent
|
3258
|
+
}
|
3259
|
+
)
|
3260
|
+
] }) });
|
3307
3261
|
};
|
3308
3262
|
const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
|
3309
3263
|
const { formatMessage } = reactIntl.useIntl();
|
@@ -3377,7 +3331,7 @@ const UIDInput = React__namespace.forwardRef(
|
|
3377
3331
|
const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
|
3378
3332
|
const isCloning = reactRouterDom.useMatch(index.CLONE_PATH) !== null;
|
3379
3333
|
const field = strapiAdmin.useField(name2);
|
3380
|
-
const debouncedValue =
|
3334
|
+
const debouncedValue = usePrev.useDebounce(field.value, 300);
|
3381
3335
|
const hasChanged = debouncedValue !== field.initialValue;
|
3382
3336
|
const { toggleNotification } = strapiAdmin.useNotification();
|
3383
3337
|
const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
|
@@ -3783,8 +3737,7 @@ const Wrapper = styledComponents.styled.div`
|
|
3783
3737
|
`;
|
3784
3738
|
var listRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]))(\s*)/, emptyListRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]|[*+-]|(\d+)[.)])(\s*)$/, unorderedListRE = /[*+-]\s/;
|
3785
3739
|
function newlineAndIndentContinueMarkdownList(cm) {
|
3786
|
-
if (cm.getOption("disableInput"))
|
3787
|
-
return CodeMirror__default.default.Pass;
|
3740
|
+
if (cm.getOption("disableInput")) return CodeMirror__default.default.Pass;
|
3788
3741
|
var ranges = cm.listSelections(), replacements = [];
|
3789
3742
|
for (var i = 0; i < ranges.length; i++) {
|
3790
3743
|
var pos = ranges[i].head;
|
@@ -3818,8 +3771,7 @@ function newlineAndIndentContinueMarkdownList(cm) {
|
|
3818
3771
|
var numbered = !(unorderedListRE.test(match[2]) || match[2].indexOf(">") >= 0);
|
3819
3772
|
var bullet = numbered ? parseInt(match[3], 10) + 1 + match[4] : match[2].replace("x", " ");
|
3820
3773
|
replacements[i] = "\n" + indent + bullet + after;
|
3821
|
-
if (numbered)
|
3822
|
-
incrementRemainingMarkdownListNumbers(cm, pos);
|
3774
|
+
if (numbered) incrementRemainingMarkdownListNumbers(cm, pos);
|
3823
3775
|
}
|
3824
3776
|
}
|
3825
3777
|
cm.replaceSelections(replacements);
|
@@ -3837,10 +3789,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
|
|
3837
3789
|
var newNumber = parseInt(startItem[3], 10) + lookAhead - skipCount;
|
3838
3790
|
var nextNumber = parseInt(nextItem[3], 10), itemNumber = nextNumber;
|
3839
3791
|
if (startIndent === nextIndent && !isNaN(nextNumber)) {
|
3840
|
-
if (newNumber === nextNumber)
|
3841
|
-
|
3842
|
-
if (newNumber > nextNumber)
|
3843
|
-
itemNumber = newNumber + 1;
|
3792
|
+
if (newNumber === nextNumber) itemNumber = nextNumber + 1;
|
3793
|
+
if (newNumber > nextNumber) itemNumber = newNumber + 1;
|
3844
3794
|
cm.replaceRange(
|
3845
3795
|
nextLine.replace(listRE, nextIndent + itemNumber + nextItem[4] + nextItem[5]),
|
3846
3796
|
{
|
@@ -3853,10 +3803,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
|
|
3853
3803
|
}
|
3854
3804
|
);
|
3855
3805
|
} else {
|
3856
|
-
if (startIndent.length > nextIndent.length)
|
3857
|
-
|
3858
|
-
if (startIndent.length < nextIndent.length && lookAhead === 1)
|
3859
|
-
return;
|
3806
|
+
if (startIndent.length > nextIndent.length) return;
|
3807
|
+
if (startIndent.length < nextIndent.length && lookAhead === 1) return;
|
3860
3808
|
skipCount += 1;
|
3861
3809
|
}
|
3862
3810
|
}
|
@@ -4934,7 +4882,7 @@ const Wysiwyg = React__namespace.forwardRef(
|
|
4934
4882
|
const handleSelectAssets = (files) => {
|
4935
4883
|
const formattedFiles = files.map((f) => ({
|
4936
4884
|
alt: f.alternativeText || f.name,
|
4937
|
-
url:
|
4885
|
+
url: usePrev.prefixFileUrlWithBackendUrl(f.url),
|
4938
4886
|
mime: f.mime
|
4939
4887
|
}));
|
4940
4888
|
insertFile(editorRef, formattedFiles);
|
@@ -4990,626 +4938,680 @@ const Wysiwyg = React__namespace.forwardRef(
|
|
4990
4938
|
/* @__PURE__ */ jsxRuntime.jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
|
4991
4939
|
] });
|
4992
4940
|
}
|
4993
|
-
);
|
4994
|
-
const MemoizedWysiwyg = React__namespace.memo(Wysiwyg);
|
4995
|
-
const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
|
4996
|
-
const { id, document: document2, collectionType } = index.useDoc();
|
4997
|
-
const isFormDisabled = strapiAdmin.useForm("InputRenderer", (state) => state.disabled);
|
4998
|
-
const isInDynamicZone = useDynamicZone("isInDynamicZone", (state) => state.isInDynamicZone);
|
4999
|
-
const canCreateFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canCreateFields);
|
5000
|
-
const canReadFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canReadFields);
|
5001
|
-
const canUpdateFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canUpdateFields);
|
5002
|
-
const canUserAction = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canUserAction);
|
5003
|
-
let idToCheck = id;
|
5004
|
-
if (collectionType === index.SINGLE_TYPES) {
|
5005
|
-
idToCheck = document2?.documentId;
|
4941
|
+
);
|
4942
|
+
const MemoizedWysiwyg = React__namespace.memo(Wysiwyg);
|
4943
|
+
const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
|
4944
|
+
const { id, document: document2, collectionType } = index.useDoc();
|
4945
|
+
const isFormDisabled = strapiAdmin.useForm("InputRenderer", (state) => state.disabled);
|
4946
|
+
const isInDynamicZone = useDynamicZone("isInDynamicZone", (state) => state.isInDynamicZone);
|
4947
|
+
const canCreateFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canCreateFields);
|
4948
|
+
const canReadFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canReadFields);
|
4949
|
+
const canUpdateFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canUpdateFields);
|
4950
|
+
const canUserAction = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canUserAction);
|
4951
|
+
let idToCheck = id;
|
4952
|
+
if (collectionType === index.SINGLE_TYPES) {
|
4953
|
+
idToCheck = document2?.documentId;
|
4954
|
+
}
|
4955
|
+
const editableFields = idToCheck ? canUpdateFields : canCreateFields;
|
4956
|
+
const readableFields = idToCheck ? canReadFields : canCreateFields;
|
4957
|
+
const canUserReadField = canUserAction(props.name, readableFields, props.type);
|
4958
|
+
const canUserEditField = canUserAction(props.name, editableFields, props.type);
|
4959
|
+
const fields = strapiAdmin.useStrapiApp("InputRenderer", (app) => app.fields);
|
4960
|
+
const { lazyComponentStore } = useLazyComponents(
|
4961
|
+
attributeHasCustomFieldProperty(props.attribute) ? [props.attribute.customField] : void 0
|
4962
|
+
);
|
4963
|
+
const hint = useFieldHint(providedHint, props.attribute);
|
4964
|
+
const {
|
4965
|
+
edit: { components }
|
4966
|
+
} = index.useDocLayout();
|
4967
|
+
const field = strapiAdmin.useField(props.name);
|
4968
|
+
if (!visible) {
|
4969
|
+
return null;
|
4970
|
+
}
|
4971
|
+
if (!canUserReadField && !isInDynamicZone) {
|
4972
|
+
return /* @__PURE__ */ jsxRuntime.jsx(NotAllowedInput, { hint, ...props });
|
4973
|
+
}
|
4974
|
+
const fieldIsDisabled = !canUserEditField && !isInDynamicZone || props.disabled || isFormDisabled;
|
4975
|
+
if (attributeHasCustomFieldProperty(props.attribute)) {
|
4976
|
+
const CustomInput = lazyComponentStore[props.attribute.customField];
|
4977
|
+
if (CustomInput) {
|
4978
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, ...field, hint, disabled: fieldIsDisabled });
|
4979
|
+
}
|
4980
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
4981
|
+
strapiAdmin.InputRenderer,
|
4982
|
+
{
|
4983
|
+
...props,
|
4984
|
+
hint,
|
4985
|
+
type: props.attribute.customField,
|
4986
|
+
disabled: fieldIsDisabled
|
4987
|
+
}
|
4988
|
+
);
|
4989
|
+
}
|
4990
|
+
const addedInputTypes = Object.keys(fields);
|
4991
|
+
if (!attributeHasCustomFieldProperty(props.attribute) && addedInputTypes.includes(props.type)) {
|
4992
|
+
const CustomInput = fields[props.type];
|
4993
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, hint, disabled: fieldIsDisabled });
|
4994
|
+
}
|
4995
|
+
switch (props.type) {
|
4996
|
+
case "blocks":
|
4997
|
+
return /* @__PURE__ */ jsxRuntime.jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
4998
|
+
case "component":
|
4999
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
5000
|
+
MemoizedComponentInput,
|
5001
|
+
{
|
5002
|
+
...props,
|
5003
|
+
hint,
|
5004
|
+
layout: components[props.attribute.component].layout,
|
5005
|
+
disabled: fieldIsDisabled,
|
5006
|
+
children: (inputProps) => /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...inputProps })
|
5007
|
+
}
|
5008
|
+
);
|
5009
|
+
case "dynamiczone":
|
5010
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
|
5011
|
+
case "relation":
|
5012
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Relations.MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
|
5013
|
+
case "richtext":
|
5014
|
+
return /* @__PURE__ */ jsxRuntime.jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
5015
|
+
case "uid":
|
5016
|
+
return /* @__PURE__ */ jsxRuntime.jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
5017
|
+
case "enumeration":
|
5018
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
5019
|
+
strapiAdmin.InputRenderer,
|
5020
|
+
{
|
5021
|
+
...props,
|
5022
|
+
hint,
|
5023
|
+
options: props.attribute.enum.map((value) => ({ value })),
|
5024
|
+
type: props.customField ? "custom-field" : props.type,
|
5025
|
+
disabled: fieldIsDisabled
|
5026
|
+
}
|
5027
|
+
);
|
5028
|
+
default:
|
5029
|
+
const { unique: _unique, mainField: _mainField, ...restProps } = props;
|
5030
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
5031
|
+
strapiAdmin.InputRenderer,
|
5032
|
+
{
|
5033
|
+
...restProps,
|
5034
|
+
hint,
|
5035
|
+
type: props.customField ? "custom-field" : props.type,
|
5036
|
+
disabled: fieldIsDisabled
|
5037
|
+
}
|
5038
|
+
);
|
5039
|
+
}
|
5040
|
+
};
|
5041
|
+
const attributeHasCustomFieldProperty = (attribute) => "customField" in attribute && typeof attribute.customField === "string";
|
5042
|
+
const useFieldHint = (hint = void 0, attribute) => {
|
5043
|
+
const { formatMessage } = reactIntl.useIntl();
|
5044
|
+
const { maximum, minimum } = getMinMax(attribute);
|
5045
|
+
if (!maximum && !minimum) {
|
5046
|
+
return hint;
|
5006
5047
|
}
|
5007
|
-
const
|
5008
|
-
|
5009
|
-
|
5010
|
-
|
5011
|
-
|
5012
|
-
|
5013
|
-
|
5048
|
+
const units = !["biginteger", "integer", "number", "dynamiczone", "component"].includes(
|
5049
|
+
attribute.type
|
5050
|
+
) ? formatMessage(
|
5051
|
+
{
|
5052
|
+
id: "content-manager.form.Input.hint.character.unit",
|
5053
|
+
defaultMessage: "{maxValue, plural, one { character} other { characters}}"
|
5054
|
+
},
|
5055
|
+
{
|
5056
|
+
maxValue: Math.max(minimum || 0, maximum || 0)
|
5057
|
+
}
|
5058
|
+
) : null;
|
5059
|
+
const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
|
5060
|
+
return formatMessage(
|
5061
|
+
{
|
5062
|
+
id: "content-manager.form.Input.hint.text",
|
5063
|
+
defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
|
5064
|
+
},
|
5065
|
+
{
|
5066
|
+
min: minimum,
|
5067
|
+
max: maximum,
|
5068
|
+
description: hint,
|
5069
|
+
unit: units,
|
5070
|
+
divider: hasMinAndMax ? formatMessage({
|
5071
|
+
id: "content-manager.form.Input.hint.minMaxDivider",
|
5072
|
+
defaultMessage: " / "
|
5073
|
+
}) : null,
|
5074
|
+
br: /* @__PURE__ */ jsxRuntime.jsx("br", {})
|
5075
|
+
}
|
5014
5076
|
);
|
5015
|
-
|
5016
|
-
|
5017
|
-
|
5018
|
-
|
5019
|
-
|
5020
|
-
|
5021
|
-
|
5077
|
+
};
|
5078
|
+
const getMinMax = (attribute) => {
|
5079
|
+
if ("min" in attribute || "max" in attribute) {
|
5080
|
+
return {
|
5081
|
+
maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
|
5082
|
+
minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
|
5083
|
+
};
|
5084
|
+
} else if ("maxLength" in attribute || "minLength" in attribute) {
|
5085
|
+
return { maximum: attribute.maxLength, minimum: attribute.minLength };
|
5086
|
+
} else {
|
5087
|
+
return { maximum: void 0, minimum: void 0 };
|
5022
5088
|
}
|
5023
|
-
|
5024
|
-
|
5089
|
+
};
|
5090
|
+
const MemoizedInputRenderer = React.memo(InputRenderer);
|
5091
|
+
const RESPONSIVE_CONTAINER_BREAKPOINTS = {
|
5092
|
+
sm: "27.5rem"
|
5093
|
+
// 440px
|
5094
|
+
};
|
5095
|
+
const ResponsiveGridRoot = styledComponents.styled(designSystem.Grid.Root)`
|
5096
|
+
container-type: inline-size;
|
5097
|
+
`;
|
5098
|
+
const ResponsiveGridItem = styledComponents.styled(designSystem.Grid.Item)`
|
5099
|
+
grid-column: span 12;
|
5100
|
+
|
5101
|
+
@container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
|
5102
|
+
${({ col }) => col && `grid-column: span ${col};`}
|
5025
5103
|
}
|
5026
|
-
|
5027
|
-
|
5028
|
-
|
5029
|
-
|
5030
|
-
|
5104
|
+
`;
|
5105
|
+
const FormLayout = ({ layout }) => {
|
5106
|
+
const { formatMessage } = reactIntl.useIntl();
|
5107
|
+
const { model } = index.useDoc();
|
5108
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((panel, index2) => {
|
5109
|
+
if (panel.some((row) => row.some((field) => field.type === "dynamiczone"))) {
|
5110
|
+
const [row] = panel;
|
5111
|
+
const [field] = row;
|
5112
|
+
const fieldWithTranslatedLabel = {
|
5113
|
+
...field,
|
5114
|
+
label: formatMessage({
|
5115
|
+
id: `content-manager.content-types.${model}.${field.name}`,
|
5116
|
+
defaultMessage: field.label
|
5117
|
+
})
|
5118
|
+
};
|
5119
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, s: 12, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel }) }) }, field.name);
|
5031
5120
|
}
|
5032
5121
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
5033
|
-
|
5122
|
+
designSystem.Box,
|
5034
5123
|
{
|
5035
|
-
|
5036
|
-
|
5037
|
-
|
5038
|
-
|
5124
|
+
hasRadius: true,
|
5125
|
+
background: "neutral0",
|
5126
|
+
shadow: "tableShadow",
|
5127
|
+
paddingLeft: 6,
|
5128
|
+
paddingRight: 6,
|
5129
|
+
paddingTop: 6,
|
5130
|
+
paddingBottom: 6,
|
5131
|
+
borderColor: "neutral150",
|
5132
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: panel.map((row, gridRowIndex) => /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
|
5133
|
+
const fieldWithTranslatedLabel = {
|
5134
|
+
...field,
|
5135
|
+
label: formatMessage({
|
5136
|
+
id: `content-manager.content-types.${model}.${field.name}`,
|
5137
|
+
defaultMessage: field.label
|
5138
|
+
})
|
5139
|
+
};
|
5140
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
5141
|
+
ResponsiveGridItem,
|
5142
|
+
{
|
5143
|
+
col: size,
|
5144
|
+
s: 12,
|
5145
|
+
xs: 12,
|
5146
|
+
direction: "column",
|
5147
|
+
alignItems: "stretch",
|
5148
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel })
|
5149
|
+
},
|
5150
|
+
field.name
|
5151
|
+
);
|
5152
|
+
}) }, gridRowIndex)) })
|
5153
|
+
},
|
5154
|
+
index2
|
5155
|
+
);
|
5156
|
+
}) });
|
5157
|
+
};
|
5158
|
+
const NonRepeatableComponent = ({
|
5159
|
+
attribute,
|
5160
|
+
name: name2,
|
5161
|
+
children,
|
5162
|
+
layout
|
5163
|
+
}) => {
|
5164
|
+
const { formatMessage } = reactIntl.useIntl();
|
5165
|
+
const { value } = strapiAdmin.useField(name2);
|
5166
|
+
const level = Relations.useComponent("NonRepeatableComponent", (state) => state.level);
|
5167
|
+
const isNested = level > 0;
|
5168
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Relations.ComponentProvider, { id: value?.id, uid: attribute.component, level: level + 1, type: "component", children: /* @__PURE__ */ jsxRuntime.jsx(
|
5169
|
+
designSystem.Box,
|
5170
|
+
{
|
5171
|
+
background: "neutral100",
|
5172
|
+
paddingLeft: 6,
|
5173
|
+
paddingRight: 6,
|
5174
|
+
paddingTop: 6,
|
5175
|
+
paddingBottom: 6,
|
5176
|
+
hasRadius: isNested,
|
5177
|
+
borderColor: isNested ? "neutral200" : void 0,
|
5178
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index2) => {
|
5179
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
|
5180
|
+
const completeFieldName = `${name2}.${field.name}`;
|
5181
|
+
const translatedLabel = formatMessage({
|
5182
|
+
id: `content-manager.components.${attribute.component}.${field.name}`,
|
5183
|
+
defaultMessage: field.label
|
5184
|
+
});
|
5185
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
5186
|
+
ResponsiveGridItem,
|
5187
|
+
{
|
5188
|
+
col: size,
|
5189
|
+
s: 12,
|
5190
|
+
xs: 12,
|
5191
|
+
direction: "column",
|
5192
|
+
alignItems: "stretch",
|
5193
|
+
children: children({ ...field, label: translatedLabel, name: completeFieldName })
|
5194
|
+
},
|
5195
|
+
completeFieldName
|
5196
|
+
);
|
5197
|
+
}) }, index2);
|
5198
|
+
}) })
|
5199
|
+
}
|
5200
|
+
) });
|
5201
|
+
};
|
5202
|
+
const RepeatableComponent = ({
|
5203
|
+
attribute,
|
5204
|
+
disabled,
|
5205
|
+
name: name2,
|
5206
|
+
mainField,
|
5207
|
+
children,
|
5208
|
+
layout
|
5209
|
+
}) => {
|
5210
|
+
const { toggleNotification } = strapiAdmin.useNotification();
|
5211
|
+
const { formatMessage } = reactIntl.useIntl();
|
5212
|
+
const { search: searchString } = reactRouterDom.useLocation();
|
5213
|
+
const search = React__namespace.useMemo(() => new URLSearchParams(searchString), [searchString]);
|
5214
|
+
const { components } = index.useDoc();
|
5215
|
+
const {
|
5216
|
+
value = [],
|
5217
|
+
error,
|
5218
|
+
rawError
|
5219
|
+
} = strapiAdmin.useField(name2);
|
5220
|
+
const addFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.addFieldRow);
|
5221
|
+
const moveFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.moveFieldRow);
|
5222
|
+
const removeFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.removeFieldRow);
|
5223
|
+
const { max = Infinity } = attribute;
|
5224
|
+
const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
|
5225
|
+
const [liveText, setLiveText] = React__namespace.useState("");
|
5226
|
+
React__namespace.useEffect(() => {
|
5227
|
+
const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;
|
5228
|
+
const hasNestedValue = value && Array.isArray(value) && value.length > 0;
|
5229
|
+
if (hasNestedErrors && hasNestedValue) {
|
5230
|
+
const errorOpenItems = rawError.map((_, idx) => {
|
5231
|
+
return value[idx] ? value[idx].__temp_key__ : null;
|
5232
|
+
}).filter((value2) => !!value2);
|
5233
|
+
if (errorOpenItems && errorOpenItems.length > 0) {
|
5234
|
+
setCollapseToOpen((collapseToOpen2) => {
|
5235
|
+
if (!errorOpenItems.includes(collapseToOpen2)) {
|
5236
|
+
return errorOpenItems[0];
|
5237
|
+
}
|
5238
|
+
return collapseToOpen2;
|
5239
|
+
});
|
5240
|
+
}
|
5241
|
+
}
|
5242
|
+
}, [rawError, value]);
|
5243
|
+
const componentTmpKeyWithFocussedField = React__namespace.useMemo(() => {
|
5244
|
+
if (search.has("field")) {
|
5245
|
+
const fieldParam = search.get("field");
|
5246
|
+
if (!fieldParam) {
|
5247
|
+
return void 0;
|
5248
|
+
}
|
5249
|
+
const [, path] = fieldParam.split(`${name2}.`);
|
5250
|
+
if (objects.getIn(value, path, void 0) !== void 0) {
|
5251
|
+
const [subpath] = path.split(".");
|
5252
|
+
return objects.getIn(value, subpath, void 0)?.__temp_key__;
|
5039
5253
|
}
|
5254
|
+
}
|
5255
|
+
return void 0;
|
5256
|
+
}, [search, name2, value]);
|
5257
|
+
const prevValue = usePrev.usePrev(value);
|
5258
|
+
React__namespace.useEffect(() => {
|
5259
|
+
if (prevValue && prevValue.length < value.length) {
|
5260
|
+
setCollapseToOpen(value[value.length - 1].__temp_key__);
|
5261
|
+
}
|
5262
|
+
}, [value, prevValue]);
|
5263
|
+
React__namespace.useEffect(() => {
|
5264
|
+
if (typeof componentTmpKeyWithFocussedField === "string") {
|
5265
|
+
setCollapseToOpen(componentTmpKeyWithFocussedField);
|
5266
|
+
}
|
5267
|
+
}, [componentTmpKeyWithFocussedField]);
|
5268
|
+
const toggleCollapses = () => {
|
5269
|
+
setCollapseToOpen("");
|
5270
|
+
};
|
5271
|
+
const handleClick = () => {
|
5272
|
+
if (value.length < max) {
|
5273
|
+
const schema = components[attribute.component];
|
5274
|
+
const form = index.createDefaultForm(schema, components);
|
5275
|
+
const data = index.transformDocument(schema, components)(form);
|
5276
|
+
addFieldRow(name2, data);
|
5277
|
+
} else if (value.length >= max) {
|
5278
|
+
toggleNotification({
|
5279
|
+
type: "info",
|
5280
|
+
message: formatMessage({
|
5281
|
+
id: index.getTranslation("components.notification.info.maximum-requirement")
|
5282
|
+
})
|
5283
|
+
});
|
5284
|
+
}
|
5285
|
+
};
|
5286
|
+
const handleMoveComponentField = (newIndex, currentIndex) => {
|
5287
|
+
setLiveText(
|
5288
|
+
formatMessage(
|
5289
|
+
{
|
5290
|
+
id: index.getTranslation("dnd.reorder"),
|
5291
|
+
defaultMessage: "{item}, moved. New position in list: {position}."
|
5292
|
+
},
|
5293
|
+
{
|
5294
|
+
item: `${name2}.${currentIndex}`,
|
5295
|
+
position: getItemPos(newIndex)
|
5296
|
+
}
|
5297
|
+
)
|
5040
5298
|
);
|
5041
|
-
|
5042
|
-
|
5043
|
-
|
5044
|
-
|
5045
|
-
|
5046
|
-
}
|
5047
|
-
|
5048
|
-
|
5049
|
-
|
5050
|
-
case "component":
|
5051
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
5052
|
-
MemoizedComponentInput,
|
5299
|
+
moveFieldRow(name2, currentIndex, newIndex);
|
5300
|
+
};
|
5301
|
+
const handleValueChange = (key) => {
|
5302
|
+
setCollapseToOpen(key);
|
5303
|
+
};
|
5304
|
+
const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
|
5305
|
+
const handleCancel = (index$1) => {
|
5306
|
+
setLiveText(
|
5307
|
+
formatMessage(
|
5053
5308
|
{
|
5054
|
-
|
5055
|
-
|
5056
|
-
|
5057
|
-
|
5058
|
-
|
5309
|
+
id: index.getTranslation("dnd.cancel-item"),
|
5310
|
+
defaultMessage: "{item}, dropped. Re-order cancelled."
|
5311
|
+
},
|
5312
|
+
{
|
5313
|
+
item: `${name2}.${index$1}`
|
5059
5314
|
}
|
5060
|
-
)
|
5061
|
-
|
5062
|
-
|
5063
|
-
|
5064
|
-
|
5065
|
-
|
5066
|
-
return /* @__PURE__ */ jsxRuntime.jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
5067
|
-
case "uid":
|
5068
|
-
return /* @__PURE__ */ jsxRuntime.jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
5069
|
-
case "enumeration":
|
5070
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
5071
|
-
strapiAdmin.InputRenderer,
|
5315
|
+
)
|
5316
|
+
);
|
5317
|
+
};
|
5318
|
+
const handleGrabItem = (index$1) => {
|
5319
|
+
setLiveText(
|
5320
|
+
formatMessage(
|
5072
5321
|
{
|
5073
|
-
|
5074
|
-
|
5075
|
-
|
5076
|
-
|
5077
|
-
|
5322
|
+
id: index.getTranslation("dnd.grab-item"),
|
5323
|
+
defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
|
5324
|
+
},
|
5325
|
+
{
|
5326
|
+
item: `${name2}.${index$1}`,
|
5327
|
+
position: getItemPos(index$1)
|
5078
5328
|
}
|
5079
|
-
)
|
5080
|
-
|
5081
|
-
|
5082
|
-
|
5083
|
-
|
5329
|
+
)
|
5330
|
+
);
|
5331
|
+
};
|
5332
|
+
const handleDropItem = (index$1) => {
|
5333
|
+
setLiveText(
|
5334
|
+
formatMessage(
|
5084
5335
|
{
|
5085
|
-
|
5086
|
-
|
5087
|
-
|
5088
|
-
|
5336
|
+
id: index.getTranslation("dnd.drop-item"),
|
5337
|
+
defaultMessage: `{item}, dropped. Final position in list: {position}.`
|
5338
|
+
},
|
5339
|
+
{
|
5340
|
+
item: `${name2}.${index$1}`,
|
5341
|
+
position: getItemPos(index$1)
|
5089
5342
|
}
|
5090
|
-
)
|
5343
|
+
)
|
5344
|
+
);
|
5345
|
+
};
|
5346
|
+
const ariaDescriptionId = React__namespace.useId();
|
5347
|
+
const level = Relations.useComponent("RepeatableComponent", (state) => state.level);
|
5348
|
+
if (value.length === 0) {
|
5349
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleClick });
|
5091
5350
|
}
|
5351
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { hasRadius: true, children: [
|
5352
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
|
5353
|
+
id: index.getTranslation("dnd.instructions"),
|
5354
|
+
defaultMessage: `Press spacebar to grab and re-order`
|
5355
|
+
}) }),
|
5356
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
|
5357
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
5358
|
+
AccordionRoot,
|
5359
|
+
{
|
5360
|
+
$error: error,
|
5361
|
+
value: collapseToOpen,
|
5362
|
+
onValueChange: handleValueChange,
|
5363
|
+
"aria-describedby": ariaDescriptionId,
|
5364
|
+
children: [
|
5365
|
+
value.map(({ __temp_key__: key, id }, index2) => {
|
5366
|
+
const nameWithIndex = `${name2}.${index2}`;
|
5367
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
5368
|
+
Relations.ComponentProvider,
|
5369
|
+
{
|
5370
|
+
id,
|
5371
|
+
uid: attribute.component,
|
5372
|
+
level: level + 1,
|
5373
|
+
type: "repeatable",
|
5374
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
5375
|
+
Component,
|
5376
|
+
{
|
5377
|
+
disabled,
|
5378
|
+
name: nameWithIndex,
|
5379
|
+
attribute,
|
5380
|
+
index: index2,
|
5381
|
+
mainField,
|
5382
|
+
onMoveItem: handleMoveComponentField,
|
5383
|
+
onDeleteComponent: () => {
|
5384
|
+
removeFieldRow(name2, index2);
|
5385
|
+
toggleCollapses();
|
5386
|
+
},
|
5387
|
+
toggleCollapses,
|
5388
|
+
onCancel: handleCancel,
|
5389
|
+
onDropItem: handleDropItem,
|
5390
|
+
onGrabItem: handleGrabItem,
|
5391
|
+
__temp_key__: key,
|
5392
|
+
children: layout.map((row, index22) => {
|
5393
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
|
5394
|
+
const completeFieldName = `${nameWithIndex}.${field.name}`;
|
5395
|
+
const translatedLabel = formatMessage({
|
5396
|
+
id: `content-manager.components.${attribute.component}.${field.name}`,
|
5397
|
+
defaultMessage: field.label
|
5398
|
+
});
|
5399
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
5400
|
+
ResponsiveGridItem,
|
5401
|
+
{
|
5402
|
+
col: size,
|
5403
|
+
s: 12,
|
5404
|
+
xs: 12,
|
5405
|
+
direction: "column",
|
5406
|
+
alignItems: "stretch",
|
5407
|
+
children: children({
|
5408
|
+
...field,
|
5409
|
+
label: translatedLabel,
|
5410
|
+
name: completeFieldName
|
5411
|
+
})
|
5412
|
+
},
|
5413
|
+
completeFieldName
|
5414
|
+
);
|
5415
|
+
}) }, index22);
|
5416
|
+
})
|
5417
|
+
}
|
5418
|
+
)
|
5419
|
+
},
|
5420
|
+
key
|
5421
|
+
);
|
5422
|
+
}),
|
5423
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
|
5424
|
+
id: index.getTranslation("containers.EditView.add.new-entry"),
|
5425
|
+
defaultMessage: "Add an entry"
|
5426
|
+
}) })
|
5427
|
+
]
|
5428
|
+
}
|
5429
|
+
)
|
5430
|
+
] });
|
5092
5431
|
};
|
5093
|
-
const
|
5094
|
-
|
5095
|
-
|
5096
|
-
|
5097
|
-
|
5098
|
-
|
5099
|
-
|
5100
|
-
|
5101
|
-
|
5102
|
-
)
|
5103
|
-
|
5104
|
-
|
5105
|
-
|
5106
|
-
|
5107
|
-
|
5108
|
-
|
5109
|
-
|
5110
|
-
) : null;
|
5111
|
-
const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
|
5112
|
-
return formatMessage(
|
5113
|
-
{
|
5114
|
-
id: "content-manager.form.Input.hint.text",
|
5115
|
-
defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
|
5116
|
-
},
|
5117
|
-
{
|
5118
|
-
min: minimum,
|
5119
|
-
max: maximum,
|
5120
|
-
description: hint,
|
5121
|
-
unit: units,
|
5122
|
-
divider: hasMinAndMax ? formatMessage({
|
5123
|
-
id: "content-manager.form.Input.hint.minMaxDivider",
|
5124
|
-
defaultMessage: " / "
|
5125
|
-
}) : null,
|
5126
|
-
br: /* @__PURE__ */ jsxRuntime.jsx("br", {})
|
5432
|
+
const AccordionRoot = styledComponents.styled(designSystem.Accordion.Root)`
|
5433
|
+
border: 1px solid
|
5434
|
+
${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
|
5435
|
+
`;
|
5436
|
+
const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
|
5437
|
+
width: 100%;
|
5438
|
+
display: flex;
|
5439
|
+
justify-content: center;
|
5440
|
+
border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
|
5441
|
+
padding-inline: ${(props) => props.theme.spaces[6]};
|
5442
|
+
padding-block: ${(props) => props.theme.spaces[3]};
|
5443
|
+
|
5444
|
+
&:not([disabled]) {
|
5445
|
+
cursor: pointer;
|
5446
|
+
|
5447
|
+
&:hover {
|
5448
|
+
background-color: ${(props) => props.theme.colors.primary100};
|
5127
5449
|
}
|
5128
|
-
);
|
5129
|
-
};
|
5130
|
-
const getMinMax = (attribute) => {
|
5131
|
-
if ("min" in attribute || "max" in attribute) {
|
5132
|
-
return {
|
5133
|
-
maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
|
5134
|
-
minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
|
5135
|
-
};
|
5136
|
-
} else if ("maxLength" in attribute || "minLength" in attribute) {
|
5137
|
-
return { maximum: attribute.maxLength, minimum: attribute.minLength };
|
5138
|
-
} else {
|
5139
|
-
return { maximum: void 0, minimum: void 0 };
|
5140
5450
|
}
|
5141
|
-
|
5142
|
-
|
5143
|
-
|
5144
|
-
|
5451
|
+
|
5452
|
+
span {
|
5453
|
+
font-weight: 600;
|
5454
|
+
font-size: 1.4rem;
|
5455
|
+
line-height: 2.4rem;
|
5456
|
+
}
|
5457
|
+
|
5458
|
+
@media (prefers-reduced-motion: no-preference) {
|
5459
|
+
transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
|
5460
|
+
}
|
5461
|
+
`;
|
5462
|
+
const Component = ({
|
5145
5463
|
disabled,
|
5146
5464
|
index: index$1,
|
5147
5465
|
name: name2,
|
5148
|
-
|
5149
|
-
|
5150
|
-
|
5151
|
-
|
5152
|
-
|
5153
|
-
|
5154
|
-
|
5466
|
+
mainField = {
|
5467
|
+
name: "id",
|
5468
|
+
type: "integer"
|
5469
|
+
},
|
5470
|
+
children,
|
5471
|
+
onDeleteComponent,
|
5472
|
+
toggleCollapses,
|
5473
|
+
__temp_key__,
|
5474
|
+
...dragProps
|
5155
5475
|
}) => {
|
5156
5476
|
const { formatMessage } = reactIntl.useIntl();
|
5157
|
-
const
|
5158
|
-
|
5159
|
-
|
5160
|
-
|
5161
|
-
const
|
5162
|
-
const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
|
5163
|
-
const mainFieldValue = objects.getIn(formValues, `${name2}.${index$1}.${mainField}`);
|
5164
|
-
const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
|
5165
|
-
const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
|
5166
|
-
return mainValue;
|
5167
|
-
}, [componentUid, components, formValues, name2, index$1]);
|
5168
|
-
const { icon, displayName } = React__namespace.useMemo(() => {
|
5169
|
-
const [category] = componentUid.split(".");
|
5170
|
-
const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
|
5171
|
-
(component) => component.uid === componentUid
|
5172
|
-
) ?? { icon: null, displayName: null };
|
5173
|
-
return { icon: icon2, displayName: displayName2 };
|
5174
|
-
}, [componentUid, dynamicComponentsByCategory]);
|
5477
|
+
const displayValue = strapiAdmin.useForm("RepeatableComponent", (state) => {
|
5478
|
+
return objects.getIn(state.values, [...name2.split("."), mainField.name]);
|
5479
|
+
});
|
5480
|
+
const accordionRef = React__namespace.useRef(null);
|
5481
|
+
const componentKey = name2.split(".").slice(0, -1).join(".");
|
5175
5482
|
const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
|
5176
|
-
type: `${useDragAndDrop.ItemTypes.
|
5483
|
+
type: `${useDragAndDrop.ItemTypes.COMPONENT}_${componentKey}`,
|
5177
5484
|
index: index$1,
|
5178
5485
|
item: {
|
5179
5486
|
index: index$1,
|
5180
|
-
displayedValue:
|
5181
|
-
icon
|
5487
|
+
displayedValue: displayValue
|
5182
5488
|
},
|
5183
|
-
|
5184
|
-
|
5185
|
-
|
5186
|
-
|
5489
|
+
onStart() {
|
5490
|
+
toggleCollapses();
|
5491
|
+
},
|
5492
|
+
...dragProps
|
5187
5493
|
});
|
5188
5494
|
React__namespace.useEffect(() => {
|
5189
5495
|
dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
|
5190
5496
|
}, [dragPreviewRef, index$1]);
|
5191
|
-
const
|
5192
|
-
const
|
5193
|
-
|
5194
|
-
|
5195
|
-
|
5196
|
-
|
5197
|
-
|
5198
|
-
|
5199
|
-
|
5200
|
-
|
5201
|
-
|
5202
|
-
designSystem.IconButton,
|
5203
|
-
{
|
5204
|
-
variant: "ghost",
|
5205
|
-
label: formatMessage(
|
5497
|
+
const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
|
5498
|
+
const composedBoxRefs = designSystem.useComposedRefs(
|
5499
|
+
boxRef,
|
5500
|
+
dropRef
|
5501
|
+
);
|
5502
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
|
5503
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
|
5504
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: displayValue }),
|
5505
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Actions, { children: [
|
5506
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
5507
|
+
designSystem.IconButton,
|
5206
5508
|
{
|
5207
|
-
|
5208
|
-
|
5209
|
-
|
5210
|
-
|
5509
|
+
variant: "ghost",
|
5510
|
+
onClick: onDeleteComponent,
|
5511
|
+
label: formatMessage({
|
5512
|
+
id: index.getTranslation("containers.Edit.delete"),
|
5513
|
+
defaultMessage: "Delete"
|
5514
|
+
}),
|
5515
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
|
5516
|
+
}
|
5211
5517
|
),
|
5212
|
-
onClick: onRemoveComponentClick,
|
5213
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
|
5214
|
-
}
|
5215
|
-
),
|
5216
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
5217
|
-
designSystem.IconButton,
|
5218
|
-
{
|
5219
|
-
variant: "ghost",
|
5220
|
-
onClick: (e) => e.stopPropagation(),
|
5221
|
-
"data-handler-id": handlerId,
|
5222
|
-
ref: dragRef,
|
5223
|
-
label: formatMessage({
|
5224
|
-
id: index.getTranslation("components.DragHandle-label"),
|
5225
|
-
defaultMessage: "Drag"
|
5226
|
-
}),
|
5227
|
-
onKeyDown: handleKeyDown,
|
5228
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
|
5229
|
-
}
|
5230
|
-
),
|
5231
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
|
5232
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
|
5233
|
-
/* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false }),
|
5234
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "span", children: formatMessage({
|
5235
|
-
id: index.getTranslation("components.DynamicZone.more-actions"),
|
5236
|
-
defaultMessage: "More actions"
|
5237
|
-
}) })
|
5238
|
-
] }),
|
5239
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Content, { children: [
|
5240
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
|
5241
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
|
5242
|
-
id: index.getTranslation("components.DynamicZone.add-item-above"),
|
5243
|
-
defaultMessage: "Add component above"
|
5244
|
-
}) }),
|
5245
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
|
5246
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
|
5247
|
-
components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1), children: displayName2 }, componentUid))
|
5248
|
-
] }, category)) })
|
5249
|
-
] }),
|
5250
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
|
5251
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
|
5252
|
-
id: index.getTranslation("components.DynamicZone.add-item-below"),
|
5253
|
-
defaultMessage: "Add component below"
|
5254
|
-
}) }),
|
5255
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
|
5256
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
|
5257
|
-
components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1 + 1), children: displayName2 }, componentUid))
|
5258
|
-
] }, category)) })
|
5259
|
-
] })
|
5260
|
-
] })
|
5261
|
-
] })
|
5262
|
-
] });
|
5263
|
-
const accordionTitle = title ? `${displayName} ${title}` : displayName;
|
5264
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
|
5265
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Rectangle, { background: "neutral200" }) }),
|
5266
|
-
/* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { value: collapseToOpen, onValueChange: setCollapseToOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: accordionValue, children: [
|
5267
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
|
5268
5518
|
/* @__PURE__ */ jsxRuntime.jsx(
|
5269
|
-
designSystem.
|
5519
|
+
designSystem.IconButton,
|
5270
5520
|
{
|
5271
|
-
|
5272
|
-
|
5521
|
+
ref: composedAccordionRefs,
|
5522
|
+
variant: "ghost",
|
5523
|
+
onClick: (e) => e.stopPropagation(),
|
5524
|
+
"data-handler-id": handlerId,
|
5525
|
+
label: formatMessage({
|
5526
|
+
id: index.getTranslation("components.DragHandle-label"),
|
5527
|
+
defaultMessage: "Drag"
|
5528
|
+
}),
|
5529
|
+
onKeyDown: handleKeyDown,
|
5530
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
|
5273
5531
|
}
|
5274
|
-
)
|
5275
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Actions, { children: accordionActions })
|
5276
|
-
] }),
|
5277
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(
|
5278
|
-
designSystem.Grid.Item,
|
5279
|
-
{
|
5280
|
-
col: 12,
|
5281
|
-
s: 12,
|
5282
|
-
xs: 12,
|
5283
|
-
direction: "column",
|
5284
|
-
alignItems: "stretch",
|
5285
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
|
5286
|
-
const fieldName = `${name2}.${index$1}.${field.name}`;
|
5287
|
-
const fieldWithTranslatedLabel = {
|
5288
|
-
...field,
|
5289
|
-
label: formatMessage({
|
5290
|
-
id: `content-manager.components.${componentUid}.${field.name}`,
|
5291
|
-
defaultMessage: field.label
|
5292
|
-
})
|
5293
|
-
};
|
5294
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
5295
|
-
designSystem.Grid.Item,
|
5296
|
-
{
|
5297
|
-
col: size,
|
5298
|
-
s: 12,
|
5299
|
-
xs: 12,
|
5300
|
-
direction: "column",
|
5301
|
-
alignItems: "stretch",
|
5302
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
|
5303
|
-
},
|
5304
|
-
fieldName
|
5305
|
-
);
|
5306
|
-
}) })
|
5307
|
-
},
|
5308
|
-
rowInd
|
5309
|
-
)) }) }) }) })
|
5310
|
-
] }) }) })
|
5311
|
-
] });
|
5312
|
-
};
|
5313
|
-
const StyledBox = styledComponents.styled(designSystem.Box)`
|
5314
|
-
> div:first-child {
|
5315
|
-
box-shadow: ${({ theme }) => theme.shadows.tableShadow};
|
5316
|
-
}
|
5317
|
-
`;
|
5318
|
-
const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
|
5319
|
-
border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
|
5320
|
-
`;
|
5321
|
-
const Rectangle = styledComponents.styled(designSystem.Box)`
|
5322
|
-
width: ${({ theme }) => theme.spaces[2]};
|
5323
|
-
height: ${({ theme }) => theme.spaces[4]};
|
5324
|
-
`;
|
5325
|
-
const Preview = styledComponents.styled.span`
|
5326
|
-
display: block;
|
5327
|
-
background-color: ${({ theme }) => theme.colors.primary100};
|
5328
|
-
outline: 1px dashed ${({ theme }) => theme.colors.primary500};
|
5329
|
-
outline-offset: -1px;
|
5330
|
-
padding: ${({ theme }) => theme.spaces[6]};
|
5331
|
-
`;
|
5332
|
-
const ComponentContainer = styledComponents.styled(designSystem.Box)`
|
5333
|
-
list-style: none;
|
5334
|
-
padding: 0;
|
5335
|
-
margin: 0;
|
5336
|
-
`;
|
5337
|
-
const DynamicZoneLabel = ({
|
5338
|
-
hint,
|
5339
|
-
label,
|
5340
|
-
labelAction,
|
5341
|
-
name: name2,
|
5342
|
-
numberOfComponents = 0,
|
5343
|
-
required
|
5344
|
-
}) => {
|
5345
|
-
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
5346
|
-
designSystem.Box,
|
5347
|
-
{
|
5348
|
-
paddingTop: 3,
|
5349
|
-
paddingBottom: 3,
|
5350
|
-
paddingRight: 4,
|
5351
|
-
paddingLeft: 4,
|
5352
|
-
borderRadius: "26px",
|
5353
|
-
background: "neutral0",
|
5354
|
-
shadow: "filterShadow",
|
5355
|
-
color: "neutral500",
|
5356
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", justifyContent: "center", children: [
|
5357
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { maxWidth: "35.6rem", children: [
|
5358
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
|
5359
|
-
label || name2,
|
5360
|
-
" "
|
5361
|
-
] }),
|
5362
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
|
5363
|
-
"(",
|
5364
|
-
numberOfComponents,
|
5365
|
-
")"
|
5366
|
-
] }),
|
5367
|
-
required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: "*" }),
|
5368
|
-
labelAction && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 1, children: labelAction })
|
5369
|
-
] }),
|
5370
|
-
hint && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, maxWidth: "35.6rem", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: hint }) })
|
5532
|
+
)
|
5371
5533
|
] })
|
5372
|
-
}
|
5373
|
-
|
5534
|
+
] }),
|
5535
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
5536
|
+
designSystem.Flex,
|
5537
|
+
{
|
5538
|
+
direction: "column",
|
5539
|
+
alignItems: "stretch",
|
5540
|
+
background: "neutral100",
|
5541
|
+
padding: 6,
|
5542
|
+
gap: 6,
|
5543
|
+
children
|
5544
|
+
}
|
5545
|
+
) })
|
5546
|
+
] }) });
|
5547
|
+
};
|
5548
|
+
const Preview = () => {
|
5549
|
+
return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
|
5374
5550
|
};
|
5375
|
-
const
|
5376
|
-
|
5377
|
-
{
|
5378
|
-
|
5379
|
-
|
5380
|
-
|
5381
|
-
const DynamicZone = ({
|
5382
|
-
attribute,
|
5383
|
-
disabled: disabledProp,
|
5384
|
-
hint,
|
5551
|
+
const StyledSpan = styledComponents.styled(designSystem.Box)`
|
5552
|
+
display: block;
|
5553
|
+
outline: 1px dashed ${({ theme }) => theme.colors.primary500};
|
5554
|
+
outline-offset: -1px;
|
5555
|
+
`;
|
5556
|
+
const ComponentInput = ({
|
5385
5557
|
label,
|
5386
|
-
|
5558
|
+
required,
|
5387
5559
|
name: name2,
|
5388
|
-
|
5560
|
+
attribute,
|
5561
|
+
disabled,
|
5562
|
+
labelAction,
|
5563
|
+
...props
|
5389
5564
|
}) => {
|
5390
|
-
const { max = Infinity, min = -Infinity } = attribute ?? {};
|
5391
|
-
const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
|
5392
|
-
const [liveText, setLiveText] = React__namespace.useState("");
|
5393
|
-
const { components, isLoading } = index.useDoc();
|
5394
|
-
const disabled = disabledProp || isLoading;
|
5395
|
-
const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm(
|
5396
|
-
"DynamicZone",
|
5397
|
-
({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
|
5398
|
-
addFieldRow: addFieldRow2,
|
5399
|
-
removeFieldRow: removeFieldRow2,
|
5400
|
-
moveFieldRow: moveFieldRow2
|
5401
|
-
})
|
5402
|
-
);
|
5403
|
-
const { value = [], error } = strapiAdmin.useField(name2);
|
5404
|
-
const dynamicComponentsByCategory = React__namespace.useMemo(() => {
|
5405
|
-
return attribute.components.reduce((acc, componentUid) => {
|
5406
|
-
const { category, info } = components[componentUid] ?? { info: {} };
|
5407
|
-
const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
|
5408
|
-
if (!acc[category]) {
|
5409
|
-
acc[category] = [];
|
5410
|
-
}
|
5411
|
-
acc[category] = [...acc[category], component];
|
5412
|
-
return acc;
|
5413
|
-
}, {});
|
5414
|
-
}, [attribute.components, components]);
|
5415
5565
|
const { formatMessage } = reactIntl.useIntl();
|
5416
|
-
const
|
5417
|
-
const
|
5418
|
-
const
|
5419
|
-
|
5420
|
-
const schema = components[
|
5421
|
-
const form = createDefaultForm(schema, components);
|
5422
|
-
const
|
5423
|
-
|
5424
|
-
__component: uid
|
5425
|
-
}));
|
5426
|
-
const data = transformations(form);
|
5427
|
-
addFieldRow(name2, data, position);
|
5428
|
-
};
|
5429
|
-
const handleClickOpenPicker = () => {
|
5430
|
-
if (dynamicDisplayedComponentsLength < max) {
|
5431
|
-
setAddComponentIsOpen((prev) => !prev);
|
5432
|
-
} else {
|
5433
|
-
toggleNotification({
|
5434
|
-
type: "info",
|
5435
|
-
message: formatMessage({
|
5436
|
-
id: index.getTranslation("components.notification.info.maximum-requirement")
|
5437
|
-
})
|
5438
|
-
});
|
5439
|
-
}
|
5440
|
-
};
|
5441
|
-
const handleMoveComponent = (newIndex, currentIndex) => {
|
5442
|
-
setLiveText(
|
5443
|
-
formatMessage(
|
5444
|
-
{
|
5445
|
-
id: index.getTranslation("dnd.reorder"),
|
5446
|
-
defaultMessage: "{item}, moved. New position in list: {position}."
|
5447
|
-
},
|
5448
|
-
{
|
5449
|
-
item: `${name2}.${currentIndex}`,
|
5450
|
-
position: getItemPos(newIndex)
|
5451
|
-
}
|
5452
|
-
)
|
5453
|
-
);
|
5454
|
-
moveFieldRow(name2, currentIndex, newIndex);
|
5455
|
-
};
|
5456
|
-
const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
|
5457
|
-
const handleCancel = (index$1) => {
|
5458
|
-
setLiveText(
|
5459
|
-
formatMessage(
|
5460
|
-
{
|
5461
|
-
id: index.getTranslation("dnd.cancel-item"),
|
5462
|
-
defaultMessage: "{item}, dropped. Re-order cancelled."
|
5463
|
-
},
|
5464
|
-
{
|
5465
|
-
item: `${name2}.${index$1}`
|
5466
|
-
}
|
5467
|
-
)
|
5468
|
-
);
|
5469
|
-
};
|
5470
|
-
const handleGrabItem = (index$1) => {
|
5471
|
-
setLiveText(
|
5472
|
-
formatMessage(
|
5473
|
-
{
|
5474
|
-
id: index.getTranslation("dnd.grab-item"),
|
5475
|
-
defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
|
5476
|
-
},
|
5477
|
-
{
|
5478
|
-
item: `${name2}.${index$1}`,
|
5479
|
-
position: getItemPos(index$1)
|
5480
|
-
}
|
5481
|
-
)
|
5482
|
-
);
|
5566
|
+
const field = strapiAdmin.useField(name2);
|
5567
|
+
const showResetComponent = !attribute.repeatable && field.value && !disabled;
|
5568
|
+
const { components } = index.useDoc();
|
5569
|
+
const handleInitialisationClick = () => {
|
5570
|
+
const schema = components[attribute.component];
|
5571
|
+
const form = index.createDefaultForm(schema, components);
|
5572
|
+
const data = index.transformDocument(schema, components)(form);
|
5573
|
+
field.onChange(name2, data);
|
5483
5574
|
};
|
5484
|
-
|
5485
|
-
|
5486
|
-
|
5487
|
-
|
5488
|
-
|
5489
|
-
|
5490
|
-
|
5575
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, required, children: [
|
5576
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
|
5577
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { action: labelAction, children: [
|
5578
|
+
label,
|
5579
|
+
attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
5580
|
+
" (",
|
5581
|
+
Array.isArray(field.value) ? field.value.length : 0,
|
5582
|
+
")"
|
5583
|
+
] })
|
5584
|
+
] }),
|
5585
|
+
showResetComponent && /* @__PURE__ */ jsxRuntime.jsx(
|
5586
|
+
designSystem.IconButton,
|
5491
5587
|
{
|
5492
|
-
|
5493
|
-
|
5588
|
+
label: formatMessage({
|
5589
|
+
id: index.getTranslation("components.reset-entry"),
|
5590
|
+
defaultMessage: "Reset Entry"
|
5591
|
+
}),
|
5592
|
+
variant: "ghost",
|
5593
|
+
onClick: () => {
|
5594
|
+
field.onChange(name2, null);
|
5595
|
+
},
|
5596
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
|
5494
5597
|
}
|
5495
5598
|
)
|
5496
|
-
);
|
5497
|
-
};
|
5498
|
-
const handleRemoveComponent = (name22, currentIndex) => () => {
|
5499
|
-
removeFieldRow(name22, currentIndex);
|
5500
|
-
};
|
5501
|
-
const hasError = error !== void 0;
|
5502
|
-
const renderButtonLabel = () => {
|
5503
|
-
if (addComponentIsOpen) {
|
5504
|
-
return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
|
5505
|
-
}
|
5506
|
-
if (hasError && dynamicDisplayedComponentsLength > max) {
|
5507
|
-
return formatMessage(
|
5508
|
-
{
|
5509
|
-
id: index.getTranslation(`components.DynamicZone.extra-components`),
|
5510
|
-
defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
|
5511
|
-
},
|
5512
|
-
{
|
5513
|
-
number: dynamicDisplayedComponentsLength - max
|
5514
|
-
}
|
5515
|
-
);
|
5516
|
-
}
|
5517
|
-
if (hasError && dynamicDisplayedComponentsLength < min) {
|
5518
|
-
return formatMessage(
|
5519
|
-
{
|
5520
|
-
id: index.getTranslation(`components.DynamicZone.missing-components`),
|
5521
|
-
defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
|
5522
|
-
},
|
5523
|
-
{ number: min - dynamicDisplayedComponentsLength }
|
5524
|
-
);
|
5525
|
-
}
|
5526
|
-
return formatMessage(
|
5527
|
-
{
|
5528
|
-
id: index.getTranslation("components.DynamicZone.add-component"),
|
5529
|
-
defaultMessage: "Add a component to {componentName}"
|
5530
|
-
},
|
5531
|
-
{ componentName: label || name2 }
|
5532
|
-
);
|
5533
|
-
};
|
5534
|
-
const level = Relations.useComponent("DynamicZone", (state) => state.level);
|
5535
|
-
const ariaDescriptionId = React__namespace.useId();
|
5536
|
-
return /* @__PURE__ */ jsxRuntime.jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
|
5537
|
-
dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
|
5538
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
5539
|
-
DynamicZoneLabel,
|
5540
|
-
{
|
5541
|
-
hint,
|
5542
|
-
label,
|
5543
|
-
labelAction,
|
5544
|
-
name: name2,
|
5545
|
-
numberOfComponents: dynamicDisplayedComponentsLength,
|
5546
|
-
required
|
5547
|
-
}
|
5548
|
-
),
|
5549
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
|
5550
|
-
id: index.getTranslation("dnd.instructions"),
|
5551
|
-
defaultMessage: `Press spacebar to grab and re-order`
|
5552
|
-
}) }),
|
5553
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
|
5554
|
-
/* @__PURE__ */ jsxRuntime.jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index2) => /* @__PURE__ */ jsxRuntime.jsx(
|
5555
|
-
Relations.ComponentProvider,
|
5556
|
-
{
|
5557
|
-
level: level + 1,
|
5558
|
-
uid: field.__component,
|
5559
|
-
id: field.id,
|
5560
|
-
type: "dynamiczone",
|
5561
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
5562
|
-
DynamicComponent,
|
5563
|
-
{
|
5564
|
-
disabled,
|
5565
|
-
name: name2,
|
5566
|
-
index: index2,
|
5567
|
-
componentUid: field.__component,
|
5568
|
-
onMoveComponent: handleMoveComponent,
|
5569
|
-
onRemoveComponentClick: handleRemoveComponent(name2, index2),
|
5570
|
-
onCancel: handleCancel,
|
5571
|
-
onDropItem: handleDropItem,
|
5572
|
-
onGrabItem: handleGrabItem,
|
5573
|
-
onAddComponent: handleAddComponent,
|
5574
|
-
dynamicComponentsByCategory
|
5575
|
-
}
|
5576
|
-
)
|
5577
|
-
},
|
5578
|
-
field.__temp_key__
|
5579
|
-
)) })
|
5580
5599
|
] }),
|
5581
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
5582
|
-
|
5583
|
-
|
5584
|
-
|
5585
|
-
|
5586
|
-
isOpen: addComponentIsOpen,
|
5587
|
-
onClick: handleClickOpenPicker,
|
5588
|
-
children: renderButtonLabel()
|
5589
|
-
}
|
5590
|
-
) }),
|
5591
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
5592
|
-
ComponentPicker,
|
5593
|
-
{
|
5594
|
-
dynamicComponentsByCategory,
|
5595
|
-
isOpen: addComponentIsOpen,
|
5596
|
-
onClickAddComponent: handleAddComponent
|
5597
|
-
}
|
5598
|
-
)
|
5599
|
-
] }) });
|
5600
|
+
!attribute.repeatable && !field.value && /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
|
5601
|
+
!attribute.repeatable && field.value ? /* @__PURE__ */ jsxRuntime.jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
|
5602
|
+
attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
|
5603
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
|
5604
|
+
] });
|
5600
5605
|
};
|
5606
|
+
const MemoizedComponentInput = React__namespace.memo(ComponentInput);
|
5601
5607
|
exports.DynamicZone = DynamicZone;
|
5608
|
+
exports.FormLayout = FormLayout;
|
5602
5609
|
exports.MemoizedBlocksInput = MemoizedBlocksInput;
|
5603
5610
|
exports.MemoizedComponentInput = MemoizedComponentInput;
|
5604
|
-
exports.MemoizedInputRenderer = MemoizedInputRenderer;
|
5605
5611
|
exports.MemoizedUIDInput = MemoizedUIDInput;
|
5606
5612
|
exports.MemoizedWysiwyg = MemoizedWysiwyg;
|
5607
5613
|
exports.NotAllowedInput = NotAllowedInput;
|
5608
|
-
exports.createDefaultForm = createDefaultForm;
|
5609
|
-
exports.prepareTempKeys = prepareTempKeys;
|
5610
|
-
exports.removeFieldsThatDontExistOnSchema = removeFieldsThatDontExistOnSchema;
|
5611
|
-
exports.transformDocument = transformDocument;
|
5612
5614
|
exports.useDynamicZone = useDynamicZone;
|
5613
5615
|
exports.useFieldHint = useFieldHint;
|
5614
5616
|
exports.useLazyComponents = useLazyComponents;
|
5615
|
-
//# sourceMappingURL=
|
5617
|
+
//# sourceMappingURL=Input-B7sapvBG.js.map
|