@strapi/content-manager 5.0.0-beta.7 → 5.0.0-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/dist/_chunks/{ComponentConfigurationPage-uTMkLI60.mjs → ComponentConfigurationPage-BMajAl1u.mjs} +3 -3
  2. package/dist/_chunks/{ComponentConfigurationPage-uTMkLI60.mjs.map → ComponentConfigurationPage-BMajAl1u.mjs.map} +1 -1
  3. package/dist/_chunks/{ComponentConfigurationPage-DMq0wvcL.js → ComponentConfigurationPage-y_7iLdmB.js} +3 -3
  4. package/dist/_chunks/{ComponentConfigurationPage-DMq0wvcL.js.map → ComponentConfigurationPage-y_7iLdmB.js.map} +1 -1
  5. package/dist/_chunks/{ComponentIcon-BBQsYCVn.js → ComponentIcon-BXdiCGQp.js} +8 -2
  6. package/dist/_chunks/ComponentIcon-BXdiCGQp.js.map +1 -0
  7. package/dist/_chunks/{ComponentIcon-BOFnK76n.mjs → ComponentIcon-u4bIXTFY.mjs} +9 -3
  8. package/dist/_chunks/ComponentIcon-u4bIXTFY.mjs.map +1 -0
  9. package/dist/_chunks/{EditConfigurationPage-BFpQwwbc.js → EditConfigurationPage-CPVB8Uqc.js} +3 -3
  10. package/dist/_chunks/{EditConfigurationPage-BFpQwwbc.js.map → EditConfigurationPage-CPVB8Uqc.js.map} +1 -1
  11. package/dist/_chunks/{EditConfigurationPage-B2HhCh-b.mjs → EditConfigurationPage-CcOoD26O.mjs} +3 -3
  12. package/dist/_chunks/{EditConfigurationPage-B2HhCh-b.mjs.map → EditConfigurationPage-CcOoD26O.mjs.map} +1 -1
  13. package/dist/_chunks/{EditViewPage-CXXue16T.js → EditViewPage-CTTDHKkQ.js} +5 -5
  14. package/dist/_chunks/{EditViewPage-CXXue16T.js.map → EditViewPage-CTTDHKkQ.js.map} +1 -1
  15. package/dist/_chunks/{EditViewPage-BVIrgjyG.mjs → EditViewPage-DWb0DE7R.mjs} +5 -5
  16. package/dist/_chunks/{EditViewPage-BVIrgjyG.mjs.map → EditViewPage-DWb0DE7R.mjs.map} +1 -1
  17. package/dist/_chunks/{Field-ZgzKlgxR.js → Field-C5Z1Ivdv.js} +240 -357
  18. package/dist/_chunks/Field-C5Z1Ivdv.js.map +1 -0
  19. package/dist/_chunks/{Field-0_2h1vuK.mjs → Field-DnStdvQw.mjs} +240 -357
  20. package/dist/_chunks/Field-DnStdvQw.mjs.map +1 -0
  21. package/dist/_chunks/{Form-DgTc2qkx.js → Form-B81OtW-k.js} +9 -6
  22. package/dist/_chunks/Form-B81OtW-k.js.map +1 -0
  23. package/dist/_chunks/{Form-B7TUnQDd.mjs → Form-DqGgE55Q.mjs} +9 -6
  24. package/dist/_chunks/Form-DqGgE55Q.mjs.map +1 -0
  25. package/dist/_chunks/{History-DtHjQuqM.js → History-4NbOq2dX.js} +97 -15
  26. package/dist/_chunks/History-4NbOq2dX.js.map +1 -0
  27. package/dist/_chunks/{History-Dug_4HIA.mjs → History-DS6-HCYX.mjs} +97 -15
  28. package/dist/_chunks/History-DS6-HCYX.mjs.map +1 -0
  29. package/dist/_chunks/{ListConfigurationPage-BuSdTjfa.js → ListConfigurationPage-CpfstlYY.js} +2 -2
  30. package/dist/_chunks/{ListConfigurationPage-BuSdTjfa.js.map → ListConfigurationPage-CpfstlYY.js.map} +1 -1
  31. package/dist/_chunks/{ListConfigurationPage-CmEeNg6T.mjs → ListConfigurationPage-DQJJltko.mjs} +2 -2
  32. package/dist/_chunks/{ListConfigurationPage-CmEeNg6T.mjs.map → ListConfigurationPage-DQJJltko.mjs.map} +1 -1
  33. package/dist/_chunks/{ListViewPage-CExWwa4S.js → ListViewPage-CA3I75m5.js} +23 -18
  34. package/dist/_chunks/ListViewPage-CA3I75m5.js.map +1 -0
  35. package/dist/_chunks/{ListViewPage-Dsoa3wEA.mjs → ListViewPage-nQrOQuVo.mjs} +21 -17
  36. package/dist/_chunks/ListViewPage-nQrOQuVo.mjs.map +1 -0
  37. package/dist/_chunks/{NoContentTypePage-Dh38hBXB.mjs → NoContentTypePage-DbnHE22g.mjs} +2 -2
  38. package/dist/_chunks/{NoContentTypePage-Dh38hBXB.mjs.map → NoContentTypePage-DbnHE22g.mjs.map} +1 -1
  39. package/dist/_chunks/{NoContentTypePage-DCUL8gVi.js → NoContentTypePage-Dldu-_Mx.js} +2 -2
  40. package/dist/_chunks/{NoContentTypePage-DCUL8gVi.js.map → NoContentTypePage-Dldu-_Mx.js.map} +1 -1
  41. package/dist/_chunks/{NoPermissionsPage-BK-XCpIy.js → NoPermissionsPage-CO2MK200.js} +2 -2
  42. package/dist/_chunks/{NoPermissionsPage-BK-XCpIy.js.map → NoPermissionsPage-CO2MK200.js.map} +1 -1
  43. package/dist/_chunks/{NoPermissionsPage-Dt2O40ey.mjs → NoPermissionsPage-fOIkQM0v.mjs} +2 -2
  44. package/dist/_chunks/{NoPermissionsPage-Dt2O40ey.mjs.map → NoPermissionsPage-fOIkQM0v.mjs.map} +1 -1
  45. package/dist/_chunks/{Relations-DZyjWZHl.mjs → Relations-BDRl99Ux.mjs} +8 -6
  46. package/dist/_chunks/{Relations-DZyjWZHl.mjs.map → Relations-BDRl99Ux.mjs.map} +1 -1
  47. package/dist/_chunks/{Relations-CNypkp-g.js → Relations-DG2jnOcr.js} +8 -6
  48. package/dist/_chunks/{Relations-CNypkp-g.js.map → Relations-DG2jnOcr.js.map} +1 -1
  49. package/dist/_chunks/{en-MBPul9Su.mjs → en-Ux26r5pl.mjs} +7 -1
  50. package/dist/_chunks/{en-MBPul9Su.mjs.map → en-Ux26r5pl.mjs.map} +1 -1
  51. package/dist/_chunks/{en-C-V1_90f.js → en-fbKQxLGn.js} +7 -1
  52. package/dist/_chunks/{en-C-V1_90f.js.map → en-fbKQxLGn.js.map} +1 -1
  53. package/dist/_chunks/{index-DFK7LwDW.js → index-BZoNZMXL.js} +1528 -779
  54. package/dist/_chunks/index-BZoNZMXL.js.map +1 -0
  55. package/dist/_chunks/{index-B3c-4it4.mjs → index-Drt2DN7v.mjs} +1552 -803
  56. package/dist/_chunks/index-Drt2DN7v.mjs.map +1 -0
  57. package/dist/_chunks/{layout-B5cm7cZj.mjs → layout-BzAbmoO6.mjs} +20 -15
  58. package/dist/_chunks/layout-BzAbmoO6.mjs.map +1 -0
  59. package/dist/_chunks/{layout-DLih5-_W.js → layout-DEYBqgF1.js} +20 -15
  60. package/dist/_chunks/layout-DEYBqgF1.js.map +1 -0
  61. package/dist/_chunks/{relations-CTvkuINQ.js → relations-D0eZ4VWw.js} +2 -2
  62. package/dist/_chunks/{relations-CTvkuINQ.js.map → relations-D0eZ4VWw.js.map} +1 -1
  63. package/dist/_chunks/{relations-BZkrMa2z.mjs → relations-D26zVRdi.mjs} +2 -2
  64. package/dist/_chunks/{relations-BZkrMa2z.mjs.map → relations-D26zVRdi.mjs.map} +1 -1
  65. package/dist/_chunks/usePrev-B9w_-eYc.js +15 -0
  66. package/dist/_chunks/usePrev-B9w_-eYc.js.map +1 -0
  67. package/dist/_chunks/usePrev-DH6iah0A.mjs +16 -0
  68. package/dist/_chunks/usePrev-DH6iah0A.mjs.map +1 -0
  69. package/dist/admin/index.js +2 -1
  70. package/dist/admin/index.js.map +1 -1
  71. package/dist/admin/index.mjs +8 -7
  72. package/dist/admin/src/components/ComponentIcon.d.ts +6 -3
  73. package/dist/admin/src/content-manager.d.ts +3 -3
  74. package/dist/admin/src/exports.d.ts +1 -0
  75. package/dist/admin/src/history/components/VersionInputRenderer.d.ts +1 -1
  76. package/dist/admin/src/history/services/historyVersion.d.ts +1 -1
  77. package/dist/admin/src/hooks/useDocument.d.ts +5 -8
  78. package/dist/admin/src/hooks/useDocumentActions.d.ts +24 -3
  79. package/dist/admin/src/hooks/useDocumentLayout.d.ts +1 -1
  80. package/dist/admin/src/pages/EditView/components/DocumentActions.d.ts +3 -1
  81. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksInput.d.ts +3 -3
  82. package/dist/admin/src/pages/EditView/components/FormInputs/Component/Input.d.ts +2 -2
  83. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.d.ts +3 -5
  84. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.d.ts +1 -1
  85. package/dist/admin/src/pages/EditView/components/FormInputs/Relations.d.ts +2 -15
  86. package/dist/admin/src/pages/EditView/components/FormInputs/UID.d.ts +2 -2
  87. package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/Field.d.ts +2 -2
  88. package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygStyles.d.ts +56 -35
  89. package/dist/admin/src/pages/EditView/components/InputRenderer.d.ts +2 -10
  90. package/dist/admin/src/pages/ListView/components/BulkActions/PublishAction.d.ts +9 -26
  91. package/dist/admin/src/services/api.d.ts +2 -3
  92. package/dist/admin/src/services/components.d.ts +2 -2
  93. package/dist/admin/src/services/contentTypes.d.ts +5 -5
  94. package/dist/admin/src/services/documents.d.ts +29 -17
  95. package/dist/admin/src/services/init.d.ts +2 -2
  96. package/dist/admin/src/services/relations.d.ts +3 -3
  97. package/dist/admin/src/services/uid.d.ts +3 -3
  98. package/dist/admin/src/utils/api.d.ts +4 -17
  99. package/dist/admin/src/utils/validation.d.ts +1 -6
  100. package/dist/server/index.js +247 -127
  101. package/dist/server/index.js.map +1 -1
  102. package/dist/server/index.mjs +249 -129
  103. package/dist/server/index.mjs.map +1 -1
  104. package/dist/server/src/controllers/collection-types.d.ts.map +1 -1
  105. package/dist/server/src/controllers/single-types.d.ts.map +1 -1
  106. package/dist/server/src/controllers/utils/metadata.d.ts +8 -0
  107. package/dist/server/src/controllers/utils/metadata.d.ts.map +1 -0
  108. package/dist/server/src/controllers/validation/dimensions.d.ts +9 -0
  109. package/dist/server/src/controllers/validation/dimensions.d.ts.map +1 -0
  110. package/dist/server/src/history/services/history.d.ts.map +1 -1
  111. package/dist/server/src/history/services/lifecycles.d.ts.map +1 -1
  112. package/dist/server/src/index.d.ts +12 -33
  113. package/dist/server/src/index.d.ts.map +1 -1
  114. package/dist/server/src/services/document-manager.d.ts +6 -6
  115. package/dist/server/src/services/document-manager.d.ts.map +1 -1
  116. package/dist/server/src/services/document-metadata.d.ts +8 -29
  117. package/dist/server/src/services/document-metadata.d.ts.map +1 -1
  118. package/dist/server/src/services/index.d.ts +12 -33
  119. package/dist/server/src/services/index.d.ts.map +1 -1
  120. package/dist/server/src/services/utils/populate.d.ts +8 -1
  121. package/dist/server/src/services/utils/populate.d.ts.map +1 -1
  122. package/dist/shared/contracts/collection-types.d.ts +11 -5
  123. package/dist/shared/contracts/collection-types.d.ts.map +1 -1
  124. package/dist/shared/contracts/relations.d.ts +2 -2
  125. package/dist/shared/contracts/relations.d.ts.map +1 -1
  126. package/package.json +11 -11
  127. package/dist/_chunks/ComponentIcon-BBQsYCVn.js.map +0 -1
  128. package/dist/_chunks/ComponentIcon-BOFnK76n.mjs.map +0 -1
  129. package/dist/_chunks/Field-0_2h1vuK.mjs.map +0 -1
  130. package/dist/_chunks/Field-ZgzKlgxR.js.map +0 -1
  131. package/dist/_chunks/Form-B7TUnQDd.mjs.map +0 -1
  132. package/dist/_chunks/Form-DgTc2qkx.js.map +0 -1
  133. package/dist/_chunks/History-DtHjQuqM.js.map +0 -1
  134. package/dist/_chunks/History-Dug_4HIA.mjs.map +0 -1
  135. package/dist/_chunks/ListViewPage-CExWwa4S.js.map +0 -1
  136. package/dist/_chunks/ListViewPage-Dsoa3wEA.mjs.map +0 -1
  137. package/dist/_chunks/index-B3c-4it4.mjs.map +0 -1
  138. package/dist/_chunks/index-DFK7LwDW.js.map +0 -1
  139. package/dist/_chunks/layout-B5cm7cZj.mjs.map +0 -1
  140. package/dist/_chunks/layout-DLih5-_W.js.map +0 -1
  141. package/dist/_chunks/urls-CbOsUOoW.mjs +0 -7
  142. package/dist/_chunks/urls-CbOsUOoW.mjs.map +0 -1
  143. package/dist/_chunks/urls-DzZya_gm.js +0 -6
  144. package/dist/_chunks/urls-DzZya_gm.js.map +0 -1
  145. package/dist/server/src/controllers/utils/dimensions.d.ts +0 -5
  146. package/dist/server/src/controllers/utils/dimensions.d.ts.map +0 -1
