@webiny/app-headless-cms 6.4.5 → 6.6.0-alpha.0

package/admin/components/Dialogs/TrashEntryConfirmDialog.js

@@ -0,0 +1,21 @@
+import react from "react";
+import { ConfirmationDialog } from "@webiny/app-admin/components/ConfirmationDialog/index.js";
+import { useNamedConfirmationDialog } from "@webiny/app-admin";
+const TrashEntryConfirmDialog = ()=>{
+    const { onConfirm, onCancel, closeDialog } = useNamedConfirmationDialog();
+    return /*#__PURE__*/ react.createElement(ConfirmationDialog, {
+        title: "Trash entry",
+        loadingLabel: "Moving to trash...",
+        onConfirm: async ()=>{
+            await onConfirm();
+            closeDialog();
+        },
+        onCancel: ()=>{
+            onCancel();
+            closeDialog();
+        }
+    }, /*#__PURE__*/ react.createElement("p", null, "Are you sure you want to move this entry to trash? This action will include all of the revisions."));
+};
+export { TrashEntryConfirmDialog };
+
+//# sourceMappingURL=TrashEntryConfirmDialog.js.map

package/admin/components/Dialogs/TrashEntryConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/Dialogs/TrashEntryConfirmDialog.js","sources":["../../../../src/admin/components/Dialogs/TrashEntryConfirmDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { ConfirmationDialog } from \"@webiny/app-admin/components/ConfirmationDialog/index.js\";\nimport { useNamedConfirmationDialog } from \"@webiny/app-admin\";\n\nexport const TrashEntryConfirmDialog = () => {\n    const { onConfirm, onCancel, closeDialog } = useNamedConfirmationDialog<{ entryId: string }>();\n\n    return (\n        <ConfirmationDialog\n            title=\"Trash entry\"\n            loadingLabel=\"Moving to trash...\"\n            onConfirm={async () => {\n                await onConfirm();\n                closeDialog();\n            }}\n            onCancel={() => {\n                onCancel();\n                closeDialog();\n            }}\n        >\n            <p>\n                Are you sure you want to move this entry to trash? This action will include all of\n                the revisions.\n            </p>\n        </ConfirmationDialog>\n    );\n};\n"],"names":["TrashEntryConfirmDialog","onConfirm","onCancel","closeDialog","useNamedConfirmationDialog","ConfirmationDialog"],"mappings":";;;AAIO,MAAMA,0BAA0B;IACnC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGC;IAE7C,OAAO,WAAP,GACI,oBAACC,oBAAkBA;QACf,OAAM;QACN,cAAa;QACb,WAAW;YACP,MAAMJ;YACNE;QACJ;QACA,UAAU;YACND;YACAC;QACJ;qBAEA,oBAAC,WAAE;AAMf"}

package/admin/components/Dialogs/UnpublishEntryConfirmDialog.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const UnpublishEntryConfirmDialog: () => React.JSX.Element;

package/admin/components/Dialogs/UnpublishEntryConfirmDialog.js

@@ -0,0 +1,22 @@
+import react from "react";
+import { ConfirmationDialog } from "@webiny/app-admin/components/ConfirmationDialog/index.js";
+import { useNamedConfirmationDialog } from "@webiny/app-admin";
+const UnpublishEntryConfirmDialog = ()=>{
+    const { onConfirm, onCancel, closeDialog } = useNamedConfirmationDialog();
+    return /*#__PURE__*/ react.createElement(ConfirmationDialog, {
+        title: "Unpublish entry",
+        confirmLabel: "Yes, unpublish!",
+        loadingLabel: "Unpublishing...",
+        onConfirm: async ()=>{
+            await onConfirm();
+            closeDialog();
+        },
+        onCancel: ()=>{
+            onCancel();
+            closeDialog();
+        }
+    }, /*#__PURE__*/ react.createElement("p", null, "Are you sure you want to unpublish this entry?"));
+};
+export { UnpublishEntryConfirmDialog };
+
+//# sourceMappingURL=UnpublishEntryConfirmDialog.js.map

