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

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 (143) hide show
  1. package/dist/_chunks/{ComponentConfigurationPage-uTMkLI60.mjs → ComponentConfigurationPage-CuWgXugY.mjs} +3 -3
  2. package/dist/_chunks/{ComponentConfigurationPage-uTMkLI60.mjs.map → ComponentConfigurationPage-CuWgXugY.mjs.map} +1 -1
  3. package/dist/_chunks/{ComponentConfigurationPage-DMq0wvcL.js → ComponentConfigurationPage-by0e_kNd.js} +3 -3
  4. package/dist/_chunks/{ComponentConfigurationPage-DMq0wvcL.js.map → ComponentConfigurationPage-by0e_kNd.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-CqBeCPGH.js} +3 -3
  10. package/dist/_chunks/{EditConfigurationPage-BFpQwwbc.js.map → EditConfigurationPage-CqBeCPGH.js.map} +1 -1
  11. package/dist/_chunks/{EditConfigurationPage-B2HhCh-b.mjs → EditConfigurationPage-DbI4KMyz.mjs} +3 -3
  12. package/dist/_chunks/{EditConfigurationPage-B2HhCh-b.mjs.map → EditConfigurationPage-DbI4KMyz.mjs.map} +1 -1
  13. package/dist/_chunks/{EditViewPage-CXXue16T.js → EditViewPage-ChgloMyO.js} +5 -5
  14. package/dist/_chunks/{EditViewPage-CXXue16T.js.map → EditViewPage-ChgloMyO.js.map} +1 -1
  15. package/dist/_chunks/{EditViewPage-BVIrgjyG.mjs → EditViewPage-dFPBya9U.mjs} +5 -5
  16. package/dist/_chunks/{EditViewPage-BVIrgjyG.mjs.map → EditViewPage-dFPBya9U.mjs.map} +1 -1
  17. package/dist/_chunks/{Field-0_2h1vuK.mjs → Field-C1nUKcdS.mjs} +240 -357
  18. package/dist/_chunks/Field-C1nUKcdS.mjs.map +1 -0
  19. package/dist/_chunks/{Field-ZgzKlgxR.js → Field-dLk-vgLL.js} +240 -357
  20. package/dist/_chunks/Field-dLk-vgLL.js.map +1 -0
  21. package/dist/_chunks/{Form-DgTc2qkx.js → Form-CbXtmHC_.js} +9 -6
  22. package/dist/_chunks/Form-CbXtmHC_.js.map +1 -0
  23. package/dist/_chunks/{Form-B7TUnQDd.mjs → Form-DOlpi7Js.mjs} +9 -6
  24. package/dist/_chunks/Form-DOlpi7Js.mjs.map +1 -0
  25. package/dist/_chunks/{History-Dug_4HIA.mjs → History-BFNUAiGc.mjs} +8 -8
  26. package/dist/_chunks/{History-Dug_4HIA.mjs.map → History-BFNUAiGc.mjs.map} +1 -1
  27. package/dist/_chunks/{History-DtHjQuqM.js → History-BjDfohBr.js} +8 -8
  28. package/dist/_chunks/{History-DtHjQuqM.js.map → History-BjDfohBr.js.map} +1 -1
  29. package/dist/_chunks/{ListConfigurationPage-CmEeNg6T.mjs → ListConfigurationPage-DDi0KqFm.mjs} +2 -2
  30. package/dist/_chunks/{ListConfigurationPage-CmEeNg6T.mjs.map → ListConfigurationPage-DDi0KqFm.mjs.map} +1 -1
  31. package/dist/_chunks/{ListConfigurationPage-BuSdTjfa.js → ListConfigurationPage-IQBgWTaa.js} +2 -2
  32. package/dist/_chunks/{ListConfigurationPage-BuSdTjfa.js.map → ListConfigurationPage-IQBgWTaa.js.map} +1 -1
  33. package/dist/_chunks/{ListViewPage-Dsoa3wEA.mjs → ListViewPage-BPjljUsH.mjs} +8 -16
  34. package/dist/_chunks/ListViewPage-BPjljUsH.mjs.map +1 -0
  35. package/dist/_chunks/{ListViewPage-CExWwa4S.js → ListViewPage-CZYGqlvF.js} +11 -18
  36. package/dist/_chunks/ListViewPage-CZYGqlvF.js.map +1 -0
  37. package/dist/_chunks/{NoContentTypePage-DCUL8gVi.js → NoContentTypePage-BOAI6VZ1.js} +2 -2
  38. package/dist/_chunks/{NoContentTypePage-DCUL8gVi.js.map → NoContentTypePage-BOAI6VZ1.js.map} +1 -1
  39. package/dist/_chunks/{NoContentTypePage-Dh38hBXB.mjs → NoContentTypePage-DaWw67K-.mjs} +2 -2
  40. package/dist/_chunks/{NoContentTypePage-Dh38hBXB.mjs.map → NoContentTypePage-DaWw67K-.mjs.map} +1 -1
  41. package/dist/_chunks/{NoPermissionsPage-Dt2O40ey.mjs → NoPermissionsPage-CZrJH00p.mjs} +2 -2
  42. package/dist/_chunks/{NoPermissionsPage-Dt2O40ey.mjs.map → NoPermissionsPage-CZrJH00p.mjs.map} +1 -1
  43. package/dist/_chunks/{NoPermissionsPage-BK-XCpIy.js → NoPermissionsPage-cYEtLc_e.js} +2 -2
  44. package/dist/_chunks/{NoPermissionsPage-BK-XCpIy.js.map → NoPermissionsPage-cYEtLc_e.js.map} +1 -1
  45. package/dist/_chunks/{Relations-DZyjWZHl.mjs → Relations-DTowyge2.mjs} +7 -5
  46. package/dist/_chunks/{Relations-DZyjWZHl.mjs.map → Relations-DTowyge2.mjs.map} +1 -1
  47. package/dist/_chunks/{Relations-CNypkp-g.js → Relations-DU6B7irU.js} +7 -5
  48. package/dist/_chunks/{Relations-CNypkp-g.js.map → Relations-DU6B7irU.js.map} +1 -1
  49. package/dist/_chunks/{en-C-V1_90f.js → en-DTULi5-d.js} +3 -1
  50. package/dist/_chunks/{en-C-V1_90f.js.map → en-DTULi5-d.js.map} +1 -1
  51. package/dist/_chunks/{en-MBPul9Su.mjs → en-GCOTL6jR.mjs} +3 -1
  52. package/dist/_chunks/{en-MBPul9Su.mjs.map → en-GCOTL6jR.mjs.map} +1 -1
  53. package/dist/_chunks/{index-B3c-4it4.mjs → index-BaGHmIir.mjs} +488 -196
  54. package/dist/_chunks/index-BaGHmIir.mjs.map +1 -0
  55. package/dist/_chunks/{index-DFK7LwDW.js → index-CCJeB7Rw.js} +480 -188
  56. package/dist/_chunks/index-CCJeB7Rw.js.map +1 -0
  57. package/dist/_chunks/{layout-B5cm7cZj.mjs → layout-BinjszSQ.mjs} +6 -6
  58. package/dist/_chunks/layout-BinjszSQ.mjs.map +1 -0
  59. package/dist/_chunks/{layout-DLih5-_W.js → layout-ni_L9kT1.js} +6 -6
  60. package/dist/_chunks/layout-ni_L9kT1.js.map +1 -0
  61. package/dist/_chunks/{relations-CTvkuINQ.js → relations-CeJAJc5I.js} +2 -2
  62. package/dist/_chunks/{relations-CTvkuINQ.js.map → relations-CeJAJc5I.js.map} +1 -1
  63. package/dist/_chunks/{relations-BZkrMa2z.mjs → relations-c91ji5eR.mjs} +2 -2
  64. package/dist/_chunks/{relations-BZkrMa2z.mjs.map → relations-c91ji5eR.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 +5 -4
  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/services/historyVersion.d.ts +1 -1
  76. package/dist/admin/src/hooks/useDocument.d.ts +5 -8
  77. package/dist/admin/src/hooks/useDocumentActions.d.ts +24 -3
  78. package/dist/admin/src/hooks/useDocumentLayout.d.ts +1 -1
  79. package/dist/admin/src/pages/EditView/components/DocumentActions.d.ts +3 -1
  80. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksInput.d.ts +3 -3
  81. package/dist/admin/src/pages/EditView/components/FormInputs/Component/Input.d.ts +2 -2
  82. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.d.ts +3 -5
  83. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.d.ts +1 -1
  84. package/dist/admin/src/pages/EditView/components/FormInputs/Relations.d.ts +2 -15
  85. package/dist/admin/src/pages/EditView/components/FormInputs/UID.d.ts +2 -2
  86. package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/Field.d.ts +2 -2
  87. package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygStyles.d.ts +56 -35
  88. package/dist/admin/src/pages/EditView/components/InputRenderer.d.ts +2 -10
  89. package/dist/admin/src/services/api.d.ts +2 -3
  90. package/dist/admin/src/services/components.d.ts +2 -2
  91. package/dist/admin/src/services/contentTypes.d.ts +5 -5
  92. package/dist/admin/src/services/documents.d.ts +29 -17
  93. package/dist/admin/src/services/init.d.ts +2 -2
  94. package/dist/admin/src/services/relations.d.ts +3 -3
  95. package/dist/admin/src/services/uid.d.ts +3 -3
  96. package/dist/admin/src/utils/api.d.ts +4 -17
  97. package/dist/admin/src/utils/validation.d.ts +1 -6
  98. package/dist/server/index.js +232 -116
  99. package/dist/server/index.js.map +1 -1
  100. package/dist/server/index.mjs +234 -118
  101. package/dist/server/index.mjs.map +1 -1
  102. package/dist/server/src/controllers/collection-types.d.ts.map +1 -1
  103. package/dist/server/src/controllers/single-types.d.ts.map +1 -1
  104. package/dist/server/src/controllers/utils/metadata.d.ts +8 -0
  105. package/dist/server/src/controllers/utils/metadata.d.ts.map +1 -0
  106. package/dist/server/src/controllers/validation/dimensions.d.ts +9 -0
  107. package/dist/server/src/controllers/validation/dimensions.d.ts.map +1 -0
  108. package/dist/server/src/history/services/history.d.ts.map +1 -1
  109. package/dist/server/src/history/services/lifecycles.d.ts.map +1 -1
  110. package/dist/server/src/index.d.ts +12 -33
  111. package/dist/server/src/index.d.ts.map +1 -1
  112. package/dist/server/src/services/document-manager.d.ts +6 -6
  113. package/dist/server/src/services/document-manager.d.ts.map +1 -1
  114. package/dist/server/src/services/document-metadata.d.ts +8 -29
  115. package/dist/server/src/services/document-metadata.d.ts.map +1 -1
  116. package/dist/server/src/services/index.d.ts +12 -33
  117. package/dist/server/src/services/index.d.ts.map +1 -1
  118. package/dist/server/src/services/utils/populate.d.ts +8 -1
  119. package/dist/server/src/services/utils/populate.d.ts.map +1 -1
  120. package/dist/shared/contracts/collection-types.d.ts +11 -5
  121. package/dist/shared/contracts/collection-types.d.ts.map +1 -1
  122. package/dist/shared/contracts/relations.d.ts +2 -2
  123. package/dist/shared/contracts/relations.d.ts.map +1 -1
  124. package/package.json +11 -11
  125. package/dist/_chunks/ComponentIcon-BBQsYCVn.js.map +0 -1
  126. package/dist/_chunks/ComponentIcon-BOFnK76n.mjs.map +0 -1
  127. package/dist/_chunks/Field-0_2h1vuK.mjs.map +0 -1
  128. package/dist/_chunks/Field-ZgzKlgxR.js.map +0 -1
  129. package/dist/_chunks/Form-B7TUnQDd.mjs.map +0 -1
  130. package/dist/_chunks/Form-DgTc2qkx.js.map +0 -1
  131. package/dist/_chunks/ListViewPage-CExWwa4S.js.map +0 -1
  132. package/dist/_chunks/ListViewPage-Dsoa3wEA.mjs.map +0 -1
  133. package/dist/_chunks/index-B3c-4it4.mjs.map +0 -1
  134. package/dist/_chunks/index-DFK7LwDW.js.map +0 -1
  135. package/dist/_chunks/layout-B5cm7cZj.mjs.map +0 -1
  136. package/dist/_chunks/layout-DLih5-_W.js.map +0 -1
  137. package/dist/_chunks/urls-CbOsUOoW.mjs +0 -7
  138. package/dist/_chunks/urls-CbOsUOoW.mjs.map +0 -1
  139. package/dist/_chunks/urls-DzZya_gm.js +0 -6
  140. package/dist/_chunks/urls-DzZya_gm.js.map +0 -1
  141. package/dist/admin/src/pages/ListView/components/BulkActions/PublishAction.d.ts +0 -31
  142. package/dist/server/src/controllers/utils/dimensions.d.ts +0 -5
  143. package/dist/server/src/controllers/utils/dimensions.d.ts.map +0 -1
@@ -1,23 +1,23 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
- import { useState, useEffect, useCallback } from "react";
3
+ import { useState, useEffect, useCallback, memo } from "react";
4
4
  import { useStrapiApp, createContext, useField, useNotification, useForm, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from "@strapi/admin/strapi-admin";
5
- import { Typography, Flex, Box, BaseLink, Button, useComposedRefs, Popover, Field, Tooltip, SingleSelect, SingleSelectOption, IconButton, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, GridItem, TextButton, KeyboardNavigable, Accordion, AccordionToggle, AccordionContent as AccordionContent$1, BaseButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
5
+ import { Typography, Flex, Box, BaseLink, Button, useComposedRefs, Popover, Field, Tooltip, SingleSelect, SingleSelectOption, IconButton, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, GridItem, Accordion, TextButton, BaseButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
6
6
  import pipe$1 from "lodash/fp/pipe";
7
7
  import { useIntl } from "react-intl";
8
- import { l as DOCUMENT_META_FIELDS, g as getTranslation, b as useDoc, d as contentManagerApi, c as buildValidParams, e as useDocumentRBAC, m as useDocLayout } from "./index-B3c-4it4.mjs";
8
+ import { l as DOCUMENT_META_FIELDS, g as getTranslation, b as useDoc, d as contentManagerApi, c as buildValidParams, e as useDocumentRBAC, m as useDocLayout } from "./index-BaGHmIir.mjs";
9
9
  import { generateNKeysBetween } from "fractional-indexing";
10
- import { u as useComponent, C as ComponentProvider, R as RelationsField } from "./Relations-DZyjWZHl.mjs";
10
+ import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-DTowyge2.mjs";
11
11
  import { Code, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Expand, PlusCircle, Plus, Trash, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, More } from "@strapi/icons";
12
12
  import { styled, css, keyframes } from "styled-components";
13
- import { C as ComponentIcon } from "./ComponentIcon-BOFnK76n.mjs";
13
+ import { C as ComponentIcon, a as COMPONENT_ICONS } from "./ComponentIcon-u4bIXTFY.mjs";
14
14
  import { getEmptyImage } from "react-dnd-html5-backend";
15
15
  import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from "./useDragAndDrop-DdHgKsqq.mjs";
16
16
  import { g as getIn } from "./objects-mKMAmfec.mjs";
17
17
  import { Editor as Editor$1, Transforms, Node, Element, Range, Path, Point, createEditor } from "slate";
18
18
  import { withHistory } from "slate-history";
19
19
  import { useFocused, useSelected, ReactEditor, Editable, useSlate, Slate, withReact } from "slate-react";
20
- import { p as prefixFileUrlWithBackendUrl } from "./urls-CbOsUOoW.mjs";
20
+ import { p as prefixFileUrlWithBackendUrl, u as usePrev } from "./usePrev-DH6iah0A.mjs";
21
21
  import * as Toolbar from "@radix-ui/react-toolbar";
22
22
  import { useLocation } from "react-router-dom";
23
23
  import CodeMirror from "codemirror5";
@@ -223,7 +223,7 @@ const pressEnterTwiceToExit = (editor) => {
223
223
  });
224
224
  }
225
225
  };
226
- const CodeBlock = styled.pre.attrs({ role: "code" })`
226
+ const CodeBlock = styled.pre`
227
227
  border-radius: ${({ theme }) => theme.borderRadius};
228
228
  background-color: ${({ theme }) => theme.colors.neutral100};
229
229
  max-width: 100%;
@@ -1598,7 +1598,8 @@ const DragAndDropElement = ({
1598
1598
  tag: "div",
1599
1599
  role: "button",
1600
1600
  tabIndex: 0,
1601
- "aria-label": formatMessage({
1601
+ withTooltip: false,
1602
+ label: formatMessage({
1602
1603
  id: getTranslation("components.DragHandle-label"),
1603
1604
  defaultMessage: "Drag"
1604
1605
  }),
@@ -1624,7 +1625,8 @@ const CloneDragItem = ({ children, dragHandleTopMargin }) => {
1624
1625
  {
1625
1626
  tag: "div",
1626
1627
  role: "button",
1627
- "aria-label": formatMessage({
1628
+ withTooltip: false,
1629
+ label: formatMessage({
1628
1630
  id: getTranslation("components.DragHandle-label"),
1629
1631
  defaultMessage: "Drag"
1630
1632
  }),
@@ -2311,6 +2313,7 @@ const BlocksInput = React.forwardRef(
2311
2313
  ] }) });
2312
2314
  }
2313
2315
  );
2316
+ const MemoizedBlocksInput = React.memo(BlocksInput);
2314
2317
  const createDefaultForm = (contentType, components = {}) => {
2315
2318
  const traverseSchema = (attributes) => {
2316
2319
  return Object.entries(attributes).reduce((acc, [key, attribute]) => {
@@ -2415,7 +2418,7 @@ const RepeatableComponent = ({
2415
2418
  const moveFieldRow = useForm("RepeatableComponent", (state) => state.moveFieldRow);
2416
2419
  const removeFieldRow = useForm("RepeatableComponent", (state) => state.removeFieldRow);
2417
2420
  const { max = Infinity } = attribute;
2418
- const [collapseToOpen, setCollapseToOpen] = React.useState(null);
2421
+ const [collapseToOpen, setCollapseToOpen] = React.useState("");
2419
2422
  const [liveText, setLiveText] = React.useState("");
2420
2423
  const componentTmpKeyWithFocussedField = React.useMemo(() => {
2421
2424
  if (search.has("field")) {
@@ -2431,13 +2434,19 @@ const RepeatableComponent = ({
2431
2434
  }
2432
2435
  return void 0;
2433
2436
  }, [search, name2, value]);
2437
+ const prevValue = usePrev(value);
2434
2438
  React.useEffect(() => {
2435
- if (typeof componentTmpKeyWithFocussedField === "number") {
2439
+ if (prevValue && prevValue.length < value.length) {
2440
+ setCollapseToOpen(value[value.length - 1].__temp_key__);
2441
+ }
2442
+ }, [value, prevValue]);
2443
+ React.useEffect(() => {
2444
+ if (typeof componentTmpKeyWithFocussedField === "string") {
2436
2445
  setCollapseToOpen(componentTmpKeyWithFocussedField);
2437
2446
  }
2438
2447
  }, [componentTmpKeyWithFocussedField]);
2439
2448
  const toggleCollapses = () => {
2440
- setCollapseToOpen(null);
2449
+ setCollapseToOpen("");
2441
2450
  };
2442
2451
  const handleClick = () => {
2443
2452
  if (value.length < max) {
@@ -2469,12 +2478,8 @@ const RepeatableComponent = ({
2469
2478
  );
2470
2479
  moveFieldRow(name2, currentIndex, newIndex);
2471
2480
  };
2472
- const handleToggle = (key) => () => {
2473
- if (collapseToOpen === key) {
2474
- setCollapseToOpen(null);
2475
- } else {
2476
- setCollapseToOpen(key);
2477
- }
2481
+ const handleValueChange = (key) => {
2482
+ setCollapseToOpen(key);
2478
2483
  };
2479
2484
  const getItemPos = (index) => `${index + 1} of ${value.length}`;
2480
2485
  const handleCancel = (index) => {
@@ -2529,139 +2534,104 @@ const RepeatableComponent = ({
2529
2534
  defaultMessage: `Press spacebar to grab and re-order`
2530
2535
  }) }),
2531
2536
  /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
2532
- /* @__PURE__ */ jsxs(AccordionGroup, { error, children: [
2533
- /* @__PURE__ */ jsx(AccordionContent, { "aria-describedby": ariaDescriptionId, children: value.map(({ __temp_key__: key, id }, index) => {
2534
- const nameWithIndex = `${name2}.${index}`;
2535
- return /* @__PURE__ */ jsx(
2536
- ComponentProvider,
2537
- {
2538
- id,
2539
- uid: attribute.component,
2540
- level: level + 1,
2541
- type: "repeatable",
2542
- children: /* @__PURE__ */ jsx(
2543
- Component,
2537
+ /* @__PURE__ */ jsxs(
2538
+ AccordionRoot,
2539
+ {
2540
+ $error: error,
2541
+ value: collapseToOpen,
2542
+ onValueChange: handleValueChange,
2543
+ "aria-describedby": ariaDescriptionId,
2544
+ children: [
2545
+ value.map(({ __temp_key__: key, id }, index) => {
2546
+ const nameWithIndex = `${name2}.${index}`;
2547
+ return /* @__PURE__ */ jsx(
2548
+ ComponentProvider,
2544
2549
  {
2545
- disabled,
2546
- name: nameWithIndex,
2547
- attribute,
2548
- index,
2549
- isOpen: collapseToOpen === key,
2550
- mainField,
2551
- onMoveItem: handleMoveComponentField,
2552
- onClickToggle: handleToggle(key),
2553
- onDeleteComponent: () => {
2554
- removeFieldRow(name2, index);
2555
- toggleCollapses();
2556
- },
2557
- toggleCollapses,
2558
- onCancel: handleCancel,
2559
- onDropItem: handleDropItem,
2560
- onGrabItem: handleGrabItem,
2561
- children: layout.map((row, index2) => {
2562
- return /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
2563
- const completeFieldName = `${nameWithIndex}.${field.name}`;
2564
- return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
2565
- }) }, index2);
2566
- })
2567
- }
2568
- )
2569
- },
2570
- key
2571
- );
2572
- }) }),
2573
- /* @__PURE__ */ jsx(AccordionFooter, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", height: "48px", background: "neutral0", children: /* @__PURE__ */ jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsx(Plus, {}), children: formatMessage({
2574
- id: getTranslation("containers.EditView.add.new-entry"),
2575
- defaultMessage: "Add an entry"
2576
- }) }) }) })
2577
- ] })
2550
+ id,
2551
+ uid: attribute.component,
2552
+ level: level + 1,
2553
+ type: "repeatable",
2554
+ children: /* @__PURE__ */ jsx(
2555
+ Component,
2556
+ {
2557
+ disabled,
2558
+ name: nameWithIndex,
2559
+ attribute,
2560
+ index,
2561
+ mainField,
2562
+ onMoveItem: handleMoveComponentField,
2563
+ onDeleteComponent: () => {
2564
+ removeFieldRow(name2, index);
2565
+ toggleCollapses();
2566
+ },
2567
+ toggleCollapses,
2568
+ onCancel: handleCancel,
2569
+ onDropItem: handleDropItem,
2570
+ onGrabItem: handleGrabItem,
2571
+ __temp_key__: key,
2572
+ children: layout.map((row, index2) => {
2573
+ return /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
2574
+ const completeFieldName = `${nameWithIndex}.${field.name}`;
2575
+ return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
2576
+ }) }, index2);
2577
+ })
2578
+ }
2579
+ )
2580
+ },
2581
+ key
2582
+ );
2583
+ }),
2584
+ /* @__PURE__ */ jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsx(Plus, {}), children: formatMessage({
2585
+ id: getTranslation("containers.EditView.add.new-entry"),
2586
+ defaultMessage: "Add an entry"
2587
+ }) })
2588
+ ]
2589
+ }
2590
+ )
2578
2591
  ] });
