@fctc/sme-widget-ui 2.2.9 → 2.3.1

package/dist/index.js

@@ -11128,98 +11128,66 @@ var TableBody = (props) => {
 };
 
 // src/widgets/advanced/table/table-filter.tsx
-var import_react15 = require("react");
-var import_react_dom = require("react-dom");
+var import_react15 = require("@headlessui/react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var TableFilter = ({ columns, onToggleColumnOptional }) => {
-  const [openTableFilter, setOpenTableFilter] = (0, import_react15.useState)();
-  const [filterPosition, setFilterPosition] = (0, import_react15.useState)(null);
-  const filterPopupRef = (0, import_react15.useRef)(null);
-  const filterRef = useClickOutside({
-    handler: () => {
-      if (openTableFilter) {
-        setOpenTableFilter(false);
-      }
-    },
-    refs: [filterPopupRef]
-  });
-  (0, import_react15.useEffect)(() => {
-    const updatePosition = () => {
-      if (filterRef.current && openTableFilter) {
-        const rect = filterRef.current.getBoundingClientRect();
-        setFilterPosition({
-          top: rect.bottom + window.scrollY,
-          left: rect.left + window.scrollX,
-          right: window.innerWidth - rect.right
-        });
-      }
-    };
-    updatePosition();
-    window.addEventListener("scroll", updatePosition);
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      window.removeEventListener("scroll", updatePosition);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [filterRef, openTableFilter]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
-      ref: filterRef,
       style: {
-        transform: "translateY(-50%)"
+        transform: "translateY(-50%)",
+        right: 0
       },
-      className: "w-fit absolute top-[50%] translate-y-[-50%] right-[10px] ms-auto z-[32] bg-white",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      className: "w-fit absolute top-[50%] translate-y-[-50%] right-[0px] ms-auto z-[32] ",
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react15.Popover, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react15.PopoverButton, { className: "p-2 rounded-lg cursor-pointer outline-none", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "button",
           {
             type: "button",
             className: "bg-white size-8 p-1 rounded-lg cursor-pointer flex items-center justify-center",
-            onClick: () => {
-              setOpenTableFilter(!openTableFilter);
-            },
             children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FilterColumnIcon, {})
           }
-        ),
-        filterPosition && openTableFilter && (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            "div",
-            {
-              ref: filterPopupRef,
-              style: {
-                top: filterPosition?.top,
-                right: filterPosition?.right,
-                zIndex: 9999
-              },
-              className: "absolute z-[9999] flex w-[250px] h-auto max-h-[800%] overflow-auto flex-col gap-[16px] rounded-[8px] bg-[#fff] px-[24px] py-[16px] shadow-md",
-              children: columns?.filter((val) => val?.optional !== void 0)?.map((item) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                    "input",
-                    {
-                      type: "checkbox",
-                      id: `${item.name}`,
-                      onChange: () => onToggleColumnOptional(item),
-                      checked: item.optional !== "hide",
-                      className: "cursor-pointer"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                    "label",
-                    {
-                      htmlFor: `${item.name}`,
-                      className: "flex items-center gap-[8px]",
-                      children: item.field.string
-                    }
-                  )
-                ] }, item.name);
-              })
-            }
-          ),
-          document.body
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          import_react15.PopoverPanel,
+          {
+            transition: true,
+            anchor: "bottom end",
+            className: "shadow-lg z-[99] gap-2 bg-white rounded-lg transition duration-200 ease-in-out border border-stroke-disabled",
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              "div",
+              {
+                style: {
+                  zIndex: 9999
+                },
+                className: "flex w-[250px] h-auto overflow-auto flex-col gap-[16px] rounded-[8px] bg-[#fff] px-[24px] py-[16px] shadow-md",
+                children: columns?.filter((val) => val?.optional !== void 0)?.map((item) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        id: `${item.name}`,
+                        onChange: () => onToggleColumnOptional(item),
+                        checked: item.optional !== "hide",
+                        className: "cursor-pointer"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                      "label",
+                      {
+                        htmlFor: `${item.name}`,
+                        className: "flex items-center gap-[8px]",
+                        children: item.field.string
+                      }
+                    )
+                  ] }, item.name);
+                })
+              }
+            )
+          }
         )