package/admin/components/Dialogs/UnpublishEntryConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/Dialogs/UnpublishEntryConfirmDialog.js","sources":["../../../../src/admin/components/Dialogs/UnpublishEntryConfirmDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { ConfirmationDialog } from \"@webiny/app-admin/components/ConfirmationDialog/index.js\";\nimport { useNamedConfirmationDialog } from \"@webiny/app-admin\";\n\nexport const UnpublishEntryConfirmDialog = () => {\n    const { onConfirm, onCancel, closeDialog } = useNamedConfirmationDialog<{ entryId: string }>();\n\n    return (\n        <ConfirmationDialog\n            title=\"Unpublish entry\"\n            confirmLabel=\"Yes, unpublish!\"\n            loadingLabel=\"Unpublishing...\"\n            onConfirm={async () => {\n                await onConfirm();\n                closeDialog();\n            }}\n            onCancel={() => {\n                onCancel();\n                closeDialog();\n            }}\n        >\n            <p>Are you sure you want to unpublish this entry?</p>\n        </ConfirmationDialog>\n    );\n};\n"],"names":["UnpublishEntryConfirmDialog","onConfirm","onCancel","closeDialog","useNamedConfirmationDialog","ConfirmationDialog"],"mappings":";;;AAIO,MAAMA,8BAA8B;IACvC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGC;IAE7C,OAAO,WAAP,GACI,oBAACC,oBAAkBA;QACf,OAAM;QACN,cAAa;QACb,cAAa;QACb,WAAW;YACP,MAAMJ;YACNE;QACJ;QACA,UAAU;YACND;YACAC;QACJ;qBAEA,oBAAC,WAAE;AAGf"}

package/admin/components/DragPreview.js

@@ -1,56 +1,70 @@
-import react, { useEffect, useState } from "react";
+import react, { useEffect, useMemo, useRef, useState } from "react";
 import { useDragLayer } from "react-dnd";
-let subscribedToOffsetChange = false;
+import { useContainer } from "@webiny/app";
+import { DragCursor } from "@webiny/admin-ui";
+import { dropZoneOverState } from "./dropZoneOverState.js";
+import { getDragInfo } from "./getDragInfo.js";
+import { CmsFieldType, CmsLayoutFieldType } from "../../presentation/fieldTypes/abstractions.js";
 let dragPreviewRef = null;