@@ -5,19 +5,19 @@ const strapiAdmin = require("@strapi/admin/strapi-admin");
5
5
  const designSystem = require("@strapi/design-system");
6
6
  const pipe$1 = require("lodash/fp/pipe");
7
7
  const reactIntl = require("react-intl");
8
- const index = require("./index-DFK7LwDW.js");
8
+ const index = require("./index-BZoNZMXL.js");
9
9
  const fractionalIndexing = require("fractional-indexing");
10
- const Relations = require("./Relations-CNypkp-g.js");
10
+ const Relations = require("./Relations-DG2jnOcr.js");
11
11
  const Icons = require("@strapi/icons");
12
12
  const styledComponents = require("styled-components");
13
- const ComponentIcon = require("./ComponentIcon-BBQsYCVn.js");
13
+ const ComponentIcon = require("./ComponentIcon-BXdiCGQp.js");
14
14
  const reactDndHtml5Backend = require("react-dnd-html5-backend");
15
15
  const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
16
16
  const objects = require("./objects-gigeqt7s.js");
17
17
  const slate = require("slate");
18
18
  const slateHistory = require("slate-history");
19
19
  const slateReact = require("slate-react");
20
- const urls = require("./urls-DzZya_gm.js");
20
+ const usePrev = require("./usePrev-B9w_-eYc.js");
21
21
  const Toolbar = require("@radix-ui/react-toolbar");
