@webiny/app-headless-cms 6.4.11 → 6.6.0-alpha.1

package/admin/components/DropZone/Horizontal.js

@@ -1,13 +1,7 @@
 import react from "react";
 import { Droppable } from "../Droppable.js";
-import { cn } from "@webiny/admin-ui";
-const OuterDiv = ({ isOver, isDragging, last })=>/*#__PURE__*/ react.createElement("div", {
-        className: cn("absolute w-full z-10 bg-transparent flex justify-center", last ? "-bottom-md" : "-top-md")
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: cn("h-md w-full z-3 border-dashed border-sm hidden", isOver ? "border-accent-default" : "border-success-default", isDragging && "block")
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: cn("w-full h-full opacity-50", isOver ? "bg-primary-muted" : "bg-success-muted")
-    })));
+import { Icon, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
 const Horizontal = ({ last, onDrop, isVisible, ...rest })=>/*#__PURE__*/ react.createElement(Droppable, {
         onDrop: onDrop,
         isVisible: isVisible
@@ -16,19 +10,17 @@ const Horizontal = ({ last, onDrop, isVisible, ...rest })=>/*#__PURE__*/ react.c
                 drop(element);
             },
             "data-testid": rest["data-testid"],
-            style: {
-                height: "16px",
-                width: "100%",
-                position: "absolute",
-                [last ? "bottom" : "top"]: 0,
-                left: 0,
-                zIndex: isDragging ? 1000 : -1
-            }
-        }, /*#__PURE__*/ react.createElement(OuterDiv, {
-            isOver: isOver,
-            isDragging: isDragging,
-            last: last ?? false
-        })));
+            className: cn("h-sm-extra w-full absolute left-0", last ? "-bottom-sm-extra" : "-top-sm-extra", isDragging ? "z-[1000]" : "-z-[1]")
+        }, isDragging && /*#__PURE__*/ react.createElement("div", {
+            className: cn("absolute bg-primary w-full flex items-center rounded-xs", last ? "bottom-0" : "top-0")
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: cn("w-full h-sm-extra rounded-xs p-xxs transition-colors relative flex items-center justify-center", isOver ? "bg-primary-light/60" : "bg-primary-light")
+        }, /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Add",
+            size: "xs",
+            color: "accent"
+        })))));
 const DropZone_Horizontal = Horizontal;
 export default DropZone_Horizontal;
 

package/admin/components/DropZone/Horizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/DropZone/Horizontal.js","sources":["../../../../src/admin/components/DropZone/Horizontal.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IsVisibleCallable } from \"../Droppable.js\";\nimport { Droppable } from \"../Droppable.js\";\nimport type { DragSource } from \"~/types.js\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OuterDivProps {\n    isOver: boolean;\n    isDragging: boolean;\n    last: boolean;\n}\n\nconst OuterDiv = ({ isOver, isDragging, last }: OuterDivProps) => (\n    <div\n        className={cn(\n            \"absolute w-full z-10 bg-transparent flex justify-center\",\n            last ? \"-bottom-md\" : \"-top-md\"\n        )}\n    >\n        <div\n            className={cn(\n                \"h-md w-full z-3 border-dashed border-sm hidden\",\n                isOver ? \"border-accent-default\" : \"border-success-default\",\n                isDragging && \"block\"\n            )}\n        >\n            <div\n                className={cn(\n                    \"w-full h-full opacity-50\",\n                    isOver ? \"bg-primary-muted\" : \"bg-success-muted\"\n                )}\n            />\n        </div>\n    </div>\n);\n\ninterface HorizontalProps {\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n    [\"data-testid\"]?: string;\n}\n\nconst Horizontal = ({ last, onDrop, isVisible, ...rest }: HorizontalProps) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={element => {\n                        drop(element);\n                    }}\n                    data-testid={rest[\"data-testid\"]}\n                    style={{\n                        /* For dropzone debugging: border: \"1px solid blue\",*/\n                        height: \"16px\",\n                        width: \"100%\",\n                        position: \"absolute\",\n                        [last ? \"bottom\" : \"top\"]: 0,\n                        left: 0,\n                        zIndex: isDragging ? 1000 : -1\n                    }}\n                >\n                    <OuterDiv isOver={isOver} isDragging={isDragging} last={last ?? false} />\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Horizontal;\n"],"names":["OuterDiv","isOver","isDragging","last","cn","Horizontal","onDrop","isVisible","rest","Droppable","drop","element"],"mappings":";;;AAYA,MAAMA,WAAW,CAAC,EAAEC,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAiB,iBACzD,oBAAC;QACG,WAAWC,GACP,2DACAD,OAAO,eAAe;qBAG1B,oBAAC;QACG,WAAWC,GACP,kDACAH,SAAS,0BAA0B,0BACnCC,cAAc;qBAGlB,oBAAC;QACG,WAAWE,GACP,4BACAH,SAAS,qBAAqB;;AAclD,MAAMI,aAAa,CAAC,EAAEF,IAAI,EAAEG,MAAM,EAAEC,SAAS,EAAE,GAAGC,MAAuB,GAC9D,WAAP,GACI,oBAACC,WAASA;QAAC,QAAQH;QAAQ,WAAWC;OACjC,CAAC,EAAEN,MAAM,EAAEC,UAAU,EAAEQ,IAAI,EAAE,iBAC1B,oBAAC;YACG,KAAKC,CAAAA;gBACDD,KAAKC;YACT;YACA,eAAaH,IAAI,CAAC,cAAc;YAChC,OAAO;gBAEH,QAAQ;gBACR,OAAO;gBACP,UAAU;gBACV,CAACL,OAAO,WAAW,MAAM,EAAE;gBAC3B,MAAM;gBACN,QAAQD,aAAa,OAAO;YAChC;yBAEA,oBAACF,UAAQA;YAAC,QAAQC;YAAQ,YAAYC;YAAY,MAAMC,QAAQ;;AAOpF,4BAAeE"}
+{"version":3,"file":"admin/components/DropZone/Horizontal.js","sources":["../../../../src/admin/components/DropZone/Horizontal.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IsVisibleCallable } from \"../Droppable.js\";\nimport { Droppable } from \"../Droppable.js\";\nimport type { DragSource } from \"~/types.js\";\nimport { cn, Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\ninterface HorizontalProps {\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n    [\"data-testid\"]?: string;\n}\n\nconst Horizontal = ({ last, onDrop, isVisible, ...rest }: HorizontalProps) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={element => {\n                        drop(element);\n                    }}\n                    data-testid={rest[\"data-testid\"]}\n                    className={cn(\n                        \"h-sm-extra w-full absolute left-0\",\n                        last ? \"-bottom-sm-extra\" : \"-top-sm-extra\",\n                        isDragging ? \"z-[1000]\" : \"-z-[1]\"\n                    )}\n                >\n                    {isDragging && (\n                        <div\n                            className={cn(\n                                \"absolute bg-primary w-full flex items-center rounded-xs\",\n                                last ? \"bottom-0\" : \"top-0\"\n                            )}\n                        >\n                            <div\n                                className={cn(\n                                    \"w-full h-sm-extra rounded-xs p-xxs transition-colors relative flex items-center justify-center\",\n                                    isOver ? \"bg-primary-light/60\" : \"bg-primary-light\"\n                                )}\n                            >\n                                <Icon icon={<AddIcon />} label=\"Add\" size=\"xs\" color=\"accent\" />\n                            </div>\n                        </div>\n                    )}\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Horizontal;\n"],"names":["Horizontal","last","onDrop","isVisible","rest","Droppable","isOver","isDragging","drop","element","cn","Icon","AddIcon"],"mappings":";;;;AAcA,MAAMA,aAAa,CAAC,EAAEC,IAAI,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGC,MAAuB,GAC9D,WAAP,GACI,oBAACC,WAASA;QAAC,QAAQH;QAAQ,WAAWC;OACjC,CAAC,EAAEG,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAE,iBAC1B,oBAAC;YACG,KAAKC,CAAAA;gBACDD,KAAKC;YACT;YACA,eAAaL,IAAI,CAAC,cAAc;YAChC,WAAWM,GACP,qCACAT,OAAO,qBAAqB,iBAC5BM,aAAa,aAAa;WAG7BA,cAAc,WAAdA,GACG,oBAAC;YACG,WAAWG,GACP,2DACAT,OAAO,aAAa;yBAGxB,oBAAC;YACG,WAAWS,GACP,kGACAJ,SAAS,wBAAwB;yBAGrC,oBAACK,MAAIA;YAAC,oBAAM,oBAACC,gBAAOA;YAAK,OAAM;YAAM,MAAK;YAAK,OAAM;;AAUrF,4BAAeZ"}

package/admin/components/DropZone/Vertical.js

@@ -1,13 +1,7 @@
 import react from "react";
 import { Droppable } from "../Droppable.js";
-import { cn } from "@webiny/admin-ui";
-const OuterDivVertical = ({ isOver, last, isDragging })=>/*#__PURE__*/ react.createElement("div", {
-        className: cn("absolute top-0 h-full w-[30%] z-10 bg-transparent", last ? "text-right -right-sm" : "text-left -left-sm")
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: cn("absolute w-md h-full z-3 border-dashed border-sm hidden", isOver ? "border-accent-default" : "border-success-default", last ? "-right-sm" : "-left-sm", isDragging && "block")
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: cn("w-full h-full opacity-50", isOver ? "bg-primary-muted" : "bg-success-muted")
-    })));
+import { Icon, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add.svg";
 const Vertical = ({ depth, last, onDrop, isVisible })=>/*#__PURE__*/ react.createElement(Droppable, {
         onDrop: onDrop,
         isVisible: isVisible
@@ -15,20 +9,20 @@ const Vertical = ({ depth, last, onDrop, isVisible })=>/*#__PURE__*/ react.creat
             ref: (element)=>{
                 drop(element);
             },
+            className: cn("w-sm-extra h-full absolute top-0", last ? "right-0" : "left-0"),
             style: {
-                width: "30%",
-                maxWidth: "100px",
-                height: "100%",
-                position: "absolute",
-                top: 0,
-                [last ? "right" : "left"]: 0,
                 zIndex: isDragging ? 1000 + (depth || 0) : -1
             }
-        }, /*#__PURE__*/ react.createElement(OuterDivVertical, {
-            isOver: isOver,
-            isDragging: isDragging,
-            last: last
-        })));
+        }, isDragging && /*#__PURE__*/ react.createElement("div", {
+            className: cn("absolute top-0 h-full flex items-center rounded-xs", last ? "right-0" : "left-0")
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: cn("h-full w-sm-extra rounded-xs p-xxs transition-colors relative flex items-center justify-center", isOver ? "bg-warning-muted" : "bg-warning-muted/60")
+        }, /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Add",
+            size: "xs",
+            className: "fill-warning-600"
+        })))));
 const DropZone_Vertical = Vertical;
 export default DropZone_Vertical;
 

