@strapi/content-manager 5.0.0-beta.6 → 5.0.0-beta.7
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-43KmCNQE.js → ComponentConfigurationPage-DMq0wvcL.js} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage-43KmCNQE.js.map → ComponentConfigurationPage-DMq0wvcL.js.map} +1 -1
- package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs → ComponentConfigurationPage-uTMkLI60.mjs} +3 -3
- package/dist/_chunks/{ComponentConfigurationPage--2aLCv-G.mjs.map → ComponentConfigurationPage-uTMkLI60.mjs.map} +1 -1
- package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs → EditConfigurationPage-B2HhCh-b.mjs} +3 -3
- package/dist/_chunks/{EditConfigurationPage-CUcGHHvQ.mjs.map → EditConfigurationPage-B2HhCh-b.mjs.map} +1 -1
- package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js → EditConfigurationPage-BFpQwwbc.js} +3 -3
- package/dist/_chunks/{EditConfigurationPage-BfFzJ4Br.js.map → EditConfigurationPage-BFpQwwbc.js.map} +1 -1
- package/dist/_chunks/{EditViewPage-Bm8lgcm6.mjs → EditViewPage-BVIrgjyG.mjs} +4 -4
- package/dist/_chunks/EditViewPage-BVIrgjyG.mjs.map +1 -0
- package/dist/_chunks/{EditViewPage-CzOT5Kpj.js → EditViewPage-CXXue16T.js} +5 -7
- package/dist/_chunks/EditViewPage-CXXue16T.js.map +1 -0
- package/dist/_chunks/{Field-Dlh0uGnL.mjs → Field-0_2h1vuK.mjs} +303 -294
- package/dist/_chunks/Field-0_2h1vuK.mjs.map +1 -0
- package/dist/_chunks/{Field-Caef4JjM.js → Field-ZgzKlgxR.js} +363 -355
- package/dist/_chunks/Field-ZgzKlgxR.js.map +1 -0
- package/dist/_chunks/{Form-EnaQL_6L.mjs → Form-B7TUnQDd.mjs} +14 -14
- package/dist/_chunks/Form-B7TUnQDd.mjs.map +1 -0
- package/dist/_chunks/{Form-BzuAjtRq.js → Form-DgTc2qkx.js} +14 -15
- package/dist/_chunks/Form-DgTc2qkx.js.map +1 -0
- package/dist/_chunks/{History-C17LiyRg.js → History-DtHjQuqM.js} +28 -40
- package/dist/_chunks/History-DtHjQuqM.js.map +1 -0
- package/dist/_chunks/{History-D6sbCJvo.mjs → History-Dug_4HIA.mjs} +28 -39
- package/dist/_chunks/History-Dug_4HIA.mjs.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-Dks5SX6f.js → ListConfigurationPage-BuSdTjfa.js} +17 -19
- package/dist/_chunks/ListConfigurationPage-BuSdTjfa.js.map +1 -0
- package/dist/_chunks/{ListConfigurationPage-Ce4qs7qE.mjs → ListConfigurationPage-CmEeNg6T.mjs} +14 -14
- package/dist/_chunks/ListConfigurationPage-CmEeNg6T.mjs.map +1 -0
- package/dist/_chunks/{ListViewPage-BwrZrPsh.js → ListViewPage-CExWwa4S.js} +24 -37
- package/dist/_chunks/ListViewPage-CExWwa4S.js.map +1 -0
- package/dist/_chunks/{ListViewPage-Be7S5aKL.mjs → ListViewPage-Dsoa3wEA.mjs} +21 -33
- package/dist/_chunks/ListViewPage-Dsoa3wEA.mjs.map +1 -0
- package/dist/_chunks/{NoContentTypePage-Cu5r1-JT.js → NoContentTypePage-DCUL8gVi.js} +5 -5
- package/dist/_chunks/NoContentTypePage-DCUL8gVi.js.map +1 -0
- package/dist/_chunks/{NoContentTypePage-CIPmYQMm.mjs → NoContentTypePage-Dh38hBXB.mjs} +7 -7
- package/dist/_chunks/NoContentTypePage-Dh38hBXB.mjs.map +1 -0
- package/dist/_chunks/{NoPermissionsPage-C-j6TEUF.js → NoPermissionsPage-BK-XCpIy.js} +4 -5
- package/dist/_chunks/NoPermissionsPage-BK-XCpIy.js.map +1 -0
- package/dist/_chunks/{NoPermissionsPage-DhJ7LYrr.mjs → NoPermissionsPage-Dt2O40ey.mjs} +5 -6
- package/dist/_chunks/NoPermissionsPage-Dt2O40ey.mjs.map +1 -0
- package/dist/_chunks/{Relations-Czs-uZ-s.js → Relations-CNypkp-g.js} +66 -59
- package/dist/_chunks/Relations-CNypkp-g.js.map +1 -0
- package/dist/_chunks/{Relations-CY7AtkDA.mjs → Relations-DZyjWZHl.mjs} +62 -54
- package/dist/_chunks/Relations-DZyjWZHl.mjs.map +1 -0
- package/dist/_chunks/{index-DNVx8ssZ.mjs → index-B3c-4it4.mjs} +54 -41
- package/dist/_chunks/index-B3c-4it4.mjs.map +1 -0
- package/dist/_chunks/{index-X_2tafck.js → index-DFK7LwDW.js} +59 -47
- package/dist/_chunks/index-DFK7LwDW.js.map +1 -0
- package/dist/_chunks/{layout-Dnh0PNp9.mjs → layout-B5cm7cZj.mjs} +10 -10
- package/dist/_chunks/layout-B5cm7cZj.mjs.map +1 -0
- package/dist/_chunks/{layout-dBc7wN7L.js → layout-DLih5-_W.js} +11 -13
- package/dist/_chunks/layout-DLih5-_W.js.map +1 -0
- package/dist/_chunks/{relations-Dx7tMKJN.mjs → relations-BZkrMa2z.mjs} +2 -2
- package/dist/_chunks/{relations-Dx7tMKJN.mjs.map → relations-BZkrMa2z.mjs.map} +1 -1
- package/dist/_chunks/{relations-4pHtBrHJ.js → relations-CTvkuINQ.js} +2 -2
- package/dist/_chunks/{relations-4pHtBrHJ.js.map → relations-CTvkuINQ.js.map} +1 -1
- package/dist/_chunks/useDragAndDrop-DdHgKsqq.mjs.map +1 -1
- package/dist/_chunks/useDragAndDrop-J0TUUbR6.js.map +1 -1
- package/dist/admin/index.js +1 -1
- package/dist/admin/index.mjs +1 -1
- package/dist/admin/src/hooks/useDocumentLayout.d.ts +1 -1
- 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/FormInputs/Relations.d.ts +8 -3
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.d.ts +3 -49
- package/dist/admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygStyles.d.ts +48 -54
- package/dist/admin/src/utils/api.d.ts +6 -7
- package/dist/server/index.js +333 -327
- package/dist/server/index.js.map +1 -1
- package/dist/server/index.mjs +340 -334
- 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/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 +11 -11
- package/dist/server/src/services/document-manager.d.ts +12 -11
- package/dist/server/src/services/document-manager.d.ts.map +1 -1
- package/dist/server/src/services/index.d.ts +11 -11
- package/dist/shared/contracts/collection-types.d.ts +3 -1
- package/dist/shared/contracts/collection-types.d.ts.map +1 -1
- package/package.json +10 -11
- package/dist/_chunks/CardDragPreview-DSVYodBX.js.map +0 -1
- package/dist/_chunks/CardDragPreview-ikSG4M46.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
@@ -2,14 +2,14 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
2
|
import * as React from "react";
|
3
3
|
import { useState, useEffect, useCallback } from "react";
|
4
4
|
import { useStrapiApp, createContext, useField, useNotification, useForm, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from "@strapi/admin/strapi-admin";
|
5
|
-
import { Typography, Flex, Box, BaseLink, Button, useComposedRefs, Popover, Field,
|
5
|
+
import { Typography, Flex, Box, BaseLink, Button, useComposedRefs, Popover, Field, Tooltip, SingleSelect, SingleSelectOption, IconButton, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, GridItem, TextButton, KeyboardNavigable, Accordion, AccordionToggle, AccordionContent as AccordionContent$1, BaseButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
|
6
6
|
import pipe$1 from "lodash/fp/pipe";
|
7
7
|
import { useIntl } from "react-intl";
|
8
|
-
import { l as DOCUMENT_META_FIELDS, g as getTranslation, b as useDoc, d as contentManagerApi, c as buildValidParams, e as useDocumentRBAC, m as useDocLayout } from "./index-
|
8
|
+
import { l as DOCUMENT_META_FIELDS, g as getTranslation, b as useDoc, d as contentManagerApi, c as buildValidParams, e as useDocumentRBAC, m as useDocLayout } from "./index-B3c-4it4.mjs";
|
9
9
|
import { generateNKeysBetween } from "fractional-indexing";
|
10
|
-
import { u as useComponent, C as ComponentProvider, R as RelationsField } from "./Relations-
|
10
|
+
import { u as useComponent, C as ComponentProvider, R as RelationsField } from "./Relations-DZyjWZHl.mjs";
|
11
11
|
import { Code, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Expand, PlusCircle, Plus, Trash, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, More } from "@strapi/icons";
|
12
|
-
import styled,
|
12
|
+
import { styled, css, keyframes } from "styled-components";
|
13
13
|
import { C as ComponentIcon } from "./ComponentIcon-BOFnK76n.mjs";
|
14
14
|
import { getEmptyImage } from "react-dnd-html5-backend";
|
15
15
|
import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from "./useDragAndDrop-DdHgKsqq.mjs";
|
@@ -258,27 +258,27 @@ const codeBlocks = {
|
|
258
258
|
dragHandleTopMargin: "10px"
|
259
259
|
}
|
260
260
|
};
|
261
|
-
const H1 = styled(Typography).attrs({
|
261
|
+
const H1 = styled(Typography).attrs({ tag: "h1" })`
|
262
262
|
font-size: 4.2rem;
|
263
263
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
264
264
|
`;
|
265
|
-
const H2 = styled(Typography).attrs({
|
265
|
+
const H2 = styled(Typography).attrs({ tag: "h2" })`
|
266
266
|
font-size: 3.5rem;
|
267
267
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
268
268
|
`;
|
269
|
-
const H3 = styled(Typography).attrs({
|
269
|
+
const H3 = styled(Typography).attrs({ tag: "h3" })`
|
270
270
|
font-size: 2.9rem;
|
271
271
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
272
272
|
`;
|
273
|
-
const H4 = styled(Typography).attrs({
|
273
|
+
const H4 = styled(Typography).attrs({ tag: "h4" })`
|
274
274
|
font-size: 2.4rem;
|
275
275
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
276
276
|
`;
|
277
|
-
const H5 = styled(Typography).attrs({
|
277
|
+
const H5 = styled(Typography).attrs({ tag: "h5" })`
|
278
278
|
font-size: 2rem;
|
279
279
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
280
280
|
`;
|
281
|
-
const H6 = styled(Typography).attrs({
|
281
|
+
const H6 = styled(Typography).attrs({ tag: "h6" })`
|
282
282
|
font-size: 1.6rem;
|
283
283
|
line-height: ${({ theme }) => theme.lineHeights[1]};
|
284
284
|
`;
|
@@ -367,7 +367,7 @@ const headingBlocks = {
|
|
367
367
|
const ImageWrapper = styled(Flex)`
|
368
368
|
transition-property: box-shadow;
|
369
369
|
transition-duration: 0.2s;
|
370
|
-
${(props) => props
|
370
|
+
${(props) => props.$isFocused && css`
|
371
371
|
box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;
|
372
372
|
`}
|
373
373
|
|
@@ -419,7 +419,7 @@ const Image = ({ attributes, children, element }) => {
|
|
419
419
|
background: "neutral100",
|
420
420
|
contentEditable: false,
|
421
421
|
justifyContent: "center",
|
422
|
-
isFocused: editorIsFocused && imageIsSelected,
|
422
|
+
$isFocused: editorIsFocused && imageIsSelected,
|
423
423
|
hasRadius: true,
|
424
424
|
children: /* @__PURE__ */ jsx("img", { src: url, alt: alternativeText, width, height })
|
425
425
|
}
|
@@ -579,7 +579,7 @@ const StyledBaseLink = styled(BaseLink)`
|
|
579
579
|
text-decoration: none;
|
580
580
|
`;
|
581
581
|
const RemoveButton = styled(Button)`
|
582
|
-
visibility: ${(props) => props
|
582
|
+
visibility: ${(props) => props.$visible ? "visible" : "hidden"};
|
583
583
|
`;
|
584
584
|
const LinkContent = React.forwardRef(
|
585
585
|
({ link, children, attributes }, forwardedRef) => {
|
@@ -647,14 +647,14 @@ const LinkContent = React.forwardRef(
|
|
647
647
|
children
|
648
648
|
}
|
649
649
|
),
|
650
|
-
popoverOpen && /* @__PURE__ */ jsx(Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxs(Flex, {
|
651
|
-
/* @__PURE__ */ jsx(Field, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
652
|
-
/* @__PURE__ */ jsx(
|
650
|
+
popoverOpen && /* @__PURE__ */ jsx(Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxs(Flex, { tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
|
651
|
+
/* @__PURE__ */ jsx(Field.Root, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
652
|
+
/* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
|
653
653
|
id: "components.Blocks.popover.text",
|
654
654
|
defaultMessage: "Text"
|
655
655
|
}) }),
|
656
656
|
/* @__PURE__ */ jsx(
|
657
|
-
|
657
|
+
Field.Input,
|
658
658
|
{
|
659
659
|
name: "text",
|
660
660
|
placeholder: formatMessage({
|
@@ -668,13 +668,13 @@ const LinkContent = React.forwardRef(
|
|
668
668
|
}
|
669
669
|
)
|
670
670
|
] }) }),
|
671
|
-
/* @__PURE__ */ jsx(Field, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
672
|
-
/* @__PURE__ */ jsx(
|
671
|
+
/* @__PURE__ */ jsx(Field.Root, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
|
672
|
+
/* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
|
673
673
|
id: "components.Blocks.popover.link",
|
674
674
|
defaultMessage: "Link"
|
675
675
|
}) }),
|
676
676
|
/* @__PURE__ */ jsx(
|
677
|
-
|
677
|
+
Field.Input,
|
678
678
|
{
|
679
679
|
ref: linkInputRef,
|
680
680
|
name: "url",
|
@@ -693,7 +693,7 @@ const LinkContent = React.forwardRef(
|
|
693
693
|
{
|
694
694
|
variant: "danger-light",
|
695
695
|
onClick: () => removeLink(editor),
|
696
|
-
visible: showRemoveButton,
|
696
|
+
$visible: showRemoveButton,
|
697
697
|
children: formatMessage({
|
698
698
|
id: "components.Blocks.popover.remove",
|
699
699
|
defaultMessage: "Remove"
|
@@ -748,11 +748,11 @@ const listStyle = css`
|
|
748
748
|
}
|
749
749
|
`;
|
750
750
|
const Orderedlist = styled.ol`
|
751
|
-
list-style-type: ${(props) => props
|
751
|
+
list-style-type: ${(props) => props.$listStyleType};
|
752
752
|
${listStyle}
|
753
753
|
`;
|
754
754
|
const Unorderedlist = styled.ul`
|
755
|
-
list-style-type: ${(props) => props
|
755
|
+
list-style-type: ${(props) => props.$listStyleType};
|
756
756
|
${listStyle}
|
757
757
|
`;
|
758
758
|
const orderedStyles = ["decimal", "lower-alpha", "upper-roman"];
|
@@ -765,9 +765,9 @@ const List = ({ attributes, children, element }) => {
|
|
765
765
|
const nextIndex = (element.indentLevel || 0) % listStyles.length;
|
766
766
|
const listStyleType = listStyles[nextIndex];
|
767
767
|
if (element.format === "ordered") {
|
768
|
-
return /* @__PURE__ */ jsx(Orderedlist, { listStyleType, ...attributes, children });
|
768
|
+
return /* @__PURE__ */ jsx(Orderedlist, { $listStyleType: listStyleType, ...attributes, children });
|
769
769
|
}
|
770
|
-
return /* @__PURE__ */ jsx(Unorderedlist, { listStyleType, ...attributes, children });
|
770
|
+
return /* @__PURE__ */ jsx(Unorderedlist, { $listStyleType: listStyleType, ...attributes, children });
|
771
771
|
};
|
772
772
|
const replaceListWithEmptyBlock = (editor, currentListPath) => {
|
773
773
|
Transforms.removeNodes(editor, { at: currentListPath });
|
@@ -964,7 +964,7 @@ const listBlocks = {
|
|
964
964
|
snippets: ["-", "*", "+"]
|
965
965
|
},
|
966
966
|
"list-item": {
|
967
|
-
renderElement: (props) => /* @__PURE__ */ jsx(Typography, {
|
967
|
+
renderElement: (props) => /* @__PURE__ */ jsx(Typography, { tag: "li", ...props.attributes, children: props.children }),
|
968
968
|
// No handleConvert, list items are created when converting to the parent list
|
969
969
|
matchNode: (node) => node.type === "list-item",
|
970
970
|
isInBlocksSelector: false,
|
@@ -973,7 +973,7 @@ const listBlocks = {
|
|
973
973
|
};
|
974
974
|
const paragraphBlocks = {
|
975
975
|
paragraph: {
|
976
|
-
renderElement: (props) => /* @__PURE__ */ jsx(Typography, {
|
976
|
+
renderElement: (props) => /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", ...props.attributes, children: props.children }),
|
977
977
|
icon: Paragraph,
|
978
978
|
label: {
|
979
979
|
id: "components.Blocks.blocks.text",
|
@@ -1139,7 +1139,7 @@ const ToolbarButton = ({
|
|
1139
1139
|
children: /* @__PURE__ */ jsx(
|
1140
1140
|
FlexButton,
|
1141
1141
|
{
|
1142
|
-
|
1142
|
+
tag: "button",
|
1143
1143
|
background: isActive ? "primary100" : "",
|
1144
1144
|
alignItems: "center",
|
1145
1145
|
justifyContent: "center",
|
@@ -1460,7 +1460,7 @@ const DragItem = styled(Flex)`
|
|
1460
1460
|
|
1461
1461
|
// Set the visibility of drag button
|
1462
1462
|
[role='button'] {
|
1463
|
-
visibility: ${(props) => props
|
1463
|
+
visibility: ${(props) => props.$dragVisibility};
|
1464
1464
|
opacity: inherit;
|
1465
1465
|
}
|
1466
1466
|
&[aria-disabled='true'] {
|
@@ -1477,7 +1477,7 @@ const DragIconButton = styled(IconButton)`
|
|
1477
1477
|
visibility: hidden;
|
1478
1478
|
cursor: grab;
|
1479
1479
|
opacity: inherit;
|
1480
|
-
margin-top: ${(props) => props
|
1480
|
+
margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
|
1481
1481
|
|
1482
1482
|
&:hover {
|
1483
1483
|
background: ${({ theme }) => theme.colors.neutral200};
|
@@ -1552,7 +1552,7 @@ const DragAndDropElement = ({
|
|
1552
1552
|
React.useEffect(() => {
|
1553
1553
|
setDragVisibility("hidden");
|
1554
1554
|
}, [editor.selection]);
|
1555
|
-
return /* @__PURE__ */ jsxs(Wrapper$1, { ref:
|
1555
|
+
return /* @__PURE__ */ jsxs(Wrapper$1, { ref: composedBoxRefs, isOverDropTarget, children: [
|
1556
1556
|
isOverDropTarget && /* @__PURE__ */ jsx(
|
1557
1557
|
DropPlaceholder,
|
1558
1558
|
{
|
@@ -1590,12 +1590,12 @@ const DragAndDropElement = ({
|
|
1590
1590
|
onSelect: () => setDragVisibility("visible"),
|
1591
1591
|
onMouseLeave: () => setDragVisibility("hidden"),
|
1592
1592
|
"aria-disabled": disabled,
|
1593
|
-
dragVisibility,
|
1593
|
+
$dragVisibility: dragVisibility,
|
1594
1594
|
children: [
|
1595
1595
|
/* @__PURE__ */ jsx(
|
1596
1596
|
DragIconButton,
|
1597
1597
|
{
|
1598
|
-
|
1598
|
+
tag: "div",
|
1599
1599
|
role: "button",
|
1600
1600
|
tabIndex: 0,
|
1601
1601
|
"aria-label": formatMessage({
|
@@ -1606,7 +1606,7 @@ const DragAndDropElement = ({
|
|
1606
1606
|
"aria-disabled": disabled,
|
1607
1607
|
disabled,
|
1608
1608
|
draggable: true,
|
1609
|
-
dragHandleTopMargin,
|
1609
|
+
$dragHandleTopMargin: dragHandleTopMargin,
|
1610
1610
|
children: /* @__PURE__ */ jsx(Drag, { color: "neutral600" })
|
1611
1611
|
}
|
1612
1612
|
),
|
@@ -1618,17 +1618,17 @@ const DragAndDropElement = ({
|
|
1618
1618
|
};
|
1619
1619
|
const CloneDragItem = ({ children, dragHandleTopMargin }) => {
|
1620
1620
|
const { formatMessage } = useIntl();
|
1621
|
-
return /* @__PURE__ */ jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", dragVisibility: "visible", children: [
|
1621
|
+
return /* @__PURE__ */ jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", $dragVisibility: "visible", children: [
|
1622
1622
|
/* @__PURE__ */ jsx(
|
1623
1623
|
DragIconButton,
|
1624
1624
|
{
|
1625
|
-
|
1625
|
+
tag: "div",
|
1626
1626
|
role: "button",
|
1627
1627
|
"aria-label": formatMessage({
|
1628
1628
|
id: getTranslation("components.DragHandle-label"),
|
1629
1629
|
defaultMessage: "Drag"
|
1630
1630
|
}),
|
1631
|
-
dragHandleTopMargin,
|
1631
|
+
$dragHandleTopMargin: dragHandleTopMargin,
|
1632
1632
|
children: /* @__PURE__ */ jsx(Drag, { color: "neutral600" })
|
1633
1633
|
}
|
1634
1634
|
),
|
@@ -1950,8 +1950,8 @@ const EditorLayout$1 = ({
|
|
1950
1950
|
direction: "column",
|
1951
1951
|
alignItems: "flex-start",
|
1952
1952
|
height: "512px",
|
1953
|
-
disabled,
|
1954
|
-
hasError: Boolean(error),
|
1953
|
+
$disabled: disabled,
|
1954
|
+
$hasError: Boolean(error),
|
1955
1955
|
style: { overflow: "hidden" },
|
1956
1956
|
"aria-describedby": ariaDescriptionId,
|
1957
1957
|
position: "relative",
|
@@ -1959,6 +1959,29 @@ const EditorLayout$1 = ({
|
|
1959
1959
|
}
|
1960
1960
|
);
|
1961
1961
|
};
|
1962
|
+
const InputWrapper = styled(Flex)`
|
1963
|
+
border: 1px solid
|
1964
|
+
${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
|
1965
|
+
border-radius: ${({ theme }) => theme.borderRadius};
|
1966
|
+
background: ${({ theme }) => theme.colors.neutral0};
|
1967
|
+
|
1968
|
+
${({ theme, $hasError = false }) => css`
|
1969
|
+
outline: none;
|
1970
|
+
box-shadow: 0;
|
1971
|
+
transition-property: border-color, box-shadow, fill;
|
1972
|
+
transition-duration: 0.2s;
|
1973
|
+
|
1974
|
+
&:focus-within {
|
1975
|
+
border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};
|
1976
|
+
box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
|
1977
|
+
}
|
1978
|
+
`}
|
1979
|
+
|
1980
|
+
${({ theme, $disabled }) => $disabled ? css`
|
1981
|
+
color: ${theme.colors.neutral600};
|
1982
|
+
background: ${theme.colors.neutral150};
|
1983
|
+
` : void 0}
|
1984
|
+
`;
|
1962
1985
|
const stylesToInherit = css`
|
1963
1986
|
font-size: inherit;
|
1964
1987
|
color: inherit;
|
@@ -1971,10 +1994,14 @@ const ItalicText = styled(Typography)`
|
|
1971
1994
|
font-style: italic;
|
1972
1995
|
${stylesToInherit}
|
1973
1996
|
`;
|
1974
|
-
const UnderlineText = styled(Typography).attrs({
|
1997
|
+
const UnderlineText = styled(Typography).attrs({
|
1998
|
+
textDecoration: "underline"
|
1999
|
+
})`
|
1975
2000
|
${stylesToInherit}
|
1976
2001
|
`;
|
1977
|
-
const StrikeThroughText = styled(Typography).attrs({
|
2002
|
+
const StrikeThroughText = styled(Typography).attrs({
|
2003
|
+
textDecoration: "line-through"
|
2004
|
+
})`
|
1978
2005
|
${stylesToInherit}
|
1979
2006
|
`;
|
1980
2007
|
const InlineCode = styled.code`
|
@@ -2265,8 +2292,8 @@ const BlocksInput = React.forwardRef(
|
|
2265
2292
|
({ label, name: name2, required = false, hint, labelAction, ...editorProps }, forwardedRef) => {
|
2266
2293
|
const id = React.useId();
|
2267
2294
|
const field = useField(name2);
|
2268
|
-
return /* @__PURE__ */ jsx(Field, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
2269
|
-
/* @__PURE__ */ jsx(
|
2295
|
+
return /* @__PURE__ */ jsx(Field.Root, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
2296
|
+
/* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
|
2270
2297
|
/* @__PURE__ */ jsx(
|
2271
2298
|
BlocksEditor,
|
2272
2299
|
{
|
@@ -2279,8 +2306,8 @@ const BlocksInput = React.forwardRef(
|
|
2279
2306
|
...editorProps
|
2280
2307
|
}
|
2281
2308
|
),
|
2282
|
-
/* @__PURE__ */ jsx(
|
2283
|
-
/* @__PURE__ */ jsx(
|
2309
|
+
/* @__PURE__ */ jsx(Field.Hint, {}),
|
2310
|
+
/* @__PURE__ */ jsx(Field.Error, {})
|
2284
2311
|
] }) });
|
2285
2312
|
}
|
2286
2313
|
);
|
@@ -2311,7 +2338,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
|
|
2311
2338
|
/* @__PURE__ */ jsx(
|
2312
2339
|
Box,
|
2313
2340
|
{
|
2314
|
-
|
2341
|
+
tag: "button",
|
2315
2342
|
background: "neutral100",
|
2316
2343
|
borderColor: field.error ? "danger600" : "neutral200",
|
2317
2344
|
hasRadius: true,
|
@@ -2606,38 +2633,19 @@ const AccordionGroup = ({ children, error }) => {
|
|
2606
2633
|
};
|
2607
2634
|
const CustomIconButton$1 = styled(IconButton)`
|
2608
2635
|
background-color: transparent;
|
2609
|
-
|
2610
|
-
svg {
|
2611
|
-
path {
|
2612
|
-
fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
|
2613
|
-
}
|
2614
|
-
}
|
2636
|
+
color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : theme.colors.neutral600};
|
2615
2637
|
|
2616
2638
|
&:hover {
|
2617
|
-
|
2618
|
-
path {
|
2619
|
-
fill: ${({ theme }) => theme.colors.primary600};
|
2620
|
-
}
|
2621
|
-
}
|
2639
|
+
color: ${({ theme }) => theme.colors.primary600};
|
2622
2640
|
}
|
2623
2641
|
`;
|
2624
2642
|
const ActionsFlex$1 = styled(Flex)`
|
2625
2643
|
& .drag-handle {
|
2626
2644
|
background: unset;
|
2627
|
-
|
2628
|
-
svg {
|
2629
|
-
path {
|
2630
|
-
fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : void 0};
|
2631
|
-
}
|
2632
|
-
}
|
2645
|
+
color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : void 0};
|
2633
2646
|
|
2634
2647
|
&:hover {
|
2635
|
-
|
2636
|
-
path {
|
2637
|
-
/* keeps the hover style of the accordion */
|
2638
|
-
fill: ${({ theme }) => theme.colors.primary600};
|
2639
|
-
}
|
2640
|
-
}
|
2648
|
+
color: ${({ theme }) => theme.colors.primary600};
|
2641
2649
|
}
|
2642
2650
|
}
|
2643
2651
|
`;
|
@@ -2679,15 +2687,15 @@ const Component = ({
|
|
2679
2687
|
}, [dragPreviewRef, index]);
|
2680
2688
|
const composedAccordionRefs = useComposedRefs(accordionRef, dragRef);
|
2681
2689
|
const composedBoxRefs = useComposedRefs(boxRef, dropRef);
|
2682
|
-
return /* @__PURE__ */ jsx(Box, { ref:
|
2690
|
+
return /* @__PURE__ */ jsx(Box, { ref: composedBoxRefs, children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
|
2683
2691
|
/* @__PURE__ */ jsx(
|
2684
2692
|
AccordionToggle,
|
2685
2693
|
{
|
2686
|
-
action: disabled ? null : /* @__PURE__ */ jsxs(ActionsFlex$1, { gap: 0, expanded: isOpen, children: [
|
2694
|
+
action: disabled ? null : /* @__PURE__ */ jsxs(ActionsFlex$1, { gap: 0, $expanded: isOpen, children: [
|
2687
2695
|
/* @__PURE__ */ jsx(
|
2688
2696
|
CustomIconButton$1,
|
2689
2697
|
{
|
2690
|
-
expanded: isOpen,
|
2698
|
+
$expanded: isOpen,
|
2691
2699
|
borderWidth: 0,
|
2692
2700
|
onClick: onDeleteComponent,
|
2693
2701
|
label: formatMessage({
|
@@ -2702,7 +2710,7 @@ const Component = ({
|
|
2702
2710
|
{
|
2703
2711
|
className: "drag-handle",
|
2704
2712
|
ref: composedAccordionRefs,
|
2705
|
-
|
2713
|
+
tag: "div",
|
2706
2714
|
role: "button",
|
2707
2715
|
borderWidth: 0,
|
2708
2716
|
tabIndex: 0,
|
@@ -2735,7 +2743,7 @@ const Component = ({
|
|
2735
2743
|
] }) });
|
2736
2744
|
};
|
2737
2745
|
const Preview$1 = () => {
|
2738
|
-
return /* @__PURE__ */ jsx(StyledSpan, {
|
2746
|
+
return /* @__PURE__ */ jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
|
2739
2747
|
};
|
2740
2748
|
const StyledSpan = styled(Box)`
|
2741
2749
|
display: block;
|
@@ -2771,7 +2779,7 @@ const ComponentInput = ({
|
|
2771
2779
|
htmlFor: name2,
|
2772
2780
|
variant: "pi",
|
2773
2781
|
fontWeight: "bold",
|
2774
|
-
|
2782
|
+
tag: "label",
|
2775
2783
|
children: [
|
2776
2784
|
label,
|
2777
2785
|
attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
|
@@ -2826,10 +2834,10 @@ const AddComponentButton = ({
|
|
2826
2834
|
paddingLeft: 4,
|
2827
2835
|
paddingRight: 4,
|
2828
2836
|
style: { cursor: isDisabled ? "not-allowed" : "pointer" },
|
2829
|
-
children: /* @__PURE__ */ jsxs(Flex, {
|
2837
|
+
children: /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
|
2830
2838
|
/* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
|
2831
2839
|
/* @__PURE__ */ jsx(
|
2832
|
-
|
2840
|
+
AddComponentTitle,
|
2833
2841
|
{
|
2834
2842
|
variant: "pi",
|
2835
2843
|
fontWeight: "bold",
|
@@ -2853,13 +2861,14 @@ const StyledAddIcon = styled(PlusCircle)`
|
|
2853
2861
|
fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
|
2854
2862
|
}
|
2855
2863
|
`;
|
2864
|
+
const AddComponentTitle = styled(Typography)``;
|
2856
2865
|
const StyledButton = styled(BaseButton)`
|
2857
2866
|
border-radius: 26px;
|
2858
2867
|
border-color: ${({ theme }) => theme.colors.neutral150};
|
2859
2868
|
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
|
2860
2869
|
|
2861
2870
|
&:hover {
|
2862
|
-
${
|
2871
|
+
${AddComponentTitle} {
|
2863
2872
|
color: ${({ theme }) => theme.colors.primary600};
|
2864
2873
|
}
|
2865
2874
|
|
@@ -2873,7 +2882,7 @@ const StyledButton = styled(BaseButton)`
|
|
2873
2882
|
}
|
2874
2883
|
}
|
2875
2884
|
&:active {
|
2876
|
-
${
|
2885
|
+
${AddComponentTitle} {
|
2877
2886
|
color: ${({ theme }) => theme.colors.primary600};
|
2878
2887
|
}
|
2879
2888
|
${StyledAddIcon} {
|
@@ -2910,7 +2919,7 @@ const ComponentCategory = ({
|
|
2910
2919
|
/* @__PURE__ */ jsx(AccordionContent$1, { children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsx(Grid, { children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsx(
|
2911
2920
|
ComponentBox,
|
2912
2921
|
{
|
2913
|
-
|
2922
|
+
tag: "button",
|
2914
2923
|
type: "button",
|
2915
2924
|
background: "neutral100",
|
2916
2925
|
justifyContent: "center",
|
@@ -2921,7 +2930,7 @@ const ComponentCategory = ({
|
|
2921
2930
|
borderColor: "neutral200",
|
2922
2931
|
children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
|
2923
2932
|
/* @__PURE__ */ jsx(ComponentIcon, { icon }),
|
2924
|
-
/* @__PURE__ */ jsx(
|
2933
|
+
/* @__PURE__ */ jsx(ComponentName, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
|
2925
2934
|
] })
|
2926
2935
|
},
|
2927
2936
|
uid
|
@@ -2933,13 +2942,14 @@ const Grid = styled.div`
|
|
2933
2942
|
grid-template-columns: repeat(auto-fit, 14rem);
|
2934
2943
|
grid-gap: ${({ theme }) => theme.spaces[1]};
|
2935
2944
|
`;
|
2945
|
+
const ComponentName = styled(Typography)``;
|
2936
2946
|
const ComponentBox = styled(Flex)`
|
2937
2947
|
&:focus,
|
2938
2948
|
&:hover {
|
2939
2949
|
border: 1px solid ${({ theme }) => theme.colors.primary200};
|
2940
2950
|
background: ${({ theme }) => theme.colors.primary100};
|
2941
2951
|
|
2942
|
-
${
|
2952
|
+
${ComponentName} {
|
2943
2953
|
color: ${({ theme }) => theme.colors.primary600};
|
2944
2954
|
}
|
2945
2955
|
|
@@ -3084,188 +3094,191 @@ const uidApi = contentManagerApi.injectEndpoints({
|
|
3084
3094
|
});
|
3085
3095
|
const { useGenerateUIDMutation, useGetDefaultUIDQuery, useGetAvailabilityQuery } = uidApi;
|
3086
3096
|
const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
|
3087
|
-
const UIDInput = React.forwardRef(
|
3088
|
-
|
3089
|
-
|
3090
|
-
|
3091
|
-
|
3092
|
-
|
3093
|
-
|
3094
|
-
|
3095
|
-
|
3096
|
-
|
3097
|
-
|
3098
|
-
|
3099
|
-
|
3100
|
-
|
3101
|
-
|
3102
|
-
|
3103
|
-
|
3104
|
-
|
3105
|
-
|
3106
|
-
field: props.name,
|
3107
|
-
data: {
|
3108
|
-
id: id ?? "",
|
3109
|
-
...allFormValues
|
3110
|
-
},
|
3111
|
-
params
|
3112
|
-
},
|
3113
|
-
{
|
3114
|
-
skip: field.value || !props.required
|
3115
|
-
}
|
3116
|
-
);
|
3117
|
-
React.useEffect(() => {
|
3118
|
-
if (apiError) {
|
3119
|
-
toggleNotification({
|
3120
|
-
type: "warning",
|
3121
|
-
message: formatAPIError(apiError)
|
3122
|
-
});
|
3123
|
-
}
|
3124
|
-
}, [apiError, formatAPIError, toggleNotification]);
|
3125
|
-
React.useEffect(() => {
|
3126
|
-
if (defaultGeneratedUID && field.value === void 0) {
|
3127
|
-
field.onChange(props.name, defaultGeneratedUID);
|
3128
|
-
}
|
3129
|
-
}, [defaultGeneratedUID, field, props.name]);
|
3130
|
-
const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
|
3131
|
-
const handleRegenerateClick = async () => {
|
3132
|
-
try {
|
3133
|
-
const res = await generateUID({
|
3097
|
+
const UIDInput = React.forwardRef(
|
3098
|
+
({ hint, label, labelAction, name: name2, required, ...props }, ref) => {
|
3099
|
+
const { model, id } = useDoc();
|
3100
|
+
const allFormValues = useForm("InputUID", (form) => form.values);
|
3101
|
+
const [availability, setAvailability] = React.useState();
|
3102
|
+
const [showRegenerate, setShowRegenerate] = React.useState(false);
|
3103
|
+
const field = useField(name2);
|
3104
|
+
const debouncedValue = useDebounce(field.value, 300);
|
3105
|
+
const { toggleNotification } = useNotification();
|
3106
|
+
const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
|
3107
|
+
const { formatMessage } = useIntl();
|
3108
|
+
const [{ query }] = useQueryParams();
|
3109
|
+
const params = React.useMemo(() => buildValidParams(query), [query]);
|
3110
|
+
const {
|
3111
|
+
data: defaultGeneratedUID,
|
3112
|
+
isLoading: isGeneratingDefaultUID,
|
3113
|
+
error: apiError
|
3114
|
+
} = useGetDefaultUIDQuery(
|
3115
|
+
{
|
3134
3116
|
contentTypeUID: model,
|
3135
|
-
field:
|
3136
|
-
data: {
|
3117
|
+
field: name2,
|
3118
|
+
data: {
|
3119
|
+
id: id ?? "",
|
3120
|
+
...allFormValues
|
3121
|
+
},
|
3137
3122
|
params
|
3138
|
-
}
|
3139
|
-
|
3140
|
-
field.
|
3141
|
-
}
|
3123
|
+
},
|
3124
|
+
{
|
3125
|
+
skip: field.value || !required
|
3126
|
+
}
|
3127
|
+
);
|
3128
|
+
React.useEffect(() => {
|
3129
|
+
if (apiError) {
|
3142
3130
|
toggleNotification({
|
3143
|
-
type: "
|
3144
|
-
message: formatAPIError(
|
3131
|
+
type: "warning",
|
3132
|
+
message: formatAPIError(apiError)
|
3145
3133
|
});
|
3146
3134
|
}
|
3147
|
-
}
|
3148
|
-
|
3149
|
-
|
3150
|
-
|
3151
|
-
|
3152
|
-
|
3153
|
-
|
3154
|
-
|
3155
|
-
|
3156
|
-
|
3157
|
-
|
3158
|
-
|
3159
|
-
|
3160
|
-
|
3161
|
-
|
3162
|
-
|
3163
|
-
|
3164
|
-
|
3165
|
-
|
3166
|
-
|
3167
|
-
|
3168
|
-
|
3169
|
-
|
3170
|
-
|
3171
|
-
|
3172
|
-
|
3173
|
-
|
3174
|
-
|
3175
|
-
|
3176
|
-
|
3177
|
-
|
3178
|
-
message: formatAPIError(availabilityError)
|
3179
|
-
});
|
3180
|
-
}
|
3181
|
-
}, [availabilityError, formatAPIError, toggleNotification]);
|
3182
|
-
React.useEffect(() => {
|
3183
|
-
setAvailability(availabilityData);
|
3184
|
-
let timer;
|
3185
|
-
if (availabilityData?.isAvailable) {
|
3186
|
-
timer = window.setTimeout(() => {
|
3187
|
-
setAvailability(void 0);
|
3188
|
-
}, 4e3);
|
3189
|
-
}
|
3190
|
-
return () => {
|
3191
|
-
if (timer) {
|
3192
|
-
clearTimeout(timer);
|
3135
|
+
}, [apiError, formatAPIError, toggleNotification]);
|
3136
|
+
React.useEffect(() => {
|
3137
|
+
if (defaultGeneratedUID && field.value === void 0) {
|
3138
|
+
field.onChange(name2, defaultGeneratedUID);
|
3139
|
+
}
|
3140
|
+
}, [defaultGeneratedUID, field, name2]);
|
3141
|
+
const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
|
3142
|
+
const handleRegenerateClick = async () => {
|
3143
|
+
try {
|
3144
|
+
const res = await generateUID({
|
3145
|
+
contentTypeUID: model,
|
3146
|
+
field: name2,
|
3147
|
+
data: { id: id ?? "", ...allFormValues },
|
3148
|
+
params
|
3149
|
+
});
|
3150
|
+
if ("data" in res) {
|
3151
|
+
field.onChange(name2, res.data);
|
3152
|
+
} else {
|
3153
|
+
toggleNotification({
|
3154
|
+
type: "danger",
|
3155
|
+
message: formatAPIError(res.error)
|
3156
|
+
});
|
3157
|
+
}
|
3158
|
+
} catch (err) {
|
3159
|
+
toggleNotification({
|
3160
|
+
type: "danger",
|
3161
|
+
message: formatMessage({
|
3162
|
+
id: "notification.error",
|
3163
|
+
defaultMessage: "An error occurred."
|
3164
|
+
})
|
3165
|
+
});
|
3193
3166
|
}
|
3194
3167
|
};
|
3195
|
-
|
3196
|
-
|
3197
|
-
|
3198
|
-
|
3199
|
-
|
3200
|
-
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
|
3201
|
-
/* @__PURE__ */ jsx(
|
3202
|
-
TextInput,
|
3168
|
+
const {
|
3169
|
+
data: availabilityData,
|
3170
|
+
isLoading: isCheckingAvailability,
|
3171
|
+
error: availabilityError
|
3172
|
+
} = useGetAvailabilityQuery(
|
3203
3173
|
{
|
3204
|
-
|
3205
|
-
|
3206
|
-
|
3207
|
-
|
3208
|
-
|
3209
|
-
|
3210
|
-
|
3211
|
-
|
3212
|
-
|
3213
|
-
|
3214
|
-
|
3215
|
-
|
3216
|
-
|
3217
|
-
|
3218
|
-
|
3219
|
-
|
3220
|
-
|
3221
|
-
|
3222
|
-
|
3223
|
-
|
3224
|
-
|
3225
|
-
|
3226
|
-
|
3227
|
-
|
3228
|
-
|
3229
|
-
|
3230
|
-
|
3231
|
-
|
3232
|
-
|
3233
|
-
|
3234
|
-
|
3235
|
-
|
3236
|
-
|
3237
|
-
|
3238
|
-
|
3239
|
-
|
3240
|
-
|
3241
|
-
|
3242
|
-
|
3243
|
-
|
3244
|
-
|
3245
|
-
|
3246
|
-
|
3247
|
-
|
3174
|
+
contentTypeUID: model,
|
3175
|
+
field: name2,
|
3176
|
+
value: debouncedValue ? debouncedValue.trim() : "",
|
3177
|
+
params
|
3178
|
+
},
|
3179
|
+
{
|
3180
|
+
skip: !Boolean(
|
3181
|
+
debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
|
3182
|
+
)
|
3183
|
+
}
|
3184
|
+
);
|
3185
|
+
React.useEffect(() => {
|
3186
|
+
if (availabilityError) {
|
3187
|
+
toggleNotification({
|
3188
|
+
type: "warning",
|
3189
|
+
message: formatAPIError(availabilityError)
|
3190
|
+
});
|
3191
|
+
}
|
3192
|
+
}, [availabilityError, formatAPIError, toggleNotification]);
|
3193
|
+
React.useEffect(() => {
|
3194
|
+
setAvailability(availabilityData);
|
3195
|
+
let timer;
|
3196
|
+
if (availabilityData?.isAvailable) {
|
3197
|
+
timer = window.setTimeout(() => {
|
3198
|
+
setAvailability(void 0);
|
3199
|
+
}, 4e3);
|
3200
|
+
}
|
3201
|
+
return () => {
|
3202
|
+
if (timer) {
|
3203
|
+
clearTimeout(timer);
|
3204
|
+
}
|
3205
|
+
};
|
3206
|
+
}, [availabilityData]);
|
3207
|
+
const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
|
3208
|
+
const fieldRef = useFocusInputField(name2);
|
3209
|
+
const composedRefs = useComposedRefs(ref, fieldRef);
|
3210
|
+
return /* @__PURE__ */ jsxs(Field.Root, { hint, name: name2, error: field.error, required, children: [
|
3211
|
+
/* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
|
3212
|
+
/* @__PURE__ */ jsx(
|
3213
|
+
TextInput,
|
3214
|
+
{
|
3215
|
+
ref: composedRefs,
|
3216
|
+
disabled: props.disabled,
|
3217
|
+
endAction: /* @__PURE__ */ jsxs(Flex, { position: "relative", gap: 1, children: [
|
3218
|
+
availability && !showRegenerate && /* @__PURE__ */ jsxs(
|
3219
|
+
TextValidation,
|
3248
3220
|
{
|
3249
|
-
|
3250
|
-
|
3251
|
-
|
3252
|
-
|
3253
|
-
|
3254
|
-
|
3255
|
-
|
3256
|
-
|
3221
|
+
alignItems: "center",
|
3222
|
+
gap: 1,
|
3223
|
+
justifyContent: "flex-end",
|
3224
|
+
$available: !!availability?.isAvailable,
|
3225
|
+
"data-not-here-outer": true,
|
3226
|
+
position: "absolute",
|
3227
|
+
pointerEvents: "none",
|
3228
|
+
right: 6,
|
3229
|
+
width: "100px",
|
3230
|
+
children: [
|
3231
|
+
availability?.isAvailable ? /* @__PURE__ */ jsx(CheckCircle, {}) : /* @__PURE__ */ jsx(WarningCircle, {}),
|
3232
|
+
/* @__PURE__ */ jsx(
|
3233
|
+
Typography,
|
3234
|
+
{
|
3235
|
+
textColor: availability.isAvailable ? "success600" : "danger600",
|
3236
|
+
variant: "pi",
|
3237
|
+
children: formatMessage(
|
3238
|
+
availability.isAvailable ? {
|
3239
|
+
id: "content-manager.components.uid.available",
|
3240
|
+
defaultMessage: "Available"
|
3241
|
+
} : {
|
3242
|
+
id: "content-manager.components.uid.unavailable",
|
3243
|
+
defaultMessage: "Unavailable"
|
3244
|
+
}
|
3245
|
+
)
|
3246
|
+
}
|
3247
|
+
)
|
3248
|
+
]
|
3257
3249
|
}
|
3258
|
-
)
|
3259
|
-
|
3260
|
-
|
3261
|
-
|
3262
|
-
|
3263
|
-
|
3264
|
-
|
3265
|
-
|
3266
|
-
|
3267
|
-
|
3268
|
-
|
3250
|
+
),
|
3251
|
+
!props.disabled && /* @__PURE__ */ jsxs(Fragment, { children: [
|
3252
|
+
showRegenerate && /* @__PURE__ */ jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsx(Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
|
3253
|
+
id: "content-manager.components.uid.regenerate",
|
3254
|
+
defaultMessage: "Regenerate"
|
3255
|
+
}) }) }),
|
3256
|
+
/* @__PURE__ */ jsx(
|
3257
|
+
FieldActionWrapper,
|
3258
|
+
{
|
3259
|
+
onClick: handleRegenerateClick,
|
3260
|
+
label: formatMessage({
|
3261
|
+
id: "content-manager.components.uid.regenerate",
|
3262
|
+
defaultMessage: "Regenerate"
|
3263
|
+
}),
|
3264
|
+
onMouseEnter: () => setShowRegenerate(true),
|
3265
|
+
onMouseLeave: () => setShowRegenerate(false),
|
3266
|
+
children: isLoading ? /* @__PURE__ */ jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(ArrowClockwise, {})
|
3267
|
+
}
|
3268
|
+
)
|
3269
|
+
] })
|
3270
|
+
] }),
|
3271
|
+
onChange: field.onChange,
|
3272
|
+
value: field.value ?? "",
|
3273
|
+
...props
|
3274
|
+
}
|
3275
|
+
),
|
3276
|
+
/* @__PURE__ */ jsx(Field.Error, {}),
|
3277
|
+
/* @__PURE__ */ jsx(Field.Hint, {})
|
3278
|
+
] });
|
3279
|
+
}
|
3280
|
+
);
|
3281
|
+
const FieldActionWrapper = styled(Field.Action)`
|
3269
3282
|
svg {
|
3270
3283
|
height: 1.6rem;
|
3271
3284
|
width: 1.6rem;
|
@@ -3286,7 +3299,7 @@ const TextValidation = styled(Flex)`
|
|
3286
3299
|
width: 1.2rem;
|
3287
3300
|
|
3288
3301
|
path {
|
3289
|
-
fill: ${({ theme, available }) => available ? theme.colors.success600 : theme.colors.danger600};
|
3302
|
+
fill: ${({ theme, $available }) => $available ? theme.colors.success600 : theme.colors.danger600};
|
3290
3303
|
}
|
3291
3304
|
}
|
3292
3305
|
`;
|
@@ -3635,7 +3648,7 @@ const Editor = React.forwardRef(
|
|
3635
3648
|
[editorRef]
|
3636
3649
|
);
|
3637
3650
|
return /* @__PURE__ */ jsxs(EditorAndPreviewWrapper, { children: [
|
3638
|
-
/* @__PURE__ */ jsx(EditorStylesContainer, { isExpandMode, disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsx("textarea", { ref: textareaRef }) }),
|
3651
|
+
/* @__PURE__ */ jsx(EditorStylesContainer, { $isExpandMode: isExpandMode, $disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsx("textarea", { ref: textareaRef }) }),
|
3639
3652
|
isPreviewMode && /* @__PURE__ */ jsx(PreviewWysiwyg, { data: value })
|
3640
3653
|
] });
|
3641
3654
|
}
|
@@ -3645,7 +3658,7 @@ const EditorAndPreviewWrapper = styled.div`
|
|
3645
3658
|
height: calc(100% - 48px);
|
3646
3659
|
`;
|
3647
3660
|
const EditorStylesContainer = styled.div`
|
3648
|
-
cursor: ${({ disabled }) => disabled ? "not-allowed !important" : "auto"};
|
3661
|
+
cursor: ${({ $disabled }) => $disabled ? "not-allowed !important" : "auto"};
|
3649
3662
|
height: 100%;
|
3650
3663
|
/* BASICS */
|
3651
3664
|
.CodeMirror-placeholder {
|
@@ -3655,7 +3668,7 @@ const EditorStylesContainer = styled.div`
|
|
3655
3668
|
.CodeMirror {
|
3656
3669
|
/* Set height, width, borders, and global font properties here */
|
3657
3670
|
font-size: 1.4rem;
|
3658
|
-
height: ${({ isExpandMode }) => isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
|
3671
|
+
height: ${({ $isExpandMode }) => $isExpandMode ? "100%" : "410px"}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border
|
3659
3672
|
color: ${({ theme }) => theme.colors.neutral800};
|
3660
3673
|
direction: ltr;
|
3661
3674
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
@@ -4421,15 +4434,24 @@ const WysiwygNav = ({
|
|
4421
4434
|
justifyContent: "space-between",
|
4422
4435
|
borderRadius: `0.4rem 0.4rem 0 0`,
|
4423
4436
|
children: [
|
4424
|
-
/* @__PURE__ */ jsxs(
|
4425
|
-
/* @__PURE__ */
|
4426
|
-
|
4427
|
-
|
4428
|
-
|
4429
|
-
|
4430
|
-
|
4431
|
-
|
4432
|
-
|
4437
|
+
/* @__PURE__ */ jsxs(Flex, { children: [
|
4438
|
+
/* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(
|
4439
|
+
SingleSelect,
|
4440
|
+
{
|
4441
|
+
disabled: true,
|
4442
|
+
placeholder: selectPlaceholder,
|
4443
|
+
size: "S",
|
4444
|
+
"aria-label": selectPlaceholder,
|
4445
|
+
children: [
|
4446
|
+
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
|
4447
|
+
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h2", children: "h2" }),
|
4448
|
+
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h3", children: "h3" }),
|
4449
|
+
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h4", children: "h4" }),
|
4450
|
+
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h5", children: "h5" }),
|
4451
|
+
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
|
4452
|
+
]
|
4453
|
+
}
|
4454
|
+
) }),
|
4433
4455
|
/* @__PURE__ */ jsxs(MainButtons, { children: [
|
4434
4456
|
/* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", icon: /* @__PURE__ */ jsx(Bold, {}) }),
|
4435
4457
|
/* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", icon: /* @__PURE__ */ jsx(Italic, {}) }),
|
@@ -4453,12 +4475,12 @@ const WysiwygNav = ({
|
|
4453
4475
|
justifyContent: "space-between",
|
4454
4476
|
borderRadius: `0.4rem 0.4rem 0 0`,
|
4455
4477
|
children: [
|
4456
|
-
/* @__PURE__ */ jsxs(
|
4457
|
-
/* @__PURE__ */ jsxs(
|
4478
|
+
/* @__PURE__ */ jsxs(Flex, { children: [
|
4479
|
+
/* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(
|
4458
4480
|
SingleSelect,
|
4459
4481
|
{
|
4460
4482
|
placeholder: selectPlaceholder,
|
4461
|
-
label: selectPlaceholder,
|
4483
|
+
"aria-label": selectPlaceholder,
|
4462
4484
|
size: "S",
|
4463
4485
|
onChange: (value) => onActionClick(value, editorRef),
|
4464
4486
|
children: [
|
@@ -4470,7 +4492,7 @@ const WysiwygNav = ({
|
|
4470
4492
|
/* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
|
4471
4493
|
]
|
4472
4494
|
}
|
4473
|
-
),
|
4495
|
+
) }),
|
4474
4496
|
/* @__PURE__ */ jsxs(MainButtons, { children: [
|
4475
4497
|
/* @__PURE__ */ jsx(
|
4476
4498
|
CustomIconButton,
|
@@ -4590,19 +4612,6 @@ const WysiwygNav = ({
|
|
4590
4612
|
}
|
4591
4613
|
);
|
4592
4614
|
};
|
4593
|
-
const StyledFlex = styled(Flex)`
|
4594
|
-
/* Hide the label, every input needs a label. */
|
4595
|
-
label {
|
4596
|
-
border: 0;
|
4597
|
-
clip: rect(0 0 0 0);
|
4598
|
-
height: 1px;
|
4599
|
-
margin: -1px;
|
4600
|
-
overflow: hidden;
|
4601
|
-
padding: 0;
|
4602
|
-
position: absolute;
|
4603
|
-
width: 1px;
|
4604
|
-
}
|
4605
|
-
`;
|
4606
4615
|
const Wysiwyg = React.forwardRef(
|
4607
4616
|
({ hint, disabled, label, name: name2, placeholder, required, labelAction }, forwardedRef) => {
|
4608
4617
|
const field = useField(name2);
|
@@ -4667,9 +4676,9 @@ const Wysiwyg = React.forwardRef(
|
|
4667
4676
|
insertFile(editorRef, formattedFiles);
|
4668
4677
|
setMediaLibVisible(false);
|
4669
4678
|
};
|
4670
|
-
return /* @__PURE__ */ jsxs(Field, { name: name2, hint, error: field.error, required, children: [
|
4679
|
+
return /* @__PURE__ */ jsxs(Field.Root, { name: name2, hint, error: field.error, required, children: [
|
4671
4680
|
/* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
4672
|
-
/* @__PURE__ */ jsx(
|
4681
|
+
/* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
|
4673
4682
|
/* @__PURE__ */ jsxs(
|
4674
4683
|
EditorLayout,
|
4675
4684
|
{
|
@@ -4710,8 +4719,8 @@ const Wysiwyg = React.forwardRef(
|
|
4710
4719
|
]
|
4711
4720
|
}
|
4712
4721
|
),
|
4713
|
-
/* @__PURE__ */ jsx(
|
4714
|
-
/* @__PURE__ */ jsx(
|
4722
|
+
/* @__PURE__ */ jsx(Field.Hint, {}),
|
4723
|
+
/* @__PURE__ */ jsx(Field.Error, {})
|
4715
4724
|
] }),
|
4716
4725
|
mediaLibVisible && // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.
|
4717
4726
|
/* @__PURE__ */ jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
|
@@ -4930,7 +4939,7 @@ const DynamicComponent = ({
|
|
4930
4939
|
/* @__PURE__ */ jsx(
|
4931
4940
|
IconButton,
|
4932
4941
|
{
|
4933
|
-
|
4942
|
+
tag: "div",
|
4934
4943
|
role: "button",
|
4935
4944
|
borderWidth: 0,
|
4936
4945
|
tabIndex: 0,
|
@@ -4948,7 +4957,7 @@ const DynamicComponent = ({
|
|
4948
4957
|
/* @__PURE__ */ jsxs(Menu.Root, { children: [
|
4949
4958
|
/* @__PURE__ */ jsxs(Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
|
4950
4959
|
/* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false }),
|
4951
|
-
/* @__PURE__ */ jsx(VisuallyHidden, {
|
4960
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children: formatMessage({
|
4952
4961
|
id: getTranslation("components.DynamicZone.more-actions"),
|
4953
4962
|
defaultMessage: "More actions"
|
4954
4963
|
}) })
|
@@ -4977,7 +4986,7 @@ const DynamicComponent = ({
|
|
4977
4986
|
] })
|
4978
4987
|
] })
|
4979
4988
|
] });
|
4980
|
-
return /* @__PURE__ */ jsxs(ComponentContainer, {
|
4989
|
+
return /* @__PURE__ */ jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
|
4981
4990
|
/* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Rectangle, { background: "neutral200" }) }),
|
4982
4991
|
/* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
|
4983
4992
|
/* @__PURE__ */ jsx(
|
@@ -5009,8 +5018,8 @@ const ActionsFlex = styled(Flex)`
|
|
5009
5018
|
const IconButtonCustom = styled(IconButton)`
|
5010
5019
|
background-color: transparent;
|
5011
5020
|
|
5012
|
-
svg
|
5013
|
-
fill: ${({ theme
|
5021
|
+
svg {
|
5022
|
+
fill: ${({ theme }) => theme.colors.neutral600};
|
5014
5023
|
}
|
5015
5024
|
`;
|
5016
5025
|
const StyledBox = styled(Box)`
|
@@ -5316,4 +5325,4 @@ export {
|
|
5316
5325
|
transformDocument as t,
|
5317
5326
|
useLazyComponents as u
|
5318
5327
|
};
|
5319
|
-
//# sourceMappingURL=Field-
|
5328
|
+
//# sourceMappingURL=Field-0_2h1vuK.mjs.map
|