2579
2592
  };
2593
+ const AccordionRoot = styled(Accordion.Root)`
2594
+ border: 1px solid
2595
+ ${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
2596
+ `;
2580
2597
  const TextButtonCustom = styled(TextButton)`
2581
- height: 100%;
2582
2598
  width: 100%;
2583
- border-radius: 0 0 4px 4px;
2584
2599
  display: flex;
2585
2600
  justify-content: center;
2586
- span {
2587
- font-weight: 600;
2588
- font-size: 14px;
2589
- }
2590
- `;
2591
- const AccordionFooter = styled(Box)`
2592
- overflow: hidden;
2593
- border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
2594
- border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
2595
- border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
2596
- border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
2597
- `;
2598
- const AccordionContent = styled(Box)`
2599
- border-bottom: none;
2601
+ border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
2602
+ padding-inline: ${(props) => props.theme.spaces[6]};
2603
+ padding-block: ${(props) => props.theme.spaces[3]};
2600
2604
 
2601
- /* add the borders and make sure the top is transparent to avoid jumping with the hover effect */
2602
- & > div > div {
2603
- border: 1px solid ${({ theme }) => theme.colors.neutral200};
2604
- border-top-color: transparent;
2605
- }
2606
-
2607
- /* the top accordion _does_ need a border though */
2608
- & > div:first-child > div {
2609
- border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
2610
- }
2611
-
2612
- /* Reset all the border-radius' */
2613
- & > div > div,
2614
- & > div > div > div {
2615
- border-radius: unset;
2616
- }
2605
+ &:not([disabled]) {
2606
+ cursor: pointer;
2617
2607
 
2618
- /* Give the border radius back to the first accordion */
2619
- & > div:first-child > div,
2620
- & > div:first-child > div > div {
2621
- border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
2608
+ &:hover {
2609
+ background-color: ${(props) => props.theme.colors.primary100};
2610
+ }
2622
2611
  }
2623
2612
 
2624
- & > div > div[data-strapi-expanded='true'] {
2625
- border: 1px solid ${({ theme }) => theme.colors.primary600};
2626
- }
2627
- `;
2628
- const AccordionGroup = ({ children, error }) => {
2629
- return /* @__PURE__ */ jsxs(KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: [
2630
- children,
2631
- error && /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: error }) })
2632
- ] });
2633
- };
2634
- const CustomIconButton$1 = styled(IconButton)`
2635
- background-color: transparent;
2636
- color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : theme.colors.neutral600};
2637
-
2638
- &:hover {
2639
- color: ${({ theme }) => theme.colors.primary600};
2613
+ span {
2614
+ font-weight: 600;
2615
+ font-size: 1.4rem;
2616
+ line-height: 2.4rem;
2640
2617
  }
2641
- `;
2642
- const ActionsFlex$1 = styled(Flex)`
2643
- & .drag-handle {
2644
- background: unset;
2645
- color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : void 0};
2646
2618
 
2647
- &:hover {
2648
- color: ${({ theme }) => theme.colors.primary600};
2649
- }
2619
+ @media (prefers-reduced-motion: no-preference) {
2620
+ transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
2650
2621
  }
2651
2622
  `;