package/admin/components/DropZone/Vertical.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/DropZone/Vertical.js","sources":["../../../../src/admin/components/DropZone/Vertical.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IsVisibleCallable } from \"../Droppable.js\";\nimport { Droppable } from \"../Droppable.js\";\nimport type { DragSource } from \"~/types.js\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OuterDivVerticalProps {\n    isOver: boolean;\n    last?: boolean;\n    isDragging?: boolean;\n}\n\nconst OuterDivVertical = ({ isOver, last, isDragging }: OuterDivVerticalProps) => (\n    <div\n        className={cn(\n            \"absolute top-0 h-full w-[30%] z-10 bg-transparent\",\n            last ? \"text-right -right-sm\" : \"text-left -left-sm\"\n        )}\n    >\n        <div\n            className={cn(\n                \"absolute w-md h-full z-3 border-dashed border-sm hidden\",\n                isOver ? \"border-accent-default\" : \"border-success-default\",\n                last ? \"-right-sm\" : \"-left-sm\",\n                isDragging && \"block\"\n            )}\n        >\n            <div\n                className={cn(\n                    \"w-full h-full opacity-50\",\n                    isOver ? \"bg-primary-muted\" : \"bg-success-muted\"\n                )}\n            />\n        </div>\n    </div>\n);\n\ninterface VerticalProps {\n    depth?: number;\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n}\n\nconst Vertical = ({ depth, last, onDrop, isVisible }: VerticalProps) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={element => {\n                        drop(element);\n                    }}\n                    style={{\n                        /* For dropzone debugging: border: \"1px solid blue\",*/\n                        width: \"30%\",\n                        maxWidth: \"100px\",\n                        height: \"100%\",\n                        position: \"absolute\",\n                        top: 0,\n                        [last ? \"right\" : \"left\"]: 0,\n                        zIndex: isDragging ? 1000 + (depth || 0) : -1\n                    }}\n                >\n                    <OuterDivVertical isOver={isOver} isDragging={isDragging} last={last} />\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Vertical;\n"],"names":["OuterDivVertical","isOver","last","isDragging","cn","Vertical","depth","onDrop","isVisible","Droppable","drop","element"],"mappings":";;;AAYA,MAAMA,mBAAmB,CAAC,EAAEC,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAyB,iBACzE,oBAAC;QACG,WAAWC,GACP,qDACAF,OAAO,yBAAyB;qBAGpC,oBAAC;QACG,WAAWE,GACP,2DACAH,SAAS,0BAA0B,0BACnCC,OAAO,cAAc,YACrBC,cAAc;qBAGlB,oBAAC;QACG,WAAWC,GACP,4BACAH,SAAS,qBAAqB;;AAclD,MAAMI,WAAW,CAAC,EAAEC,KAAK,EAAEJ,IAAI,EAAEK,MAAM,EAAEC,SAAS,EAAiB,GACxD,WAAP,GACI,oBAACC,WAASA;QAAC,QAAQF;QAAQ,WAAWC;OACjC,CAAC,EAAEP,MAAM,EAAEE,UAAU,EAAEO,IAAI,EAAE,iBAC1B,oBAAC;YACG,KAAKC,CAAAA;gBACDD,KAAKC;YACT;YACA,OAAO;gBAEH,OAAO;gBACP,UAAU;gBACV,QAAQ;gBACR,UAAU;gBACV,KAAK;gBACL,CAACT,OAAO,UAAU,OAAO,EAAE;gBAC3B,QAAQC,aAAa,OAAQG,CAAAA,SAAS,KAAK;YAC/C;yBAEA,oBAACN,kBAAgBA;YAAC,QAAQC;YAAQ,YAAYE;YAAY,MAAMD;;AAOpF,0BAAeG"}
+{"version":3,"file":"admin/components/DropZone/Vertical.js","sources":["../../../../src/admin/components/DropZone/Vertical.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IsVisibleCallable } from \"../Droppable.js\";\nimport { Droppable } from \"../Droppable.js\";\nimport type { DragSource } from \"~/types.js\";\nimport { cn, Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\ninterface VerticalProps {\n    depth?: number;\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n}\n\nconst Vertical = ({ depth, last, onDrop, isVisible }: VerticalProps) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={element => {\n                        drop(element);\n                    }}\n                    className={cn(\"w-sm-extra h-full absolute top-0\", last ? \"right-0\" : \"left-0\")}\n                    style={{ zIndex: isDragging ? 1000 + (depth || 0) : -1 }}\n                >\n                    {isDragging && (\n                        <div\n                            className={cn(\n                                \"absolute top-0 h-full flex items-center rounded-xs\",\n                                last ? \"right-0\" : \"left-0\"\n                            )}\n                        >\n                            <div\n                                className={cn(\n                                    \"h-full w-sm-extra rounded-xs p-xxs transition-colors relative flex items-center justify-center\",\n                                    isOver ? \"bg-warning-muted\" : \"bg-warning-muted/60\"\n                                )}\n                            >\n                                <Icon\n                                    icon={<AddIcon />}\n                                    label=\"Add\"\n                                    size=\"xs\"\n                                    className={\"fill-warning-600\"}\n                                />\n                            </div>\n                        </div>\n                    )}\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Vertical;\n"],"names":["Vertical","depth","last","onDrop","isVisible","Droppable","isOver","isDragging","drop","element","cn","Icon","AddIcon"],"mappings":";;;;AAcA,MAAMA,WAAW,CAAC,EAAEC,KAAK,EAAEC,IAAI,EAAEC,MAAM,EAAEC,SAAS,EAAiB,GACxD,WAAP,GACI,oBAACC,WAASA;QAAC,QAAQF;QAAQ,WAAWC;OACjC,CAAC,EAAEE,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAE,iBAC1B,oBAAC;YACG,KAAKC,CAAAA;gBACDD,KAAKC;YACT;YACA,WAAWC,GAAG,oCAAoCR,OAAO,YAAY;YACrE,OAAO;gBAAE,QAAQK,aAAa,OAAQN,CAAAA,SAAS,KAAK;YAAG;WAEtDM,cAAc,WAAdA,GACG,oBAAC;YACG,WAAWG,GACP,sDACAR,OAAO,YAAY;yBAGvB,oBAAC;YACG,WAAWQ,GACP,kGACAJ,SAAS,qBAAqB;yBAGlC,oBAACK,MAAIA;YACD,oBAAM,oBAACC,gBAAOA;YACd,OAAM;YACN,MAAK;YACL,WAAW;;AAW/C,0BAAeZ"}

package/admin/components/Droppable.js

@@ -1,4 +1,5 @@
 import { useDrop } from "react-dnd";
+import { dropZoneOverState } from "./dropZoneOverState.js";
 import * as __rspack_external_react from "react";
 const DroppableComponent = (props)=>{
     const { children, onDrop, isVisible = ()=>true } = props;
@@ -15,6 +16,20 @@ const DroppableComponent = (props)=>{
             if ("function" == typeof onDrop) return onDrop(monitor.getItem());
         }
     });
+    const prevIsOverRef = __rspack_external_react.useRef(false);
+    __rspack_external_react.useEffect(()=>{
+        if (isOver === prevIsOverRef.current) return;
+        dropZoneOverState.notify(isOver);
+        prevIsOverRef.current = isOver;
+        return ()=>{
+            if (prevIsOverRef.current) {
+                dropZoneOverState.notify(false);
+                prevIsOverRef.current = false;
+            }
+        };
+    }, [
+        isOver
+    ]);
     if (item && !isVisible(item)) return null;
     let isDroppable = true;
     if (item) isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;

