@contentstack/live-preview-utils 3.0.1 → 3.1.0

package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.d.ts

@@ -17,7 +17,8 @@ interface FieldRevertComponentProps {
     variantStatus?: IVariantStatus;
 }
 declare const BASE_VARIANT_STATUS: IVariantStatus;
-declare function getFieldVariantStatus(fieldPathWithIndex: string): Promise<IVariantStatus | undefined>;
+declare function getFieldVariantStatus(fieldMetadata: CslpData): Promise<IVariantStatus | undefined>;
 declare const FieldRevertComponent: (props: FieldRevertComponentProps) => react_jsx_runtime.JSX.Element;
+declare const VariantRevertDropdown: (props: any) => react_jsx_runtime.JSX.Element;
 
-export { BASE_VARIANT_STATUS, FieldRevertComponent, type IVariantStatus, type TFieldRevertActionCallback, getFieldVariantStatus };
+export { BASE_VARIANT_STATUS, FieldRevertComponent, type IVariantStatus, type TFieldRevertActionCallback, VariantRevertDropdown, getFieldVariantStatus };

package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.js

@@ -2,10 +2,13 @@ import "../../../chunk-5WRI5ZAA.js";
 
 // src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx
 import classNames from "classnames";
-import { useRef, useEffect } from "preact/compat";
+import { useRef } from "preact/compat";
 import { visualBuilderStyles } from "../../visualBuilder.style.js";
 import visualBuilderPostMessage from "../../utils/visualBuilderPostMessage.js";
