@fctc/sme-widget-ui 1.6.8 → 1.7.0

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;
@@ -33976,9 +33997,6 @@ var MonetaryField = (props) => {
             clearErrors(name2);
           }
         }, [value2]);
-        const baseClasses = `w-full min-h-[44px] ring-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden field-sizing-content`;
-        const editableClass = isEditTable ? `${error2 ? "hover:border-b-[1px] hover:border-b-[#de4747]" : "hover:border-b-[1px] hover:border-b-primary"} outline-0 hover:!outline-none` : `focus:ring-0 focus:!outline-none focus:border-[1px] focus:border-primary outline-0 bg-[#f7f7f7] border border-[#f7f7f7] rounded-[10px]`;
-        const readonlyClass = readonly ? "!cursor-not-allowed border-transparent text-[#5c5a5a]" : "!cursor-pointer border-[#f7f7f7] text-[#525866]";
         return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "input",
@@ -34011,7 +34029,11 @@ var MonetaryField = (props) => {
               placeholder: placeholder ?? `${i18n_default.t("choose_place")} ${string}`,
               required: !invisible && required,
               style: invisible ? { display: "none" } : {},
-              className: `${baseClasses} ${editableClass} ${readonlyClass}`
+              className: `w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden
+                 ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
+                  ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
+                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}
+                `
             }
           ),
           !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -34994,7 +35016,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),
@@ -35008,7 +35030,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
         }
       )
     ] });
@@ -35038,7 +35060,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;

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,
@@ -33855,9 +33876,6 @@ var MonetaryField = (props) => {
             clearErrors(name2);
           }
         }, [value2]);
-        const baseClasses = `w-full min-h-[44px] ring-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden field-sizing-content`;
-        const editableClass = isEditTable ? `${error2 ? "hover:border-b-[1px] hover:border-b-[#de4747]" : "hover:border-b-[1px] hover:border-b-primary"} outline-0 hover:!outline-none` : `focus:ring-0 focus:!outline-none focus:border-[1px] focus:border-primary outline-0 bg-[#f7f7f7] border border-[#f7f7f7] rounded-[10px]`;
-        const readonlyClass = readonly ? "!cursor-not-allowed border-transparent text-[#5c5a5a]" : "!cursor-pointer border-[#f7f7f7] text-[#525866]";
         return /* @__PURE__ */ jsxs62(Fragment28, { children: [
           /* @__PURE__ */ jsx93(
             "input",
@@ -33890,7 +33908,11 @@ var MonetaryField = (props) => {
               placeholder: placeholder ?? `${i18n_default.t("choose_place")} ${string}`,
               required: !invisible && required,
               style: invisible ? { display: "none" } : {},
-              className: `${baseClasses} ${editableClass} ${readonlyClass}`
+              className: `w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden
+                 ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
+                  ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
+                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}
+                `
             }
           ),
           !isEditTable && error2 && /* @__PURE__ */ jsx93("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -34873,7 +34895,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),
@@ -34887,7 +34909,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
         }
       )
     ] });
@@ -34917,7 +34939,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;
@@ -35117,11 +35143,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;
@@ -33600,9 +33621,6 @@ var MonetaryField = (props) => {
             clearErrors(name2);
           }
         }, [value2]);
-        const baseClasses = `w-full min-h-[44px] ring-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden field-sizing-content`;
-        const editableClass = isEditTable ? `${error2 ? "hover:border-b-[1px] hover:border-b-[#de4747]" : "hover:border-b-[1px] hover:border-b-primary"} outline-0 hover:!outline-none` : `focus:ring-0 focus:!outline-none focus:border-[1px] focus:border-primary outline-0 bg-[#f7f7f7] border border-[#f7f7f7] rounded-[10px]`;
-        const readonlyClass = readonly ? "!cursor-not-allowed border-transparent text-[#5c5a5a]" : "!cursor-pointer border-[#f7f7f7] text-[#525866]";
         return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "input",
@@ -33635,7 +33653,11 @@ var MonetaryField = (props) => {
               placeholder: placeholder ?? `${i18n_default.t("choose_place")} ${string}`,
               required: !invisible && required,
               style: invisible ? { display: "none" } : {},
-              className: `${baseClasses} ${editableClass} ${readonlyClass}`
+              className: `w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden
+                 ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
+                  ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
+                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}
+                `
             }
           ),
           !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -34618,7 +34640,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),
@@ -34632,7 +34654,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
         }
       )
     ] });
@@ -34662,7 +34684,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;

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,
@@ -33537,9 +33558,6 @@ var MonetaryField = (props) => {
             clearErrors(name2);
           }
         }, [value2]);
-        const baseClasses = `w-full min-h-[44px] ring-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden field-sizing-content`;
-        const editableClass = isEditTable ? `${error2 ? "hover:border-b-[1px] hover:border-b-[#de4747]" : "hover:border-b-[1px] hover:border-b-primary"} outline-0 hover:!outline-none` : `focus:ring-0 focus:!outline-none focus:border-[1px] focus:border-primary outline-0 bg-[#f7f7f7] border border-[#f7f7f7] rounded-[10px]`;
-        const readonlyClass = readonly ? "!cursor-not-allowed border-transparent text-[#5c5a5a]" : "!cursor-pointer border-[#f7f7f7] text-[#525866]";
         return /* @__PURE__ */ jsxs62(Fragment28, { children: [
           /* @__PURE__ */ jsx93(
             "input",
@@ -33572,7 +33590,11 @@ var MonetaryField = (props) => {
               placeholder: placeholder ?? `${i18n_default.t("choose_place")} ${string}`,
               required: !invisible && required,
               style: invisible ? { display: "none" } : {},
-              className: `${baseClasses} ${editableClass} ${readonlyClass}`
+              className: `w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden
+                 ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
+                  ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
+                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}
+                `
             }
           ),
           !isEditTable && error2 && /* @__PURE__ */ jsx93("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -34555,7 +34577,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),
@@ -34569,7 +34591,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
         }
       )
     ] });
@@ -34599,7 +34621,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;
@@ -34799,11 +34825,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.8",
+  "version": "1.7.0",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",