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