@fctc/sme-widget-ui 1.5.6 → 1.5.8

package/dist/index.js

@@ -33319,7 +33319,7 @@ var ImageField = (props) => {
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-var import_react58 = require("react");
+var import_react58 = __toESM(require("react"));
 
 // src/widgets/basic/information-field/information.tsx
 var import_jsx_runtime88 = require("react/jsx-runtime");
@@ -33390,6 +33390,26 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
     )
   ] });
 };
+var CustomMenuList = (props) => {
+  const { options: options2, children, selectProps } = props;
+  const { setIsShowModalMany2Many, searchable } = selectProps;
+  const limitedChildren = import_react58.default.Children.toArray(children).slice(0, 10);
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(components.MenuList, { ...props, className: "z-[99]", children: [
+    limitedChildren,
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsShowModalMany2Many(true),
+        className: "searh-more text-primary text-sm text-left w-full italic font-medium py-1 px-3",
+        children: [
+          instance.t("search_more"),
+          "..."
+        ]
+      }
+    )
+  ] });
+};
 var Many2ManyTagField = (props) => {
   const {
     relation,
@@ -33404,10 +33424,15 @@ var Many2ManyTagField = (props) => {
     readonly,
     isEditTable,
     options: options2,
-    customNoOptionsMessage,
-    tranfer,
+    transfer,
     isUser,
-    stringToColor
+    stringToColor,
+    fetchMoreOptions,
+    setInputValue,
+    setDomainObject,
+    domainObject,
+    isFetching,
+    setIsShowModalMany2Many
   } = props;
   const CustomSelect = ({ ...rest }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(StateManagedSelect$1, { relation, ...rest });
@@ -33442,41 +33467,50 @@ var Many2ManyTagField = (props) => {
             clearErrors(name2);
           }
         }, [field.value]);
-        const filteredValue = options2 && options2?.length > 0 && Array.isArray(field.value) ? options2.filter(
-          (option) => field.value.some((item) => item?.id === option.value)
+        const filteredValue = options2 && options2?.length > 0 && Array.isArray(field?.value) ? options2?.filter(
+          (option) => field?.value?.some((item) => item?.id === option?.value)
         ) : options2?.length === 0 && Array.isArray(field?.value) ? field?.value?.map((value2) => ({
           value: value2?.id,
           label: value2?.display_name
         })) : null;
         const handleChange = (selectedOptions) => {
-          const newValue = tranfer(selectedOptions);
+          const newValue = transfer(selectedOptions);
           field.onChange(newValue);
           onChange2?.(name2 ?? "", newValue);
           clearErrors(name2);
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "group", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "group h-full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-            CustomSelect,
+            StateManagedSelect$1,
             {
-              relation,
               options: options2,
-              noOptionsMessage: customNoOptionsMessage,
+              noOptionsMessage: () => instance.t(isFetching ? "loading" : "no-available"),
               isMulti: true,
               isDisabled: readonly,
+              isSearchable: true,
+              isClearable: true,
               menuShouldScrollIntoView: false,
               menuPortalTarget: typeof window !== "undefined" ? document.body : null,
               value: filteredValue,
               onChange: handleChange,
+              onMenuClose: () => {
+                const filteredDomain = [...domainObject ?? []]?.filter(
+                  (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
+                ) || [];
+                setInputValue("");
+                setDomainObject(filteredDomain);
+              },
+              onMenuOpen: fetchMoreOptions,
               menuPlacement: "auto",
               placeholder: readonly ? "" : instance.t("choose_place"),
               classNames: isEditTable ? {
                 valueContainer: () => "overflow-unset !px-0",
-                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-[300px] max-w-[300px] !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "cursor-not-allowed" : ""}`,
+                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-[300px] max-w-[300px] !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
                 dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
                 clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
               } : {
                 valueContainer: () => "overflow-unset !m-0 !p-0",
-                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "cursor-not-allowed"}`,
+                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"}`,
                 singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
                 input: () => "!m-0 !p-0",
                 dropdownIndicator: () => "!m-0 !p-0"
@@ -33524,14 +33558,23 @@ var Many2ManyTagField = (props) => {
                 ),
                 IndicatorSeparator: () => null
               } : {
+                MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+                  CustomMenuList,
+                  {
+                    ...menuListProps,
+                    selectProps: {
+                      ...menuListProps.selectProps,
+                      setIsShowModalMany2Many
+                    }
+                  }
+                ),
                 IndicatorSeparator: () => null,
                 DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(components.DropdownIndicator, { ...props2 })
               },
               required: !invisible && required
-            },
-            field?.value
+            }
           ),