2652
2623
  const Component = ({
2653
2624
  disabled,
2654
2625
  index,
2655
- isOpen,
2656
2626
  name: name2,
2657
2627
  mainField = {
2658
2628
  name: "id",
2659
2629
  type: "integer"
2660
2630
  },
2661
2631
  children,
2662
- onClickToggle,
2663
2632
  onDeleteComponent,
2664
2633
  toggleCollapses,
2634
+ __temp_key__,
2665
2635
  ...dragProps
2666
2636
  }) => {
2667
2637
  const { formatMessage } = useIntl();
@@ -2686,50 +2656,44 @@ const Component = ({
2686
2656
  dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
2687
2657
  }, [dragPreviewRef, index]);
2688
2658
  const composedAccordionRefs = useComposedRefs(accordionRef, dragRef);
2689
- const composedBoxRefs = useComposedRefs(boxRef, dropRef);
2690
- return /* @__PURE__ */ jsx(Box, { ref: composedBoxRefs, children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
2691
- /* @__PURE__ */ jsx(
2692
- AccordionToggle,
2693
- {
2694
- action: disabled ? null : /* @__PURE__ */ jsxs(ActionsFlex$1, { gap: 0, $expanded: isOpen, children: [
2695
- /* @__PURE__ */ jsx(
2696
- CustomIconButton$1,
2697
- {
2698
- $expanded: isOpen,
2699
- borderWidth: 0,
2700
- onClick: onDeleteComponent,
2701
- label: formatMessage({
2702
- id: getTranslation("containers.Edit.delete"),
2703
- defaultMessage: "Delete"
2704
- }),
2705
- icon: /* @__PURE__ */ jsx(Trash, {})
2706
- }
2707
- ),
2708
- /* @__PURE__ */ jsx(
2709
- IconButton,
2710
- {
2711
- className: "drag-handle",
2712
- ref: composedAccordionRefs,
2713
- tag: "div",
2714
- role: "button",
2715
- borderWidth: 0,
2716
- tabIndex: 0,
2717
- onClick: (e) => e.stopPropagation(),
2718
- "data-handler-id": handlerId,
2719
- label: formatMessage({
2720
- id: getTranslation("components.DragHandle-label"),
2721
- defaultMessage: "Drag"
2722
- }),
2723
- onKeyDown: handleKeyDown,
2724
- children: /* @__PURE__ */ jsx(Drag, {})
2725
- }
2726
- )
2727
- ] }),
2728
- title: displayValue,
2729
- togglePosition: "left"
2730
- }
2731
- ),
2732
- /* @__PURE__ */ jsx(AccordionContent$1, { children: /* @__PURE__ */ jsx(
2659
+ const composedBoxRefs = useComposedRefs(
2660
+ boxRef,
2661
+ dropRef
2662
+ );
2663
+ return /* @__PURE__ */ jsx(Fragment, { children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsxs(Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
2664
+ /* @__PURE__ */ jsxs(Accordion.Header, { children: [
2665
+ /* @__PURE__ */ jsx(Accordion.Trigger, { children: displayValue }),
2666
+ /* @__PURE__ */ jsxs(Accordion.Actions, { children: [
2667
+ /* @__PURE__ */ jsx(
2668
+ IconButton,
2669
+ {
2670
+ borderWidth: 0,
2671
+ onClick: onDeleteComponent,
2672
+ label: formatMessage({
2673
+ id: getTranslation("containers.Edit.delete"),
2674
+ defaultMessage: "Delete"
2675
+ }),
2676
+ children: /* @__PURE__ */ jsx(Trash, {})
2677
+ }
2678
+ ),
2679
+ /* @__PURE__ */ jsx(
2680
+ IconButton,
2681
+ {
2682
+ ref: composedAccordionRefs,
2683
+ borderWidth: 0,
2684
+ onClick: (e) => e.stopPropagation(),
2685
+ "data-handler-id": handlerId,
2686
+ label: formatMessage({
2687
+ id: getTranslation("components.DragHandle-label"),
2688
+ defaultMessage: "Drag"
2689
+ }),
2690
+ onKeyDown: handleKeyDown,
2691
+ children: /* @__PURE__ */ jsx(Drag, {})
2692
+ }
2693
+ )
2694
+ ] })
2695
+ ] }),
2696
+ /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(
2733
2697
  Flex,
2734
2698
  {
2735
2699
  direction: "column",
@@ -2769,29 +2733,15 @@ const ComponentInput = ({
2769
2733
  const data = transformDocument(schema, components)(form);
2770
2734
  field.onChange(name2, data);
2771
2735
  };
2772
- return /* @__PURE__ */ jsxs(Box, { children: [
2736
+ return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, required, children: [
2773
2737
  /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
2774
- /* @__PURE__ */ jsxs(Flex, { paddingBottom: 1, children: [
2775
- /* @__PURE__ */ jsxs(
2776
- Typography,
2777
- {
2778
- textColor: "neutral800",
2779
- htmlFor: name2,
2780
- variant: "pi",
2781
- fontWeight: "bold",
2782
- tag: "label",
2783
- children: [
2784
- label,
2785
- attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
2786
- " (",
2787
- Array.isArray(field.value) ? field.value.length : 0,
2788
- ")"
2789
- ] }),
2790
- required && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: "*" })
2791
- ]
2792
- }
2793
- ),
2794
- labelAction && /* @__PURE__ */ jsx(Box, { paddingLeft: 1, children: labelAction })
2738
+ /* @__PURE__ */ jsxs(Field.Label, { action: labelAction, children: [
2739
+ label,
2740
+ attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
2741
+ " (",
2742
+ Array.isArray(field.value) ? field.value.length : 0,
2743
+ ")"
2744
+ ] })
2795
2745
  ] }),
2796
2746
  showResetComponent && /* @__PURE__ */ jsx(
2797
2747
  IconButton,
@@ -2800,21 +2750,21 @@ const ComponentInput = ({
2800
2750
  id: getTranslation("components.reset-entry"),
2801
2751
  defaultMessage: "Reset Entry"
2802
2752
  }),
2803
- icon: /* @__PURE__ */ jsx(Trash, {}),
2804
2753
  borderWidth: 0,
2805
2754
  onClick: () => {
2806
2755
  field.onChange(name2, null);
2807
- }
2756
+ },
2757
+ children: /* @__PURE__ */ jsx(Trash, {})
2808
2758
  }
2809
2759
  )
2810
2760
  ] }),
2811
- /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
2812
- !attribute.repeatable && !field.value && /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
2813
- !attribute.repeatable && field.value ? /* @__PURE__ */ jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
2814
- attribute.repeatable && /* @__PURE__ */ jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children })
2815
- ] })
2761
+ !attribute.repeatable && !field.value && /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
2762
+ !attribute.repeatable && field.value ? /* @__PURE__ */ jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
2763
+ attribute.repeatable && /* @__PURE__ */ jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
2764
+ /* @__PURE__ */ jsx(Field.Error, {})
2816
2765
  ] });