-import { jsx } from "preact/jsx-runtime";
+import { VariantIcon } from "../icons/variant.js";
+import { CaretIcon } from "../icons/index.js";
+import useHandleOutsideClick from "./useHandleOutsideClick.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
 var BASE_VARIANT_STATUS = {
   isAddedInstances: false,
   isBaseModified: false,
@@ -13,11 +16,11 @@ var BASE_VARIANT_STATUS = {
   isOrderChanged: false,
   fieldLevelCustomizations: false
 };
-async function getFieldVariantStatus(fieldPathWithIndex) {
+async function getFieldVariantStatus(fieldMetadata) {
   try {
     const result = await visualBuilderPostMessage?.send(
       "get-field-variant-status",
-      fieldPathWithIndex
+      fieldMetadata
     );
     return result;
   } catch (error) {
@@ -32,18 +35,6 @@ var FieldRevertComponent = (props) => {
     isOpen,
     closeDropdown
   } = props;
-  const dropdownRef = useRef(null);
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        closeDropdown();
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
   const getDropdownItems = () => {
     const {
       isAddedInstances,
@@ -118,11 +109,11 @@ var FieldRevertComponent = (props) => {
         "variant-field-revert-component",
         visualBuilderStyles()["variant-field-revert-component"]
       ),
-      ref: dropdownRef,
       onClick: (e) => e.stopPropagation(),
       children: isOpen && /* @__PURE__ */ jsx(
         "div",
         {
+          "data-testid": "variant-field-revert-component__dropdown-content",
           className: classNames(
             "variant-field-revert-component__dropdown-content",
             visualBuilderStyles()["variant-field-revert-component__dropdown-content"]
@@ -149,9 +140,64 @@ var FieldRevertComponent = (props) => {
     }
   );
 };
+var VariantRevertDropdown = (props) => {
+  const {
+    closeDropdown,
+    invertTooltipPosition,
+    toggleVariantDropdown,
+    variantStatus = BASE_VARIANT_STATUS
+  } = props;
+  const dropdownRef = useRef(null);
+  useHandleOutsideClick(dropdownRef, closeDropdown);
+  const hasDropdownItems = Object.values(variantStatus).some(
+    (value) => value
+  );
+  const buttonClassNames = classNames(
+    "visual-builder__button visual-builder__button--secondary",
+    visualBuilderStyles()["visual-builder__button"],
+    visualBuilderStyles()["visual-builder__button--secondary"],
+    visualBuilderStyles()["visual-builder__tooltip"],
+    {
+      "visual-builder__tooltip--bottom": invertTooltipPosition,
+      [visualBuilderStyles()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
+    }
+  );
+  if (!hasDropdownItems) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: classNames(buttonClassNames),
+        style: { padding: "6px" },
+        "data-tooltip": "Variant",
+        "data-testid": `visual-builder-canvas-variant-icon`,
+        children: /* @__PURE__ */ jsx(VariantIcon, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: classNames(
+          buttonClassNames,
+          visualBuilderStyles()["visual-builder__variant-button"]
+        ),
+        "data-tooltip": "Variant Revert",
+        "data-testid": `visual-builder-canvas-variant-revert`,
+        onClick: toggleVariantDropdown,
+        children: [
+          /* @__PURE__ */ jsx(VariantIcon, {}),
+          /* @__PURE__ */ jsx(CaretIcon, { open: props.isOpen })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FieldRevertComponent, { ...props })
+  ] });
+};
 export {
   BASE_VARIANT_STATUS,
   FieldRevertComponent,
+  VariantRevertDropdown,
   getFieldVariantStatus
 };
 //# sourceMappingURL=FieldRevertComponent.js.map

package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { useRef, useEffect } from \"preact/compat\";\nimport { visualBuilderStyles } from \"../../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../../utils/visualBuilderPostMessage\";\nimport { CslpData } from \"../../../cslp/types/cslp.types\";\n\nexport interface IVariantStatus {\n    fieldLevelCustomizations: boolean;\n    isBaseModified: boolean;\n    isAddedInstances: boolean;\n    isDeletedInstances: boolean;\n    isOrderChanged: boolean;\n}\n\nexport type TFieldRevertActionCallback =\n    | \"revert_to_base_entry_value\"\n    | \"revert_added_instances\"\n    | \"restore_deleted_instances\"\n    | \"reset_field_level_customizations\"\n    | \"restore_sorted_instances\";\n\ninterface FieldRevertComponentProps {\n    fieldDataName: string;\n    fieldMetadata: CslpData;\n    isOpen: boolean;\n    closeDropdown: () => void;\n    variantStatus?: IVariantStatus;\n}\n\ninterface IItem {\n    label: string;\n    action: TFieldRevertActionCallback;\n    id: string;\n    testId: string;\n    fieldDataName: string;\n}\n\nexport const BASE_VARIANT_STATUS: IVariantStatus = {\n    isAddedInstances: false,\n    isBaseModified: false,\n    isDeletedInstances: false,\n    isOrderChanged: false,\n    fieldLevelCustomizations: false,\n};\n\nexport async function getFieldVariantStatus(\n    fieldPathWithIndex: string\n): Promise<IVariantStatus | undefined> {\n    try {\n        const result = await visualBuilderPostMessage?.send<IVariantStatus>(\n            \"get-field-variant-status\",\n            fieldPathWithIndex\n        );\n        return result;\n    } catch (error) {\n        console.error(\"Failed to get field variant status:\", error);\n    }\n}\n\nexport const FieldRevertComponent = (props: FieldRevertComponentProps) => {\n    const {\n        fieldDataName,\n        fieldMetadata,\n        variantStatus = BASE_VARIANT_STATUS,\n        isOpen,\n        closeDropdown,\n    } = props;\n    const dropdownRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                dropdownRef.current &&\n                !dropdownRef.current.contains(event.target as Node)\n            ) {\n                closeDropdown();\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handleClickOutside);\n        return () => {\n            document.removeEventListener(\"mousedown\", handleClickOutside);\n        };\n    }, []);\n\n    const getDropdownItems = () => {\n        const {\n            isAddedInstances,\n            isDeletedInstances,\n            isBaseModified,\n            isOrderChanged,\n            fieldLevelCustomizations,\n        } = variantStatus;\n\n        const dropdownItems: IItem[] = [];\n\n        if (isBaseModified) {\n            dropdownItems.push({\n                label: \"Revert to base entry value\",\n                action: \"revert_to_base_entry_value\",\n                id: `iframe-cs-variant-field-${fieldDataName}-revert`,\n                testId: `iframe-cs-variant-field-${fieldDataName}-revert`,\n                fieldDataName,\n            });\n        }\n\n        if (isAddedInstances) {\n            dropdownItems.push({\n                label: \"Revert added instances\",\n                action: \"revert_added_instances\",\n                id: `iframe-cs-variant-field-${fieldDataName}-revert-added-instances`,\n                testId: `iframe-cs-variant-field-${fieldDataName}-revert-added-instances`,\n                fieldDataName,\n            });\n        }\n\n        if (isDeletedInstances) {\n            dropdownItems.push({\n                label: \"Restore deleted instances\",\n                action: \"restore_deleted_instances\",\n                id: `iframe-cs-variant-field-${fieldDataName}-restore-deleted-instances`,\n                testId: `iframe-cs-variant-field-${fieldDataName}-restore-deleted-instances`,\n                fieldDataName,\n            });\n        }\n\n        if (fieldLevelCustomizations) {\n            dropdownItems.push({\n                label: \"Reset field-level customizations\",\n                action: \"reset_field_level_customizations\",\n                id: `iframe-cs-variant-field-${fieldDataName}-reset-field-level-customizations`,\n                testId: `iframe-cs-variant-field-${fieldDataName}-reset-field-level-customizations`,\n                fieldDataName,\n            });\n        }\n\n        if (isOrderChanged) {\n            dropdownItems.push({\n                label: \"Restore sorted instances\",\n                action: \"restore_sorted_instances\",\n                id: `iframe-cs-variant-field-${fieldDataName}-restore-sorted-instances`,\n                testId: `iframe-cs-variant-field-${fieldDataName}-restore-sorted-instances`,\n                fieldDataName,\n            });\n        }\n\n        return dropdownItems;\n    };\n\n    const dropdownItems = getDropdownItems();\n\n    function handleOnClick(item: IItem) {\n        const { fieldDataName, action } = item;\n        visualBuilderPostMessage?.send(\"send-variant-revert-action-trigger\", {\n            fieldDataName,\n            action,\n            euid: fieldMetadata.entry_uid,\n            ct_uid: fieldMetadata.content_type_uid,\n            locale: fieldMetadata.locale,\n        });\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"variant-field-revert-component\",\n                visualBuilderStyles()[\"variant-field-revert-component\"]\n            )}\n            ref={dropdownRef}\n            onClick={(e) => e.stopPropagation()}\n        >\n            {isOpen && (\n                <div\n                    className={classNames(\n                        \"variant-field-revert-component__dropdown-content\",\n                        visualBuilderStyles()[\n                            \"variant-field-revert-component__dropdown-content\"\n                        ]\n                    )}\n                >\n                    {dropdownItems.map((item) => (\n                        <div\n                            className={classNames(\n                                \"variant-field-revert-component__dropdown-content__list-item\",\n                                visualBuilderStyles()[\n                                    \"variant-field-revert-component__dropdown-content__list-item\"\n                                ]\n                            )}\n                            onClick={(e) => {\n                                e.preventDefault();\n                                handleOnClick(item);\n                                closeDropdown();\n                            }}\n                            key={item.id}\n                            data-testid={item.testId}\n                        >\n                            <span>{item.label}</span>\n                        </div>\n                    ))}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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","names":["dropdownItems","fieldDataName"]}
+{"version":3,"sources":["../../../../../src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { useRef, useEffect } from \"preact/compat\";\nimport { visualBuilderStyles } from \"../../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../../utils/visualBuilderPostMessage\";\nimport { CslpData } from \"../../../cslp/types/cslp.types\";\nimport { VariantIcon } from \"../icons/variant\";\nimport { CaretIcon } from \"../icons\";\nimport useHandleOutsideClick from \"./useHandleOutsideClick\";\n\nexport interface IVariantStatus {\n    fieldLevelCustomizations: boolean;\n    isBaseModified: boolean;\n    isAddedInstances: boolean;\n    isDeletedInstances: boolean;\n    isOrderChanged: boolean;\n}\n\nexport type TFieldRevertActionCallback =\n    | \"revert_to_base_entry_value\"\n    | \"revert_added_instances\"\n    | \"restore_deleted_instances\"\n    | \"reset_field_level_customizations\"\n    | \"restore_sorted_instances\";\n\ninterface FieldRevertComponentProps {\n    fieldDataName: string;\n    fieldMetadata: CslpData;\n    isOpen: boolean;\n    closeDropdown: () => void;\n    variantStatus?: IVariantStatus;\n}\n\ninterface IItem {\n    label: string;\n    action: TFieldRevertActionCallback;\n    id: string;\n    testId: string;\n    fieldDataName: string;\n}\n\nexport const BASE_VARIANT_STATUS: IVariantStatus = {\n    isAddedInstances: false,\n    isBaseModified: false,\n    isDeletedInstances: false,\n    isOrderChanged: false,\n    fieldLevelCustomizations: false,\n};\n\nexport async function getFieldVariantStatus(\n    fieldMetadata: CslpData\n): Promise<IVariantStatus | undefined> {\n    try {\n        const result = await visualBuilderPostMessage?.send<IVariantStatus>(\n            \"get-field-variant-status\",\n            fieldMetadata\n        );\n        return result;\n    } catch (error) {\n        console.error(\"Failed to get field variant status:\", error);\n    }\n}\n\nexport const FieldRevertComponent = (props: FieldRevertComponentProps) => {\n    const {\n        fieldDataName,\n        fieldMetadata,\n        variantStatus = BASE_VARIANT_STATUS,\n        isOpen,\n        closeDropdown,\n    } = props;\n\n    const getDropdownItems = () => {\n        const {\n            isAddedInstances,\n            isDeletedInstances,\n            isBaseModified,\n            isOrderChanged,\n            fieldLevelCustomizations,\n        } = variantStatus;\n\n        const dropdownItems: IItem[] = [];\n\n        if (isBaseModified) {\n            dropdownItems.push({\n                label: \"Revert to base entry value\",\n                action: \"revert_to_base_entry_value\",\n                id: `iframe-cs-variant-field-${fieldDataName}-revert`,\n                testId: `iframe-cs-variant-field-${fieldDataName}-revert`,\n                fieldDataName,\n            });\n        }\n\n        if (isAddedInstances) {\n            dropdownItems.push({\n                label: \"Revert added instances\",\n                action: \"revert_added_instances\",\n                id: `iframe-cs-variant-field-${fieldDataName}-revert-added-instances`,\n                testId: `iframe-cs-variant-field-${fieldDataName}-revert-added-instances`,\n                fieldDataName,\n            });\n        }\n\n        if (isDeletedInstances) {\n            dropdownItems.push({\n                label: \"Restore deleted instances\",\n                action: \"restore_deleted_instances\",\n                id: `iframe-cs-variant-field-${fieldDataName}-restore-deleted-instances`,\n                testId: `iframe-cs-variant-field-${fieldDataName}-restore-deleted-instances`,\n                fieldDataName,\n            });\n        }\n\n        if (fieldLevelCustomizations) {\n            dropdownItems.push({\n                label: \"Reset field-level customizations\",\n                action: \"reset_field_level_customizations\",\n                id: `iframe-cs-variant-field-${fieldDataName}-reset-field-level-customizations`,\n                testId: `iframe-cs-variant-field-${fieldDataName}-reset-field-level-customizations`,\n                fieldDataName,\n            });\n        }\n\n        if (isOrderChanged) {\n            dropdownItems.push({\n                label: \"Restore sorted instances\",\n                action: \"restore_sorted_instances\",\n                id: `iframe-cs-variant-field-${fieldDataName}-restore-sorted-instances`,\n                testId: `iframe-cs-variant-field-${fieldDataName}-restore-sorted-instances`,\n                fieldDataName,\n            });\n        }\n\n        return dropdownItems;\n    };\n\n    const dropdownItems = getDropdownItems();\n\n    function handleOnClick(item: IItem) {\n        const { fieldDataName, action } = item;\n        visualBuilderPostMessage?.send(\"send-variant-revert-action-trigger\", {\n            fieldDataName,\n            action,\n            euid: fieldMetadata.entry_uid,\n            ct_uid: fieldMetadata.content_type_uid,\n            locale: fieldMetadata.locale,\n        });\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"variant-field-revert-component\",\n                visualBuilderStyles()[\"variant-field-revert-component\"]\n            )}\n            onClick={(e) => e.stopPropagation()}\n        >\n            {isOpen && (\n                <div\n                    data-testid=\"variant-field-revert-component__dropdown-content\"\n                    className={classNames(\n                        \"variant-field-revert-component__dropdown-content\",\n                        visualBuilderStyles()[\n                            \"variant-field-revert-component__dropdown-content\"\n                        ]\n                    )}\n                >\n                    {dropdownItems.map((item) => (\n                        <div\n                            className={classNames(\n                                \"variant-field-revert-component__dropdown-content__list-item\",\n                                visualBuilderStyles()[\n                                    \"variant-field-revert-component__dropdown-content__list-item\"\n                                ]\n                            )}\n                            onClick={(e) => {\n                                e.preventDefault();\n                                handleOnClick(item);\n                                closeDropdown();\n                            }}\n                            key={item.id}\n                            data-testid={item.testId}\n                        >\n                            <span>{item.label}</span>\n                        </div>\n                    ))}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport const VariantRevertDropdown = (props: any) => {\n    const {\n        closeDropdown,\n        invertTooltipPosition,\n        toggleVariantDropdown,\n        variantStatus = BASE_VARIANT_STATUS,\n    } = props;\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    useHandleOutsideClick(dropdownRef, closeDropdown);\n    const hasDropdownItems = Object.values(variantStatus).some(\n        (value) => value\n    );\n\n    const buttonClassNames = classNames(\n        \"visual-builder__button visual-builder__button--secondary\",\n        visualBuilderStyles()[\"visual-builder__button\"],\n        visualBuilderStyles()[\"visual-builder__button--secondary\"],\n        visualBuilderStyles()[\"visual-builder__tooltip\"],\n        {\n            \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n            [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n                invertTooltipPosition,\n        }\n    );\n\n    if (!hasDropdownItems) {\n        return (\n            <button\n                className={classNames(buttonClassNames)}\n                style={{ padding: \"6px\" }}\n                data-tooltip={\"Variant\"}\n                data-testid={`visual-builder-canvas-variant-icon`}\n            >\n                <VariantIcon />\n            </button>\n        );\n    }\n    return (\n        <div ref={dropdownRef}>\n            <button\n                className={classNames(\n                    buttonClassNames,\n                    visualBuilderStyles()[\"visual-builder__variant-button\"]\n                )}\n                data-tooltip={\"Variant Revert\"}\n                data-testid={`visual-builder-canvas-variant-revert`}\n                onClick={toggleVariantDropdown}\n            >\n                <VariantIcon />\n                <CaretIcon open={props.isOpen} />\n            </button>\n            <FieldRevertComponent {...props} />\n        </div>\n    );\n};\n"],"mappings":"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","names":["dropdownItems","fieldDataName"]}

package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.cjs

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/components/FieldRevert/useHandleOutsideClick.ts
+var useHandleOutsideClick_exports = {};
+__export(useHandleOutsideClick_exports, {
+  default: () => useHandleOutsideClick_default
+});
+module.exports = __toCommonJS(useHandleOutsideClick_exports);
+var import_compat = require("preact/compat");
+var useHandleOutsideClick = (ref, callback) => {
+  (0, import_compat.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, callback]);
+};
+var useHandleOutsideClick_default = useHandleOutsideClick;
+//# sourceMappingURL=useHandleOutsideClick.cjs.map

package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/visualBuilder/components/FieldRevert/useHandleOutsideClick.ts"],"sourcesContent":["import { useEffect } from \"preact/compat\";\n\nconst useHandleOutsideClick = (\n    ref: React.RefObject<HTMLElement>,\n    callback: () => void\n) => {\n    useEffect(() => {\n        const handleClickOutside = (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                callback();\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handleClickOutside);\n        return () => {\n            document.removeEventListener(\"mousedown\", handleClickOutside);\n        };\n    }, [ref, callback]);\n};\n\nexport default useHandleOutsideClick;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA0B;AAE1B,IAAM,wBAAwB,CAC1B,KACA,aACC;AACD,+BAAU,MAAM;AACZ,UAAM,qBAAqB,CAAC,UAAsB;AAC9C,UAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,MAAM,MAAc,GAAG;AAC5D,iBAAS;AAAA,MACb;AAAA,IACJ;AAEA,aAAS,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM;AACT,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAChE;AAAA,EACJ,GAAG,CAAC,KAAK,QAAQ,CAAC;AACtB;AAEA,IAAO,gCAAQ;","names":[]}

package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.d.cts

@@ -0,0 +1,3 @@
+declare const useHandleOutsideClick: (ref: React.RefObject<HTMLElement>, callback: () => void) => void;
+
+export { useHandleOutsideClick as default };

package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.d.ts

@@ -0,0 +1,3 @@
+declare const useHandleOutsideClick: (ref: React.RefObject<HTMLElement>, callback: () => void) => void;
+
+export { useHandleOutsideClick as default };

package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.js

@@ -0,0 +1,22 @@
+import "../../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/FieldRevert/useHandleOutsideClick.ts
+import { useEffect } from "preact/compat";
+var useHandleOutsideClick = (ref, callback) => {
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, callback]);
+};
+var useHandleOutsideClick_default = useHandleOutsideClick;
+export {
+  useHandleOutsideClick_default as default
+};
+//# sourceMappingURL=useHandleOutsideClick.js.map

package/dist/modern/visualBuilder/components/FieldRevert/useHandleOutsideClick.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/visualBuilder/components/FieldRevert/useHandleOutsideClick.ts"],"sourcesContent":["import { useEffect } from \"preact/compat\";\n\nconst useHandleOutsideClick = (\n    ref: React.RefObject<HTMLElement>,\n    callback: () => void\n) => {\n    useEffect(() => {\n        const handleClickOutside = (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                callback();\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handleClickOutside);\n        return () => {\n            document.removeEventListener(\"mousedown\", handleClickOutside);\n        };\n    }, [ref, callback]);\n};\n\nexport default useHandleOutsideClick;\n"],"mappings":";;;AAAA,SAAS,iBAAiB;AAE1B,IAAM,wBAAwB,CAC1B,KACA,aACC;AACD,YAAU,MAAM;AACZ,UAAM,qBAAqB,CAAC,UAAsB;AAC9C,UAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,MAAM,MAAc,GAAG;AAC5D,iBAAS;AAAA,MACb;AAAA,IACJ;AAEA,aAAS,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM;AACT,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAChE;AAAA,EACJ,GAAG,CAAC,KAAK,QAAQ,CAAC;AACtB;AAEA,IAAO,gCAAQ;","names":[]}