22
22
  const reactRouterDom = require("react-router-dom");
23
23
  const CodeMirror = require("codemirror5");
@@ -257,7 +257,7 @@ const pressEnterTwiceToExit = (editor) => {
257
257
  });
258
258
  }
259
259
  };
260
- const CodeBlock = styledComponents.styled.pre.attrs({ role: "code" })`
260
+ const CodeBlock = styledComponents.styled.pre`
261
261
  border-radius: ${({ theme }) => theme.borderRadius};
262
262
  background-color: ${({ theme }) => theme.colors.neutral100};
263
263
  max-width: 100%;
@@ -501,7 +501,7 @@ const ImageDialog = () => {
501
501
  const nodeImage = {
502
502
  ...expectedImage,
503
503
  alternativeText: expectedImage.alternativeText || expectedImage.name,
504
- url: urls.prefixFileUrlWithBackendUrl(image.url)
504
+ url: usePrev.prefixFileUrlWithBackendUrl(image.url)
505
505
  };
506
506
  return nodeImage;
507
507
  });
@@ -1632,7 +1632,8 @@ const DragAndDropElement = ({
1632
1632
  tag: "div",
1633
1633
  role: "button",
1634
1634
  tabIndex: 0,
1635
- "aria-label": formatMessage({
1635
+ withTooltip: false,
1636
+ label: formatMessage({
1636
1637
  id: index.getTranslation("components.DragHandle-label"),
1637
1638
  defaultMessage: "Drag"
1638
1639
  }),
@@ -1658,7 +1659,8 @@ const CloneDragItem = ({ children, dragHandleTopMargin }) => {
1658
1659
  {
1659
1660
  tag: "div",
1660
1661
  role: "button",
1661
- "aria-label": formatMessage({
1662
+ withTooltip: false,
1663
+ label: formatMessage({
1662
1664
  id: index.getTranslation("components.DragHandle-label"),
1663
1665
  defaultMessage: "Drag"
1664
1666
  }),
@@ -2345,6 +2347,7 @@ const BlocksInput = React__namespace.forwardRef(
2345
2347
  ] }) });
2346
2348
  }
2347
2349
  );
2350
+ const MemoizedBlocksInput = React__namespace.memo(BlocksInput);
2348
2351
  const createDefaultForm = (contentType, components = {}) => {
2349
2352
  const traverseSchema = (attributes) => {
2350
2353
  return Object.entries(attributes).reduce((acc, [key, attribute]) => {
@@ -2449,7 +2452,7 @@ const RepeatableComponent = ({
2449
2452
  const moveFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.moveFieldRow);
2450
2453
  const removeFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.removeFieldRow);
2451
2454
  const { max = Infinity } = attribute;
2452
- const [collapseToOpen, setCollapseToOpen] = React__namespace.useState(null);
2455
+ const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
2453
2456
  const [liveText, setLiveText] = React__namespace.useState("");
2454
2457
  const componentTmpKeyWithFocussedField = React__namespace.useMemo(() => {
2455
2458
  if (search.has("field")) {
@@ -2465,13 +2468,19 @@ const RepeatableComponent = ({
2465
2468
  }
2466
2469
  return void 0;
2467
2470
  }, [search, name2, value]);
2471
+ const prevValue = usePrev.usePrev(value);
2468
2472
  React__namespace.useEffect(() => {
2469
- if (typeof componentTmpKeyWithFocussedField === "number") {
2473
+ if (prevValue && prevValue.length < value.length) {
2474
+ setCollapseToOpen(value[value.length - 1].__temp_key__);
2475
+ }
2476
+ }, [value, prevValue]);
2477
+ React__namespace.useEffect(() => {
2478
+ if (typeof componentTmpKeyWithFocussedField === "string") {
2470
2479
  setCollapseToOpen(componentTmpKeyWithFocussedField);
2471
2480
  }
2472
2481
  }, [componentTmpKeyWithFocussedField]);
2473
2482
  const toggleCollapses = () => {
2474
- setCollapseToOpen(null);
2483
+ setCollapseToOpen("");
2475
2484
  };
2476
2485
  const handleClick = () => {
2477
2486
  if (value.length < max) {
@@ -2503,12 +2512,8 @@ const RepeatableComponent = ({
2503
2512
  );
2504
2513
  moveFieldRow(name2, currentIndex, newIndex);
2505
2514
  };
2506
- const handleToggle = (key) => () => {
2507
- if (collapseToOpen === key) {
2508
- setCollapseToOpen(null);
2509
- } else {
2510
- setCollapseToOpen(key);
2511
- }
2515
+ const handleValueChange = (key) => {
2516
+ setCollapseToOpen(key);
2512
2517
  };
2513
2518
  const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
2514
2519
  const handleCancel = (index$1) => {
@@ -2563,139 +2568,104 @@ const RepeatableComponent = ({
2563
2568
  defaultMessage: `Press spacebar to grab and re-order`
2564
2569
  }) }),
2565
2570
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
2566
- /* @__PURE__ */ jsxRuntime.jsxs(AccordionGroup, { error, children: [
2567
- /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { "aria-describedby": ariaDescriptionId, children: value.map(({ __temp_key__: key, id }, index2) => {
2568
- const nameWithIndex = `${name2}.${index2}`;
2569
- return /* @__PURE__ */ jsxRuntime.jsx(
2570
- Relations.ComponentProvider,
2571
- {
2572
- id,
2573
- uid: attribute.component,
2574
- level: level + 1,
2575
- type: "repeatable",
2576
- children: /* @__PURE__ */ jsxRuntime.jsx(
2577
- Component,
2571
+ /* @__PURE__ */ jsxRuntime.jsxs(
2572
+ AccordionRoot,
2573
+ {
2574
+ $error: error,
2575
+ value: collapseToOpen,
2576
+ onValueChange: handleValueChange,
2577
+ "aria-describedby": ariaDescriptionId,
2578
+ children: [
2579
+ value.map(({ __temp_key__: key, id }, index2) => {
2580
+ const nameWithIndex = `${name2}.${index2}`;
2581
+ return /* @__PURE__ */ jsxRuntime.jsx(
2582
+ Relations.ComponentProvider,
2578
2583
  {
2579
- disabled,
2580
- name: nameWithIndex,
2581
- attribute,
2582
- index: index2,
2583
- isOpen: collapseToOpen === key,
2584
- mainField,
2585
- onMoveItem: handleMoveComponentField,
2586
- onClickToggle: handleToggle(key),
2587
- onDeleteComponent: () => {
2588
- removeFieldRow(name2, index2);
2589
- toggleCollapses();
2590
- },
2591
- toggleCollapses,
2592
- onCancel: handleCancel,
2593
- onDropItem: handleDropItem,
2594
- onGrabItem: handleGrabItem,
2595
- children: layout.map((row, index22) => {
2596
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
2597
- const completeFieldName = `${nameWithIndex}.${field.name}`;
2598
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
2599
- }) }, index22);
2600
- })
2601
- }
2602
- )
2603
- },
2604
- key
2605
- );
2606
- }) }),
2607
- /* @__PURE__ */ jsxRuntime.jsx(AccordionFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", height: "48px", background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
2608
- id: index.getTranslation("containers.EditView.add.new-entry"),
2609
- defaultMessage: "Add an entry"
2610
- }) }) }) })
2611
- ] })
2584
+ id,
2585
+ uid: attribute.component,
2586
+ level: level + 1,
2587
+ type: "repeatable",
2588
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2589
+ Component,
2590
+ {
2591
+ disabled,
2592
+ name: nameWithIndex,
2593
+ attribute,
2594
+ index: index2,
2595
+ mainField,
2596
+ onMoveItem: handleMoveComponentField,
2597
+ onDeleteComponent: () => {
2598
+ removeFieldRow(name2, index2);
2599
+ toggleCollapses();
2600
+ },
2601
+ toggleCollapses,
2602
+ onCancel: handleCancel,
2603
+ onDropItem: handleDropItem,
2604
+ onGrabItem: handleGrabItem,
2605
+ __temp_key__: key,
2606
+ children: layout.map((row, index22) => {
2607
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
2608
+ const completeFieldName = `${nameWithIndex}.${field.name}`;
2609
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
2610
+ }) }, index22);
2611
+ })
2612
+ }
2613
+ )
2614
+ },
2615
+ key
2616
+ );
2617
+ }),
2618
+ /* @__PURE__ */ jsxRuntime.jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
2619
+ id: index.getTranslation("containers.EditView.add.new-entry"),
2620
+ defaultMessage: "Add an entry"
2621
+ }) })
2622
+ ]
2623
+ }
2624
+ )
2612
2625
  ] });