2817
2766
  };
2767
+ const MemoizedComponentInput = React.memo(ComponentInput);
2818
2768
  const AddComponentButton = ({
2819
2769
  hasError,
2820
2770
  isDisabled,
@@ -2899,24 +2849,12 @@ const ComponentCategory = ({
2899
2849
  category,
2900
2850
  components = [],
2901
2851
  variant = "primary",
2902
- isOpen,
2903
- onAddComponent,
2904
- onToggle
2852
+ onAddComponent
2905
2853
  }) => {
2906
2854
  const { formatMessage } = useIntl();
2907
- const handleToggle = () => {
2908
- onToggle(category);
2909
- };
2910
- return /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
2911
- /* @__PURE__ */ jsx(
2912
- AccordionToggle,
2913
- {
2914
- variant,
2915
- title: formatMessage({ id: category, defaultMessage: category }),
2916
- togglePosition: "left"
2917
- }
2918
- ),
2919
- /* @__PURE__ */ jsx(AccordionContent$1, { children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsx(Grid, { children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsx(
2855
+ return /* @__PURE__ */ jsxs(Accordion.Item, { value: category, children: [
2856
+ /* @__PURE__ */ jsx(Accordion.Header, { variant, children: /* @__PURE__ */ jsx(Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
2857
+ /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsx(
2920
2858
  ComponentBox,
2921
2859
  {
2922
2860
  tag: "button",
@@ -2929,35 +2867,32 @@ const ComponentCategory = ({
2929
2867
  shrink: 0,
2930
2868
  borderColor: "neutral200",
2931
2869
  children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
2932
- /* @__PURE__ */ jsx(ComponentIcon, { icon }),
2933
- /* @__PURE__ */ jsx(ComponentName, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
2870
+ /* @__PURE__ */ jsx(ComponentIcon, { color: "currentColor", background: "primary200", icon }),
2871
+ /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: displayName })
2934
2872
  ] })
2935
2873
  },
2936
2874
  uid
2937
- )) }) }) })
2875
+ )) }) })
2938
2876
  ] });