-          isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -34562,7 +34605,7 @@ var Many2ManyField = (props) => {
 // src/widgets/basic/many2one-field/many2one.tsx
 var import_react64 = __toESM(require("react"));
 var import_jsx_runtime102 = require("react/jsx-runtime");
-var CustomMenuList = (props) => {
+var CustomMenuList2 = (props) => {
   const { options: options2, children, selectProps } = props;
   const { setIsShowModalMany2Many, searchable } = selectProps;
   const limitedChildren = import_react64.default.Children.toArray(children).slice(0, 10);
@@ -34734,7 +34777,7 @@ var Many2OneField = (props) => {
                   },
                   components: {
                     MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
-                      CustomMenuList,
+                      CustomMenuList2,
                       {
                         ...menuListProps,
                         selectProps: {

package/dist/index.mjs

@@ -33200,7 +33200,7 @@ var ImageField = (props) => {
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-import { useEffect as useEffect19 } from "react";
+import React16, { useEffect as useEffect19 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
 import { Fragment as Fragment26, jsx as jsx90, jsxs as jsxs61 } from "react/jsx-runtime";
@@ -33271,6 +33271,26 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
     )
   ] });
 };
+var CustomMenuList = (props) => {
+  const { options: options2, children, selectProps } = props;
+  const { setIsShowModalMany2Many, searchable } = selectProps;
+  const limitedChildren = React16.Children.toArray(children).slice(0, 10);
+  return /* @__PURE__ */ jsxs62(components.MenuList, { ...props, className: "z-[99]", children: [
+    limitedChildren,
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs62(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsShowModalMany2Many(true),
+        className: "searh-more text-primary text-sm text-left w-full italic font-medium py-1 px-3",
+        children: [
+          instance.t("search_more"),
+          "..."
+        ]
+      }
+    )
+  ] });
+};
 var Many2ManyTagField = (props) => {
   const {
     relation,
@@ -33285,10 +33305,15 @@ var Many2ManyTagField = (props) => {
     readonly,
     isEditTable,
     options: options2,
-    customNoOptionsMessage,
-    tranfer,
+    transfer,
     isUser,
-    stringToColor
+    stringToColor,
+    fetchMoreOptions,
+    setInputValue,
+    setDomainObject,
+    domainObject,
+    isFetching,
+    setIsShowModalMany2Many
   } = props;
   const CustomSelect = ({ ...rest }) => {
     return /* @__PURE__ */ jsx91(StateManagedSelect$1, { relation, ...rest });
@@ -33323,41 +33348,50 @@ var Many2ManyTagField = (props) => {
             clearErrors(name2);
           }
         }, [field.value]);
-        const filteredValue = options2 && options2?.length > 0 && Array.isArray(field.value) ? options2.filter(
-          (option) => field.value.some((item) => item?.id === option.value)
+        const filteredValue = options2 && options2?.length > 0 && Array.isArray(field?.value) ? options2?.filter(
+          (option) => field?.value?.some((item) => item?.id === option?.value)
         ) : options2?.length === 0 && Array.isArray(field?.value) ? field?.value?.map((value2) => ({
           value: value2?.id,
           label: value2?.display_name
         })) : null;
         const handleChange = (selectedOptions) => {
-          const newValue = tranfer(selectedOptions);
+          const newValue = transfer(selectedOptions);
           field.onChange(newValue);
           onChange2?.(name2 ?? "", newValue);
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs62("div", { className: "group", children: [
+        return /* @__PURE__ */ jsxs62("div", { className: "group h-full", children: [
           /* @__PURE__ */ jsx91(
-            CustomSelect,
+            StateManagedSelect$1,
             {
-              relation,
               options: options2,
-              noOptionsMessage: customNoOptionsMessage,
+              noOptionsMessage: () => instance.t(isFetching ? "loading" : "no-available"),
               isMulti: true,
               isDisabled: readonly,
+              isSearchable: true,
+              isClearable: true,
               menuShouldScrollIntoView: false,
               menuPortalTarget: typeof window !== "undefined" ? document.body : null,
               value: filteredValue,
               onChange: handleChange,
+              onMenuClose: () => {
+                const filteredDomain = [...domainObject ?? []]?.filter(
+                  (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
+                ) || [];
+                setInputValue("");
+                setDomainObject(filteredDomain);
+              },
+              onMenuOpen: fetchMoreOptions,
               menuPlacement: "auto",
               placeholder: readonly ? "" : instance.t("choose_place"),
               classNames: isEditTable ? {
                 valueContainer: () => "overflow-unset !px-0",
-                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-[300px] max-w-[300px] !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "cursor-not-allowed" : ""}`,
+                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-[300px] max-w-[300px] !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
                 dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
                 clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
               } : {
                 valueContainer: () => "overflow-unset !m-0 !p-0",
-                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "cursor-not-allowed"}`,
+                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"}`,
                 singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
                 input: () => "!m-0 !p-0",
                 dropdownIndicator: () => "!m-0 !p-0"
@@ -33405,14 +33439,23 @@ var Many2ManyTagField = (props) => {
                 ),
                 IndicatorSeparator: () => null
               } : {
+                MenuList: (menuListProps) => /* @__PURE__ */ jsx91(
+                  CustomMenuList,
+                  {
+                    ...menuListProps,
+                    selectProps: {
+                      ...menuListProps.selectProps,
+                      setIsShowModalMany2Many
+                    }
+                  }
+                ),
                 IndicatorSeparator: () => null,
                 DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx91(components.DropdownIndicator, { ...props2 })
               },
               required: !invisible && required
-            },
-            field?.value
+            }
           ),
-          isEditTable && error2 && /* @__PURE__ */ jsx91("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          !isEditTable && error2 && /* @__PURE__ */ jsx91("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -33530,7 +33573,7 @@ var PaidBadgedField = () => {
 };
 
 // src/widgets/basic/priority-field/rating-star.tsx
-import React16, { useEffect as useEffect21, useState as useState19 } from "react";
+import React17, { useEffect as useEffect21, useState as useState19 } from "react";
 import { jsx as jsx94, jsxs as jsxs64 } from "react/jsx-runtime";
 var RatingStarField = (props) => {
   const {
@@ -33576,7 +33619,7 @@ var RatingStarField = (props) => {
         const starValue = index4 + 1;
         const fillColor = hover > 0 ? hover >= starValue ? "#f3cc00" : "white" : rating >= starValue ? "#f3cc00" : "white";
         const strokeColor = hover > 0 ? hover >= starValue ? "#f3cc00" : "rgba(73,80,87,0.76)" : rating >= starValue ? "#f3cc00" : "rgba(73,80,87,0.76)";
-        return /* @__PURE__ */ jsxs64(React16.Fragment, { children: [
+        return /* @__PURE__ */ jsxs64(React17.Fragment, { children: [
           /* @__PURE__ */ jsx94(
             "div",
             {
@@ -34441,12 +34484,12 @@ var Many2ManyField = (props) => {
 };
 
 // src/widgets/basic/many2one-field/many2one.tsx
-import React17, { useEffect as useEffect25, useMemo as useMemo9 } from "react";
+import React18, { useEffect as useEffect25, useMemo as useMemo9 } from "react";
 import { Fragment as Fragment30, jsx as jsx104, jsxs as jsxs72 } from "react/jsx-runtime";
-var CustomMenuList = (props) => {
+var CustomMenuList2 = (props) => {
   const { options: options2, children, selectProps } = props;
   const { setIsShowModalMany2Many, searchable } = selectProps;
-  const limitedChildren = React17.Children.toArray(children).slice(0, 10);
+  const limitedChildren = React18.Children.toArray(children).slice(0, 10);
   return /* @__PURE__ */ jsxs72(components.MenuList, { ...props, className: "z-[99]", children: [
     limitedChildren,
     options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs72(
@@ -34615,7 +34658,7 @@ var Many2OneField = (props) => {
                   },
                   components: {
                     MenuList: (menuListProps) => /* @__PURE__ */ jsx104(
-                      CustomMenuList,
+                      CustomMenuList2,
                       {
                         ...menuListProps,
                         selectProps: {

package/dist/widgets.d.mts

@@ -298,9 +298,16 @@ declare const ImageField: (props: IInputFieldProps) => JSX.Element | null;
 interface IMany2ManyTagsProps extends IInputFieldProps {
     options: any[];
     customNoOptionsMessage: any;
-    tranfer: any;
+    transfer: any;
     isUser: any;
     stringToColor?: any;
+    fetchMoreOptions?: any;
+    handleSelectChange?: any;
+    isFetching?: any;
+    domainObject?: any;
+    setIsShowModalMany2Many?: any;
+    setInputValue?: any;
+    setDomainObject?: any;
 }
 
 declare const Many2ManyTagField: (props: IMany2ManyTagsProps) => JSX.Element;

package/dist/widgets.d.ts

@@ -298,9 +298,16 @@ declare const ImageField: (props: IInputFieldProps) => JSX.Element | null;
 interface IMany2ManyTagsProps extends IInputFieldProps {
     options: any[];
     customNoOptionsMessage: any;
-    tranfer: any;
+    transfer: any;
     isUser: any;
     stringToColor?: any;
+    fetchMoreOptions?: any;
+    handleSelectChange?: any;
+    isFetching?: any;
+    domainObject?: any;
+    setIsShowModalMany2Many?: any;
+    setInputValue?: any;
+    setDomainObject?: any;
 }
 
 declare const Many2ManyTagField: (props: IMany2ManyTagsProps) => JSX.Element;

package/dist/widgets.js

@@ -32945,7 +32945,7 @@ var ImageField = (props) => {
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-var import_react58 = require("react");
+var import_react58 = __toESM(require("react"));
 
 // src/widgets/basic/information-field/information.tsx
 var import_jsx_runtime88 = require("react/jsx-runtime");
@@ -33016,6 +33016,26 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
     )
   ] });
 };
+var CustomMenuList = (props) => {
+  const { options: options2, children, selectProps } = props;
+  const { setIsShowModalMany2Many, searchable } = selectProps;
+  const limitedChildren = import_react58.default.Children.toArray(children).slice(0, 10);
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(components.MenuList, { ...props, className: "z-[99]", children: [
+    limitedChildren,
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsShowModalMany2Many(true),
+        className: "searh-more text-primary text-sm text-left w-full italic font-medium py-1 px-3",
+        children: [
+          instance.t("search_more"),
+          "..."
+        ]
+      }
+    )
+  ] });
+};
 var Many2ManyTagField = (props) => {
   const {
     relation,
@@ -33030,10 +33050,15 @@ var Many2ManyTagField = (props) => {
     readonly,
     isEditTable,
     options: options2,
-    customNoOptionsMessage,
-    tranfer,
+    transfer,
     isUser,
-    stringToColor
+    stringToColor,
+    fetchMoreOptions,
+    setInputValue,
+    setDomainObject,
+    domainObject,
+    isFetching,
+    setIsShowModalMany2Many
   } = props;
   const CustomSelect = ({ ...rest }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(StateManagedSelect$1, { relation, ...rest });
@@ -33068,41 +33093,50 @@ var Many2ManyTagField = (props) => {
             clearErrors(name2);
           }
         }, [field.value]);
-        const filteredValue = options2 && options2?.length > 0 && Array.isArray(field.value) ? options2.filter(
-          (option) => field.value.some((item) => item?.id === option.value)
+        const filteredValue = options2 && options2?.length > 0 && Array.isArray(field?.value) ? options2?.filter(
+          (option) => field?.value?.some((item) => item?.id === option?.value)
         ) : options2?.length === 0 && Array.isArray(field?.value) ? field?.value?.map((value2) => ({
           value: value2?.id,
           label: value2?.display_name
         })) : null;
         const handleChange = (selectedOptions) => {
-          const newValue = tranfer(selectedOptions);
+          const newValue = transfer(selectedOptions);
           field.onChange(newValue);
           onChange2?.(name2 ?? "", newValue);
           clearErrors(name2);
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "group", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "group h-full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-            CustomSelect,
+            StateManagedSelect$1,
             {
-              relation,
               options: options2,
-              noOptionsMessage: customNoOptionsMessage,
+              noOptionsMessage: () => instance.t(isFetching ? "loading" : "no-available"),
               isMulti: true,
               isDisabled: readonly,
+              isSearchable: true,
+              isClearable: true,
               menuShouldScrollIntoView: false,
               menuPortalTarget: typeof window !== "undefined" ? document.body : null,
               value: filteredValue,
               onChange: handleChange,
+              onMenuClose: () => {
+                const filteredDomain = [...domainObject ?? []]?.filter(
+                  (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
+                ) || [];
+                setInputValue("");
+                setDomainObject(filteredDomain);
+              },
+              onMenuOpen: fetchMoreOptions,
               menuPlacement: "auto",
               placeholder: readonly ? "" : instance.t("choose_place"),
               classNames: isEditTable ? {
                 valueContainer: () => "overflow-unset !px-0",
-                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-[300px] max-w-[300px] !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "cursor-not-allowed" : ""}`,
+                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-[300px] max-w-[300px] !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
                 dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
                 clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
               } : {
                 valueContainer: () => "overflow-unset !m-0 !p-0",
-                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "cursor-not-allowed"}`,
+                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"}`,
                 singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
                 input: () => "!m-0 !p-0",
                 dropdownIndicator: () => "!m-0 !p-0"
@@ -33150,14 +33184,23 @@ var Many2ManyTagField = (props) => {
                 ),
                 IndicatorSeparator: () => null
               } : {
+                MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+                  CustomMenuList,
+                  {
+                    ...menuListProps,
+                    selectProps: {
+                      ...menuListProps.selectProps,
+                      setIsShowModalMany2Many
+                    }
+                  }
+                ),
                 IndicatorSeparator: () => null,
                 DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(components.DropdownIndicator, { ...props2 })
               },
               required: !invisible && required
-            },
-            field?.value
+            }
           ),
-          isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -34188,7 +34231,7 @@ var Many2ManyField = (props) => {
 // src/widgets/basic/many2one-field/many2one.tsx
 var import_react64 = __toESM(require("react"));
 var import_jsx_runtime102 = require("react/jsx-runtime");
-var CustomMenuList = (props) => {
+var CustomMenuList2 = (props) => {
   const { options: options2, children, selectProps } = props;
   const { setIsShowModalMany2Many, searchable } = selectProps;
   const limitedChildren = import_react64.default.Children.toArray(children).slice(0, 10);
@@ -34360,7 +34403,7 @@ var Many2OneField = (props) => {
                   },
                   components: {
                     MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
-                      CustomMenuList,
+                      CustomMenuList2,
                       {
                         ...menuListProps,
                         selectProps: {

package/dist/widgets.mjs

@@ -32882,7 +32882,7 @@ var ImageField = (props) => {
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-import { useEffect as useEffect19 } from "react";
+import React16, { useEffect as useEffect19 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
 import { Fragment as Fragment26, jsx as jsx90, jsxs as jsxs61 } from "react/jsx-runtime";
@@ -32953,6 +32953,26 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
     )
   ] });
 };
+var CustomMenuList = (props) => {
+  const { options: options2, children, selectProps } = props;
+  const { setIsShowModalMany2Many, searchable } = selectProps;
+  const limitedChildren = React16.Children.toArray(children).slice(0, 10);
+  return /* @__PURE__ */ jsxs62(components.MenuList, { ...props, className: "z-[99]", children: [
+    limitedChildren,
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs62(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsShowModalMany2Many(true),
+        className: "searh-more text-primary text-sm text-left w-full italic font-medium py-1 px-3",
+        children: [
+          instance.t("search_more"),
+          "..."
+        ]
+      }
+    )
+  ] });
+};
 var Many2ManyTagField = (props) => {
   const {
     relation,
@@ -32967,10 +32987,15 @@ var Many2ManyTagField = (props) => {
     readonly,
     isEditTable,
     options: options2,
-    customNoOptionsMessage,
-    tranfer,
+    transfer,
     isUser,
-    stringToColor
+    stringToColor,
+    fetchMoreOptions,
+    setInputValue,
+    setDomainObject,
+    domainObject,
+    isFetching,
+    setIsShowModalMany2Many
   } = props;
   const CustomSelect = ({ ...rest }) => {
     return /* @__PURE__ */ jsx91(StateManagedSelect$1, { relation, ...rest });
@@ -33005,41 +33030,50 @@ var Many2ManyTagField = (props) => {
             clearErrors(name2);
           }
         }, [field.value]);
-        const filteredValue = options2 && options2?.length > 0 && Array.isArray(field.value) ? options2.filter(
-          (option) => field.value.some((item) => item?.id === option.value)
+        const filteredValue = options2 && options2?.length > 0 && Array.isArray(field?.value) ? options2?.filter(
+          (option) => field?.value?.some((item) => item?.id === option?.value)
         ) : options2?.length === 0 && Array.isArray(field?.value) ? field?.value?.map((value2) => ({
           value: value2?.id,
           label: value2?.display_name
         })) : null;
         const handleChange = (selectedOptions) => {
-          const newValue = tranfer(selectedOptions);
+          const newValue = transfer(selectedOptions);
           field.onChange(newValue);
           onChange2?.(name2 ?? "", newValue);
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs62("div", { className: "group", children: [
+        return /* @__PURE__ */ jsxs62("div", { className: "group h-full", children: [
           /* @__PURE__ */ jsx91(
-            CustomSelect,
+            StateManagedSelect$1,
             {
-              relation,
               options: options2,
-              noOptionsMessage: customNoOptionsMessage,
+              noOptionsMessage: () => instance.t(isFetching ? "loading" : "no-available"),
               isMulti: true,
               isDisabled: readonly,
+              isSearchable: true,
+              isClearable: true,
               menuShouldScrollIntoView: false,
               menuPortalTarget: typeof window !== "undefined" ? document.body : null,
               value: filteredValue,
               onChange: handleChange,
+              onMenuClose: () => {
+                const filteredDomain = [...domainObject ?? []]?.filter(
+                  (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
+                ) || [];
+                setInputValue("");
+                setDomainObject(filteredDomain);
+              },
+              onMenuOpen: fetchMoreOptions,
               menuPlacement: "auto",
               placeholder: readonly ? "" : instance.t("choose_place"),
               classNames: isEditTable ? {
                 valueContainer: () => "overflow-unset !px-0",
-                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-[300px] max-w-[300px] !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "cursor-not-allowed" : ""}`,
+                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-[300px] max-w-[300px] !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
                 dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
                 clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
               } : {
                 valueContainer: () => "overflow-unset !m-0 !p-0",
-                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "cursor-not-allowed"}`,
+                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"}`,
                 singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
                 input: () => "!m-0 !p-0",
                 dropdownIndicator: () => "!m-0 !p-0"
@@ -33087,14 +33121,23 @@ var Many2ManyTagField = (props) => {
                 ),
                 IndicatorSeparator: () => null
               } : {
+                MenuList: (menuListProps) => /* @__PURE__ */ jsx91(
+                  CustomMenuList,
+                  {
+                    ...menuListProps,
+                    selectProps: {
+                      ...menuListProps.selectProps,
+                      setIsShowModalMany2Many
+                    }
+                  }
+                ),
                 IndicatorSeparator: () => null,
                 DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx91(components.DropdownIndicator, { ...props2 })
               },
               required: !invisible && required
-            },
-            field?.value
+            }
           ),
-          isEditTable && error2 && /* @__PURE__ */ jsx91("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+          !isEditTable && error2 && /* @__PURE__ */ jsx91("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
         ] });
       }
     }
@@ -33212,7 +33255,7 @@ var PaidBadgedField = () => {
 };
 
 // src/widgets/basic/priority-field/rating-star.tsx
-import React16, { useEffect as useEffect21, useState as useState19 } from "react";
+import React17, { useEffect as useEffect21, useState as useState19 } from "react";
 import { jsx as jsx94, jsxs as jsxs64 } from "react/jsx-runtime";
 var RatingStarField = (props) => {
   const {
@@ -33258,7 +33301,7 @@ var RatingStarField = (props) => {
         const starValue = index4 + 1;
         const fillColor = hover > 0 ? hover >= starValue ? "#f3cc00" : "white" : rating >= starValue ? "#f3cc00" : "white";
         const strokeColor = hover > 0 ? hover >= starValue ? "#f3cc00" : "rgba(73,80,87,0.76)" : rating >= starValue ? "#f3cc00" : "rgba(73,80,87,0.76)";
-        return /* @__PURE__ */ jsxs64(React16.Fragment, { children: [
+        return /* @__PURE__ */ jsxs64(React17.Fragment, { children: [
           /* @__PURE__ */ jsx94(
             "div",
             {
@@ -34123,12 +34166,12 @@ var Many2ManyField = (props) => {
 };
 
 // src/widgets/basic/many2one-field/many2one.tsx
-import React17, { useEffect as useEffect25, useMemo as useMemo9 } from "react";
+import React18, { useEffect as useEffect25, useMemo as useMemo9 } from "react";
 import { Fragment as Fragment30, jsx as jsx104, jsxs as jsxs72 } from "react/jsx-runtime";
-var CustomMenuList = (props) => {
+var CustomMenuList2 = (props) => {
   const { options: options2, children, selectProps } = props;
   const { setIsShowModalMany2Many, searchable } = selectProps;
-  const limitedChildren = React17.Children.toArray(children).slice(0, 10);
+  const limitedChildren = React18.Children.toArray(children).slice(0, 10);
   return /* @__PURE__ */ jsxs72(components.MenuList, { ...props, className: "z-[99]", children: [
     limitedChildren,
     options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs72(
@@ -34297,7 +34340,7 @@ var Many2OneField = (props) => {
                   },
                   components: {
                     MenuList: (menuListProps) => /* @__PURE__ */ jsx104(
-                      CustomMenuList,
+                      CustomMenuList2,
                       {
                         ...menuListProps,
                         selectProps: {

package/package.json

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