@fctc/sme-widget-ui 2.0.5 → 2.0.7

package/dist/index.js

@@ -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 {
@@ -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",
@@ -17020,7 +17024,7 @@ var BinaryField = (props) => {
                 "label",
                 {
                   htmlFor: inputId,
-                  className: `relative p-2 flex cursor-pointer items-center justify-center rounded-lg border border-gray-300 hover:border-primary bg-white transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "h-32 w-32" : "w-fit h-fit "}`,
+                  className: `relative p-2 flex cursor-pointer items-center justify-center rounded-lg  transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "h-32 w-32 border border-gray-300 hover:border-primary bg-white" : "w-fit h-fit "}`,
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                       "input",
@@ -17046,10 +17050,11 @@ var BinaryField = (props) => {
                     /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                       "div",
                       {
-                        className: "absolute size-8 bg-white rounded-lg flex justify-center items-center z-20",
+                        className: " size-8 bg-white rounded-lg flex justify-center items-center z-20",
                         style: {
-                          bottom: "-8px",
-                          left: "-8px",
+                          position: onlyImage ? "absolute" : "relative",
+                          bottom: onlyImage ? "-8px" : "auto",
+                          left: onlyImage ? "-8px" : "auto",
                           boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)",
                           width: "2rem",
                           height: "2rem",
@@ -22181,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__: []
@@ -25424,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)
@@ -27992,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");
@@ -28495,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;
@@ -31388,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({
@@ -33338,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) => {
@@ -33413,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

@@ -16637,6 +16637,7 @@ var VideoPlayer = ({ src }) => {
 };
 
 // src/widgets/basic/avatar-field/avatar.tsx
+import { createPortal as createPortal4 } from "react-dom";
 import { Fragment as Fragment15, jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
 var AvatarField = (props) => {
   const {
@@ -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",
@@ -16895,7 +16899,7 @@ var BinaryField = (props) => {
                 "label",
                 {
                   htmlFor: inputId,
-                  className: `relative p-2 flex cursor-pointer items-center justify-center rounded-lg border border-gray-300 hover:border-primary bg-white transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "h-32 w-32" : "w-fit h-fit "}`,
+                  className: `relative p-2 flex cursor-pointer items-center justify-center rounded-lg  transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "h-32 w-32 border border-gray-300 hover:border-primary bg-white" : "w-fit h-fit "}`,
                   children: [
                     /* @__PURE__ */ jsx74(
                       "input",
@@ -16921,10 +16925,11 @@ var BinaryField = (props) => {
                     /* @__PURE__ */ jsx74(
                       "div",
                       {
-                        className: "absolute size-8 bg-white rounded-lg flex justify-center items-center z-20",
+                        className: " size-8 bg-white rounded-lg flex justify-center items-center z-20",
                         style: {
-                          bottom: "-8px",
-                          left: "-8px",
+                          position: onlyImage ? "absolute" : "relative",
+                          bottom: onlyImage ? "-8px" : "auto",
+                          left: onlyImage ? "-8px" : "auto",
                           boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)",
                           width: "2rem",
                           height: "2rem",
@@ -27867,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";
@@ -28370,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;
@@ -33213,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) => {
@@ -33288,7 +33293,7 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return createPortal6(
+  return createPortal7(
     /* @__PURE__ */ jsxs73(
       "div",
       {

package/dist/widgets.js

@@ -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 {
@@ -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",
@@ -16273,7 +16277,7 @@ var BinaryField = (props) => {
                 "label",
                 {
                   htmlFor: inputId,
-                  className: `relative p-2 flex cursor-pointer items-center justify-center rounded-lg border border-gray-300 hover:border-primary bg-white transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "h-32 w-32" : "w-fit h-fit "}`,
+                  className: `relative p-2 flex cursor-pointer items-center justify-center rounded-lg  transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "h-32 w-32 border border-gray-300 hover:border-primary bg-white" : "w-fit h-fit "}`,
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                       "input",
@@ -16299,10 +16303,11 @@ var BinaryField = (props) => {
                     /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                       "div",
                       {
-                        className: "absolute size-8 bg-white rounded-lg flex justify-center items-center z-20",
+                        className: " size-8 bg-white rounded-lg flex justify-center items-center z-20",
                         style: {
-                          bottom: "-8px",
-                          left: "-8px",
+                          position: onlyImage ? "absolute" : "relative",
+                          bottom: onlyImage ? "-8px" : "auto",
+                          left: onlyImage ? "-8px" : "auto",
                           boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)",
                           width: "2rem",
                           height: "2rem",
@@ -21434,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__: []
@@ -24677,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)
@@ -27245,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");
@@ -27748,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;
@@ -30641,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({
@@ -32591,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) => {
@@ -32666,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

@@ -15953,6 +15953,7 @@ var VideoPlayer = ({ src }) => {
 };
 
 // src/widgets/basic/avatar-field/avatar.tsx
+import { createPortal as createPortal4 } from "react-dom";
 import { Fragment as Fragment15, jsx as jsx73, jsxs as jsxs48 } from "react/jsx-runtime";
 var AvatarField = (props) => {
   const {
@@ -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",
@@ -16211,7 +16215,7 @@ var BinaryField = (props) => {
                 "label",
                 {
                   htmlFor: inputId,
-                  className: `relative p-2 flex cursor-pointer items-center justify-center rounded-lg border border-gray-300 hover:border-primary bg-white transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "h-32 w-32" : "w-fit h-fit "}`,
+                  className: `relative p-2 flex cursor-pointer items-center justify-center rounded-lg  transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "h-32 w-32 border border-gray-300 hover:border-primary bg-white" : "w-fit h-fit "}`,
                   children: [
                     /* @__PURE__ */ jsx74(
                       "input",
@@ -16237,10 +16241,11 @@ var BinaryField = (props) => {
                     /* @__PURE__ */ jsx74(
                       "div",
                       {
-                        className: "absolute size-8 bg-white rounded-lg flex justify-center items-center z-20",
+                        className: " size-8 bg-white rounded-lg flex justify-center items-center z-20",
                         style: {
-                          bottom: "-8px",
-                          left: "-8px",
+                          position: onlyImage ? "absolute" : "relative",
+                          bottom: onlyImage ? "-8px" : "auto",
+                          left: onlyImage ? "-8px" : "auto",
                           boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)",
                           width: "2rem",
                           height: "2rem",
@@ -27183,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";
@@ -27686,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;
@@ -32529,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) => {
@@ -32604,7 +32609,7 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return createPortal6(
+  return createPortal7(
     /* @__PURE__ */ jsxs73(
       "div",
       {

package/package.json

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