2939
2877
  };
2940
- const Grid = styled.div`
2878
+ const Grid = styled(Box)`
2941
2879
  display: grid;
2942
2880
  grid-template-columns: repeat(auto-fit, 14rem);
2943
2881
  grid-gap: ${({ theme }) => theme.spaces[1]};
2944
2882
  `;
2945
- const ComponentName = styled(Typography)``;
2946
2883
  const ComponentBox = styled(Flex)`
2884
+ color: ${({ theme }) => theme.colors.neutral600};
2885
+ cursor: pointer;
2886
+
2887
+ @media (prefers-reduced-motion: no-preference) {
2888
+ transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
2889
+ }
2890
+
2947
2891
  &:focus,
2948
2892
  &:hover {
2949
2893
  border: 1px solid ${({ theme }) => theme.colors.primary200};
2950
2894
  background: ${({ theme }) => theme.colors.primary100};
2951
-
2952
- ${ComponentName} {
2953
- color: ${({ theme }) => theme.colors.primary600};
2954
- }
2955
-
2956
- /* > Flex > ComponentIcon */
2957
- > div > div:first-child {
2958
- background: ${({ theme }) => theme.colors.primary200};
2959
- color: ${({ theme }) => theme.colors.primary600};
2960
- }
2895
+ color: ${({ theme }) => theme.colors.primary600};
2961
2896
  }
