@tunghtml/strapi-plugin-composite-field 1.1.7 → 1.1.10

package/dist/_chunks/{CompositeInput-ef71gPFZ.mjs → CompositeInput-yW3aLiyf.mjs}

@@ -1,8 +1,466 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-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 { unstable_useContentManagerContext } from "@strapi/strapi/admin";
+import * as React from "react";
+import React__default from "react";
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+var isArray$3 = Array.isArray;
+var isArray_1 = isArray$3;
+var freeGlobal$1 = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+var _freeGlobal = freeGlobal$1;
+var freeGlobal = _freeGlobal;
+var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+var root$3 = freeGlobal || freeSelf || Function("return this")();
+var _root = root$3;
+var root$2 = _root;
+var Symbol$4 = root$2.Symbol;
+var _Symbol = Symbol$4;
+var Symbol$3 = _Symbol;
+var objectProto$4 = Object.prototype;
+var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
+var nativeObjectToString$1 = objectProto$4.toString;
+var symToStringTag$1 = Symbol$3 ? Symbol$3.toStringTag : void 0;
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty$3.call(value, symToStringTag$1), tag = value[symToStringTag$1];
+  try {
+    value[symToStringTag$1] = void 0;
+    var unmasked = true;
+  } catch (e) {
+  }
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+var _getRawTag = getRawTag$1;
+var objectProto$3 = Object.prototype;
+var nativeObjectToString = objectProto$3.toString;
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
+}
+var _objectToString = objectToString$1;
+var Symbol$2 = _Symbol, getRawTag = _getRawTag, objectToString = _objectToString;
+var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
+var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : void 0;
+function baseGetTag$2(value) {
+  if (value == null) {
+    return value === void 0 ? undefinedTag : nullTag;
+  }
+  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+}
+var _baseGetTag = baseGetTag$2;
+function isObjectLike$1(value) {
+  return value != null && typeof value == "object";
+}
+var isObjectLike_1 = isObjectLike$1;
+var baseGetTag$1 = _baseGetTag, isObjectLike = isObjectLike_1;
+var symbolTag = "[object Symbol]";
+function isSymbol$3(value) {
+  return typeof value == "symbol" || isObjectLike(value) && baseGetTag$1(value) == symbolTag;
+}
+var isSymbol_1 = isSymbol$3;
+var isArray$2 = isArray_1, isSymbol$2 = isSymbol_1;
+var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/, reIsPlainProp = /^\w*$/;
+function isKey$1(value, object) {
+  if (isArray$2(value)) {
+    return false;
+  }
+  var type = typeof value;
+  if (type == "number" || type == "symbol" || type == "boolean" || value == null || isSymbol$2(value)) {
+    return true;
+  }
+  return reIsPlainProp.test(value) || !reIsDeepProp.test(value) || object != null && value in Object(object);
+}
+var _isKey = isKey$1;
+function isObject$2(value) {
+  var type = typeof value;
+  return value != null && (type == "object" || type == "function");
+}
+var isObject_1 = isObject$2;
+var baseGetTag = _baseGetTag, isObject$1 = isObject_1;
+var asyncTag = "[object AsyncFunction]", funcTag = "[object Function]", genTag = "[object GeneratorFunction]", proxyTag = "[object Proxy]";
+function isFunction$1(value) {
+  if (!isObject$1(value)) {
+    return false;
+  }
+  var tag = baseGetTag(value);
+  return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+}
+var isFunction_1 = isFunction$1;
+var root$1 = _root;
+var coreJsData$1 = root$1["__core-js_shared__"];
+var _coreJsData = coreJsData$1;
+var coreJsData = _coreJsData;
+var maskSrcKey = function() {
+  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || "");
+  return uid ? "Symbol(src)_1." + uid : "";
+}();
+function isMasked$1(func) {
+  return !!maskSrcKey && maskSrcKey in func;
+}
+var _isMasked = isMasked$1;
+var funcProto$1 = Function.prototype;
+var funcToString$1 = funcProto$1.toString;
+function toSource$1(func) {
+  if (func != null) {
+    try {
+      return funcToString$1.call(func);
+    } catch (e) {
+    }
+    try {
+      return func + "";
+    } catch (e) {
+    }
+  }
+  return "";
+}
+var _toSource = toSource$1;
+var isFunction = isFunction_1, isMasked = _isMasked, isObject = isObject_1, toSource = _toSource;
+var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+var reIsHostCtor = /^\[object .+?Constructor\]$/;
+var funcProto = Function.prototype, objectProto$2 = Object.prototype;
+var funcToString = funcProto.toString;
+var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
+var reIsNative = RegExp(
+  "^" + funcToString.call(hasOwnProperty$2).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
+);
+function baseIsNative$1(value) {
+  if (!isObject(value) || isMasked(value)) {
+    return false;
+  }
+  var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
+  return pattern.test(toSource(value));
+}
+var _baseIsNative = baseIsNative$1;
+function getValue$1(object, key) {
+  return object == null ? void 0 : object[key];
+}
+var _getValue = getValue$1;
+var baseIsNative = _baseIsNative, getValue = _getValue;
+function getNative$2(object, key) {
+  var value = getValue(object, key);
+  return baseIsNative(value) ? value : void 0;
+}
+var _getNative = getNative$2;
+var getNative$1 = _getNative;
+var nativeCreate$4 = getNative$1(Object, "create");
+var _nativeCreate = nativeCreate$4;
+var nativeCreate$3 = _nativeCreate;
+function hashClear$1() {
+  this.__data__ = nativeCreate$3 ? nativeCreate$3(null) : {};
+  this.size = 0;
+}
+var _hashClear = hashClear$1;
+function hashDelete$1(key) {
+  var result = this.has(key) && delete this.__data__[key];
+  this.size -= result ? 1 : 0;
+  return result;
+}
+var _hashDelete = hashDelete$1;
+var nativeCreate$2 = _nativeCreate;
+var HASH_UNDEFINED$1 = "__lodash_hash_undefined__";
+var objectProto$1 = Object.prototype;
+var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
+function hashGet$1(key) {
+  var data = this.__data__;
+  if (nativeCreate$2) {
+    var result = data[key];
+    return result === HASH_UNDEFINED$1 ? void 0 : result;
+  }
+  return hasOwnProperty$1.call(data, key) ? data[key] : void 0;
+}
+var _hashGet = hashGet$1;
+var nativeCreate$1 = _nativeCreate;
+var objectProto = Object.prototype;
+var hasOwnProperty = objectProto.hasOwnProperty;
+function hashHas$1(key) {
+  var data = this.__data__;
+  return nativeCreate$1 ? data[key] !== void 0 : hasOwnProperty.call(data, key);
+}
+var _hashHas = hashHas$1;
+var nativeCreate = _nativeCreate;
+var HASH_UNDEFINED = "__lodash_hash_undefined__";
+function hashSet$1(key, value) {
+  var data = this.__data__;
+  this.size += this.has(key) ? 0 : 1;
+  data[key] = nativeCreate && value === void 0 ? HASH_UNDEFINED : value;
+  return this;
+}
+var _hashSet = hashSet$1;
+var hashClear = _hashClear, hashDelete = _hashDelete, hashGet = _hashGet, hashHas = _hashHas, hashSet = _hashSet;
+function Hash$1(entries) {
+  var index = -1, length = entries == null ? 0 : entries.length;
+  this.clear();
+  while (++index < length) {
+    var entry = entries[index];
+    this.set(entry[0], entry[1]);
+  }
+}
+Hash$1.prototype.clear = hashClear;
+Hash$1.prototype["delete"] = hashDelete;
+Hash$1.prototype.get = hashGet;
+Hash$1.prototype.has = hashHas;
+Hash$1.prototype.set = hashSet;
+var _Hash = Hash$1;
+function listCacheClear$1() {
+  this.__data__ = [];
+  this.size = 0;
+}
+var _listCacheClear = listCacheClear$1;
+function eq$1(value, other) {
+  return value === other || value !== value && other !== other;
+}
+var eq_1 = eq$1;
+var eq = eq_1;
+function assocIndexOf$4(array, key) {
+  var length = array.length;
+  while (length--) {
+    if (eq(array[length][0], key)) {
+      return length;
+    }
+  }
+  return -1;
+}
+var _assocIndexOf = assocIndexOf$4;
+var assocIndexOf$3 = _assocIndexOf;
+var arrayProto = Array.prototype;
+var splice = arrayProto.splice;
+function listCacheDelete$1(key) {
+  var data = this.__data__, index = assocIndexOf$3(data, key);
+  if (index < 0) {
+    return false;
+  }
+  var lastIndex = data.length - 1;
+  if (index == lastIndex) {
+    data.pop();
+  } else {
+    splice.call(data, index, 1);
+  }
+  --this.size;
+  return true;
+}
+var _listCacheDelete = listCacheDelete$1;
+var assocIndexOf$2 = _assocIndexOf;
+function listCacheGet$1(key) {
+  var data = this.__data__, index = assocIndexOf$2(data, key);
+  return index < 0 ? void 0 : data[index][1];
+}
+var _listCacheGet = listCacheGet$1;
+var assocIndexOf$1 = _assocIndexOf;
+function listCacheHas$1(key) {
+  return assocIndexOf$1(this.__data__, key) > -1;
+}
+var _listCacheHas = listCacheHas$1;
+var assocIndexOf = _assocIndexOf;
+function listCacheSet$1(key, value) {
+  var data = this.__data__, index = assocIndexOf(data, key);
+  if (index < 0) {
+    ++this.size;
+    data.push([key, value]);
+  } else {
+    data[index][1] = value;
+  }
+  return this;
+}
+var _listCacheSet = listCacheSet$1;
+var listCacheClear = _listCacheClear, listCacheDelete = _listCacheDelete, listCacheGet = _listCacheGet, listCacheHas = _listCacheHas, listCacheSet = _listCacheSet;
+function ListCache$1(entries) {
+  var index = -1, length = entries == null ? 0 : entries.length;
+  this.clear();
+  while (++index < length) {
+    var entry = entries[index];
+    this.set(entry[0], entry[1]);
+  }
+}
+ListCache$1.prototype.clear = listCacheClear;
+ListCache$1.prototype["delete"] = listCacheDelete;
+ListCache$1.prototype.get = listCacheGet;
+ListCache$1.prototype.has = listCacheHas;
+ListCache$1.prototype.set = listCacheSet;
+var _ListCache = ListCache$1;
+var getNative = _getNative, root = _root;
+var Map$1 = getNative(root, "Map");
+var _Map = Map$1;
+var Hash = _Hash, ListCache = _ListCache, Map = _Map;
+function mapCacheClear$1() {
+  this.size = 0;
+  this.__data__ = {
+    "hash": new Hash(),
+    "map": new (Map || ListCache)(),
+    "string": new Hash()
+  };
+}
+var _mapCacheClear = mapCacheClear$1;
+function isKeyable$1(value) {
+  var type = typeof value;
+  return type == "string" || type == "number" || type == "symbol" || type == "boolean" ? value !== "__proto__" : value === null;
+}
+var _isKeyable = isKeyable$1;
+var isKeyable = _isKeyable;
+function getMapData$4(map, key) {
+  var data = map.__data__;
+  return isKeyable(key) ? data[typeof key == "string" ? "string" : "hash"] : data.map;
+}
+var _getMapData = getMapData$4;
+var getMapData$3 = _getMapData;
+function mapCacheDelete$1(key) {
+  var result = getMapData$3(this, key)["delete"](key);
+  this.size -= result ? 1 : 0;
+  return result;
+}
+var _mapCacheDelete = mapCacheDelete$1;
+var getMapData$2 = _getMapData;
+function mapCacheGet$1(key) {
+  return getMapData$2(this, key).get(key);
+}
+var _mapCacheGet = mapCacheGet$1;
+var getMapData$1 = _getMapData;
+function mapCacheHas$1(key) {
+  return getMapData$1(this, key).has(key);
+}
+var _mapCacheHas = mapCacheHas$1;
+var getMapData = _getMapData;
+function mapCacheSet$1(key, value) {
+  var data = getMapData(this, key), size = data.size;
+  data.set(key, value);
+  this.size += data.size == size ? 0 : 1;
+  return this;
+}
+var _mapCacheSet = mapCacheSet$1;
+var mapCacheClear = _mapCacheClear, mapCacheDelete = _mapCacheDelete, mapCacheGet = _mapCacheGet, mapCacheHas = _mapCacheHas, mapCacheSet = _mapCacheSet;
+function MapCache$1(entries) {
+  var index = -1, length = entries == null ? 0 : entries.length;
+  this.clear();
+  while (++index < length) {
+    var entry = entries[index];
+    this.set(entry[0], entry[1]);
+  }
+}
+MapCache$1.prototype.clear = mapCacheClear;
+MapCache$1.prototype["delete"] = mapCacheDelete;
+MapCache$1.prototype.get = mapCacheGet;
+MapCache$1.prototype.has = mapCacheHas;
+MapCache$1.prototype.set = mapCacheSet;
+var _MapCache = MapCache$1;
+var MapCache = _MapCache;
+var FUNC_ERROR_TEXT = "Expected a function";
+function memoize$1(func, resolver) {
+  if (typeof func != "function" || resolver != null && typeof resolver != "function") {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  var memoized = function() {
+    var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache = memoized.cache;
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    var result = func.apply(this, args);
+    memoized.cache = cache.set(key, result) || cache;
+    return result;
+  };
+  memoized.cache = new (memoize$1.Cache || MapCache)();
+  return memoized;
+}
+memoize$1.Cache = MapCache;
+var memoize_1 = memoize$1;
+var memoize = memoize_1;
+var MAX_MEMOIZE_SIZE = 500;
+function memoizeCapped$1(func) {
+  var result = memoize(func, function(key) {
+    if (cache.size === MAX_MEMOIZE_SIZE) {
+      cache.clear();
+    }
+    return key;
+  });
+  var cache = result.cache;
+  return result;
+}
+var _memoizeCapped = memoizeCapped$1;
+var memoizeCapped = _memoizeCapped;
+var rePropName = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g;
+var reEscapeChar = /\\(\\)?/g;
+var stringToPath$1 = memoizeCapped(function(string) {
+  var result = [];
+  if (string.charCodeAt(0) === 46) {
+    result.push("");
+  }
+  string.replace(rePropName, function(match, number, quote, subString) {
+    result.push(quote ? subString.replace(reEscapeChar, "$1") : number || match);
+  });
+  return result;
+});
+var _stringToPath = stringToPath$1;
+function arrayMap$1(array, iteratee) {
+  var index = -1, length = array == null ? 0 : array.length, result = Array(length);
+  while (++index < length) {
+    result[index] = iteratee(array[index], index, array);
+  }
+  return result;
+}
+var _arrayMap = arrayMap$1;
+var Symbol$1 = _Symbol, arrayMap = _arrayMap, isArray$1 = isArray_1, isSymbol$1 = isSymbol_1;
+var symbolProto = Symbol$1 ? Symbol$1.prototype : void 0, symbolToString = symbolProto ? symbolProto.toString : void 0;
+function baseToString$1(value) {
+  if (typeof value == "string") {
+    return value;
+  }
+  if (isArray$1(value)) {
+    return arrayMap(value, baseToString$1) + "";
+  }
+  if (isSymbol$1(value)) {
+    return symbolToString ? symbolToString.call(value) : "";
+  }
+  var result = value + "";
+  return result == "0" && 1 / value == -Infinity ? "-0" : result;
+}
+var _baseToString = baseToString$1;
+var baseToString = _baseToString;
+function toString$1(value) {
+  return value == null ? "" : baseToString(value);
+}
+var toString_1 = toString$1;
+var isArray = isArray_1, isKey = _isKey, stringToPath = _stringToPath, toString = toString_1;
+function castPath$1(value, object) {
+  if (isArray(value)) {
+    return value;
+  }
+  return isKey(value, object) ? [value] : stringToPath(toString(value));
+}
+var _castPath = castPath$1;
+var isSymbol = isSymbol_1;
+function toKey$1(value) {
+  if (typeof value == "string" || isSymbol(value)) {
+    return value;
+  }
+  var result = value + "";
+  return result == "0" && 1 / value == -Infinity ? "-0" : result;
+}
+var _toKey = toKey$1;
+var castPath = _castPath, toKey = _toKey;
+function baseGet$1(object, path) {
+  path = castPath(path, object);
+  var index = 0, length = path.length;
+  while (object != null && index < length) {
+    object = object[toKey(path[index++])];
+  }
+  return index && index == length ? object : void 0;
+}
+var _baseGet = baseGet$1;
+var baseGet = _baseGet;
+function get(object, path, defaultValue) {
+  var result = object == null ? void 0 : baseGet(object, path);
+  return result === void 0 ? defaultValue : result;
+}
+var get_1 = get;
+const get$1 = /* @__PURE__ */ getDefaultExportFromCjs(get_1);
 var __assign = function() {
   __assign = Object.assign || function __assign2(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -411,9 +869,6 @@ createFormattedComponent("formatDisplayName");
 createFormattedDateTimePartsComponent("formatDate");
 createFormattedDateTimePartsComponent("formatTime");
 const CompositeInput = (props) => {
-  if (!props) {
-    return null;
-  }
   const {
     attribute,
     name,
@@ -428,128 +883,107 @@ const CompositeInput = (props) => {
     intlLabel
   } = props;
   const { formatMessage } = useIntl();
+  const { form } = unstable_useContentManagerContext();
+  const { values } = form;
   const [localValue, setLocalValue] = React__default.useState(value || "");
+  const lastGeneratedVal = React__default.useRef(value || "");
   React__default.useEffect(() => {
-    setLocalValue(value || "");
+    const validValue = value || "";
+    setLocalValue(validValue);
+    lastGeneratedVal.current = validValue;
   }, [value]);
   const fieldsConfig = attribute?.options?.fields || "";
   const separator = attribute?.options?.separator || " - ";
   const editable = attribute?.options?.editable !== false;
   const autoGenerate = attribute?.options?.autoGenerate === true;
-  let fields = [];
-  if (typeof fieldsConfig === "string") {
-    fields = fieldsConfig.split("\n").map((f) => f.trim()).filter(Boolean);
-  }
+  const fields = React__default.useMemo(() => {
+    if (typeof fieldsConfig === "string") {
+      return fieldsConfig.split("\n").map((f) => f.trim()).filter(Boolean);
+    }
+    return [];
+  }, [fieldsConfig]);
   const handleChange = (e) => {
     const newValue = e.target.value;
     setLocalValue(newValue);
+    lastGeneratedVal.current = newValue;
     if (onChange) {
       onChange({ target: { name, value: newValue, type: "text" } });
     }
   };
-  const formatTimeValue = (value2) => {
-    if (!value2) return value2;
+  const formatFieldValue = React__default.useCallback((val) => {
+    if (val === null || val === void 0) return "";
+    if (val instanceof Date) {
+      return val.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false
+      });
+    }
+    const stringVal = String(val);
+    const isoDateRegex = /^(\d{4})-(\d{2})-(\d{2})(T[\d:.]+Z?)?$/;
+    const dateMatch = stringVal.match(isoDateRegex);
+    if (dateMatch) {
+      const [, year, month, day] = dateMatch;
+      return `${month}/${day}/${year}`;
+    }
     const timeRegex = /^(\d{2}):(\d{2}):(\d{2})(\.\d{3})?$/;
-    const match = value2.match(timeRegex);
-    if (match) {
-      return `${match[1]}:${match[2]}`;
+    const timeMatch = stringVal.match(timeRegex);
+    if (timeMatch) {
+      return `${timeMatch[1]}:${timeMatch[2]}`;
     }
-    return value2;
-  };
+    return stringVal;
+  }, []);
   const handleGenerate = React__default.useCallback(() => {
-    const parts = [];
-    fields.forEach((fieldPath) => {
-      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;
+    const parts = name.split(".");
+    parts.pop();
+    const parentPath = parts.join(".");
+    const generatedParts = [];
+    fields.forEach((fieldName) => {
+      const fullPath = parentPath ? `${parentPath}.${fieldName}` : fieldName;
+      let rawValue = get$1(values, fullPath);
+      if (rawValue !== null && rawValue !== void 0) {
+        let stringValue = "";
+        if (typeof rawValue === "object" && !(rawValue instanceof Date)) {
+          if (rawValue.name) stringValue = String(rawValue.name);
+          else if (rawValue.title) stringValue = String(rawValue.title);
+          else if (rawValue.label) stringValue = String(rawValue.label);
+        } else {
+          stringValue = formatFieldValue(rawValue);
         }
-      }
-      if (!fieldValue) {
-        const combobox = document.querySelector(
-          `div[role="combobox"][name="${fieldPath}"]`
-        );
-        if (combobox) {
-          const selectedText = combobox.textContent?.trim();
-          if (selectedText && selectedText !== "Select..." && selectedText !== "") {
-            fieldValue = selectedText;
-          }
+        if (stringValue) {
+          generatedParts.push(stringValue);
         }
       }
-      if (!fieldValue) {
-        const fieldById = document.getElementById(fieldPath);
-        if (fieldById) {
-          if (fieldById.tagName === "SELECT") {
-            fieldValue = fieldById.value;
-          } else if (fieldById.value) {
-            fieldValue = fieldById.value;
-          }
-        }
-      }
-      if (fieldValue) {
-        fieldValue = formatTimeValue(fieldValue);
-        parts.push(fieldValue);
-      }
     });
     const cleanSeparator = separator.trim();
-    const result = parts.join(` ${cleanSeparator} `).trim();
-    setLocalValue(result);
-    if (onChange) {
-      onChange({ target: { name, value: result, type: "text" } });
+    const result = generatedParts.join(` ${cleanSeparator} `).trim();
+    if (result !== lastGeneratedVal.current) {
+      setLocalValue(result);
+      lastGeneratedVal.current = result;
+      if (onChange) {
+        onChange({ target: { name, value: result, type: "text" } });
+      }
     }
-  }, [fields, separator, onChange, name]);
+  }, [fields, separator, onChange, name, values, formatFieldValue]);
+  const watchedValues = React__default.useMemo(() => {
+    const parts = name.split(".");
+    parts.pop();
+    const parentPath = parts.join(".");
+    return fields.map((fieldName) => {
+      const fullPath = parentPath ? `${parentPath}.${fieldName}` : fieldName;
+      return get$1(values, fullPath);
+    });
+  }, [fields, name, values]);
   React__default.useEffect(() => {
     if (!autoGenerate || fields.length === 0) return;
-    let debounceTimer;
-    const handleFieldChange = () => {
-      clearTimeout(debounceTimer);
-      debounceTimer = setTimeout(() => {
-        handleGenerate();
-      }, 300);
-    };
-    const listeners = [];
-    const observers = [];
-    fields.forEach((fieldPath) => {
-      const elements = document.querySelectorAll(
-        `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"]`
-      );
-      elements.forEach((element) => {
-        element.addEventListener("change", handleFieldChange);
-        element.addEventListener("input", handleFieldChange);
-        listeners.push({ element, handler: handleFieldChange });
-      });
-      const combobox = document.querySelector(
-        `div[role="combobox"][name="${fieldPath}"]`
-      );
-      if (combobox) {
-        const observer = new MutationObserver(handleFieldChange);
-        observer.observe(combobox, {
-          childList: true,
-          subtree: true,
-          characterData: true
-        });
-        observers.push(observer);
-        combobox.addEventListener("click", handleFieldChange);
-        listeners.push({ element: combobox, handler: handleFieldChange });
-      }
-    });
-    return () => {
-      clearTimeout(debounceTimer);
-      listeners.forEach(({ element, handler }) => {
-        element.removeEventListener("change", handler);
-        element.removeEventListener("input", handler);
-        element.removeEventListener("click", handler);
-      });
-      observers.forEach((observer) => observer.disconnect());
-    };
-  }, [autoGenerate, fields, handleGenerate]);
+    const timeoutId = setTimeout(() => {
+      handleGenerate();
+    }, 300);
+    return () => clearTimeout(timeoutId);
+  }, [autoGenerate, fields, handleGenerate, watchedValues, name]);
+  if (!props) {
+    return null;
+  }
   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-Bjv6XSUB.js"))
+        Input: async () => Promise.resolve().then(() => require("../_chunks/CompositeInput-DjJxL_5Z.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-ef71gPFZ.mjs")
+        Input: async () => import("../_chunks/CompositeInput-yW3aLiyf.mjs")
       },
       options: {
         base: [