package/admin/components/Droppable.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/Droppable.js","sources":["../../../src/admin/components/Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ConnectDropTarget } from \"react-dnd\";\nimport { useDrop } from \"react-dnd\";\nimport type { DragSource } from \"~/types.js\";\n\nexport interface DroppableChildrenFunctionParams {\n    isDragging: boolean;\n    isDroppable: boolean;\n    isOver: boolean;\n    item: any;\n    drop: ConnectDropTarget;\n}\nexport interface DroppableChildrenFunction {\n    (params: DroppableChildrenFunctionParams): React.ReactElement;\n}\n\ninterface IsVisibleParams {\n    type: DragSource[\"type\"];\n    item: DragSource;\n    isDragging: boolean;\n}\nexport interface IsVisibleCallable {\n    (params: IsVisibleParams): boolean;\n}\nexport interface OnDropCallable {\n    (item: DragSource): void;\n}\nexport interface DroppableProps {\n    type?: string;\n    children: DroppableChildrenFunction;\n    isDragging?: boolean;\n    isDroppable?: (item: DragSource) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nexport type DragObject = {\n    item: IsVisibleParams;\n    isOver: boolean;\n};\n\nconst DroppableComponent = (props: DroppableProps) => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop<DragSource, void, DragObject>({\n        accept: \"element\",\n        collect: monitor => ({\n            isOver: monitor.isOver() && monitor.isOver({ shallow: true }),\n            item: monitor.getItem()\n        }),\n        drop(item, monitor) {\n            if (typeof props.isDroppable === \"function\" && !props.isDroppable(item)) {\n                return;\n            }\n\n            if (typeof onDrop === \"function\") {\n                return onDrop(monitor.getItem());\n            }\n        }\n    });\n\n    if (item && !isVisible(item)) {\n        return null;\n    }\n\n    let isDroppable = true;\n    if (item) {\n        isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;\n    }\n\n    return children({ isDragging: Boolean(item), isOver, isDroppable, item, drop });\n};\n\nexport const Droppable: React.ComponentType<DroppableProps> = React.memo(DroppableComponent);\n"],"names":["DroppableComponent","props","children","onDrop","isVisible","item","isOver","drop","useDrop","monitor","isDroppable","Boolean","Droppable","React"],"mappings":";;AAyCA,MAAMA,qBAAqB,CAACC;IACxB,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,YAAY,IAAM,IAAI,EAAE,GAAGH;IAErD,MAAM,CAAC,EAAEI,IAAI,EAAEC,MAAM,EAAE,EAAEC,KAAK,GAAGC,QAAsC;QACnE,QAAQ;QACR,SAASC,CAAAA,UAAY;gBACjB,QAAQA,QAAQ,MAAM,MAAMA,QAAQ,MAAM,CAAC;oBAAE,SAAS;gBAAK;gBAC3D,MAAMA,QAAQ,OAAO;YACzB;QACA,MAAKJ,IAAI,EAAEI,OAAO;YACd,IAAI,AAA6B,cAA7B,OAAOR,MAAM,WAAW,IAAmB,CAACA,MAAM,WAAW,CAACI,OAC9D;YAGJ,IAAI,AAAkB,cAAlB,OAAOF,QACP,OAAOA,OAAOM,QAAQ,OAAO;QAErC;IACJ;IAEA,IAAIJ,QAAQ,CAACD,UAAUC,OACnB,OAAO;IAGX,IAAIK,cAAc;IAClB,IAAIL,MACAK,cAAcT,MAAM,WAAW,GAAGA,MAAM,WAAW,CAACI,QAAQC;IAGhE,OAAOJ,SAAS;QAAE,YAAYS,QAAQN;QAAOC;QAAQI;QAAaL;QAAME;IAAK;AACjF;AAEO,MAAMK,YAASA,WAAAA,GAAwCC,wBAAAA,IAAU,CAACb"}
+{"version":3,"file":"admin/components/Droppable.js","sources":["../../../src/admin/components/Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ConnectDropTarget } from \"react-dnd\";\nimport { useDrop } from \"react-dnd\";\nimport type { DragSource } from \"~/types.js\";\nimport { dropZoneOverState } from \"./dropZoneOverState.js\";\n\nexport interface DroppableChildrenFunctionParams {\n    isDragging: boolean;\n    isDroppable: boolean;\n    isOver: boolean;\n    item: any;\n    drop: ConnectDropTarget;\n}\nexport interface DroppableChildrenFunction {\n    (params: DroppableChildrenFunctionParams): React.ReactElement;\n}\n\ninterface IsVisibleParams {\n    type: DragSource[\"type\"];\n    item: DragSource;\n    isDragging: boolean;\n}\nexport interface IsVisibleCallable {\n    (params: IsVisibleParams): boolean;\n}\nexport interface OnDropCallable {\n    (item: DragSource): void;\n}\nexport interface DroppableProps {\n    type?: string;\n    children: DroppableChildrenFunction;\n    isDragging?: boolean;\n    isDroppable?: (item: DragSource) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nexport type DragObject = {\n    item: IsVisibleParams;\n    isOver: boolean;\n};\n\nconst DroppableComponent = (props: DroppableProps) => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop<DragSource, void, DragObject>({\n        accept: \"element\",\n        collect: monitor => ({\n            isOver: monitor.isOver() && monitor.isOver({ shallow: true }),\n            item: monitor.getItem()\n        }),\n        drop(item, monitor) {\n            if (typeof props.isDroppable === \"function\" && !props.isDroppable(item)) {\n                return;\n            }\n\n            if (typeof onDrop === \"function\") {\n                return onDrop(monitor.getItem());\n            }\n        }\n    });\n\n    const prevIsOverRef = React.useRef(false);\n    React.useEffect(() => {\n        if (isOver === prevIsOverRef.current) {\n            return;\n        }\n        dropZoneOverState.notify(isOver);\n        prevIsOverRef.current = isOver;\n        return () => {\n            if (prevIsOverRef.current) {\n                dropZoneOverState.notify(false);\n                prevIsOverRef.current = false;\n            }\n        };\n    }, [isOver]);\n\n    if (item && !isVisible(item)) {\n        return null;\n    }\n\n    let isDroppable = true;\n    if (item) {\n        isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;\n    }\n\n    return children({ isDragging: Boolean(item), isOver, isDroppable, item, drop });\n};\n\nexport const Droppable: React.ComponentType<DroppableProps> = React.memo(DroppableComponent);\n"],"names":["DroppableComponent","props","children","onDrop","isVisible","item","isOver","drop","useDrop","monitor","prevIsOverRef","React","dropZoneOverState","isDroppable","Boolean","Droppable"],"mappings":";;;AA0CA,MAAMA,qBAAqB,CAACC;IACxB,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,YAAY,IAAM,IAAI,EAAE,GAAGH;IAErD,MAAM,CAAC,EAAEI,IAAI,EAAEC,MAAM,EAAE,EAAEC,KAAK,GAAGC,QAAsC;QACnE,QAAQ;QACR,SAASC,CAAAA,UAAY;gBACjB,QAAQA,QAAQ,MAAM,MAAMA,QAAQ,MAAM,CAAC;oBAAE,SAAS;gBAAK;gBAC3D,MAAMA,QAAQ,OAAO;YACzB;QACA,MAAKJ,IAAI,EAAEI,OAAO;YACd,IAAI,AAA6B,cAA7B,OAAOR,MAAM,WAAW,IAAmB,CAACA,MAAM,WAAW,CAACI,OAC9D;YAGJ,IAAI,AAAkB,cAAlB,OAAOF,QACP,OAAOA,OAAOM,QAAQ,OAAO;QAErC;IACJ;IAEA,MAAMC,gBAAgBC,wBAAAA,MAAY,CAAC;IACnCA,wBAAAA,SAAe,CAAC;QACZ,IAAIL,WAAWI,cAAc,OAAO,EAChC;QAEJE,kBAAkB,MAAM,CAACN;QACzBI,cAAc,OAAO,GAAGJ;QACxB,OAAO;YACH,IAAII,cAAc,OAAO,EAAE;gBACvBE,kBAAkB,MAAM,CAAC;gBACzBF,cAAc,OAAO,GAAG;YAC5B;QACJ;IACJ,GAAG;QAACJ;KAAO;IAEX,IAAID,QAAQ,CAACD,UAAUC,OACnB,OAAO;IAGX,IAAIQ,cAAc;IAClB,IAAIR,MACAQ,cAAcZ,MAAM,WAAW,GAAGA,MAAM,WAAW,CAACI,QAAQC;IAGhE,OAAOJ,SAAS;QAAE,YAAYY,QAAQT;QAAOC;QAAQO;QAAaR;QAAME;IAAK;AACjF;AAEO,MAAMQ,YAASA,WAAAA,GAAwCJ,wBAAAA,IAAU,CAACX"}

package/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js

@@ -1,21 +1,25 @@
-import react from "react";
-import { useQuery } from "@apollo/react-hooks";
+import react, { useEffect, useState } from "react";
+import { useFeature } from "@webiny/app";
 import { Grid } from "@webiny/admin-ui";
 import { useBind } from "@webiny/form";
