@tunghtml/strapi-plugin-composite-field 1.1.1 → 1.1.3

package/dist/_chunks/{CompositeInput-B2zE74Yh.js → CompositeInput-8DFCNiOg.js}

@@ -4,7 +4,6 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
-const admin = require("@strapi/strapi/admin");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -447,7 +446,6 @@ const CompositeInput = (props) => {
     label,
     intlLabel
   } = props;
-  const { modifiedData } = admin.useCMEditViewDataManager();
   const { formatMessage } = useIntl();
   const [localValue, setLocalValue] = React__namespace.default.useState(value || "");
   React__namespace.default.useEffect(() => {
@@ -471,8 +469,42 @@ const CompositeInput = (props) => {
   const handleGenerate = React__namespace.default.useCallback(() => {
     const parts = [];
     fields.forEach((fieldPath) => {
-      const fieldValue = modifiedData?.[fieldPath];
-      if (fieldValue !== null && fieldValue !== void 0 && fieldValue !== "") {
+      let fieldValue = null;
+      const input = document.querySelector(
+        `input[name="${fieldPath}"], textarea[name="${fieldPath}"]`
+      );
+      if (input && input.value) {
+        fieldValue = input.value;
+      }
+      if (!fieldValue) {
+        const select = document.querySelector(`select[name="${fieldPath}"]`);
+        if (select && select.value) {
+          fieldValue = select.value;
+        }
+      }
+      if (!fieldValue) {
+        const labels = document.querySelectorAll("label");
+        for (const labelEl of labels) {
+          const labelText = labelEl.textContent?.trim().toLowerCase();
+          const fieldName = fieldPath.toLowerCase();
+          if (labelText === fieldName || labelText.includes(fieldName)) {
+            const container = labelEl.closest('[role="group"]') || labelEl.parentElement;
+            if (container) {
+              const combobox = container.querySelector(
+                'button[role="combobox"]'
+              );
+              if (combobox) {
+                const selectedText = combobox.textContent?.trim();
+                if (selectedText && selectedText !== "Select..." && selectedText !== "") {
+                  fieldValue = selectedText;
+                  break;
+                }
+              }
+            }
+          }
+        }
+      }
+      if (fieldValue) {
         parts.push(fieldValue);
       }
     });
@@ -482,14 +514,34 @@ const CompositeInput = (props) => {
     if (onChange) {
       onChange({ target: { name, value: result, type: "text" } });
     }
-  }, [fields, separator, onChange, name, modifiedData]);
+  }, [fields, separator, onChange, name]);
   React__namespace.default.useEffect(() => {
-    if (!autoGenerate || fields.length === 0 || !modifiedData) return;
-    const timeoutId = setTimeout(() => {
-      handleGenerate();
-    }, 300);
-    return () => clearTimeout(timeoutId);
-  }, [autoGenerate, fields, modifiedData, handleGenerate]);
+    if (!autoGenerate || fields.length === 0) return;
+    const handleFieldChange = () => {
+      setTimeout(() => {
+        handleGenerate();
+      }, 300);
+    };
+    const listeners = [];
+    fields.forEach((fieldPath) => {
+      const elements = document.querySelectorAll(
+        `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"], button[role="combobox"]`
+      );
+      elements.forEach((element) => {
+        element.addEventListener("change", handleFieldChange);
+        element.addEventListener("input", handleFieldChange);
+        element.addEventListener("click", handleFieldChange);
+        listeners.push({ element, handler: handleFieldChange });
+      });
+    });
+    return () => {
+      listeners.forEach(({ element, handler }) => {
+        element.removeEventListener("change", handler);
+        element.removeEventListener("input", handler);
+        element.removeEventListener("click", handler);
+      });
+    };
+  }, [autoGenerate, fields, handleGenerate]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     designSystem.Field.Root,
     {

package/dist/_chunks/{CompositeInput-B-IQTi47.mjs → CompositeInput-CZQYMB_n.mjs}

@@ -3,7 +3,6 @@ import * as React from "react";
 import React__default from "react";
 import { Field, Flex, Button, Typography } from "@strapi/design-system";
 import { Play } from "@strapi/icons";
-import { useCMEditViewDataManager } from "@strapi/strapi/admin";
 var __assign = function() {
   __assign = Object.assign || function __assign2(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -428,7 +427,6 @@ const CompositeInput = (props) => {
     label,
     intlLabel
   } = props;
-  const { modifiedData } = useCMEditViewDataManager();
   const { formatMessage } = useIntl();
   const [localValue, setLocalValue] = React__default.useState(value || "");
   React__default.useEffect(() => {
@@ -452,8 +450,42 @@ const CompositeInput = (props) => {
   const handleGenerate = React__default.useCallback(() => {
     const parts = [];
     fields.forEach((fieldPath) => {
-      const fieldValue = modifiedData?.[fieldPath];
-      if (fieldValue !== null && fieldValue !== void 0 && fieldValue !== "") {
+      let fieldValue = null;
+      const input = document.querySelector(
+        `input[name="${fieldPath}"], textarea[name="${fieldPath}"]`
+      );
+      if (input && input.value) {
+        fieldValue = input.value;
+      }
+      if (!fieldValue) {
+        const select = document.querySelector(`select[name="${fieldPath}"]`);
+        if (select && select.value) {
+          fieldValue = select.value;
+        }
+      }
+      if (!fieldValue) {
+        const labels = document.querySelectorAll("label");
+        for (const labelEl of labels) {
+          const labelText = labelEl.textContent?.trim().toLowerCase();
+          const fieldName = fieldPath.toLowerCase();
+          if (labelText === fieldName || labelText.includes(fieldName)) {
+            const container = labelEl.closest('[role="group"]') || labelEl.parentElement;
+            if (container) {
+              const combobox = container.querySelector(
+                'button[role="combobox"]'
+              );
+              if (combobox) {
+                const selectedText = combobox.textContent?.trim();
+                if (selectedText && selectedText !== "Select..." && selectedText !== "") {
+                  fieldValue = selectedText;
+                  break;
+                }
+              }
+            }
+          }
+        }
+      }
+      if (fieldValue) {
         parts.push(fieldValue);
       }
     });
@@ -463,14 +495,34 @@ const CompositeInput = (props) => {
     if (onChange) {
       onChange({ target: { name, value: result, type: "text" } });
     }
-  }, [fields, separator, onChange, name, modifiedData]);
+  }, [fields, separator, onChange, name]);
   React__default.useEffect(() => {
-    if (!autoGenerate || fields.length === 0 || !modifiedData) return;
-    const timeoutId = setTimeout(() => {
-      handleGenerate();
-    }, 300);
-    return () => clearTimeout(timeoutId);
-  }, [autoGenerate, fields, modifiedData, handleGenerate]);
+    if (!autoGenerate || fields.length === 0) return;
+    const handleFieldChange = () => {
+      setTimeout(() => {
+        handleGenerate();
+      }, 300);
+    };
+    const listeners = [];
+    fields.forEach((fieldPath) => {
+      const elements = document.querySelectorAll(
+        `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"], button[role="combobox"]`
+      );
+      elements.forEach((element) => {
+        element.addEventListener("change", handleFieldChange);
+        element.addEventListener("input", handleFieldChange);
+        element.addEventListener("click", handleFieldChange);
+        listeners.push({ element, handler: handleFieldChange });
+      });
+    });
+    return () => {
+      listeners.forEach(({ element, handler }) => {
+        element.removeEventListener("change", handler);
+        element.removeEventListener("input", handler);
+        element.removeEventListener("click", handler);
+      });
+    };
+  }, [autoGenerate, fields, handleGenerate]);
   return /* @__PURE__ */ jsx(
     Field.Root,
     {

package/dist/admin/index.js

@@ -37,7 +37,7 @@ const index = {
         defaultMessage: "Combine multiple fields into one display value"
       },
       components: {
-        Input: async () => Promise.resolve().then(() => require("../_chunks/CompositeInput-B2zE74Yh.js"))
+        Input: async () => Promise.resolve().then(() => require("../_chunks/CompositeInput-8DFCNiOg.js"))
       },
       options: {
         base: [

package/dist/admin/index.mjs

@@ -34,7 +34,7 @@ const index = {
         defaultMessage: "Combine multiple fields into one display value"
       },
       components: {
-        Input: async () => import("../_chunks/CompositeInput-B-IQTi47.mjs")
+        Input: async () => import("../_chunks/CompositeInput-CZQYMB_n.mjs")
       },
       options: {
         base: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tunghtml/strapi-plugin-composite-field",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A Strapi v5 plugin to create composite display fields by combining multiple text, string, and enum fields with auto-generate support",
   "keywords": [
     "strapi",