@fctc/sme-widget-ui 2.0.6 → 2.0.8

package/dist/index.js

@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment34 = REACT_FRAGMENT_TYPE;
+        var Fragment33 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element2;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment34;
+        exports2.Fragment = Fragment33;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal2;
@@ -16762,6 +16762,7 @@ var VideoPlayer = ({ src }) => {
 };
 
 // src/widgets/basic/avatar-field/avatar.tsx
+var import_react_dom4 = require("react-dom");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var AvatarField = (props) => {
   const {
@@ -16786,7 +16787,7 @@ var AvatarField = (props) => {
     color: textColor,
     fontSize: `${size4 / 2.5}px`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "relative", children: [
     isForm && allowShowDetail && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       ModalDetail,
       {
@@ -16798,14 +16799,17 @@ var AvatarField = (props) => {
         place: "top-start"
       }
     ),
-    allowShowDetail && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-      M,
-      {
-        id: `avatar-widget-id-${id}`,
-        place: isForm ? "bottom" : "top",
-        content: fullName,
-        className: "z-20"
-      }
+    allowShowDetail && (0, import_react_dom4.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        M,
+        {
+          id: `avatar-widget-id-${id}`,
+          place: isForm ? "bottom" : "top",
+          content: fullName,
+          className: "z-20"
+        }
+      ),
+      document.body
     ),
     avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "img",
@@ -22182,7 +22186,7 @@ function useFloating2(options2) {
 }
 
 // node_modules/react-datepicker/dist/index.es.js
-var import_react_dom6 = __toESM(require("react-dom"));
+var import_react_dom7 = __toESM(require("react-dom"));
 var _extendStatics = function extendStatics(d, b2) {
   _extendStatics = Object.setPrototypeOf || {
     __proto__: []
@@ -25425,7 +25429,7 @@ var Portal = (
       }
     };
     Portal2.prototype.render = function() {
-      return import_react_dom6.default.createPortal(this.props.children, this.el);
+      return import_react_dom7.default.createPortal(this.props.children, this.el);
     };
     return Portal2;
   }(import_react45.Component)
@@ -27993,7 +27997,7 @@ function _taggedTemplateLiteral(e3, t3) {
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
 var import_react51 = require("react");
-var import_react_dom7 = require("react-dom");
+var import_react_dom8 = require("react-dom");
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 var import_react49 = require("react");
@@ -28496,7 +28500,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), innerProps), children);
   return jsx83(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /* @__PURE__ */ (0, import_react_dom7.createPortal)(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /* @__PURE__ */ (0, import_react_dom8.createPortal)(menuWrapper, appendTo) : menuWrapper);
 };
 var containerCSS = function containerCSS2(_ref3) {
   var isDisabled = _ref3.isDisabled, isRtl = _ref3.isRtl;
@@ -31389,7 +31393,7 @@ var import_toConsumableArray2 = __toESM(require_toConsumableArray());
 var import_typeof5 = __toESM(require_typeof());
 var import_taggedTemplateLiteral2 = __toESM(require_taggedTemplateLiteral());
 var import_defineProperty3 = __toESM(require_defineProperty());
-var import_react_dom8 = require("react-dom");
+var import_react_dom9 = require("react-dom");
 var StateManagedSelect = /* @__PURE__ */ (0, import_react54.forwardRef)(function(props, ref) {
   var baseSelectProps = useStateManager(props);
   return /* @__PURE__ */ React14.createElement(Select, _extends({
@@ -33339,7 +33343,7 @@ var StatusDropdownField = (props) => {
 };
 
 // src/widgets/basic/many2many-field/many2many.tsx
-var import_react_dom9 = require("react-dom");
+var import_react_dom10 = require("react-dom");
 var import_react66 = require("react");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 var Many2ManyField = (props) => {
@@ -33414,7 +33418,7 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return (0, import_react_dom9.createPortal)(
+  return (0, import_react_dom10.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
       "div",
       {

package/dist/index.mjs

@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment34 = REACT_FRAGMENT_TYPE;
+        var Fragment33 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment34;
+        exports.Fragment = Fragment33;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal2;
@@ -16637,7 +16637,8 @@ var VideoPlayer = ({ src }) => {
 };
 
 // src/widgets/basic/avatar-field/avatar.tsx
-import { Fragment as Fragment15, jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
+import { createPortal as createPortal4 } from "react-dom";
+import { jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
 var AvatarField = (props) => {
   const {
     isForm = false,
@@ -16661,7 +16662,7 @@ var AvatarField = (props) => {
     color: textColor,
     fontSize: `${size4 / 2.5}px`
   };
-  return /* @__PURE__ */ jsxs48(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs48("div", { className: "relative", children: [
     isForm && allowShowDetail && /* @__PURE__ */ jsx73(
       ModalDetail,
       {
@@ -16673,14 +16674,17 @@ var AvatarField = (props) => {
         place: "top-start"
       }
     ),
-    allowShowDetail && /* @__PURE__ */ jsx73(
-      M,
-      {
-        id: `avatar-widget-id-${id}`,
-        place: isForm ? "bottom" : "top",
-        content: fullName,
-        className: "z-20"
-      }
+    allowShowDetail && createPortal4(
+      /* @__PURE__ */ jsx73(
+        M,
+        {
+          id: `avatar-widget-id-${id}`,
+          place: isForm ? "bottom" : "top",
+          content: fullName,
+          className: "z-20"
+        }
+      ),
+      document.body
     ),
     avatarSrc ? /* @__PURE__ */ jsx73(
       "img",
@@ -16704,7 +16708,7 @@ var AvatarField = (props) => {
 
 // src/widgets/basic/binary-field/binary.tsx
 import { useEffect as useEffect11, useState as useState11 } from "react";
-import { Fragment as Fragment16, jsx as jsx74, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx74, jsxs as jsxs49 } from "react/jsx-runtime";
 var BinaryField = (props) => {
   const {
     name: name2,
@@ -16830,7 +16834,7 @@ var BinaryField = (props) => {
       },
       render: ({ field, fieldState: { error: error2 } }) => {
         const hasFile = !!fileInfo;
-        return /* @__PURE__ */ jsxs49(Fragment16, { children: [
+        return /* @__PURE__ */ jsxs49(Fragment15, { children: [
           /* @__PURE__ */ jsx74(
             "div",
             {
@@ -17045,7 +17049,7 @@ var ButtonBadgeField = (props) => {
 };
 
 // src/widgets/basic/button-field/button.tsx
-import { Fragment as Fragment17, jsx as jsx76, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx76, jsxs as jsxs50 } from "react/jsx-runtime";
 var ButtonField = (props) => {
   const {
     func,
@@ -17056,7 +17060,7 @@ var ButtonField = (props) => {
     type = "submit"
   } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsx76(Fragment17, { children: !loading ? /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx76(Fragment16, { children: !loading ? /* @__PURE__ */ jsx76(
     "button",
     {
       type,
@@ -17082,7 +17086,7 @@ var ButtonField = (props) => {
 
 // src/widgets/basic/char-field/char.tsx
 import { useEffect as useEffect12, useMemo as useMemo4 } from "react";
-import { Fragment as Fragment18, jsx as jsx77, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx77, jsxs as jsxs51 } from "react/jsx-runtime";
 var WIDGET_AUTO_COMPUTE_DEPEND = "auto_compute_depend_field";
 var CharField = (props) => {
   const {
@@ -17166,7 +17170,7 @@ var CharField = (props) => {
           }
           return "";
         }, [widget, formValues]);
-        return /* @__PURE__ */ jsxs51(Fragment18, { children: [
+        return /* @__PURE__ */ jsxs51(Fragment17, { children: [
           /* @__PURE__ */ jsx77(
             "input",
             {
@@ -17228,7 +17232,7 @@ var CharField = (props) => {
                 `
             }
           ),
-          isEditTable ? /* @__PURE__ */ jsx77(Fragment18, {}) : /* @__PURE__ */ jsx77(Fragment18, { children: error2 && /* @__PURE__ */ jsx77("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message }) })
+          isEditTable ? /* @__PURE__ */ jsx77(Fragment17, {}) : /* @__PURE__ */ jsx77(Fragment17, { children: error2 && /* @__PURE__ */ jsx77("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message }) })
         ] });
       }
     }
@@ -17310,7 +17314,7 @@ var CheckboxField = (props) => {
 
 // src/widgets/basic/color-field/color-wrapper.tsx
 import { useEffect as useEffect13, useRef as useRef7, useState as useState12 } from "react";
-import { Fragment as Fragment19, jsx as jsx79, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx79, jsxs as jsxs52 } from "react/jsx-runtime";
 var ColorWrapper = (props) => {
   const {
     colors: colors2,
@@ -17361,7 +17365,7 @@ var ColorWrapper = (props) => {
         content: i18n_default.t(color?.name)
       }
     )
-  ] }, color?.id)) }) : /* @__PURE__ */ jsxs52(Fragment19, { children: [
+  ] }, color?.id)) }) : /* @__PURE__ */ jsxs52(Fragment18, { children: [
     /* @__PURE__ */ jsx79(
       "button",
       {
@@ -21461,7 +21465,7 @@ function useEffectEvent(callback) {
 }
 
 // node_modules/react-datepicker/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
-import { jsx as jsx82, jsxs as jsxs54, Fragment as Fragment20 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs54, Fragment as Fragment19 } from "react/jsx-runtime";
 import * as ReactDOM2 from "react-dom";
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
@@ -26535,7 +26539,7 @@ function _toConsumableArray(r4) {
 
 // node_modules/react-select/dist/Select-ef7c0426.esm.js
 import * as React13 from "react";
-import { useMemo as useMemo8, Fragment as Fragment23, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect17, Component as Component2 } from "react";
+import { useMemo as useMemo8, Fragment as Fragment22, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect17, Component as Component2 } from "react";
 
 // node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 import * as React11 from "react";
@@ -27868,7 +27872,7 @@ function _taggedTemplateLiteral(e3, t3) {
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
 import { useContext as useContext9, useRef as useRef13, useState as useState16, useMemo as useMemo7, useCallback as useCallback7, createContext as createContext5 } from "react";
-import { createPortal as createPortal5 } from "react-dom";
+import { createPortal as createPortal6 } from "react-dom";
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 import { useLayoutEffect as useLayoutEffect4 } from "react";
@@ -28371,7 +28375,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), innerProps), children);
   return jsx83(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /* @__PURE__ */ createPortal5(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /* @__PURE__ */ createPortal6(menuWrapper, appendTo) : menuWrapper);
 };
 var containerCSS = function containerCSS2(_ref3) {
   var isDisabled = _ref3.isDisabled, isRtl = _ref3.isRtl;
@@ -29100,7 +29104,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx83(Fragment23, null, jsx83("span", {
+  var ScreenReaderText = jsx83(Fragment22, null, jsx83("span", {
     id: "aria-selection"
   }, ariaSelected), jsx83("span", {
     id: "aria-focused"
@@ -29109,7 +29113,7 @@ var LiveRegion = function LiveRegion2(props) {
   }, ariaResults), jsx83("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx83(Fragment23, null, jsx83(A11yText$1, {
+  return jsx83(Fragment22, null, jsx83(A11yText$1, {
     id
   }, isInitialFocus && ScreenReaderText), jsx83(A11yText$1, {
     "aria-live": ariaLive,
@@ -29666,7 +29670,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx83(Fragment23, null, lockEnabled && jsx83("div", {
+  return jsx83(Fragment22, null, lockEnabled && jsx83("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -31275,7 +31279,7 @@ var StateManagedSelect$1 = StateManagedSelect;
 
 // src/widgets/basic/date-field/date.tsx
 var import_moment2 = __toESM(require_moment());
-import { Fragment as Fragment24, jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
 var DateField = (props) => {
   const {
     name: name2,
@@ -31346,7 +31350,7 @@ var DateField = (props) => {
             }
           }, [value, clearErrors, name2]);
           const selectedDate = !methods ? value && (0, import_moment2.default)(value, formatDateParse).isValid() ? (0, import_moment2.default)(value, formatDateParse).add(7, "hours").toDate() : null : field?.value && (0, import_moment2.default)(field.value, formatDateParse).isValid() ? (0, import_moment2.default)(field.value, formatDateParse).add(7, "hours").toDate() : null;
-          return /* @__PURE__ */ jsxs55(Fragment24, { children: [
+          return /* @__PURE__ */ jsxs55(Fragment23, { children: [
             /* @__PURE__ */ jsx85(
               DatePicker,
               {
@@ -31630,7 +31634,7 @@ var DropdownField = (props) => {
 };
 
 // src/widgets/basic/fee-field/fee.tsx
-import { Fragment as Fragment25, jsx as jsx89, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx89, jsxs as jsxs59 } from "react/jsx-runtime";
 var FeeField = (props) => {
   const { value, formValues } = props;
   const { t: t3 } = useI18n();
@@ -31641,10 +31645,10 @@ var FeeField = (props) => {
     )
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
-  return /* @__PURE__ */ jsxs59(Fragment25, { children: [
+  return /* @__PURE__ */ jsxs59(Fragment24, { children: [
     value?.subtotals?.map((sub) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ jsxs59(Fragment25, { children: [
+        return /* @__PURE__ */ jsxs59(Fragment24, { children: [
           /* @__PURE__ */ jsxs59("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
             /* @__PURE__ */ jsxs59("div", { className: "text-[14px] leading-[21px] text-right", children: [
               sub?.name,
@@ -31837,7 +31841,7 @@ var FileUploadField = (props) => {
 
 // src/widgets/basic/float-field/float.tsx
 import { useEffect as useEffect20, useRef as useRef16, useState as useState19 } from "react";
-import { Fragment as Fragment26, jsx as jsx91, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx91, jsxs as jsxs61 } from "react/jsx-runtime";
 var FloatField = (props) => {
   const {
     name: name2,
@@ -31964,7 +31968,7 @@ var FloatField = (props) => {
           }
           isDirtyRef.current = false;
         };
-        return /* @__PURE__ */ jsxs61(Fragment26, { children: [
+        return /* @__PURE__ */ jsxs61(Fragment25, { children: [
           /* @__PURE__ */ jsx91(
             "input",
             {
@@ -31994,7 +31998,7 @@ var FloatField = (props) => {
 
 // src/widgets/basic/float-time-field/float-time.tsx
 import { useState as useState20 } from "react";
-import { Fragment as Fragment27, jsx as jsx92, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx92, jsxs as jsxs62 } from "react/jsx-runtime";
 var FloatTimeField = (props) => {
   const {
     name: name2,
@@ -32074,7 +32078,7 @@ var FloatTimeField = (props) => {
           }
           onBlur();
         };
-        return /* @__PURE__ */ jsxs62(Fragment27, { children: [
+        return /* @__PURE__ */ jsxs62(Fragment26, { children: [
           /* @__PURE__ */ jsx92(
             "input",
             {
@@ -32184,11 +32188,11 @@ var ImageField = (props) => {
 import React16, { useEffect as useEffect22, useMemo as useMemo10 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
-import { Fragment as Fragment28, jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
 var InfomationField = (props) => {
   const { value, isForm = false, showName = true, stringToColor } = props;
   if (!value || Array.isArray(value) && value.length === 0) {
-    return /* @__PURE__ */ jsx95(Fragment28, {});
+    return /* @__PURE__ */ jsx95(Fragment27, {});
   }
   const inforValues = Array.isArray(value) ? value : [value];
   return /* @__PURE__ */ jsx95("div", { className: "group relative flex items-center gap-1 rounded-lg transition-shadow duration-300", children: inforValues.length > 1 ? inforValues.map((item) => /* @__PURE__ */ jsx95(
@@ -32463,7 +32467,7 @@ var Many2ManyTagField = (props) => {
 
 // src/widgets/basic/monetary-field/monetary.tsx
 import { useEffect as useEffect23 } from "react";
-import { Fragment as Fragment29, jsx as jsx97, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx97, jsxs as jsxs65 } from "react/jsx-runtime";
 var MonetaryField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32521,7 +32525,7 @@ var MonetaryField = (props) => {
             clearErrors(name2);
           }
         }, [value2]);
-        return /* @__PURE__ */ jsxs65(Fragment29, { children: [
+        return /* @__PURE__ */ jsxs65(Fragment28, { children: [
           /* @__PURE__ */ jsx97(
             "input",
             {
@@ -32783,7 +32787,7 @@ var RemainingDaysField = (props) => {
 };
 
 // src/widgets/basic/select-dropdown-field/select-dropdown.tsx
-import { Fragment as Fragment30, jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
 var SelectDropdownField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32834,7 +32838,7 @@ var SelectDropdownField = (props) => {
             value: defaultValue || null,
             required: !invisible && required
           };
-          return /* @__PURE__ */ jsxs69(Fragment30, { children: [
+          return /* @__PURE__ */ jsxs69(Fragment29, { children: [
             /* @__PURE__ */ jsx103("div", { className: "group", children: /* @__PURE__ */ jsx103(
               StateManagedSelect$1,
               {
@@ -33016,7 +33020,7 @@ var ToggleButtonField = (props) => {
 
 // src/widgets/basic/integer-field/integer.tsx
 import { useEffect as useEffect26, useRef as useRef18, useState as useState22 } from "react";
-import { Fragment as Fragment31, jsx as jsx106, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx106, jsxs as jsxs71 } from "react/jsx-runtime";
 var IntegerField = (props) => {
   const {
     name: name2,
@@ -33115,7 +33119,7 @@ var IntegerField = (props) => {
           inputRef.current?.blur();
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs71(Fragment31, { children: [
+        return /* @__PURE__ */ jsxs71(Fragment30, { children: [
           /* @__PURE__ */ jsx106(
             "input",
             {
@@ -33214,7 +33218,7 @@ var StatusDropdownField = (props) => {
 };
 
 // src/widgets/basic/many2many-field/many2many.tsx
-import { createPortal as createPortal6 } from "react-dom";
+import { createPortal as createPortal7 } from "react-dom";
 import { useEffect as useEffect27 } from "react";
 import { jsx as jsx108, jsxs as jsxs73 } from "react/jsx-runtime";
 var Many2ManyField = (props) => {
@@ -33289,7 +33293,7 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return createPortal6(
+  return createPortal7(
     /* @__PURE__ */ jsxs73(
       "div",
       {
@@ -33496,7 +33500,7 @@ var Many2ManyField = (props) => {
 
 // src/widgets/basic/many2one-field/many2one.tsx
 import React18, { useEffect as useEffect28 } from "react";
-import { Fragment as Fragment32, jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
 var CustomMenuList2 = (props) => {
   const { t: t3 } = useI18n();
   const { options: options2, children, selectProps } = props;
@@ -33547,7 +33551,7 @@ var Many2OneField = (props) => {
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
     const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue?.id : propValue;
-    return /* @__PURE__ */ jsxs74(Fragment32, { children: [
+    return /* @__PURE__ */ jsxs74(Fragment31, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
         model: options2?.model ?? relation,
@@ -33565,7 +33569,7 @@ var Many2OneField = (props) => {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs74(Fragment32, { children: [
+  return /* @__PURE__ */ jsxs74(Fragment31, { children: [
     allowShowDetail && renderDetail({
       idToolTip: String(name2),
       model: options2?.model ?? relation,
@@ -33798,7 +33802,7 @@ var StatusbarDurationField = (props) => {
 
 // src/widgets/basic/status-bar-field/option/option.tsx
 import { useMemo as useMemo11 } from "react";
-import { Fragment as Fragment33, jsx as jsx111, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx111, jsxs as jsxs76 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = useMemo11(() => selection, [selection]);
@@ -33814,7 +33818,7 @@ var StatusBarOptionField = (props) => {
         flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        return /* @__PURE__ */ jsxs76(Fragment33, { children: [
+        return /* @__PURE__ */ jsxs76(Fragment32, { children: [
           /* @__PURE__ */ jsxs76(
             "div",
             {

package/dist/widgets.js

@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment34 = REACT_FRAGMENT_TYPE;
+        var Fragment33 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element2;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment34;
+        exports2.Fragment = Fragment33;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal2;
@@ -16015,6 +16015,7 @@ var VideoPlayer = ({ src }) => {
 };
 
 // src/widgets/basic/avatar-field/avatar.tsx
+var import_react_dom4 = require("react-dom");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var AvatarField = (props) => {
   const {
@@ -16039,7 +16040,7 @@ var AvatarField = (props) => {
     color: textColor,
     fontSize: `${size4 / 2.5}px`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "relative", children: [
     isForm && allowShowDetail && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       ModalDetail,
       {
@@ -16051,14 +16052,17 @@ var AvatarField = (props) => {
         place: "top-start"
       }
     ),
-    allowShowDetail && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-      M,
-      {
-        id: `avatar-widget-id-${id}`,
-        place: isForm ? "bottom" : "top",
-        content: fullName,
-        className: "z-20"
-      }
+    allowShowDetail && (0, import_react_dom4.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        M,
+        {
+          id: `avatar-widget-id-${id}`,
+          place: isForm ? "bottom" : "top",
+          content: fullName,
+          className: "z-20"
+        }
+      ),
+      document.body
     ),
     avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "img",
@@ -21435,7 +21439,7 @@ function useFloating2(options2) {
 }
 
 // node_modules/react-datepicker/dist/index.es.js
-var import_react_dom6 = __toESM(require("react-dom"));
+var import_react_dom7 = __toESM(require("react-dom"));
 var _extendStatics = function extendStatics(d, b2) {
   _extendStatics = Object.setPrototypeOf || {
     __proto__: []
@@ -24678,7 +24682,7 @@ var Portal = (
       }
     };
     Portal2.prototype.render = function() {
-      return import_react_dom6.default.createPortal(this.props.children, this.el);
+      return import_react_dom7.default.createPortal(this.props.children, this.el);
     };
     return Portal2;
   }(import_react45.Component)
@@ -27246,7 +27250,7 @@ function _taggedTemplateLiteral(e3, t3) {
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
 var import_react51 = require("react");
-var import_react_dom7 = require("react-dom");
+var import_react_dom8 = require("react-dom");
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 var import_react49 = require("react");
@@ -27749,7 +27753,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), innerProps), children);
   return jsx83(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /* @__PURE__ */ (0, import_react_dom7.createPortal)(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /* @__PURE__ */ (0, import_react_dom8.createPortal)(menuWrapper, appendTo) : menuWrapper);
 };
 var containerCSS = function containerCSS2(_ref3) {
   var isDisabled = _ref3.isDisabled, isRtl = _ref3.isRtl;
@@ -30642,7 +30646,7 @@ var import_toConsumableArray2 = __toESM(require_toConsumableArray());
 var import_typeof5 = __toESM(require_typeof());
 var import_taggedTemplateLiteral2 = __toESM(require_taggedTemplateLiteral());
 var import_defineProperty3 = __toESM(require_defineProperty());
-var import_react_dom8 = require("react-dom");
+var import_react_dom9 = require("react-dom");
 var StateManagedSelect = /* @__PURE__ */ (0, import_react54.forwardRef)(function(props, ref) {
   var baseSelectProps = useStateManager(props);
   return /* @__PURE__ */ React14.createElement(Select, _extends({
@@ -32592,7 +32596,7 @@ var StatusDropdownField = (props) => {
 };
 
 // src/widgets/basic/many2many-field/many2many.tsx
-var import_react_dom9 = require("react-dom");
+var import_react_dom10 = require("react-dom");
 var import_react66 = require("react");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 var Many2ManyField = (props) => {
@@ -32667,7 +32671,7 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return (0, import_react_dom9.createPortal)(
+  return (0, import_react_dom10.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
       "div",
       {

package/dist/widgets.mjs

@@ -4297,7 +4297,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment34 = REACT_FRAGMENT_TYPE;
+        var Fragment33 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal2 = REACT_PORTAL_TYPE;
@@ -4356,7 +4356,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment34;
+        exports.Fragment = Fragment33;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal2;
@@ -15953,7 +15953,8 @@ var VideoPlayer = ({ src }) => {
 };
 
 // src/widgets/basic/avatar-field/avatar.tsx
-import { Fragment as Fragment15, jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
+import { createPortal as createPortal4 } from "react-dom";
+import { jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
 var AvatarField = (props) => {
   const {
     isForm = false,
@@ -15977,7 +15978,7 @@ var AvatarField = (props) => {
     color: textColor,
     fontSize: `${size4 / 2.5}px`
   };
-  return /* @__PURE__ */ jsxs48(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs48("div", { className: "relative", children: [
     isForm && allowShowDetail && /* @__PURE__ */ jsx73(
       ModalDetail,
       {
@@ -15989,14 +15990,17 @@ var AvatarField = (props) => {
         place: "top-start"
       }
     ),
-    allowShowDetail && /* @__PURE__ */ jsx73(
-      M,
-      {
-        id: `avatar-widget-id-${id}`,
-        place: isForm ? "bottom" : "top",
-        content: fullName,
-        className: "z-20"
-      }
+    allowShowDetail && createPortal4(
+      /* @__PURE__ */ jsx73(
+        M,
+        {
+          id: `avatar-widget-id-${id}`,
+          place: isForm ? "bottom" : "top",
+          content: fullName,
+          className: "z-20"
+        }
+      ),
+      document.body
     ),
     avatarSrc ? /* @__PURE__ */ jsx73(
       "img",
@@ -16020,7 +16024,7 @@ var AvatarField = (props) => {
 
 // src/widgets/basic/binary-field/binary.tsx
 import { useEffect as useEffect11, useState as useState11 } from "react";
-import { Fragment as Fragment16, jsx as jsx74, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx74, jsxs as jsxs49 } from "react/jsx-runtime";
 var BinaryField = (props) => {
   const {
     name: name2,
@@ -16146,7 +16150,7 @@ var BinaryField = (props) => {
       },
       render: ({ field, fieldState: { error: error2 } }) => {
         const hasFile = !!fileInfo;
-        return /* @__PURE__ */ jsxs49(Fragment16, { children: [
+        return /* @__PURE__ */ jsxs49(Fragment15, { children: [
           /* @__PURE__ */ jsx74(
             "div",
             {
@@ -16361,7 +16365,7 @@ var ButtonBadgeField = (props) => {
 };
 
 // src/widgets/basic/button-field/button.tsx
-import { Fragment as Fragment17, jsx as jsx76, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx76, jsxs as jsxs50 } from "react/jsx-runtime";
 var ButtonField = (props) => {
   const {
     func,
@@ -16372,7 +16376,7 @@ var ButtonField = (props) => {
     type = "submit"
   } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsx76(Fragment17, { children: !loading ? /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx76(Fragment16, { children: !loading ? /* @__PURE__ */ jsx76(
     "button",
     {
       type,
@@ -16398,7 +16402,7 @@ var ButtonField = (props) => {
 
 // src/widgets/basic/char-field/char.tsx
 import { useEffect as useEffect12, useMemo as useMemo4 } from "react";
-import { Fragment as Fragment18, jsx as jsx77, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx77, jsxs as jsxs51 } from "react/jsx-runtime";
 var WIDGET_AUTO_COMPUTE_DEPEND = "auto_compute_depend_field";
 var CharField = (props) => {
   const {
@@ -16482,7 +16486,7 @@ var CharField = (props) => {
           }
           return "";
         }, [widget, formValues]);
-        return /* @__PURE__ */ jsxs51(Fragment18, { children: [
+        return /* @__PURE__ */ jsxs51(Fragment17, { children: [
           /* @__PURE__ */ jsx77(
             "input",
             {
@@ -16544,7 +16548,7 @@ var CharField = (props) => {
                 `
             }
           ),
-          isEditTable ? /* @__PURE__ */ jsx77(Fragment18, {}) : /* @__PURE__ */ jsx77(Fragment18, { children: error2 && /* @__PURE__ */ jsx77("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message }) })
+          isEditTable ? /* @__PURE__ */ jsx77(Fragment17, {}) : /* @__PURE__ */ jsx77(Fragment17, { children: error2 && /* @__PURE__ */ jsx77("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message }) })
         ] });
       }
     }
@@ -16626,7 +16630,7 @@ var CheckboxField = (props) => {
 
 // src/widgets/basic/color-field/color-wrapper.tsx
 import { useEffect as useEffect13, useRef as useRef7, useState as useState12 } from "react";
-import { Fragment as Fragment19, jsx as jsx79, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx79, jsxs as jsxs52 } from "react/jsx-runtime";
 var ColorWrapper = (props) => {
   const {
     colors: colors2,
@@ -16677,7 +16681,7 @@ var ColorWrapper = (props) => {
         content: i18n_default.t(color?.name)
       }
     )
-  ] }, color?.id)) }) : /* @__PURE__ */ jsxs52(Fragment19, { children: [
+  ] }, color?.id)) }) : /* @__PURE__ */ jsxs52(Fragment18, { children: [
     /* @__PURE__ */ jsx79(
       "button",
       {
@@ -20777,7 +20781,7 @@ function useEffectEvent(callback) {
 }
 
 // node_modules/react-datepicker/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
-import { jsx as jsx82, jsxs as jsxs54, Fragment as Fragment20 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs54, Fragment as Fragment19 } from "react/jsx-runtime";
 import * as ReactDOM2 from "react-dom";
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
@@ -25851,7 +25855,7 @@ function _toConsumableArray(r4) {
 
 // node_modules/react-select/dist/Select-ef7c0426.esm.js
 import * as React13 from "react";
-import { useMemo as useMemo8, Fragment as Fragment23, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect17, Component as Component2 } from "react";
+import { useMemo as useMemo8, Fragment as Fragment22, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect17, Component as Component2 } from "react";
 
 // node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 import * as React11 from "react";
@@ -27184,7 +27188,7 @@ function _taggedTemplateLiteral(e3, t3) {
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
 import { useContext as useContext9, useRef as useRef13, useState as useState16, useMemo as useMemo7, useCallback as useCallback7, createContext as createContext5 } from "react";
-import { createPortal as createPortal5 } from "react-dom";
+import { createPortal as createPortal6 } from "react-dom";
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 import { useLayoutEffect as useLayoutEffect4 } from "react";
@@ -27687,7 +27691,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), innerProps), children);
   return jsx83(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /* @__PURE__ */ createPortal5(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /* @__PURE__ */ createPortal6(menuWrapper, appendTo) : menuWrapper);
 };
 var containerCSS = function containerCSS2(_ref3) {
   var isDisabled = _ref3.isDisabled, isRtl = _ref3.isRtl;
@@ -28416,7 +28420,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx83(Fragment23, null, jsx83("span", {
+  var ScreenReaderText = jsx83(Fragment22, null, jsx83("span", {
     id: "aria-selection"
   }, ariaSelected), jsx83("span", {
     id: "aria-focused"
@@ -28425,7 +28429,7 @@ var LiveRegion = function LiveRegion2(props) {
   }, ariaResults), jsx83("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx83(Fragment23, null, jsx83(A11yText$1, {
+  return jsx83(Fragment22, null, jsx83(A11yText$1, {
     id
   }, isInitialFocus && ScreenReaderText), jsx83(A11yText$1, {
     "aria-live": ariaLive,
@@ -28982,7 +28986,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx83(Fragment23, null, lockEnabled && jsx83("div", {
+  return jsx83(Fragment22, null, lockEnabled && jsx83("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -30591,7 +30595,7 @@ var StateManagedSelect$1 = StateManagedSelect;
 
 // src/widgets/basic/date-field/date.tsx
 var import_moment2 = __toESM(require_moment());
-import { Fragment as Fragment24, jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
 var DateField = (props) => {
   const {
     name: name2,
@@ -30662,7 +30666,7 @@ var DateField = (props) => {
             }
           }, [value, clearErrors, name2]);
           const selectedDate = !methods ? value && (0, import_moment2.default)(value, formatDateParse).isValid() ? (0, import_moment2.default)(value, formatDateParse).add(7, "hours").toDate() : null : field?.value && (0, import_moment2.default)(field.value, formatDateParse).isValid() ? (0, import_moment2.default)(field.value, formatDateParse).add(7, "hours").toDate() : null;
-          return /* @__PURE__ */ jsxs55(Fragment24, { children: [
+          return /* @__PURE__ */ jsxs55(Fragment23, { children: [
             /* @__PURE__ */ jsx85(
               DatePicker,
               {
@@ -30946,7 +30950,7 @@ var DropdownField = (props) => {
 };
 
 // src/widgets/basic/fee-field/fee.tsx
-import { Fragment as Fragment25, jsx as jsx89, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx89, jsxs as jsxs59 } from "react/jsx-runtime";
 var FeeField = (props) => {
   const { value, formValues } = props;
   const { t: t3 } = useI18n();
@@ -30957,10 +30961,10 @@ var FeeField = (props) => {
     )
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
-  return /* @__PURE__ */ jsxs59(Fragment25, { children: [
+  return /* @__PURE__ */ jsxs59(Fragment24, { children: [
     value?.subtotals?.map((sub) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ jsxs59(Fragment25, { children: [
+        return /* @__PURE__ */ jsxs59(Fragment24, { children: [
           /* @__PURE__ */ jsxs59("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
             /* @__PURE__ */ jsxs59("div", { className: "text-[14px] leading-[21px] text-right", children: [
               sub?.name,
@@ -31153,7 +31157,7 @@ var FileUploadField = (props) => {
 
 // src/widgets/basic/float-field/float.tsx
 import { useEffect as useEffect20, useRef as useRef16, useState as useState19 } from "react";
-import { Fragment as Fragment26, jsx as jsx91, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx91, jsxs as jsxs61 } from "react/jsx-runtime";
 var FloatField = (props) => {
   const {
     name: name2,
@@ -31280,7 +31284,7 @@ var FloatField = (props) => {
           }
           isDirtyRef.current = false;
         };
-        return /* @__PURE__ */ jsxs61(Fragment26, { children: [
+        return /* @__PURE__ */ jsxs61(Fragment25, { children: [
           /* @__PURE__ */ jsx91(
             "input",
             {
@@ -31310,7 +31314,7 @@ var FloatField = (props) => {
 
 // src/widgets/basic/float-time-field/float-time.tsx
 import { useState as useState20 } from "react";
-import { Fragment as Fragment27, jsx as jsx92, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx92, jsxs as jsxs62 } from "react/jsx-runtime";
 var FloatTimeField = (props) => {
   const {
     name: name2,
@@ -31390,7 +31394,7 @@ var FloatTimeField = (props) => {
           }
           onBlur();
         };
-        return /* @__PURE__ */ jsxs62(Fragment27, { children: [
+        return /* @__PURE__ */ jsxs62(Fragment26, { children: [
           /* @__PURE__ */ jsx92(
             "input",
             {
@@ -31500,11 +31504,11 @@ var ImageField = (props) => {
 import React16, { useEffect as useEffect22, useMemo as useMemo10 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
-import { Fragment as Fragment28, jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
 var InfomationField = (props) => {
   const { value, isForm = false, showName = true, stringToColor } = props;
   if (!value || Array.isArray(value) && value.length === 0) {
-    return /* @__PURE__ */ jsx95(Fragment28, {});
+    return /* @__PURE__ */ jsx95(Fragment27, {});
   }
   const inforValues = Array.isArray(value) ? value : [value];
   return /* @__PURE__ */ jsx95("div", { className: "group relative flex items-center gap-1 rounded-lg transition-shadow duration-300", children: inforValues.length > 1 ? inforValues.map((item) => /* @__PURE__ */ jsx95(
@@ -31779,7 +31783,7 @@ var Many2ManyTagField = (props) => {
 
 // src/widgets/basic/monetary-field/monetary.tsx
 import { useEffect as useEffect23 } from "react";
-import { Fragment as Fragment29, jsx as jsx97, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx97, jsxs as jsxs65 } from "react/jsx-runtime";
 var MonetaryField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -31837,7 +31841,7 @@ var MonetaryField = (props) => {
             clearErrors(name2);
           }
         }, [value2]);
-        return /* @__PURE__ */ jsxs65(Fragment29, { children: [
+        return /* @__PURE__ */ jsxs65(Fragment28, { children: [
           /* @__PURE__ */ jsx97(
             "input",
             {
@@ -32099,7 +32103,7 @@ var RemainingDaysField = (props) => {
 };
 
 // src/widgets/basic/select-dropdown-field/select-dropdown.tsx
-import { Fragment as Fragment30, jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
 var SelectDropdownField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32150,7 +32154,7 @@ var SelectDropdownField = (props) => {
             value: defaultValue || null,
             required: !invisible && required
           };
-          return /* @__PURE__ */ jsxs69(Fragment30, { children: [
+          return /* @__PURE__ */ jsxs69(Fragment29, { children: [
             /* @__PURE__ */ jsx103("div", { className: "group", children: /* @__PURE__ */ jsx103(
               StateManagedSelect$1,
               {
@@ -32332,7 +32336,7 @@ var ToggleButtonField = (props) => {
 
 // src/widgets/basic/integer-field/integer.tsx
 import { useEffect as useEffect26, useRef as useRef18, useState as useState22 } from "react";
-import { Fragment as Fragment31, jsx as jsx106, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx106, jsxs as jsxs71 } from "react/jsx-runtime";
 var IntegerField = (props) => {
   const {
     name: name2,
@@ -32431,7 +32435,7 @@ var IntegerField = (props) => {
           inputRef.current?.blur();
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs71(Fragment31, { children: [
+        return /* @__PURE__ */ jsxs71(Fragment30, { children: [
           /* @__PURE__ */ jsx106(
             "input",
             {
@@ -32530,7 +32534,7 @@ var StatusDropdownField = (props) => {
 };
 
 // src/widgets/basic/many2many-field/many2many.tsx
-import { createPortal as createPortal6 } from "react-dom";
+import { createPortal as createPortal7 } from "react-dom";
 import { useEffect as useEffect27 } from "react";
 import { jsx as jsx108, jsxs as jsxs73 } from "react/jsx-runtime";
 var Many2ManyField = (props) => {
@@ -32605,7 +32609,7 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return createPortal6(
+  return createPortal7(
     /* @__PURE__ */ jsxs73(
       "div",
       {
@@ -32812,7 +32816,7 @@ var Many2ManyField = (props) => {
 
 // src/widgets/basic/many2one-field/many2one.tsx
 import React18, { useEffect as useEffect28 } from "react";
-import { Fragment as Fragment32, jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
 var CustomMenuList2 = (props) => {
   const { t: t3 } = useI18n();
   const { options: options2, children, selectProps } = props;
@@ -32863,7 +32867,7 @@ var Many2OneField = (props) => {
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
     const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue?.id : propValue;
-    return /* @__PURE__ */ jsxs74(Fragment32, { children: [
+    return /* @__PURE__ */ jsxs74(Fragment31, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
         model: options2?.model ?? relation,
@@ -32881,7 +32885,7 @@ var Many2OneField = (props) => {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs74(Fragment32, { children: [
+  return /* @__PURE__ */ jsxs74(Fragment31, { children: [
     allowShowDetail && renderDetail({
       idToolTip: String(name2),
       model: options2?.model ?? relation,
@@ -33114,7 +33118,7 @@ var StatusbarDurationField = (props) => {
 
 // src/widgets/basic/status-bar-field/option/option.tsx
 import { useMemo as useMemo11 } from "react";
-import { Fragment as Fragment33, jsx as jsx111, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx111, jsxs as jsxs76 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = useMemo11(() => selection, [selection]);
@@ -33130,7 +33134,7 @@ var StatusBarOptionField = (props) => {
         flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        return /* @__PURE__ */ jsxs76(Fragment33, { children: [
+        return /* @__PURE__ */ jsxs76(Fragment32, { children: [
           /* @__PURE__ */ jsxs76(
             "div",
             {

package/package.json

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