2962
2897
  `;
2963
2898
  const ComponentPicker = ({
@@ -2966,19 +2901,8 @@ const ComponentPicker = ({
2966
2901
  onClickAddComponent
2967
2902
  }) => {
2968
2903
  const { formatMessage } = useIntl();
2969
- const [categoryToOpen, setCategoryToOpen] = React.useState("");
2970
- React.useEffect(() => {
2971
- const categoryKeys = Object.keys(dynamicComponentsByCategory);
2972
- if (isOpen && categoryKeys.length > 0) {
2973
- setCategoryToOpen(categoryKeys[0]);
2974
- }
2975
- }, [isOpen, dynamicComponentsByCategory]);
2976
2904
  const handleAddComponentToDz = (componentUid) => () => {
2977
2905
  onClickAddComponent(componentUid);
2978
- setCategoryToOpen("");
2979
- };
2980
- const handleClickToggle = (categoryName) => {
2981
- setCategoryToOpen((currentCat) => currentCat === categoryName ? "" : categoryName);
2982
2906
  };
2983
2907
  if (!isOpen) {
2984
2908
  return null;
@@ -2999,14 +2923,12 @@ const ComponentPicker = ({
2999
2923
  id: getTranslation("components.DynamicZone.ComponentPicker-label"),
3000
2924
  defaultMessage: "Pick one component"
3001
2925
  }) }) }),
3002
- /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: Object.entries(dynamicComponentsByCategory).map(([category, components], index) => /* @__PURE__ */ jsx(
2926
+ /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(Accordion.Root, { defaultValue: Object.keys(dynamicComponentsByCategory)[0], children: Object.entries(dynamicComponentsByCategory).map(([category, components], index) => /* @__PURE__ */ jsx(
3003
2927
  ComponentCategory,
3004
2928
  {
3005
2929
  category,
3006
2930
  components,
3007
2931
  onAddComponent: handleAddComponentToDz,
3008
- isOpen: category === categoryToOpen,
3009
- onToggle: handleClickToggle,
3010
2932
  variant: index % 2 === 1 ? "primary" : "secondary"
3011
2933
  },
3012
2934
  category
@@ -3021,27 +2943,21 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
3021
2943
  id: "components.NotAllowedInput.text",
3022
2944
  defaultMessage: "No permissions to see this field"
3023
2945
  });
3024
- return /* @__PURE__ */ jsx(
3025
- TextInput,
3026
- {
3027
- disabled: true,
3028
- label,
3029
- id: name2,
3030
- hint,
3031
- name: name2,
3032
- placeholder,
3033
- required,
3034
- startAction: /* @__PURE__ */ jsx(StyledIcon, {}),
3035
- type: "text",
3036
- value: ""
3037
- }
3038
- );
2946
+ return /* @__PURE__ */ jsxs(Field.Root, { id: name2, hint, name: name2, required, children: [
2947
+ /* @__PURE__ */ jsx(Field.Label, { children: label }),
2948
+ /* @__PURE__ */ jsx(
2949
+ TextInput,
2950
+ {
2951
+ disabled: true,
2952
+ placeholder,
2953
+ startAction: /* @__PURE__ */ jsx(EyeStriked, { fill: "neutral600" }),
2954
+ type: "text",
2955
+ value: ""
2956
+ }
2957
+ ),
2958
+ /* @__PURE__ */ jsx(Field.Hint, {})
2959
+ ] });
3039
2960
  };
3040
- const StyledIcon = styled(EyeStriked)`
3041
- & > path {
3042
- fill: ${({ theme }) => theme.colors.neutral600};
3043
- }
3044
- `;
3045
2961
  function useDebounce(value, delay) {
3046
2962
  const [debouncedValue, setDebouncedValue] = useState(value);
3047
2963
  useEffect(() => {
@@ -3279,6 +3195,8 @@ const UIDInput = React.forwardRef(
3279
3195
  }
3280
3196
  );
3281
3197
  const FieldActionWrapper = styled(Field.Action)`
