@strapi/content-manager 5.0.0-beta.6 → 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 (175) hide show
  1. package/dist/_chunks/{CardDragPreview-DSVYodBX.js → CardDragPreview-C0QyJgRA.js} +10 -14
  2. package/dist/_chunks/CardDragPreview-C0QyJgRA.js.map +1 -0
  3. package/dist/_chunks/{CardDragPreview-ikSG4M46.mjs → CardDragPreview-DOxamsuj.mjs} +7 -9
  4. package/dist/_chunks/CardDragPreview-DOxamsuj.mjs.map +1 -0
  5. package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs → ComponentConfigurationPage-CuWgXugY.mjs} +3 -3
  6. package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs.map → ComponentConfigurationPage-CuWgXugY.mjs.map} +1 -1
  7. package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js → ComponentConfigurationPage-by0e_kNd.js} +3 -3
  8. package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js.map → ComponentConfigurationPage-by0e_kNd.js.map} +1 -1
  9. package/dist/_chunks/{ComponentIcon-BBQsYCVn.js → ComponentIcon-BXdiCGQp.js} +8 -2
  10. package/dist/_chunks/ComponentIcon-BXdiCGQp.js.map +1 -0
  11. package/dist/_chunks/{ComponentIcon-BOFnK76n.mjs → ComponentIcon-u4bIXTFY.mjs} +9 -3
  12. package/dist/_chunks/ComponentIcon-u4bIXTFY.mjs.map +1 -0
  13. package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js → EditConfigurationPage-CqBeCPGH.js} +3 -3
  14. package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js.map → EditConfigurationPage-CqBeCPGH.js.map} +1 -1
  15. package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs → EditConfigurationPage-DbI4KMyz.mjs} +3 -3
  16. package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs.map → EditConfigurationPage-DbI4KMyz.mjs.map} +1 -1
  17. package/dist/_chunks/{EditViewPage-CzOT5Kpj.js → EditViewPage-ChgloMyO.js} +7 -9
  18. package/dist/_chunks/EditViewPage-ChgloMyO.js.map +1 -0
  19. package/dist/_chunks/{EditViewPage-Bm8lgcm6.mjs → EditViewPage-dFPBya9U.mjs} +6 -6
  20. package/dist/_chunks/EditViewPage-dFPBya9U.mjs.map +1 -0
  21. package/dist/_chunks/{Field-Dlh0uGnL.mjs → Field-C1nUKcdS.mjs} +500 -608
  22. package/dist/_chunks/Field-C1nUKcdS.mjs.map +1 -0
  23. package/dist/_chunks/{Field-Caef4JjM.js → Field-dLk-vgLL.js} +552 -661
  24. package/dist/_chunks/Field-dLk-vgLL.js.map +1 -0
  25. package/dist/_chunks/{Form-BzuAjtRq.js → Form-CbXtmHC_.js} +21 -19
  26. package/dist/_chunks/Form-CbXtmHC_.js.map +1 -0
  27. package/dist/_chunks/{Form-EnaQL_6L.mjs → Form-DOlpi7Js.mjs} +21 -18
  28. package/dist/_chunks/Form-DOlpi7Js.mjs.map +1 -0
  29. package/dist/_chunks/{History-D6sbCJvo.mjs → History-BFNUAiGc.mjs} +32 -43
  30. package/dist/_chunks/History-BFNUAiGc.mjs.map +1 -0
  31. package/dist/_chunks/{History-C17LiyRg.js → History-BjDfohBr.js} +32 -44
  32. package/dist/_chunks/History-BjDfohBr.js.map +1 -0
  33. package/dist/_chunks/{ListConfigurationPage-Ce4qs7qE.mjs → ListConfigurationPage-DDi0KqFm.mjs} +14 -14
  34. package/dist/_chunks/ListConfigurationPage-DDi0KqFm.mjs.map +1 -0
  35. package/dist/_chunks/{ListConfigurationPage-Dks5SX6f.js → ListConfigurationPage-IQBgWTaa.js} +17 -19
  36. package/dist/_chunks/ListConfigurationPage-IQBgWTaa.js.map +1 -0
  37. package/dist/_chunks/{ListViewPage-Be7S5aKL.mjs → ListViewPage-BPjljUsH.mjs} +25 -45
  38. package/dist/_chunks/ListViewPage-BPjljUsH.mjs.map +1 -0
  39. package/dist/_chunks/{ListViewPage-BwrZrPsh.js → ListViewPage-CZYGqlvF.js} +31 -51
  40. package/dist/_chunks/ListViewPage-CZYGqlvF.js.map +1 -0
  41. package/dist/_chunks/{NoContentTypePage-Cu5r1-JT.js → NoContentTypePage-BOAI6VZ1.js} +5 -5
  42. package/dist/_chunks/NoContentTypePage-BOAI6VZ1.js.map +1 -0
  43. package/dist/_chunks/{NoContentTypePage-CIPmYQMm.mjs → NoContentTypePage-DaWw67K-.mjs} +7 -7
  44. package/dist/_chunks/NoContentTypePage-DaWw67K-.mjs.map +1 -0
  45. package/dist/_chunks/{NoPermissionsPage-DhJ7LYrr.mjs → NoPermissionsPage-CZrJH00p.mjs} +5 -6
  46. package/dist/_chunks/NoPermissionsPage-CZrJH00p.mjs.map +1 -0
  47. package/dist/_chunks/{NoPermissionsPage-C-j6TEUF.js → NoPermissionsPage-cYEtLc_e.js} +4 -5
  48. package/dist/_chunks/NoPermissionsPage-cYEtLc_e.js.map +1 -0
  49. package/dist/_chunks/{Relations-CY7AtkDA.mjs → Relations-DTowyge2.mjs} +66 -56
  50. package/dist/_chunks/Relations-DTowyge2.mjs.map +1 -0
  51. package/dist/_chunks/{Relations-Czs-uZ-s.js → Relations-DU6B7irU.js} +70 -61
  52. package/dist/_chunks/Relations-DU6B7irU.js.map +1 -0
  53. package/dist/_chunks/{en-C-V1_90f.js → en-DTULi5-d.js} +3 -1
  54. package/dist/_chunks/{en-C-V1_90f.js.map → en-DTULi5-d.js.map} +1 -1
  55. package/dist/_chunks/{en-MBPul9Su.mjs → en-GCOTL6jR.mjs} +3 -1
  56. package/dist/_chunks/{en-MBPul9Su.mjs.map → en-GCOTL6jR.mjs.map} +1 -1
  57. package/dist/_chunks/{index-DNVx8ssZ.mjs → index-BaGHmIir.mjs} +507 -202
  58. package/dist/_chunks/index-BaGHmIir.mjs.map +1 -0
  59. package/dist/_chunks/{index-X_2tafck.js → index-CCJeB7Rw.js} +502 -198
  60. package/dist/_chunks/index-CCJeB7Rw.js.map +1 -0
  61. package/dist/_chunks/{layout-Dnh0PNp9.mjs → layout-BinjszSQ.mjs} +13 -13
  62. package/dist/_chunks/layout-BinjszSQ.mjs.map +1 -0
  63. package/dist/_chunks/{layout-dBc7wN7L.js → layout-ni_L9kT1.js} +14 -16
  64. package/dist/_chunks/layout-ni_L9kT1.js.map +1 -0
  65. package/dist/_chunks/{relations-4pHtBrHJ.js → relations-CeJAJc5I.js} +2 -2
  66. package/dist/_chunks/{relations-4pHtBrHJ.js.map → relations-CeJAJc5I.js.map} +1 -1
  67. package/dist/_chunks/{relations-Dx7tMKJN.mjs → relations-c91ji5eR.mjs} +2 -2
  68. package/dist/_chunks/{relations-Dx7tMKJN.mjs.map → relations-c91ji5eR.mjs.map} +1 -1
  69. package/dist/_chunks/useDragAndDrop-DdHgKsqq.mjs.map +1 -1
  70. package/dist/_chunks/useDragAndDrop-J0TUUbR6.js.map +1 -1
  71. package/dist/_chunks/usePrev-B9w_-eYc.js +15 -0
  72. package/dist/_chunks/usePrev-B9w_-eYc.js.map +1 -0
  73. package/dist/_chunks/usePrev-DH6iah0A.mjs +16 -0
  74. package/dist/_chunks/usePrev-DH6iah0A.mjs.map +1 -0
  75. package/dist/admin/index.js +2 -1
  76. package/dist/admin/index.js.map +1 -1
  77. package/dist/admin/index.mjs +5 -4
  78. package/dist/admin/src/components/ComponentIcon.d.ts +6 -3
  79. package/dist/admin/src/content-manager.d.ts +3 -3
  80. package/dist/admin/src/exports.d.ts +1 -0
  81. package/dist/admin/src/history/services/historyVersion.d.ts +1 -1
  82. package/dist/admin/src/hooks/useDocument.d.ts +5 -8
  83. package/dist/admin/src/hooks/useDocumentActions.d.ts +24 -3
  84. package/dist/admin/src/hooks/useDocumentLayout.d.ts +2 -2
  85. package/dist/admin/src/hooks/useDragAndDrop.d.ts +4 -4
  86. package/dist/admin/src/hooks/useKeyboardDragAndDrop.d.ts +1 -1
  87. package/dist/admin/src/pages/EditView/components/DocumentActions.d.ts +3 -1
  88. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksInput.d.ts +3 -3
  89. package/dist/admin/src/pages/EditView/components/FormInputs/Component/Input.d.ts +2 -2
  90. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.d.ts +3 -5
  91. package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.d.ts +1 -1
  92. package/dist/admin/src/pages/EditView/components/FormInputs/Relations.d.ts +10 -18
  93. package/dist/admin/src/pages/EditView/components/FormInputs/UID.d.ts +2 -2
  94. package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.d.ts +3 -49
  95. package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/Field.d.ts +2 -2
  96. package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygStyles.d.ts +67 -52
  97. package/dist/admin/src/pages/EditView/components/InputRenderer.d.ts +2 -10
  98. package/dist/admin/src/services/api.d.ts +2 -3
  99. package/dist/admin/src/services/components.d.ts +2 -2
  100. package/dist/admin/src/services/contentTypes.d.ts +5 -5
  101. package/dist/admin/src/services/documents.d.ts +29 -17
  102. package/dist/admin/src/services/init.d.ts +2 -2
  103. package/dist/admin/src/services/relations.d.ts +3 -3
  104. package/dist/admin/src/services/uid.d.ts +3 -3
  105. package/dist/admin/src/utils/api.d.ts +4 -18
  106. package/dist/admin/src/utils/validation.d.ts +1 -6
  107. package/dist/server/index.js +529 -407
  108. package/dist/server/index.js.map +1 -1
  109. package/dist/server/index.mjs +537 -415
  110. package/dist/server/index.mjs.map +1 -1
  111. package/dist/server/src/controllers/collection-types.d.ts.map +1 -1
  112. package/dist/server/src/controllers/single-types.d.ts.map +1 -1
  113. package/dist/server/src/controllers/utils/metadata.d.ts +8 -0
  114. package/dist/server/src/controllers/utils/metadata.d.ts.map +1 -0
  115. package/dist/server/src/controllers/validation/dimensions.d.ts +9 -0
  116. package/dist/server/src/controllers/validation/dimensions.d.ts.map +1 -0
  117. package/dist/server/src/controllers/validation/index.d.ts +1 -1
  118. package/dist/server/src/history/services/history.d.ts +2 -4
  119. package/dist/server/src/history/services/history.d.ts.map +1 -1
  120. package/dist/server/src/history/services/index.d.ts +6 -2
  121. package/dist/server/src/history/services/index.d.ts.map +1 -1
  122. package/dist/server/src/history/services/lifecycles.d.ts +9 -0
  123. package/dist/server/src/history/services/lifecycles.d.ts.map +1 -0
  124. package/dist/server/src/history/services/utils.d.ts +41 -9
  125. package/dist/server/src/history/services/utils.d.ts.map +1 -1
  126. package/dist/server/src/history/utils.d.ts +6 -2
  127. package/dist/server/src/history/utils.d.ts.map +1 -1
  128. package/dist/server/src/index.d.ts +18 -39
  129. package/dist/server/src/index.d.ts.map +1 -1
  130. package/dist/server/src/services/document-manager.d.ts +13 -12
  131. package/dist/server/src/services/document-manager.d.ts.map +1 -1
  132. package/dist/server/src/services/document-metadata.d.ts +8 -29
  133. package/dist/server/src/services/document-metadata.d.ts.map +1 -1
  134. package/dist/server/src/services/index.d.ts +18 -39
  135. package/dist/server/src/services/index.d.ts.map +1 -1
  136. package/dist/server/src/services/utils/populate.d.ts +8 -1
  137. package/dist/server/src/services/utils/populate.d.ts.map +1 -1
  138. package/dist/shared/contracts/collection-types.d.ts +14 -6
  139. package/dist/shared/contracts/collection-types.d.ts.map +1 -1
  140. package/dist/shared/contracts/relations.d.ts +2 -2
  141. package/dist/shared/contracts/relations.d.ts.map +1 -1
  142. package/package.json +13 -14
  143. package/dist/_chunks/CardDragPreview-DSVYodBX.js.map +0 -1
  144. package/dist/_chunks/CardDragPreview-ikSG4M46.mjs.map +0 -1
  145. package/dist/_chunks/ComponentIcon-BBQsYCVn.js.map +0 -1
  146. package/dist/_chunks/ComponentIcon-BOFnK76n.mjs.map +0 -1
  147. package/dist/_chunks/EditViewPage-Bm8lgcm6.mjs.map +0 -1
  148. package/dist/_chunks/EditViewPage-CzOT5Kpj.js.map +0 -1
  149. package/dist/_chunks/Field-Caef4JjM.js.map +0 -1
  150. package/dist/_chunks/Field-Dlh0uGnL.mjs.map +0 -1
  151. package/dist/_chunks/Form-BzuAjtRq.js.map +0 -1
  152. package/dist/_chunks/Form-EnaQL_6L.mjs.map +0 -1
  153. package/dist/_chunks/History-C17LiyRg.js.map +0 -1
  154. package/dist/_chunks/History-D6sbCJvo.mjs.map +0 -1
  155. package/dist/_chunks/ListConfigurationPage-Ce4qs7qE.mjs.map +0 -1
  156. package/dist/_chunks/ListConfigurationPage-Dks5SX6f.js.map +0 -1
  157. package/dist/_chunks/ListViewPage-Be7S5aKL.mjs.map +0 -1
  158. package/dist/_chunks/ListViewPage-BwrZrPsh.js.map +0 -1
  159. package/dist/_chunks/NoContentTypePage-CIPmYQMm.mjs.map +0 -1
  160. package/dist/_chunks/NoContentTypePage-Cu5r1-JT.js.map +0 -1
  161. package/dist/_chunks/NoPermissionsPage-C-j6TEUF.js.map +0 -1
  162. package/dist/_chunks/NoPermissionsPage-DhJ7LYrr.mjs.map +0 -1
  163. package/dist/_chunks/Relations-CY7AtkDA.mjs.map +0 -1
  164. package/dist/_chunks/Relations-Czs-uZ-s.js.map +0 -1
  165. package/dist/_chunks/index-DNVx8ssZ.mjs.map +0 -1
  166. package/dist/_chunks/index-X_2tafck.js.map +0 -1
  167. package/dist/_chunks/layout-Dnh0PNp9.mjs.map +0 -1
  168. package/dist/_chunks/layout-dBc7wN7L.js.map +0 -1
  169. package/dist/_chunks/urls-CbOsUOoW.mjs +0 -7
  170. package/dist/_chunks/urls-CbOsUOoW.mjs.map +0 -1
  171. package/dist/_chunks/urls-DzZya_gm.js +0 -6
  172. package/dist/_chunks/urls-DzZya_gm.js.map +0 -1
  173. package/dist/admin/src/pages/ListView/components/BulkActions/PublishAction.d.ts +0 -31
  174. package/dist/server/src/controllers/utils/dimensions.d.ts +0 -5
  175. 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, FieldLabel, FieldInput, Tooltip, SingleSelect, SingleSelectOption, IconButton, Portal, FocusTrap, InputWrapper, Divider, VisuallyHidden, FieldHint, FieldError, Grid as Grid$1, GridItem, TextButton, KeyboardNavigable, Accordion, AccordionToggle, AccordionContent as AccordionContent$1, BaseButton, TextInput, FieldAction, 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-DNVx8ssZ.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-CY7AtkDA.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
