npm - @contentstack/live-preview-utils - Versions diffs - 3.0.2 → 3.1.0 - Mend

@contentstack/live-preview-utils 3.0.2 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.cjs CHANGED Viewed

@@ -32,6 +32,7 @@ var FieldRevertComponent_exports = {};
 __export(FieldRevertComponent_exports, {
   BASE_VARIANT_STATUS: () => BASE_VARIANT_STATUS,
   FieldRevertComponent: () => FieldRevertComponent,
+  VariantRevertDropdown: () => VariantRevertDropdown,
   getFieldVariantStatus: () => getFieldVariantStatus
 });
 module.exports = __toCommonJS(FieldRevertComponent_exports);
@@ -39,6 +40,9 @@ var import_classnames = __toESM(require("classnames"), 1);
 var import_compat = require("preact/compat");
 var import_visualBuilder = require("../../visualBuilder.style.cjs");
 var import_visualBuilderPostMessage = __toESM(require("../../utils/visualBuilderPostMessage.cjs"), 1);
+var import_variant = require("../icons/variant.cjs");
+var import_icons = require("../icons/index.cjs");
+var import_useHandleOutsideClick = __toESM(require("./useHandleOutsideClick.cjs"), 1);
 var import_jsx_runtime = require("preact/jsx-runtime");
 var BASE_VARIANT_STATUS = {
   isAddedInstances: false,
@@ -66,18 +70,6 @@ var FieldRevertComponent = (props) => {
     isOpen,
     closeDropdown
   } = props;
-  const dropdownRef = (0, import_compat.useRef)(null);
-  (0, import_compat.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,
@@ -152,11 +144,11 @@ var FieldRevertComponent = (props) => {
         "variant-field-revert-component",
         (0, import_visualBuilder.visualBuilderStyles)()["variant-field-revert-component"]
       ),
-      ref: dropdownRef,
       onClick: (e) => e.stopPropagation(),
       children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
+          "data-testid": "variant-field-revert-component__dropdown-content",
           className: (0, import_classnames.default)(
             "variant-field-revert-component__dropdown-content",
             (0, import_visualBuilder.visualBuilderStyles)()["variant-field-revert-component__dropdown-content"]
@@ -183,10 +175,65 @@ var FieldRevertComponent = (props) => {
     }
   );
 };
+var VariantRevertDropdown = (props) => {
+  const {
+    closeDropdown,
+    invertTooltipPosition,
+    toggleVariantDropdown,
+    variantStatus = BASE_VARIANT_STATUS
+  } = props;
+  const dropdownRef = (0, import_compat.useRef)(null);
+  (0, import_useHandleOutsideClick.default)(dropdownRef, closeDropdown);
+  const hasDropdownItems = Object.values(variantStatus).some(
+    (value) => value
+  );
+  const buttonClassNames = (0, import_classnames.default)(
+    "visual-builder__button visual-builder__button--secondary",
+    (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button"],
+    (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button--secondary"],
+    (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__tooltip"],
+    {
+      "visual-builder__tooltip--bottom": invertTooltipPosition,
+      [(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
+    }
+  );
+  if (!hasDropdownItems) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        className: (0, import_classnames.default)(buttonClassNames),
+        style: { padding: "6px" },
+        "data-tooltip": "Variant",
+        "data-testid": `visual-builder-canvas-variant-icon`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_variant.VariantIcon, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: dropdownRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        className: (0, import_classnames.default)(
+          buttonClassNames,
+          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-button"]
+        ),
+        "data-tooltip": "Variant Revert",
+        "data-testid": `visual-builder-canvas-variant-revert`,
+        onClick: toggleVariantDropdown,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_variant.VariantIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretIcon, { open: props.isOpen })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldRevertComponent, { ...props })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BASE_VARIANT_STATUS,
   FieldRevertComponent,
+  VariantRevertDropdown,
   getFieldVariantStatus
 });
 //# sourceMappingURL=FieldRevertComponent.cjs.map

package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.cjs.map CHANGED Viewed

	@@ -1 +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 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 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":["visualBuilderPostMessage","dropdownItems","fieldDataName","classNames"]}
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\";\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,oBAAyC;AACzC,2BAAoC;AACpC,sCAAqC;AAErC,qBAA4B;AAC5B,mBAA0B;AAC1B,mCAAkC;AA+KN;AA9IrB,IAAM,sBAAsC;AAAA,EAC/C,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,0BAA0B;AAC9B;AAEA,eAAsB,sBAClB,eACmC;AACnC,MAAI;AACA,UAAM,SAAS,MAAM,gCAAAA,SAA0B;AAAA,MAC3C;AAAA,MACA;AAAA,IACJ;AACA,WAAO;AAAA,EACX,SAAS,OAAO;AACZ,YAAQ,MAAM,uCAAuC,KAAK;AAAA,EAC9D;AACJ;AAEO,IAAM,uBAAuB,CAAC,UAAqC;AACtE,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,mBAAmB,MAAM;AAC3B,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAI;AAEJ,UAAMC,iBAAyB,CAAC;AAEhC,QAAI,gBAAgB;AAChB,MAAAA,eAAc,KAAK;AAAA,QACf,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,IAAI,2BAA2B,aAAa;AAAA,QAC5C,QAAQ,2BAA2B,aAAa;AAAA,QAChD;AAAA,MACJ,CAAC;AAAA,IACL;AAEA,QAAI,kBAAkB;AAClB,MAAAA,eAAc,KAAK;AAAA,QACf,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,IAAI,2BAA2B,aAAa;AAAA,QAC5C,QAAQ,2BAA2B,aAAa;AAAA,QAChD;AAAA,MACJ,CAAC;AAAA,IACL;AAEA,QAAI,oBAAoB;AACpB,MAAAA,eAAc,KAAK;AAAA,QACf,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,IAAI,2BAA2B,aAAa;AAAA,QAC5C,QAAQ,2BAA2B,aAAa;AAAA,QAChD;AAAA,MACJ,CAAC;AAAA,IACL;AAEA,QAAI,0BAA0B;AAC1B,MAAAA,eAAc,KAAK;AAAA,QACf,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,IAAI,2BAA2B,aAAa;AAAA,QAC5C,QAAQ,2BAA2B,aAAa;AAAA,QAChD;AAAA,MACJ,CAAC;AAAA,IACL;AAEA,QAAI,gBAAgB;AAChB,MAAAA,eAAc,KAAK;AAAA,QACf,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,IAAI,2BAA2B,aAAa;AAAA,QAC5C,QAAQ,2BAA2B,aAAa;AAAA,QAChD;AAAA,MACJ,CAAC;AAAA,IACL;AAEA,WAAOA;AAAA,EACX;AAEA,QAAM,gBAAgB,iBAAiB;AAEvC,WAAS,cAAc,MAAa;AAChC,UAAM,EAAE,eAAAC,gBAAe,OAAO,IAAI;AAClC,oCAAAF,SAA0B,KAAK,sCAAsC;AAAA,MACjE,eAAAE;AAAA,MACA;AAAA,MACA,MAAM,cAAc;AAAA,MACpB,QAAQ,cAAc;AAAA,MACtB,QAAQ,cAAc;AAAA,IAC1B,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,gCAAgC;AAAA,MAC1D;AAAA,MACA,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,MAEjC,oBACG;AAAA,QAAC;AAAA;AAAA,UACG,eAAY;AAAA,UACZ,eAAW,kBAAAA;AAAA,YACP;AAAA,gBACA,0CAAoB,EAChB,kDACJ;AAAA,UACJ;AAAA,UAEC,wBAAc,IAAI,CAAC,SAChB;AAAA,YAAC;AAAA;AAAA,cACG,eAAW,kBAAAA;AAAA,gBACP;AAAA,oBACA,0CAAoB,EAChB,6DACJ;AAAA,cACJ;AAAA,cACA,SAAS,CAAC,MAAM;AACZ,kBAAE,eAAe;AACjB,8BAAc,IAAI;AAClB,8BAAc;AAAA,cAClB;AAAA,cAEA,eAAa,KAAK;AAAA,cAElB,sDAAC,UAAM,eAAK,OAAM;AAAA;AAAA,YAHb,KAAK;AAAA,UAId,CACH;AAAA;AAAA,MACL;AAAA;AAAA,EAER;AAER;AAEO,IAAM,wBAAwB,CAAC,UAAe;AACjD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EACpB,IAAI;AACJ,QAAM,kBAAc,sBAAuB,IAAI;AAC/C,mCAAAC,SAAsB,aAAa,aAAa;AAChD,QAAM,mBAAmB,OAAO,OAAO,aAAa,EAAE;AAAA,IAClD,CAAC,UAAU;AAAA,EACf;AAEA,QAAM,uBAAmB,kBAAAD;AAAA,IACrB;AAAA,QACA,0CAAoB,EAAE,wBAAwB;AAAA,QAC9C,0CAAoB,EAAE,mCAAmC;AAAA,QACzD,0CAAoB,EAAE,yBAAyB;AAAA,IAC/C;AAAA,MACI,mCAAmC;AAAA,MACnC,KAAC,0CAAoB,EAAE,iCAAiC,CAAC,GACrD;AAAA,IACR;AAAA,EACJ;AAEA,MAAI,CAAC,kBAAkB;AACnB,WACI;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA,SAAW,gBAAgB;AAAA,QACtC,OAAO,EAAE,SAAS,MAAM;AAAA,QACxB,gBAAc;AAAA,QACd,eAAa;AAAA,QAEb,sDAAC,8BAAY;AAAA;AAAA,IACjB;AAAA,EAER;AACA,SACI,6CAAC,SAAI,KAAK,aACN;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,0CAAoB,EAAE,gCAAgC;AAAA,QAC1D;AAAA,QACA,gBAAc;AAAA,QACd,eAAa;AAAA,QACb,SAAS;AAAA,QAET;AAAA,sDAAC,8BAAY;AAAA,UACb,4CAAC,0BAAU,MAAM,MAAM,QAAQ;AAAA;AAAA;AAAA,IACnC;AAAA,IACA,4CAAC,wBAAsB,GAAG,OAAO;AAAA,KACrC;AAER;","names":["visualBuilderPostMessage","dropdownItems","fieldDataName","classNames","useHandleOutsideClick"]}

package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.d.cts CHANGED Viewed

@@ -19,5 +19,6 @@ interface FieldRevertComponentProps {
 declare const BASE_VARIANT_STATUS: IVariantStatus;
 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.d.ts CHANGED Viewed

@@ -19,5 +19,6 @@ interface FieldRevertComponentProps {
 declare const BASE_VARIANT_STATUS: IVariantStatus;
 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 CHANGED Viewed

@@ -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,
@@ -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 CHANGED Viewed

	@@ -1 +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 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 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"]}
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\";\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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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":[]}