2613
2626
  };
2627
+ const AccordionRoot = styledComponents.styled(designSystem.Accordion.Root)`
2628
+ border: 1px solid
2629
+ ${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
2630
+ `;
2614
2631
  const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
2615
- height: 100%;
2616
2632
  width: 100%;
2617
- border-radius: 0 0 4px 4px;
2618
2633
  display: flex;
2619
2634
  justify-content: center;
2620
- span {
2621
- font-weight: 600;
2622
- font-size: 14px;
2623
- }
2624
- `;
2625
- const AccordionFooter = styledComponents.styled(designSystem.Box)`
2626
- overflow: hidden;
2627
- border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
2628
- border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
2629
- border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
2630
- border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
2631
- `;
2632
- const AccordionContent = styledComponents.styled(designSystem.Box)`
2633
- border-bottom: none;
2635
+ border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
2636
+ padding-inline: ${(props) => props.theme.spaces[6]};
2637
+ padding-block: ${(props) => props.theme.spaces[3]};
2634
2638
 
2635
- /* add the borders and make sure the top is transparent to avoid jumping with the hover effect */
2636
- & > div > div {
2637
- border: 1px solid ${({ theme }) => theme.colors.neutral200};
2638
- border-top-color: transparent;
2639
- }
2640
-
2641
- /* the top accordion _does_ need a border though */
2642
- & > div:first-child > div {
2643
- border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
2644
- }
2645
-
2646
- /* Reset all the border-radius' */
2647
- & > div > div,
2648
- & > div > div > div {
2649
- border-radius: unset;
2650
- }
2639
+ &:not([disabled]) {
2640
+ cursor: pointer;
2651
2641
 
2652
- /* Give the border radius back to the first accordion */
2653
- & > div:first-child > div,
2654
- & > div:first-child > div > div {
2655
- border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
2642
+ &:hover {
2643
+ background-color: ${(props) => props.theme.colors.primary100};
2644
+ }
2656
2645
  }
2657
2646
 
2658
- & > div > div[data-strapi-expanded='true'] {
2659
- border: 1px solid ${({ theme }) => theme.colors.primary600};
2660
- }
2661
- `;
2662
- const AccordionGroup = ({ children, error }) => {
2663
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: [
2664
- children,
2665
- error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: error }) })
2666
- ] });
2667
- };
2668
- const CustomIconButton$1 = styledComponents.styled(designSystem.IconButton)`
2669
- background-color: transparent;
2670
- color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : theme.colors.neutral600};
2671
-
2672
- &:hover {
2673
- color: ${({ theme }) => theme.colors.primary600};
2647
+ span {
2648
+ font-weight: 600;
2649
+ font-size: 1.4rem;
2650
+ line-height: 2.4rem;
2674
2651
  }
2675
- `;
2676
- const ActionsFlex$1 = styledComponents.styled(designSystem.Flex)`
2677
- & .drag-handle {
2678
- background: unset;
2679
- color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : void 0};
2680
2652
 
2681
- &:hover {
2682
- color: ${({ theme }) => theme.colors.primary600};
2683
- }
2653
+ @media (prefers-reduced-motion: no-preference) {
2654
+ transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
2684
2655
  }
2685
2656
  `;
2686
2657
  const Component = ({
2687
2658
  disabled,
2688
2659
  index: index$1,
2689
- isOpen,
2690
2660
  name: name2,
2691
2661
  mainField = {
2692
2662
  name: "id",
2693
2663
  type: "integer"
2694
2664
  },
2695
2665
  children,
2696
- onClickToggle,
2697
2666
  onDeleteComponent,
2698
2667
  toggleCollapses,
2668
+ __temp_key__,
2699
2669
  ...dragProps
2700
2670
  }) => {
2701
2671
  const { formatMessage } = reactIntl.useIntl();
@@ -2720,50 +2690,44 @@ const Component = ({
2720
2690
  dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
2721
2691
  }, [dragPreviewRef, index$1]);
2722
2692
  const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
2723
- const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
2724
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { ref: composedBoxRefs, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
2725
- /* @__PURE__ */ jsxRuntime.jsx(
2726
- designSystem.AccordionToggle,
2727
- {
2728
- action: disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ActionsFlex$1, { gap: 0, $expanded: isOpen, children: [
2729
- /* @__PURE__ */ jsxRuntime.jsx(
2730
- CustomIconButton$1,
2731
- {
2732
- $expanded: isOpen,
2733
- borderWidth: 0,
2734
- onClick: onDeleteComponent,
2735
- label: formatMessage({
2736
- id: index.getTranslation("containers.Edit.delete"),
2737
- defaultMessage: "Delete"
2738
- }),
2739
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
2740
- }
2741
- ),
2742
- /* @__PURE__ */ jsxRuntime.jsx(
2743
- designSystem.IconButton,
2744
- {
2745
- className: "drag-handle",
2746
- ref: composedAccordionRefs,
2747
- tag: "div",
2748
- role: "button",
2749
- borderWidth: 0,
2750
- tabIndex: 0,
2751
- onClick: (e) => e.stopPropagation(),
2752
- "data-handler-id": handlerId,
2753
- label: formatMessage({
2754
- id: index.getTranslation("components.DragHandle-label"),
2755
- defaultMessage: "Drag"
2756
- }),
2757
- onKeyDown: handleKeyDown,
2758
- children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
2759
- }
2760
- )
2761
- ] }),
2762
- title: displayValue,
2763
- togglePosition: "left"
2764
- }
2765
- ),
2766
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
2693
+ const composedBoxRefs = designSystem.useComposedRefs(
2694
+ boxRef,
2695
+ dropRef
2696
+ );
2697
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
2698
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
2699
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: displayValue }),
2700
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Actions, { children: [
2701
+ /* @__PURE__ */ jsxRuntime.jsx(
2702
+ designSystem.IconButton,
2703
+ {
2704
+ borderWidth: 0,
2705
+ onClick: onDeleteComponent,
2706
+ label: formatMessage({
2707
+ id: index.getTranslation("containers.Edit.delete"),
2708
+ defaultMessage: "Delete"
2709
+ }),
2710
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
2711
+ }
2712
+ ),
2713
+ /* @__PURE__ */ jsxRuntime.jsx(
2714
+ designSystem.IconButton,
2715
+ {
2716
+ ref: composedAccordionRefs,
2717
+ borderWidth: 0,
2718
+ onClick: (e) => e.stopPropagation(),
2719
+ "data-handler-id": handlerId,
2720
+ label: formatMessage({
2721
+ id: index.getTranslation("components.DragHandle-label"),
2722
+ defaultMessage: "Drag"
2723
+ }),
2724
+ onKeyDown: handleKeyDown,
2725
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
2726
+ }
2727
+ )
2728
+ ] })
2729
+ ] }),
2730
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
2767
2731
  designSystem.Flex,
2768
2732
  {
2769
2733
  direction: "column",
@@ -2803,29 +2767,15 @@ const ComponentInput = ({
2803
2767
  const data = transformDocument(schema, components)(form);
2804
2768
  field.onChange(name2, data);
2805
2769
  };
2806
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
2770
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, required, children: [
2807
2771
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
2808
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingBottom: 1, children: [
2809
- /* @__PURE__ */ jsxRuntime.jsxs(
2810
- designSystem.Typography,
2811
- {
2812
- textColor: "neutral800",
2813
- htmlFor: name2,
2814
- variant: "pi",
2815
- fontWeight: "bold",
2816
- tag: "label",
2817
- children: [
2818
- label,
2819
- attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2820
- " (",
2821
- Array.isArray(field.value) ? field.value.length : 0,
2822
- ")"
2823
- ] }),
2824
- required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: "*" })
2825
- ]
2826
- }
2827
- ),
2828
- labelAction && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 1, children: labelAction })
2772
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { action: labelAction, children: [
2773
+ label,
2774
+ attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2775
+ " (",
2776
+ Array.isArray(field.value) ? field.value.length : 0,
2777
+ ")"
2778
+ ] })
2829
2779
  ] }),
2830
2780
  showResetComponent && /* @__PURE__ */ jsxRuntime.jsx(
2831
2781
  designSystem.IconButton,
@@ -2834,21 +2784,21 @@ const ComponentInput = ({
2834
2784
  id: index.getTranslation("components.reset-entry"),
2835
2785
  defaultMessage: "Reset Entry"
2836
2786
  }),
2837
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {}),
2838
2787
  borderWidth: 0,
2839
2788
  onClick: () => {
2840
2789
  field.onChange(name2, null);
2841
- }
2790
+ },
2791
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
2842
2792
  }
2843
2793
  )
2844
2794
  ] }),
2845
- /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
2846
- !attribute.repeatable && !field.value && /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
2847
- !attribute.repeatable && field.value ? /* @__PURE__ */ jsxRuntime.jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
2848
- attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children })
2849
- ] })
2795
+ !attribute.repeatable && !field.value && /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
2796
+ !attribute.repeatable && field.value ? /* @__PURE__ */ jsxRuntime.jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
2797
+ attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
2798
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
2850
2799
  ] });
2851
2800
  };
2801
+ const MemoizedComponentInput = React__namespace.memo(ComponentInput);
2852
2802
  const AddComponentButton = ({
2853
2803
  hasError,
2854
2804
  isDisabled,
@@ -2933,24 +2883,12 @@ const ComponentCategory = ({
2933
2883
  category,
2934
2884
  components = [],
2935
2885
  variant = "primary",
2936
- isOpen,
2937
- onAddComponent,
2938
- onToggle
2886
+ onAddComponent
2939
2887
  }) => {
2940
2888
  const { formatMessage } = reactIntl.useIntl();
2941
- const handleToggle = () => {
2942
- onToggle(category);
2943
- };
2944
- return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
2945
- /* @__PURE__ */ jsxRuntime.jsx(
2946
- designSystem.AccordionToggle,
2947
- {
2948
- variant,
2949
- title: formatMessage({ id: category, defaultMessage: category }),
2950
- togglePosition: "left"
2951
- }
2952
- ),
2953
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
2889
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: category, children: [
2890
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { variant, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
2891
+ /* @__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(
2954
2892
  ComponentBox,
2955
2893
  {
2956
2894
  tag: "button",
@@ -2963,35 +2901,32 @@ const ComponentCategory = ({
2963
2901
  shrink: 0,
2964
2902
  borderColor: "neutral200",
2965
2903
  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
2966
- /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { icon }),
2967
- /* @__PURE__ */ jsxRuntime.jsx(ComponentName, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
2904
+ /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { color: "currentColor", background: "primary200", icon }),
2905
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: displayName })
2968
2906
  ] })
2969
2907
  },
2970
2908
  uid
2971
- )) }) }) })
2909
+ )) }) })
2972
2910
  ] });
2973
2911
  };
2974
- const Grid = styledComponents.styled.div`
2912
+ const Grid = styledComponents.styled(designSystem.Box)`
2975
2913
  display: grid;
2976
2914
  grid-template-columns: repeat(auto-fit, 14rem);
2977
2915
  grid-gap: ${({ theme }) => theme.spaces[1]};
2978
2916
  `;
2979
- const ComponentName = styledComponents.styled(designSystem.Typography)``;
2980
2917
  const ComponentBox = styledComponents.styled(designSystem.Flex)`
2918
+ color: ${({ theme }) => theme.colors.neutral600};
2919
+ cursor: pointer;
2920
+
2921
+ @media (prefers-reduced-motion: no-preference) {
2922
+ transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
2923
+ }
2924
+
2981
2925
  &:focus,
2982
2926
  &:hover {
2983
2927
  border: 1px solid ${({ theme }) => theme.colors.primary200};
2984
2928
  background: ${({ theme }) => theme.colors.primary100};
2985
-
2986
- ${ComponentName} {
2987
- color: ${({ theme }) => theme.colors.primary600};
2988
- }
2989
-
2990
- /* > Flex > ComponentIcon */
2991
- > div > div:first-child {
2992
- background: ${({ theme }) => theme.colors.primary200};
2993
- color: ${({ theme }) => theme.colors.primary600};
2994
- }
2929
+ color: ${({ theme }) => theme.colors.primary600};
2995
2930
  }
2996
2931
  `;
2997
2932
  const ComponentPicker = ({
@@ -3000,19 +2935,8 @@ const ComponentPicker = ({
3000
2935
  onClickAddComponent
3001
2936
  }) => {
3002
2937
  const { formatMessage } = reactIntl.useIntl();
3003
- const [categoryToOpen, setCategoryToOpen] = React__namespace.useState("");
3004
- React__namespace.useEffect(() => {
3005
- const categoryKeys = Object.keys(dynamicComponentsByCategory);
3006
- if (isOpen && categoryKeys.length > 0) {
3007
- setCategoryToOpen(categoryKeys[0]);
3008
- }
3009
- }, [isOpen, dynamicComponentsByCategory]);
3010
2938
  const handleAddComponentToDz = (componentUid) => () => {
3011
2939
  onClickAddComponent(componentUid);
3012
- setCategoryToOpen("");
3013
- };
3014
- const handleClickToggle = (categoryName) => {
3015
- setCategoryToOpen((currentCat) => currentCat === categoryName ? "" : categoryName);
3016
2940
  };
3017
2941
  if (!isOpen) {
3018
2942
  return null;
@@ -3033,14 +2957,12 @@ const ComponentPicker = ({
3033
2957
  id: index.getTranslation("components.DynamicZone.ComponentPicker-label"),
3034
2958
  defaultMessage: "Pick one component"
3035
2959
  }) }) }),
3036
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: Object.entries(dynamicComponentsByCategory).map(([category, components], index2) => /* @__PURE__ */ jsxRuntime.jsx(
2960
+ /* @__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(
3037
2961
  ComponentCategory,
3038
2962
  {
3039
2963
  category,
3040
2964
  components,
3041
2965
  onAddComponent: handleAddComponentToDz,
3042
- isOpen: category === categoryToOpen,
3043
- onToggle: handleClickToggle,
3044
2966
  variant: index2 % 2 === 1 ? "primary" : "secondary"
3045
2967
  },
3046
2968
  category
@@ -3055,27 +2977,21 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
3055
2977
  id: "components.NotAllowedInput.text",
3056
2978
  defaultMessage: "No permissions to see this field"
3057
2979
  });
3058
- return /* @__PURE__ */ jsxRuntime.jsx(
3059
- designSystem.TextInput,
3060
- {
3061
- disabled: true,
3062
- label,
3063
- id: name2,
3064
- hint,
3065
- name: name2,
3066
- placeholder,
3067
- required,
3068
- startAction: /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, {}),
3069
- type: "text",
3070
- value: ""
3071
- }
3072
- );
2980
+ return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: name2, hint, name: name2, required, children: [
2981
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
2982
+ /* @__PURE__ */ jsxRuntime.jsx(
2983
+ designSystem.TextInput,
2984
+ {
2985
+ disabled: true,
2986
+ placeholder,
2987
+ startAction: /* @__PURE__ */ jsxRuntime.jsx(Icons.EyeStriked, { fill: "neutral600" }),
2988
+ type: "text",
2989
+ value: ""
2990
+ }
2991
+ ),
2992
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
2993
+ ] });
3073
2994
  };