-import { useWcp } from "@webiny/app-admin";
-import { LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS, UsersTeamsMultiAutocomplete } from "@webiny/app-aco";
+import { useFeatureFlags } from "@webiny/app-admin";
+import { UsersTeamsMultiAutocomplete } from "@webiny/app-aco";
+import { ListFolderPermissionsTargetsFeature } from "../../../../../features/listFolderPermissionsTargets/feature.js";
 import { FieldPermissionsSelection } from "./FieldPermissionsSelection.js";
 import { CannotUsePermissions } from "./CannotUsePermissions.js";
 const PermissionsEditor = ()=>{
-    const wcp = useWcp();
+    const featureFlags = useFeatureFlags();
+    const { useCase } = useFeature(ListFolderPermissionsTargetsFeature);
     const bind = useBind({
         name: "rules"
     });
     const allRules = bind.value || [];
     const accessRules = allRules.filter((r)=>"accessControl" === r.type);
     const otherRules = allRules.filter((r)=>"accessControl" !== r.type);
-    const listTargetsQuery = useQuery(LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS);
-    const targetsList = listTargetsQuery.data?.aco.listFolderLevelPermissionsTargets.data || [];
+    const [targetsList, setTargetsList] = useState([]);
+    useEffect(()=>{
+        useCase.execute().then(setTargetsList).catch(console.error);
+    }, []);
     const addPermission = (value)=>{
         const selectedUserOrTeam = value[value.length - 1];
         const newRule = {
@@ -48,7 +52,7 @@ const PermissionsEditor = ()=>{
             ...updatedAccessRules
         ]);
     };
-    if (!wcp.canUseHcmsFieldPermissions()) return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+    if (!featureFlags.isEnabled("advancedAccessControlLayer.hcmsFieldPermissions")) return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {
         span: 12
     }, /*#__PURE__*/ react.createElement(CannotUsePermissions, null)));
     return /*#__PURE__*/ react.createElement(Grid, null, /*#__PURE__*/ react.createElement(Grid.Column, {

package/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { useQuery } from \"@apollo/react-hooks\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { useWcp } from \"@webiny/app-admin\";\nimport {\n    LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS,\n    UsersTeamsMultiAutocomplete\n} from \"@webiny/app-aco\";\nimport type { FolderLevelPermissionsTarget } from \"@webiny/app-aco\";\nimport type { FieldRule } from \"~/types.js\";\nimport { FieldPermissionsSelection } from \"./FieldPermissionsSelection.js\";\nimport { CannotUsePermissions } from \"./CannotUsePermissions.js\";\n\nexport const PermissionsEditor = () => {\n    const wcp = useWcp();\n    const bind = useBind({ name: \"rules\" });\n    const allRules: FieldRule[] = bind.value || [];\n    const accessRules = allRules.filter(r => r.type === \"accessControl\");\n    const otherRules = allRules.filter(r => r.type !== \"accessControl\");\n\n    const listTargetsQuery = useQuery(LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS);\n    const targetsList: FolderLevelPermissionsTarget[] =\n        listTargetsQuery.data?.aco.listFolderLevelPermissionsTargets.data || [];\n\n    const addPermission = (value: string[]) => {\n        const selectedUserOrTeam = value[value.length - 1];\n        const newRule: FieldRule = {\n            type: \"accessControl\",\n            target: \"identity\",\n            operator: \"matches\",\n            value: selectedUserOrTeam,\n            action: \"disable\"\n        };\n\n        bind.onChange([...otherRules, ...accessRules, newRule]);\n    };\n\n    const updatePermission = ({ rule: updatedRule }: { rule: FieldRule }) => {\n        const updatedAccessRules = accessRules.map(rule => {\n            if (rule.value === updatedRule.value) {\n                return updatedRule;\n            }\n            return rule;\n        });\n        bind.onChange([...otherRules, ...updatedAccessRules]);\n    };\n\n    const removeUserTeam = ({ rule: removedRule }: { rule: FieldRule }) => {\n        const updatedAccessRules = accessRules.filter(rule => rule.value !== removedRule.value);\n        bind.onChange([...otherRules, ...updatedAccessRules]);\n    };\n\n    if (!wcp.canUseHcmsFieldPermissions()) {\n        return (\n            <Grid>\n                <Grid.Column span={12}>\n                    <CannotUsePermissions />\n                </Grid.Column>\n            </Grid>\n        );\n    }\n\n    return (\n        <Grid>\n            <Grid.Column span={12}>\n                <UsersTeamsMultiAutocomplete\n                    options={targetsList}\n                    value={accessRules.map(\n                        rule => String(rule.value) as `admin:${string}` | `team:${string}`\n                    )}\n                    onChange={addPermission}\n                />\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <FieldPermissionsSelection\n                    rules={accessRules}\n                    targetsList={targetsList}\n                    onRemoveAccess={removeUserTeam}\n                    onUpdatePermission={updatePermission}\n                />\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"names":["PermissionsEditor","wcp","useWcp","bind","useBind","allRules","accessRules","r","otherRules","listTargetsQuery","useQuery","LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS","targetsList","addPermission","value","selectedUserOrTeam","newRule","updatePermission","updatedRule","updatedAccessRules","rule","removeUserTeam","removedRule","Grid","CannotUsePermissions","UsersTeamsMultiAutocomplete","String","FieldPermissionsSelection"],"mappings":";;;;;;;;AAcO,MAAMA,oBAAoB;IAC7B,MAAMC,MAAMC;IACZ,MAAMC,OAAOC,QAAQ;QAAE,MAAM;IAAQ;IACrC,MAAMC,WAAwBF,KAAK,KAAK,IAAI,EAAE;IAC9C,MAAMG,cAAcD,SAAS,MAAM,CAACE,CAAAA,IAAKA,AAAW,oBAAXA,EAAE,IAAI;IAC/C,MAAMC,aAAaH,SAAS,MAAM,CAACE,CAAAA,IAAKA,AAAW,oBAAXA,EAAE,IAAI;IAE9C,MAAME,mBAAmBC,SAASC;IAClC,MAAMC,cACFH,iBAAiB,IAAI,EAAE,IAAI,kCAAkC,QAAQ,EAAE;IAE3E,MAAMI,gBAAgB,CAACC;QACnB,MAAMC,qBAAqBD,KAAK,CAACA,MAAM,MAAM,GAAG,EAAE;QAClD,MAAME,UAAqB;YACvB,MAAM;YACN,QAAQ;YACR,UAAU;YACV,OAAOD;YACP,QAAQ;QACZ;QAEAZ,KAAK,QAAQ,CAAC;eAAIK;eAAeF;YAAaU;SAAQ;IAC1D;IAEA,MAAMC,mBAAmB,CAAC,EAAE,MAAMC,WAAW,EAAuB;QAChE,MAAMC,qBAAqBb,YAAY,GAAG,CAACc,CAAAA;YACvC,IAAIA,KAAK,KAAK,KAAKF,YAAY,KAAK,EAChC,OAAOA;YAEX,OAAOE;QACX;QACAjB,KAAK,QAAQ,CAAC;eAAIK;eAAeW;SAAmB;IACxD;IAEA,MAAME,iBAAiB,CAAC,EAAE,MAAMC,WAAW,EAAuB;QAC9D,MAAMH,qBAAqBb,YAAY,MAAM,CAACc,CAAAA,OAAQA,KAAK,KAAK,KAAKE,YAAY,KAAK;QACtFnB,KAAK,QAAQ,CAAC;eAAIK;eAAeW;SAAmB;IACxD;IAEA,IAAI,CAAClB,IAAI,0BAA0B,IAC/B,OAAO,WAAP,GACI,oBAACsB,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,sBAAoBA;IAMrC,OAAO,WAAP,GACI,oBAACD,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,6BAA2BA;QACxB,SAASb;QACT,OAAON,YAAY,GAAG,CAClBc,CAAAA,OAAQM,OAAON,KAAK,KAAK;QAE7B,UAAUP;uBAGlB,oBAACU,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACI,2BAAyBA;QACtB,OAAOrB;QACP,aAAaM;QACb,gBAAgBS;QAChB,oBAAoBJ;;AAKxC"}
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/PermissionsEditor/PermissionsEditor.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useFeature } from \"@webiny/app\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { useFeatureFlags } from \"@webiny/app-admin\";\nimport { UsersTeamsMultiAutocomplete } from \"@webiny/app-aco\";\nimport type { FolderLevelPermissionsTarget } from \"@webiny/app-aco\";\nimport { ListFolderPermissionsTargetsFeature } from \"~/features/listFolderPermissionsTargets/feature.js\";\nimport type { FieldRule } from \"~/types.js\";\nimport { FieldPermissionsSelection } from \"./FieldPermissionsSelection.js\";\nimport { CannotUsePermissions } from \"./CannotUsePermissions.js\";\n\nexport const PermissionsEditor = () => {\n    const featureFlags = useFeatureFlags();\n    const { useCase } = useFeature(ListFolderPermissionsTargetsFeature);\n    const bind = useBind({ name: \"rules\" });\n    const allRules: FieldRule[] = bind.value || [];\n    const accessRules = allRules.filter(r => r.type === \"accessControl\");\n    const otherRules = allRules.filter(r => r.type !== \"accessControl\");\n\n    const [targetsList, setTargetsList] = useState<FolderLevelPermissionsTarget[]>([]);\n\n    useEffect(() => {\n        useCase.execute().then(setTargetsList).catch(console.error);\n    }, []);\n\n    const addPermission = (value: string[]) => {\n        const selectedUserOrTeam = value[value.length - 1];\n        const newRule: FieldRule = {\n            type: \"accessControl\",\n            target: \"identity\",\n            operator: \"matches\",\n            value: selectedUserOrTeam,\n            action: \"disable\"\n        };\n\n        bind.onChange([...otherRules, ...accessRules, newRule]);\n    };\n\n    const updatePermission = ({ rule: updatedRule }: { rule: FieldRule }) => {\n        const updatedAccessRules = accessRules.map(rule => {\n            if (rule.value === updatedRule.value) {\n                return updatedRule;\n            }\n            return rule;\n        });\n        bind.onChange([...otherRules, ...updatedAccessRules]);\n    };\n\n    const removeUserTeam = ({ rule: removedRule }: { rule: FieldRule }) => {\n        const updatedAccessRules = accessRules.filter(rule => rule.value !== removedRule.value);\n        bind.onChange([...otherRules, ...updatedAccessRules]);\n    };\n\n    if (!featureFlags.isEnabled(\"advancedAccessControlLayer.hcmsFieldPermissions\")) {\n        return (\n            <Grid>\n                <Grid.Column span={12}>\n                    <CannotUsePermissions />\n                </Grid.Column>\n            </Grid>\n        );\n    }\n\n    return (\n        <Grid>\n            <Grid.Column span={12}>\n                <UsersTeamsMultiAutocomplete\n                    options={targetsList}\n                    value={accessRules.map(\n                        rule => String(rule.value) as `admin:${string}` | `team:${string}`\n                    )}\n                    onChange={addPermission}\n                />\n            </Grid.Column>\n            <Grid.Column span={12}>\n                <FieldPermissionsSelection\n                    rules={accessRules}\n                    targetsList={targetsList}\n                    onRemoveAccess={removeUserTeam}\n                    onUpdatePermission={updatePermission}\n                />\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"names":["PermissionsEditor","featureFlags","useFeatureFlags","useCase","useFeature","ListFolderPermissionsTargetsFeature","bind","useBind","allRules","accessRules","r","otherRules","targetsList","setTargetsList","useState","useEffect","console","addPermission","value","selectedUserOrTeam","newRule","updatePermission","updatedRule","updatedAccessRules","rule","removeUserTeam","removedRule","Grid","CannotUsePermissions","UsersTeamsMultiAutocomplete","String","FieldPermissionsSelection"],"mappings":";;;;;;;;;AAYO,MAAMA,oBAAoB;IAC7B,MAAMC,eAAeC;IACrB,MAAM,EAAEC,OAAO,EAAE,GAAGC,WAAWC;IAC/B,MAAMC,OAAOC,QAAQ;QAAE,MAAM;IAAQ;IACrC,MAAMC,WAAwBF,KAAK,KAAK,IAAI,EAAE;IAC9C,MAAMG,cAAcD,SAAS,MAAM,CAACE,CAAAA,IAAKA,AAAW,oBAAXA,EAAE,IAAI;IAC/C,MAAMC,aAAaH,SAAS,MAAM,CAACE,CAAAA,IAAKA,AAAW,oBAAXA,EAAE,IAAI;IAE9C,MAAM,CAACE,aAAaC,eAAe,GAAGC,SAAyC,EAAE;IAEjFC,UAAU;QACNZ,QAAQ,OAAO,GAAG,IAAI,CAACU,gBAAgB,KAAK,CAACG,QAAQ,KAAK;IAC9D,GAAG,EAAE;IAEL,MAAMC,gBAAgB,CAACC;QACnB,MAAMC,qBAAqBD,KAAK,CAACA,MAAM,MAAM,GAAG,EAAE;QAClD,MAAME,UAAqB;YACvB,MAAM;YACN,QAAQ;YACR,UAAU;YACV,OAAOD;YACP,QAAQ;QACZ;QAEAb,KAAK,QAAQ,CAAC;eAAIK;eAAeF;YAAaW;SAAQ;IAC1D;IAEA,MAAMC,mBAAmB,CAAC,EAAE,MAAMC,WAAW,EAAuB;QAChE,MAAMC,qBAAqBd,YAAY,GAAG,CAACe,CAAAA;YACvC,IAAIA,KAAK,KAAK,KAAKF,YAAY,KAAK,EAChC,OAAOA;YAEX,OAAOE;QACX;QACAlB,KAAK,QAAQ,CAAC;eAAIK;eAAeY;SAAmB;IACxD;IAEA,MAAME,iBAAiB,CAAC,EAAE,MAAMC,WAAW,EAAuB;QAC9D,MAAMH,qBAAqBd,YAAY,MAAM,CAACe,CAAAA,OAAQA,KAAK,KAAK,KAAKE,YAAY,KAAK;QACtFpB,KAAK,QAAQ,CAAC;eAAIK;eAAeY;SAAmB;IACxD;IAEA,IAAI,CAACtB,aAAa,SAAS,CAAC,oDACxB,OAAO,WAAP,GACI,oBAAC0B,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,sBAAoBA;IAMrC,OAAO,WAAP,GACI,oBAACD,MAAIA,MAAAA,WAAAA,GACD,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACE,6BAA2BA;QACxB,SAASjB;QACT,OAAOH,YAAY,GAAG,CAClBe,CAAAA,OAAQM,OAAON,KAAK,KAAK;QAE7B,UAAUP;uBAGlB,oBAACU,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACI,2BAAyBA;QACtB,OAAOtB;QACP,aAAaG;QACb,gBAAgBa;QAChB,oBAAoBJ;;AAKxC"}

package/admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { FieldOption } from "@webiny/app-headless-cms-common/Fields/fieldOptions.js";
+import type { FieldOption } from "../../../../../admin/components/ContentModelEditor/fieldOptions.js";
 interface ActionOption {
     value: string;
     label: string;

package/admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js

@@ -3,7 +3,7 @@ import { Button, Grid, Input, Select, Separator } from "@webiny/admin-ui";
 import { useBind } from "@webiny/form";
 import { ReactComponent } from "@webiny/icons/delete.svg";
 import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
-import { VALUE_HIDDEN_OPERATORS, getOperatorOptions } from "@webiny/app-headless-cms-common/Fields/operatorOptions.js";
+import { VALUE_HIDDEN_OPERATORS, getOperatorOptions } from "../../../ContentModelEditor/operatorOptions.js";
 const DEFAULT_ACTION_OPTIONS = [
     {
         value: "hide",

package/admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { Grid, Select, Input, Button, Separator } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport type { FieldRule, FieldRuleAction } from \"~/types.js\";\nimport type { FieldOption } from \"@webiny/app-headless-cms-common/Fields/fieldOptions.js\";\nimport {\n    getOperatorOptions,\n    VALUE_HIDDEN_OPERATORS\n} from \"@webiny/app-headless-cms-common/Fields/operatorOptions.js\";\nimport type { Operator } from \"@webiny/app-headless-cms-common/Fields/evaluateExpression.js\";\n\nconst DEFAULT_ACTION_OPTIONS = [\n    { value: \"hide\", label: \"Hide\" },\n    { value: \"disable\", label: \"Disable\" }\n];\n\ninterface ActionOption {\n    value: string;\n    label: string;\n}\n\ninterface RuleRowProps {\n    rule: FieldRule;\n    index: number;\n    fieldOptions: FieldOption[];\n    actionOptions: ActionOption[];\n    onChange: (index: number, updated: FieldRule) => void;\n    onRemove: (index: number) => void;\n}\n\nconst RuleRow = ({\n    rule,\n    index,\n    fieldOptions,\n    actionOptions,\n    onChange,\n    onRemove\n}: RuleRowProps) => {\n    const selectedFieldOption = useMemo(\n        () => fieldOptions.find(o => o.value === rule.target),\n        [fieldOptions, rule.target]\n    );\n\n    const operatorOptions = useMemo(\n        () => (selectedFieldOption ? getOperatorOptions(selectedFieldOption.fieldType) : []),\n        [selectedFieldOption]\n    );\n\n    const operatorSelectOptions = useMemo(\n        () => operatorOptions.map(o => ({ value: o.value, label: o.label })),\n        [operatorOptions]\n    );\n\n    const fieldSelectOptions = useMemo(\n        () => fieldOptions.map(o => ({ value: o.value, label: o.label })),\n        [fieldOptions]\n    );\n\n    const showValue = rule.operator && !VALUE_HIDDEN_OPERATORS.has(rule.operator as Operator);\n\n    const handleFieldChange = useCallback(\n        (value: string | null) => {\n            const newTarget = value ?? \"\";\n            const newFieldOption = fieldOptions.find(o => o.value === newTarget);\n            // Reset operator and value when field changes\n            const newOps = newFieldOption ? getOperatorOptions(newFieldOption.fieldType) : [];\n            const currentOpValid = newOps.some(o => o.value === rule.operator);\n            onChange(index, {\n                ...rule,\n                target: newTarget,\n                operator: currentOpValid ? rule.operator : \"\",\n                value: currentOpValid ? rule.value : null\n            });\n        },\n        [fieldOptions, rule, index, onChange]\n    );\n\n    const handleOperatorChange = useCallback(\n        (value: string | null) => {\n            const op = value ?? \"\";\n            onChange(index, {\n                ...rule,\n                operator: op,\n                value: VALUE_HIDDEN_OPERATORS.has(op as Operator) ? null : rule.value\n            });\n        },\n        [rule, index, onChange]\n    );\n\n    const handleValueChange = useCallback(\n        (value: string | null) => {\n            let parsed: string | number | boolean | null = value ?? \"\";\n\n            // Auto-parse numbers for numeric field types\n            if (selectedFieldOption?.fieldType === \"number\" && parsed !== \"\") {\n                const num = Number(parsed);\n                if (!isNaN(num)) {\n                    parsed = num;\n                }\n            }\n\n            // Auto-parse booleans\n            if (selectedFieldOption?.fieldType === \"boolean\") {\n                if (parsed === \"true\") {\n                    parsed = true;\n                } else if (parsed === \"false\") {\n                    parsed = false;\n                }\n            }\n\n            onChange(index, { ...rule, value: parsed });\n        },\n        [rule, index, onChange, selectedFieldOption]\n    );\n\n    const handleActionChange = useCallback(\n        (value: string | null) => {\n            onChange(index, {\n                ...rule,\n                action: (value ?? actionOptions[0]?.value ?? \"hide\") as FieldRuleAction\n            });\n        },\n        [rule, index, onChange, actionOptions]\n    );\n\n    // For boolean fields, show a dropdown for value\n    const isBooleanField = selectedFieldOption?.fieldType === \"boolean\";\n\n    return (\n        <>\n            <Separator\n                className={index === 0 ? \"mb-lg\" : \"my-lg\"}\n                variant={\"accent\"}\n                labelPosition={\"start\"}\n            >\n                Rule #{index + 1}\n            </Separator>\n            <Grid>\n                <Grid.Column span={12}>\n                    <Select\n                        displayResetAction={false}\n                        label={\"Field\"}\n                        value={rule.target}\n                        options={fieldSelectOptions}\n                        onChange={handleFieldChange}\n                    />\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <Select\n                        displayResetAction={false}\n                        label={\"Operator\"}\n                        value={rule.operator}\n                        options={operatorSelectOptions}\n                        onChange={handleOperatorChange}\n                        disabled={!rule.target}\n                    />\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    {isBooleanField ? (\n                        <Select\n                            disabled={!showValue}\n                            displayResetAction={false}\n                            label={\"Value\"}\n                            value={String(rule.value ?? \"\")}\n                            options={[\n                                { value: \"true\", label: \"True\" },\n                                { value: \"false\", label: \"False\" }\n                            ]}\n                            onChange={handleValueChange}\n                        />\n                    ) : (\n                        <Input\n                            disabled={!showValue}\n                            label={\"Value\"}\n                            value={rule.value != null ? String(rule.value) : \"\"}\n                            type={selectedFieldOption?.fieldType === \"number\" ? \"number\" : \"text\"}\n                            onChange={handleValueChange}\n                        />\n                    )}\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Select\n                        label={\"Action\"}\n                        displayResetAction={false}\n                        value={rule.action}\n                        options={actionOptions}\n                        onChange={handleActionChange}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12} className={\"flex justify-between\"}>\n                    <Button\n                        className={\"[&_svg]:fill-destructive text-destructive-primary\"}\n                        containerClassName={\"flex ml-auto\"}\n                        text={\"Remove rule\"}\n                        icon={<DeleteIcon />}\n                        onClick={() => onRemove(index)}\n                        variant={\"ghost\"}\n                    />\n                </Grid.Column>\n            </Grid>\n        </>\n    );\n};\n\ninterface RulesTabProps {\n    fieldOptions: FieldOption[];\n    actionOptions?: ActionOption[];\n}\n\nexport const RulesEditor = ({\n    fieldOptions,\n    actionOptions = DEFAULT_ACTION_OPTIONS\n}: RulesTabProps) => {\n    const bind = useBind({ name: \"rules\" });\n    const allRules: FieldRule[] = bind.value || [];\n    const entryRules = allRules.filter(r => r.type === \"condition\");\n    const otherRules = allRules.filter(r => r.type !== \"condition\");\n\n    const addRule = () => {\n        const newRule: FieldRule = {\n            type: \"condition\",\n            target: \"\",\n            operator: \"\",\n            value: null,\n            action: (actionOptions[0]?.value ?? \"hide\") as FieldRuleAction\n        };\n        bind.onChange([...otherRules, ...entryRules, newRule]);\n    };\n\n    const updateRule = (index: number, updated: FieldRule) => {\n        const next = [...entryRules];\n        next[index] = updated;\n        bind.onChange([...otherRules, ...next]);\n    };\n\n    const removeRule = (index: number) => {\n        bind.onChange([...otherRules, ...entryRules.filter((_, i) => i !== index)]);\n    };\n\n    return (\n        <Grid>\n            <Grid.Column span={12}>\n                {entryRules.map((rule, index) => (\n                    <RuleRow\n                        key={index}\n                        rule={rule}\n                        index={index}\n                        fieldOptions={fieldOptions}\n                        actionOptions={actionOptions}\n                        onChange={updateRule}\n                        onRemove={removeRule}\n                    />\n                ))}\n                {entryRules.length > 0 ? (\n                    <Separator variant={\"accent\"} className={\"mt-lg\"} />\n                ) : null}\n                <div className={\"flex justify-center mt-md\"}>\n                    <Button onClick={addRule} text={\"Add Rule\"} icon={<AddIcon />} size={\"sm\"} />\n                </div>\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"names":["DEFAULT_ACTION_OPTIONS","RuleRow","rule","index","fieldOptions","actionOptions","onChange","onRemove","selectedFieldOption","useMemo","o","operatorOptions","getOperatorOptions","operatorSelectOptions","fieldSelectOptions","showValue","VALUE_HIDDEN_OPERATORS","handleFieldChange","useCallback","value","newTarget","newFieldOption","newOps","currentOpValid","handleOperatorChange","op","handleValueChange","parsed","num","Number","isNaN","handleActionChange","isBooleanField","Separator","Grid","Select","String","Input","Button","DeleteIcon","RulesEditor","bind","useBind","allRules","entryRules","r","otherRules","addRule","newRule","updateRule","updated","next","removeRule","_","i","AddIcon"],"mappings":"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"}
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.js","sources":["../../../../../../src/admin/components/FieldEditor/EditFieldDialog/RulesEditor/RulesEditor.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { Grid, Select, Input, Button, Separator } from \"@webiny/admin-ui\";\nimport { useBind } from \"@webiny/form\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport type { FieldRule, FieldRuleAction } from \"~/types.js\";\nimport type { FieldOption } from \"~/admin/components/ContentModelEditor/fieldOptions.js\";\nimport {\n    getOperatorOptions,\n    VALUE_HIDDEN_OPERATORS\n} from \"~/admin/components/ContentModelEditor/operatorOptions.js\";\nimport type { Operator } from \"~/admin/components/ContentModelEditor/evaluateExpression.js\";\n\nconst DEFAULT_ACTION_OPTIONS = [\n    { value: \"hide\", label: \"Hide\" },\n    { value: \"disable\", label: \"Disable\" }\n];\n\ninterface ActionOption {\n    value: string;\n    label: string;\n}\n\ninterface RuleRowProps {\n    rule: FieldRule;\n    index: number;\n    fieldOptions: FieldOption[];\n    actionOptions: ActionOption[];\n    onChange: (index: number, updated: FieldRule) => void;\n    onRemove: (index: number) => void;\n}\n\nconst RuleRow = ({\n    rule,\n    index,\n    fieldOptions,\n    actionOptions,\n    onChange,\n    onRemove\n}: RuleRowProps) => {\n    const selectedFieldOption = useMemo(\n        () => fieldOptions.find(o => o.value === rule.target),\n        [fieldOptions, rule.target]\n    );\n\n    const operatorOptions = useMemo(\n        () => (selectedFieldOption ? getOperatorOptions(selectedFieldOption.fieldType) : []),\n        [selectedFieldOption]\n    );\n\n    const operatorSelectOptions = useMemo(\n        () => operatorOptions.map(o => ({ value: o.value, label: o.label })),\n        [operatorOptions]\n    );\n\n    const fieldSelectOptions = useMemo(\n        () => fieldOptions.map(o => ({ value: o.value, label: o.label })),\n        [fieldOptions]\n    );\n\n    const showValue = rule.operator && !VALUE_HIDDEN_OPERATORS.has(rule.operator as Operator);\n\n    const handleFieldChange = useCallback(\n        (value: string | null) => {\n            const newTarget = value ?? \"\";\n            const newFieldOption = fieldOptions.find(o => o.value === newTarget);\n            // Reset operator and value when field changes\n            const newOps = newFieldOption ? getOperatorOptions(newFieldOption.fieldType) : [];\n            const currentOpValid = newOps.some(o => o.value === rule.operator);\n            onChange(index, {\n                ...rule,\n                target: newTarget,\n                operator: currentOpValid ? rule.operator : \"\",\n                value: currentOpValid ? rule.value : null\n            });\n        },\n        [fieldOptions, rule, index, onChange]\n    );\n\n    const handleOperatorChange = useCallback(\n        (value: string | null) => {\n            const op = value ?? \"\";\n            onChange(index, {\n                ...rule,\n                operator: op,\n                value: VALUE_HIDDEN_OPERATORS.has(op as Operator) ? null : rule.value\n            });\n        },\n        [rule, index, onChange]\n    );\n\n    const handleValueChange = useCallback(\n        (value: string | null) => {\n            let parsed: string | number | boolean | null = value ?? \"\";\n\n            // Auto-parse numbers for numeric field types\n            if (selectedFieldOption?.fieldType === \"number\" && parsed !== \"\") {\n                const num = Number(parsed);\n                if (!isNaN(num)) {\n                    parsed = num;\n                }\n            }\n\n            // Auto-parse booleans\n            if (selectedFieldOption?.fieldType === \"boolean\") {\n                if (parsed === \"true\") {\n                    parsed = true;\n                } else if (parsed === \"false\") {\n                    parsed = false;\n                }\n            }\n\n            onChange(index, { ...rule, value: parsed });\n        },\n        [rule, index, onChange, selectedFieldOption]\n    );\n\n    const handleActionChange = useCallback(\n        (value: string | null) => {\n            onChange(index, {\n                ...rule,\n                action: (value ?? actionOptions[0]?.value ?? \"hide\") as FieldRuleAction\n            });\n        },\n        [rule, index, onChange, actionOptions]\n    );\n\n    // For boolean fields, show a dropdown for value\n    const isBooleanField = selectedFieldOption?.fieldType === \"boolean\";\n\n    return (\n        <>\n            <Separator\n                className={index === 0 ? \"mb-lg\" : \"my-lg\"}\n                variant={\"accent\"}\n                labelPosition={\"start\"}\n            >\n                Rule #{index + 1}\n            </Separator>\n            <Grid>\n                <Grid.Column span={12}>\n                    <Select\n                        displayResetAction={false}\n                        label={\"Field\"}\n                        value={rule.target}\n                        options={fieldSelectOptions}\n                        onChange={handleFieldChange}\n                    />\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <Select\n                        displayResetAction={false}\n                        label={\"Operator\"}\n                        value={rule.operator}\n                        options={operatorSelectOptions}\n                        onChange={handleOperatorChange}\n                        disabled={!rule.target}\n                    />\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    {isBooleanField ? (\n                        <Select\n                            disabled={!showValue}\n                            displayResetAction={false}\n                            label={\"Value\"}\n                            value={String(rule.value ?? \"\")}\n                            options={[\n                                { value: \"true\", label: \"True\" },\n                                { value: \"false\", label: \"False\" }\n                            ]}\n                            onChange={handleValueChange}\n                        />\n                    ) : (\n                        <Input\n                            disabled={!showValue}\n                            label={\"Value\"}\n                            value={rule.value != null ? String(rule.value) : \"\"}\n                            type={selectedFieldOption?.fieldType === \"number\" ? \"number\" : \"text\"}\n                            onChange={handleValueChange}\n                        />\n                    )}\n                </Grid.Column>\n                <Grid.Column span={12}>\n                    <Select\n                        label={\"Action\"}\n                        displayResetAction={false}\n                        value={rule.action}\n                        options={actionOptions}\n                        onChange={handleActionChange}\n                    />\n                </Grid.Column>\n                <Grid.Column span={12} className={\"flex justify-between\"}>\n                    <Button\n                        className={\"[&_svg]:fill-destructive text-destructive-primary\"}\n                        containerClassName={\"flex ml-auto\"}\n                        text={\"Remove rule\"}\n                        icon={<DeleteIcon />}\n                        onClick={() => onRemove(index)}\n                        variant={\"ghost\"}\n                    />\n                </Grid.Column>\n            </Grid>\n        </>\n    );\n};\n\ninterface RulesTabProps {\n    fieldOptions: FieldOption[];\n    actionOptions?: ActionOption[];\n}\n\nexport const RulesEditor = ({\n    fieldOptions,\n    actionOptions = DEFAULT_ACTION_OPTIONS\n}: RulesTabProps) => {\n    const bind = useBind({ name: \"rules\" });\n    const allRules: FieldRule[] = bind.value || [];\n    const entryRules = allRules.filter(r => r.type === \"condition\");\n    const otherRules = allRules.filter(r => r.type !== \"condition\");\n\n    const addRule = () => {\n        const newRule: FieldRule = {\n            type: \"condition\",\n            target: \"\",\n            operator: \"\",\n            value: null,\n            action: (actionOptions[0]?.value ?? \"hide\") as FieldRuleAction\n        };\n        bind.onChange([...otherRules, ...entryRules, newRule]);\n    };\n\n    const updateRule = (index: number, updated: FieldRule) => {\n        const next = [...entryRules];\n        next[index] = updated;\n        bind.onChange([...otherRules, ...next]);\n    };\n\n    const removeRule = (index: number) => {\n        bind.onChange([...otherRules, ...entryRules.filter((_, i) => i !== index)]);\n    };\n\n    return (\n        <Grid>\n            <Grid.Column span={12}>\n                {entryRules.map((rule, index) => (\n                    <RuleRow\n                        key={index}\n                        rule={rule}\n                        index={index}\n                        fieldOptions={fieldOptions}\n                        actionOptions={actionOptions}\n                        onChange={updateRule}\n                        onRemove={removeRule}\n                    />\n                ))}\n                {entryRules.length > 0 ? (\n                    <Separator variant={\"accent\"} className={\"mt-lg\"} />\n                ) : null}\n                <div className={\"flex justify-center mt-md\"}>\n                    <Button onClick={addRule} text={\"Add Rule\"} icon={<AddIcon />} size={\"sm\"} />\n                </div>\n            </Grid.Column>\n        </Grid>\n    );\n};\n"],"names":["DEFAULT_ACTION_OPTIONS","RuleRow","rule","index","fieldOptions","actionOptions","onChange","onRemove","selectedFieldOption","useMemo","o","operatorOptions","getOperatorOptions","operatorSelectOptions","fieldSelectOptions","showValue","VALUE_HIDDEN_OPERATORS","handleFieldChange","useCallback","value","newTarget","newFieldOption","newOps","currentOpValid","handleOperatorChange","op","handleValueChange","parsed","num","Number","isNaN","handleActionChange","isBooleanField","Separator","Grid","Select","String","Input","Button","DeleteIcon","RulesEditor","bind","useBind","allRules","entryRules","r","otherRules","addRule","newRule","updateRule","updated","next","removeRule","_","i","AddIcon"],"mappings":"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"}

package/admin/components/FieldEditor/EditFieldDialog.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
-import type { FormOnSubmit } from "@webiny/form";
 import type { CmsModelField } from "../../../types.js";
 interface EditFieldDialogProps {
     onClose: () => void;
-    onSubmit: FormOnSubmit<CmsModelField>;
+    onSubmit: (data: CmsModelField) => void;
 }
-declare const EditFieldDialog: (props: EditFieldDialogProps) => React.JSX.Element;
+declare const EditFieldDialog: ((props: EditFieldDialogProps) => React.JSX.Element) & React.NamedExoticComponent<EditFieldDialogProps> & {
+    readonly type: (props: EditFieldDialogProps) => React.JSX.Element;
+};
 export default EditFieldDialog;

package/admin/components/FieldEditor/EditFieldDialog.js

@@ -1,64 +1,67 @@
-import react, { useMemo, useState } from "react";
-import cloneDeep from "lodash/cloneDeep.js";
-import { Form } from "@webiny/form";
+import react, { useEffect, useMemo } from "react";
+import { observer } from "mobx-react-lite";
 import { i18n } from "@webiny/app/i18n/index.js";
+import { FormErrors, FormView } from "@webiny/app-admin";
+import { useContainer } from "@webiny/app";
+import { Drawer } from "@webiny/admin-ui";
 import { useModelEditor, useModelField } from "../../hooks/index.js";
-import { useRendererPlugins } from "./EditFieldDialog/useRendererPlugins.js";
-import { getFieldValidators } from "./EditFieldDialog/getValidators.js";
-import { EditFieldDrawerContainer } from "./EditFieldDrawerContainer.js";
+import { FieldEditorPresenter } from "../../../presentation/fieldEditor/abstractions.js";
+import { CmsFieldType } from "../../../presentation/fieldTypes/abstractions.js";
 const t = i18n.namespace("app-headless-cms/admin/components/editor");
-function setupState(field, contentModel) {
-    const clonedField = cloneDeep(field);
-    if (!clonedField.renderer || !clonedField.renderer.name) {
-        const [renderPlugin] = useRendererPlugins();
-        if (renderPlugin) clonedField.renderer = {
-            name: renderPlugin.renderer.rendererName
-        };
-    }
-    return {
-        shadowField: clonedField,
-        isTitleField: contentModel.titleFieldId === field.fieldId
-    };
-}
-const EditFieldDialog = (props)=>{
-    const { field, fieldPlugin } = useModelField();
+const EditFieldDialog = observer((props)=>{
+    const { field } = useModelField();
     const { data: contentModel, setData: setContentModelData } = useModelEditor();
-    const [{ shadowField, isTitleField }] = useState(setupState(field, contentModel));
+    const container = useContainer();
+    const presenter = useMemo(()=>container.resolve(FieldEditorPresenter), [
+        container
+    ]);
+    const fieldType = useMemo(()=>{
+        const all = container.resolveAll(CmsFieldType);
+        return all.find((ft)=>ft.matches?.(field)) ?? all.find((ft)=>ft.type === field.type);
+    }, [
+        container,
+        field
+    ]);
+    useEffect(()=>{
+        presenter.init(field, contentModel);
+    }, []);
     const headerTitle = t`Field Settings - {fieldTypeLabel}`({
-        fieldTypeLabel: fieldPlugin.field.label
+        fieldTypeLabel: fieldType ? fieldType.label : field.type
     });
-    const onSubmit = (data, form)=>{
-        if (isTitleField && contentModel.titleFieldId !== data.fieldId) setContentModelData((prev)=>({
+    const isTitleField = contentModel.titleFieldId === field.fieldId;
+    const handleSubmit = async ()=>{
+        const result = await presenter.submit();
+        if (!result) return;
+        if (isTitleField && contentModel.titleFieldId !== result.fieldId) setContentModelData((prev)=>({
                 ...prev,
-                titleFieldId: data.fieldId
+                titleFieldId: result.fieldId
             }));
-        props.onSubmit(data, form);
+        props.onSubmit(result);
     };
-    const isSubtypeField = useMemo(()=>{
-        if (!field.type) return false;
-        const value = field.type.split(":");
-        return value.length > 1;
-    }, [
-        field.type
-    ]);
-    return /*#__PURE__*/ react.createElement(Form, {
-        data: shadowField,
-        onSubmit: onSubmit
-    }, ({ data: shadowField, submit })=>{
-        const predefinedValuesTabEnabled = !!(fieldPlugin.field.allowPredefinedValues && shadowField.predefinedValues && shadowField.predefinedValues.enabled);
-        const individualValidation = getFieldValidators(shadowField, fieldPlugin);
-        const showValidatorsTab = shadowField.list || individualValidation.validators.length > 0;
-        return /*#__PURE__*/ react.createElement(EditFieldDrawerContainer, {
-            headerTitle: headerTitle,
-            shadowField: shadowField,
-            predefinedValuesTabEnabled: predefinedValuesTabEnabled,
-            showValidatorsTab: showValidatorsTab,
-            isSubtypeField: isSubtypeField,
-            onClose: props.onClose,
-            onSubmit: submit
-        });
-    });
-};
+    return /*#__PURE__*/ react.createElement(Drawer, {
+        title: headerTitle,
+        open: true,
+        modal: true,
+        onClose: props.onClose,
+        bodyPadding: false,
+        footerSeparator: true,
+        size: "lg",
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Drawer.CancelButton, {
+            text: t`Cancel`,
+            "data-testid": "cms.editor.field.settings.cancel"
+        }), /*#__PURE__*/ react.createElement(Drawer.ConfirmButton, {
+            text: t`Save Field`,
+            onClick: handleSubmit,
+            "data-testid": "cms.editor.field.settings.save"
+        })),
+        "data-testid": "cms-editor-edit-fields-dialog"
+    }, presenter.vm.form ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FormErrors, {
+        form: presenter.vm.form
+    }), /*#__PURE__*/ react.createElement(FormView, {
+        name: "CmsFieldEditor",
+        form: presenter.vm.form
+    })) : null);
+});
 const FieldEditor_EditFieldDialog = EditFieldDialog;
 export default FieldEditor_EditFieldDialog;
 

package/admin/components/FieldEditor/EditFieldDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog.js","sources":["../../../../src/admin/components/FieldEditor/EditFieldDialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep.js\";\nimport type { FormOnSubmit } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { CmsEditorContentModel, CmsModelField } from \"~/types.js\";\nimport { useModelEditor, useModelField } from \"~/admin/hooks/index.js\";\nimport { useRendererPlugins } from \"~/admin/components/FieldEditor/EditFieldDialog/useRendererPlugins.js\";\nimport { getFieldValidators } from \"~/admin/components/FieldEditor/EditFieldDialog/getValidators.js\";\nimport { EditFieldDrawerContainer } from \"./EditFieldDrawerContainer.js\";\n// To A/B test, swap the import above with the one below:\n// import { EditFieldDialogContainer } from \"./EditFieldDialogContainer.js\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nfunction setupState(field: CmsModelField, contentModel: CmsEditorContentModel): EditFieldState {\n    const clonedField = cloneDeep(field);\n\n    if (!clonedField.renderer || !clonedField.renderer.name) {\n        const [renderPlugin] = useRendererPlugins();\n\n        if (renderPlugin) {\n            clonedField.renderer = { name: renderPlugin.renderer.rendererName };\n        }\n    }\n\n    return {\n        shadowField: clonedField,\n        isTitleField: contentModel.titleFieldId === field.fieldId\n    };\n}\n\ninterface EditFieldState {\n    shadowField: CmsModelField;\n    isTitleField: boolean;\n}\n\ninterface EditFieldDialogProps {\n    onClose: () => void;\n    onSubmit: FormOnSubmit<CmsModelField>;\n}\n\nconst EditFieldDialog = (props: EditFieldDialogProps) => {\n    const { field, fieldPlugin } = useModelField();\n    const { data: contentModel, setData: setContentModelData } = useModelEditor();\n    const [{ shadowField, isTitleField }] = useState(setupState(field, contentModel));\n\n    const headerTitle = t`Field Settings - {fieldTypeLabel}`({\n        fieldTypeLabel: fieldPlugin.field.label\n    });\n\n    const onSubmit: FormOnSubmit<CmsModelField> = (data, form) => {\n        /**\n         * In case title field `fieldId` changed, we need to update the title field on the model itself.\n         */\n        if (isTitleField && contentModel.titleFieldId !== data.fieldId) {\n            setContentModelData(prev => {\n                return {\n                    ...prev,\n                    titleFieldId: data.fieldId\n                };\n            });\n        }\n\n        props.onSubmit(data, form);\n    };\n\n    const isSubtypeField = useMemo(() => {\n        if (!field.type) {\n            return false;\n        }\n        const value = field.type.split(\":\");\n        return value.length > 1;\n    }, [field.type]);\n\n    return (\n        /**\n         * We're using the `shadowField` as the new context, because we want all changes by form inputs\n         * to immediately be propagated to all dialog components.\n         */\n        <Form<CmsModelField> data={shadowField} onSubmit={onSubmit}>\n            {({ data: shadowField, submit }) => {\n                const predefinedValuesTabEnabled = !!(\n                    fieldPlugin.field.allowPredefinedValues &&\n                    shadowField.predefinedValues &&\n                    shadowField.predefinedValues.enabled\n                );\n\n                const individualValidation = getFieldValidators(shadowField, fieldPlugin);\n                const showValidatorsTab =\n                    shadowField.list || individualValidation.validators.length > 0;\n\n                return (\n                    <EditFieldDrawerContainer\n                        headerTitle={headerTitle}\n                        shadowField={shadowField}\n                        predefinedValuesTabEnabled={predefinedValuesTabEnabled}\n                        showValidatorsTab={showValidatorsTab}\n                        isSubtypeField={isSubtypeField}\n                        onClose={props.onClose}\n                        onSubmit={submit}\n                    />\n                );\n            }}\n        </Form>\n    );\n};\n\nexport default EditFieldDialog;\n"],"names":["t","i18n","setupState","field","contentModel","clonedField","cloneDeep","renderPlugin","useRendererPlugins","EditFieldDialog","props","fieldPlugin","useModelField","setContentModelData","useModelEditor","shadowField","isTitleField","useState","headerTitle","onSubmit","data","form","prev","isSubtypeField","useMemo","value","Form","submit","predefinedValuesTabEnabled","individualValidation","getFieldValidators","showValidatorsTab","EditFieldDrawerContainer"],"mappings":";;;;;;;;AAaA,MAAMA,IAAIC,KAAK,SAAS,CAAC;AAEzB,SAASC,WAAWC,KAAoB,EAAEC,YAAmC;IACzE,MAAMC,cAAcC,UAAUH;IAE9B,IAAI,CAACE,YAAY,QAAQ,IAAI,CAACA,YAAY,QAAQ,CAAC,IAAI,EAAE;QACrD,MAAM,CAACE,aAAa,GAAGC;QAEvB,IAAID,cACAF,YAAY,QAAQ,GAAG;YAAE,MAAME,aAAa,QAAQ,CAAC,YAAY;QAAC;IAE1E;IAEA,OAAO;QACH,aAAaF;QACb,cAAcD,aAAa,YAAY,KAAKD,MAAM,OAAO;IAC7D;AACJ;AAYA,MAAMM,kBAAkB,CAACC;IACrB,MAAM,EAAEP,KAAK,EAAEQ,WAAW,EAAE,GAAGC;IAC/B,MAAM,EAAE,MAAMR,YAAY,EAAE,SAASS,mBAAmB,EAAE,GAAGC;IAC7D,MAAM,CAAC,EAAEC,WAAW,EAAEC,YAAY,EAAE,CAAC,GAAGC,SAASf,WAAWC,OAAOC;IAEnE,MAAMc,cAAclB,CAAC,CAAC,iCAAiC,CAAC,CAAC;QACrD,gBAAgBW,YAAY,KAAK,CAAC,KAAK;IAC3C;IAEA,MAAMQ,WAAwC,CAACC,MAAMC;QAIjD,IAAIL,gBAAgBZ,aAAa,YAAY,KAAKgB,KAAK,OAAO,EAC1DP,oBAAoBS,CAAAA,OACT;gBACH,GAAGA,IAAI;gBACP,cAAcF,KAAK,OAAO;YAC9B;QAIRV,MAAM,QAAQ,CAACU,MAAMC;IACzB;IAEA,MAAME,iBAAiBC,QAAQ;QAC3B,IAAI,CAACrB,MAAM,IAAI,EACX,OAAO;QAEX,MAAMsB,QAAQtB,MAAM,IAAI,CAAC,KAAK,CAAC;QAC/B,OAAOsB,MAAM,MAAM,GAAG;IAC1B,GAAG;QAACtB,MAAM,IAAI;KAAC;IAEf,OAIK,cACD,oBAACuB,MAAIA;QAAgB,MAAMX;QAAa,UAAUI;OAC7C,CAAC,EAAE,MAAMJ,WAAW,EAAEY,MAAM,EAAE;QAC3B,MAAMC,6BAA6B,CAAC,CAChCjB,CAAAA,YAAY,KAAK,CAAC,qBAAqB,IACvCI,YAAY,gBAAgB,IAC5BA,YAAY,gBAAgB,CAAC,OAAM;QAGvC,MAAMc,uBAAuBC,mBAAmBf,aAAaJ;QAC7D,MAAMoB,oBACFhB,YAAY,IAAI,IAAIc,qBAAqB,UAAU,CAAC,MAAM,GAAG;QAEjE,OAAO,WAAP,GACI,oBAACG,0BAAwBA;YACrB,aAAad;YACb,aAAaH;YACb,4BAA4Ba;YAC5B,mBAAmBG;YACnB,gBAAgBR;YAChB,SAASb,MAAM,OAAO;YACtB,UAAUiB;;IAGtB;AAGZ;AAEA,oCAAelB"}
+{"version":3,"file":"admin/components/FieldEditor/EditFieldDialog.js","sources":["../../../../src/admin/components/FieldEditor/EditFieldDialog.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { FormView, FormErrors } from \"@webiny/app-admin\";\nimport { useContainer } from \"@webiny/app\";\nimport { Drawer } from \"@webiny/admin-ui\";\nimport type { CmsModelField } from \"~/types.js\";\nimport { useModelEditor, useModelField } from \"~/admin/hooks/index.js\";\nimport { FieldEditorPresenter } from \"~/presentation/fieldEditor/abstractions.js\";\nimport { CmsFieldType } from \"~/presentation/fieldTypes/abstractions.js\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\ninterface EditFieldDialogProps {\n    onClose: () => void;\n    onSubmit: (data: CmsModelField) => void;\n}\n\nconst EditFieldDialog = observer((props: EditFieldDialogProps) => {\n    const { field } = useModelField();\n    const { data: contentModel, setData: setContentModelData } = useModelEditor();\n\n    const container = useContainer();\n    const presenter = useMemo(() => container.resolve(FieldEditorPresenter), [container]);\n    const fieldType = useMemo(() => {\n        const all = container.resolveAll(CmsFieldType);\n        return all.find(ft => ft.matches?.(field)) ?? all.find(ft => ft.type === field.type);\n    }, [container, field]);\n\n    useEffect(() => {\n        presenter.init(field, contentModel);\n    }, []);\n\n    const headerTitle = t`Field Settings - {fieldTypeLabel}`({\n        fieldTypeLabel: fieldType ? fieldType.label : field.type\n    });\n\n    const isTitleField = contentModel.titleFieldId === field.fieldId;\n\n    const handleSubmit = async () => {\n        const result = await presenter.submit();\n        if (!result) {\n            return;\n        }\n\n        if (isTitleField && contentModel.titleFieldId !== result.fieldId) {\n            setContentModelData(prev => ({\n                ...prev,\n                titleFieldId: result.fieldId\n            }));\n        }\n\n        props.onSubmit(result);\n    };\n\n    return (\n        <Drawer\n            title={headerTitle}\n            open={true}\n            modal={true}\n            onClose={props.onClose}\n            bodyPadding={false}\n            footerSeparator={true}\n            size={\"lg\"}\n            actions={\n                <>\n                    <Drawer.CancelButton\n                        text={t`Cancel`}\n                        data-testid=\"cms.editor.field.settings.cancel\"\n                    />\n                    <Drawer.ConfirmButton\n                        text={t`Save Field`}\n                        onClick={handleSubmit}\n                        data-testid=\"cms.editor.field.settings.save\"\n                    />\n                </>\n            }\n            data-testid={\"cms-editor-edit-fields-dialog\"}\n        >\n            {presenter.vm.form ? (\n                <>\n                    <FormErrors form={presenter.vm.form} />\n                    <FormView name=\"CmsFieldEditor\" form={presenter.vm.form} />\n                </>\n            ) : null}\n        </Drawer>\n    );\n});\n\nexport default EditFieldDialog;\n"],"names":["t","i18n","EditFieldDialog","observer","props","field","useModelField","contentModel","setContentModelData","useModelEditor","container","useContainer","presenter","useMemo","FieldEditorPresenter","fieldType","all","CmsFieldType","ft","useEffect","headerTitle","isTitleField","handleSubmit","result","prev","Drawer","FormErrors","FormView"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAIC,KAAK,SAAS,CAAC;AAOzB,MAAMC,kBAAkBC,SAAS,CAACC;IAC9B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,EAAE,MAAMC,YAAY,EAAE,SAASC,mBAAmB,EAAE,GAAGC;IAE7D,MAAMC,YAAYC;IAClB,MAAMC,YAAYC,QAAQ,IAAMH,UAAU,OAAO,CAACI,uBAAuB;QAACJ;KAAU;IACpF,MAAMK,YAAYF,QAAQ;QACtB,MAAMG,MAAMN,UAAU,UAAU,CAACO;QACjC,OAAOD,IAAI,IAAI,CAACE,CAAAA,KAAMA,GAAG,OAAO,GAAGb,WAAWW,IAAI,IAAI,CAACE,CAAAA,KAAMA,GAAG,IAAI,KAAKb,MAAM,IAAI;IACvF,GAAG;QAACK;QAAWL;KAAM;IAErBc,UAAU;QACNP,UAAU,IAAI,CAACP,OAAOE;IAC1B,GAAG,EAAE;IAEL,MAAMa,cAAcpB,CAAC,CAAC,iCAAiC,CAAC,CAAC;QACrD,gBAAgBe,YAAYA,UAAU,KAAK,GAAGV,MAAM,IAAI;IAC5D;IAEA,MAAMgB,eAAed,aAAa,YAAY,KAAKF,MAAM,OAAO;IAEhE,MAAMiB,eAAe;QACjB,MAAMC,SAAS,MAAMX,UAAU,MAAM;QACrC,IAAI,CAACW,QACD;QAGJ,IAAIF,gBAAgBd,aAAa,YAAY,KAAKgB,OAAO,OAAO,EAC5Df,oBAAoBgB,CAAAA,OAAS;gBACzB,GAAGA,IAAI;gBACP,cAAcD,OAAO,OAAO;YAChC;QAGJnB,MAAM,QAAQ,CAACmB;IACnB;IAEA,OAAO,WAAP,GACI,oBAACE,QAAMA;QACH,OAAOL;QACP,MAAM;QACN,OAAO;QACP,SAAShB,MAAM,OAAO;QACtB,aAAa;QACb,iBAAiB;QACjB,MAAM;QACN,uBACI,wDACI,oBAACqB,OAAO,YAAY;YAChB,MAAMzB,CAAC,CAAC,MAAM,CAAC;YACf,eAAY;0BAEhB,oBAACyB,OAAO,aAAa;YACjB,MAAMzB,CAAC,CAAC,UAAU,CAAC;YACnB,SAASsB;YACT,eAAY;;QAIxB,eAAa;OAEZV,UAAU,EAAE,CAAC,IAAI,GAAG,WAAH,GACd,wDACI,oBAACc,YAAUA;QAAC,MAAMd,UAAU,EAAE,CAAC,IAAI;sBACnC,oBAACe,UAAQA;QAAC,MAAK;QAAiB,MAAMf,UAAU,EAAE,CAAC,IAAI;UAE3D;AAGhB;AAEA,oCAAeV"}

package/admin/components/FieldEditor/Field.d.ts

@@ -6,5 +6,6 @@ export interface FieldProps {
     onEdit: (field: CmsModelField) => void;
     parent?: CmsModelField;
 }
-declare const _default: React.MemoExoticComponent<(props: FieldProps) => React.JSX.Element | null>;
+declare const Field: (props: FieldProps) => React.JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof Field>;
 export default _default;