package/dist/modern/visualBuilder/components/FieldToolbar.cjs

@@ -33,7 +33,6 @@ __export(FieldToolbar_exports, {
   default: () => FieldToolbar_default
 });
 module.exports = __toCommonJS(FieldToolbar_exports);
-var import_signals = require("@preact/signals");
 var import_getChildrenDirection = __toESM(require("../utils/getChildrenDirection.cjs"), 1);
 var import_constants = require("../utils/constants.cjs");
 var import_getFieldType = require("../utils/getFieldType.cjs");
@@ -86,23 +85,23 @@ function handleEdit(fieldMetadata) {
 }
 function handleFormFieldFocus(eventDetails) {
   const { editableElement, fieldMetadata, cslpData } = eventDetails;
-  import_visualBuilderPostMessage.default?.send(
-    import_postMessage.VisualBuilderPostMessageEvents.TOGGLE_FORM,
-    {
-      fieldMetadata,
-      cslpData
-    }
-  ).then(() => {
-    import_visualBuilderPostMessage.default?.send(import_postMessage.VisualBuilderPostMessageEvents.FOCUS_FIELD, {
-      DOMEditStack: (0, import_getCsDataOfElement.getDOMEditStack)(editableElement)
-    });
+  import_visualBuilderPostMessage.default?.send(import_postMessage.VisualBuilderPostMessageEvents.TOGGLE_FORM, {
+    fieldMetadata,
+    cslpData
+  }).then(() => {
+    import_visualBuilderPostMessage.default?.send(
+      import_postMessage.VisualBuilderPostMessageEvents.FOCUS_FIELD,
+      {
+        DOMEditStack: (0, import_getCsDataOfElement.getDOMEditStack)(editableElement)
+      }
+    );
   });
 }
 function FieldToolbarComponent(props) {
   const { eventDetails } = props;
   const { fieldMetadata, editableElement: targetElement } = eventDetails;
-  const direction = (0, import_signals.useSignal)("");
   const parentPath = fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue || "";
+  const direction = (0, import_getChildrenDirection.default)(targetElement, parentPath);
   const isVariant = !!fieldMetadata?.variant;
   const [fieldSchema, setFieldSchema] = (0, import_compat.useState)(
     null
@@ -116,13 +115,10 @@ function FieldToolbarComponent(props) {
   let fieldType = null;
   let isWholeMultipleField = false;
   if (fieldSchema) {
-    const { isDisabled } = (0, import_isFieldDisabled.isFieldDisabled)(
-      fieldSchema,
-      {
-        editableElement: targetElement,
-        fieldMetadata
-      }
-    );
+    const { isDisabled } = (0, import_isFieldDisabled.isFieldDisabled)(fieldSchema, {
+      editableElement: targetElement,
+      fieldMetadata
+    });
     if (isDisabled) {
       return null;
     }
@@ -138,7 +134,6 @@ function FieldToolbarComponent(props) {
       return null;
     }
   }
-  direction.value = (0, import_getChildrenDirection.default)(targetElement, parentPath);
   const invertTooltipPosition = targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;
   const editButton = Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
@@ -256,19 +251,23 @@ function FieldToolbarComponent(props) {
       if (fieldSchema2) {
         setFieldSchema(fieldSchema2);
       }
-      const variantStatus = await (0, import_FieldRevertComponent.getFieldVariantStatus)(
-        fieldMetadata.fieldPathWithIndex
-      );
+      const variantStatus = await (0, import_FieldRevertComponent.getFieldVariantStatus)(fieldMetadata);
       setFieldVariantStatus(variantStatus ?? import_FieldRevertComponent.BASE_VARIANT_STATUS);
     }
     fetchFieldSchema();
   }, [fieldMetadata]);
   (0, import_compat.useEffect)(() => {
-    import_visualBuilderPostMessage.default?.on(import_postMessage.VisualBuilderPostMessageEvents.DELETE_INSTANCE, (args) => {
-      if (args.data?.path === fieldMetadata.instance.fieldPathWithIndex) {
-        props.hideOverlay();
+    const event = import_visualBuilderPostMessage.default?.on(
+      import_postMessage.VisualBuilderPostMessageEvents.DELETE_INSTANCE,
+      (args) => {
+        if (args.data?.path === fieldMetadata.instance.fieldPathWithIndex) {
+          props.hideOverlay();
+        }
       }
-    });
+    );
+    return () => {
+      event?.unregister();
+    };
   }, []);
   const multipleFieldToolbarButtonClasses = (0, import_classnames.default)(
     "visual-builder__button visual-builder__button--secondary",
@@ -280,132 +279,131 @@ function FieldToolbarComponent(props) {
       [(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: (0, import_classnames.default)(
         "visual-builder__field-toolbar-container",
         (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__field-toolbar-container"]
       ),
-      children: [
-        isVariant && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_FieldRevertComponent.FieldRevertComponent,
-          {
-            fieldDataName: fieldMetadata.fieldPathWithIndex,
-            fieldMetadata,
-            variantStatus: fieldVariantStatus,
-            isOpen: isOpenVariantRevert,
-            closeDropdown: closeVariantDropdown
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: (0, import_classnames.default)(
-              "visual-builder__focused-toolbar__multiple-field-toolbar",
-              (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__multiple-field-toolbar"]
-            ),
-            "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                className: (0, import_classnames.default)(
-                  "visual-builder__focused-toolbar__button-group",
-                  (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__button-group"]
-                ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                  isVariant ? variantButton : null,
-                  isMultiple && !isWholeMultipleField ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "button",
-                      {
-                        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button",
-                        className: multipleFieldToolbarButtonClasses,
-                        "data-tooltip": direction.value === "vertical" ? "Move up" : "Move left",
-                        onClick: (e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          (0, import_instanceHandlers.handleMoveInstance)(
-                            fieldMetadata,
-                            "previous"
-                          );
-                        },
-                        disabled: disableMoveLeft,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          import_icons.MoveLeftIcon,
-                          {
-                            className: (0, import_classnames.default)({
-                              "visual-builder__rotate--90": direction.value === "vertical",
-                              [(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__rotate--90"]]: direction.value === "vertical"
-                            }),
-                            disabled: disableMoveLeft
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "button",
-                      {
-                        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button",
-                        className: multipleFieldToolbarButtonClasses,
-                        "data-tooltip": direction.value === "vertical" ? "Move down" : "Move right",
-                        onClick: (e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          (0, import_instanceHandlers.handleMoveInstance)(
-                            fieldMetadata,
-                            "next"
-                          );
-                        },
-                        disabled: disableMoveRight,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          import_icons.MoveRightIcon,
-                          {
-                            className: (0, import_classnames.default)({
-                              "visual-builder__rotate--90": direction.value === "vertical",
-                              [(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__rotate--90"]]: direction.value === "vertical"
-                            }),
-                            disabled: disableMoveRight
-                          }
-                        )
-                      }
-                    ),
-                    isModalEditable ? editButton : null,
-                    formButton,
-                    isReplaceAllowed ? replaceButton : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "button",
-                      {
-                        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__delete-button",
-                        className: multipleFieldToolbarButtonClasses,
-                        "data-tooltip": "Delete",
-                        onClick: (e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          (0, import_instanceHandlers.handleDeleteInstance)(fieldMetadata);
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DeleteIcon, {})
-                      }
-                    )
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                    isModalEditable ? editButton : null,
-                    isReplaceAllowed ? replaceButton : null,
-                    formButton,
-                    fieldSchema ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      import_CommentIcon.default,
-                      {
-                        fieldMetadata,
-                        fieldSchema,
-                        invertTooltipPosition
-                      }
-                    ) : null
-                  ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: (0, import_classnames.default)(
+            "visual-builder__focused-toolbar__multiple-field-toolbar",
+            (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__multiple-field-toolbar"]
+          ),
+          "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: (0, import_classnames.default)(
+                "visual-builder__focused-toolbar__button-group",
+                (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__button-group"]
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                isVariant ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_FieldRevertComponent.VariantRevertDropdown,
+                  {
+                    fieldDataName: fieldMetadata.fieldPathWithIndex,
+                    fieldMetadata,
+                    variantStatus: fieldVariantStatus,
+                    isOpen: isOpenVariantRevert,
+                    closeDropdown: closeVariantDropdown,
+                    invertTooltipPosition,
+                    toggleVariantDropdown
+                  }
+                ) : null,
+                isMultiple && !isWholeMultipleField ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button",
+                      className: multipleFieldToolbarButtonClasses,
+                      "data-tooltip": direction === "vertical" ? "Move up" : "Move left",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        (0, import_instanceHandlers.handleMoveInstance)(
+                          fieldMetadata,
+                          "previous"
+                        );
+                      },
+                      disabled: disableMoveLeft,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_icons.MoveLeftIcon,
+                        {
+                          className: (0, import_classnames.default)({
+                            "visual-builder__rotate--90": direction === "vertical",
+                            [(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__rotate--90"]]: direction === "vertical"
+                          }),
+                          disabled: disableMoveLeft
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button",
+                      className: multipleFieldToolbarButtonClasses,
+                      "data-tooltip": direction === "vertical" ? "Move down" : "Move right",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        (0, import_instanceHandlers.handleMoveInstance)(
+                          fieldMetadata,
+                          "next"
+                        );
+                      },
+                      disabled: disableMoveRight,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_icons.MoveRightIcon,
+                        {
+                          className: (0, import_classnames.default)({
+                            "visual-builder__rotate--90": direction === "vertical",
+                            [(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__rotate--90"]]: direction === "vertical"
+                          }),
+                          disabled: disableMoveRight
+                        }
+                      )
+                    }
+                  ),
+                  isModalEditable ? editButton : null,
+                  formButton,
+                  isReplaceAllowed ? replaceButton : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__delete-button",
+                      className: multipleFieldToolbarButtonClasses,
+                      "data-tooltip": "Delete",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        (0, import_instanceHandlers.handleDeleteInstance)(fieldMetadata);
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DeleteIcon, {})
+                    }
+                  )
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  isModalEditable ? editButton : null,
+                  isReplaceAllowed ? replaceButton : null,
+                  formButton,
+                  fieldSchema ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_CommentIcon.default,
+                    {
+                      fieldMetadata,
+                      fieldSchema,
+                      invertTooltipPosition
+                    }
+                  ) : null
                 ] })
-              }
-            )
-          }
-        )
-      ]
+              ] })
+            }
+          )
+        }
+      )
     }
   );
 }