3074
- const StyledIcon = styledComponents.styled(Icons.EyeStriked)`
3075
- & > path {
3076
- fill: ${({ theme }) => theme.colors.neutral600};
3077
- }
3078
- `;
3079
2995
  function useDebounce(value, delay) {
3080
2996
  const [debouncedValue, setDebouncedValue] = React.useState(value);
3081
2997
  React.useEffect(() => {
@@ -3313,6 +3229,8 @@ const UIDInput = React__namespace.forwardRef(
3313
3229
  }
3314
3230
  );
3315
3231
  const FieldActionWrapper = styledComponents.styled(designSystem.Field.Action)`
3232
+ width: 1.6rem;
3233
+
3316
3234
  svg {
3317
3235
  height: 1.6rem;
3318
3236
  width: 1.6rem;
@@ -3348,6 +3266,7 @@ const rotation = styledComponents.keyframes`
3348
3266
  const LoadingWrapper = styledComponents.styled(designSystem.Flex)`
3349
3267
  animation: ${rotation} 2s infinite linear;
3350
3268
  `;
3269
+ const MemoizedUIDInput = React__namespace.memo(UIDInput);
3351
3270
  const md = new Markdown__default.default({
3352
3271
  html: true,
3353
3272
  // Enable HTML tags in source
@@ -4469,29 +4388,20 @@ const WysiwygNav = ({
4469
4388
  borderRadius: `0.4rem 0.4rem 0 0`,
4470
4389
  children: [
4471
4390
  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
4472
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(
4473
- designSystem.SingleSelect,
4474
- {
4475
- disabled: true,
4476
- placeholder: selectPlaceholder,
4477
- size: "S",
4478
- "aria-label": selectPlaceholder,
4479
- children: [
4480
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
4481
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
4482
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h3", children: "h3" }),
4483
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h4", children: "h4" }),
4484
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h5", children: "h5" }),
4485
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
4486
- ]
4487
- }
4488
- ) }),
4391
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SingleSelect, { disabled: true, placeholder: selectPlaceholder, "aria-label": selectPlaceholder, children: [
4392
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
4393
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
4394
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h3", children: "h3" }),
4395
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h4", children: "h4" }),
4396
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h5", children: "h5" }),
4397
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
4398
+ ] }) }),
4489
4399
  /* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
4490
- /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
4491
- /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
4492
- /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {}) })
4400
+ /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
4401
+ /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
4402
+ /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {}) })
4493
4403
  ] }),
4494
- /* @__PURE__ */ jsxRuntime.jsx(MoreButton, { disabled: true, label: "More", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) })
4404
+ /* @__PURE__ */ jsxRuntime.jsx(MoreButton, { disabled: true, label: "More", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) })
4495
4405
  ] }),