3198
+ width: 1.6rem;
3199
+
3282
3200
  svg {
3283
3201
  height: 1.6rem;
3284
3202
  width: 1.6rem;
@@ -3314,6 +3232,7 @@ const rotation = keyframes`
3314
3232
  const LoadingWrapper = styled(Flex)`
3315
3233
  animation: ${rotation} 2s infinite linear;
3316
3234
  `;
3235
+ const MemoizedUIDInput = React.memo(UIDInput);
3317
3236
  const md = new Markdown({
3318
3237
  html: true,
3319
3238
  // Enable HTML tags in source
@@ -4435,29 +4354,20 @@ const WysiwygNav = ({
4435
4354
  borderRadius: `0.4rem 0.4rem 0 0`,
4436
4355
  children: [
4437
4356
  /* @__PURE__ */ jsxs(Flex, { children: [
4438
- /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(
4439
- SingleSelect,
4440
- {
4441
- disabled: true,
4442
- placeholder: selectPlaceholder,
4443
- size: "S",
4444
- "aria-label": selectPlaceholder,
4445
- children: [
4446
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
4447
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "h2", children: "h2" }),
4448
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "h3", children: "h3" }),
4449
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "h4", children: "h4" }),
4450
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "h5", children: "h5" }),
4451
- /* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
4452
- ]
4453
- }
4454
- ) }),
4357
+ /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(SingleSelect, { disabled: true, placeholder: selectPlaceholder, "aria-label": selectPlaceholder, children: [
4358
+ /* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
4359
+ /* @__PURE__ */ jsx(SingleSelectOption, { value: "h2", children: "h2" }),
4360
+ /* @__PURE__ */ jsx(SingleSelectOption, { value: "h3", children: "h3" }),
4361
+ /* @__PURE__ */ jsx(SingleSelectOption, { value: "h4", children: "h4" }),
4362
+ /* @__PURE__ */ jsx(SingleSelectOption, { value: "h5", children: "h5" }),
4363
+ /* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
4364
+ ] }) }),
4455
4365
  /* @__PURE__ */ jsxs(MainButtons, { children: [
4456
- /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", icon: /* @__PURE__ */ jsx(Bold, {}) }),
4457
- /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", icon: /* @__PURE__ */ jsx(Italic, {}) }),
4458
- /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", icon: /* @__PURE__ */ jsx(Underline, {}) })
4366
+ /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", children: /* @__PURE__ */ jsx(Bold, {}) }),
4367
+ /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", children: /* @__PURE__ */ jsx(Italic, {}) }),
4368
+ /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", children: /* @__PURE__ */ jsx(Underline, {}) })
4459
4369
  ] }),
4460
- /* @__PURE__ */ jsx(MoreButton, { disabled: true, label: "More", icon: /* @__PURE__ */ jsx(More, {}) })
4370
+ /* @__PURE__ */ jsx(MoreButton, { disabled: true, label: "More", children: /* @__PURE__ */ jsx(More, {}) })
4461
4371
  ] }),
4462
4372
  !isExpandMode && /* @__PURE__ */ jsx(Button, { onClick: onTogglePreviewMode, variant: "tertiary", children: formatMessage({
4463
4373
  id: "components.Wysiwyg.ToggleMode.markdown-mode",
@@ -4481,7 +4391,6 @@ const WysiwygNav = ({
4481
4391
  {
4482
4392
  placeholder: selectPlaceholder,
4483
4393
  "aria-label": selectPlaceholder,
4484
- size: "S",
4485
4394
  onChange: (value) => onActionClick(value, editorRef),
4486
4395
  children: [
4487
4396
  /* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
@@ -4500,7 +4409,7 @@ const WysiwygNav = ({
4500
4409
  onClick: () => onActionClick("Bold", editorRef),
4501
4410
  label: "Bold",
4502
4411
  name: "Bold",
4503
- icon: /* @__PURE__ */ jsx(Bold, {})
4412
+ children: /* @__PURE__ */ jsx(Bold, {})
4504
4413
  }
4505
4414
  ),
4506
4415
  /* @__PURE__ */ jsx(
@@ -4509,7 +4418,7 @@ const WysiwygNav = ({
4509
4418
  onClick: () => onActionClick("Italic", editorRef),
4510
4419
  label: "Italic",
4511
4420
  name: "Italic",
4512
- icon: /* @__PURE__ */ jsx(Italic, {})
4421
+ children: /* @__PURE__ */ jsx(Italic, {})
4513
4422
  }
4514
4423
  ),
4515
4424
  /* @__PURE__ */ jsx(
@@ -4518,19 +4427,11 @@ const WysiwygNav = ({
4518
4427
  onClick: () => onActionClick("Underline", editorRef),
4519
4428
  label: "Underline",
4520
4429
  name: "Underline",
4521
- icon: /* @__PURE__ */ jsx(Underline, {})
4430
+ children: /* @__PURE__ */ jsx(Underline, {})
4522
4431
  }
4523
4432
  )
4524
4433
  ] }),
4525
- /* @__PURE__ */ jsx(
4526
- MoreButton,
4527
- {
4528
- ref: buttonMoreRef,
4529
- onClick: handleTogglePopover,
4530
- label: "More",
4531
- icon: /* @__PURE__ */ jsx(More, {})
4532
- }
4533
- ),
4434
+ /* @__PURE__ */ jsx(MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, label: "More", children: /* @__PURE__ */ jsx(More, {}) }),
4534
4435
  visiblePopover && /* @__PURE__ */ jsx(Popover, { onDismiss: handleTogglePopover, centered: true, source: buttonMoreRef, spacing: 4, children: /* @__PURE__ */ jsxs(Flex, { children: [
4535
4436
  /* @__PURE__ */ jsxs(IconButtonGroupMargin, { children: [
4536
4437
  /* @__PURE__ */ jsx(
@@ -4539,7 +4440,7 @@ const WysiwygNav = ({
4539
4440
  onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
4540
4441
  label: "Strikethrough",
4541
4442
  name: "Strikethrough",
4542
- icon: /* @__PURE__ */ jsx(StrikeThrough, {})
4443
+ children: /* @__PURE__ */ jsx(StrikeThrough, {})
4543
4444
  }
4544
4445
  ),
4545
4446
  /* @__PURE__ */ jsx(
@@ -4548,7 +4449,7 @@ const WysiwygNav = ({
4548
4449
  onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
4549
4450
  label: "BulletList",
4550
4451
  name: "BulletList",
4551
- icon: /* @__PURE__ */ jsx(BulletList, {})
4452
+ children: /* @__PURE__ */ jsx(BulletList, {})
4552
4453
  }
4553
4454
  ),
4554
4455
  /* @__PURE__ */ jsx(
@@ -4557,7 +4458,7 @@ const WysiwygNav = ({
4557
4458
  onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
4558
4459
  label: "NumberList",
4559
4460
  name: "NumberList",
4560
- icon: /* @__PURE__ */ jsx(NumberList, {})
4461
+ children: /* @__PURE__ */ jsx(NumberList, {})
4561
4462
  }
4562
4463
  )
4563
4464
  ] }),
@@ -4568,7 +4469,7 @@ const WysiwygNav = ({
4568
4469
  onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
4569
4470
  label: "Code",
4570
4471
  name: "Code",
4571
- icon: /* @__PURE__ */ jsx(Code, {})
4472
+ children: /* @__PURE__ */ jsx(Code, {})
4572
4473
  }
4573
4474
  ),
4574
4475
  /* @__PURE__ */ jsx(
@@ -4580,7 +4481,7 @@ const WysiwygNav = ({
4580
4481
  },
4581
4482
  label: "Image",
4582
4483
  name: "Image",
4583
- icon: /* @__PURE__ */ jsx(Image$1, {})
4484
+ children: /* @__PURE__ */ jsx(Image$1, {})
4584
4485
  }
4585
4486
  ),
4586
4487
  /* @__PURE__ */ jsx(
@@ -4589,7 +4490,7 @@ const WysiwygNav = ({
4589
4490
  onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
4590
4491
  label: "Link",
4591
4492
  name: "Link",
4592
- icon: /* @__PURE__ */ jsx(Link$1, {})
4493
+ children: /* @__PURE__ */ jsx(Link$1, {})
4593
4494
  }
4594
4495
  ),
4595
4496
  /* @__PURE__ */ jsx(
@@ -4598,7 +4499,7 @@ const WysiwygNav = ({
4598
4499
  onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
4599
4500
  label: "Quote",
4600
4501
  name: "Quote",
4601
- icon: /* @__PURE__ */ jsx(Quotes, {})
4502
+ children: /* @__PURE__ */ jsx(Quotes, {})
4602
4503
  }
4603
4504
  )
4604
4505
  ] })
@@ -4727,6 +4628,7 @@ const Wysiwyg = React.forwardRef(
4727
4628
  ] });
4728
4629
  }
4729
4630
  );
4631
+ const MemoizedWysiwyg = React.memo(Wysiwyg);
4730
4632
  const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4731
4633
  const { id } = useDoc();
4732
4634
  const isFormDisabled = useForm("InputRenderer", (state) => state.disabled);
@@ -4776,10 +4678,10 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4776
4678
  }
4777
4679
  switch (props.type) {
4778
4680
  case "blocks":
4779
- return /* @__PURE__ */ jsx(BlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4681
+ return /* @__PURE__ */ jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4780
4682
  case "component":
4781
4683
  return /* @__PURE__ */ jsx(
4782
- ComponentInput,
4684
+ MemoizedComponentInput,
4783
4685
  {
4784
4686
  ...props,
4785
4687
  hint,
@@ -4791,11 +4693,11 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4791
4693
  case "dynamiczone":
4792
4694
  return /* @__PURE__ */ jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
4793
4695
  case "relation":
4794
- return /* @__PURE__ */ jsx(RelationsField, { ...props, hint, disabled: fieldIsDisabled });
4696
+ return /* @__PURE__ */ jsx(MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
4795
4697
  case "richtext":
4796
- return /* @__PURE__ */ jsx(Wysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4698
+ return /* @__PURE__ */ jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4797
4699
  case "uid":
4798
- return /* @__PURE__ */ jsx(UIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4700
+ return /* @__PURE__ */ jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4799
4701
  case "enumeration":
4800
4702
  return /* @__PURE__ */ jsx(
4801
4703
  InputRenderer$1,
@@ -4867,6 +4769,7 @@ const getMinMax = (attribute) => {
4867
4769
  return { maximum: void 0, minimum: void 0 };
4868
4770
  }
4869
4771
  };
4772
+ const MemoizedInputRenderer = memo(InputRenderer);
4870
4773
  const DynamicComponent = ({
4871
4774
  componentUid,
4872
4775
  disabled,
@@ -4880,7 +4783,6 @@ const DynamicComponent = ({
4880
4783
  dynamicComponentsByCategory = {},
4881
4784
  onAddComponent
4882
4785
  }) => {
4883
- const [isOpen, setIsOpen] = React.useState(true);
4884
4786
  const { formatMessage } = useIntl();
4885
4787
  const formValues = useForm("DynamicComponent", (state) => state.values);
4886
4788
  const {
@@ -4889,7 +4791,7 @@ const DynamicComponent = ({
4889
4791
  const title = React.useMemo(() => {
4890
4792
  const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
4891
4793
  const mainFieldValue = getIn(formValues, `${name2}.${index}.${mainField}`);
4892
- const displayedValue = mainField === "id" ? "" : String(mainFieldValue).trim();
4794
+ const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
4893
4795
  const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
4894
4796
  return mainValue;
4895
4797
  }, [componentUid, components, formValues, name2, index]);
@@ -4900,9 +4802,6 @@ const DynamicComponent = ({
4900
4802
  ) ?? { icon: null, displayName: null };
4901
4803
  return { icon: icon2, displayName: displayName2 };
4902
4804
  }, [componentUid, dynamicComponentsByCategory]);
4903
- const handleToggle = () => {
4904
- setIsOpen((s) => !s);
4905
- };
4906
4805
  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
4907
4806
  type: `${ItemTypes.DYNAMIC_ZONE}_${name2}`,
4908
4807
  index,
@@ -4920,9 +4819,9 @@ const DynamicComponent = ({
4920
4819
  dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
4921
4820
  }, [dragPreviewRef, index]);
4922
4821
  const composedBoxRefs = useComposedRefs(boxRef, dropRef);
4923
- const accordionActions = disabled ? null : /* @__PURE__ */ jsxs(ActionsFlex, { gap: 0, children: [
4822
+ const accordionActions = disabled ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
4924
4823
  /* @__PURE__ */ jsx(
4925
- IconButtonCustom,
4824
+ IconButton,
4926
4825
  {
4927
4826
  borderWidth: 0,
4928
4827
  label: formatMessage(
@@ -4939,10 +4838,7 @@ const DynamicComponent = ({
4939
4838
  /* @__PURE__ */ jsx(
4940
4839
  IconButton,
4941
4840
  {
4942
- tag: "div",
4943
- role: "button",
4944
4841
  borderWidth: 0,
4945
- tabIndex: 0,
4946
4842
  onClick: (e) => e.stopPropagation(),
4947
4843
  "data-handler-id": handlerId,
4948
4844
  ref: dragRef,
@@ -4986,42 +4882,28 @@ const DynamicComponent = ({
4986
4882
  ] })
4987
4883
  ] })
4988
4884
  ] });
4885
+ const accordionTitle = title ? `${displayName} ${title}` : displayName;
4886
+ const accordionValue = React.useId();
4989
4887
  return /* @__PURE__ */ jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
4990
4888
  /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Rectangle, { background: "neutral200" }) }),
4991
- /* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
4992
- /* @__PURE__ */ jsx(
4993
- AccordionToggle,
4994
- {
4995
- startIcon: /* @__PURE__ */ jsx(ComponentIcon, { icon, showBackground: false, size: "S" }),
4996
- action: accordionActions,
4997
- title: `${displayName} ${title}`,
4998
- togglePosition: "left"
4999
- }
5000
- ),
5001
- /* @__PURE__ */ jsx(AccordionContent$1, { children: /* @__PURE__ */ jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
4889
+ /* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsxs(Accordion.Item, { value: accordionValue, children: [
4890
+ /* @__PURE__ */ jsxs(Accordion.Header, { children: [
4891
+ /* @__PURE__ */ jsx(
4892
+ Accordion.Trigger,
4893
+ {
4894
+ icon: icon && COMPONENT_ICONS[icon] ? COMPONENT_ICONS[icon] : COMPONENT_ICONS.dashboard,
4895
+ children: accordionTitle
4896
+ }
4897
+ ),
4898
+ /* @__PURE__ */ jsx(Accordion.Actions, { children: accordionActions })
4899
+ ] }),
4900
+ /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
5002
4901
  const fieldName = `${name2}.${index}.${field.name}`;
5003
- return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsx(InputRenderer, { ...field, name: fieldName }) }, fieldName);
4902
+ return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
5004
4903
  }) }, rowInd)) }) }) })
5005
- ] }) })
4904
+ ] }) }) })
5006
4905
  ] });
5007
4906
  };
5008
- const ActionsFlex = styled(Flex)`
5009
- /*
5010
- we need to remove the background from the button but we can't
5011
- wrap the element in styled because it breaks the forwardedAs which
5012
- we need for drag handler to work on firefox
5013
- */
5014
- div[role='button'] {
5015
- background: transparent;
5016
- }
5017
- `;
5018
- const IconButtonCustom = styled(IconButton)`
5019
- background-color: transparent;
5020
-
5021
- svg {
5022
- fill: ${({ theme }) => theme.colors.neutral600};
5023
- }
5024
- `;
5025
4907
  const StyledBox = styled(Box)`
5026
4908
  > div:first-child {
5027
4909
  box-shadow: ${({ theme }) => theme.shadows.tableShadow};
@@ -5092,7 +4974,7 @@ const [DynamicZoneProvider, useDynamicZone] = createContext(
5092
4974
  );
5093
4975
  const DynamicZone = ({
5094
4976
  attribute,
5095
- disabled,
4977
+ disabled: disabledProp,
5096
4978
  hint,
5097
4979
  label,
5098
4980
  labelAction,
@@ -5102,7 +4984,8 @@ const DynamicZone = ({
5102
4984
  const { max = Infinity, min = -Infinity } = attribute ?? {};
5103
4985
  const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);
5104
4986
  const [liveText, setLiveText] = React.useState("");
5105
- const { components } = useDoc();
4987
+ const { components, isLoading } = useDoc();
4988
+ const disabled = disabledProp || isLoading;
5106
4989
  const { addFieldRow, removeFieldRow, moveFieldRow } = useForm(
5107
4990
  "DynamicZone",
5108
4991
  ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
@@ -5310,19 +5193,19 @@ const DynamicZone = ({
5310
5193
  ] }) });
5311
5194
  };
5312
5195
  export {
5313
- BlocksInput as B,
5314
- ComponentInput as C,
5315
5196
  DynamicZone as D,
5316
- InputRenderer as I,
5197
+ MemoizedInputRenderer as M,
5317
5198
  NotAllowedInput as N,
5318
- UIDInput as U,
5319
- Wysiwyg as W,
5320
5199
  useDynamicZone as a,
5321
5200
  useFieldHint as b,
5322
5201
  createDefaultForm as c,
5202
+ MemoizedUIDInput as d,
5203
+ MemoizedWysiwyg as e,
5204
+ MemoizedComponentInput as f,
5205
+ MemoizedBlocksInput as g,
5323
5206
  prepareTempKeys as p,
5324
5207
  removeFieldsThatDontExistOnSchema as r,
5325
5208
  transformDocument as t,
5326
5209
  useLazyComponents as u
5327
5210
  };
5328
- //# sourceMappingURL=Field-0_2h1vuK.mjs.map
5211
+ //# sourceMappingURL=Field-C1nUKcdS.mjs.map