- import styled, { css, keyframes } from "styled-components";
13
- import { C as ComponentIcon } from "./ComponentIcon-BOFnK76n.mjs";
12
+ import { styled, css, keyframes } from "styled-components";
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%;
@@ -258,27 +258,27 @@ const codeBlocks = {
258
258
  dragHandleTopMargin: "10px"
259
259
  }
260
260
  };
261
- const H1 = styled(Typography).attrs({ as: "h1" })`
261
+ const H1 = styled(Typography).attrs({ tag: "h1" })`
262
262
  font-size: 4.2rem;
263
263
  line-height: ${({ theme }) => theme.lineHeights[1]};
264
264
  `;
265
- const H2 = styled(Typography).attrs({ as: "h2" })`
265
+ const H2 = styled(Typography).attrs({ tag: "h2" })`
266
266
  font-size: 3.5rem;
267
267
  line-height: ${({ theme }) => theme.lineHeights[1]};
268
268
  `;
269
- const H3 = styled(Typography).attrs({ as: "h3" })`
269
+ const H3 = styled(Typography).attrs({ tag: "h3" })`
270
270
  font-size: 2.9rem;
271
271
  line-height: ${({ theme }) => theme.lineHeights[1]};
272
272
  `;
273
- const H4 = styled(Typography).attrs({ as: "h4" })`
273
+ const H4 = styled(Typography).attrs({ tag: "h4" })`
274
274
  font-size: 2.4rem;
275
275
  line-height: ${({ theme }) => theme.lineHeights[1]};
276
276
  `;
277
- const H5 = styled(Typography).attrs({ as: "h5" })`
277
+ const H5 = styled(Typography).attrs({ tag: "h5" })`
278
278
  font-size: 2rem;
279
279
  line-height: ${({ theme }) => theme.lineHeights[1]};
280
280
  `;
281
- const H6 = styled(Typography).attrs({ as: "h6" })`
281
+ const H6 = styled(Typography).attrs({ tag: "h6" })`
282
282
  font-size: 1.6rem;
283
283
  line-height: ${({ theme }) => theme.lineHeights[1]};
284
284
  `;