4496
4406
  !isExpandMode && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onTogglePreviewMode, variant: "tertiary", children: formatMessage({
4497
4407
  id: "components.Wysiwyg.ToggleMode.markdown-mode",
@@ -4515,7 +4425,6 @@ const WysiwygNav = ({
4515
4425
  {
4516
4426
  placeholder: selectPlaceholder,
4517
4427
  "aria-label": selectPlaceholder,
4518
- size: "S",
4519
4428
  onChange: (value) => onActionClick(value, editorRef),
4520
4429
  children: [
4521
4430
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
@@ -4534,7 +4443,7 @@ const WysiwygNav = ({
4534
4443
  onClick: () => onActionClick("Bold", editorRef),
4535
4444
  label: "Bold",
4536
4445
  name: "Bold",
4537
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {})
4446
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {})
4538
4447
  }
4539
4448
  ),
4540
4449
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4543,7 +4452,7 @@ const WysiwygNav = ({
4543
4452
  onClick: () => onActionClick("Italic", editorRef),
4544
4453
  label: "Italic",
4545
4454
  name: "Italic",
4546
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {})
4455
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {})
4547
4456
  }
4548
4457
  ),
4549
4458
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4552,19 +4461,11 @@ const WysiwygNav = ({
4552
4461
  onClick: () => onActionClick("Underline", editorRef),
4553
4462
  label: "Underline",
4554
4463
  name: "Underline",
4555
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {})
4464
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {})
4556
4465
  }
4557
4466
  )