-const onOffsetChange = (monitor)=>()=>{
-        if (!dragPreviewRef) return;
-        const offset = monitor.getClientOffset();
-        if (!offset) return;
-        const transform = `translate(${offset.x - 15}px, ${offset.y - 15}px)`;
-        dragPreviewRef.style["transform"] = transform;
-        dragPreviewRef.style["-webkit-transform"] = transform;
-    };
 const DragPreview = ()=>{
-    const [dragHelperOpacity, setDragHelperOpacity] = useState(0);
-    const { isDragging } = useDragLayer((initialMonitor)=>{
-        const monitor = initialMonitor;
-        if (!subscribedToOffsetChange) {
-            monitor.subscribeToOffsetChange(onOffsetChange(monitor));
-            subscribedToOffsetChange = true;
-        }
+    const [opacity, setOpacity] = useState(0);
+    const [isOverSlot, setIsOverSlot] = useState(false);
+    const monitorRef = useRef(null);
+    const container = useContainer();
+    const fieldTypesMap = useMemo(()=>{
+        const all = container.resolveAll(CmsFieldType);
+        const map = new Map();
+        for (const ft of all)map.set(ft.type, ft);
+        return map;
+    }, [
+        container
+    ]);
+    const layoutFieldTypesMap = useMemo(()=>{
+        const all = container.resolveAll(CmsLayoutFieldType);
+        const map = new Map();
+        for (const lft of all)map.set(lft.type, lft);
+        return map;
+    }, [
+        container
+    ]);
+    const { isDragging, item } = useDragLayer((monitor)=>{
+        monitorRef.current = monitor;
+        const offset = monitor.getClientOffset();
+        if (offset && dragPreviewRef) dragPreviewRef.style.transform = `translate(${offset.x + 12}px, ${offset.y + 12}px)`;
         return {
-            isDragging: monitor.isDragging()
+            isDragging: monitor.isDragging(),
+            item: monitor.getItem()
         };
     });
-    useEffect(()=>()=>{
-            subscribedToOffsetChange = false;
-            dragPreviewRef = null;
-        }, []);
     useEffect(()=>{
-        if (isDragging) setTimeout(()=>{
-            setDragHelperOpacity(isDragging ? 1 : 0);
-        }, 100);
-        else setDragHelperOpacity(0);
+        if (isDragging) {
+            const t = setTimeout(()=>setOpacity(1), 80);
+            return ()=>clearTimeout(t);
+        }
+        setOpacity(0);
     }, [
         isDragging
     ]);
+    useEffect(()=>dropZoneOverState.subscribe(setIsOverSlot), []);
+    useEffect(()=>()=>{
+            dragPreviewRef = null;
+        }, []);
     if (!isDragging) return null;
-    if (!isDragging) return null;
+    const { label, icon } = getDragInfo(item, fieldTypesMap, layoutFieldTypesMap);
     return /*#__PURE__*/ react.createElement("div", {
-        style: {
-            zIndex: 1001
-        },
-        className: "fixed pointer-events-none left-0 top-0 w-full h-full"
+        className: "fixed pointer-events-none left-0 top-0 w-full h-full z-[1001]"
     }, /*#__PURE__*/ react.createElement("div", {
         ref: (el)=>{
             dragPreviewRef = el;
         },
-        className: "transition-opacity duration-250 ease-in-out block",
+        className: "absolute transition-opacity duration-100",
         style: {
-            opacity: dragHelperOpacity
+            opacity
         }
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: "size-lg rounded-full bg-primary"
+    }, /*#__PURE__*/ react.createElement(DragCursor, {
+        label: label,
+        icon: icon,
+        isOverSlot: isOverSlot
     })));
 };
 const components_DragPreview = DragPreview;

package/admin/components/DragPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/components/DragPreview.js","sources":["../../../src/admin/components/DragPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { DragSourceMonitor } from \"react-dnd\";\nimport { useDragLayer } from \"react-dnd\";\nimport type { DragSourceMonitorImpl } from \"~/types.js\";\n\nlet subscribedToOffsetChange = false;\n\nlet dragPreviewRef: HTMLDivElement | null = null;\n\nconst onOffsetChange = (monitor: DragSourceMonitor) => () => {\n    if (!dragPreviewRef) {\n        return;\n    }\n\n    const offset = monitor.getClientOffset();\n    if (!offset) {\n        return;\n    }\n\n    const transform = `translate(${offset.x - 15}px, ${offset.y - 15}px)`;\n    dragPreviewRef.style[\"transform\"] = transform;\n    // TODO @ts-refactor figure out better type / possibly not needed in newer browsers\n    // @ts-expect-error\n    dragPreviewRef.style[\"-webkit-transform\"] = transform;\n};\n\nconst DragPreview = () => {\n    const [dragHelperOpacity, setDragHelperOpacity] = useState(0);\n    const { isDragging } = useDragLayer(initialMonitor => {\n        /**\n         * We must cast because TS is complaining. We know that casting as DragSourceMonitorImpl is ok.\n         */\n        const monitor = initialMonitor as unknown as DragSourceMonitorImpl;\n        if (!subscribedToOffsetChange) {\n            monitor.subscribeToOffsetChange(onOffsetChange(monitor));\n            subscribedToOffsetChange = true;\n        }\n\n        return {\n            isDragging: monitor.isDragging()\n        };\n    });\n\n    useEffect(() => {\n        return () => {\n            subscribedToOffsetChange = false;\n            dragPreviewRef = null;\n        };\n    }, []);\n\n    // We track the value of \"isDragging\" and apply opacity=1 (after 100ms), when it switches to true.\n    // Without this, the drag cursor would be shown in the top-left corner for a short amount of time, and then it\n    // would be repositioned correctly. Definitely looks like a glitch. This also adds a nice little fade-in effect.\n    useEffect(() => {\n        if (isDragging) {\n            setTimeout(() => {\n                setDragHelperOpacity(isDragging ? 1 : 0);\n            }, 100);\n        } else {\n            setDragHelperOpacity(0);\n        }\n    }, [isDragging]);\n\n    if (!isDragging) {\n        return null;\n    }\n\n    if (!isDragging) {\n        return null;\n    }\n\n    return (\n        <div\n            style={{ zIndex: 1001 }}\n            className=\"fixed pointer-events-none left-0 top-0 w-full h-full\"\n        >\n            <div\n                ref={el => {\n                    dragPreviewRef = el;\n                }}\n                className=\"transition-opacity duration-250 ease-in-out block\"\n                style={{ opacity: dragHelperOpacity }}\n            >\n                <div className=\"size-lg rounded-full bg-primary\" />\n            </div>\n        </div>\n    );\n};\nexport default DragPreview;\n"],"names":["subscribedToOffsetChange","dragPreviewRef","onOffsetChange","monitor","offset","transform","DragPreview","dragHelperOpacity","setDragHelperOpacity","useState","isDragging","useDragLayer","initialMonitor","useEffect","setTimeout","el"],"mappings":";;AAKA,IAAIA,2BAA2B;AAE/B,IAAIC,iBAAwC;AAE5C,MAAMC,iBAAiB,CAACC,UAA+B;QACnD,IAAI,CAACF,gBACD;QAGJ,MAAMG,SAASD,QAAQ,eAAe;QACtC,IAAI,CAACC,QACD;QAGJ,MAAMC,YAAY,CAAC,UAAU,EAAED,OAAO,CAAC,GAAG,GAAG,IAAI,EAAEA,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;QACrEH,eAAe,KAAK,CAAC,YAAY,GAAGI;QAGpCJ,eAAe,KAAK,CAAC,oBAAoB,GAAGI;IAChD;AAEA,MAAMC,cAAc;IAChB,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,SAAS;IAC3D,MAAM,EAAEC,UAAU,EAAE,GAAGC,aAAaC,CAAAA;QAIhC,MAAMT,UAAUS;QAChB,IAAI,CAACZ,0BAA0B;YAC3BG,QAAQ,uBAAuB,CAACD,eAAeC;YAC/CH,2BAA2B;QAC/B;QAEA,OAAO;YACH,YAAYG,QAAQ,UAAU;QAClC;IACJ;IAEAU,UAAU,IACC;YACHb,2BAA2B;YAC3BC,iBAAiB;QACrB,GACD,EAAE;IAKLY,UAAU;QACN,IAAIH,YACAI,WAAW;YACPN,qBAAqBE,aAAa,IAAI;QAC1C,GAAG;aAEHF,qBAAqB;IAE7B,GAAG;QAACE;KAAW;IAEf,IAAI,CAACA,YACD,OAAO;IAGX,IAAI,CAACA,YACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YAAE,QAAQ;QAAK;QACtB,WAAU;qBAEV,oBAAC;QACG,KAAKK,CAAAA;YACDd,iBAAiBc;QACrB;QACA,WAAU;QACV,OAAO;YAAE,SAASR;QAAkB;qBAEpC,oBAAC;QAAI,WAAU;;AAI/B;AACA,+BAAeD"}
+{"version":3,"file":"admin/components/DragPreview.js","sources":["../../../src/admin/components/DragPreview.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { DragLayerMonitor } from \"react-dnd\";\nimport { useDragLayer } from \"react-dnd\";\nimport { useContainer } from \"@webiny/app\";\nimport { DragCursor } from \"@webiny/admin-ui\";\nimport { dropZoneOverState } from \"./dropZoneOverState.js\";\nimport { getDragInfo } from \"./getDragInfo.js\";\nimport type { DragSource } from \"~/types.js\";\nimport {\n    CmsFieldType,\n    CmsLayoutFieldType,\n    type ICmsFieldType\n} from \"~/presentation/fieldTypes/abstractions.js\";\n\nlet dragPreviewRef: HTMLDivElement | null = null;\n\nconst DragPreview = () => {\n    const [opacity, setOpacity] = useState(0);\n    const [isOverSlot, setIsOverSlot] = useState(false);\n    const monitorRef = useRef<DragLayerMonitor | null>(null);\n    const container = useContainer();\n    const fieldTypesMap = useMemo(() => {\n        const all = container.resolveAll(CmsFieldType);\n        const map = new Map<string, ICmsFieldType>();\n        for (const ft of all) {\n            map.set(ft.type, ft);\n        }\n        return map;\n    }, [container]);\n    const layoutFieldTypesMap = useMemo(() => {\n        const all = container.resolveAll(CmsLayoutFieldType);\n        const map = new Map<string, CmsLayoutFieldType.Interface>();\n        for (const lft of all) {\n            map.set(lft.type, lft);\n        }\n        return map;\n    }, [container]);\n\n    const { isDragging, item } = useDragLayer((monitor: DragLayerMonitor) => {\n        monitorRef.current = monitor;\n\n        const offset = monitor.getClientOffset();\n        if (offset && dragPreviewRef) {\n            dragPreviewRef.style.transform = `translate(${offset.x + 12}px, ${offset.y + 12}px)`;\n        }\n\n        return {\n            isDragging: monitor.isDragging(),\n            item: monitor.getItem() as DragSource | null\n        };\n    });\n\n    useEffect(() => {\n        if (isDragging) {\n            const t = setTimeout(() => setOpacity(1), 80);\n            return () => clearTimeout(t);\n        }\n        setOpacity(0);\n        return undefined;\n    }, [isDragging]);\n\n    useEffect(() => {\n        return dropZoneOverState.subscribe(setIsOverSlot);\n    }, []);\n\n    useEffect(() => {\n        return () => {\n            dragPreviewRef = null;\n        };\n    }, []);\n\n    if (!isDragging) {\n        return null;\n    }\n\n    const { label, icon } = getDragInfo(item, fieldTypesMap, layoutFieldTypesMap);\n\n    return (\n        <div className={\"fixed pointer-events-none left-0 top-0 w-full h-full z-[1001]\"}>\n            <div\n                ref={el => {\n                    dragPreviewRef = el;\n                }}\n                className={\"absolute transition-opacity duration-100\"}\n                style={{ opacity }}\n            >\n                <DragCursor label={label} icon={icon} isOverSlot={isOverSlot} />\n            </div>\n        </div>\n    );\n};\n\nexport default DragPreview;\n"],"names":["dragPreviewRef","DragPreview","opacity","setOpacity","useState","isOverSlot","setIsOverSlot","monitorRef","useRef","container","useContainer","fieldTypesMap","useMemo","all","CmsFieldType","map","Map","ft","layoutFieldTypesMap","CmsLayoutFieldType","lft","isDragging","item","useDragLayer","monitor","offset","useEffect","t","setTimeout","clearTimeout","dropZoneOverState","label","icon","getDragInfo","el","DragCursor"],"mappings":";;;;;;;AAcA,IAAIA,iBAAwC;AAE5C,MAAMC,cAAc;IAChB,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IACvC,MAAM,CAACC,YAAYC,cAAc,GAAGF,SAAS;IAC7C,MAAMG,aAAaC,OAAgC;IACnD,MAAMC,YAAYC;IAClB,MAAMC,gBAAgBC,QAAQ;QAC1B,MAAMC,MAAMJ,UAAU,UAAU,CAACK;QACjC,MAAMC,MAAM,IAAIC;QAChB,KAAK,MAAMC,MAAMJ,IACbE,IAAI,GAAG,CAACE,GAAG,IAAI,EAAEA;QAErB,OAAOF;IACX,GAAG;QAACN;KAAU;IACd,MAAMS,sBAAsBN,QAAQ;QAChC,MAAMC,MAAMJ,UAAU,UAAU,CAACU;QACjC,MAAMJ,MAAM,IAAIC;QAChB,KAAK,MAAMI,OAAOP,IACdE,IAAI,GAAG,CAACK,IAAI,IAAI,EAAEA;QAEtB,OAAOL;IACX,GAAG;QAACN;KAAU;IAEd,MAAM,EAAEY,UAAU,EAAEC,IAAI,EAAE,GAAGC,aAAa,CAACC;QACvCjB,WAAW,OAAO,GAAGiB;QAErB,MAAMC,SAASD,QAAQ,eAAe;QACtC,IAAIC,UAAUzB,gBACVA,eAAe,KAAK,CAAC,SAAS,GAAG,CAAC,UAAU,EAAEyB,OAAO,CAAC,GAAG,GAAG,IAAI,EAAEA,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;QAGxF,OAAO;YACH,YAAYD,QAAQ,UAAU;YAC9B,MAAMA,QAAQ,OAAO;QACzB;IACJ;IAEAE,UAAU;QACN,IAAIL,YAAY;YACZ,MAAMM,IAAIC,WAAW,IAAMzB,WAAW,IAAI;YAC1C,OAAO,IAAM0B,aAAaF;QAC9B;QACAxB,WAAW;IAEf,GAAG;QAACkB;KAAW;IAEfK,UAAU,IACCI,kBAAkB,SAAS,CAACxB,gBACpC,EAAE;IAELoB,UAAU,IACC;YACH1B,iBAAiB;QACrB,GACD,EAAE;IAEL,IAAI,CAACqB,YACD,OAAO;IAGX,MAAM,EAAEU,KAAK,EAAEC,IAAI,EAAE,GAAGC,YAAYX,MAAMX,eAAeO;IAEzD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,KAAKgB,CAAAA;YACDlC,iBAAiBkC;QACrB;QACA,WAAW;QACX,OAAO;YAAEhC;QAAQ;qBAEjB,oBAACiC,YAAUA;QAAC,OAAOJ;QAAO,MAAMC;QAAM,YAAY3B;;AAIlE;AAEA,+BAAeJ"}

