@fctc/sme-widget-ui 1.6.9 → 1.7.1

package/dist/index.js

@@ -18573,6 +18573,7 @@ var ButtonField = (props) => {
 // src/widgets/basic/char-field/char.tsx
 var import_react38 = require("react");
 var import_jsx_runtime73 = require("react/jsx-runtime");
+var WIDGET_AUTO_COMPUTE_DEPEND = "auto_compute_depend_field";
 var CharField = (props) => {
   const {
     name: name2,
@@ -18594,7 +18595,8 @@ var CharField = (props) => {
     isEditTable,
     isForm,
     value,
-    defaultValue
+    defaultValue,
+    options: options2
   } = props;
   if (!isForm && !isEditTable) {
     const propValue = value || defaultValue;
@@ -18633,13 +18635,32 @@ var CharField = (props) => {
             clearErrors(name2);
           }
         }, [value2, clearErrors, name2]);
+        (0, import_react38.useEffect)(() => {
+          if (widget !== WIDGET_AUTO_COMPUTE_DEPEND) return;
+          const depValue = formValues?.[options2?.depend_field]?.[options2?.field_name];
+          const currentValue = methods?.getValues(name2);
+          if (currentValue !== depValue) {
+            methods?.setValue(name2, depValue, { shouldValidate: true });
+          }
+        }, [widget, formValues]);
         const realValue = typeof value2 === "string" || typeof value2 === "number" ? String(value2) : "";
-        const displayValue = (widget === "access_token" || widget === "refresh_token") && typeof realValue === "string" && !isDirty ? "*".repeat(realValue?.length) : widget === "private_secret_key" && formValues?.id && typeof formValues?.id === "number" && !isDirty && typeof realValue === "string" ? `${realValue?.slice(0, 4)}${realValue?.length > 4 ? "*".repeat(realValue?.length - 4) : ""}` : typeof realValue === "string" || typeof realValue === "number" ? String(realValue) : "";
+        const displayValue = (0, import_react38.useMemo)(() => {
+          if ((widget === "access_token" || widget === "refresh_token") && typeof realValue === "string" && !isDirty) {
+            return "*".repeat(realValue.length);
+          }
+          if (widget === "private_secret_key" && formValues?.id && typeof formValues?.id === "number" && !isDirty && typeof realValue === "string") {
+            return `${realValue.slice(0, 4)}${realValue.length > 4 ? "*".repeat(realValue.length - 4) : ""}`;
+          }
+          if (typeof realValue === "string" || typeof realValue === "number") {
+            return String(realValue);
+          }
+          return "";
+        }, [widget, formValues]);
         return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
             "input",
             {
-              value: displayValue,
+              value: displayValue ?? "",
               onChange: (e3) => {
                 const inputValue = e3.target.value;
                 if (readonly) return;
@@ -33835,12 +33856,12 @@ var Many2ManyTagField = (props) => {
               placeholder: readonly ? "" : instance.t("choose_place"),
               classNames: isEditTable ? {
                 valueContainer: () => "overflow-unset !px-0",
-                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-[300px] max-w-[300px] !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
+                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-max max-w-max !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? `!cursor-not-allowed ${filteredValue?.length === 0 && "no-values"}` : ""}`,
                 dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
                 clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
               } : {
                 valueContainer: () => "overflow-unset !m-0 !p-0",
-                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"}`,
+                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"} ${filteredValue?.length === 0 && "no-values"}`,
                 singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
                 input: () => "!m-0 !p-0",
                 dropdownIndicator: () => "!m-0 !p-0"
@@ -33875,8 +33896,8 @@ var Many2ManyTagField = (props) => {
                 menu: (base) => ({
                   ...base,
                   zIndex: 9999,
-                  width: "300px",
-                  minWidth: "300px",
+                  width: "auto",
+                  minWidth: "max-content",
                   borderRadius: "10px"
                 }),
                 menuList: (base) => ({
@@ -33905,7 +33926,8 @@ var Many2ManyTagField = (props) => {
                   }
                 ),
                 IndicatorSeparator: () => null,
-                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(components.DropdownIndicator, { ...props2 })
+                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(components.DropdownIndicator, { ...props2 }),
+                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(components.ClearIndicator, { ...props2 })
               },
               required: !invisible && required
             }
@@ -34294,7 +34316,7 @@ var SelectDropdownField = (props) => {
               {
                 ...commonProps,
                 classNames: {
-                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-max max-w-max rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
                   valueContainer: () => "!m-0 !p-0 ",
                   singleValue: () => `!m-0`,
                   input: () => "!m-0 !p-0",
@@ -34995,7 +35017,7 @@ var Many2OneField = (props) => {
     setDomainObject
   } = props;
   if (!isForm && !isEditTable) {
-    const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue.id : propValue;
+    const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue?.id : propValue;
     return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
@@ -35009,7 +35031,7 @@ var Many2OneField = (props) => {
           className: "cursor-pointer",
           "data-tooltip-id": String(name2) + index4,
           id: name2,
-          children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue.display_name : propValue
+          children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue?.display_name : propValue
         }
       )
     ] });
@@ -35039,7 +35061,11 @@ var Many2OneField = (props) => {
               } : false
             },
             render: ({ field, fieldState: { error: error2 } }) => {
-              const currentValue = field?.value ? { value: field?.value?.id, label: field?.value?.display_name } : null;
+              const currentValue = field?.value ? {
+                value: field?.value?.id,
+                label: field?.value?.display_name,
+                ...field?.value ?? {}
+              } : null;
               const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
                 (option) => option.value === tempSelectedOption?.value
               ) : currentValue ? currentValue : null;
@@ -35055,7 +35081,7 @@ var Many2OneField = (props) => {
                     menuShouldScrollIntoView: false,
                     options: listOptions,
                     classNames: {
-                      control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                      control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-max max-w-max rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
                       valueContainer: () => "!m-0 !p-0 ",
                       singleValue: () => `!m-0`,
                       input: () => "!m-0 !p-0",

package/dist/index.mjs

@@ -18450,8 +18450,9 @@ var ButtonField = (props) => {
 };
 
 // src/widgets/basic/char-field/char.tsx
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo4 } from "react";
 import { Fragment as Fragment17, jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
+var WIDGET_AUTO_COMPUTE_DEPEND = "auto_compute_depend_field";
 var CharField = (props) => {
   const {
     name: name2,
@@ -18473,7 +18474,8 @@ var CharField = (props) => {
     isEditTable,
     isForm,
     value,
-    defaultValue
+    defaultValue,
+    options: options2
   } = props;
   if (!isForm && !isEditTable) {
     const propValue = value || defaultValue;
@@ -18512,13 +18514,32 @@ var CharField = (props) => {
             clearErrors(name2);
           }
         }, [value2, clearErrors, name2]);
+        useEffect10(() => {
+          if (widget !== WIDGET_AUTO_COMPUTE_DEPEND) return;
+          const depValue = formValues?.[options2?.depend_field]?.[options2?.field_name];
+          const currentValue = methods?.getValues(name2);
+          if (currentValue !== depValue) {
+            methods?.setValue(name2, depValue, { shouldValidate: true });
+          }
+        }, [widget, formValues]);
         const realValue = typeof value2 === "string" || typeof value2 === "number" ? String(value2) : "";
-        const displayValue = (widget === "access_token" || widget === "refresh_token") && typeof realValue === "string" && !isDirty ? "*".repeat(realValue?.length) : widget === "private_secret_key" && formValues?.id && typeof formValues?.id === "number" && !isDirty && typeof realValue === "string" ? `${realValue?.slice(0, 4)}${realValue?.length > 4 ? "*".repeat(realValue?.length - 4) : ""}` : typeof realValue === "string" || typeof realValue === "number" ? String(realValue) : "";
+        const displayValue = useMemo4(() => {
+          if ((widget === "access_token" || widget === "refresh_token") && typeof realValue === "string" && !isDirty) {
+            return "*".repeat(realValue.length);
+          }
+          if (widget === "private_secret_key" && formValues?.id && typeof formValues?.id === "number" && !isDirty && typeof realValue === "string") {
+            return `${realValue.slice(0, 4)}${realValue.length > 4 ? "*".repeat(realValue.length - 4) : ""}`;
+          }
+          if (typeof realValue === "string" || typeof realValue === "number") {
+            return String(realValue);
+          }
+          return "";
+        }, [widget, formValues]);
         return /* @__PURE__ */ jsxs48(Fragment17, { children: [
           /* @__PURE__ */ jsx73(
             "input",
             {
-              value: displayValue,
+              value: displayValue ?? "",
               onChange: (e3) => {
                 const inputValue = e3.target.value;
                 if (readonly) return;
@@ -27764,7 +27785,7 @@ function _extends() {
 
 // node_modules/react-select/dist/react-select.esm.js
 import * as React14 from "react";
-import { forwardRef as forwardRef5, useMemo as useMemo8 } from "react";
+import { forwardRef as forwardRef5, useMemo as useMemo9 } from "react";
 
 // node_modules/@babel/runtime/helpers/esm/classCallCheck.js
 function _classCallCheck(a2, n4) {
@@ -27872,7 +27893,7 @@ function _toConsumableArray(r4) {
 
 // node_modules/react-select/dist/Select-ef7c0426.esm.js
 import * as React13 from "react";
-import { useMemo as useMemo7, Fragment as Fragment22, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect15, Component as Component2 } from "react";
+import { useMemo as useMemo8, Fragment as Fragment22, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect15, Component as Component2 } from "react";
 
 // node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 import * as React11 from "react";
@@ -29204,7 +29225,7 @@ function _taggedTemplateLiteral(e3, t3) {
 }
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
-import { useContext as useContext8, useRef as useRef13, useState as useState15, useMemo as useMemo6, useCallback as useCallback7, createContext as createContext4 } from "react";
+import { useContext as useContext8, useRef as useRef13, useState as useState15, useMemo as useMemo7, useCallback as useCallback7, createContext as createContext4 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
@@ -29657,7 +29678,7 @@ var MenuPortal = function MenuPortal2(props) {
   var menuPortalRef = useRef13(null);
   var cleanupRef = useRef13(null);
   var _useState5 = useState15(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
-  var portalPlacementContext = useMemo6(function() {
+  var portalPlacementContext = useMemo7(function() {
     return {
       setPortalPlacement
     };
@@ -30363,10 +30384,10 @@ var LiveRegion = function LiveRegion2(props) {
   var ariaLiveMessages = selectProps.ariaLiveMessages, getOptionLabel4 = selectProps.getOptionLabel, inputValue = selectProps.inputValue, isMulti = selectProps.isMulti, isOptionDisabled3 = selectProps.isOptionDisabled, isSearchable = selectProps.isSearchable, menuIsOpen = selectProps.menuIsOpen, options2 = selectProps.options, screenReaderStatus2 = selectProps.screenReaderStatus, tabSelectsValue = selectProps.tabSelectsValue, isLoading = selectProps.isLoading;
   var ariaLabel = selectProps["aria-label"];
   var ariaLive = selectProps["aria-live"];
-  var messages = useMemo7(function() {
+  var messages = useMemo8(function() {
     return _objectSpread2(_objectSpread2({}, defaultAriaLiveMessages), ariaLiveMessages || {});
   }, [ariaLiveMessages]);
-  var ariaSelected = useMemo7(function() {
+  var ariaSelected = useMemo8(function() {
     var message2 = "";
     if (ariaSelection && messages.onChange) {
       var option = ariaSelection.option, selectedOptions = ariaSelection.options, removedValue = ariaSelection.removedValue, removedValues = ariaSelection.removedValues, value = ariaSelection.value;
@@ -30388,7 +30409,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return message2;
   }, [ariaSelection, messages, isOptionDisabled3, selectValue, getOptionLabel4]);
-  var ariaFocused = useMemo7(function() {
+  var ariaFocused = useMemo8(function() {
     var focusMsg = "";
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
@@ -30407,7 +30428,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return focusMsg;
   }, [focusedOption, focusedValue, getOptionLabel4, isOptionDisabled3, messages, focusableOptions, selectValue, isAppleDevice2]);
-  var ariaResults = useMemo7(function() {
+  var ariaResults = useMemo8(function() {
     var resultsMsg = "";
     if (menuIsOpen && options2.length && !isLoading && messages.onFilter) {
       var resultsMessage = screenReaderStatus2({
@@ -30421,7 +30442,7 @@ var LiveRegion = function LiveRegion2(props) {
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options2, screenReaderStatus2, isLoading]);
   var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === "initial-input-focus";
-  var ariaGuidance = useMemo7(function() {
+  var ariaGuidance = useMemo8(function() {
     var guidanceMsg = "";
     if (messages.guidance) {
       var context = focusedValue ? "value" : menuIsOpen ? "menu" : "input";
@@ -33519,7 +33540,7 @@ var ImageField = (props) => {
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-import React16, { useEffect as useEffect20, useMemo as useMemo9 } from "react";
+import React16, { useEffect as useEffect20, useMemo as useMemo10 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
 import { Fragment as Fragment27, jsx as jsx91, jsxs as jsxs60 } from "react/jsx-runtime";
@@ -33667,7 +33688,7 @@ var Many2ManyTagField = (props) => {
             clearErrors(name2);
           }
         }, [field.value]);
-        const filteredValue = useMemo9(() => {
+        const filteredValue = useMemo10(() => {
           if (!Array.isArray(field?.value)) return null;
           const fieldValueMapped = field.value.map((v) => ({
             value: v?.id,
@@ -33714,12 +33735,12 @@ var Many2ManyTagField = (props) => {
               placeholder: readonly ? "" : instance.t("choose_place"),
               classNames: isEditTable ? {
                 valueContainer: () => "overflow-unset !px-0",
-                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-[300px] max-w-[300px] !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
+                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-max max-w-max !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? `!cursor-not-allowed ${filteredValue?.length === 0 && "no-values"}` : ""}`,
                 dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
                 clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
               } : {
                 valueContainer: () => "overflow-unset !m-0 !p-0",
-                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"}`,
+                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"} ${filteredValue?.length === 0 && "no-values"}`,
                 singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
                 input: () => "!m-0 !p-0",
                 dropdownIndicator: () => "!m-0 !p-0"
@@ -33754,8 +33775,8 @@ var Many2ManyTagField = (props) => {
                 menu: (base) => ({
                   ...base,
                   zIndex: 9999,
-                  width: "300px",
-                  minWidth: "300px",
+                  width: "auto",
+                  minWidth: "max-content",
                   borderRadius: "10px"
                 }),
                 menuList: (base) => ({
@@ -33784,7 +33805,8 @@ var Many2ManyTagField = (props) => {
                   }
                 ),
                 IndicatorSeparator: () => null,
-                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx92(components.DropdownIndicator, { ...props2 })
+                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx92(components.DropdownIndicator, { ...props2 }),
+                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx92(components.ClearIndicator, { ...props2 })
               },
               required: !invisible && required
             }
@@ -34173,7 +34195,7 @@ var SelectDropdownField = (props) => {
               {
                 ...commonProps,
                 classNames: {
-                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-max max-w-max rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
                   valueContainer: () => "!m-0 !p-0 ",
                   singleValue: () => `!m-0`,
                   input: () => "!m-0 !p-0",
@@ -34874,7 +34896,7 @@ var Many2OneField = (props) => {
     setDomainObject
   } = props;
   if (!isForm && !isEditTable) {
-    const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue.id : propValue;
+    const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue?.id : propValue;
     return /* @__PURE__ */ jsxs71(Fragment31, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
@@ -34888,7 +34910,7 @@ var Many2OneField = (props) => {
           className: "cursor-pointer",
           "data-tooltip-id": String(name2) + index4,
           id: name2,
-          children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue.display_name : propValue
+          children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue?.display_name : propValue
         }
       )
     ] });
@@ -34918,7 +34940,11 @@ var Many2OneField = (props) => {
               } : false
             },
             render: ({ field, fieldState: { error: error2 } }) => {
-              const currentValue = field?.value ? { value: field?.value?.id, label: field?.value?.display_name } : null;
+              const currentValue = field?.value ? {
+                value: field?.value?.id,
+                label: field?.value?.display_name,
+                ...field?.value ?? {}
+              } : null;
               const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
                 (option) => option.value === tempSelectedOption?.value
               ) : currentValue ? currentValue : null;
@@ -34934,7 +34960,7 @@ var Many2OneField = (props) => {
                     menuShouldScrollIntoView: false,
                     options: listOptions,
                     classNames: {
-                      control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                      control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-max max-w-max rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
                       valueContainer: () => "!m-0 !p-0 ",
                       singleValue: () => `!m-0`,
                       input: () => "!m-0 !p-0",
@@ -35118,11 +35144,11 @@ var StatusbarDurationField = (props) => {
 };
 
 // src/widgets/basic/status-bar-field/option/option.tsx
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 import { jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
-  const memoizedStatusOptions = useMemo10(() => selection, [selection]);
+  const memoizedStatusOptions = useMemo11(() => selection, [selection]);
   return /* @__PURE__ */ jsx107(
     "div",
     {

package/dist/types.d.mts

@@ -29,6 +29,7 @@ interface IInputFieldProps {
     domain?: any;
     idForm?: boolean;
     widget?: string;
+    options?: any;
 }
 declare const loginSchema: z.ZodObject<{
     username: z.ZodString;

package/dist/types.d.ts

@@ -29,6 +29,7 @@ interface IInputFieldProps {
     domain?: any;
     idForm?: boolean;
     widget?: string;
+    options?: any;
 }
 declare const loginSchema: z.ZodObject<{
     username: z.ZodString;

package/dist/widgets.js

@@ -18197,6 +18197,7 @@ var ButtonField = (props) => {
 // src/widgets/basic/char-field/char.tsx
 var import_react38 = require("react");
 var import_jsx_runtime73 = require("react/jsx-runtime");
+var WIDGET_AUTO_COMPUTE_DEPEND = "auto_compute_depend_field";
 var CharField = (props) => {
   const {
     name: name2,
@@ -18218,7 +18219,8 @@ var CharField = (props) => {
     isEditTable,
     isForm,
     value,
-    defaultValue
+    defaultValue,
+    options: options2
   } = props;
   if (!isForm && !isEditTable) {
     const propValue = value || defaultValue;
@@ -18257,13 +18259,32 @@ var CharField = (props) => {
             clearErrors(name2);
           }
         }, [value2, clearErrors, name2]);
+        (0, import_react38.useEffect)(() => {
+          if (widget !== WIDGET_AUTO_COMPUTE_DEPEND) return;
+          const depValue = formValues?.[options2?.depend_field]?.[options2?.field_name];
+          const currentValue = methods?.getValues(name2);
+          if (currentValue !== depValue) {
+            methods?.setValue(name2, depValue, { shouldValidate: true });
+          }
+        }, [widget, formValues]);
         const realValue = typeof value2 === "string" || typeof value2 === "number" ? String(value2) : "";
-        const displayValue = (widget === "access_token" || widget === "refresh_token") && typeof realValue === "string" && !isDirty ? "*".repeat(realValue?.length) : widget === "private_secret_key" && formValues?.id && typeof formValues?.id === "number" && !isDirty && typeof realValue === "string" ? `${realValue?.slice(0, 4)}${realValue?.length > 4 ? "*".repeat(realValue?.length - 4) : ""}` : typeof realValue === "string" || typeof realValue === "number" ? String(realValue) : "";
+        const displayValue = (0, import_react38.useMemo)(() => {
+          if ((widget === "access_token" || widget === "refresh_token") && typeof realValue === "string" && !isDirty) {
+            return "*".repeat(realValue.length);
+          }
+          if (widget === "private_secret_key" && formValues?.id && typeof formValues?.id === "number" && !isDirty && typeof realValue === "string") {
+            return `${realValue.slice(0, 4)}${realValue.length > 4 ? "*".repeat(realValue.length - 4) : ""}`;
+          }
+          if (typeof realValue === "string" || typeof realValue === "number") {
+            return String(realValue);
+          }
+          return "";
+        }, [widget, formValues]);
         return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
             "input",
             {
-              value: displayValue,
+              value: displayValue ?? "",
               onChange: (e3) => {
                 const inputValue = e3.target.value;
                 if (readonly) return;
@@ -33459,12 +33480,12 @@ var Many2ManyTagField = (props) => {
               placeholder: readonly ? "" : instance.t("choose_place"),
               classNames: isEditTable ? {
                 valueContainer: () => "overflow-unset !px-0",
-                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-[300px] max-w-[300px] !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
+                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-max max-w-max !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? `!cursor-not-allowed ${filteredValue?.length === 0 && "no-values"}` : ""}`,
                 dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
                 clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
               } : {
                 valueContainer: () => "overflow-unset !m-0 !p-0",
-                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"}`,
+                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"} ${filteredValue?.length === 0 && "no-values"}`,
                 singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
                 input: () => "!m-0 !p-0",
                 dropdownIndicator: () => "!m-0 !p-0"
@@ -33499,8 +33520,8 @@ var Many2ManyTagField = (props) => {
                 menu: (base) => ({
                   ...base,
                   zIndex: 9999,
-                  width: "300px",
-                  minWidth: "300px",
+                  width: "auto",
+                  minWidth: "max-content",
                   borderRadius: "10px"
                 }),
                 menuList: (base) => ({
@@ -33529,7 +33550,8 @@ var Many2ManyTagField = (props) => {
                   }
                 ),
                 IndicatorSeparator: () => null,
-                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(components.DropdownIndicator, { ...props2 })
+                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(components.DropdownIndicator, { ...props2 }),
+                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(components.ClearIndicator, { ...props2 })
               },
               required: !invisible && required
             }
@@ -33918,7 +33940,7 @@ var SelectDropdownField = (props) => {
               {
                 ...commonProps,
                 classNames: {
-                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-max max-w-max rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
                   valueContainer: () => "!m-0 !p-0 ",
                   singleValue: () => `!m-0`,
                   input: () => "!m-0 !p-0",
@@ -34619,7 +34641,7 @@ var Many2OneField = (props) => {
     setDomainObject
   } = props;
   if (!isForm && !isEditTable) {
-    const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue.id : propValue;
+    const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue?.id : propValue;
     return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
@@ -34633,7 +34655,7 @@ var Many2OneField = (props) => {
           className: "cursor-pointer",
           "data-tooltip-id": String(name2) + index4,
           id: name2,
-          children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue.display_name : propValue
+          children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue?.display_name : propValue
         }
       )
     ] });
@@ -34663,7 +34685,11 @@ var Many2OneField = (props) => {
               } : false
             },
             render: ({ field, fieldState: { error: error2 } }) => {
-              const currentValue = field?.value ? { value: field?.value?.id, label: field?.value?.display_name } : null;
+              const currentValue = field?.value ? {
+                value: field?.value?.id,
+                label: field?.value?.display_name,
+                ...field?.value ?? {}
+              } : null;
               const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
                 (option) => option.value === tempSelectedOption?.value
               ) : currentValue ? currentValue : null;
@@ -34679,7 +34705,7 @@ var Many2OneField = (props) => {
                     menuShouldScrollIntoView: false,
                     options: listOptions,
                     classNames: {
-                      control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                      control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-max max-w-max rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
                       valueContainer: () => "!m-0 !p-0 ",
                       singleValue: () => `!m-0`,
                       input: () => "!m-0 !p-0",

package/dist/widgets.mjs

@@ -18132,8 +18132,9 @@ var ButtonField = (props) => {
 };
 
 // src/widgets/basic/char-field/char.tsx
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo4 } from "react";
 import { Fragment as Fragment17, jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
+var WIDGET_AUTO_COMPUTE_DEPEND = "auto_compute_depend_field";
 var CharField = (props) => {
   const {
     name: name2,
@@ -18155,7 +18156,8 @@ var CharField = (props) => {
     isEditTable,
     isForm,
     value,
-    defaultValue
+    defaultValue,
+    options: options2
   } = props;
   if (!isForm && !isEditTable) {
     const propValue = value || defaultValue;
@@ -18194,13 +18196,32 @@ var CharField = (props) => {
             clearErrors(name2);
           }
         }, [value2, clearErrors, name2]);
+        useEffect10(() => {
+          if (widget !== WIDGET_AUTO_COMPUTE_DEPEND) return;
+          const depValue = formValues?.[options2?.depend_field]?.[options2?.field_name];
+          const currentValue = methods?.getValues(name2);
+          if (currentValue !== depValue) {
+            methods?.setValue(name2, depValue, { shouldValidate: true });
+          }
+        }, [widget, formValues]);
         const realValue = typeof value2 === "string" || typeof value2 === "number" ? String(value2) : "";
-        const displayValue = (widget === "access_token" || widget === "refresh_token") && typeof realValue === "string" && !isDirty ? "*".repeat(realValue?.length) : widget === "private_secret_key" && formValues?.id && typeof formValues?.id === "number" && !isDirty && typeof realValue === "string" ? `${realValue?.slice(0, 4)}${realValue?.length > 4 ? "*".repeat(realValue?.length - 4) : ""}` : typeof realValue === "string" || typeof realValue === "number" ? String(realValue) : "";
+        const displayValue = useMemo4(() => {
+          if ((widget === "access_token" || widget === "refresh_token") && typeof realValue === "string" && !isDirty) {
+            return "*".repeat(realValue.length);
+          }
+          if (widget === "private_secret_key" && formValues?.id && typeof formValues?.id === "number" && !isDirty && typeof realValue === "string") {
+            return `${realValue.slice(0, 4)}${realValue.length > 4 ? "*".repeat(realValue.length - 4) : ""}`;
+          }
+          if (typeof realValue === "string" || typeof realValue === "number") {
+            return String(realValue);
+          }
+          return "";
+        }, [widget, formValues]);
         return /* @__PURE__ */ jsxs48(Fragment17, { children: [
           /* @__PURE__ */ jsx73(
             "input",
             {
-              value: displayValue,
+              value: displayValue ?? "",
               onChange: (e3) => {
                 const inputValue = e3.target.value;
                 if (readonly) return;
@@ -27446,7 +27467,7 @@ function _extends() {
 
 // node_modules/react-select/dist/react-select.esm.js
 import * as React14 from "react";
-import { forwardRef as forwardRef5, useMemo as useMemo8 } from "react";
+import { forwardRef as forwardRef5, useMemo as useMemo9 } from "react";
 
 // node_modules/@babel/runtime/helpers/esm/classCallCheck.js
 function _classCallCheck(a2, n4) {
@@ -27554,7 +27575,7 @@ function _toConsumableArray(r4) {
 
 // node_modules/react-select/dist/Select-ef7c0426.esm.js
 import * as React13 from "react";
-import { useMemo as useMemo7, Fragment as Fragment22, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect15, Component as Component2 } from "react";
+import { useMemo as useMemo8, Fragment as Fragment22, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect15, Component as Component2 } from "react";
 
 // node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 import * as React11 from "react";
@@ -28886,7 +28907,7 @@ function _taggedTemplateLiteral(e3, t3) {
 }
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
-import { useContext as useContext8, useRef as useRef13, useState as useState15, useMemo as useMemo6, useCallback as useCallback7, createContext as createContext4 } from "react";
+import { useContext as useContext8, useRef as useRef13, useState as useState15, useMemo as useMemo7, useCallback as useCallback7, createContext as createContext4 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
@@ -29339,7 +29360,7 @@ var MenuPortal = function MenuPortal2(props) {
   var menuPortalRef = useRef13(null);
   var cleanupRef = useRef13(null);
   var _useState5 = useState15(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
-  var portalPlacementContext = useMemo6(function() {
+  var portalPlacementContext = useMemo7(function() {
     return {
       setPortalPlacement
     };
@@ -30045,10 +30066,10 @@ var LiveRegion = function LiveRegion2(props) {
   var ariaLiveMessages = selectProps.ariaLiveMessages, getOptionLabel4 = selectProps.getOptionLabel, inputValue = selectProps.inputValue, isMulti = selectProps.isMulti, isOptionDisabled3 = selectProps.isOptionDisabled, isSearchable = selectProps.isSearchable, menuIsOpen = selectProps.menuIsOpen, options2 = selectProps.options, screenReaderStatus2 = selectProps.screenReaderStatus, tabSelectsValue = selectProps.tabSelectsValue, isLoading = selectProps.isLoading;
   var ariaLabel = selectProps["aria-label"];
   var ariaLive = selectProps["aria-live"];
-  var messages = useMemo7(function() {
+  var messages = useMemo8(function() {
     return _objectSpread2(_objectSpread2({}, defaultAriaLiveMessages), ariaLiveMessages || {});
   }, [ariaLiveMessages]);
-  var ariaSelected = useMemo7(function() {
+  var ariaSelected = useMemo8(function() {
     var message2 = "";
     if (ariaSelection && messages.onChange) {
       var option = ariaSelection.option, selectedOptions = ariaSelection.options, removedValue = ariaSelection.removedValue, removedValues = ariaSelection.removedValues, value = ariaSelection.value;
@@ -30070,7 +30091,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return message2;
   }, [ariaSelection, messages, isOptionDisabled3, selectValue, getOptionLabel4]);
-  var ariaFocused = useMemo7(function() {
+  var ariaFocused = useMemo8(function() {
     var focusMsg = "";
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
@@ -30089,7 +30110,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return focusMsg;
   }, [focusedOption, focusedValue, getOptionLabel4, isOptionDisabled3, messages, focusableOptions, selectValue, isAppleDevice2]);
-  var ariaResults = useMemo7(function() {
+  var ariaResults = useMemo8(function() {
     var resultsMsg = "";
     if (menuIsOpen && options2.length && !isLoading && messages.onFilter) {
       var resultsMessage = screenReaderStatus2({
@@ -30103,7 +30124,7 @@ var LiveRegion = function LiveRegion2(props) {
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options2, screenReaderStatus2, isLoading]);
   var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === "initial-input-focus";
-  var ariaGuidance = useMemo7(function() {
+  var ariaGuidance = useMemo8(function() {
     var guidanceMsg = "";
     if (messages.guidance) {
       var context = focusedValue ? "value" : menuIsOpen ? "menu" : "input";
@@ -33201,7 +33222,7 @@ var ImageField = (props) => {
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-import React16, { useEffect as useEffect20, useMemo as useMemo9 } from "react";
+import React16, { useEffect as useEffect20, useMemo as useMemo10 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
 import { Fragment as Fragment27, jsx as jsx91, jsxs as jsxs60 } from "react/jsx-runtime";
@@ -33349,7 +33370,7 @@ var Many2ManyTagField = (props) => {
             clearErrors(name2);
           }
         }, [field.value]);
-        const filteredValue = useMemo9(() => {
+        const filteredValue = useMemo10(() => {
           if (!Array.isArray(field?.value)) return null;
           const fieldValueMapped = field.value.map((v) => ({
             value: v?.id,
@@ -33396,12 +33417,12 @@ var Many2ManyTagField = (props) => {
               placeholder: readonly ? "" : instance.t("choose_place"),
               classNames: isEditTable ? {
                 valueContainer: () => "overflow-unset !px-0",
-                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-[300px] max-w-[300px] !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
+                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-max max-w-max !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? `!cursor-not-allowed ${filteredValue?.length === 0 && "no-values"}` : ""}`,
                 dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
                 clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
               } : {
                 valueContainer: () => "overflow-unset !m-0 !p-0",
-                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"}`,
+                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"} ${filteredValue?.length === 0 && "no-values"}`,
                 singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
                 input: () => "!m-0 !p-0",
                 dropdownIndicator: () => "!m-0 !p-0"
@@ -33436,8 +33457,8 @@ var Many2ManyTagField = (props) => {
                 menu: (base) => ({
                   ...base,
                   zIndex: 9999,
-                  width: "300px",
-                  minWidth: "300px",
+                  width: "auto",
+                  minWidth: "max-content",
                   borderRadius: "10px"
                 }),
                 menuList: (base) => ({
@@ -33466,7 +33487,8 @@ var Many2ManyTagField = (props) => {
                   }
                 ),
                 IndicatorSeparator: () => null,
-                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx92(components.DropdownIndicator, { ...props2 })
+                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx92(components.DropdownIndicator, { ...props2 }),
+                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx92(components.ClearIndicator, { ...props2 })
               },
               required: !invisible && required
             }
@@ -33855,7 +33877,7 @@ var SelectDropdownField = (props) => {
               {
                 ...commonProps,
                 classNames: {
-                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-max max-w-max rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
                   valueContainer: () => "!m-0 !p-0 ",
                   singleValue: () => `!m-0`,
                   input: () => "!m-0 !p-0",
@@ -34556,7 +34578,7 @@ var Many2OneField = (props) => {
     setDomainObject
   } = props;
   if (!isForm && !isEditTable) {
-    const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue.id : propValue;
+    const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue?.id : propValue;
     return /* @__PURE__ */ jsxs71(Fragment31, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
@@ -34570,7 +34592,7 @@ var Many2OneField = (props) => {
           className: "cursor-pointer",
           "data-tooltip-id": String(name2) + index4,
           id: name2,
-          children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue.display_name : propValue
+          children: propValue && typeof propValue === "object" && "display_name" in propValue ? propValue?.display_name : propValue
         }
       )
     ] });
@@ -34600,7 +34622,11 @@ var Many2OneField = (props) => {
               } : false
             },
             render: ({ field, fieldState: { error: error2 } }) => {
-              const currentValue = field?.value ? { value: field?.value?.id, label: field?.value?.display_name } : null;
+              const currentValue = field?.value ? {
+                value: field?.value?.id,
+                label: field?.value?.display_name,
+                ...field?.value ?? {}
+              } : null;
               const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
                 (option) => option.value === tempSelectedOption?.value
               ) : currentValue ? currentValue : null;
@@ -34616,7 +34642,7 @@ var Many2OneField = (props) => {
                     menuShouldScrollIntoView: false,
                     options: listOptions,
                     classNames: {
-                      control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                      control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-max max-w-max rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
                       valueContainer: () => "!m-0 !p-0 ",
                       singleValue: () => `!m-0`,
                       input: () => "!m-0 !p-0",
@@ -34800,11 +34826,11 @@ var StatusbarDurationField = (props) => {
 };
 
 // src/widgets/basic/status-bar-field/option/option.tsx
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 import { jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
-  const memoizedStatusOptions = useMemo10(() => selection, [selection]);
+  const memoizedStatusOptions = useMemo11(() => selection, [selection]);
   return /* @__PURE__ */ jsx107(
     "div",
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/sme-widget-ui",
-  "version": "1.6.9",
+  "version": "1.7.1",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",