4558
4467
  ] }),
4559
- /* @__PURE__ */ jsxRuntime.jsx(
4560
- MoreButton,
4561
- {
4562
- ref: buttonMoreRef,
4563
- onClick: handleTogglePopover,
4564
- label: "More",
4565
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {})
4566
- }
4567
- ),
4468
+ /* @__PURE__ */ jsxRuntime.jsx(MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, label: "More", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) }),
4568
4469
  visiblePopover && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { onDismiss: handleTogglePopover, centered: true, source: buttonMoreRef, spacing: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
4569
4470
  /* @__PURE__ */ jsxRuntime.jsxs(IconButtonGroupMargin, { children: [
4570
4471
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4573,7 +4474,7 @@ const WysiwygNav = ({
4573
4474
  onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
4574
4475
  label: "Strikethrough",
4575
4476
  name: "Strikethrough",
4576
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.StrikeThrough, {})
4477
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.StrikeThrough, {})
4577
4478
  }
4578
4479
  ),
4579
4480
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4582,7 +4483,7 @@ const WysiwygNav = ({
4582
4483
  onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
4583
4484
  label: "BulletList",
4584
4485
  name: "BulletList",
4585
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.BulletList, {})
4486
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.BulletList, {})
4586
4487
  }
4587
4488
  ),
4588
4489
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4591,7 +4492,7 @@ const WysiwygNav = ({
4591
4492
  onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
4592
4493
  label: "NumberList",
4593
4494
  name: "NumberList",
4594
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.NumberList, {})
4495
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.NumberList, {})
4595
4496
  }
4596
4497
  )
4597
4498
  ] }),
@@ -4602,7 +4503,7 @@ const WysiwygNav = ({
4602
4503
  onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
4603
4504
  label: "Code",
4604
4505
  name: "Code",
4605
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Code, {})
4506
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Code, {})
4606
4507
  }
4607
4508
  ),
4608
4509
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4614,7 +4515,7 @@ const WysiwygNav = ({
4614
4515
  },
4615
4516
  label: "Image",
4616
4517
  name: "Image",
4617
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Image, {})
4518
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Image, {})
4618
4519
  }
4619
4520
  ),
4620
4521
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4623,7 +4524,7 @@ const WysiwygNav = ({
4623
4524
  onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
4624
4525
  label: "Link",
4625
4526
  name: "Link",
4626
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Link, {})
4527
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Link, {})
4627
4528
  }
4628
4529
  ),
4629
4530
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -4632,7 +4533,7 @@ const WysiwygNav = ({
4632
4533
  onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
4633
4534
  label: "Quote",
4634
4535
  name: "Quote",
4635
- icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Quotes, {})
4536
+ children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Quotes, {})
4636
4537
  }
4637
4538
  )
4638
4539
  ] })
@@ -4704,7 +4605,7 @@ const Wysiwyg = React__namespace.forwardRef(
4704
4605
  const handleSelectAssets = (files) => {
4705
4606
  const formattedFiles = files.map((f) => ({
4706
4607
  alt: f.alternativeText || f.name,
4707
- url: urls.prefixFileUrlWithBackendUrl(f.url),
4608
+ url: usePrev.prefixFileUrlWithBackendUrl(f.url),
4708
4609
  mime: f.mime
4709
4610
  }));
4710
4611
  insertFile(editorRef, formattedFiles);
@@ -4761,6 +4662,7 @@ const Wysiwyg = React__namespace.forwardRef(
4761
4662
  ] });
4762
4663
  }
4763
4664
  );
4665
+ const MemoizedWysiwyg = React__namespace.memo(Wysiwyg);
4764
4666
  const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4765
4667
  const { id } = index.useDoc();
4766
4668
  const isFormDisabled = strapiAdmin.useForm("InputRenderer", (state) => state.disabled);
@@ -4810,10 +4712,10 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4810
4712
  }