@@ -367,7 +367,7 @@ const headingBlocks = {
367
367
  const ImageWrapper = styled(Flex)`
368
368
  transition-property: box-shadow;
369
369
  transition-duration: 0.2s;
370
- ${(props) => props.isFocused && css`
370
+ ${(props) => props.$isFocused && css`
371
371
  box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;
372
372
  `}
373
373
 
@@ -419,7 +419,7 @@ const Image = ({ attributes, children, element }) => {
419
419
  background: "neutral100",
420
420
  contentEditable: false,
421
421
  justifyContent: "center",
422
- isFocused: editorIsFocused && imageIsSelected,
422
+ $isFocused: editorIsFocused && imageIsSelected,
423
423
  hasRadius: true,
424
424
  children: /* @__PURE__ */ jsx("img", { src: url, alt: alternativeText, width, height })
425
425
  }
@@ -579,7 +579,7 @@ const StyledBaseLink = styled(BaseLink)`
579
579
  text-decoration: none;
580
580
  `;
581
581
  const RemoveButton = styled(Button)`
582
- visibility: ${(props) => props.visible ? "visible" : "hidden"};
582
+ visibility: ${(props) => props.$visible ? "visible" : "hidden"};
583
583
  `;
584
584
  const LinkContent = React.forwardRef(
585
585
  ({ link, children, attributes }, forwardedRef) => {
@@ -647,14 +647,14 @@ const LinkContent = React.forwardRef(
647
647
  children
648
648
  }
649
649
  ),
650
- popoverOpen && /* @__PURE__ */ jsx(Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxs(Flex, { as: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
651
- /* @__PURE__ */ jsx(Field, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
652
- /* @__PURE__ */ jsx(FieldLabel, { children: formatMessage({
650
+ popoverOpen && /* @__PURE__ */ jsx(Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxs(Flex, { tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
651
+ /* @__PURE__ */ jsx(Field.Root, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
652
+ /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
653
653
  id: "components.Blocks.popover.text",
654
654
  defaultMessage: "Text"
655
655
  }) }),
656
656
  /* @__PURE__ */ jsx(
657
- FieldInput,
657
+ Field.Input,
658
658
  {
659
659
  name: "text",
660
660
  placeholder: formatMessage({
@@ -668,13 +668,13 @@ const LinkContent = React.forwardRef(
668
668
  }
669
669
  )
670
670
  ] }) }),
671
- /* @__PURE__ */ jsx(Field, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
672
- /* @__PURE__ */ jsx(FieldLabel, { children: formatMessage({
671
+ /* @__PURE__ */ jsx(Field.Root, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
672
+ /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
673
673
  id: "components.Blocks.popover.link",
674
674
  defaultMessage: "Link"
675
675
  }) }),
676
676
  /* @__PURE__ */ jsx(
677
- FieldInput,
677
+ Field.Input,
678
678
  {
679
679
  ref: linkInputRef,
680
680
  name: "url",
@@ -693,7 +693,7 @@ const LinkContent = React.forwardRef(
693
693
  {
694
694
  variant: "danger-light",
695
695
  onClick: () => removeLink(editor),
696
- visible: showRemoveButton,
696
+ $visible: showRemoveButton,
697
697
  children: formatMessage({
698
698
  id: "components.Blocks.popover.remove",
699
699
  defaultMessage: "Remove"
@@ -748,11 +748,11 @@ const listStyle = css`
748
748
  }
749
749
  `;
750
750
  const Orderedlist = styled.ol`
751
- list-style-type: ${(props) => props.listStyleType};
751
+ list-style-type: ${(props) => props.$listStyleType};
752
752
  ${listStyle}
753
753
  `;
754
754
  const Unorderedlist = styled.ul`
755
- list-style-type: ${(props) => props.listStyleType};
755
+ list-style-type: ${(props) => props.$listStyleType};
756
756
  ${listStyle}
757
757
  `;
758
758
  const orderedStyles = ["decimal", "lower-alpha", "upper-roman"];
@@ -765,9 +765,9 @@ const List = ({ attributes, children, element }) => {
765
765
  const nextIndex = (element.indentLevel || 0) % listStyles.length;
766
766
  const listStyleType = listStyles[nextIndex];
767
767
  if (element.format === "ordered") {
768
- return /* @__PURE__ */ jsx(Orderedlist, { listStyleType, ...attributes, children });
768
+ return /* @__PURE__ */ jsx(Orderedlist, { $listStyleType: listStyleType, ...attributes, children });
769
769
  }
770
- return /* @__PURE__ */ jsx(Unorderedlist, { listStyleType, ...attributes, children });
770
+ return /* @__PURE__ */ jsx(Unorderedlist, { $listStyleType: listStyleType, ...attributes, children });
771
771
  };
772
772
  const replaceListWithEmptyBlock = (editor, currentListPath) => {
773
773
  Transforms.removeNodes(editor, { at: currentListPath });
@@ -964,7 +964,7 @@ const listBlocks = {
964
964
  snippets: ["-", "*", "+"]
965
965
  },
966
966
  "list-item": {
967
- renderElement: (props) => /* @__PURE__ */ jsx(Typography, { as: "li", ...props.attributes, children: props.children }),
967
+ renderElement: (props) => /* @__PURE__ */ jsx(Typography, { tag: "li", ...props.attributes, children: props.children }),
968
968
  // No handleConvert, list items are created when converting to the parent list
969
969
  matchNode: (node) => node.type === "list-item",
970
970
  isInBlocksSelector: false,
@@ -973,7 +973,7 @@ const listBlocks = {
973
973
  };
974
974
  const paragraphBlocks = {
975
975
  paragraph: {
976
- renderElement: (props) => /* @__PURE__ */ jsx(Typography, { as: "p", variant: "omega", ...props.attributes, children: props.children }),
976
+ renderElement: (props) => /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", ...props.attributes, children: props.children }),
977
977
  icon: Paragraph,
978
978
  label: {
979
979
  id: "components.Blocks.blocks.text",
@@ -1139,7 +1139,7 @@ const ToolbarButton = ({
1139
1139
  children: /* @__PURE__ */ jsx(
1140
1140
  FlexButton,
1141
1141
  {
1142
- as: "button",
1142
+ tag: "button",
1143
1143
  background: isActive ? "primary100" : "",
1144
1144
  alignItems: "center",
1145
1145
  justifyContent: "center",
@@ -1460,7 +1460,7 @@ const DragItem = styled(Flex)`
1460
1460
 
1461
1461
  // Set the visibility of drag button
1462
1462
  [role='button'] {
1463
- visibility: ${(props) => props.dragVisibility};
1463
+ visibility: ${(props) => props.$dragVisibility};
1464
1464
  opacity: inherit;
1465
1465
  }
1466
1466
  &[aria-disabled='true'] {
@@ -1477,7 +1477,7 @@ const DragIconButton = styled(IconButton)`
1477
1477
  visibility: hidden;
1478
1478
  cursor: grab;
1479
1479
  opacity: inherit;
1480
- margin-top: ${(props) => props.dragHandleTopMargin ?? 0};
1480
+ margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
1481
1481
 
1482
1482
  &:hover {
1483
1483
  background: ${({ theme }) => theme.colors.neutral200};
@@ -1552,7 +1552,7 @@ const DragAndDropElement = ({
1552
1552
  React.useEffect(() => {
1553
1553
  setDragVisibility("hidden");
1554
1554
  }, [editor.selection]);
1555
- return /* @__PURE__ */ jsxs(Wrapper$1, { ref: (ref) => composedBoxRefs(ref), isOverDropTarget, children: [
1555
+ return /* @__PURE__ */ jsxs(Wrapper$1, { ref: composedBoxRefs, isOverDropTarget, children: [
1556
1556
  isOverDropTarget && /* @__PURE__ */ jsx(
1557
1557
  DropPlaceholder,
1558
1558
  {
@@ -1590,15 +1590,16 @@ const DragAndDropElement = ({
1590
1590
  onSelect: () => setDragVisibility("visible"),
1591
1591
  onMouseLeave: () => setDragVisibility("hidden"),
1592
1592
  "aria-disabled": disabled,
1593
- dragVisibility,
1593
+ $dragVisibility: dragVisibility,
1594
1594
  children: [
1595
1595
  /* @__PURE__ */ jsx(
1596
1596
  DragIconButton,
1597
1597
  {
1598
- forwardedAs: "div",
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
  }),
@@ -1606,7 +1607,7 @@ const DragAndDropElement = ({
1606
1607
  "aria-disabled": disabled,
1607
1608
  disabled,
1608
1609
  draggable: true,
1609
- dragHandleTopMargin,
1610
+ $dragHandleTopMargin: dragHandleTopMargin,
1610
1611
  children: /* @__PURE__ */ jsx(Drag, { color: "neutral600" })
1611
1612
  }
1612
1613
  ),
@@ -1618,17 +1619,18 @@ const DragAndDropElement = ({
1618
1619
  };
1619
1620
  const CloneDragItem = ({ children, dragHandleTopMargin }) => {
1620
1621
  const { formatMessage } = useIntl();
1621
- return /* @__PURE__ */ jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", dragVisibility: "visible", children: [
1622
+ return /* @__PURE__ */ jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", $dragVisibility: "visible", children: [
1622
1623
  /* @__PURE__ */ jsx(
1623
1624
  DragIconButton,
1624
1625
  {
1625
- forwardedAs: "div",
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
  }),
1631
- dragHandleTopMargin,
1633
+ $dragHandleTopMargin: dragHandleTopMargin,
1632
1634
  children: /* @__PURE__ */ jsx(Drag, { color: "neutral600" })
1633
1635
  }
1634
1636
  ),
@@ -1950,8 +1952,8 @@ const EditorLayout$1 = ({
1950
1952
  direction: "column",
1951
1953
  alignItems: "flex-start",
1952
1954
  height: "512px",
1953
- disabled,
1954
- hasError: Boolean(error),
1955
+ $disabled: disabled,
1956
+ $hasError: Boolean(error),
1955
1957
  style: { overflow: "hidden" },
1956
1958
  "aria-describedby": ariaDescriptionId,
1957
1959
  position: "relative",
@@ -1959,6 +1961,29 @@ const EditorLayout$1 = ({
1959
1961
  }
1960
1962
  );
1961
1963
  };
1964
+ const InputWrapper = styled(Flex)`
1965
+ border: 1px solid
1966
+ ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
1967
+ border-radius: ${({ theme }) => theme.borderRadius};
1968
+ background: ${({ theme }) => theme.colors.neutral0};
1969
+
1970
+ ${({ theme, $hasError = false }) => css`
1971
+ outline: none;
1972
+ box-shadow: 0;
1973
+ transition-property: border-color, box-shadow, fill;
1974
+ transition-duration: 0.2s;
1975
+
1976
+ &:focus-within {
1977
+ border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};
1978
+ box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
1979
+ }
1980
+ `}
1981
+
1982
+ ${({ theme, $disabled }) => $disabled ? css`
1983
+ color: ${theme.colors.neutral600};
1984
+ background: ${theme.colors.neutral150};
1985
+ ` : void 0}
1986
+ `;
1962
1987
  const stylesToInherit = css`
1963
1988
  font-size: inherit;
1964
1989
  color: inherit;
@@ -1971,10 +1996,14 @@ const ItalicText = styled(Typography)`
1971
1996
  font-style: italic;
1972
1997
  ${stylesToInherit}
1973
1998
  `;
1974
- const UnderlineText = styled(Typography).attrs({ textDecoration: "underline" })`
1999
+ const UnderlineText = styled(Typography).attrs({
2000
+ textDecoration: "underline"
2001
+ })`
1975
2002
  ${stylesToInherit}
1976
2003
  `;
1977
- const StrikeThroughText = styled(Typography).attrs({ textDecoration: "line-through" })`
2004
+ const StrikeThroughText = styled(Typography).attrs({
2005
+ textDecoration: "line-through"
2006
+ })`
1978
2007
  ${stylesToInherit}
1979
2008
  `;
1980
2009
  const InlineCode = styled.code`
@@ -2265,8 +2294,8 @@ const BlocksInput = React.forwardRef(
2265
2294
  ({ label, name: name2, required = false, hint, labelAction, ...editorProps }, forwardedRef) => {
2266
2295
  const id = React.useId();
2267
2296
  const field = useField(name2);
2268
- return /* @__PURE__ */ jsx(Field, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
2269
- /* @__PURE__ */ jsx(FieldLabel, { action: labelAction, children: label }),
2297
+ return /* @__PURE__ */ jsx(Field.Root, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
2298
+ /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
2270
2299
  /* @__PURE__ */ jsx(
2271
2300
  BlocksEditor,
2272
2301
  {
@@ -2279,11 +2308,12 @@ const BlocksInput = React.forwardRef(
2279
2308
  ...editorProps
2280
2309
  }
2281
2310
  ),
2282
- /* @__PURE__ */ jsx(FieldHint, {}),
2283
- /* @__PURE__ */ jsx(FieldError, {})
2311
+ /* @__PURE__ */ jsx(Field.Hint, {}),
2312
+ /* @__PURE__ */ jsx(Field.Error, {})
2284
2313
  ] }) });
2285
2314
  }
2286
2315
  );
2316
+ const MemoizedBlocksInput = React.memo(BlocksInput);
2287
2317
  const createDefaultForm = (contentType, components = {}) => {
2288
2318
  const traverseSchema = (attributes) => {
2289
2319
  return Object.entries(attributes).reduce((acc, [key, attribute]) => {
@@ -2311,7 +2341,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
2311
2341
  /* @__PURE__ */ jsx(
2312
2342
  Box,
2313
2343
  {
2314
- as: "button",
2344
+ tag: "button",
2315
2345
  background: "neutral100",
2316
2346
  borderColor: field.error ? "danger600" : "neutral200",
2317
2347
  hasRadius: true,
@@ -2388,7 +2418,7 @@ const RepeatableComponent = ({
2388
2418
  const moveFieldRow = useForm("RepeatableComponent", (state) => state.moveFieldRow);
2389
2419
  const removeFieldRow = useForm("RepeatableComponent", (state) => state.removeFieldRow);
2390
2420
  const { max = Infinity } = attribute;
2391
- const [collapseToOpen, setCollapseToOpen] = React.useState(null);
2421
+ const [collapseToOpen, setCollapseToOpen] = React.useState("");
2392
2422
  const [liveText, setLiveText] = React.useState("");
2393
2423
  const componentTmpKeyWithFocussedField = React.useMemo(() => {
2394
2424
  if (search.has("field")) {
@@ -2404,13 +2434,19 @@ const RepeatableComponent = ({
2404
2434
  }
2405
2435
  return void 0;
2406
2436
  }, [search, name2, value]);
2437
+ const prevValue = usePrev(value);
2407
2438
  React.useEffect(() => {
2408
- 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") {
2409
2445
  setCollapseToOpen(componentTmpKeyWithFocussedField);
2410
2446
  }
2411
2447
  }, [componentTmpKeyWithFocussedField]);
2412
2448
  const toggleCollapses = () => {
2413
- setCollapseToOpen(null);
2449
+ setCollapseToOpen("");
2414
2450
  };
2415
2451
  const handleClick = () => {
2416
2452
  if (value.length < max) {
@@ -2442,12 +2478,8 @@ const RepeatableComponent = ({
2442
2478
  );
2443
2479
  moveFieldRow(name2, currentIndex, newIndex);
2444
2480
  };
2445
- const handleToggle = (key) => () => {
2446
- if (collapseToOpen === key) {
2447
- setCollapseToOpen(null);
2448
- } else {
2449
- setCollapseToOpen(key);
2450
- }
2481
+ const handleValueChange = (key) => {
2482
+ setCollapseToOpen(key);
2451
2483
  };
2452
2484
  const getItemPos = (index) => `${index + 1} of ${value.length}`;
2453
2485
  const handleCancel = (index) => {
@@ -2502,158 +2534,104 @@ const RepeatableComponent = ({
2502
2534
  defaultMessage: `Press spacebar to grab and re-order`
2503
2535
  }) }),
2504
2536
  /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
2505
- /* @__PURE__ */ jsxs(AccordionGroup, { error, children: [
2506
- /* @__PURE__ */ jsx(AccordionContent, { "aria-describedby": ariaDescriptionId, children: value.map(({ __temp_key__: key, id }, index) => {
2507
- const nameWithIndex = `${name2}.${index}`;
2508
- return /* @__PURE__ */ jsx(
2509
- ComponentProvider,
2510
- {
2511
- id,
2512
- uid: attribute.component,
2513
- level: level + 1,
2514
- type: "repeatable",
2515
- children: /* @__PURE__ */ jsx(
2516
- 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,
2517
2549
  {
2518
- disabled,
2519
- name: nameWithIndex,
2520
- attribute,
2521
- index,
2522
- isOpen: collapseToOpen === key,
2523
- mainField,
2524
- onMoveItem: handleMoveComponentField,
2525
- onClickToggle: handleToggle(key),
2526
- onDeleteComponent: () => {
2527
- removeFieldRow(name2, index);
2528
- toggleCollapses();
2529
- },
2530
- toggleCollapses,
2531
- onCancel: handleCancel,
2532
- onDropItem: handleDropItem,
2533
- onGrabItem: handleGrabItem,
2534
- children: layout.map((row, index2) => {
2535
- return /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
2536
- const completeFieldName = `${nameWithIndex}.${field.name}`;
2537
- return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
2538
- }) }, index2);
2539
- })
2540
- }
2541
- )
2542
- },
2543
- key
2544
- );
2545
- }) }),
2546
- /* @__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({
2547
- id: getTranslation("containers.EditView.add.new-entry"),
2548
- defaultMessage: "Add an entry"
2549
- }) }) }) })
2550
- ] })
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
+ )
2551
2591
  ] });
2552
2592
  };
2593
+ const AccordionRoot = styled(Accordion.Root)`
2594
+ border: 1px solid
2595
+ ${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
2596
+ `;
2553
2597
  const TextButtonCustom = styled(TextButton)`
2554
- height: 100%;
2555
2598
  width: 100%;
2556
- border-radius: 0 0 4px 4px;
2557
2599
  display: flex;
2558
2600
  justify-content: center;
2559
- span {
2560
- font-weight: 600;
2561
- font-size: 14px;
2562
- }
2563
- `;
2564
- const AccordionFooter = styled(Box)`
2565
- overflow: hidden;
2566
- border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
2567
- border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
2568
- border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
2569
- border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
2570
- `;
2571
- const AccordionContent = styled(Box)`
2572
- border-bottom: none;
2573
-
2574
- /* add the borders and make sure the top is transparent to avoid jumping with the hover effect */
2575
- & > div > div {
2576
- border: 1px solid ${({ theme }) => theme.colors.neutral200};
2577
- border-top-color: transparent;
2578
- }
2579
-
2580
- /* the top accordion _does_ need a border though */
2581
- & > div:first-child > div {
2582
- border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
2583
- }
2584
-
2585
- /* Reset all the border-radius' */
2586
- & > div > div,
2587
- & > div > div > div {
2588
- border-radius: unset;
2589
- }
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]};
2590
2604
 
2591
- /* Give the border radius back to the first accordion */
2592
- & > div:first-child > div,
2593
- & > div:first-child > div > div {
2594
- border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
2595
- }
2596
-
2597
- & > div > div[data-strapi-expanded='true'] {
2598
- border: 1px solid ${({ theme }) => theme.colors.primary600};
2599
- }
2600
- `;
2601
- const AccordionGroup = ({ children, error }) => {
2602
- return /* @__PURE__ */ jsxs(KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: [
2603
- children,
2604
- error && /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: error }) })
2605
- ] });
2606
- };
2607
- const CustomIconButton$1 = styled(IconButton)`
2608
- background-color: transparent;
2605
+ &:not([disabled]) {
2606
+ cursor: pointer;
2609
2607
 
2610
- svg {
2611
- path {
2612
- fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
2608
+ &:hover {
2609
+ background-color: ${(props) => props.theme.colors.primary100};
2613
2610
  }
2614
2611
  }
2615
2612
 
2616
- &:hover {
2617
- svg {
2618
- path {
2619
- fill: ${({ theme }) => theme.colors.primary600};
2620
- }
2621
- }
2613
+ span {
2614
+ font-weight: 600;
2615
+ font-size: 1.4rem;
2616
+ line-height: 2.4rem;
2622
2617
  }
2623
- `;
2624
- const ActionsFlex$1 = styled(Flex)`
2625
- & .drag-handle {
2626
- background: unset;
2627
2618
 
2628
- svg {
2629
- path {
2630
- fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : void 0};
2631
- }
2632
- }
2633
-
2634
- &:hover {
2635
- svg {
2636
- path {
2637
- /* keeps the hover style of the accordion */
2638
- fill: ${({ theme }) => theme.colors.primary600};
2639
- }
2640
- }
2641
- }
2619
+ @media (prefers-reduced-motion: no-preference) {
2620
+ transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
2642
2621
  }
2643
2622
  `;
2644
2623
  const Component = ({
2645
2624
  disabled,
2646
2625
  index,
2647
- isOpen,
2648
2626
  name: name2,
2649
2627
  mainField = {
2650
2628
  name: "id",
2651
2629
  type: "integer"
2652
2630
  },
2653
2631
  children,
2654
- onClickToggle,
2655
2632
  onDeleteComponent,
2656
2633
  toggleCollapses,
2634
+ __temp_key__,
2657
2635
  ...dragProps
2658
2636
  }) => {
2659
2637
  const { formatMessage } = useIntl();
@@ -2678,50 +2656,44 @@ const Component = ({
2678
2656
  dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
2679
2657
  }, [dragPreviewRef, index]);
2680
2658
  const composedAccordionRefs = useComposedRefs(accordionRef, dragRef);
2681
- const composedBoxRefs = useComposedRefs(boxRef, dropRef);
2682
- return /* @__PURE__ */ jsx(Box, { ref: (ref) => composedBoxRefs(ref), children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
2683
- /* @__PURE__ */ jsx(
2684
- AccordionToggle,
2685
- {
2686
- action: disabled ? null : /* @__PURE__ */ jsxs(ActionsFlex$1, { gap: 0, expanded: isOpen, children: [
2687
- /* @__PURE__ */ jsx(
2688
- CustomIconButton$1,
2689
- {
2690
- expanded: isOpen,
2691
- borderWidth: 0,
2692
- onClick: onDeleteComponent,
2693
- label: formatMessage({
2694
- id: getTranslation("containers.Edit.delete"),
2695
- defaultMessage: "Delete"
2696
- }),
2697
- icon: /* @__PURE__ */ jsx(Trash, {})
2698
- }
2699
- ),
2700
- /* @__PURE__ */ jsx(
2701
- IconButton,
2702
- {
2703
- className: "drag-handle",
2704
- ref: composedAccordionRefs,
2705
- forwardedAs: "div",
2706
- role: "button",
2707
- borderWidth: 0,
2708
- tabIndex: 0,
2709
- onClick: (e) => e.stopPropagation(),
2710
- "data-handler-id": handlerId,
2711
- label: formatMessage({
2712
- id: getTranslation("components.DragHandle-label"),
2713
- defaultMessage: "Drag"
2714
- }),
2715
- onKeyDown: handleKeyDown,
2716
- children: /* @__PURE__ */ jsx(Drag, {})
2717
- }
2718
- )
2719
- ] }),
2720
- title: displayValue,
2721
- togglePosition: "left"
2722
- }
2723
- ),
2724
- /* @__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(
2725
2697
  Flex,
2726
2698
  {
2727
2699
  direction: "column",
@@ -2735,7 +2707,7 @@ const Component = ({
2735
2707
  ] }) });
2736
2708
  };
2737
2709
  const Preview$1 = () => {
2738
- return /* @__PURE__ */ jsx(StyledSpan, { as: "span", padding: 6, background: "primary100" });
2710
+ return /* @__PURE__ */ jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
2739
2711
  };
2740
2712
  const StyledSpan = styled(Box)`
2741
2713
  display: block;
@@ -2761,29 +2733,15 @@ const ComponentInput = ({
2761
2733
  const data = transformDocument(schema, components)(form);
2762
2734
  field.onChange(name2, data);
2763
2735
  };
2764
- return /* @__PURE__ */ jsxs(Box, { children: [
2736
+ return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, required, children: [
2765
2737
  /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
2766
- /* @__PURE__ */ jsxs(Flex, { paddingBottom: 1, children: [
2767
- /* @__PURE__ */ jsxs(
2768
- Typography,
2769
- {
2770
- textColor: "neutral800",
2771
- htmlFor: name2,
2772
- variant: "pi",
2773
- fontWeight: "bold",
2774
- as: "label",
2775
- children: [
2776
- label,
2777
- attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
2778
- " (",
2779
- Array.isArray(field.value) ? field.value.length : 0,
2780
- ")"
2781
- ] }),
2782
- required && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: "*" })
2783
- ]
2784
- }
2785
- ),
2786
- 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
+ ] })
2787
2745
  ] }),
2788
2746
  showResetComponent && /* @__PURE__ */ jsx(
2789
2747
  IconButton,
@@ -2792,21 +2750,21 @@ const ComponentInput = ({
2792
2750
  id: getTranslation("components.reset-entry"),
2793
2751
  defaultMessage: "Reset Entry"
2794
2752
  }),
2795
- icon: /* @__PURE__ */ jsx(Trash, {}),
2796
2753
  borderWidth: 0,
2797
2754
  onClick: () => {
2798
2755
  field.onChange(name2, null);
2799
- }
2756
+ },
2757
+ children: /* @__PURE__ */ jsx(Trash, {})
2800
2758
  }
2801
2759
  )
2802
2760
  ] }),
2803
- /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
2804
- !attribute.repeatable && !field.value && /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
2805
- !attribute.repeatable && field.value ? /* @__PURE__ */ jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
2806
- attribute.repeatable && /* @__PURE__ */ jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children })
2807
- ] })
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, {})
2808
2765
  ] });
2809
2766
  };
2767
+ const MemoizedComponentInput = React.memo(ComponentInput);
2810
2768
  const AddComponentButton = ({
2811
2769
  hasError,
2812
2770
  isDisabled,
@@ -2826,10 +2784,10 @@ const AddComponentButton = ({
2826
2784
  paddingLeft: 4,
2827
2785
  paddingRight: 4,
2828
2786
  style: { cursor: isDisabled ? "not-allowed" : "pointer" },
2829
- children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: 2, children: [
2787
+ children: /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
2830
2788
  /* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
2831
2789
  /* @__PURE__ */ jsx(
2832
- Typography,
2790
+ AddComponentTitle,
2833
2791
  {
2834
2792
  variant: "pi",
2835
2793
  fontWeight: "bold",
@@ -2853,13 +2811,14 @@ const StyledAddIcon = styled(PlusCircle)`
2853
2811
  fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
2854
2812
  }
2855
2813
  `;
2814
+ const AddComponentTitle = styled(Typography)``;
2856
2815
  const StyledButton = styled(BaseButton)`
2857
2816
  border-radius: 26px;
2858
2817
  border-color: ${({ theme }) => theme.colors.neutral150};
2859
2818
  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
2860
2819
 
2861
2820
  &:hover {
2862
- ${Typography} {
2821
+ ${AddComponentTitle} {
2863
2822
  color: ${({ theme }) => theme.colors.primary600};
2864
2823
  }
2865
2824
 
@@ -2873,7 +2832,7 @@ const StyledButton = styled(BaseButton)`
2873
2832
  }
2874
2833
  }
2875
2834
  &:active {
2876
- ${Typography} {
2835
+ ${AddComponentTitle} {
2877
2836
  color: ${({ theme }) => theme.colors.primary600};
2878
2837
  }
2879
2838
  ${StyledAddIcon} {
@@ -2890,27 +2849,15 @@ const ComponentCategory = ({
2890
2849
  category,
2891
2850
  components = [],
2892
2851
  variant = "primary",
2893
- isOpen,
2894
- onAddComponent,
2895
- onToggle
2852
+ onAddComponent
2896
2853
  }) => {
2897
2854
  const { formatMessage } = useIntl();
2898
- const handleToggle = () => {
2899
- onToggle(category);
2900
- };
2901
- return /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
2902
- /* @__PURE__ */ jsx(
2903
- AccordionToggle,
2904
- {
2905
- variant,
2906
- title: formatMessage({ id: category, defaultMessage: category }),
2907
- togglePosition: "left"
2908
- }
2909
- ),
2910
- /* @__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(
2911
2858
  ComponentBox,
2912
2859
  {
2913
- as: "button",
2860
+ tag: "button",
2914
2861
  type: "button",
2915
2862
  background: "neutral100",
2916
2863
  justifyContent: "center",
@@ -2920,34 +2867,32 @@ const ComponentCategory = ({
2920
2867
  shrink: 0,
2921
2868
  borderColor: "neutral200",
2922
2869
  children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
2923
- /* @__PURE__ */ jsx(ComponentIcon, { icon }),
2924
- /* @__PURE__ */ jsx(Typography, { 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 })
2925
2872
  ] })
2926
2873
  },
2927
2874
  uid
2928
- )) }) }) })
2875
+ )) }) })
2929
2876
  ] });
2930
2877
  };
2931
- const Grid = styled.div`
2878
+ const Grid = styled(Box)`
2932
2879
  display: grid;
2933
2880
  grid-template-columns: repeat(auto-fit, 14rem);
2934
2881
  grid-gap: ${({ theme }) => theme.spaces[1]};
2935
2882
  `;
2936
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
+
2937
2891
  &:focus,
2938
2892
  &:hover {
2939
2893
  border: 1px solid ${({ theme }) => theme.colors.primary200};
2940
2894
  background: ${({ theme }) => theme.colors.primary100};
2941
-
2942
- ${Typography} {
2943
- color: ${({ theme }) => theme.colors.primary600};
2944
- }
2945
-
2946
- /* > Flex > ComponentIcon */
2947
- > div > div:first-child {
2948
- background: ${({ theme }) => theme.colors.primary200};
2949
- color: ${({ theme }) => theme.colors.primary600};
2950
- }
2895
+ color: ${({ theme }) => theme.colors.primary600};
2951
2896
  }
2952
2897
  `;
2953
2898
  const ComponentPicker = ({
@@ -2956,19 +2901,8 @@ const ComponentPicker = ({
2956
2901
  onClickAddComponent
2957
2902
  }) => {
2958
2903
  const { formatMessage } = useIntl();
2959
- const [categoryToOpen, setCategoryToOpen] = React.useState("");
2960
- React.useEffect(() => {
2961
- const categoryKeys = Object.keys(dynamicComponentsByCategory);
2962
- if (isOpen && categoryKeys.length > 0) {
2963
- setCategoryToOpen(categoryKeys[0]);
2964
- }
2965
- }, [isOpen, dynamicComponentsByCategory]);
2966
2904
  const handleAddComponentToDz = (componentUid) => () => {
2967
2905
  onClickAddComponent(componentUid);
2968
- setCategoryToOpen("");
2969
- };
2970
- const handleClickToggle = (categoryName) => {
2971
- setCategoryToOpen((currentCat) => currentCat === categoryName ? "" : categoryName);
2972
2906
  };
2973
2907
  if (!isOpen) {
2974
2908
  return null;
@@ -2989,14 +2923,12 @@ const ComponentPicker = ({
2989
2923
  id: getTranslation("components.DynamicZone.ComponentPicker-label"),
2990
2924
  defaultMessage: "Pick one component"
2991
2925
  }) }) }),
2992
- /* @__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(
2993
2927
  ComponentCategory,
2994
2928
  {
2995
2929
  category,
2996
2930
  components,
2997
2931
  onAddComponent: handleAddComponentToDz,
2998
- isOpen: category === categoryToOpen,
2999
- onToggle: handleClickToggle,
3000
2932
  variant: index % 2 === 1 ? "primary" : "secondary"
3001
2933
  },
3002
2934
  category
@@ -3011,27 +2943,21 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
3011
2943
  id: "components.NotAllowedInput.text",
3012
2944
  defaultMessage: "No permissions to see this field"
3013
2945
  });
3014
- return /* @__PURE__ */ jsx(
3015
- TextInput,
3016
- {
3017
- disabled: true,
3018
- label,
3019
- id: name2,
3020
- hint,
3021
- name: name2,
3022
- placeholder,
3023
- required,
3024
- startAction: /* @__PURE__ */ jsx(StyledIcon, {}),
3025
- type: "text",
3026
- value: ""
3027
- }
3028
- );
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
+ ] });
3029
2960
  };
3030
- const StyledIcon = styled(EyeStriked)`
3031
- & > path {
3032
- fill: ${({ theme }) => theme.colors.neutral600};
3033
- }
3034
- `;
3035
2961
  function useDebounce(value, delay) {
3036
2962
  const [debouncedValue, setDebouncedValue] = useState(value);
3037
2963
  useEffect(() => {
@@ -3084,188 +3010,193 @@ const uidApi = contentManagerApi.injectEndpoints({
3084
3010
  });
3085
3011
  const { useGenerateUIDMutation, useGetDefaultUIDQuery, useGetAvailabilityQuery } = uidApi;
3086
3012
  const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
3087
- const UIDInput = React.forwardRef((props, ref) => {
3088
- const { model, id } = useDoc();
3089
- const allFormValues = useForm("InputUID", (form) => form.values);
3090
- const [availability, setAvailability] = React.useState();
3091
- const [showRegenerate, setShowRegenerate] = React.useState(false);
3092
- const field = useField(props.name);
3093
- const debouncedValue = useDebounce(field.value, 300);
3094
- const { toggleNotification } = useNotification();
3095
- const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
3096
- const { formatMessage } = useIntl();
3097
- const [{ query }] = useQueryParams();
3098
- const params = React.useMemo(() => buildValidParams(query), [query]);
3099
- const {
3100
- data: defaultGeneratedUID,
3101
- isLoading: isGeneratingDefaultUID,
3102
- error: apiError
3103
- } = useGetDefaultUIDQuery(
3104
- {
3105
- contentTypeUID: model,
3106
- field: props.name,
3107
- data: {
3108
- id: id ?? "",
3109
- ...allFormValues
3110
- },
3111
- params
3112
- },
3113
- {
3114
- skip: field.value || !props.required
3115
- }
3116
- );
3117
- React.useEffect(() => {
3118
- if (apiError) {
3119
- toggleNotification({
3120
- type: "warning",
3121
- message: formatAPIError(apiError)
3122
- });
3123
- }
3124
- }, [apiError, formatAPIError, toggleNotification]);
3125
- React.useEffect(() => {
3126
- if (defaultGeneratedUID && field.value === void 0) {
3127
- field.onChange(props.name, defaultGeneratedUID);
3128
- }
3129
- }, [defaultGeneratedUID, field, props.name]);
3130
- const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
3131
- const handleRegenerateClick = async () => {
3132
- try {
3133
- const res = await generateUID({
3013
+ const UIDInput = React.forwardRef(
3014
+ ({ hint, label, labelAction, name: name2, required, ...props }, ref) => {
3015
+ const { model, id } = useDoc();
3016
+ const allFormValues = useForm("InputUID", (form) => form.values);
3017
+ const [availability, setAvailability] = React.useState();
3018
+ const [showRegenerate, setShowRegenerate] = React.useState(false);
3019
+ const field = useField(name2);
3020
+ const debouncedValue = useDebounce(field.value, 300);
3021
+ const { toggleNotification } = useNotification();
3022
+ const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
3023
+ const { formatMessage } = useIntl();
3024
+ const [{ query }] = useQueryParams();
3025
+ const params = React.useMemo(() => buildValidParams(query), [query]);
3026
+ const {
3027
+ data: defaultGeneratedUID,
3028
+ isLoading: isGeneratingDefaultUID,
3029
+ error: apiError
3030
+ } = useGetDefaultUIDQuery(
3031
+ {
3134
3032
  contentTypeUID: model,
3135
- field: props.name,
3136
- data: { id: id ?? "", ...allFormValues },
3033
+ field: name2,
3034
+ data: {
3035
+ id: id ?? "",
3036
+ ...allFormValues
3037
+ },
3137
3038
  params
3138
- });
3139
- if ("data" in res) {
3140
- field.onChange(props.name, res.data);
3141
- } else {
3039
+ },
3040
+ {
3041
+ skip: field.value || !required
3042
+ }
3043
+ );
3044
+ React.useEffect(() => {
3045
+ if (apiError) {
3142
3046
  toggleNotification({
3143
- type: "danger",
3144
- message: formatAPIError(res.error)
3047
+ type: "warning",
3048
+ message: formatAPIError(apiError)
3145
3049
  });
3146
3050
  }
3147
- } catch (err) {
3148
- toggleNotification({
3149
- type: "danger",
3150
- message: formatMessage({
3151
- id: "notification.error",
3152
- defaultMessage: "An error occurred."
3153
- })
3154
- });
3155
- }
3156
- };
3157
- const {
3158
- data: availabilityData,
3159
- isLoading: isCheckingAvailability,
3160
- error: availabilityError
3161
- } = useGetAvailabilityQuery(
3162
- {
3163
- contentTypeUID: model,
3164
- field: props.name,
3165
- value: debouncedValue ? debouncedValue.trim() : "",
3166
- params
3167
- },
3168
- {
3169
- skip: !Boolean(
3170
- debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
3171
- )
3172
- }
3173
- );
3174
- React.useEffect(() => {
3175
- if (availabilityError) {
3176
- toggleNotification({
3177
- type: "warning",
3178
- message: formatAPIError(availabilityError)
3179
- });
3180
- }
3181
- }, [availabilityError, formatAPIError, toggleNotification]);
3182
- React.useEffect(() => {
3183
- setAvailability(availabilityData);
3184
- let timer;
3185
- if (availabilityData?.isAvailable) {
3186
- timer = window.setTimeout(() => {
3187
- setAvailability(void 0);
3188
- }, 4e3);
3189
- }
3190
- return () => {
3191
- if (timer) {
3192
- clearTimeout(timer);
3051
+ }, [apiError, formatAPIError, toggleNotification]);
3052
+ React.useEffect(() => {
3053
+ if (defaultGeneratedUID && field.value === void 0) {
3054
+ field.onChange(name2, defaultGeneratedUID);
3055
+ }
3056
+ }, [defaultGeneratedUID, field, name2]);
3057
+ const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
3058
+ const handleRegenerateClick = async () => {
3059
+ try {
3060
+ const res = await generateUID({
3061
+ contentTypeUID: model,
3062
+ field: name2,
3063
+ data: { id: id ?? "", ...allFormValues },
3064
+ params
3065
+ });
3066
+ if ("data" in res) {
3067
+ field.onChange(name2, res.data);
3068
+ } else {
3069
+ toggleNotification({
3070
+ type: "danger",
3071
+ message: formatAPIError(res.error)
3072
+ });
3073
+ }
3074
+ } catch (err) {
3075
+ toggleNotification({
3076
+ type: "danger",
3077
+ message: formatMessage({
3078
+ id: "notification.error",
3079
+ defaultMessage: "An error occurred."
3080
+ })
3081
+ });
3193
3082
  }
3194
3083
  };
3195
- }, [availabilityData]);
3196
- const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
3197
- const fieldRef = useFocusInputField(props.name);
3198
- const composedRefs = useComposedRefs(ref, fieldRef);
3199
- return (
3200
- // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
3201
- /* @__PURE__ */ jsx(
3202
- TextInput,
3084
+ const {
3085
+ data: availabilityData,
3086
+ isLoading: isCheckingAvailability,
3087
+ error: availabilityError
3088
+ } = useGetAvailabilityQuery(
3203
3089
  {
3204
- ref: composedRefs,
3205
- disabled: props.disabled,
3206
- error: field.error,
3207
- endAction: /* @__PURE__ */ jsxs(Flex, { position: "relative", gap: 1, children: [
3208
- availability && !showRegenerate && /* @__PURE__ */ jsxs(
3209
- TextValidation,
3210
- {
3211
- alignItems: "center",
3212
- gap: 1,
3213
- justifyContent: "flex-end",
3214
- available: !!availability?.isAvailable,
3215
- "data-not-here-outer": true,
3216
- position: "absolute",
3217
- pointerEvents: "none",
3218
- right: 6,
3219
- width: "100px",
3220
- children: [
3221
- availability?.isAvailable ? /* @__PURE__ */ jsx(CheckCircle, {}) : /* @__PURE__ */ jsx(WarningCircle, {}),
3222
- /* @__PURE__ */ jsx(
3223
- Typography,
3224
- {
3225
- textColor: availability.isAvailable ? "success600" : "danger600",
3226
- variant: "pi",
3227
- children: formatMessage(
3228
- availability.isAvailable ? {
3229
- id: "content-manager.components.uid.available",
3230
- defaultMessage: "Available"
3231
- } : {
3232
- id: "content-manager.components.uid.unavailable",
3233
- defaultMessage: "Unavailable"
3234
- }
3235
- )
3236
- }
3237
- )
3238
- ]
3239
- }
3240
- ),
3241
- !props.disabled && /* @__PURE__ */ jsxs(Fragment, { children: [
3242
- showRegenerate && /* @__PURE__ */ jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsx(Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
3243
- id: "content-manager.components.uid.regenerate",
3244
- defaultMessage: "Regenerate"
3245
- }) }) }),
3246
- /* @__PURE__ */ jsx(
3247
- FieldActionWrapper,
3090
+ contentTypeUID: model,
3091
+ field: name2,
3092
+ value: debouncedValue ? debouncedValue.trim() : "",
3093
+ params
3094
+ },
3095
+ {
3096
+ skip: !Boolean(
3097
+ debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
3098
+ )
3099
+ }
3100
+ );
3101
+ React.useEffect(() => {
3102
+ if (availabilityError) {
3103
+ toggleNotification({
3104
+ type: "warning",
3105
+ message: formatAPIError(availabilityError)
3106
+ });
3107
+ }
3108
+ }, [availabilityError, formatAPIError, toggleNotification]);
3109
+ React.useEffect(() => {
3110
+ setAvailability(availabilityData);
3111
+ let timer;
3112
+ if (availabilityData?.isAvailable) {
3113
+ timer = window.setTimeout(() => {
3114
+ setAvailability(void 0);
3115
+ }, 4e3);
3116
+ }
3117
+ return () => {
3118
+ if (timer) {
3119
+ clearTimeout(timer);
3120
+ }
3121
+ };
3122
+ }, [availabilityData]);
3123
+ const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
3124
+ const fieldRef = useFocusInputField(name2);
3125
+ const composedRefs = useComposedRefs(ref, fieldRef);
3126
+ return /* @__PURE__ */ jsxs(Field.Root, { hint, name: name2, error: field.error, required, children: [
3127
+ /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
3128
+ /* @__PURE__ */ jsx(
3129
+ TextInput,
3130
+ {
3131
+ ref: composedRefs,
3132
+ disabled: props.disabled,
3133
+ endAction: /* @__PURE__ */ jsxs(Flex, { position: "relative", gap: 1, children: [
3134
+ availability && !showRegenerate && /* @__PURE__ */ jsxs(
3135
+ TextValidation,
3248
3136
  {
3249
- onClick: handleRegenerateClick,
3250
- label: formatMessage({
3251
- id: "content-manager.components.uid.regenerate",
3252
- defaultMessage: "Regenerate"
3253
- }),
3254
- onMouseEnter: () => setShowRegenerate(true),
3255
- onMouseLeave: () => setShowRegenerate(false),
3256
- children: isLoading ? /* @__PURE__ */ jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(ArrowClockwise, {})
3137
+ alignItems: "center",
3138
+ gap: 1,
3139
+ justifyContent: "flex-end",
3140
+ $available: !!availability?.isAvailable,
3141
+ "data-not-here-outer": true,
3142
+ position: "absolute",
3143
+ pointerEvents: "none",
3144
+ right: 6,
3145
+ width: "100px",
3146
+ children: [
3147
+ availability?.isAvailable ? /* @__PURE__ */ jsx(CheckCircle, {}) : /* @__PURE__ */ jsx(WarningCircle, {}),
3148
+ /* @__PURE__ */ jsx(
3149
+ Typography,
3150
+ {
3151
+ textColor: availability.isAvailable ? "success600" : "danger600",
3152
+ variant: "pi",
3153
+ children: formatMessage(
3154
+ availability.isAvailable ? {
3155
+ id: "content-manager.components.uid.available",
3156
+ defaultMessage: "Available"
3157
+ } : {
3158
+ id: "content-manager.components.uid.unavailable",
3159
+ defaultMessage: "Unavailable"
3160
+ }
3161
+ )
3162
+ }
3163
+ )
3164
+ ]
3257
3165
  }
3258
- )
3259
- ] })
3260
- ] }),
3261
- onChange: field.onChange,
3262
- value: field.value ?? "",
3263
- ...props
3264
- }
3265
- )
3266
- );
3267
- });
3268
- const FieldActionWrapper = styled(FieldAction)`
3166
+ ),
3167
+ !props.disabled && /* @__PURE__ */ jsxs(Fragment, { children: [
3168
+ showRegenerate && /* @__PURE__ */ jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsx(Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
3169
+ id: "content-manager.components.uid.regenerate",
3170
+ defaultMessage: "Regenerate"
3171
+ }) }) }),
3172
+ /* @__PURE__ */ jsx(
3173
+ FieldActionWrapper,
3174
+ {
3175
+ onClick: handleRegenerateClick,
3176
+ label: formatMessage({
3177
+ id: "content-manager.components.uid.regenerate",
3178
+ defaultMessage: "Regenerate"
3179
+ }),
3180
+ onMouseEnter: () => setShowRegenerate(true),
3181
+ onMouseLeave: () => setShowRegenerate(false),
3182
+ children: isLoading ? /* @__PURE__ */ jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(ArrowClockwise, {})
3183
+ }
3184
+ )
3185
+ ] })
3186
+ ] }),
3187
+ onChange: field.onChange,
3188
+ value: field.value ?? "",
3189
+ ...props
3190
+ }
3191
+ ),
3192
+ /* @__PURE__ */ jsx(Field.Error, {}),
3193
+ /* @__PURE__ */ jsx(Field.Hint, {})
3194
+ ] });
3195
+ }
3196
+ );
3197
+ const FieldActionWrapper = styled(Field.Action)`
3198
+ width: 1.6rem;
3199
+
3269
3200
  svg {
3270
3201
  height: 1.6rem;
3271
3202
  width: 1.6rem;
@@ -3286,7 +3217,7 @@ const TextValidation = styled(Flex)`
3286
3217
  width: 1.2rem;
3287
3218
 
3288
3219
  path {
3289
- fill: ${({ theme, available }) => available ? theme.colors.success600 : theme.colors.danger600};
3220
+ fill: ${({ theme, $available }) => $available ? theme.colors.success600 : theme.colors.danger600};
3290
3221
  }
3291
3222
  }
3292
3223
  `;
@@ -3301,6 +3232,7 @@ const rotation = keyframes`
3301
3232
  const LoadingWrapper = styled(Flex)`
3302
3233
  animation: ${rotation} 2s infinite linear;
3303
3234
  `;
3235
+ const MemoizedUIDInput = React.memo(UIDInput);
3304
3236
  const md = new Markdown({
3305
3237
  html: true,
3306
3238
  // Enable HTML tags in source
@@ -3635,7 +3567,7 @@ const Editor = React.forwardRef(
3635
3567
  [editorRef]
3636
3568
  );
3637
3569
  return /* @__PURE__ */ jsxs(EditorAndPreviewWrapper, { children: [
3638
- /* @__PURE__ */ jsx(EditorStylesContainer, { isExpandMode, disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsx("textarea", { ref: textareaRef }) }),
3570
+ /* @__PURE__ */ jsx(EditorStylesContainer, { $isExpandMode: isExpandMode, $disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsx("textarea", { ref: textareaRef }) }),
3639
3571
  isPreviewMode && /* @__PURE__ */ jsx(PreviewWysiwyg, { data: value })
3640
3572
  ] });
3641
3573
  }
@@ -3645,7 +3577,7 @@ const EditorAndPreviewWrapper = styled.div`
3645
3577
  height: calc(100% - 48px);
3646
3578
  `;
3647
3579
  const EditorStylesContainer = styled.div`
3648
- cursor: ${({ disabled }) => disabled ? "not-allowed !important" : "auto"};
3580
+ cursor: ${({ $disabled }) => $disabled ? "not-allowed !important" : "auto"};
3649
3581
  height: 100%;
3650
3582
  /* BASICS */
3651
3583
  .CodeMirror-placeholder {
@@ -3655,7 +3587,7 @@ const EditorStylesContainer = styled.div`
3655
3587
  .CodeMirror {
3656
3588
  /* Set height, width, borders, and global font properties here */
3657
3589
  font-size: 1.4rem;
3658
- height: ${({ isExpandMode }) => isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
3590
+ height: ${({ $isExpandMode }) => $isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
3659
3591
  color: ${({ theme }) => theme.colors.neutral800};
3660
3592
  direction: ltr;
3661
3593
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
@@ -4421,21 +4353,21 @@ const WysiwygNav = ({
4421
4353
  justifyContent: "space-between",
4422
4354
  borderRadius: `0.4rem 0.4rem 0 0`,
4423
4355
  children: [
4424
- /* @__PURE__ */ jsxs(StyledFlex, { children: [
4425
- /* @__PURE__ */ jsxs(SingleSelect, { disabled: true, placeholder: selectPlaceholder, size: "S", label: selectPlaceholder, children: [
4356
+ /* @__PURE__ */ jsxs(Flex, { children: [
4357
+ /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(SingleSelect, { disabled: true, placeholder: selectPlaceholder, "aria-label": selectPlaceholder, children: [
4426
4358
  /* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
4427
4359
  /* @__PURE__ */ jsx(SingleSelectOption, { value: "h2", children: "h2" }),
4428
4360
  /* @__PURE__ */ jsx(SingleSelectOption, { value: "h3", children: "h3" }),
4429
4361
  /* @__PURE__ */ jsx(SingleSelectOption, { value: "h4", children: "h4" }),
4430
4362
  /* @__PURE__ */ jsx(SingleSelectOption, { value: "h5", children: "h5" }),
4431
4363
  /* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
4432
- ] }),
4364
+ ] }) }),
4433
4365
  /* @__PURE__ */ jsxs(MainButtons, { children: [
4434
- /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", icon: /* @__PURE__ */ jsx(Bold, {}) }),
4435
- /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", icon: /* @__PURE__ */ jsx(Italic, {}) }),
4436
- /* @__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, {}) })
4437
4369
  ] }),
4438
- /* @__PURE__ */ jsx(MoreButton, { disabled: true, label: "More", icon: /* @__PURE__ */ jsx(More, {}) })
4370
+ /* @__PURE__ */ jsx(MoreButton, { disabled: true, label: "More", children: /* @__PURE__ */ jsx(More, {}) })
4439
4371
  ] }),
4440
4372
  !isExpandMode && /* @__PURE__ */ jsx(Button, { onClick: onTogglePreviewMode, variant: "tertiary", children: formatMessage({
4441
4373
  id: "components.Wysiwyg.ToggleMode.markdown-mode",
@@ -4453,13 +4385,12 @@ const WysiwygNav = ({
4453
4385
  justifyContent: "space-between",
4454
4386
  borderRadius: `0.4rem 0.4rem 0 0`,
4455
4387
  children: [
4456
- /* @__PURE__ */ jsxs(StyledFlex, { children: [
4457
- /* @__PURE__ */ jsxs(
4388
+ /* @__PURE__ */ jsxs(Flex, { children: [
4389
+ /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(
4458
4390
  SingleSelect,
4459
4391
  {
4460
4392
  placeholder: selectPlaceholder,
4461
- label: selectPlaceholder,
4462
- size: "S",
4393
+ "aria-label": selectPlaceholder,
4463
4394
  onChange: (value) => onActionClick(value, editorRef),
4464
4395
  children: [
4465
4396
  /* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
@@ -4470,7 +4401,7 @@ const WysiwygNav = ({
4470
4401
  /* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
4471
4402
  ]
4472
4403
  }
4473
- ),
4404
+ ) }),
4474
4405
  /* @__PURE__ */ jsxs(MainButtons, { children: [
4475
4406
  /* @__PURE__ */ jsx(
4476
4407
  CustomIconButton,
@@ -4478,7 +4409,7 @@ const WysiwygNav = ({
4478
4409
  onClick: () => onActionClick("Bold", editorRef),
4479
4410
  label: "Bold",
4480
4411
  name: "Bold",
4481
- icon: /* @__PURE__ */ jsx(Bold, {})
4412
+ children: /* @__PURE__ */ jsx(Bold, {})
4482
4413
  }
4483
4414
  ),
4484
4415
  /* @__PURE__ */ jsx(
@@ -4487,7 +4418,7 @@ const WysiwygNav = ({
4487
4418
  onClick: () => onActionClick("Italic", editorRef),
4488
4419
  label: "Italic",
4489
4420
  name: "Italic",
4490
- icon: /* @__PURE__ */ jsx(Italic, {})
4421
+ children: /* @__PURE__ */ jsx(Italic, {})
4491
4422
  }
4492
4423
  ),
4493
4424
  /* @__PURE__ */ jsx(
@@ -4496,19 +4427,11 @@ const WysiwygNav = ({
4496
4427
  onClick: () => onActionClick("Underline", editorRef),
4497
4428
  label: "Underline",
4498
4429
  name: "Underline",
4499
- icon: /* @__PURE__ */ jsx(Underline, {})
4430
+ children: /* @__PURE__ */ jsx(Underline, {})
4500
4431
  }
4501
4432
  )
4502
4433
  ] }),
4503
- /* @__PURE__ */ jsx(
4504
- MoreButton,
4505
- {
4506
- ref: buttonMoreRef,
4507
- onClick: handleTogglePopover,
4508
- label: "More",
4509
- icon: /* @__PURE__ */ jsx(More, {})
4510
- }
4511
- ),
4434
+ /* @__PURE__ */ jsx(MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, label: "More", children: /* @__PURE__ */ jsx(More, {}) }),
4512
4435
  visiblePopover && /* @__PURE__ */ jsx(Popover, { onDismiss: handleTogglePopover, centered: true, source: buttonMoreRef, spacing: 4, children: /* @__PURE__ */ jsxs(Flex, { children: [
4513
4436
  /* @__PURE__ */ jsxs(IconButtonGroupMargin, { children: [
4514
4437
  /* @__PURE__ */ jsx(
@@ -4517,7 +4440,7 @@ const WysiwygNav = ({
4517
4440
  onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
4518
4441
  label: "Strikethrough",
4519
4442
  name: "Strikethrough",
4520
- icon: /* @__PURE__ */ jsx(StrikeThrough, {})
4443
+ children: /* @__PURE__ */ jsx(StrikeThrough, {})
4521
4444
  }
4522
4445
  ),
4523
4446
  /* @__PURE__ */ jsx(
@@ -4526,7 +4449,7 @@ const WysiwygNav = ({
4526
4449
  onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
4527
4450
  label: "BulletList",
4528
4451
  name: "BulletList",
4529
- icon: /* @__PURE__ */ jsx(BulletList, {})
4452
+ children: /* @__PURE__ */ jsx(BulletList, {})
4530
4453
  }
4531
4454
  ),
4532
4455
  /* @__PURE__ */ jsx(
@@ -4535,7 +4458,7 @@ const WysiwygNav = ({
4535
4458
  onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
4536
4459
  label: "NumberList",
4537
4460
  name: "NumberList",
4538
- icon: /* @__PURE__ */ jsx(NumberList, {})
4461
+ children: /* @__PURE__ */ jsx(NumberList, {})
4539
4462
  }
4540
4463
  )
4541
4464
  ] }),
@@ -4546,7 +4469,7 @@ const WysiwygNav = ({
4546
4469
  onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
4547
4470
  label: "Code",
4548
4471
  name: "Code",
4549
- icon: /* @__PURE__ */ jsx(Code, {})
4472
+ children: /* @__PURE__ */ jsx(Code, {})
4550
4473
  }
4551
4474
  ),
4552
4475
  /* @__PURE__ */ jsx(
@@ -4558,7 +4481,7 @@ const WysiwygNav = ({
4558
4481
  },
4559
4482
  label: "Image",
4560
4483
  name: "Image",
4561
- icon: /* @__PURE__ */ jsx(Image$1, {})
4484
+ children: /* @__PURE__ */ jsx(Image$1, {})
4562
4485
  }
4563
4486
  ),
4564
4487
  /* @__PURE__ */ jsx(
@@ -4567,7 +4490,7 @@ const WysiwygNav = ({
4567
4490
  onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
4568
4491
  label: "Link",
4569
4492
  name: "Link",
4570
- icon: /* @__PURE__ */ jsx(Link$1, {})
4493
+ children: /* @__PURE__ */ jsx(Link$1, {})
4571
4494
  }
4572
4495
  ),
4573
4496
  /* @__PURE__ */ jsx(
@@ -4576,7 +4499,7 @@ const WysiwygNav = ({
4576
4499
  onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
4577
4500
  label: "Quote",
4578
4501
  name: "Quote",
4579
- icon: /* @__PURE__ */ jsx(Quotes, {})
4502
+ children: /* @__PURE__ */ jsx(Quotes, {})
4580
4503
  }
4581
4504
  )
4582
4505
  ] })
@@ -4590,19 +4513,6 @@ const WysiwygNav = ({
4590
4513
  }
4591
4514
  );
4592
4515
  };
4593
- const StyledFlex = styled(Flex)`
4594
- /* Hide the label, every input needs a label. */
4595
- label {
4596
- border: 0;
4597
- clip: rect(0 0 0 0);
4598
- height: 1px;
4599
- margin: -1px;
4600
- overflow: hidden;
4601
- padding: 0;
4602
- position: absolute;
4603
- width: 1px;
4604
- }
4605
- `;
4606
4516
  const Wysiwyg = React.forwardRef(
4607
4517
  ({ hint, disabled, label, name: name2, placeholder, required, labelAction }, forwardedRef) => {
4608
4518
  const field = useField(name2);
@@ -4667,9 +4577,9 @@ const Wysiwyg = React.forwardRef(
4667
4577
  insertFile(editorRef, formattedFiles);
4668
4578
  setMediaLibVisible(false);
4669
4579
  };
4670
- return /* @__PURE__ */ jsxs(Field, { name: name2, hint, error: field.error, required, children: [
4580
+ return /* @__PURE__ */ jsxs(Field.Root, { name: name2, hint, error: field.error, required, children: [
4671
4581
  /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
4672
- /* @__PURE__ */ jsx(FieldLabel, { action: labelAction, children: label }),
4582
+ /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
4673
4583
  /* @__PURE__ */ jsxs(
4674
4584
  EditorLayout,
4675
4585
  {
@@ -4710,14 +4620,15 @@ const Wysiwyg = React.forwardRef(
4710
4620
  ]
4711
4621
  }
4712
4622
  ),
4713
- /* @__PURE__ */ jsx(FieldHint, {}),
4714
- /* @__PURE__ */ jsx(FieldError, {})
4623
+ /* @__PURE__ */ jsx(Field.Hint, {}),
4624
+ /* @__PURE__ */ jsx(Field.Error, {})
4715
4625
  ] }),
4716
4626
  mediaLibVisible && // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.
4717
4627
  /* @__PURE__ */ jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
4718
4628
  ] });
4719
4629
  }
4720
4630
  );
4631
+ const MemoizedWysiwyg = React.memo(Wysiwyg);
4721
4632
  const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4722
4633
  const { id } = useDoc();
4723
4634
  const isFormDisabled = useForm("InputRenderer", (state) => state.disabled);
@@ -4767,10 +4678,10 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4767
4678
  }
4768
4679
  switch (props.type) {
4769
4680
  case "blocks":
4770
- return /* @__PURE__ */ jsx(BlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4681
+ return /* @__PURE__ */ jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4771
4682
  case "component":
4772
4683
  return /* @__PURE__ */ jsx(
4773
- ComponentInput,
4684
+ MemoizedComponentInput,
4774
4685
  {
4775
4686
  ...props,
4776
4687
  hint,
@@ -4782,11 +4693,11 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
4782
4693
  case "dynamiczone":
4783
4694
  return /* @__PURE__ */ jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
4784
4695
  case "relation":
4785
- return /* @__PURE__ */ jsx(RelationsField, { ...props, hint, disabled: fieldIsDisabled });
4696
+ return /* @__PURE__ */ jsx(MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
4786
4697
  case "richtext":
4787
- return /* @__PURE__ */ jsx(Wysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4698
+ return /* @__PURE__ */ jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4788
4699
  case "uid":
4789
- return /* @__PURE__ */ jsx(UIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4700
+ return /* @__PURE__ */ jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
4790
4701
  case "enumeration":
4791
4702
  return /* @__PURE__ */ jsx(
4792
4703
  InputRenderer$1,
@@ -4858,6 +4769,7 @@ const getMinMax = (attribute) => {
4858
4769
  return { maximum: void 0, minimum: void 0 };
4859
4770
  }
4860
4771
  };
4772
+ const MemoizedInputRenderer = memo(InputRenderer);
4861
4773
  const DynamicComponent = ({
4862
4774
  componentUid,
4863
4775
  disabled,
@@ -4871,7 +4783,6 @@ const DynamicComponent = ({
4871
4783
  dynamicComponentsByCategory = {},
4872
4784
  onAddComponent
4873
4785
  }) => {
4874
- const [isOpen, setIsOpen] = React.useState(true);
4875
4786
  const { formatMessage } = useIntl();
4876
4787
  const formValues = useForm("DynamicComponent", (state) => state.values);
4877
4788
  const {
@@ -4880,7 +4791,7 @@ const DynamicComponent = ({
4880
4791
  const title = React.useMemo(() => {
4881
4792
  const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
4882
4793
  const mainFieldValue = getIn(formValues, `${name2}.${index}.${mainField}`);
4883
- const displayedValue = mainField === "id" ? "" : String(mainFieldValue).trim();
4794
+ const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
4884
4795
  const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
4885
4796
  return mainValue;
4886
4797
  }, [componentUid, components, formValues, name2, index]);
@@ -4891,9 +4802,6 @@ const DynamicComponent = ({
4891
4802
  ) ?? { icon: null, displayName: null };
4892
4803
  return { icon: icon2, displayName: displayName2 };
4893
4804
  }, [componentUid, dynamicComponentsByCategory]);
4894
- const handleToggle = () => {
4895
- setIsOpen((s) => !s);
4896
- };
4897
4805
  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
4898
4806
  type: `${ItemTypes.DYNAMIC_ZONE}_${name2}`,
4899
4807
  index,
@@ -4911,9 +4819,9 @@ const DynamicComponent = ({
4911
4819
  dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
4912
4820
  }, [dragPreviewRef, index]);
4913
4821
  const composedBoxRefs = useComposedRefs(boxRef, dropRef);
4914
- const accordionActions = disabled ? null : /* @__PURE__ */ jsxs(ActionsFlex, { gap: 0, children: [
4822
+ const accordionActions = disabled ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
4915
4823
  /* @__PURE__ */ jsx(
4916
- IconButtonCustom,
4824
+ IconButton,
4917
4825
  {
4918
4826
  borderWidth: 0,
4919
4827
  label: formatMessage(
@@ -4930,10 +4838,7 @@ const DynamicComponent = ({
4930
4838
  /* @__PURE__ */ jsx(
4931
4839
  IconButton,
4932
4840
  {
4933
- forwardedAs: "div",
4934
- role: "button",
4935
4841
  borderWidth: 0,
4936
- tabIndex: 0,
4937
4842
  onClick: (e) => e.stopPropagation(),
4938
4843
  "data-handler-id": handlerId,
4939
4844
  ref: dragRef,
@@ -4948,7 +4853,7 @@ const DynamicComponent = ({
4948
4853
  /* @__PURE__ */ jsxs(Menu.Root, { children: [
4949
4854
  /* @__PURE__ */ jsxs(Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
4950
4855
  /* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false }),
4951
- /* @__PURE__ */ jsx(VisuallyHidden, { as: "span", children: formatMessage({
4856
+ /* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children: formatMessage({
4952
4857
  id: getTranslation("components.DynamicZone.more-actions"),
4953
4858
  defaultMessage: "More actions"
4954
4859
  }) })
@@ -4977,42 +4882,28 @@ const DynamicComponent = ({
4977
4882
  ] })
4978
4883
  ] })
4979
4884
  ] });
4980
- return /* @__PURE__ */ jsxs(ComponentContainer, { as: "li", width: "100%", children: [
4885
+ const accordionTitle = title ? `${displayName} ${title}` : displayName;
4886
+ const accordionValue = React.useId();
4887
+ return /* @__PURE__ */ jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
4981
4888
  /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Rectangle, { background: "neutral200" }) }),
4982
- /* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
4983
- /* @__PURE__ */ jsx(
4984
- AccordionToggle,
4985
- {
4986
- startIcon: /* @__PURE__ */ jsx(ComponentIcon, { icon, showBackground: false, size: "S" }),
4987
- action: accordionActions,
4988
- title: `${displayName} ${title}`,
4989
- togglePosition: "left"
4990
- }
4991
- ),
4992
- /* @__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 }) => {
4993
4901
  const fieldName = `${name2}.${index}.${field.name}`;
4994
- 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);
4995
4903
  }) }, rowInd)) }) }) })
4996
- ] }) })
4904
+ ] }) }) })
4997
4905
  ] });
4998
4906
  };
4999
- const ActionsFlex = styled(Flex)`
5000
- /*
5001
- we need to remove the background from the button but we can't
5002
- wrap the element in styled because it breaks the forwardedAs which
5003
- we need for drag handler to work on firefox
5004
- */
5005
- div[role='button'] {
5006
- background: transparent;
5007
- }
5008
- `;
5009
- const IconButtonCustom = styled(IconButton)`
5010
- background-color: transparent;
5011
-
5012
- svg path {
5013
- fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
5014
- }
5015
- `;
5016
4907
  const StyledBox = styled(Box)`
5017
4908
  > div:first-child {
5018
4909
  box-shadow: ${({ theme }) => theme.shadows.tableShadow};
@@ -5083,7 +4974,7 @@ const [DynamicZoneProvider, useDynamicZone] = createContext(
5083
4974
  );
5084
4975
  const DynamicZone = ({
5085
4976
  attribute,
5086
- disabled,
4977
+ disabled: disabledProp,
5087
4978
  hint,
5088
4979
  label,
5089
4980
  labelAction,
@@ -5093,7 +4984,8 @@ const DynamicZone = ({
5093
4984
  const { max = Infinity, min = -Infinity } = attribute ?? {};
5094
4985
  const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);
5095
4986
  const [liveText, setLiveText] = React.useState("");
5096
- const { components } = useDoc();
4987
+ const { components, isLoading } = useDoc();
4988
+ const disabled = disabledProp || isLoading;
5097
4989
  const { addFieldRow, removeFieldRow, moveFieldRow } = useForm(
5098
4990
  "DynamicZone",
5099
4991
  ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
@@ -5301,19 +5193,19 @@ const DynamicZone = ({
5301
5193
  ] }) });
5302
5194
  };
5303
5195
  export {
5304
- BlocksInput as B,
5305
- ComponentInput as C,
5306
5196
  DynamicZone as D,
5307
- InputRenderer as I,
5197
+ MemoizedInputRenderer as M,
5308
5198
  NotAllowedInput as N,
5309
- UIDInput as U,
5310
- Wysiwyg as W,
5311
5199
  useDynamicZone as a,
5312
5200
  useFieldHint as b,
5313
5201
  createDefaultForm as c,
5202
+ MemoizedUIDInput as d,
5203
+ MemoizedWysiwyg as e,
5204
+ MemoizedComponentInput as f,
5205
+ MemoizedBlocksInput as g,
5314
5206
  prepareTempKeys as p,
5315
5207
  removeFieldsThatDontExistOnSchema as r,
5316
5208
  transformDocument as t,
5317
5209
  useLazyComponents as u
5318
5210
  };
5319
- //# sourceMappingURL=Field-Dlh0uGnL.mjs.map
5211
+ //# sourceMappingURL=Field-C1nUKcdS.mjs.map