@fctc/sme-widget-ui 2.0.8 → 2.1.0

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 Fragment33 = REACT_FRAGMENT_TYPE;
+        var Fragment34 = 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 = Fragment33;
+        exports2.Fragment = Fragment34;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal2;
@@ -16762,7 +16762,6 @@ 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 {
@@ -16787,7 +16786,7 @@ var AvatarField = (props) => {
     color: textColor,
     fontSize: `${size4 / 2.5}px`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
     isForm && allowShowDetail && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       ModalDetail,
       {
@@ -16799,17 +16798,14 @@ var AvatarField = (props) => {
         place: "top-start"
       }
     ),
-    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
+    allowShowDetail && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      M,
+      {
+        id: `avatar-widget-id-${id}`,
+        place: isForm ? "bottom" : "top",
+        content: fullName,
+        className: "z-20"
+      }
     ),
     avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "img",
@@ -22186,7 +22182,7 @@ function useFloating2(options2) {
 }
 
 // node_modules/react-datepicker/dist/index.es.js
-var import_react_dom7 = __toESM(require("react-dom"));
+var import_react_dom6 = __toESM(require("react-dom"));
 var _extendStatics = function extendStatics(d, b2) {
   _extendStatics = Object.setPrototypeOf || {
     __proto__: []
@@ -25429,7 +25425,7 @@ var Portal = (
       }
     };
     Portal2.prototype.render = function() {
-      return import_react_dom7.default.createPortal(this.props.children, this.el);
+      return import_react_dom6.default.createPortal(this.props.children, this.el);
     };
     return Portal2;
   }(import_react45.Component)
@@ -27997,7 +27993,7 @@ function _taggedTemplateLiteral(e3, t3) {
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
 var import_react51 = require("react");
-var import_react_dom8 = require("react-dom");
+var import_react_dom7 = require("react-dom");
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 var import_react49 = require("react");
@@ -28500,7 +28496,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), innerProps), children);
   return jsx83(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /* @__PURE__ */ (0, import_react_dom8.createPortal)(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /* @__PURE__ */ (0, import_react_dom7.createPortal)(menuWrapper, appendTo) : menuWrapper);
 };
 var containerCSS = function containerCSS2(_ref3) {
   var isDisabled = _ref3.isDisabled, isRtl = _ref3.isRtl;
@@ -31393,7 +31389,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_dom9 = require("react-dom");
+var import_react_dom8 = require("react-dom");
 var StateManagedSelect = /* @__PURE__ */ (0, import_react54.forwardRef)(function(props, ref) {
   var baseSelectProps = useStateManager(props);
   return /* @__PURE__ */ React14.createElement(Select, _extends({
@@ -32012,7 +32008,7 @@ var FloatField = (props) => {
           } else if (value === null || value === void 0) {
             setInputValue("");
           }
-        }, [value, name2, clearErrors, propValue, inputValue]);
+        }, [value, name2, clearErrors, propValue]);
         const isDirtyRef = (0, import_react58.useRef)(false);
         const inputRef = (0, import_react58.useRef)(null);
         const lastCommittedValueRef = (0, import_react58.useRef)(null);
@@ -33343,7 +33339,7 @@ var StatusDropdownField = (props) => {
 };
 
 // src/widgets/basic/many2many-field/many2many.tsx
-var import_react_dom10 = require("react-dom");
+var import_react_dom9 = require("react-dom");
 var import_react66 = require("react");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 var Many2ManyField = (props) => {
@@ -33418,7 +33414,7 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return (0, import_react_dom10.createPortal)(
+  return (0, import_react_dom9.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 Fragment33 = REACT_FRAGMENT_TYPE;
+        var Fragment34 = 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 = Fragment33;
+        exports.Fragment = Fragment34;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal2;
@@ -16637,8 +16637,7 @@ var VideoPlayer = ({ src }) => {
 };
 
 // src/widgets/basic/avatar-field/avatar.tsx
-import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
 var AvatarField = (props) => {
   const {
     isForm = false,
@@ -16662,7 +16661,7 @@ var AvatarField = (props) => {
     color: textColor,
     fontSize: `${size4 / 2.5}px`
   };
-  return /* @__PURE__ */ jsxs48("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsxs48(Fragment15, { children: [
     isForm && allowShowDetail && /* @__PURE__ */ jsx73(
       ModalDetail,
       {
@@ -16674,17 +16673,14 @@ var AvatarField = (props) => {
         place: "top-start"
       }
     ),
-    allowShowDetail && createPortal4(
-      /* @__PURE__ */ jsx73(
-        M,
-        {
-          id: `avatar-widget-id-${id}`,
-          place: isForm ? "bottom" : "top",
-          content: fullName,
-          className: "z-20"
-        }
-      ),
-      document.body
+    allowShowDetail && /* @__PURE__ */ jsx73(
+      M,
+      {
+        id: `avatar-widget-id-${id}`,
+        place: isForm ? "bottom" : "top",
+        content: fullName,
+        className: "z-20"
+      }
     ),
     avatarSrc ? /* @__PURE__ */ jsx73(
       "img",
@@ -16708,7 +16704,7 @@ var AvatarField = (props) => {
 
 // src/widgets/basic/binary-field/binary.tsx
 import { useEffect as useEffect11, useState as useState11 } from "react";
-import { Fragment as Fragment15, jsx as jsx74, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx74, jsxs as jsxs49 } from "react/jsx-runtime";
 var BinaryField = (props) => {
   const {
     name: name2,
@@ -16834,7 +16830,7 @@ var BinaryField = (props) => {
       },
       render: ({ field, fieldState: { error: error2 } }) => {
         const hasFile = !!fileInfo;
-        return /* @__PURE__ */ jsxs49(Fragment15, { children: [
+        return /* @__PURE__ */ jsxs49(Fragment16, { children: [
           /* @__PURE__ */ jsx74(
             "div",
             {
@@ -17049,7 +17045,7 @@ var ButtonBadgeField = (props) => {
 };
 
 // src/widgets/basic/button-field/button.tsx
-import { Fragment as Fragment16, jsx as jsx76, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx76, jsxs as jsxs50 } from "react/jsx-runtime";
 var ButtonField = (props) => {
   const {
     func,
@@ -17060,7 +17056,7 @@ var ButtonField = (props) => {
     type = "submit"
   } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsx76(Fragment16, { children: !loading ? /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx76(Fragment17, { children: !loading ? /* @__PURE__ */ jsx76(
     "button",
     {
       type,
@@ -17086,7 +17082,7 @@ var ButtonField = (props) => {
 
 // src/widgets/basic/char-field/char.tsx
 import { useEffect as useEffect12, useMemo as useMemo4 } from "react";
-import { Fragment as Fragment17, jsx as jsx77, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx77, jsxs as jsxs51 } from "react/jsx-runtime";
 var WIDGET_AUTO_COMPUTE_DEPEND = "auto_compute_depend_field";
 var CharField = (props) => {
   const {
@@ -17170,7 +17166,7 @@ var CharField = (props) => {
           }
           return "";
         }, [widget, formValues]);
-        return /* @__PURE__ */ jsxs51(Fragment17, { children: [
+        return /* @__PURE__ */ jsxs51(Fragment18, { children: [
           /* @__PURE__ */ jsx77(
             "input",
             {
@@ -17232,7 +17228,7 @@ var CharField = (props) => {
                 `
             }
           ),
-          isEditTable ? /* @__PURE__ */ jsx77(Fragment17, {}) : /* @__PURE__ */ jsx77(Fragment17, { children: error2 && /* @__PURE__ */ jsx77("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message }) })
+          isEditTable ? /* @__PURE__ */ jsx77(Fragment18, {}) : /* @__PURE__ */ jsx77(Fragment18, { children: error2 && /* @__PURE__ */ jsx77("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message }) })
         ] });
       }
     }
@@ -17314,7 +17310,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 Fragment18, jsx as jsx79, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx79, jsxs as jsxs52 } from "react/jsx-runtime";
 var ColorWrapper = (props) => {
   const {
     colors: colors2,
@@ -17365,7 +17361,7 @@ var ColorWrapper = (props) => {
         content: i18n_default.t(color?.name)
       }
     )
-  ] }, color?.id)) }) : /* @__PURE__ */ jsxs52(Fragment18, { children: [
+  ] }, color?.id)) }) : /* @__PURE__ */ jsxs52(Fragment19, { children: [
     /* @__PURE__ */ jsx79(
       "button",
       {
@@ -21465,7 +21461,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 Fragment19 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs54, Fragment as Fragment20 } from "react/jsx-runtime";
 import * as ReactDOM2 from "react-dom";
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
@@ -26539,7 +26535,7 @@ function _toConsumableArray(r4) {
 
 // node_modules/react-select/dist/Select-ef7c0426.esm.js
 import * as React13 from "react";
-import { useMemo as useMemo8, Fragment as Fragment22, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect17, Component as Component2 } from "react";
+import { useMemo as useMemo8, Fragment as Fragment23, 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";
@@ -27872,7 +27868,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 createPortal6 } from "react-dom";
+import { createPortal as createPortal5 } from "react-dom";
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 import { useLayoutEffect as useLayoutEffect4 } from "react";
@@ -28375,7 +28371,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), innerProps), children);
   return jsx83(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /* @__PURE__ */ createPortal6(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /* @__PURE__ */ createPortal5(menuWrapper, appendTo) : menuWrapper);
 };
 var containerCSS = function containerCSS2(_ref3) {
   var isDisabled = _ref3.isDisabled, isRtl = _ref3.isRtl;
@@ -29104,7 +29100,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx83(Fragment22, null, jsx83("span", {
+  var ScreenReaderText = jsx83(Fragment23, null, jsx83("span", {
     id: "aria-selection"
   }, ariaSelected), jsx83("span", {
     id: "aria-focused"
@@ -29113,7 +29109,7 @@ var LiveRegion = function LiveRegion2(props) {
   }, ariaResults), jsx83("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx83(Fragment22, null, jsx83(A11yText$1, {
+  return jsx83(Fragment23, null, jsx83(A11yText$1, {
     id
   }, isInitialFocus && ScreenReaderText), jsx83(A11yText$1, {
     "aria-live": ariaLive,
@@ -29670,7 +29666,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx83(Fragment22, null, lockEnabled && jsx83("div", {
+  return jsx83(Fragment23, null, lockEnabled && jsx83("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -31279,7 +31275,7 @@ var StateManagedSelect$1 = StateManagedSelect;
 
 // src/widgets/basic/date-field/date.tsx
 var import_moment2 = __toESM(require_moment());
-import { Fragment as Fragment23, jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
 var DateField = (props) => {
   const {
     name: name2,
@@ -31350,7 +31346,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(Fragment23, { children: [
+          return /* @__PURE__ */ jsxs55(Fragment24, { children: [
             /* @__PURE__ */ jsx85(
               DatePicker,
               {
@@ -31634,7 +31630,7 @@ var DropdownField = (props) => {
 };
 
 // src/widgets/basic/fee-field/fee.tsx
-import { Fragment as Fragment24, jsx as jsx89, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx89, jsxs as jsxs59 } from "react/jsx-runtime";
 var FeeField = (props) => {
   const { value, formValues } = props;
   const { t: t3 } = useI18n();
@@ -31645,10 +31641,10 @@ var FeeField = (props) => {
     )
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
-  return /* @__PURE__ */ jsxs59(Fragment24, { children: [
+  return /* @__PURE__ */ jsxs59(Fragment25, { children: [
     value?.subtotals?.map((sub) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ jsxs59(Fragment24, { children: [
+        return /* @__PURE__ */ jsxs59(Fragment25, { 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,
@@ -31841,7 +31837,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 Fragment25, jsx as jsx91, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx91, jsxs as jsxs61 } from "react/jsx-runtime";
 var FloatField = (props) => {
   const {
     name: name2,
@@ -31887,7 +31883,7 @@ var FloatField = (props) => {
           } else if (value === null || value === void 0) {
             setInputValue("");
           }
-        }, [value, name2, clearErrors, propValue, inputValue]);
+        }, [value, name2, clearErrors, propValue]);
         const isDirtyRef = useRef16(false);
         const inputRef = useRef16(null);
         const lastCommittedValueRef = useRef16(null);
@@ -31968,7 +31964,7 @@ var FloatField = (props) => {
           }
           isDirtyRef.current = false;
         };
-        return /* @__PURE__ */ jsxs61(Fragment25, { children: [
+        return /* @__PURE__ */ jsxs61(Fragment26, { children: [
           /* @__PURE__ */ jsx91(
             "input",
             {
@@ -31998,7 +31994,7 @@ var FloatField = (props) => {
 
 // src/widgets/basic/float-time-field/float-time.tsx
 import { useState as useState20 } from "react";
-import { Fragment as Fragment26, jsx as jsx92, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx92, jsxs as jsxs62 } from "react/jsx-runtime";
 var FloatTimeField = (props) => {
   const {
     name: name2,
@@ -32078,7 +32074,7 @@ var FloatTimeField = (props) => {
           }
           onBlur();
         };
-        return /* @__PURE__ */ jsxs62(Fragment26, { children: [
+        return /* @__PURE__ */ jsxs62(Fragment27, { children: [
           /* @__PURE__ */ jsx92(
             "input",
             {
@@ -32188,11 +32184,11 @@ var ImageField = (props) => {
 import React16, { useEffect as useEffect22, useMemo as useMemo10 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
-import { Fragment as Fragment27, jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment28, 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(Fragment27, {});
+    return /* @__PURE__ */ jsx95(Fragment28, {});
   }
   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(
@@ -32467,7 +32463,7 @@ var Many2ManyTagField = (props) => {
 
 // src/widgets/basic/monetary-field/monetary.tsx
 import { useEffect as useEffect23 } from "react";
-import { Fragment as Fragment28, jsx as jsx97, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx97, jsxs as jsxs65 } from "react/jsx-runtime";
 var MonetaryField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32525,7 +32521,7 @@ var MonetaryField = (props) => {
             clearErrors(name2);
           }
         }, [value2]);
-        return /* @__PURE__ */ jsxs65(Fragment28, { children: [
+        return /* @__PURE__ */ jsxs65(Fragment29, { children: [
           /* @__PURE__ */ jsx97(
             "input",
             {
@@ -32787,7 +32783,7 @@ var RemainingDaysField = (props) => {
 };
 
 // src/widgets/basic/select-dropdown-field/select-dropdown.tsx
-import { Fragment as Fragment29, jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
 var SelectDropdownField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32838,7 +32834,7 @@ var SelectDropdownField = (props) => {
             value: defaultValue || null,
             required: !invisible && required
           };
-          return /* @__PURE__ */ jsxs69(Fragment29, { children: [
+          return /* @__PURE__ */ jsxs69(Fragment30, { children: [
             /* @__PURE__ */ jsx103("div", { className: "group", children: /* @__PURE__ */ jsx103(
               StateManagedSelect$1,
               {
@@ -33020,7 +33016,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 Fragment30, jsx as jsx106, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx106, jsxs as jsxs71 } from "react/jsx-runtime";
 var IntegerField = (props) => {
   const {
     name: name2,
@@ -33119,7 +33115,7 @@ var IntegerField = (props) => {
           inputRef.current?.blur();
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs71(Fragment30, { children: [
+        return /* @__PURE__ */ jsxs71(Fragment31, { children: [
           /* @__PURE__ */ jsx106(
             "input",
             {
@@ -33218,7 +33214,7 @@ var StatusDropdownField = (props) => {
 };
 
 // src/widgets/basic/many2many-field/many2many.tsx
-import { createPortal as createPortal7 } from "react-dom";
+import { createPortal as createPortal6 } from "react-dom";
 import { useEffect as useEffect27 } from "react";
 import { jsx as jsx108, jsxs as jsxs73 } from "react/jsx-runtime";
 var Many2ManyField = (props) => {
@@ -33293,7 +33289,7 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return createPortal7(
+  return createPortal6(
     /* @__PURE__ */ jsxs73(
       "div",
       {
@@ -33500,7 +33496,7 @@ var Many2ManyField = (props) => {
 
 // src/widgets/basic/many2one-field/many2one.tsx
 import React18, { useEffect as useEffect28 } from "react";
-import { Fragment as Fragment31, jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
 var CustomMenuList2 = (props) => {
   const { t: t3 } = useI18n();
   const { options: options2, children, selectProps } = props;
@@ -33551,7 +33547,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(Fragment31, { children: [
+    return /* @__PURE__ */ jsxs74(Fragment32, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
         model: options2?.model ?? relation,
@@ -33569,7 +33565,7 @@ var Many2OneField = (props) => {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs74(Fragment31, { children: [
+  return /* @__PURE__ */ jsxs74(Fragment32, { children: [
     allowShowDetail && renderDetail({
       idToolTip: String(name2),
       model: options2?.model ?? relation,
@@ -33802,7 +33798,7 @@ var StatusbarDurationField = (props) => {
 
 // src/widgets/basic/status-bar-field/option/option.tsx
 import { useMemo as useMemo11 } from "react";
-import { Fragment as Fragment32, jsx as jsx111, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx111, jsxs as jsxs76 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = useMemo11(() => selection, [selection]);
@@ -33818,7 +33814,7 @@ var StatusBarOptionField = (props) => {
         flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        return /* @__PURE__ */ jsxs76(Fragment32, { children: [
+        return /* @__PURE__ */ jsxs76(Fragment33, { 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 Fragment33 = REACT_FRAGMENT_TYPE;
+        var Fragment34 = 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 = Fragment33;
+        exports2.Fragment = Fragment34;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal2;
@@ -16015,7 +16015,6 @@ 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 {
@@ -16040,7 +16039,7 @@ var AvatarField = (props) => {
     color: textColor,
     fontSize: `${size4 / 2.5}px`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
     isForm && allowShowDetail && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       ModalDetail,
       {
@@ -16052,17 +16051,14 @@ var AvatarField = (props) => {
         place: "top-start"
       }
     ),
-    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
+    allowShowDetail && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      M,
+      {
+        id: `avatar-widget-id-${id}`,
+        place: isForm ? "bottom" : "top",
+        content: fullName,
+        className: "z-20"
+      }
     ),
     avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "img",
@@ -21439,7 +21435,7 @@ function useFloating2(options2) {
 }
 
 // node_modules/react-datepicker/dist/index.es.js
-var import_react_dom7 = __toESM(require("react-dom"));
+var import_react_dom6 = __toESM(require("react-dom"));
 var _extendStatics = function extendStatics(d, b2) {
   _extendStatics = Object.setPrototypeOf || {
     __proto__: []
@@ -24682,7 +24678,7 @@ var Portal = (
       }
     };
     Portal2.prototype.render = function() {
-      return import_react_dom7.default.createPortal(this.props.children, this.el);
+      return import_react_dom6.default.createPortal(this.props.children, this.el);
     };
     return Portal2;
   }(import_react45.Component)
@@ -27250,7 +27246,7 @@ function _taggedTemplateLiteral(e3, t3) {
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
 var import_react51 = require("react");
-var import_react_dom8 = require("react-dom");
+var import_react_dom7 = require("react-dom");
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 var import_react49 = require("react");
@@ -27753,7 +27749,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), innerProps), children);
   return jsx83(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /* @__PURE__ */ (0, import_react_dom8.createPortal)(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /* @__PURE__ */ (0, import_react_dom7.createPortal)(menuWrapper, appendTo) : menuWrapper);
 };
 var containerCSS = function containerCSS2(_ref3) {
   var isDisabled = _ref3.isDisabled, isRtl = _ref3.isRtl;
@@ -30646,7 +30642,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_dom9 = require("react-dom");
+var import_react_dom8 = require("react-dom");
 var StateManagedSelect = /* @__PURE__ */ (0, import_react54.forwardRef)(function(props, ref) {
   var baseSelectProps = useStateManager(props);
   return /* @__PURE__ */ React14.createElement(Select, _extends({
@@ -31265,7 +31261,7 @@ var FloatField = (props) => {
           } else if (value === null || value === void 0) {
             setInputValue("");
           }
-        }, [value, name2, clearErrors, propValue, inputValue]);
+        }, [value, name2, clearErrors, propValue]);
         const isDirtyRef = (0, import_react58.useRef)(false);
         const inputRef = (0, import_react58.useRef)(null);
         const lastCommittedValueRef = (0, import_react58.useRef)(null);
@@ -32596,7 +32592,7 @@ var StatusDropdownField = (props) => {
 };
 
 // src/widgets/basic/many2many-field/many2many.tsx
-var import_react_dom10 = require("react-dom");
+var import_react_dom9 = require("react-dom");
 var import_react66 = require("react");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 var Many2ManyField = (props) => {
@@ -32671,7 +32667,7 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return (0, import_react_dom10.createPortal)(
+  return (0, import_react_dom9.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 Fragment33 = REACT_FRAGMENT_TYPE;
+        var Fragment34 = 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 = Fragment33;
+        exports.Fragment = Fragment34;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal2;
@@ -15953,8 +15953,7 @@ var VideoPlayer = ({ src }) => {
 };
 
 // src/widgets/basic/avatar-field/avatar.tsx
-import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
 var AvatarField = (props) => {
   const {
     isForm = false,
@@ -15978,7 +15977,7 @@ var AvatarField = (props) => {
     color: textColor,
     fontSize: `${size4 / 2.5}px`
   };
-  return /* @__PURE__ */ jsxs48("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsxs48(Fragment15, { children: [
     isForm && allowShowDetail && /* @__PURE__ */ jsx73(
       ModalDetail,
       {
@@ -15990,17 +15989,14 @@ var AvatarField = (props) => {
         place: "top-start"
       }
     ),
-    allowShowDetail && createPortal4(
-      /* @__PURE__ */ jsx73(
-        M,
-        {
-          id: `avatar-widget-id-${id}`,
-          place: isForm ? "bottom" : "top",
-          content: fullName,
-          className: "z-20"
-        }
-      ),
-      document.body
+    allowShowDetail && /* @__PURE__ */ jsx73(
+      M,
+      {
+        id: `avatar-widget-id-${id}`,
+        place: isForm ? "bottom" : "top",
+        content: fullName,
+        className: "z-20"
+      }
     ),
     avatarSrc ? /* @__PURE__ */ jsx73(
       "img",
@@ -16024,7 +16020,7 @@ var AvatarField = (props) => {
 
 // src/widgets/basic/binary-field/binary.tsx
 import { useEffect as useEffect11, useState as useState11 } from "react";
-import { Fragment as Fragment15, jsx as jsx74, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx74, jsxs as jsxs49 } from "react/jsx-runtime";
 var BinaryField = (props) => {
   const {
     name: name2,
@@ -16150,7 +16146,7 @@ var BinaryField = (props) => {
       },
       render: ({ field, fieldState: { error: error2 } }) => {
         const hasFile = !!fileInfo;
-        return /* @__PURE__ */ jsxs49(Fragment15, { children: [
+        return /* @__PURE__ */ jsxs49(Fragment16, { children: [
           /* @__PURE__ */ jsx74(
             "div",
             {
@@ -16365,7 +16361,7 @@ var ButtonBadgeField = (props) => {
 };
 
 // src/widgets/basic/button-field/button.tsx
-import { Fragment as Fragment16, jsx as jsx76, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx76, jsxs as jsxs50 } from "react/jsx-runtime";
 var ButtonField = (props) => {
   const {
     func,
@@ -16376,7 +16372,7 @@ var ButtonField = (props) => {
     type = "submit"
   } = props;
   const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsx76(Fragment16, { children: !loading ? /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx76(Fragment17, { children: !loading ? /* @__PURE__ */ jsx76(
     "button",
     {
       type,
@@ -16402,7 +16398,7 @@ var ButtonField = (props) => {
 
 // src/widgets/basic/char-field/char.tsx
 import { useEffect as useEffect12, useMemo as useMemo4 } from "react";
-import { Fragment as Fragment17, jsx as jsx77, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx77, jsxs as jsxs51 } from "react/jsx-runtime";
 var WIDGET_AUTO_COMPUTE_DEPEND = "auto_compute_depend_field";
 var CharField = (props) => {
   const {
@@ -16486,7 +16482,7 @@ var CharField = (props) => {
           }
           return "";
         }, [widget, formValues]);
-        return /* @__PURE__ */ jsxs51(Fragment17, { children: [
+        return /* @__PURE__ */ jsxs51(Fragment18, { children: [
           /* @__PURE__ */ jsx77(
             "input",
             {
@@ -16548,7 +16544,7 @@ var CharField = (props) => {
                 `
             }
           ),
-          isEditTable ? /* @__PURE__ */ jsx77(Fragment17, {}) : /* @__PURE__ */ jsx77(Fragment17, { children: error2 && /* @__PURE__ */ jsx77("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message }) })
+          isEditTable ? /* @__PURE__ */ jsx77(Fragment18, {}) : /* @__PURE__ */ jsx77(Fragment18, { children: error2 && /* @__PURE__ */ jsx77("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message }) })
         ] });
       }
     }
@@ -16630,7 +16626,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 Fragment18, jsx as jsx79, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx79, jsxs as jsxs52 } from "react/jsx-runtime";
 var ColorWrapper = (props) => {
   const {
     colors: colors2,
@@ -16681,7 +16677,7 @@ var ColorWrapper = (props) => {
         content: i18n_default.t(color?.name)
       }
     )
-  ] }, color?.id)) }) : /* @__PURE__ */ jsxs52(Fragment18, { children: [
+  ] }, color?.id)) }) : /* @__PURE__ */ jsxs52(Fragment19, { children: [
     /* @__PURE__ */ jsx79(
       "button",
       {
@@ -20781,7 +20777,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 Fragment19 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs54, Fragment as Fragment20 } from "react/jsx-runtime";
 import * as ReactDOM2 from "react-dom";
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
@@ -25855,7 +25851,7 @@ function _toConsumableArray(r4) {
 
 // node_modules/react-select/dist/Select-ef7c0426.esm.js
 import * as React13 from "react";
-import { useMemo as useMemo8, Fragment as Fragment22, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect17, Component as Component2 } from "react";
+import { useMemo as useMemo8, Fragment as Fragment23, 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";
@@ -27188,7 +27184,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 createPortal6 } from "react-dom";
+import { createPortal as createPortal5 } from "react-dom";
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 import { useLayoutEffect as useLayoutEffect4 } from "react";
@@ -27691,7 +27687,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), innerProps), children);
   return jsx83(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /* @__PURE__ */ createPortal6(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /* @__PURE__ */ createPortal5(menuWrapper, appendTo) : menuWrapper);
 };
 var containerCSS = function containerCSS2(_ref3) {
   var isDisabled = _ref3.isDisabled, isRtl = _ref3.isRtl;
@@ -28420,7 +28416,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx83(Fragment22, null, jsx83("span", {
+  var ScreenReaderText = jsx83(Fragment23, null, jsx83("span", {
     id: "aria-selection"
   }, ariaSelected), jsx83("span", {
     id: "aria-focused"
@@ -28429,7 +28425,7 @@ var LiveRegion = function LiveRegion2(props) {
   }, ariaResults), jsx83("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx83(Fragment22, null, jsx83(A11yText$1, {
+  return jsx83(Fragment23, null, jsx83(A11yText$1, {
     id
   }, isInitialFocus && ScreenReaderText), jsx83(A11yText$1, {
     "aria-live": ariaLive,
@@ -28986,7 +28982,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx83(Fragment22, null, lockEnabled && jsx83("div", {
+  return jsx83(Fragment23, null, lockEnabled && jsx83("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -30595,7 +30591,7 @@ var StateManagedSelect$1 = StateManagedSelect;
 
 // src/widgets/basic/date-field/date.tsx
 var import_moment2 = __toESM(require_moment());
-import { Fragment as Fragment23, jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx85, jsxs as jsxs55 } from "react/jsx-runtime";
 var DateField = (props) => {
   const {
     name: name2,
@@ -30666,7 +30662,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(Fragment23, { children: [
+          return /* @__PURE__ */ jsxs55(Fragment24, { children: [
             /* @__PURE__ */ jsx85(
               DatePicker,
               {
@@ -30950,7 +30946,7 @@ var DropdownField = (props) => {
 };
 
 // src/widgets/basic/fee-field/fee.tsx
-import { Fragment as Fragment24, jsx as jsx89, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx89, jsxs as jsxs59 } from "react/jsx-runtime";
 var FeeField = (props) => {
   const { value, formValues } = props;
   const { t: t3 } = useI18n();
@@ -30961,10 +30957,10 @@ var FeeField = (props) => {
     )
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
-  return /* @__PURE__ */ jsxs59(Fragment24, { children: [
+  return /* @__PURE__ */ jsxs59(Fragment25, { children: [
     value?.subtotals?.map((sub) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ jsxs59(Fragment24, { children: [
+        return /* @__PURE__ */ jsxs59(Fragment25, { 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,
@@ -31157,7 +31153,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 Fragment25, jsx as jsx91, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx91, jsxs as jsxs61 } from "react/jsx-runtime";
 var FloatField = (props) => {
   const {
     name: name2,
@@ -31203,7 +31199,7 @@ var FloatField = (props) => {
           } else if (value === null || value === void 0) {
             setInputValue("");
           }
-        }, [value, name2, clearErrors, propValue, inputValue]);
+        }, [value, name2, clearErrors, propValue]);
         const isDirtyRef = useRef16(false);
         const inputRef = useRef16(null);
         const lastCommittedValueRef = useRef16(null);
@@ -31284,7 +31280,7 @@ var FloatField = (props) => {
           }
           isDirtyRef.current = false;
         };
-        return /* @__PURE__ */ jsxs61(Fragment25, { children: [
+        return /* @__PURE__ */ jsxs61(Fragment26, { children: [
           /* @__PURE__ */ jsx91(
             "input",
             {
@@ -31314,7 +31310,7 @@ var FloatField = (props) => {
 
 // src/widgets/basic/float-time-field/float-time.tsx
 import { useState as useState20 } from "react";
-import { Fragment as Fragment26, jsx as jsx92, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx92, jsxs as jsxs62 } from "react/jsx-runtime";
 var FloatTimeField = (props) => {
   const {
     name: name2,
@@ -31394,7 +31390,7 @@ var FloatTimeField = (props) => {
           }
           onBlur();
         };
-        return /* @__PURE__ */ jsxs62(Fragment26, { children: [
+        return /* @__PURE__ */ jsxs62(Fragment27, { children: [
           /* @__PURE__ */ jsx92(
             "input",
             {
@@ -31504,11 +31500,11 @@ var ImageField = (props) => {
 import React16, { useEffect as useEffect22, useMemo as useMemo10 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
-import { Fragment as Fragment27, jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment28, 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(Fragment27, {});
+    return /* @__PURE__ */ jsx95(Fragment28, {});
   }
   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(
@@ -31783,7 +31779,7 @@ var Many2ManyTagField = (props) => {
 
 // src/widgets/basic/monetary-field/monetary.tsx
 import { useEffect as useEffect23 } from "react";
-import { Fragment as Fragment28, jsx as jsx97, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx97, jsxs as jsxs65 } from "react/jsx-runtime";
 var MonetaryField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -31841,7 +31837,7 @@ var MonetaryField = (props) => {
             clearErrors(name2);
           }
         }, [value2]);
-        return /* @__PURE__ */ jsxs65(Fragment28, { children: [
+        return /* @__PURE__ */ jsxs65(Fragment29, { children: [
           /* @__PURE__ */ jsx97(
             "input",
             {
@@ -32103,7 +32099,7 @@ var RemainingDaysField = (props) => {
 };
 
 // src/widgets/basic/select-dropdown-field/select-dropdown.tsx
-import { Fragment as Fragment29, jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx103, jsxs as jsxs69 } from "react/jsx-runtime";
 var SelectDropdownField = (props) => {
   const { t: t3 } = useI18n();
   const {
@@ -32154,7 +32150,7 @@ var SelectDropdownField = (props) => {
             value: defaultValue || null,
             required: !invisible && required
           };
-          return /* @__PURE__ */ jsxs69(Fragment29, { children: [
+          return /* @__PURE__ */ jsxs69(Fragment30, { children: [
             /* @__PURE__ */ jsx103("div", { className: "group", children: /* @__PURE__ */ jsx103(
               StateManagedSelect$1,
               {
@@ -32336,7 +32332,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 Fragment30, jsx as jsx106, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx106, jsxs as jsxs71 } from "react/jsx-runtime";
 var IntegerField = (props) => {
   const {
     name: name2,
@@ -32435,7 +32431,7 @@ var IntegerField = (props) => {
           inputRef.current?.blur();
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs71(Fragment30, { children: [
+        return /* @__PURE__ */ jsxs71(Fragment31, { children: [
           /* @__PURE__ */ jsx106(
             "input",
             {
@@ -32534,7 +32530,7 @@ var StatusDropdownField = (props) => {
 };
 
 // src/widgets/basic/many2many-field/many2many.tsx
-import { createPortal as createPortal7 } from "react-dom";
+import { createPortal as createPortal6 } from "react-dom";
 import { useEffect as useEffect27 } from "react";
 import { jsx as jsx108, jsxs as jsxs73 } from "react/jsx-runtime";
 var Many2ManyField = (props) => {
@@ -32609,7 +32605,7 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return createPortal7(
+  return createPortal6(
     /* @__PURE__ */ jsxs73(
       "div",
       {
@@ -32816,7 +32812,7 @@ var Many2ManyField = (props) => {
 
 // src/widgets/basic/many2one-field/many2one.tsx
 import React18, { useEffect as useEffect28 } from "react";
-import { Fragment as Fragment31, jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
 var CustomMenuList2 = (props) => {
   const { t: t3 } = useI18n();
   const { options: options2, children, selectProps } = props;
@@ -32867,7 +32863,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(Fragment31, { children: [
+    return /* @__PURE__ */ jsxs74(Fragment32, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
         model: options2?.model ?? relation,
@@ -32885,7 +32881,7 @@ var Many2OneField = (props) => {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs74(Fragment31, { children: [
+  return /* @__PURE__ */ jsxs74(Fragment32, { children: [
     allowShowDetail && renderDetail({
       idToolTip: String(name2),
       model: options2?.model ?? relation,
@@ -33118,7 +33114,7 @@ var StatusbarDurationField = (props) => {
 
 // src/widgets/basic/status-bar-field/option/option.tsx
 import { useMemo as useMemo11 } from "react";
-import { Fragment as Fragment32, jsx as jsx111, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx111, jsxs as jsxs76 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = useMemo11(() => selection, [selection]);
@@ -33134,7 +33130,7 @@ var StatusBarOptionField = (props) => {
         flexWrap: "wrap"
       },
       children: memoizedStatusOptions?.map((option, index4) => {
-        return /* @__PURE__ */ jsxs76(Fragment32, { children: [
+        return /* @__PURE__ */ jsxs76(Fragment33, { children: [
           /* @__PURE__ */ jsxs76(
             "div",
             {

package/package.json

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