package/admin/components/DropZone/Center.js

@@ -1,11 +1,11 @@
 import react from "react";
 import { Droppable } from "../Droppable.js";
 import { cn, cva } from "@webiny/admin-ui";
-const droppableContainerVariants = cva("bg-transparent box-border h-full min-h-[120px] relative user-select-none w-full border-md border-dashed", {
+const droppableContainerVariants = cva("mt-10 box-border h-full min-h-[120px] relative user-select-none w-full border-md border-dashed rounded-xl", {
     variants: {
         isOver: {
-            true: "border-accent-default text-accent-primary",
-            false: "border-success-default text-success-primary"
+            true: "bg-primary/5 border-accent-primary/50 text-accent-primary",
+            false: "bg-neutral-base/30 border-neutral-muted text-neutral-strong"
         },
         isDroppable: {
             false: "border-success-default text-accent-primary"
@@ -39,7 +39,7 @@ const Center = ({ onDrop, children, style, isDroppable })=>/*#__PURE__*/ react.c
                 isDroppable
             }))
         }, /*#__PURE__*/ react.createElement("div", {
-            className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 m-0"
+            className: "text-sm absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 m-0"
         }, children))));
 const DropZone_Center = Center;
 export default DropZone_Center;

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

@@ -1 +1 @@
-{"version":3,"file":"admin/components/DropZone/Center.js","sources":["../../../../src/admin/components/DropZone/Center.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport React from \"react\";\nimport type { DroppableProps, OnDropCallable } from \"./../Droppable.js\";\nimport { Droppable } from \"./../Droppable.js\";\nimport { cn, cva } from \"@webiny/admin-ui\";\n\nconst droppableContainerVariants = cva(\n    \"bg-transparent box-border h-full min-h-[120px] relative user-select-none w-full border-md border-dashed\",\n    {\n        variants: {\n            isOver: {\n                true: \"border-accent-default text-accent-primary\",\n                false: \"border-success-default text-success-primary\"\n            },\n            isDroppable: {\n                false: \"border-success-default text-accent-primary\"\n            }\n        },\n        defaultVariants: {\n            isOver: false,\n            isDroppable: true\n        }\n    }\n);\n\ninterface CenterProps {\n    type?: string;\n    onDrop: OnDropCallable;\n    children: React.ReactNode;\n    active?: boolean;\n    highlight?: boolean;\n    style?: CSSProperties;\n    isDroppable?: DroppableProps[\"isDroppable\"];\n}\n\nconst getInert = (isDroppable: boolean) => {\n    return isDroppable ? {} : { inert: true };\n};\n\nconst Center = ({ onDrop, children, style, isDroppable }: CenterProps) => {\n    return (\n        <Droppable onDrop={onDrop} isDroppable={isDroppable}>\n            {({ isOver, drop, isDroppable }) => (\n                <div\n                    ref={element => {\n                        drop(element);\n                    }}\n                    style={{ width: \"100%\", height: \"100%\", ...style }}\n                    data-testid={\"cms-editor-first-field-area\"}\n                    {...getInert(isDroppable)}\n                >\n                    <div className={cn(droppableContainerVariants({ isOver, isDroppable }))}>\n                        <div className=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 m-0\">\n                            {children}\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Center;\n"],"names":["droppableContainerVariants","cva","getInert","isDroppable","Center","onDrop","children","style","Droppable","isOver","drop","element","cn"],"mappings":";;;AAMA,MAAMA,6BAA6BC,IAC/B,2GACA;IACI,UAAU;QACN,QAAQ;YACJ,MAAM;YACN,OAAO;QACX;QACA,aAAa;YACT,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,QAAQ;QACR,aAAa;IACjB;AACJ;AAaJ,MAAMC,WAAW,CAACC,cACPA,cAAc,CAAC,IAAI;QAAE,OAAO;IAAK;AAG5C,MAAMC,SAAS,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEJ,WAAW,EAAe,GAC1D,WAAP,GACI,oBAACK,WAASA;QAAC,QAAQH;QAAQ,aAAaF;OACnC,CAAC,EAAEM,MAAM,EAAEC,IAAI,EAAEP,WAAW,EAAE,iBAC3B,oBAAC;YACG,KAAKQ,CAAAA;gBACDD,KAAKC;YACT;YACA,OAAO;gBAAE,OAAO;gBAAQ,QAAQ;gBAAQ,GAAGJ,KAAK;YAAC;YACjD,eAAa;YACZ,GAAGL,SAASC,YAAY;yBAEzB,oBAAC;YAAI,WAAWS,GAAGZ,2BAA2B;gBAAES;gBAAQN;YAAY;yBAChE,oBAAC;YAAI,WAAU;WACVG;AAS7B,wBAAeF"}
+{"version":3,"file":"admin/components/DropZone/Center.js","sources":["../../../../src/admin/components/DropZone/Center.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport React from \"react\";\nimport type { DroppableProps, OnDropCallable } from \"./../Droppable.js\";\nimport { Droppable } from \"./../Droppable.js\";\nimport { cn, cva } from \"@webiny/admin-ui\";\n\nconst droppableContainerVariants = cva(\n    \"mt-10 box-border h-full min-h-[120px] relative user-select-none w-full border-md border-dashed rounded-xl\",\n    {\n        variants: {\n            isOver: {\n                true: \"bg-primary/5 border-accent-primary/50 text-accent-primary\",\n                false: \"bg-neutral-base/30 border-neutral-muted text-neutral-strong\"\n            },\n            isDroppable: {\n                false: \"border-success-default text-accent-primary\"\n            }\n        },\n        defaultVariants: {\n            isOver: false,\n            isDroppable: true\n        }\n    }\n);\n\ninterface CenterProps {\n    type?: string;\n    onDrop: OnDropCallable;\n    children: React.ReactNode;\n    active?: boolean;\n    highlight?: boolean;\n    style?: CSSProperties;\n    isDroppable?: DroppableProps[\"isDroppable\"];\n}\n\nconst getInert = (isDroppable: boolean) => {\n    return isDroppable ? {} : { inert: true };\n};\n\nconst Center = ({ onDrop, children, style, isDroppable }: CenterProps) => {\n    return (\n        <Droppable onDrop={onDrop} isDroppable={isDroppable}>\n            {({ isOver, drop, isDroppable }) => (\n                <div\n                    ref={element => {\n                        drop(element);\n                    }}\n                    style={{ width: \"100%\", height: \"100%\", ...style }}\n                    data-testid={\"cms-editor-first-field-area\"}\n                    {...getInert(isDroppable)}\n                >\n                    <div className={cn(droppableContainerVariants({ isOver, isDroppable }))}>\n                        <div className=\"text-sm absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 m-0\">\n                            {children}\n                        </div>\n                    </div>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Center;\n"],"names":["droppableContainerVariants","cva","getInert","isDroppable","Center","onDrop","children","style","Droppable","isOver","drop","element","cn"],"mappings":";;;AAMA,MAAMA,6BAA6BC,IAC/B,6GACA;IACI,UAAU;QACN,QAAQ;YACJ,MAAM;YACN,OAAO;QACX;QACA,aAAa;YACT,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,QAAQ;QACR,aAAa;IACjB;AACJ;AAaJ,MAAMC,WAAW,CAACC,cACPA,cAAc,CAAC,IAAI;QAAE,OAAO;IAAK;AAG5C,MAAMC,SAAS,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEJ,WAAW,EAAe,GAC1D,WAAP,GACI,oBAACK,WAASA;QAAC,QAAQH;QAAQ,aAAaF;OACnC,CAAC,EAAEM,MAAM,EAAEC,IAAI,EAAEP,WAAW,EAAE,iBAC3B,oBAAC;YACG,KAAKQ,CAAAA;gBACDD,KAAKC;YACT;YACA,OAAO;gBAAE,OAAO;gBAAQ,QAAQ;gBAAQ,GAAGJ,KAAK;YAAC;YACjD,eAAa;YACZ,GAAGL,SAASC,YAAY;yBAEzB,oBAAC;YAAI,WAAWS,GAAGZ,2BAA2B;gBAAES;gBAAQN;YAAY;yBAChE,oBAAC;YAAI,WAAU;WACVG;AAS7B,wBAAeF"}

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 { 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 { 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 = {

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 { useWcp } 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 wcp = useWcp();\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 (!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","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,MAAMC;IACZ,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,IAAI,0BAA0B,IAC/B,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",