-      ]
+      ] })
     }
   );
 };
@@ -13082,7 +13050,7 @@ var M = import_react16.default.forwardRef(({ id: t3, anchorId: l2, anchorSelect:
 });
 
 // src/widgets/advanced/table/table-head.tsx
-var import_react_dom2 = require("react-dom");
+var import_react_dom = require("react-dom");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var TableHead = (props) => {
   const {
@@ -13130,7 +13098,7 @@ var TableHead = (props) => {
               children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "cursor-pointer flex items-center gap-[4px] w-full group relative", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "truncate line-clamp-1 w-fit", children: col.title }),
                 col?.field?.help && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-                  (0, import_react_dom2.createPortal)(
+                  (0, import_react_dom.createPortal)(
                     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                       M,
                       {
@@ -16296,7 +16264,7 @@ var ModalConfirm = ({
 
 // src/widgets/common/modal-detail.tsx
 var import_react24 = require("react");
-var import_react_dom3 = require("react-dom");
+var import_react_dom2 = require("react-dom");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var ModalDetail = ({
   idToolTip,
@@ -16319,7 +16287,7 @@ var ModalDetail = ({
     sessionStorage.setItem("actionData", JSON.stringify(actionData));
     window.location.href = `/form/menu?model=${model}&id=${idForm}`;
   };
-  return (0, import_react_dom3.createPortal)(
+  return (0, import_react_dom2.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: showModalDetail && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[100]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute inset-0 overflow-auto flex flex-col justify-center items-center px-5", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "relative z-[1] max-w-full p-4 flex flex-col gap-4 w-[1000px] transform rounded-3xl bg-[#FFF] h-[90%]", children: [
@@ -22214,7 +22182,7 @@ function useFloating2(options2) {
 }
 
 // node_modules/react-datepicker/dist/index.es.js
-var import_react_dom6 = __toESM(require("react-dom"));
+var import_react_dom5 = __toESM(require("react-dom"));
 var _extendStatics = function extendStatics(d, b2) {
   _extendStatics = Object.setPrototypeOf || {
     __proto__: []
@@ -25457,7 +25425,7 @@ var Portal = (
       }
     };
     Portal2.prototype.render = function() {
-      return import_react_dom6.default.createPortal(this.props.children, this.el);
+      return import_react_dom5.default.createPortal(this.props.children, this.el);
     };
     return Portal2;
   }(import_react45.Component)
@@ -28025,7 +27993,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_dom6 = require("react-dom");
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 var import_react49 = require("react");
@@ -28528,7 +28496,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), innerProps), children);
   return jsx84(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /* @__PURE__ */ (0, import_react_dom7.createPortal)(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /* @__PURE__ */ (0, import_react_dom6.createPortal)(menuWrapper, appendTo) : menuWrapper);
 };
 var containerCSS = function containerCSS2(_ref3) {
   var isDisabled = _ref3.isDisabled, isRtl = _ref3.isRtl;
@@ -31421,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_dom8 = require("react-dom");
+var import_react_dom7 = require("react-dom");
 var StateManagedSelect = /* @__PURE__ */ (0, import_react54.forwardRef)(function(props, ref) {
   var baseSelectProps = useStateManager(props);
   return /* @__PURE__ */ React14.createElement(Select, _extends({
@@ -33374,7 +33342,7 @@ var StatusDropdownField = (props) => {
 };
 
 // src/widgets/basic/many2many-field/many2many.tsx
-var import_react_dom9 = require("react-dom");
+var import_react_dom8 = require("react-dom");
 var import_react66 = require("react");
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var Many2ManyField = (props) => {
@@ -33449,7 +33417,7 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return (0, import_react_dom9.createPortal)(
+  return (0, import_react_dom8.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
       "div",
       {