4811
4713
  switch (props.type) {
4812
4714
  case "blocks":
4813
- return /* @__PURE__ */ jsxRuntime.jsx(BlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4715
+ return /* @__PURE__ */ jsxRuntime.jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4814
4716
  case "component":
4815
4717
  return /* @__PURE__ */ jsxRuntime.jsx(
4816
- ComponentInput,
4718
+ MemoizedComponentInput,
4817
4719
  {
4818
4720
  ...props,
4819
4721
  hint,
@@ -4825,11 +4727,11 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4825
4727
  case "dynamiczone":
4826
4728
  return /* @__PURE__ */ jsxRuntime.jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
4827
4729
  case "relation":
4828
- return /* @__PURE__ */ jsxRuntime.jsx(Relations.RelationsField, { ...props, hint, disabled: fieldIsDisabled });
4730
+ return /* @__PURE__ */ jsxRuntime.jsx(Relations.MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
4829
4731
  case "richtext":
4830
- return /* @__PURE__ */ jsxRuntime.jsx(Wysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4732
+ return /* @__PURE__ */ jsxRuntime.jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4831
4733
  case "uid":
4832
- return /* @__PURE__ */ jsxRuntime.jsx(UIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4734
+ return /* @__PURE__ */ jsxRuntime.jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4833
4735
  case "enumeration":
4834
4736
  return /* @__PURE__ */ jsxRuntime.jsx(
4835
4737
  strapiAdmin.InputRenderer,
@@ -4901,6 +4803,7 @@ const getMinMax = (attribute) => {
4901
4803
  return { maximum: void 0, minimum: void 0 };
4902
4804
  }
4903
4805
  };
4806
+ const MemoizedInputRenderer = React.memo(InputRenderer);
4904
4807
  const DynamicComponent = ({
4905
4808
  componentUid,
4906
4809
  disabled,
@@ -4914,7 +4817,6 @@ const DynamicComponent = ({
4914
4817
  dynamicComponentsByCategory = {},
4915
4818
  onAddComponent
4916
4819
  }) => {
4917
- const [isOpen, setIsOpen] = React__namespace.useState(true);
4918
4820
  const { formatMessage } = reactIntl.useIntl();
4919
4821
  const formValues = strapiAdmin.useForm("DynamicComponent", (state) => state.values);
4920
4822
  const {
@@ -4923,7 +4825,7 @@ const DynamicComponent = ({
4923
4825
  const title = React__namespace.useMemo(() => {
4924
4826
  const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
4925
4827
  const mainFieldValue = objects.getIn(formValues, `${name2}.${index$1}.${mainField}`);
4926
- const displayedValue = mainField === "id" ? "" : String(mainFieldValue).trim();
4828
+ const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
4927
4829
  const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
4928
4830
  return mainValue;
4929
4831
  }, [componentUid, components, formValues, name2, index$1]);
@@ -4934,9 +4836,6 @@ const DynamicComponent = ({
4934
4836
  ) ?? { icon: null, displayName: null };
4935
4837
  return { icon: icon2, displayName: displayName2 };
4936
4838
  }, [componentUid, dynamicComponentsByCategory]);
4937
- const handleToggle = () => {
4938
- setIsOpen((s) => !s);
4939
- };
4940
4839
  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
4941
4840
  type: `${useDragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name2}`,
4942
4841
  index: index$1,
@@ -4954,9 +4853,9 @@ const DynamicComponent = ({
4954
4853
  dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
4955
4854
  }, [dragPreviewRef, index$1]);
4956
4855
  const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
4957
- const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ActionsFlex, { gap: 0, children: [
4856
+ const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
4958
4857
  /* @__PURE__ */ jsxRuntime.jsx(
4959
- IconButtonCustom,
4858
+ designSystem.IconButton,
4960
4859
  {
4961
4860
  borderWidth: 0,
4962
4861
  label: formatMessage(
@@ -4973,10 +4872,7 @@ const DynamicComponent = ({
4973
4872
  /* @__PURE__ */ jsxRuntime.jsx(
4974
4873
  designSystem.IconButton,
4975
4874
  {
4976
- tag: "div",
4977
- role: "button",
4978
4875
  borderWidth: 0,
4979
- tabIndex: 0,
4980
4876
  onClick: (e) => e.stopPropagation(),
4981
4877
  "data-handler-id": handlerId,
4982
4878
  ref: dragRef,
@@ -5020,42 +4916,28 @@ const DynamicComponent = ({
5020
4916
  ] })
5021
4917
  ] })
5022
4918
  ] });
4919
+ const accordionTitle = title ? `${displayName} ${title}` : displayName;
4920
+ const accordionValue = React__namespace.useId();
5023
4921
  return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
5024
4922
  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Rectangle, { background: "neutral200" }) }),
5025
- /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
5026
- /* @__PURE__ */ jsxRuntime.jsx(
5027
- designSystem.AccordionToggle,
5028
- {
5029
- startIcon: /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { icon, showBackground: false, size: "S" }),
5030
- action: accordionActions,
5031
- title: `${displayName} ${title}`,
5032
- togglePosition: "left"
5033
- }
5034
- ),
5035
- /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
4923
+ /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: accordionValue, children: [
4924
+ /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
4925
+ /* @__PURE__ */ jsxRuntime.jsx(
4926
+ designSystem.Accordion.Trigger,
4927
+ {
4928
+ icon: icon && ComponentIcon.COMPONENT_ICONS[icon] ? ComponentIcon.COMPONENT_ICONS[icon] : ComponentIcon.COMPONENT_ICONS.dashboard,
4929
+ children: accordionTitle
4930
+ }
4931
+ ),
4932
+ /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Actions, { children: accordionActions })
4933
+ ] }),
4934
+ /* @__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: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
5036
4935
  const fieldName = `${name2}.${index$1}.${field.name}`;
5037
- return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...field, name: fieldName }) }, fieldName);
4936
+ return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
5038
4937
  }) }, rowInd)) }) }) })
5039
- ] }) })
4938
+ ] }) }) })
5040
4939
  ] });
5041
4940
  };
5042
- const ActionsFlex = styledComponents.styled(designSystem.Flex)`
5043
- /*
5044
- we need to remove the background from the button but we can't
5045
- wrap the element in styled because it breaks the forwardedAs which
5046
- we need for drag handler to work on firefox
5047
- */
5048
- div[role='button'] {
5049
- background: transparent;
5050
- }
5051
- `;
5052
- const IconButtonCustom = styledComponents.styled(designSystem.IconButton)`
5053
- background-color: transparent;
5054
-
5055
- svg {
5056
- fill: ${({ theme }) => theme.colors.neutral600};
5057
- }
5058
- `;
5059
4941
  const StyledBox = styledComponents.styled(designSystem.Box)`
5060
4942
  > div:first-child {
5061
4943
  box-shadow: ${({ theme }) => theme.shadows.tableShadow};
@@ -5126,7 +5008,7 @@ const [DynamicZoneProvider, useDynamicZone] = strapiAdmin.createContext(
5126
5008
  );
5127
5009
  const DynamicZone = ({
5128
5010
  attribute,
5129
- disabled,
5011
+ disabled: disabledProp,
5130
5012
  hint,
5131
5013
  label,
5132
5014
  labelAction,
@@ -5136,7 +5018,8 @@ const DynamicZone = ({
5136
5018
  const { max = Infinity, min = -Infinity } = attribute ?? {};
5137
5019
  const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
5138
5020
  const [liveText, setLiveText] = React__namespace.useState("");
5139
- const { components } = index.useDoc();
5021
+ const { components, isLoading } = index.useDoc();
5022
+ const disabled = disabledProp || isLoading;
5140
5023
  const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm(
5141
5024
  "DynamicZone",
5142
5025
  ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
@@ -5343,13 +5226,13 @@ const DynamicZone = ({
5343
5226
  )
5344
5227
  ] }) });
5345
5228
  };
5346
- exports.BlocksInput = BlocksInput;
5347
- exports.ComponentInput = ComponentInput;
5348
5229
  exports.DynamicZone = DynamicZone;
5349
- exports.InputRenderer = InputRenderer;
5230
+ exports.MemoizedBlocksInput = MemoizedBlocksInput;
5231
+ exports.MemoizedComponentInput = MemoizedComponentInput;
5232
+ exports.MemoizedInputRenderer = MemoizedInputRenderer;
5233
+ exports.MemoizedUIDInput = MemoizedUIDInput;
5234
+ exports.MemoizedWysiwyg = MemoizedWysiwyg;
5350
5235
  exports.NotAllowedInput = NotAllowedInput;
5351
- exports.UIDInput = UIDInput;
5352
- exports.Wysiwyg = Wysiwyg;
5353
5236
  exports.createDefaultForm = createDefaultForm;
5354
5237
  exports.prepareTempKeys = prepareTempKeys;
5355
5238
  exports.removeFieldsThatDontExistOnSchema = removeFieldsThatDontExistOnSchema;
@@ -5357,4 +5240,4 @@ exports.transformDocument = transformDocument;
5357
5240
  exports.useDynamicZone = useDynamicZone;
5358
5241
  exports.useFieldHint = useFieldHint;
5359
5242
  exports.useLazyComponents = useLazyComponents;
5360
- //# sourceMappingURL=Field-ZgzKlgxR.js.map
5243
+ //# sourceMappingURL=Field-C5Z1Ivdv.js.map