@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.
- package/dist/_chunks/{CardDragPreview-DSVYodBX.js → CardDragPreview-C0QyJgRA.js} +10 -14
- package/dist/_chunks/CardDragPreview-C0QyJgRA.js.map +1 -0
- package/dist/_chunks/{CardDragPreview-ikSG4M46.mjs → CardDragPreview-DOxamsuj.mjs} +7 -9
- package/dist/_chunks/CardDragPreview-DOxamsuj.mjs.map +1 -0
- package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs → ComponentConfigurationPage-CuWgXugY.mjs} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs.map → ComponentConfigurationPage-CuWgXugY.mjs.map} +1 -1
- package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js → ComponentConfigurationPage-by0e_kNd.js} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js.map → ComponentConfigurationPage-by0e_kNd.js.map} +1 -1
- package/dist/_chunks/{ComponentIcon-BBQsYCVn.js → ComponentIcon-BXdiCGQp.js} +8 -2
- package/dist/_chunks/ComponentIcon-BXdiCGQp.js.map +1 -0
- package/dist/_chunks/{ComponentIcon-BOFnK76n.mjs → ComponentIcon-u4bIXTFY.mjs} +9 -3
- package/dist/_chunks/ComponentIcon-u4bIXTFY.mjs.map +1 -0
- package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js → EditConfigurationPage-CqBeCPGH.js} +3 -3
- package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js.map → EditConfigurationPage-CqBeCPGH.js.map} +1 -1
- package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs → EditConfigurationPage-DbI4KMyz.mjs} +3 -3
- package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs.map → EditConfigurationPage-DbI4KMyz.mjs.map} +1 -1
- package/dist/_chunks/{EditViewPage-CzOT5Kpj.js → EditViewPage-ChgloMyO.js} +7 -9
- package/dist/_chunks/EditViewPage-ChgloMyO.js.map +1 -0
- package/dist/_chunks/{EditViewPage-Bm8lgcm6.mjs → EditViewPage-dFPBya9U.mjs} +6 -6
- package/dist/_chunks/EditViewPage-dFPBya9U.mjs.map +1 -0
- package/dist/_chunks/{Field-Dlh0uGnL.mjs → Field-C1nUKcdS.mjs} +500 -608
- package/dist/_chunks/Field-C1nUKcdS.mjs.map +1 -0
- package/dist/_chunks/{Field-Caef4JjM.js → Field-dLk-vgLL.js} +552 -661
- package/dist/_chunks/Field-dLk-vgLL.js.map +1 -0
- package/dist/_chunks/{Form-BzuAjtRq.js → Form-CbXtmHC_.js} +21 -19
- package/dist/_chunks/Form-CbXtmHC_.js.map +1 -0
- package/dist/_chunks/{Form-EnaQL_6L.mjs → Form-DOlpi7Js.mjs} +21 -18
- package/dist/_chunks/Form-DOlpi7Js.mjs.map +1 -0
- package/dist/_chunks/{History-D6sbCJvo.mjs → History-BFNUAiGc.mjs} +32 -43
- package/dist/_chunks/History-BFNUAiGc.mjs.map +1 -0
- package/dist/_chunks/{History-C17LiyRg.js → History-BjDfohBr.js} +32 -44
- package/dist/_chunks/History-BjDfohBr.js.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-Ce4qs7qE.mjs → ListConfigurationPage-DDi0KqFm.mjs} +14 -14
- package/dist/_chunks/ListConfigurationPage-DDi0KqFm.mjs.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-Dks5SX6f.js → ListConfigurationPage-IQBgWTaa.js} +17 -19
- package/dist/_chunks/ListConfigurationPage-IQBgWTaa.js.map +1 -0
- package/dist/_chunks/{ListViewPage-Be7S5aKL.mjs → ListViewPage-BPjljUsH.mjs} +25 -45
- package/dist/_chunks/ListViewPage-BPjljUsH.mjs.map +1 -0
- package/dist/_chunks/{ListViewPage-BwrZrPsh.js → ListViewPage-CZYGqlvF.js} +31 -51
- package/dist/_chunks/ListViewPage-CZYGqlvF.js.map +1 -0
- package/dist/_chunks/{NoContentTypePage-Cu5r1-JT.js → NoContentTypePage-BOAI6VZ1.js} +5 -5
- package/dist/_chunks/NoContentTypePage-BOAI6VZ1.js.map +1 -0
- package/dist/_chunks/{NoContentTypePage-CIPmYQMm.mjs → NoContentTypePage-DaWw67K-.mjs} +7 -7
- package/dist/_chunks/NoContentTypePage-DaWw67K-.mjs.map +1 -0
- package/dist/_chunks/{NoPermissionsPage-DhJ7LYrr.mjs → NoPermissionsPage-CZrJH00p.mjs} +5 -6
- package/dist/_chunks/NoPermissionsPage-CZrJH00p.mjs.map +1 -0
- package/dist/_chunks/{NoPermissionsPage-C-j6TEUF.js → NoPermissionsPage-cYEtLc_e.js} +4 -5
- package/dist/_chunks/NoPermissionsPage-cYEtLc_e.js.map +1 -0
- package/dist/_chunks/{Relations-CY7AtkDA.mjs → Relations-DTowyge2.mjs} +66 -56
- package/dist/_chunks/Relations-DTowyge2.mjs.map +1 -0
- package/dist/_chunks/{Relations-Czs-uZ-s.js → Relations-DU6B7irU.js} +70 -61
- package/dist/_chunks/Relations-DU6B7irU.js.map +1 -0
- package/dist/_chunks/{en-C-V1_90f.js → en-DTULi5-d.js} +3 -1
- package/dist/_chunks/{en-C-V1_90f.js.map → en-DTULi5-d.js.map} +1 -1
- package/dist/_chunks/{en-MBPul9Su.mjs → en-GCOTL6jR.mjs} +3 -1
- package/dist/_chunks/{en-MBPul9Su.mjs.map → en-GCOTL6jR.mjs.map} +1 -1
- package/dist/_chunks/{index-DNVx8ssZ.mjs → index-BaGHmIir.mjs} +507 -202
- package/dist/_chunks/index-BaGHmIir.mjs.map +1 -0
- package/dist/_chunks/{index-X_2tafck.js → index-CCJeB7Rw.js} +502 -198
- package/dist/_chunks/index-CCJeB7Rw.js.map +1 -0
- package/dist/_chunks/{layout-Dnh0PNp9.mjs → layout-BinjszSQ.mjs} +13 -13
- package/dist/_chunks/layout-BinjszSQ.mjs.map +1 -0
- package/dist/_chunks/{layout-dBc7wN7L.js → layout-ni_L9kT1.js} +14 -16
- package/dist/_chunks/layout-ni_L9kT1.js.map +1 -0
- package/dist/_chunks/{relations-4pHtBrHJ.js → relations-CeJAJc5I.js} +2 -2
- package/dist/_chunks/{relations-4pHtBrHJ.js.map → relations-CeJAJc5I.js.map} +1 -1
- package/dist/_chunks/{relations-Dx7tMKJN.mjs → relations-c91ji5eR.mjs} +2 -2
- package/dist/_chunks/{relations-Dx7tMKJN.mjs.map → relations-c91ji5eR.mjs.map} +1 -1
- package/dist/_chunks/useDragAndDrop-DdHgKsqq.mjs.map +1 -1
- package/dist/_chunks/useDragAndDrop-J0TUUbR6.js.map +1 -1
- package/dist/_chunks/usePrev-B9w_-eYc.js +15 -0
- package/dist/_chunks/usePrev-B9w_-eYc.js.map +1 -0
- package/dist/_chunks/usePrev-DH6iah0A.mjs +16 -0
- package/dist/_chunks/usePrev-DH6iah0A.mjs.map +1 -0
- package/dist/admin/index.js +2 -1
- package/dist/admin/index.js.map +1 -1
- package/dist/admin/index.mjs +5 -4
- package/dist/admin/src/components/ComponentIcon.d.ts +6 -3
- package/dist/admin/src/content-manager.d.ts +3 -3
- package/dist/admin/src/exports.d.ts +1 -0
- package/dist/admin/src/history/services/historyVersion.d.ts +1 -1
- package/dist/admin/src/hooks/useDocument.d.ts +5 -8
- package/dist/admin/src/hooks/useDocumentActions.d.ts +24 -3
- package/dist/admin/src/hooks/useDocumentLayout.d.ts +2 -2
- package/dist/admin/src/hooks/useDragAndDrop.d.ts +4 -4
- package/dist/admin/src/hooks/useKeyboardDragAndDrop.d.ts +1 -1
- package/dist/admin/src/pages/EditView/components/DocumentActions.d.ts +3 -1
- package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksInput.d.ts +3 -3
- package/dist/admin/src/pages/EditView/components/FormInputs/Component/Input.d.ts +2 -2
- package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.d.ts +3 -5
- package/dist/admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.d.ts +1 -1
- package/dist/admin/src/pages/EditView/components/FormInputs/Relations.d.ts +10 -18
- package/dist/admin/src/pages/EditView/components/FormInputs/UID.d.ts +2 -2
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.d.ts +3 -49
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/Field.d.ts +2 -2
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygStyles.d.ts +67 -52
- package/dist/admin/src/pages/EditView/components/InputRenderer.d.ts +2 -10
- package/dist/admin/src/services/api.d.ts +2 -3
- package/dist/admin/src/services/components.d.ts +2 -2
- package/dist/admin/src/services/contentTypes.d.ts +5 -5
- package/dist/admin/src/services/documents.d.ts +29 -17
- package/dist/admin/src/services/init.d.ts +2 -2
- package/dist/admin/src/services/relations.d.ts +3 -3
- package/dist/admin/src/services/uid.d.ts +3 -3
- package/dist/admin/src/utils/api.d.ts +4 -18
- package/dist/admin/src/utils/validation.d.ts +1 -6
- package/dist/server/index.js +529 -407
- package/dist/server/index.js.map +1 -1
- package/dist/server/index.mjs +537 -415
- package/dist/server/index.mjs.map +1 -1
- package/dist/server/src/controllers/collection-types.d.ts.map +1 -1
- package/dist/server/src/controllers/single-types.d.ts.map +1 -1
- package/dist/server/src/controllers/utils/metadata.d.ts +8 -0
- package/dist/server/src/controllers/utils/metadata.d.ts.map +1 -0
- package/dist/server/src/controllers/validation/dimensions.d.ts +9 -0
- package/dist/server/src/controllers/validation/dimensions.d.ts.map +1 -0
- package/dist/server/src/controllers/validation/index.d.ts +1 -1
- package/dist/server/src/history/services/history.d.ts +2 -4
- package/dist/server/src/history/services/history.d.ts.map +1 -1
- package/dist/server/src/history/services/index.d.ts +6 -2
- package/dist/server/src/history/services/index.d.ts.map +1 -1
- package/dist/server/src/history/services/lifecycles.d.ts +9 -0
- package/dist/server/src/history/services/lifecycles.d.ts.map +1 -0
- package/dist/server/src/history/services/utils.d.ts +41 -9
- package/dist/server/src/history/services/utils.d.ts.map +1 -1
- package/dist/server/src/history/utils.d.ts +6 -2
- package/dist/server/src/history/utils.d.ts.map +1 -1
- package/dist/server/src/index.d.ts +18 -39
- package/dist/server/src/index.d.ts.map +1 -1
- package/dist/server/src/services/document-manager.d.ts +13 -12
- package/dist/server/src/services/document-manager.d.ts.map +1 -1
- package/dist/server/src/services/document-metadata.d.ts +8 -29
- package/dist/server/src/services/document-metadata.d.ts.map +1 -1
- package/dist/server/src/services/index.d.ts +18 -39
- package/dist/server/src/services/index.d.ts.map +1 -1
- package/dist/server/src/services/utils/populate.d.ts +8 -1
- package/dist/server/src/services/utils/populate.d.ts.map +1 -1
- package/dist/shared/contracts/collection-types.d.ts +14 -6
- package/dist/shared/contracts/collection-types.d.ts.map +1 -1
- package/dist/shared/contracts/relations.d.ts +2 -2
- package/dist/shared/contracts/relations.d.ts.map +1 -1
- package/package.json +13 -14
- package/dist/_chunks/CardDragPreview-DSVYodBX.js.map +0 -1
- package/dist/_chunks/CardDragPreview-ikSG4M46.mjs.map +0 -1
- package/dist/_chunks/ComponentIcon-BBQsYCVn.js.map +0 -1
- package/dist/_chunks/ComponentIcon-BOFnK76n.mjs.map +0 -1
- package/dist/_chunks/EditViewPage-Bm8lgcm6.mjs.map +0 -1
- package/dist/_chunks/EditViewPage-CzOT5Kpj.js.map +0 -1
- package/dist/_chunks/Field-Caef4JjM.js.map +0 -1
- package/dist/_chunks/Field-Dlh0uGnL.mjs.map +0 -1
- package/dist/_chunks/Form-BzuAjtRq.js.map +0 -1
- package/dist/_chunks/Form-EnaQL_6L.mjs.map +0 -1
- package/dist/_chunks/History-C17LiyRg.js.map +0 -1
- package/dist/_chunks/History-D6sbCJvo.mjs.map +0 -1
- package/dist/_chunks/ListConfigurationPage-Ce4qs7qE.mjs.map +0 -1
- package/dist/_chunks/ListConfigurationPage-Dks5SX6f.js.map +0 -1
- package/dist/_chunks/ListViewPage-Be7S5aKL.mjs.map +0 -1
- package/dist/_chunks/ListViewPage-BwrZrPsh.js.map +0 -1
- package/dist/_chunks/NoContentTypePage-CIPmYQMm.mjs.map +0 -1
- package/dist/_chunks/NoContentTypePage-Cu5r1-JT.js.map +0 -1
- package/dist/_chunks/NoPermissionsPage-C-j6TEUF.js.map +0 -1
- package/dist/_chunks/NoPermissionsPage-DhJ7LYrr.mjs.map +0 -1
- package/dist/_chunks/Relations-CY7AtkDA.mjs.map +0 -1
- package/dist/_chunks/Relations-Czs-uZ-s.js.map +0 -1
- package/dist/_chunks/index-DNVx8ssZ.mjs.map +0 -1
- package/dist/_chunks/index-X_2tafck.js.map +0 -1
- package/dist/_chunks/layout-Dnh0PNp9.mjs.map +0 -1
- package/dist/_chunks/layout-dBc7wN7L.js.map +0 -1
- package/dist/_chunks/urls-CbOsUOoW.mjs +0 -7
- package/dist/_chunks/urls-CbOsUOoW.mjs.map +0 -1
- package/dist/_chunks/urls-DzZya_gm.js +0 -6
- package/dist/_chunks/urls-DzZya_gm.js.map +0 -1
- package/dist/admin/src/pages/ListView/components/BulkActions/PublishAction.d.ts +0 -31
- package/dist/server/src/controllers/utils/dimensions.d.ts +0 -5
- package/dist/server/src/controllers/utils/dimensions.d.ts.map +0 -1
@@ -5,19 +5,19 @@ const strapiAdmin = require("@strapi/admin/strapi-admin");
|
|
5
5
|
const designSystem = require("@strapi/design-system");
|
6
6
|
const pipe$1 = require("lodash/fp/pipe");
|
7
7
|
const reactIntl = require("react-intl");
|
8
|
-
const index = require("./index-
|
8
|
+
const index = require("./index-CCJeB7Rw.js");
|
9
9
|
const fractionalIndexing = require("fractional-indexing");
|
10
|
-
const Relations = require("./Relations-
|
10
|
+
const Relations = require("./Relations-DU6B7irU.js");
|
11
11
|
const Icons = require("@strapi/icons");
|
12
|
-
const
|
13
|
-
const ComponentIcon = require("./ComponentIcon-
|
12
|
+
const styledComponents = require("styled-components");
|
13
|
+
const ComponentIcon = require("./ComponentIcon-BXdiCGQp.js");
|
14
14
|
const reactDndHtml5Backend = require("react-dnd-html5-backend");
|
15
15
|
const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
|
16
16
|
const objects = require("./objects-gigeqt7s.js");
|
17
17
|
const slate = require("slate");
|
18
18
|
const slateHistory = require("slate-history");
|
19
19
|
const slateReact = require("slate-react");
|
20
|
-
const
|
20
|
+
const usePrev = require("./usePrev-B9w_-eYc.js");
|
21
21
|
const Toolbar = require("@radix-ui/react-toolbar");
|
22
22
|
const reactRouterDom = require("react-router-dom");
|
23
23
|
const CodeMirror = require("codemirror5");
|
@@ -56,7 +56,6 @@ function _interopNamespace(e) {
|
|
56
56
|
}
|
57
57
|
const React__namespace = /* @__PURE__ */ _interopNamespace(React);
|
58
58
|
const pipe__default = /* @__PURE__ */ _interopDefault(pipe$1);
|
59
|
-
const styled__default = /* @__PURE__ */ _interopDefault(styled);
|
60
59
|
const Toolbar__namespace = /* @__PURE__ */ _interopNamespace(Toolbar);
|
61
60
|
const CodeMirror__default = /* @__PURE__ */ _interopDefault(CodeMirror);
|
62
61
|
const sanitizeHtml__default = /* @__PURE__ */ _interopDefault(sanitizeHtml);
|
@@ -258,7 +257,7 @@ const pressEnterTwiceToExit = (editor) => {
|
|
258
257
|
});
|
259
258
|
}
|
260
259
|
};
|
261
|
-
const CodeBlock =
|
260
|
+
const CodeBlock = styledComponents.styled.pre`
|
262
261
|
border-radius: ${({ theme }) => theme.borderRadius};
|
263
262
|
background-color: ${({ theme }) => theme.colors.neutral100};
|
264
263
|
max-width: 100%;
|
@@ -293,27 +292,27 @@ const codeBlocks = {
|
|
293
292
|
dragHandleTopMargin: "10px"
|
294
293
|
}
|
295
294
|
};
|
296
|
-
const H1 =
|
295
|
+
const H1 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h1" })`
|
297
296
|
font-size: 4.2rem;
|
298
297
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
299
298
|
`;
|
300
|
-
const H2 =
|
299
|
+
const H2 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h2" })`
|
301
300
|
font-size: 3.5rem;
|
302
301
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
303
302
|
`;
|
304
|
-
const H3 =
|
303
|
+
const H3 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h3" })`
|
305
304
|
font-size: 2.9rem;
|
306
305
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
307
306
|
`;
|
308
|
-
const H4 =
|
307
|
+
const H4 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h4" })`
|
309
308
|
font-size: 2.4rem;
|
310
309
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
311
310
|
`;
|
312
|
-
const H5 =
|
311
|
+
const H5 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h5" })`
|
313
312
|
font-size: 2rem;
|
314
313
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
315
314
|
`;
|
316
|
-
const H6 =
|
315
|
+
const H6 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h6" })`
|
317
316
|
font-size: 1.6rem;
|
318
317
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
319
318
|
`;
|
@@ -399,10 +398,10 @@ const headingBlocks = {
|
|
399
398
|
dragHandleTopMargin: "-2px"
|
400
399
|
}
|
401
400
|
};
|
402
|
-
const ImageWrapper =
|
401
|
+
const ImageWrapper = styledComponents.styled(designSystem.Flex)`
|
403
402
|
transition-property: box-shadow;
|
404
403
|
transition-duration: 0.2s;
|
405
|
-
${(props) => props
|
404
|
+
${(props) => props.$isFocused && styledComponents.css`
|
406
405
|
box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;
|
407
406
|
`}
|
408
407
|
|
@@ -454,7 +453,7 @@ const Image = ({ attributes, children, element }) => {
|
|
454
453
|
background: "neutral100",
|
455
454
|
contentEditable: false,
|
456
455
|
justifyContent: "center",
|
457
|
-
isFocused: editorIsFocused && imageIsSelected,
|
456
|
+
$isFocused: editorIsFocused && imageIsSelected,
|
458
457
|
hasRadius: true,
|
459
458
|
children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt: alternativeText, width, height })
|
460
459
|
}
|
@@ -502,7 +501,7 @@ const ImageDialog = () => {
|
|
502
501
|
const nodeImage = {
|
503
502
|
...expectedImage,
|
504
503
|
alternativeText: expectedImage.alternativeText || expectedImage.name,
|
505
|
-
url:
|
504
|
+
url: usePrev.prefixFileUrlWithBackendUrl(image.url)
|
506
505
|
};
|
507
506
|
return nodeImage;
|
508
507
|
});
|
@@ -610,11 +609,11 @@ const isLinkNode = (element) => {
|
|
610
609
|
const isListNode$1 = (element) => {
|
611
610
|
return element.type === "list";
|
612
611
|
};
|
613
|
-
const StyledBaseLink =
|
612
|
+
const StyledBaseLink = styledComponents.styled(designSystem.BaseLink)`
|
614
613
|
text-decoration: none;
|
615
614
|
`;
|
616
|
-
const RemoveButton =
|
617
|
-
visibility: ${(props) => props
|
615
|
+
const RemoveButton = styledComponents.styled(designSystem.Button)`
|
616
|
+
visibility: ${(props) => props.$visible ? "visible" : "hidden"};
|
618
617
|
`;
|
619
618
|
const LinkContent = React__namespace.forwardRef(
|
620
619
|
({ link, children, attributes }, forwardedRef) => {
|
@@ -682,14 +681,14 @@ const LinkContent = React__namespace.forwardRef(
|
|
682
681
|
children
|
683
682
|
}
|
684
683
|
),
|
685
|
-
popoverOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, {
|
686
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
687
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
684
|
+
popoverOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
|
685
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
686
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
|
688
687
|
id: "components.Blocks.popover.text",
|
689
688
|
defaultMessage: "Text"
|
690
689
|
}) }),
|
691
690
|
/* @__PURE__ */ jsxRuntime.jsx(
|
692
|
-
designSystem.
|
691
|
+
designSystem.Field.Input,
|
693
692
|
{
|
694
693
|
name: "text",
|
695
694
|
placeholder: formatMessage({
|
@@ -703,13 +702,13 @@ const LinkContent = React__namespace.forwardRef(
|
|
703
702
|
}
|
704
703
|
)
|
705
704
|
] }) }),
|
706
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
707
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
705
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
706
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
|
708
707
|
id: "components.Blocks.popover.link",
|
709
708
|
defaultMessage: "Link"
|
710
709
|
}) }),
|
711
710
|
/* @__PURE__ */ jsxRuntime.jsx(
|
712
|
-
designSystem.
|
711
|
+
designSystem.Field.Input,
|
713
712
|
{
|
714
713
|
ref: linkInputRef,
|
715
714
|
name: "url",
|
@@ -728,7 +727,7 @@ const LinkContent = React__namespace.forwardRef(
|
|
728
727
|
{
|
729
728
|
variant: "danger-light",
|
730
729
|
onClick: () => removeLink(editor),
|
731
|
-
visible: showRemoveButton,
|
730
|
+
$visible: showRemoveButton,
|
732
731
|
children: formatMessage({
|
733
732
|
id: "components.Blocks.popover.remove",
|
734
733
|
defaultMessage: "Remove"
|
@@ -764,7 +763,7 @@ const linkBlocks = {
|
|
764
763
|
isInBlocksSelector: false
|
765
764
|
}
|
766
765
|
};
|
767
|
-
const listStyle =
|
766
|
+
const listStyle = styledComponents.css`
|
768
767
|
display: flex;
|
769
768
|
flex-direction: column;
|
770
769
|
gap: ${({ theme }) => theme.spaces[2]};
|
@@ -782,12 +781,12 @@ const listStyle = styled.css`
|
|
782
781
|
margin-inline-start: ${({ theme }) => theme.spaces[3]};
|
783
782
|
}
|
784
783
|
`;
|
785
|
-
const Orderedlist =
|
786
|
-
list-style-type: ${(props) => props
|
784
|
+
const Orderedlist = styledComponents.styled.ol`
|
785
|
+
list-style-type: ${(props) => props.$listStyleType};
|
787
786
|
${listStyle}
|
788
787
|
`;
|
789
|
-
const Unorderedlist =
|
790
|
-
list-style-type: ${(props) => props
|
788
|
+
const Unorderedlist = styledComponents.styled.ul`
|
789
|
+
list-style-type: ${(props) => props.$listStyleType};
|
791
790
|
${listStyle}
|
792
791
|
`;
|
793
792
|
const orderedStyles = ["decimal", "lower-alpha", "upper-roman"];
|
@@ -800,9 +799,9 @@ const List = ({ attributes, children, element }) => {
|
|
800
799
|
const nextIndex = (element.indentLevel || 0) % listStyles.length;
|
801
800
|
const listStyleType = listStyles[nextIndex];
|
802
801
|
if (element.format === "ordered") {
|
803
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Orderedlist, { listStyleType, ...attributes, children });
|
802
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Orderedlist, { $listStyleType: listStyleType, ...attributes, children });
|
804
803
|
}
|
805
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Unorderedlist, { listStyleType, ...attributes, children });
|
804
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Unorderedlist, { $listStyleType: listStyleType, ...attributes, children });
|
806
805
|
};
|
807
806
|
const replaceListWithEmptyBlock = (editor, currentListPath) => {
|
808
807
|
slate.Transforms.removeNodes(editor, { at: currentListPath });
|
@@ -999,7 +998,7 @@ const listBlocks = {
|
|
999
998
|
snippets: ["-", "*", "+"]
|
1000
999
|
},
|
1001
1000
|
"list-item": {
|
1002
|
-
renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, {
|
1001
|
+
renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "li", ...props.attributes, children: props.children }),
|
1003
1002
|
// No handleConvert, list items are created when converting to the parent list
|
1004
1003
|
matchNode: (node) => node.type === "list-item",
|
1005
1004
|
isInBlocksSelector: false,
|
@@ -1008,7 +1007,7 @@ const listBlocks = {
|
|
1008
1007
|
};
|
1009
1008
|
const paragraphBlocks = {
|
1010
1009
|
paragraph: {
|
1011
|
-
renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, {
|
1010
|
+
renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "p", variant: "omega", ...props.attributes, children: props.children }),
|
1012
1011
|
icon: Icons.Paragraph,
|
1013
1012
|
label: {
|
1014
1013
|
id: "components.Blocks.blocks.text",
|
@@ -1056,7 +1055,7 @@ const paragraphBlocks = {
|
|
1056
1055
|
}
|
1057
1056
|
}
|
1058
1057
|
};
|
1059
|
-
const Blockquote =
|
1058
|
+
const Blockquote = styledComponents.styled.blockquote.attrs({ role: "blockquote" })`
|
1060
1059
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
1061
1060
|
border-left: ${({ theme }) => `${theme.spaces[1]} solid ${theme.colors.neutral200}`};
|
1062
1061
|
padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
|
@@ -1086,17 +1085,17 @@ const quoteBlocks = {
|
|
1086
1085
|
dragHandleTopMargin: "6px"
|
1087
1086
|
}
|
1088
1087
|
};
|
1089
|
-
const ToolbarWrapper =
|
1088
|
+
const ToolbarWrapper = styledComponents.styled(designSystem.Flex)`
|
1090
1089
|
&[aria-disabled='true'] {
|
1091
1090
|
cursor: not-allowed;
|
1092
1091
|
}
|
1093
1092
|
`;
|
1094
|
-
const Separator =
|
1093
|
+
const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
|
1095
1094
|
background: ${({ theme }) => theme.colors.neutral150};
|
1096
1095
|
width: 1px;
|
1097
1096
|
height: 2.4rem;
|
1098
1097
|
`;
|
1099
|
-
const FlexButton =
|
1098
|
+
const FlexButton = styledComponents.styled(designSystem.Flex)`
|
1100
1099
|
// Inherit the not-allowed cursor from ToolbarWrapper when disabled
|
1101
1100
|
&[aria-disabled] {
|
1102
1101
|
cursor: inherit;
|
@@ -1111,7 +1110,7 @@ const FlexButton = styled__default.default(designSystem.Flex)`
|
|
1111
1110
|
}
|
1112
1111
|
}
|
1113
1112
|
`;
|
1114
|
-
const SelectWrapper =
|
1113
|
+
const SelectWrapper = styledComponents.styled(designSystem.Box)`
|
1115
1114
|
// Styling changes to SingleSelect component don't work, so adding wrapper to target SingleSelect
|
1116
1115
|
div[role='combobox'] {
|
1117
1116
|
border: none;
|
@@ -1174,7 +1173,7 @@ const ToolbarButton = ({
|
|
1174
1173
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
1175
1174
|
FlexButton,
|
1176
1175
|
{
|
1177
|
-
|
1176
|
+
tag: "button",
|
1178
1177
|
background: isActive ? "primary100" : "",
|
1179
1178
|
alignItems: "center",
|
1180
1179
|
justifyContent: "center",
|
@@ -1458,7 +1457,7 @@ const BlocksToolbar = () => {
|
|
1458
1457
|
] }) })
|
1459
1458
|
] }) });
|
1460
1459
|
};
|
1461
|
-
const StyledEditable =
|
1460
|
+
const StyledEditable = styledComponents.styled(slateReact.Editable)`
|
1462
1461
|
// The outline style is set on the wrapper with :focus-within
|
1463
1462
|
outline: none;
|
1464
1463
|
display: flex;
|
@@ -1473,20 +1472,20 @@ const StyledEditable = styled__default.default(slateReact.Editable)`
|
|
1473
1472
|
padding-bottom: ${({ theme }) => theme.spaces[3]};
|
1474
1473
|
}
|
1475
1474
|
`;
|
1476
|
-
const Wrapper$1 =
|
1475
|
+
const Wrapper$1 = styledComponents.styled(designSystem.Box)`
|
1477
1476
|
position: ${({ isOverDropTarget }) => isOverDropTarget && "relative"};
|
1478
1477
|
`;
|
1479
|
-
const DropPlaceholder =
|
1478
|
+
const DropPlaceholder = styledComponents.styled(designSystem.Box)`
|
1480
1479
|
position: absolute;
|
1481
1480
|
right: 0;
|
1482
1481
|
|
1483
1482
|
// Show drop placeholder 8px above or below the drop target
|
1484
|
-
${({ dragDirection, theme, placeholderMargin }) =>
|
1483
|
+
${({ dragDirection, theme, placeholderMargin }) => styledComponents.css`
|
1485
1484
|
top: ${dragDirection === useDragAndDrop.DIRECTIONS.UPWARD && `-${theme.spaces[placeholderMargin]}`};
|
1486
1485
|
bottom: ${dragDirection === useDragAndDrop.DIRECTIONS.DOWNWARD && `-${theme.spaces[placeholderMargin]}`};
|
1487
1486
|
`}
|
1488
1487
|
`;
|
1489
|
-
const DragItem =
|
1488
|
+
const DragItem = styledComponents.styled(designSystem.Flex)`
|
1490
1489
|
// Style each block rendered using renderElement()
|
1491
1490
|
& > [data-slate-node='element'] {
|
1492
1491
|
width: 100%;
|
@@ -1495,14 +1494,14 @@ const DragItem = styled__default.default(designSystem.Flex)`
|
|
1495
1494
|
|
1496
1495
|
// Set the visibility of drag button
|
1497
1496
|
[role='button'] {
|
1498
|
-
visibility: ${(props) => props
|
1497
|
+
visibility: ${(props) => props.$dragVisibility};
|
1499
1498
|
opacity: inherit;
|
1500
1499
|
}
|
1501
1500
|
&[aria-disabled='true'] {
|
1502
1501
|
user-drag: none;
|
1503
1502
|
}
|
1504
1503
|
`;
|
1505
|
-
const DragIconButton =
|
1504
|
+
const DragIconButton = styledComponents.styled(designSystem.IconButton)`
|
1506
1505
|
display: flex;
|
1507
1506
|
align-items: center;
|
1508
1507
|
justify-content: center;
|
@@ -1512,7 +1511,7 @@ const DragIconButton = styled__default.default(designSystem.IconButton)`
|
|
1512
1511
|
visibility: hidden;
|
1513
1512
|
cursor: grab;
|
1514
1513
|
opacity: inherit;
|
1515
|
-
margin-top: ${(props) => props
|
1514
|
+
margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
|
1516
1515
|
|
1517
1516
|
&:hover {
|
1518
1517
|
background: ${({ theme }) => theme.colors.neutral200};
|
@@ -1587,7 +1586,7 @@ const DragAndDropElement = ({
|
|
1587
1586
|
React__namespace.useEffect(() => {
|
1588
1587
|
setDragVisibility("hidden");
|
1589
1588
|
}, [editor.selection]);
|
1590
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$1, { ref:
|
1589
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$1, { ref: composedBoxRefs, isOverDropTarget, children: [
|
1591
1590
|
isOverDropTarget && /* @__PURE__ */ jsxRuntime.jsx(
|
1592
1591
|
DropPlaceholder,
|
1593
1592
|
{
|
@@ -1625,15 +1624,16 @@ const DragAndDropElement = ({
|
|
1625
1624
|
onSelect: () => setDragVisibility("visible"),
|
1626
1625
|
onMouseLeave: () => setDragVisibility("hidden"),
|
1627
1626
|
"aria-disabled": disabled,
|
1628
|
-
dragVisibility,
|
1627
|
+
$dragVisibility: dragVisibility,
|
1629
1628
|
children: [
|
1630
1629
|
/* @__PURE__ */ jsxRuntime.jsx(
|
1631
1630
|
DragIconButton,
|
1632
1631
|
{
|
1633
|
-
|
1632
|
+
tag: "div",
|
1634
1633
|
role: "button",
|
1635
1634
|
tabIndex: 0,
|
1636
|
-
|
1635
|
+
withTooltip: false,
|
1636
|
+
label: formatMessage({
|
1637
1637
|
id: index.getTranslation("components.DragHandle-label"),
|
1638
1638
|
defaultMessage: "Drag"
|
1639
1639
|
}),
|
@@ -1641,7 +1641,7 @@ const DragAndDropElement = ({
|
|
1641
1641
|
"aria-disabled": disabled,
|
1642
1642
|
disabled,
|
1643
1643
|
draggable: true,
|
1644
|
-
dragHandleTopMargin,
|
1644
|
+
$dragHandleTopMargin: dragHandleTopMargin,
|
1645
1645
|
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, { color: "neutral600" })
|
1646
1646
|
}
|
1647
1647
|
),
|
@@ -1653,17 +1653,18 @@ const DragAndDropElement = ({
|
|
1653
1653
|
};
|
1654
1654
|
const CloneDragItem = ({ children, dragHandleTopMargin }) => {
|
1655
1655
|
const { formatMessage } = reactIntl.useIntl();
|
1656
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", dragVisibility: "visible", children: [
|
1656
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", $dragVisibility: "visible", children: [
|
1657
1657
|
/* @__PURE__ */ jsxRuntime.jsx(
|
1658
1658
|
DragIconButton,
|
1659
1659
|
{
|
1660
|
-
|
1660
|
+
tag: "div",
|
1661
1661
|
role: "button",
|
1662
|
-
|
1662
|
+
withTooltip: false,
|
1663
|
+
label: formatMessage({
|
1663
1664
|
id: index.getTranslation("components.DragHandle-label"),
|
1664
1665
|
defaultMessage: "Drag"
|
1665
1666
|
}),
|
1666
|
-
dragHandleTopMargin,
|
1667
|
+
$dragHandleTopMargin: dragHandleTopMargin,
|
1667
1668
|
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, { color: "neutral600" })
|
1668
1669
|
}
|
1669
1670
|
),
|
@@ -1910,12 +1911,12 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
|
|
1910
1911
|
}
|
1911
1912
|
);
|
1912
1913
|
};
|
1913
|
-
const CollapseIconButton =
|
1914
|
+
const CollapseIconButton = styledComponents.styled(designSystem.IconButton)`
|
1914
1915
|
position: absolute;
|
1915
1916
|
bottom: 1.2rem;
|
1916
1917
|
right: 1.2rem;
|
1917
1918
|
`;
|
1918
|
-
const ExpandWrapper$1 =
|
1919
|
+
const ExpandWrapper$1 = styledComponents.styled(designSystem.Flex)`
|
1919
1920
|
// Background with 20% opacity
|
1920
1921
|
background: ${({ theme }) => `${theme.colors.neutral800}1F`};
|
1921
1922
|
`;
|
@@ -1980,13 +1981,13 @@ const EditorLayout$1 = ({
|
|
1980
1981
|
) }) });
|
1981
1982
|
}
|
1982
1983
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
1983
|
-
|
1984
|
+
InputWrapper,
|
1984
1985
|
{
|
1985
1986
|
direction: "column",
|
1986
1987
|
alignItems: "flex-start",
|
1987
1988
|
height: "512px",
|
1988
|
-
disabled,
|
1989
|
-
hasError: Boolean(error),
|
1989
|
+
$disabled: disabled,
|
1990
|
+
$hasError: Boolean(error),
|
1990
1991
|
style: { overflow: "hidden" },
|
1991
1992
|
"aria-describedby": ariaDescriptionId,
|
1992
1993
|
position: "relative",
|
@@ -1994,25 +1995,52 @@ const EditorLayout$1 = ({
|
|
1994
1995
|
}
|
1995
1996
|
);
|
1996
1997
|
};
|
1997
|
-
const
|
1998
|
+
const InputWrapper = styledComponents.styled(designSystem.Flex)`
|
1999
|
+
border: 1px solid
|
2000
|
+
${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
|
2001
|
+
border-radius: ${({ theme }) => theme.borderRadius};
|
2002
|
+
background: ${({ theme }) => theme.colors.neutral0};
|
2003
|
+
|
2004
|
+
${({ theme, $hasError = false }) => styledComponents.css`
|
2005
|
+
outline: none;
|
2006
|
+
box-shadow: 0;
|
2007
|
+
transition-property: border-color, box-shadow, fill;
|
2008
|
+
transition-duration: 0.2s;
|
2009
|
+
|
2010
|
+
&:focus-within {
|
2011
|
+
border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};
|
2012
|
+
box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
|
2013
|
+
}
|
2014
|
+
`}
|
2015
|
+
|
2016
|
+
${({ theme, $disabled }) => $disabled ? styledComponents.css`
|
2017
|
+
color: ${theme.colors.neutral600};
|
2018
|
+
background: ${theme.colors.neutral150};
|
2019
|
+
` : void 0}
|
2020
|
+
`;
|
2021
|
+
const stylesToInherit = styledComponents.css`
|
1998
2022
|
font-size: inherit;
|
1999
2023
|
color: inherit;
|
2000
2024
|
line-height: inherit;
|
2001
2025
|
`;
|
2002
|
-
const BoldText =
|
2026
|
+
const BoldText = styledComponents.styled(designSystem.Typography).attrs({ fontWeight: "bold" })`
|
2003
2027
|
${stylesToInherit}
|
2004
2028
|
`;
|
2005
|
-
const ItalicText =
|
2029
|
+
const ItalicText = styledComponents.styled(designSystem.Typography)`
|
2006
2030
|
font-style: italic;
|
2007
2031
|
${stylesToInherit}
|
2008
2032
|
`;
|
2009
|
-
const UnderlineText =
|
2033
|
+
const UnderlineText = styledComponents.styled(designSystem.Typography).attrs({
|
2034
|
+
textDecoration: "underline"
|
2035
|
+
})`
|
2010
2036
|
${stylesToInherit}
|
2011
2037
|
`;
|
2012
|
-
const StrikeThroughText =
|
2038
|
+
const StrikeThroughText = styledComponents.styled(designSystem.Typography).attrs({
|
2039
|
+
textDecoration: "line-through"
|
2040
|
+
})`
|
2013
2041
|
${stylesToInherit}
|
2014
2042
|
`;
|
2015
|
-
const InlineCode =
|
2043
|
+
const InlineCode = styledComponents.styled.code`
|
2016
2044
|
background-color: ${({ theme }) => theme.colors.neutral150};
|
2017
2045
|
border-radius: ${({ theme }) => theme.borderRadius};
|
2018
2046
|
padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
|
@@ -2182,10 +2210,10 @@ function useBlocksEditorContext(consumerName) {
|
|
2182
2210
|
editor
|
2183
2211
|
};
|
2184
2212
|
}
|
2185
|
-
const EditorDivider =
|
2213
|
+
const EditorDivider = styledComponents.styled(designSystem.Divider)`
|
2186
2214
|
background: ${({ theme }) => theme.colors.neutral200};
|
2187
2215
|
`;
|
2188
|
-
const ExpandIconButton =
|
2216
|
+
const ExpandIconButton = styledComponents.styled(designSystem.IconButton)`
|
2189
2217
|
position: absolute;
|
2190
2218
|
bottom: 1.2rem;
|
2191
2219
|
right: 1.2rem;
|
@@ -2300,8 +2328,8 @@ const BlocksInput = React__namespace.forwardRef(
|
|
2300
2328
|
({ label, name: name2, required = false, hint, labelAction, ...editorProps }, forwardedRef) => {
|
2301
2329
|
const id = React__namespace.useId();
|
2302
2330
|
const field = strapiAdmin.useField(name2);
|
2303
|
-
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
2304
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
2331
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
2332
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
|
2305
2333
|
/* @__PURE__ */ jsxRuntime.jsx(
|
2306
2334
|
BlocksEditor,
|
2307
2335
|
{
|
@@ -2314,11 +2342,12 @@ const BlocksInput = React__namespace.forwardRef(
|
|
2314
2342
|
...editorProps
|
2315
2343
|
}
|
2316
2344
|
),
|
2317
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
2318
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
2345
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
|
2346
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
|
2319
2347
|
] }) });
|
2320
2348
|
}
|
2321
2349
|
);
|
2350
|
+
const MemoizedBlocksInput = React__namespace.memo(BlocksInput);
|
2322
2351
|
const createDefaultForm = (contentType, components = {}) => {
|
2323
2352
|
const traverseSchema = (attributes) => {
|
2324
2353
|
return Object.entries(attributes).reduce((acc, [key, attribute]) => {
|
@@ -2346,7 +2375,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
|
|
2346
2375
|
/* @__PURE__ */ jsxRuntime.jsx(
|
2347
2376
|
designSystem.Box,
|
2348
2377
|
{
|
2349
|
-
|
2378
|
+
tag: "button",
|
2350
2379
|
background: "neutral100",
|
2351
2380
|
borderColor: field.error ? "danger600" : "neutral200",
|
2352
2381
|
hasRadius: true,
|
@@ -2367,7 +2396,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
|
|
2367
2396
|
field.error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", variant: "pi", children: field.error })
|
2368
2397
|
] });
|
2369
2398
|
};
|
2370
|
-
const CircleIcon =
|
2399
|
+
const CircleIcon = styledComponents.styled(Icons.PlusCircle)`
|
2371
2400
|
width: 2.4rem;
|
2372
2401
|
height: 2.4rem;
|
2373
2402
|
> circle {
|
@@ -2423,7 +2452,7 @@ const RepeatableComponent = ({
|
|
2423
2452
|
const moveFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.moveFieldRow);
|
2424
2453
|
const removeFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.removeFieldRow);
|
2425
2454
|
const { max = Infinity } = attribute;
|
2426
|
-
const [collapseToOpen, setCollapseToOpen] = React__namespace.useState(
|
2455
|
+
const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
|
2427
2456
|
const [liveText, setLiveText] = React__namespace.useState("");
|
2428
2457
|
const componentTmpKeyWithFocussedField = React__namespace.useMemo(() => {
|
2429
2458
|
if (search.has("field")) {
|
@@ -2439,13 +2468,19 @@ const RepeatableComponent = ({
|
|
2439
2468
|
}
|
2440
2469
|
return void 0;
|
2441
2470
|
}, [search, name2, value]);
|
2471
|
+
const prevValue = usePrev.usePrev(value);
|
2442
2472
|
React__namespace.useEffect(() => {
|
2443
|
-
if (
|
2473
|
+
if (prevValue && prevValue.length < value.length) {
|
2474
|
+
setCollapseToOpen(value[value.length - 1].__temp_key__);
|
2475
|
+
}
|
2476
|
+
}, [value, prevValue]);
|
2477
|
+
React__namespace.useEffect(() => {
|
2478
|
+
if (typeof componentTmpKeyWithFocussedField === "string") {
|
2444
2479
|
setCollapseToOpen(componentTmpKeyWithFocussedField);
|
2445
2480
|
}
|
2446
2481
|
}, [componentTmpKeyWithFocussedField]);
|
2447
2482
|
const toggleCollapses = () => {
|
2448
|
-
setCollapseToOpen(
|
2483
|
+
setCollapseToOpen("");
|
2449
2484
|
};
|
2450
2485
|
const handleClick = () => {
|
2451
2486
|
if (value.length < max) {
|
@@ -2477,12 +2512,8 @@ const RepeatableComponent = ({
|
|
2477
2512
|
);
|
2478
2513
|
moveFieldRow(name2, currentIndex, newIndex);
|
2479
2514
|
};
|
2480
|
-
const
|
2481
|
-
|
2482
|
-
setCollapseToOpen(null);
|
2483
|
-
} else {
|
2484
|
-
setCollapseToOpen(key);
|
2485
|
-
}
|
2515
|
+
const handleValueChange = (key) => {
|
2516
|
+
setCollapseToOpen(key);
|
2486
2517
|
};
|
2487
2518
|
const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
|
2488
2519
|
const handleCancel = (index$1) => {
|
@@ -2537,158 +2568,104 @@ const RepeatableComponent = ({
|
|
2537
2568
|
defaultMessage: `Press spacebar to grab and re-order`
|
2538
2569
|
}) }),
|
2539
2570
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
|
2540
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
2541
|
-
|
2542
|
-
|
2543
|
-
|
2544
|
-
|
2545
|
-
|
2546
|
-
|
2547
|
-
|
2548
|
-
|
2549
|
-
|
2550
|
-
|
2551
|
-
|
2571
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
2572
|
+
AccordionRoot,
|
2573
|
+
{
|
2574
|
+
$error: error,
|
2575
|
+
value: collapseToOpen,
|
2576
|
+
onValueChange: handleValueChange,
|
2577
|
+
"aria-describedby": ariaDescriptionId,
|
2578
|
+
children: [
|
2579
|
+
value.map(({ __temp_key__: key, id }, index2) => {
|
2580
|
+
const nameWithIndex = `${name2}.${index2}`;
|
2581
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
2582
|
+
Relations.ComponentProvider,
|
2552
2583
|
{
|
2553
|
-
|
2554
|
-
|
2555
|
-
|
2556
|
-
|
2557
|
-
|
2558
|
-
|
2559
|
-
|
2560
|
-
|
2561
|
-
|
2562
|
-
|
2563
|
-
|
2564
|
-
|
2565
|
-
|
2566
|
-
|
2567
|
-
|
2568
|
-
|
2569
|
-
|
2570
|
-
|
2571
|
-
|
2572
|
-
|
2573
|
-
|
2574
|
-
|
2575
|
-
|
2576
|
-
|
2577
|
-
|
2578
|
-
|
2579
|
-
|
2580
|
-
|
2581
|
-
|
2582
|
-
|
2583
|
-
|
2584
|
-
|
2585
|
-
|
2584
|
+
id,
|
2585
|
+
uid: attribute.component,
|
2586
|
+
level: level + 1,
|
2587
|
+
type: "repeatable",
|
2588
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
2589
|
+
Component,
|
2590
|
+
{
|
2591
|
+
disabled,
|
2592
|
+
name: nameWithIndex,
|
2593
|
+
attribute,
|
2594
|
+
index: index2,
|
2595
|
+
mainField,
|
2596
|
+
onMoveItem: handleMoveComponentField,
|
2597
|
+
onDeleteComponent: () => {
|
2598
|
+
removeFieldRow(name2, index2);
|
2599
|
+
toggleCollapses();
|
2600
|
+
},
|
2601
|
+
toggleCollapses,
|
2602
|
+
onCancel: handleCancel,
|
2603
|
+
onDropItem: handleDropItem,
|
2604
|
+
onGrabItem: handleGrabItem,
|
2605
|
+
__temp_key__: key,
|
2606
|
+
children: layout.map((row, index22) => {
|
2607
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
|
2608
|
+
const completeFieldName = `${nameWithIndex}.${field.name}`;
|
2609
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
|
2610
|
+
}) }, index22);
|
2611
|
+
})
|
2612
|
+
}
|
2613
|
+
)
|
2614
|
+
},
|
2615
|
+
key
|
2616
|
+
);
|
2617
|
+
}),
|
2618
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
|
2619
|
+
id: index.getTranslation("containers.EditView.add.new-entry"),
|
2620
|
+
defaultMessage: "Add an entry"
|
2621
|
+
}) })
|
2622
|
+
]
|
2623
|
+
}
|
2624
|
+
)
|
2586
2625
|
] });
|
2587
2626
|
};
|
2588
|
-
const
|
2589
|
-
|
2627
|
+
const AccordionRoot = styledComponents.styled(designSystem.Accordion.Root)`
|
2628
|
+
border: 1px solid
|
2629
|
+
${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
|
2630
|
+
`;
|
2631
|
+
const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
|
2590
2632
|
width: 100%;
|
2591
|
-
border-radius: 0 0 4px 4px;
|
2592
2633
|
display: flex;
|
2593
2634
|
justify-content: center;
|
2594
|
-
|
2595
|
-
|
2596
|
-
|
2597
|
-
}
|
2598
|
-
`;
|
2599
|
-
const AccordionFooter = styled__default.default(designSystem.Box)`
|
2600
|
-
overflow: hidden;
|
2601
|
-
border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2602
|
-
border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2603
|
-
border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2604
|
-
border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
|
2605
|
-
`;
|
2606
|
-
const AccordionContent = styled__default.default(designSystem.Box)`
|
2607
|
-
border-bottom: none;
|
2608
|
-
|
2609
|
-
/* add the borders and make sure the top is transparent to avoid jumping with the hover effect */
|
2610
|
-
& > div > div {
|
2611
|
-
border: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2612
|
-
border-top-color: transparent;
|
2613
|
-
}
|
2614
|
-
|
2615
|
-
/* the top accordion _does_ need a border though */
|
2616
|
-
& > div:first-child > div {
|
2617
|
-
border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2618
|
-
}
|
2619
|
-
|
2620
|
-
/* Reset all the border-radius' */
|
2621
|
-
& > div > div,
|
2622
|
-
& > div > div > div {
|
2623
|
-
border-radius: unset;
|
2624
|
-
}
|
2635
|
+
border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
|
2636
|
+
padding-inline: ${(props) => props.theme.spaces[6]};
|
2637
|
+
padding-block: ${(props) => props.theme.spaces[3]};
|
2625
2638
|
|
2626
|
-
|
2627
|
-
|
2628
|
-
& > div:first-child > div > div {
|
2629
|
-
border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
|
2630
|
-
}
|
2631
|
-
|
2632
|
-
& > div > div[data-strapi-expanded='true'] {
|
2633
|
-
border: 1px solid ${({ theme }) => theme.colors.primary600};
|
2634
|
-
}
|
2635
|
-
`;
|
2636
|
-
const AccordionGroup = ({ children, error }) => {
|
2637
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: [
|
2638
|
-
children,
|
2639
|
-
error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: error }) })
|
2640
|
-
] });
|
2641
|
-
};
|
2642
|
-
const CustomIconButton$1 = styled__default.default(designSystem.IconButton)`
|
2643
|
-
background-color: transparent;
|
2639
|
+
&:not([disabled]) {
|
2640
|
+
cursor: pointer;
|
2644
2641
|
|
2645
|
-
|
2646
|
-
|
2647
|
-
fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
|
2642
|
+
&:hover {
|
2643
|
+
background-color: ${(props) => props.theme.colors.primary100};
|
2648
2644
|
}
|
2649
2645
|
}
|
2650
2646
|
|
2651
|
-
|
2652
|
-
|
2653
|
-
|
2654
|
-
|
2655
|
-
}
|
2656
|
-
}
|
2647
|
+
span {
|
2648
|
+
font-weight: 600;
|
2649
|
+
font-size: 1.4rem;
|
2650
|
+
line-height: 2.4rem;
|
2657
2651
|
}
|
2658
|
-
`;
|
2659
|
-
const ActionsFlex$1 = styled__default.default(designSystem.Flex)`
|
2660
|
-
& .drag-handle {
|
2661
|
-
background: unset;
|
2662
2652
|
|
2663
|
-
|
2664
|
-
|
2665
|
-
fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : void 0};
|
2666
|
-
}
|
2667
|
-
}
|
2668
|
-
|
2669
|
-
&:hover {
|
2670
|
-
svg {
|
2671
|
-
path {
|
2672
|
-
/* keeps the hover style of the accordion */
|
2673
|
-
fill: ${({ theme }) => theme.colors.primary600};
|
2674
|
-
}
|
2675
|
-
}
|
2676
|
-
}
|
2653
|
+
@media (prefers-reduced-motion: no-preference) {
|
2654
|
+
transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
|
2677
2655
|
}
|
2678
2656
|
`;
|
2679
2657
|
const Component = ({
|
2680
2658
|
disabled,
|
2681
2659
|
index: index$1,
|
2682
|
-
isOpen,
|
2683
2660
|
name: name2,
|
2684
2661
|
mainField = {
|
2685
2662
|
name: "id",
|
2686
2663
|
type: "integer"
|
2687
2664
|
},
|
2688
2665
|
children,
|
2689
|
-
onClickToggle,
|
2690
2666
|
onDeleteComponent,
|
2691
2667
|
toggleCollapses,
|
2668
|
+
__temp_key__,
|
2692
2669
|
...dragProps
|
2693
2670
|
}) => {
|
2694
2671
|
const { formatMessage } = reactIntl.useIntl();
|
@@ -2713,50 +2690,44 @@ const Component = ({
|
|
2713
2690
|
dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
|
2714
2691
|
}, [dragPreviewRef, index$1]);
|
2715
2692
|
const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
|
2716
|
-
const composedBoxRefs = designSystem.useComposedRefs(
|
2717
|
-
|
2718
|
-
|
2719
|
-
|
2720
|
-
|
2721
|
-
|
2722
|
-
|
2723
|
-
|
2724
|
-
|
2725
|
-
|
2726
|
-
|
2727
|
-
|
2728
|
-
|
2729
|
-
|
2730
|
-
|
2731
|
-
|
2732
|
-
|
2733
|
-
}
|
2734
|
-
|
2735
|
-
|
2736
|
-
|
2737
|
-
|
2738
|
-
|
2739
|
-
|
2740
|
-
|
2741
|
-
|
2742
|
-
|
2743
|
-
|
2744
|
-
|
2745
|
-
"
|
2746
|
-
|
2747
|
-
|
2748
|
-
|
2749
|
-
|
2750
|
-
|
2751
|
-
|
2752
|
-
|
2753
|
-
|
2754
|
-
] }),
|
2755
|
-
title: displayValue,
|
2756
|
-
togglePosition: "left"
|
2757
|
-
}
|
2758
|
-
),
|
2759
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
2693
|
+
const composedBoxRefs = designSystem.useComposedRefs(
|
2694
|
+
boxRef,
|
2695
|
+
dropRef
|
2696
|
+
);
|
2697
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
|
2698
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
|
2699
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: displayValue }),
|
2700
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Actions, { children: [
|
2701
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
2702
|
+
designSystem.IconButton,
|
2703
|
+
{
|
2704
|
+
borderWidth: 0,
|
2705
|
+
onClick: onDeleteComponent,
|
2706
|
+
label: formatMessage({
|
2707
|
+
id: index.getTranslation("containers.Edit.delete"),
|
2708
|
+
defaultMessage: "Delete"
|
2709
|
+
}),
|
2710
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
|
2711
|
+
}
|
2712
|
+
),
|
2713
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
2714
|
+
designSystem.IconButton,
|
2715
|
+
{
|
2716
|
+
ref: composedAccordionRefs,
|
2717
|
+
borderWidth: 0,
|
2718
|
+
onClick: (e) => e.stopPropagation(),
|
2719
|
+
"data-handler-id": handlerId,
|
2720
|
+
label: formatMessage({
|
2721
|
+
id: index.getTranslation("components.DragHandle-label"),
|
2722
|
+
defaultMessage: "Drag"
|
2723
|
+
}),
|
2724
|
+
onKeyDown: handleKeyDown,
|
2725
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
|
2726
|
+
}
|
2727
|
+
)
|
2728
|
+
] })
|
2729
|
+
] }),
|
2730
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
2760
2731
|
designSystem.Flex,
|
2761
2732
|
{
|
2762
2733
|
direction: "column",
|
@@ -2770,9 +2741,9 @@ const Component = ({
|
|
2770
2741
|
] }) });
|
2771
2742
|
};
|
2772
2743
|
const Preview$1 = () => {
|
2773
|
-
return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, {
|
2744
|
+
return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
|
2774
2745
|
};
|
2775
|
-
const StyledSpan =
|
2746
|
+
const StyledSpan = styledComponents.styled(designSystem.Box)`
|
2776
2747
|
display: block;
|
2777
2748
|
outline: 1px dashed ${({ theme }) => theme.colors.primary500};
|
2778
2749
|
outline-offset: -1px;
|
@@ -2796,29 +2767,15 @@ const ComponentInput = ({
|
|
2796
2767
|
const data = transformDocument(schema, components)(form);
|
2797
2768
|
field.onChange(name2, data);
|
2798
2769
|
};
|
2799
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.
|
2770
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, required, children: [
|
2800
2771
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
|
2801
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.
|
2802
|
-
|
2803
|
-
|
2804
|
-
|
2805
|
-
|
2806
|
-
|
2807
|
-
|
2808
|
-
fontWeight: "bold",
|
2809
|
-
as: "label",
|
2810
|
-
children: [
|
2811
|
-
label,
|
2812
|
-
attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
2813
|
-
" (",
|
2814
|
-
Array.isArray(field.value) ? field.value.length : 0,
|
2815
|
-
")"
|
2816
|
-
] }),
|
2817
|
-
required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: "*" })
|
2818
|
-
]
|
2819
|
-
}
|
2820
|
-
),
|
2821
|
-
labelAction && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 1, children: labelAction })
|
2772
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { action: labelAction, children: [
|
2773
|
+
label,
|
2774
|
+
attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
2775
|
+
" (",
|
2776
|
+
Array.isArray(field.value) ? field.value.length : 0,
|
2777
|
+
")"
|
2778
|
+
] })
|
2822
2779
|
] }),
|
2823
2780
|
showResetComponent && /* @__PURE__ */ jsxRuntime.jsx(
|
2824
2781
|
designSystem.IconButton,
|
@@ -2827,21 +2784,21 @@ const ComponentInput = ({
|
|
2827
2784
|
id: index.getTranslation("components.reset-entry"),
|
2828
2785
|
defaultMessage: "Reset Entry"
|
2829
2786
|
}),
|
2830
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {}),
|
2831
2787
|
borderWidth: 0,
|
2832
2788
|
onClick: () => {
|
2833
2789
|
field.onChange(name2, null);
|
2834
|
-
}
|
2790
|
+
},
|
2791
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
|
2835
2792
|
}
|
2836
2793
|
)
|
2837
2794
|
] }),
|
2838
|
-
/* @__PURE__ */ jsxRuntime.
|
2839
|
-
|
2840
|
-
|
2841
|
-
|
2842
|
-
] })
|
2795
|
+
!attribute.repeatable && !field.value && /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
|
2796
|
+
!attribute.repeatable && field.value ? /* @__PURE__ */ jsxRuntime.jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
|
2797
|
+
attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
|
2798
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
|
2843
2799
|
] });
|
2844
2800
|
};
|
2801
|
+
const MemoizedComponentInput = React__namespace.memo(ComponentInput);
|
2845
2802
|
const AddComponentButton = ({
|
2846
2803
|
hasError,
|
2847
2804
|
isDisabled,
|
@@ -2861,10 +2818,10 @@ const AddComponentButton = ({
|
|
2861
2818
|
paddingLeft: 4,
|
2862
2819
|
paddingRight: 4,
|
2863
2820
|
style: { cursor: isDisabled ? "not-allowed" : "pointer" },
|
2864
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, {
|
2821
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "span", gap: 2, children: [
|
2865
2822
|
/* @__PURE__ */ jsxRuntime.jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
|
2866
2823
|
/* @__PURE__ */ jsxRuntime.jsx(
|
2867
|
-
|
2824
|
+
AddComponentTitle,
|
2868
2825
|
{
|
2869
2826
|
variant: "pi",
|
2870
2827
|
fontWeight: "bold",
|
@@ -2876,7 +2833,7 @@ const AddComponentButton = ({
|
|
2876
2833
|
}
|
2877
2834
|
);
|
2878
2835
|
};
|
2879
|
-
const StyledAddIcon =
|
2836
|
+
const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
|
2880
2837
|
height: ${({ theme }) => theme.spaces[6]};
|
2881
2838
|
width: ${({ theme }) => theme.spaces[6]};
|
2882
2839
|
transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
|
@@ -2888,13 +2845,14 @@ const StyledAddIcon = styled__default.default(Icons.PlusCircle)`
|
|
2888
2845
|
fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
|
2889
2846
|
}
|
2890
2847
|
`;
|
2891
|
-
const
|
2848
|
+
const AddComponentTitle = styledComponents.styled(designSystem.Typography)``;
|
2849
|
+
const StyledButton = styledComponents.styled(designSystem.BaseButton)`
|
2892
2850
|
border-radius: 26px;
|
2893
2851
|
border-color: ${({ theme }) => theme.colors.neutral150};
|
2894
2852
|
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
2895
2853
|
|
2896
2854
|
&:hover {
|
2897
|
-
${
|
2855
|
+
${AddComponentTitle} {
|
2898
2856
|
color: ${({ theme }) => theme.colors.primary600};
|
2899
2857
|
}
|
2900
2858
|
|
@@ -2908,7 +2866,7 @@ const StyledButton = styled__default.default(designSystem.BaseButton)`
|
|
2908
2866
|
}
|
2909
2867
|
}
|
2910
2868
|
&:active {
|
2911
|
-
${
|
2869
|
+
${AddComponentTitle} {
|
2912
2870
|
color: ${({ theme }) => theme.colors.primary600};
|
2913
2871
|
}
|
2914
2872
|
${StyledAddIcon} {
|
@@ -2925,27 +2883,15 @@ const ComponentCategory = ({
|
|
2925
2883
|
category,
|
2926
2884
|
components = [],
|
2927
2885
|
variant = "primary",
|
2928
|
-
|
2929
|
-
onAddComponent,
|
2930
|
-
onToggle
|
2886
|
+
onAddComponent
|
2931
2887
|
}) => {
|
2932
2888
|
const { formatMessage } = reactIntl.useIntl();
|
2933
|
-
|
2934
|
-
|
2935
|
-
|
2936
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
|
2937
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
2938
|
-
designSystem.AccordionToggle,
|
2939
|
-
{
|
2940
|
-
variant,
|
2941
|
-
title: formatMessage({ id: category, defaultMessage: category }),
|
2942
|
-
togglePosition: "left"
|
2943
|
-
}
|
2944
|
-
),
|
2945
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
|
2889
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: category, children: [
|
2890
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { variant, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
|
2891
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
|
2946
2892
|
ComponentBox,
|
2947
2893
|
{
|
2948
|
-
|
2894
|
+
tag: "button",
|
2949
2895
|
type: "button",
|
2950
2896
|
background: "neutral100",
|
2951
2897
|
justifyContent: "center",
|
@@ -2955,34 +2901,32 @@ const ComponentCategory = ({
|
|
2955
2901
|
shrink: 0,
|
2956
2902
|
borderColor: "neutral200",
|
2957
2903
|
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
|
2958
|
-
/* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { icon }),
|
2959
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold",
|
2904
|
+
/* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { color: "currentColor", background: "primary200", icon }),
|
2905
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: displayName })
|
2960
2906
|
] })
|
2961
2907
|
},
|
2962
2908
|
uid
|
2963
|
-
)) }) })
|
2909
|
+
)) }) })
|
2964
2910
|
] });
|
2965
2911
|
};
|
2966
|
-
const Grid =
|
2912
|
+
const Grid = styledComponents.styled(designSystem.Box)`
|
2967
2913
|
display: grid;
|
2968
2914
|
grid-template-columns: repeat(auto-fit, 14rem);
|
2969
2915
|
grid-gap: ${({ theme }) => theme.spaces[1]};
|
2970
2916
|
`;
|
2971
|
-
const ComponentBox =
|
2917
|
+
const ComponentBox = styledComponents.styled(designSystem.Flex)`
|
2918
|
+
color: ${({ theme }) => theme.colors.neutral600};
|
2919
|
+
cursor: pointer;
|
2920
|
+
|
2921
|
+
@media (prefers-reduced-motion: no-preference) {
|
2922
|
+
transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
|
2923
|
+
}
|
2924
|
+
|
2972
2925
|
&:focus,
|
2973
2926
|
&:hover {
|
2974
2927
|
border: 1px solid ${({ theme }) => theme.colors.primary200};
|
2975
2928
|
background: ${({ theme }) => theme.colors.primary100};
|
2976
|
-
|
2977
|
-
${designSystem.Typography} {
|
2978
|
-
color: ${({ theme }) => theme.colors.primary600};
|
2979
|
-
}
|
2980
|
-
|
2981
|
-
/* > Flex > ComponentIcon */
|
2982
|
-
> div > div:first-child {
|
2983
|
-
background: ${({ theme }) => theme.colors.primary200};
|
2984
|
-
color: ${({ theme }) => theme.colors.primary600};
|
2985
|
-
}
|
2929
|
+
color: ${({ theme }) => theme.colors.primary600};
|
2986
2930
|
}
|
2987
2931
|
`;
|
2988
2932
|
const ComponentPicker = ({
|
@@ -2991,19 +2935,8 @@ const ComponentPicker = ({
|
|
2991
2935
|
onClickAddComponent
|
2992
2936
|
}) => {
|
2993
2937
|
const { formatMessage } = reactIntl.useIntl();
|
2994
|
-
const [categoryToOpen, setCategoryToOpen] = React__namespace.useState("");
|
2995
|
-
React__namespace.useEffect(() => {
|
2996
|
-
const categoryKeys = Object.keys(dynamicComponentsByCategory);
|
2997
|
-
if (isOpen && categoryKeys.length > 0) {
|
2998
|
-
setCategoryToOpen(categoryKeys[0]);
|
2999
|
-
}
|
3000
|
-
}, [isOpen, dynamicComponentsByCategory]);
|
3001
2938
|
const handleAddComponentToDz = (componentUid) => () => {
|
3002
2939
|
onClickAddComponent(componentUid);
|
3003
|
-
setCategoryToOpen("");
|
3004
|
-
};
|
3005
|
-
const handleClickToggle = (categoryName) => {
|
3006
|
-
setCategoryToOpen((currentCat) => currentCat === categoryName ? "" : categoryName);
|
3007
2940
|
};
|
3008
2941
|
if (!isOpen) {
|
3009
2942
|
return null;
|
@@ -3024,14 +2957,12 @@ const ComponentPicker = ({
|
|
3024
2957
|
id: index.getTranslation("components.DynamicZone.ComponentPicker-label"),
|
3025
2958
|
defaultMessage: "Pick one component"
|
3026
2959
|
}) }) }),
|
3027
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
2960
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { defaultValue: Object.keys(dynamicComponentsByCategory)[0], children: Object.entries(dynamicComponentsByCategory).map(([category, components], index2) => /* @__PURE__ */ jsxRuntime.jsx(
|
3028
2961
|
ComponentCategory,
|
3029
2962
|
{
|
3030
2963
|
category,
|
3031
2964
|
components,
|
3032
2965
|
onAddComponent: handleAddComponentToDz,
|
3033
|
-
isOpen: category === categoryToOpen,
|
3034
|
-
onToggle: handleClickToggle,
|
3035
2966
|
variant: index2 % 2 === 1 ? "primary" : "secondary"
|
3036
2967
|
},
|
3037
2968
|
category
|
@@ -3046,27 +2977,21 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
|
|
3046
2977
|
id: "components.NotAllowedInput.text",
|
3047
2978
|
defaultMessage: "No permissions to see this field"
|
3048
2979
|
});
|
3049
|
-
return /* @__PURE__ */ jsxRuntime.
|
3050
|
-
designSystem.
|
3051
|
-
|
3052
|
-
|
3053
|
-
|
3054
|
-
|
3055
|
-
|
3056
|
-
|
3057
|
-
|
3058
|
-
|
3059
|
-
|
3060
|
-
|
3061
|
-
|
3062
|
-
|
3063
|
-
);
|
2980
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: name2, hint, name: name2, required, children: [
|
2981
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
|
2982
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
2983
|
+
designSystem.TextInput,
|
2984
|
+
{
|
2985
|
+
disabled: true,
|
2986
|
+
placeholder,
|
2987
|
+
startAction: /* @__PURE__ */ jsxRuntime.jsx(Icons.EyeStriked, { fill: "neutral600" }),
|
2988
|
+
type: "text",
|
2989
|
+
value: ""
|
2990
|
+
}
|
2991
|
+
),
|
2992
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
|
2993
|
+
] });
|
3064
2994
|
};
|
3065
|
-
const StyledIcon = styled__default.default(Icons.EyeStriked)`
|
3066
|
-
& > path {
|
3067
|
-
fill: ${({ theme }) => theme.colors.neutral600};
|
3068
|
-
}
|
3069
|
-
`;
|
3070
2995
|
function useDebounce(value, delay) {
|
3071
2996
|
const [debouncedValue, setDebouncedValue] = React.useState(value);
|
3072
2997
|
React.useEffect(() => {
|
@@ -3119,188 +3044,193 @@ const uidApi = index.contentManagerApi.injectEndpoints({
|
|
3119
3044
|
});
|
3120
3045
|
const { useGenerateUIDMutation, useGetDefaultUIDQuery, useGetAvailabilityQuery } = uidApi;
|
3121
3046
|
const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
|
3122
|
-
const UIDInput = React__namespace.forwardRef(
|
3123
|
-
|
3124
|
-
|
3125
|
-
|
3126
|
-
|
3127
|
-
|
3128
|
-
|
3129
|
-
|
3130
|
-
|
3131
|
-
|
3132
|
-
|
3133
|
-
|
3134
|
-
|
3135
|
-
|
3136
|
-
|
3137
|
-
|
3138
|
-
|
3139
|
-
|
3140
|
-
|
3141
|
-
field: props.name,
|
3142
|
-
data: {
|
3143
|
-
id: id ?? "",
|
3144
|
-
...allFormValues
|
3145
|
-
},
|
3146
|
-
params
|
3147
|
-
},
|
3148
|
-
{
|
3149
|
-
skip: field.value || !props.required
|
3150
|
-
}
|
3151
|
-
);
|
3152
|
-
React__namespace.useEffect(() => {
|
3153
|
-
if (apiError) {
|
3154
|
-
toggleNotification({
|
3155
|
-
type: "warning",
|
3156
|
-
message: formatAPIError(apiError)
|
3157
|
-
});
|
3158
|
-
}
|
3159
|
-
}, [apiError, formatAPIError, toggleNotification]);
|
3160
|
-
React__namespace.useEffect(() => {
|
3161
|
-
if (defaultGeneratedUID && field.value === void 0) {
|
3162
|
-
field.onChange(props.name, defaultGeneratedUID);
|
3163
|
-
}
|
3164
|
-
}, [defaultGeneratedUID, field, props.name]);
|
3165
|
-
const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
|
3166
|
-
const handleRegenerateClick = async () => {
|
3167
|
-
try {
|
3168
|
-
const res = await generateUID({
|
3047
|
+
const UIDInput = React__namespace.forwardRef(
|
3048
|
+
({ hint, label, labelAction, name: name2, required, ...props }, ref) => {
|
3049
|
+
const { model, id } = index.useDoc();
|
3050
|
+
const allFormValues = strapiAdmin.useForm("InputUID", (form) => form.values);
|
3051
|
+
const [availability, setAvailability] = React__namespace.useState();
|
3052
|
+
const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
|
3053
|
+
const field = strapiAdmin.useField(name2);
|
3054
|
+
const debouncedValue = useDebounce(field.value, 300);
|
3055
|
+
const { toggleNotification } = strapiAdmin.useNotification();
|
3056
|
+
const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
|
3057
|
+
const { formatMessage } = reactIntl.useIntl();
|
3058
|
+
const [{ query }] = strapiAdmin.useQueryParams();
|
3059
|
+
const params = React__namespace.useMemo(() => index.buildValidParams(query), [query]);
|
3060
|
+
const {
|
3061
|
+
data: defaultGeneratedUID,
|
3062
|
+
isLoading: isGeneratingDefaultUID,
|
3063
|
+
error: apiError
|
3064
|
+
} = useGetDefaultUIDQuery(
|
3065
|
+
{
|
3169
3066
|
contentTypeUID: model,
|
3170
|
-
field:
|
3171
|
-
data: {
|
3067
|
+
field: name2,
|
3068
|
+
data: {
|
3069
|
+
id: id ?? "",
|
3070
|
+
...allFormValues
|
3071
|
+
},
|
3172
3072
|
params
|
3173
|
-
}
|
3174
|
-
|
3175
|
-
field.
|
3176
|
-
}
|
3073
|
+
},
|
3074
|
+
{
|
3075
|
+
skip: field.value || !required
|
3076
|
+
}
|
3077
|
+
);
|
3078
|
+
React__namespace.useEffect(() => {
|
3079
|
+
if (apiError) {
|
3177
3080
|
toggleNotification({
|
3178
|
-
type: "
|
3179
|
-
message: formatAPIError(
|
3081
|
+
type: "warning",
|
3082
|
+
message: formatAPIError(apiError)
|
3180
3083
|
});
|
3181
3084
|
}
|
3182
|
-
}
|
3183
|
-
|
3184
|
-
|
3185
|
-
|
3186
|
-
|
3187
|
-
|
3188
|
-
|
3189
|
-
|
3190
|
-
|
3191
|
-
|
3192
|
-
|
3193
|
-
|
3194
|
-
|
3195
|
-
|
3196
|
-
|
3197
|
-
|
3198
|
-
|
3199
|
-
|
3200
|
-
|
3201
|
-
|
3202
|
-
|
3203
|
-
|
3204
|
-
|
3205
|
-
|
3206
|
-
|
3207
|
-
|
3208
|
-
|
3209
|
-
|
3210
|
-
|
3211
|
-
|
3212
|
-
|
3213
|
-
message: formatAPIError(availabilityError)
|
3214
|
-
});
|
3215
|
-
}
|
3216
|
-
}, [availabilityError, formatAPIError, toggleNotification]);
|
3217
|
-
React__namespace.useEffect(() => {
|
3218
|
-
setAvailability(availabilityData);
|
3219
|
-
let timer;
|
3220
|
-
if (availabilityData?.isAvailable) {
|
3221
|
-
timer = window.setTimeout(() => {
|
3222
|
-
setAvailability(void 0);
|
3223
|
-
}, 4e3);
|
3224
|
-
}
|
3225
|
-
return () => {
|
3226
|
-
if (timer) {
|
3227
|
-
clearTimeout(timer);
|
3085
|
+
}, [apiError, formatAPIError, toggleNotification]);
|
3086
|
+
React__namespace.useEffect(() => {
|
3087
|
+
if (defaultGeneratedUID && field.value === void 0) {
|
3088
|
+
field.onChange(name2, defaultGeneratedUID);
|
3089
|
+
}
|
3090
|
+
}, [defaultGeneratedUID, field, name2]);
|
3091
|
+
const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
|
3092
|
+
const handleRegenerateClick = async () => {
|
3093
|
+
try {
|
3094
|
+
const res = await generateUID({
|
3095
|
+
contentTypeUID: model,
|
3096
|
+
field: name2,
|
3097
|
+
data: { id: id ?? "", ...allFormValues },
|
3098
|
+
params
|
3099
|
+
});
|
3100
|
+
if ("data" in res) {
|
3101
|
+
field.onChange(name2, res.data);
|
3102
|
+
} else {
|
3103
|
+
toggleNotification({
|
3104
|
+
type: "danger",
|
3105
|
+
message: formatAPIError(res.error)
|
3106
|
+
});
|
3107
|
+
}
|
3108
|
+
} catch (err) {
|
3109
|
+
toggleNotification({
|
3110
|
+
type: "danger",
|
3111
|
+
message: formatMessage({
|
3112
|
+
id: "notification.error",
|
3113
|
+
defaultMessage: "An error occurred."
|
3114
|
+
})
|
3115
|
+
});
|
3228
3116
|
}
|
3229
3117
|
};
|
3230
|
-
|
3231
|
-
|
3232
|
-
|
3233
|
-
|
3234
|
-
|
3235
|
-
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
|
3236
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
3237
|
-
designSystem.TextInput,
|
3118
|
+
const {
|
3119
|
+
data: availabilityData,
|
3120
|
+
isLoading: isCheckingAvailability,
|
3121
|
+
error: availabilityError
|
3122
|
+
} = useGetAvailabilityQuery(
|
3238
3123
|
{
|
3239
|
-
|
3240
|
-
|
3241
|
-
|
3242
|
-
|
3243
|
-
|
3244
|
-
|
3245
|
-
|
3246
|
-
|
3247
|
-
|
3248
|
-
|
3249
|
-
|
3250
|
-
|
3251
|
-
|
3252
|
-
|
3253
|
-
|
3254
|
-
|
3255
|
-
|
3256
|
-
|
3257
|
-
|
3258
|
-
|
3259
|
-
|
3260
|
-
|
3261
|
-
|
3262
|
-
|
3263
|
-
|
3264
|
-
|
3265
|
-
|
3266
|
-
|
3267
|
-
|
3268
|
-
|
3269
|
-
|
3270
|
-
|
3271
|
-
|
3272
|
-
|
3273
|
-
|
3274
|
-
|
3275
|
-
|
3276
|
-
|
3277
|
-
|
3278
|
-
|
3279
|
-
|
3280
|
-
|
3281
|
-
|
3282
|
-
|
3124
|
+
contentTypeUID: model,
|
3125
|
+
field: name2,
|
3126
|
+
value: debouncedValue ? debouncedValue.trim() : "",
|
3127
|
+
params
|
3128
|
+
},
|
3129
|
+
{
|
3130
|
+
skip: !Boolean(
|
3131
|
+
debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
|
3132
|
+
)
|
3133
|
+
}
|
3134
|
+
);
|
3135
|
+
React__namespace.useEffect(() => {
|
3136
|
+
if (availabilityError) {
|
3137
|
+
toggleNotification({
|
3138
|
+
type: "warning",
|
3139
|
+
message: formatAPIError(availabilityError)
|
3140
|
+
});
|
3141
|
+
}
|
3142
|
+
}, [availabilityError, formatAPIError, toggleNotification]);
|
3143
|
+
React__namespace.useEffect(() => {
|
3144
|
+
setAvailability(availabilityData);
|
3145
|
+
let timer;
|
3146
|
+
if (availabilityData?.isAvailable) {
|
3147
|
+
timer = window.setTimeout(() => {
|
3148
|
+
setAvailability(void 0);
|
3149
|
+
}, 4e3);
|
3150
|
+
}
|
3151
|
+
return () => {
|
3152
|
+
if (timer) {
|
3153
|
+
clearTimeout(timer);
|
3154
|
+
}
|
3155
|
+
};
|
3156
|
+
}, [availabilityData]);
|
3157
|
+
const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
|
3158
|
+
const fieldRef = strapiAdmin.useFocusInputField(name2);
|
3159
|
+
const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
|
3160
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { hint, name: name2, error: field.error, required, children: [
|
3161
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
|
3162
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
3163
|
+
designSystem.TextInput,
|
3164
|
+
{
|
3165
|
+
ref: composedRefs,
|
3166
|
+
disabled: props.disabled,
|
3167
|
+
endAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { position: "relative", gap: 1, children: [
|
3168
|
+
availability && !showRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
|
3169
|
+
TextValidation,
|
3283
3170
|
{
|
3284
|
-
|
3285
|
-
|
3286
|
-
|
3287
|
-
|
3288
|
-
|
3289
|
-
|
3290
|
-
|
3291
|
-
|
3171
|
+
alignItems: "center",
|
3172
|
+
gap: 1,
|
3173
|
+
justifyContent: "flex-end",
|
3174
|
+
$available: !!availability?.isAvailable,
|
3175
|
+
"data-not-here-outer": true,
|
3176
|
+
position: "absolute",
|
3177
|
+
pointerEvents: "none",
|
3178
|
+
right: 6,
|
3179
|
+
width: "100px",
|
3180
|
+
children: [
|
3181
|
+
availability?.isAvailable ? /* @__PURE__ */ jsxRuntime.jsx(Icons.CheckCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icons.WarningCircle, {}),
|
3182
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
3183
|
+
designSystem.Typography,
|
3184
|
+
{
|
3185
|
+
textColor: availability.isAvailable ? "success600" : "danger600",
|
3186
|
+
variant: "pi",
|
3187
|
+
children: formatMessage(
|
3188
|
+
availability.isAvailable ? {
|
3189
|
+
id: "content-manager.components.uid.available",
|
3190
|
+
defaultMessage: "Available"
|
3191
|
+
} : {
|
3192
|
+
id: "content-manager.components.uid.unavailable",
|
3193
|
+
defaultMessage: "Unavailable"
|
3194
|
+
}
|
3195
|
+
)
|
3196
|
+
}
|
3197
|
+
)
|
3198
|
+
]
|
3292
3199
|
}
|
3293
|
-
)
|
3294
|
-
|
3295
|
-
|
3296
|
-
|
3297
|
-
|
3298
|
-
|
3299
|
-
|
3300
|
-
|
3301
|
-
|
3302
|
-
|
3303
|
-
|
3200
|
+
),
|
3201
|
+
!props.disabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
3202
|
+
showRegenerate && /* @__PURE__ */ jsxRuntime.jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
|
3203
|
+
id: "content-manager.components.uid.regenerate",
|
3204
|
+
defaultMessage: "Regenerate"
|
3205
|
+
}) }) }),
|
3206
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
3207
|
+
FieldActionWrapper,
|
3208
|
+
{
|
3209
|
+
onClick: handleRegenerateClick,
|
3210
|
+
label: formatMessage({
|
3211
|
+
id: "content-manager.components.uid.regenerate",
|
3212
|
+
defaultMessage: "Regenerate"
|
3213
|
+
}),
|
3214
|
+
onMouseEnter: () => setShowRegenerate(true),
|
3215
|
+
onMouseLeave: () => setShowRegenerate(false),
|
3216
|
+
children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.ArrowClockwise, {})
|
3217
|
+
}
|
3218
|
+
)
|
3219
|
+
] })
|
3220
|
+
] }),
|
3221
|
+
onChange: field.onChange,
|
3222
|
+
value: field.value ?? "",
|
3223
|
+
...props
|
3224
|
+
}
|
3225
|
+
),
|
3226
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
|
3227
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
|
3228
|
+
] });
|
3229
|
+
}
|
3230
|
+
);
|
3231
|
+
const FieldActionWrapper = styledComponents.styled(designSystem.Field.Action)`
|
3232
|
+
width: 1.6rem;
|
3233
|
+
|
3304
3234
|
svg {
|
3305
3235
|
height: 1.6rem;
|
3306
3236
|
width: 1.6rem;
|
@@ -3315,17 +3245,17 @@ const FieldActionWrapper = styled__default.default(designSystem.FieldAction)`
|
|
3315
3245
|
}
|
3316
3246
|
}
|
3317
3247
|
`;
|
3318
|
-
const TextValidation =
|
3248
|
+
const TextValidation = styledComponents.styled(designSystem.Flex)`
|
3319
3249
|
svg {
|
3320
3250
|
height: 1.2rem;
|
3321
3251
|
width: 1.2rem;
|
3322
3252
|
|
3323
3253
|
path {
|
3324
|
-
fill: ${({ theme, available }) => available ? theme.colors.success600 : theme.colors.danger600};
|
3254
|
+
fill: ${({ theme, $available }) => $available ? theme.colors.success600 : theme.colors.danger600};
|
3325
3255
|
}
|
3326
3256
|
}
|
3327
3257
|
`;
|
3328
|
-
const rotation =
|
3258
|
+
const rotation = styledComponents.keyframes`
|
3329
3259
|
from {
|
3330
3260
|
transform: rotate(0deg);
|
3331
3261
|
}
|
@@ -3333,9 +3263,10 @@ const rotation = styled.keyframes`
|
|
3333
3263
|
transform: rotate(359deg);
|
3334
3264
|
}
|
3335
3265
|
`;
|
3336
|
-
const LoadingWrapper =
|
3266
|
+
const LoadingWrapper = styledComponents.styled(designSystem.Flex)`
|
3337
3267
|
animation: ${rotation} 2s infinite linear;
|
3338
3268
|
`;
|
3269
|
+
const MemoizedUIDInput = React__namespace.memo(UIDInput);
|
3339
3270
|
const md = new Markdown__default.default({
|
3340
3271
|
html: true,
|
3341
3272
|
// Enable HTML tags in source
|
@@ -3378,7 +3309,7 @@ const PreviewWysiwyg = ({ data = "" }) => {
|
|
3378
3309
|
);
|
3379
3310
|
return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: html } }) });
|
3380
3311
|
};
|
3381
|
-
const Wrapper =
|
3312
|
+
const Wrapper = styledComponents.styled.div`
|
3382
3313
|
position: absolute;
|
3383
3314
|
top: 0;
|
3384
3315
|
width: 100%;
|
@@ -3670,17 +3601,17 @@ const Editor = React__namespace.forwardRef(
|
|
3670
3601
|
[editorRef]
|
3671
3602
|
);
|
3672
3603
|
return /* @__PURE__ */ jsxRuntime.jsxs(EditorAndPreviewWrapper, { children: [
|
3673
|
-
/* @__PURE__ */ jsxRuntime.jsx(EditorStylesContainer, { isExpandMode, disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: textareaRef }) }),
|
3604
|
+
/* @__PURE__ */ jsxRuntime.jsx(EditorStylesContainer, { $isExpandMode: isExpandMode, $disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: textareaRef }) }),
|
3674
3605
|
isPreviewMode && /* @__PURE__ */ jsxRuntime.jsx(PreviewWysiwyg, { data: value })
|
3675
3606
|
] });
|
3676
3607
|
}
|
3677
3608
|
);
|
3678
|
-
const EditorAndPreviewWrapper =
|
3609
|
+
const EditorAndPreviewWrapper = styledComponents.styled.div`
|
3679
3610
|
position: relative;
|
3680
3611
|
height: calc(100% - 48px);
|
3681
3612
|
`;
|
3682
|
-
const EditorStylesContainer =
|
3683
|
-
cursor: ${({ disabled }) => disabled ? "not-allowed !important" : "auto"};
|
3613
|
+
const EditorStylesContainer = styledComponents.styled.div`
|
3614
|
+
cursor: ${({ $disabled }) => $disabled ? "not-allowed !important" : "auto"};
|
3684
3615
|
height: 100%;
|
3685
3616
|
/* BASICS */
|
3686
3617
|
.CodeMirror-placeholder {
|
@@ -3690,7 +3621,7 @@ const EditorStylesContainer = styled__default.default.div`
|
|
3690
3621
|
.CodeMirror {
|
3691
3622
|
/* Set height, width, borders, and global font properties here */
|
3692
3623
|
font-size: 1.4rem;
|
3693
|
-
height: ${({ isExpandMode }) => isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
|
3624
|
+
height: ${({ $isExpandMode }) => $isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
|
3694
3625
|
color: ${({ theme }) => theme.colors.neutral800};
|
3695
3626
|
direction: ltr;
|
3696
3627
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
@@ -4096,13 +4027,13 @@ const EditorLayout = ({
|
|
4096
4027
|
}
|
4097
4028
|
);
|
4098
4029
|
};
|
4099
|
-
const ExpandWrapper =
|
4030
|
+
const ExpandWrapper = styledComponents.styled(designSystem.Flex)`
|
4100
4031
|
background: ${({ theme }) => `${theme.colors.neutral800}${Math.floor(0.2 * 255).toString(16).padStart(2, "0")}`};
|
4101
4032
|
`;
|
4102
|
-
const BoxWithBorder =
|
4033
|
+
const BoxWithBorder = styledComponents.styled(designSystem.Box)`
|
4103
4034
|
border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
|
4104
4035
|
`;
|
4105
|
-
const ExpandButton$1 =
|
4036
|
+
const ExpandButton$1 = styledComponents.styled(designSystem.BaseButton)`
|
4106
4037
|
background-color: transparent;
|
4107
4038
|
border: none;
|
4108
4039
|
align-items: center;
|
@@ -4373,7 +4304,7 @@ const quoteAndCodeHandler = (editor, markdownType) => {
|
|
4373
4304
|
insertWithoutTextToEdit(editor, markdownType, line, contentLength);
|
4374
4305
|
}
|
4375
4306
|
};
|
4376
|
-
const CustomIconButton =
|
4307
|
+
const CustomIconButton = styledComponents.styled(designSystem.IconButton)`
|
4377
4308
|
padding: ${({ theme }) => theme.spaces[2]};
|
4378
4309
|
/* Trick to prevent the outline from overflowing because of the general outline-offset */
|
4379
4310
|
outline-offset: -2px !important;
|
@@ -4383,16 +4314,16 @@ const CustomIconButton = styled__default.default(designSystem.IconButton)`
|
|
4383
4314
|
height: 1.8rem;
|
4384
4315
|
}
|
4385
4316
|
`;
|
4386
|
-
const CustomLinkIconButton =
|
4317
|
+
const CustomLinkIconButton = styledComponents.styled(CustomIconButton)`
|
4387
4318
|
svg {
|
4388
4319
|
width: 0.8rem;
|
4389
4320
|
height: 0.8rem;
|
4390
4321
|
}
|
4391
4322
|
`;
|
4392
|
-
const MainButtons =
|
4323
|
+
const MainButtons = styledComponents.styled(designSystem.IconButtonGroup)`
|
4393
4324
|
margin-left: ${({ theme }) => theme.spaces[4]};
|
4394
4325
|
`;
|
4395
|
-
const MoreButton =
|
4326
|
+
const MoreButton = styledComponents.styled(designSystem.IconButton)`
|
4396
4327
|
margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
|
4397
4328
|
padding: ${({ theme }) => theme.spaces[2]};
|
4398
4329
|
|
@@ -4401,10 +4332,10 @@ const MoreButton = styled__default.default(designSystem.IconButton)`
|
|
4401
4332
|
height: 1.8rem;
|
4402
4333
|
}
|
4403
4334
|
`;
|
4404
|
-
const IconButtonGroupMargin =
|
4335
|
+
const IconButtonGroupMargin = styledComponents.styled(designSystem.IconButtonGroup)`
|
4405
4336
|
margin-right: ${({ theme }) => `${theme.spaces[2]}`};
|
4406
4337
|
`;
|
4407
|
-
const ExpandButton =
|
4338
|
+
const ExpandButton = styledComponents.styled(designSystem.BaseButton)`
|
4408
4339
|
background-color: transparent;
|
4409
4340
|
border: none;
|
4410
4341
|
align-items: center;
|
@@ -4456,21 +4387,21 @@ const WysiwygNav = ({
|
|
4456
4387
|
justifyContent: "space-between",
|
4457
4388
|
borderRadius: `0.4rem 0.4rem 0 0`,
|
4458
4389
|
children: [
|
4459
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
4460
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.SingleSelect, { disabled: true, placeholder: selectPlaceholder,
|
4390
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
|
4391
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SingleSelect, { disabled: true, placeholder: selectPlaceholder, "aria-label": selectPlaceholder, children: [
|
4461
4392
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
|
4462
4393
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
|
4463
4394
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h3", children: "h3" }),
|
4464
4395
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h4", children: "h4" }),
|
4465
4396
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h5", children: "h5" }),
|
4466
4397
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
|
4467
|
-
] }),
|
4398
|
+
] }) }),
|
4468
4399
|
/* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
|
4469
|
-
/* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold",
|
4470
|
-
/* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic",
|
4471
|
-
/* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline",
|
4400
|
+
/* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
|
4401
|
+
/* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
|
4402
|
+
/* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {}) })
|
4472
4403
|
] }),
|
4473
|
-
/* @__PURE__ */ jsxRuntime.jsx(MoreButton, { disabled: true, label: "More",
|
4404
|
+
/* @__PURE__ */ jsxRuntime.jsx(MoreButton, { disabled: true, label: "More", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) })
|
4474
4405
|
] }),
|
4475
4406
|
!isExpandMode && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onTogglePreviewMode, variant: "tertiary", children: formatMessage({
|
4476
4407
|
id: "components.Wysiwyg.ToggleMode.markdown-mode",
|
@@ -4488,13 +4419,12 @@ const WysiwygNav = ({
|
|
4488
4419
|
justifyContent: "space-between",
|
4489
4420
|
borderRadius: `0.4rem 0.4rem 0 0`,
|
4490
4421
|
children: [
|
4491
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
4492
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
4422
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
|
4423
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
4493
4424
|
designSystem.SingleSelect,
|
4494
4425
|
{
|
4495
4426
|
placeholder: selectPlaceholder,
|
4496
|
-
label: selectPlaceholder,
|
4497
|
-
size: "S",
|
4427
|
+
"aria-label": selectPlaceholder,
|
4498
4428
|
onChange: (value) => onActionClick(value, editorRef),
|
4499
4429
|
children: [
|
4500
4430
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
|
@@ -4505,7 +4435,7 @@ const WysiwygNav = ({
|
|
4505
4435
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
|
4506
4436
|
]
|
4507
4437
|
}
|
4508
|
-
),
|
4438
|
+
) }),
|
4509
4439
|
/* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
|
4510
4440
|
/* @__PURE__ */ jsxRuntime.jsx(
|
4511
4441
|
CustomIconButton,
|
@@ -4513,7 +4443,7 @@ const WysiwygNav = ({
|
|
4513
4443
|
onClick: () => onActionClick("Bold", editorRef),
|
4514
4444
|
label: "Bold",
|
4515
4445
|
name: "Bold",
|
4516
|
-
|
4446
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {})
|
4517
4447
|
}
|
4518
4448
|
),
|
4519
4449
|
/* @__PURE__ */ jsxRuntime.jsx(
|
@@ -4522,7 +4452,7 @@ const WysiwygNav = ({
|
|
4522
4452
|
onClick: () => onActionClick("Italic", editorRef),
|
4523
4453
|
label: "Italic",
|
4524
4454
|
name: "Italic",
|
4525
|
-
|
4455
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {})
|
4526
4456
|
}
|
4527
4457
|
),
|
4528
4458
|
/* @__PURE__ */ jsxRuntime.jsx(
|
@@ -4531,19 +4461,11 @@ const WysiwygNav = ({
|
|
4531
4461
|
onClick: () => onActionClick("Underline", editorRef),
|
4532
4462
|
label: "Underline",
|
4533
4463
|
name: "Underline",
|
4534
|
-
|
4464
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {})
|
4535
4465
|
}
|
4536
4466
|
)
|
4537
4467
|
] }),
|
4538
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
4539
|
-
MoreButton,
|
4540
|
-
{
|
4541
|
-
ref: buttonMoreRef,
|
4542
|
-
onClick: handleTogglePopover,
|
4543
|
-
label: "More",
|
4544
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {})
|
4545
|
-
}
|
4546
|
-
),
|
4468
|
+
/* @__PURE__ */ jsxRuntime.jsx(MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, label: "More", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) }),
|
4547
4469
|
visiblePopover && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { onDismiss: handleTogglePopover, centered: true, source: buttonMoreRef, spacing: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
|
4548
4470
|
/* @__PURE__ */ jsxRuntime.jsxs(IconButtonGroupMargin, { children: [
|
4549
4471
|
/* @__PURE__ */ jsxRuntime.jsx(
|
@@ -4552,7 +4474,7 @@ const WysiwygNav = ({
|
|
4552
4474
|
onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
|
4553
4475
|
label: "Strikethrough",
|
4554
4476
|
name: "Strikethrough",
|
4555
|
-
|
4477
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.StrikeThrough, {})
|
4556
4478
|
}
|
4557
4479
|
),
|
4558
4480
|
/* @__PURE__ */ jsxRuntime.jsx(
|
@@ -4561,7 +4483,7 @@ const WysiwygNav = ({
|
|
4561
4483
|
onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
|
4562
4484
|
label: "BulletList",
|
4563
4485
|
name: "BulletList",
|
4564
|
-
|
4486
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.BulletList, {})
|
4565
4487
|
}
|
4566
4488
|
),
|
4567
4489
|
/* @__PURE__ */ jsxRuntime.jsx(
|
@@ -4570,7 +4492,7 @@ const WysiwygNav = ({
|
|
4570
4492
|
onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
|
4571
4493
|
label: "NumberList",
|
4572
4494
|
name: "NumberList",
|
4573
|
-
|
4495
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.NumberList, {})
|
4574
4496
|
}
|
4575
4497
|
)
|
4576
4498
|
] }),
|
@@ -4581,7 +4503,7 @@ const WysiwygNav = ({
|
|
4581
4503
|
onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
|
4582
4504
|
label: "Code",
|
4583
4505
|
name: "Code",
|
4584
|
-
|
4506
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Code, {})
|
4585
4507
|
}
|
4586
4508
|
),
|
4587
4509
|
/* @__PURE__ */ jsxRuntime.jsx(
|
@@ -4593,7 +4515,7 @@ const WysiwygNav = ({
|
|
4593
4515
|
},
|
4594
4516
|
label: "Image",
|
4595
4517
|
name: "Image",
|
4596
|
-
|
4518
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Image, {})
|
4597
4519
|
}
|
4598
4520
|
),
|
4599
4521
|
/* @__PURE__ */ jsxRuntime.jsx(
|
@@ -4602,7 +4524,7 @@ const WysiwygNav = ({
|
|
4602
4524
|
onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
|
4603
4525
|
label: "Link",
|
4604
4526
|
name: "Link",
|
4605
|
-
|
4527
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Link, {})
|
4606
4528
|
}
|
4607
4529
|
),
|
4608
4530
|
/* @__PURE__ */ jsxRuntime.jsx(
|
@@ -4611,7 +4533,7 @@ const WysiwygNav = ({
|
|
4611
4533
|
onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
|
4612
4534
|
label: "Quote",
|
4613
4535
|
name: "Quote",
|
4614
|
-
|
4536
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Quotes, {})
|
4615
4537
|
}
|
4616
4538
|
)
|
4617
4539
|
] })
|
@@ -4625,19 +4547,6 @@ const WysiwygNav = ({
|
|
4625
4547
|
}
|
4626
4548
|
);
|
4627
4549
|
};
|
4628
|
-
const StyledFlex = styled__default.default(designSystem.Flex)`
|
4629
|
-
/* Hide the label, every input needs a label. */
|
4630
|
-
label {
|
4631
|
-
border: 0;
|
4632
|
-
clip: rect(0 0 0 0);
|
4633
|
-
height: 1px;
|
4634
|
-
margin: -1px;
|
4635
|
-
overflow: hidden;
|
4636
|
-
padding: 0;
|
4637
|
-
position: absolute;
|
4638
|
-
width: 1px;
|
4639
|
-
}
|
4640
|
-
`;
|
4641
4550
|
const Wysiwyg = React__namespace.forwardRef(
|
4642
4551
|
({ hint, disabled, label, name: name2, placeholder, required, labelAction }, forwardedRef) => {
|
4643
4552
|
const field = strapiAdmin.useField(name2);
|
@@ -4696,15 +4605,15 @@ const Wysiwyg = React__namespace.forwardRef(
|
|
4696
4605
|
const handleSelectAssets = (files) => {
|
4697
4606
|
const formattedFiles = files.map((f) => ({
|
4698
4607
|
alt: f.alternativeText || f.name,
|
4699
|
-
url:
|
4608
|
+
url: usePrev.prefixFileUrlWithBackendUrl(f.url),
|
4700
4609
|
mime: f.mime
|
4701
4610
|
}));
|
4702
4611
|
insertFile(editorRef, formattedFiles);
|
4703
4612
|
setMediaLibVisible(false);
|
4704
4613
|
};
|
4705
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field, { name: name2, hint, error: field.error, required, children: [
|
4614
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: name2, hint, error: field.error, required, children: [
|
4706
4615
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
4707
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
4616
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
|
4708
4617
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
4709
4618
|
EditorLayout,
|
4710
4619
|
{
|
@@ -4745,14 +4654,15 @@ const Wysiwyg = React__namespace.forwardRef(
|
|
4745
4654
|
]
|
4746
4655
|
}
|
4747
4656
|
),
|
4748
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
4749
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.
|
4657
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
|
4658
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
|
4750
4659
|
] }),
|
4751
4660
|
mediaLibVisible && // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.
|
4752
4661
|
/* @__PURE__ */ jsxRuntime.jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
|
4753
4662
|
] });
|
4754
4663
|
}
|
4755
4664
|
);
|
4665
|
+
const MemoizedWysiwyg = React__namespace.memo(Wysiwyg);
|
4756
4666
|
const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
|
4757
4667
|
const { id } = index.useDoc();
|
4758
4668
|
const isFormDisabled = strapiAdmin.useForm("InputRenderer", (state) => state.disabled);
|
@@ -4802,10 +4712,10 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
|
|
4802
4712
|
}
|
4803
4713
|
switch (props.type) {
|
4804
4714
|
case "blocks":
|
4805
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
4715
|
+
return /* @__PURE__ */ jsxRuntime.jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
4806
4716
|
case "component":
|
4807
4717
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
4808
|
-
|
4718
|
+
MemoizedComponentInput,
|
4809
4719
|
{
|
4810
4720
|
...props,
|
4811
4721
|
hint,
|
@@ -4817,11 +4727,11 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
|
|
4817
4727
|
case "dynamiczone":
|
4818
4728
|
return /* @__PURE__ */ jsxRuntime.jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
|
4819
4729
|
case "relation":
|
4820
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Relations.
|
4730
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Relations.MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
|
4821
4731
|
case "richtext":
|
4822
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
4732
|
+
return /* @__PURE__ */ jsxRuntime.jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
4823
4733
|
case "uid":
|
4824
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
4734
|
+
return /* @__PURE__ */ jsxRuntime.jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
|
4825
4735
|
case "enumeration":
|
4826
4736
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
4827
4737
|
strapiAdmin.InputRenderer,
|
@@ -4893,6 +4803,7 @@ const getMinMax = (attribute) => {
|
|
4893
4803
|
return { maximum: void 0, minimum: void 0 };
|
4894
4804
|
}
|
4895
4805
|
};
|
4806
|
+
const MemoizedInputRenderer = React.memo(InputRenderer);
|
4896
4807
|
const DynamicComponent = ({
|
4897
4808
|
componentUid,
|
4898
4809
|
disabled,
|
@@ -4906,7 +4817,6 @@ const DynamicComponent = ({
|
|
4906
4817
|
dynamicComponentsByCategory = {},
|
4907
4818
|
onAddComponent
|
4908
4819
|
}) => {
|
4909
|
-
const [isOpen, setIsOpen] = React__namespace.useState(true);
|
4910
4820
|
const { formatMessage } = reactIntl.useIntl();
|
4911
4821
|
const formValues = strapiAdmin.useForm("DynamicComponent", (state) => state.values);
|
4912
4822
|
const {
|
@@ -4915,7 +4825,7 @@ const DynamicComponent = ({
|
|
4915
4825
|
const title = React__namespace.useMemo(() => {
|
4916
4826
|
const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
|
4917
4827
|
const mainFieldValue = objects.getIn(formValues, `${name2}.${index$1}.${mainField}`);
|
4918
|
-
const displayedValue = mainField === "id" ? "" : String(mainFieldValue).trim();
|
4828
|
+
const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
|
4919
4829
|
const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
|
4920
4830
|
return mainValue;
|
4921
4831
|
}, [componentUid, components, formValues, name2, index$1]);
|
@@ -4926,9 +4836,6 @@ const DynamicComponent = ({
|
|
4926
4836
|
) ?? { icon: null, displayName: null };
|
4927
4837
|
return { icon: icon2, displayName: displayName2 };
|
4928
4838
|
}, [componentUid, dynamicComponentsByCategory]);
|
4929
|
-
const handleToggle = () => {
|
4930
|
-
setIsOpen((s) => !s);
|
4931
|
-
};
|
4932
4839
|
const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
|
4933
4840
|
type: `${useDragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name2}`,
|
4934
4841
|
index: index$1,
|
@@ -4946,9 +4853,9 @@ const DynamicComponent = ({
|
|
4946
4853
|
dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
|
4947
4854
|
}, [dragPreviewRef, index$1]);
|
4948
4855
|
const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
|
4949
|
-
const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(
|
4856
|
+
const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
4950
4857
|
/* @__PURE__ */ jsxRuntime.jsx(
|
4951
|
-
|
4858
|
+
designSystem.IconButton,
|
4952
4859
|
{
|
4953
4860
|
borderWidth: 0,
|
4954
4861
|
label: formatMessage(
|
@@ -4965,10 +4872,7 @@ const DynamicComponent = ({
|
|
4965
4872
|
/* @__PURE__ */ jsxRuntime.jsx(
|
4966
4873
|
designSystem.IconButton,
|
4967
4874
|
{
|
4968
|
-
forwardedAs: "div",
|
4969
|
-
role: "button",
|
4970
4875
|
borderWidth: 0,
|
4971
|
-
tabIndex: 0,
|
4972
4876
|
onClick: (e) => e.stopPropagation(),
|
4973
4877
|
"data-handler-id": handlerId,
|
4974
4878
|
ref: dragRef,
|
@@ -4983,7 +4887,7 @@ const DynamicComponent = ({
|
|
4983
4887
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
|
4984
4888
|
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
|
4985
4889
|
/* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false }),
|
4986
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, {
|
4890
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "span", children: formatMessage({
|
4987
4891
|
id: index.getTranslation("components.DynamicZone.more-actions"),
|
4988
4892
|
defaultMessage: "More actions"
|
4989
4893
|
}) })
|
@@ -5012,62 +4916,48 @@ const DynamicComponent = ({
|
|
5012
4916
|
] })
|
5013
4917
|
] })
|
5014
4918
|
] });
|
5015
|
-
|
4919
|
+
const accordionTitle = title ? `${displayName} ${title}` : displayName;
|
4920
|
+
const accordionValue = React__namespace.useId();
|
4921
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
|
5016
4922
|
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Rectangle, { background: "neutral200" }) }),
|
5017
|
-
/* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.
|
5018
|
-
/* @__PURE__ */ jsxRuntime.
|
5019
|
-
|
5020
|
-
|
5021
|
-
|
5022
|
-
|
5023
|
-
|
5024
|
-
|
5025
|
-
|
5026
|
-
|
5027
|
-
|
4923
|
+
/* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: accordionValue, children: [
|
4924
|
+
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
|
4925
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
4926
|
+
designSystem.Accordion.Trigger,
|
4927
|
+
{
|
4928
|
+
icon: icon && ComponentIcon.COMPONENT_ICONS[icon] ? ComponentIcon.COMPONENT_ICONS[icon] : ComponentIcon.COMPONENT_ICONS.dashboard,
|
4929
|
+
children: accordionTitle
|
4930
|
+
}
|
4931
|
+
),
|
4932
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Actions, { children: accordionActions })
|
4933
|
+
] }),
|
4934
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
|
5028
4935
|
const fieldName = `${name2}.${index$1}.${field.name}`;
|
5029
|
-
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
|
4936
|
+
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
|
5030
4937
|
}) }, rowInd)) }) }) })
|
5031
|
-
] }) })
|
4938
|
+
] }) }) })
|
5032
4939
|
] });
|
5033
4940
|
};
|
5034
|
-
const
|
5035
|
-
/*
|
5036
|
-
we need to remove the background from the button but we can't
|
5037
|
-
wrap the element in styled because it breaks the forwardedAs which
|
5038
|
-
we need for drag handler to work on firefox
|
5039
|
-
*/
|
5040
|
-
div[role='button'] {
|
5041
|
-
background: transparent;
|
5042
|
-
}
|
5043
|
-
`;
|
5044
|
-
const IconButtonCustom = styled__default.default(designSystem.IconButton)`
|
5045
|
-
background-color: transparent;
|
5046
|
-
|
5047
|
-
svg path {
|
5048
|
-
fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
|
5049
|
-
}
|
5050
|
-
`;
|
5051
|
-
const StyledBox = styled__default.default(designSystem.Box)`
|
4941
|
+
const StyledBox = styledComponents.styled(designSystem.Box)`
|
5052
4942
|
> div:first-child {
|
5053
4943
|
box-shadow: ${({ theme }) => theme.shadows.tableShadow};
|
5054
4944
|
}
|
5055
4945
|
`;
|
5056
|
-
const AccordionContentRadius =
|
4946
|
+
const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
|
5057
4947
|
border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
|
5058
4948
|
`;
|
5059
|
-
const Rectangle =
|
4949
|
+
const Rectangle = styledComponents.styled(designSystem.Box)`
|
5060
4950
|
width: ${({ theme }) => theme.spaces[2]};
|
5061
4951
|
height: ${({ theme }) => theme.spaces[4]};
|
5062
4952
|
`;
|
5063
|
-
const Preview =
|
4953
|
+
const Preview = styledComponents.styled.span`
|
5064
4954
|
display: block;
|
5065
4955
|
background-color: ${({ theme }) => theme.colors.primary100};
|
5066
4956
|
outline: 1px dashed ${({ theme }) => theme.colors.primary500};
|
5067
4957
|
outline-offset: -1px;
|
5068
4958
|
padding: ${({ theme }) => theme.spaces[6]};
|
5069
4959
|
`;
|
5070
|
-
const ComponentContainer =
|
4960
|
+
const ComponentContainer = styledComponents.styled(designSystem.Box)`
|
5071
4961
|
list-style: none;
|
5072
4962
|
padding: 0;
|
5073
4963
|
margin: 0;
|
@@ -5118,7 +5008,7 @@ const [DynamicZoneProvider, useDynamicZone] = strapiAdmin.createContext(
|
|
5118
5008
|
);
|
5119
5009
|
const DynamicZone = ({
|
5120
5010
|
attribute,
|
5121
|
-
disabled,
|
5011
|
+
disabled: disabledProp,
|
5122
5012
|
hint,
|
5123
5013
|
label,
|
5124
5014
|
labelAction,
|
@@ -5128,7 +5018,8 @@ const DynamicZone = ({
|
|
5128
5018
|
const { max = Infinity, min = -Infinity } = attribute ?? {};
|
5129
5019
|
const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
|
5130
5020
|
const [liveText, setLiveText] = React__namespace.useState("");
|
5131
|
-
const { components } = index.useDoc();
|
5021
|
+
const { components, isLoading } = index.useDoc();
|
5022
|
+
const disabled = disabledProp || isLoading;
|
5132
5023
|
const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm(
|
5133
5024
|
"DynamicZone",
|
5134
5025
|
({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
|
@@ -5335,13 +5226,13 @@ const DynamicZone = ({
|
|
5335
5226
|
)
|
5336
5227
|
] }) });
|
5337
5228
|
};
|
5338
|
-
exports.BlocksInput = BlocksInput;
|
5339
|
-
exports.ComponentInput = ComponentInput;
|
5340
5229
|
exports.DynamicZone = DynamicZone;
|
5341
|
-
exports.
|
5230
|
+
exports.MemoizedBlocksInput = MemoizedBlocksInput;
|
5231
|
+
exports.MemoizedComponentInput = MemoizedComponentInput;
|
5232
|
+
exports.MemoizedInputRenderer = MemoizedInputRenderer;
|
5233
|
+
exports.MemoizedUIDInput = MemoizedUIDInput;
|
5234
|
+
exports.MemoizedWysiwyg = MemoizedWysiwyg;
|
5342
5235
|
exports.NotAllowedInput = NotAllowedInput;
|
5343
|
-
exports.UIDInput = UIDInput;
|
5344
|
-
exports.Wysiwyg = Wysiwyg;
|
5345
5236
|
exports.createDefaultForm = createDefaultForm;
|
5346
5237
|
exports.prepareTempKeys = prepareTempKeys;
|
5347
5238
|
exports.removeFieldsThatDontExistOnSchema = removeFieldsThatDontExistOnSchema;
|
@@ -5349,4 +5240,4 @@ exports.transformDocument = transformDocument;
|
|
5349
5240
|
exports.useDynamicZone = useDynamicZone;
|
5350
5241
|
exports.useFieldHint = useFieldHint;
|
5351
5242
|
exports.useLazyComponents = useLazyComponents;
|
5352
|
-
//# sourceMappingURL=Field-
|
5243
|
+
//# sourceMappingURL=Field-dLk-vgLL.js.map
|