npm - @fctc/sme-widget-ui - Versions diffs - 1.6.3 → 1.6.5 - Mend

@fctc/sme-widget-ui 1.6.3 → 1.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.js CHANGED Viewed

@@ -12444,6 +12444,11 @@ var TableHead = (props) => {
                   /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                     "span",
                     {
+                      style: {
+                        width: "12px",
+                        height: "12px",
+                        fontSize: "8px"
+                      },
                       "data-tooltip-id": `field-help-${col?.field?.name}`,
                       className: "lowercase rounded-full bg-primary size-[12px] text-[8px] text-white flex items-center justify-center",
                       children: "i"
@@ -33575,16 +33580,22 @@ var Many2ManyTagField = (props) => {
                 }),
                 option: (provided, { isFocused, isSelected }) => ({
                   ...provided,
-                  backgroundColor: isSelected ? "#007bff" : isFocused ? "#f1f1f1" : "white",
+                  backgroundColor: isSelected || isFocused ? "rgba(66,66,66,0.08)" : "#FFF",
                   color: isSelected ? "white" : "",
                   cursor: "pointer",
-                  transition: "all 0.2s ease"
+                  transition: "all 0.2s ease",
+                  borderRadius: "8px"
                 }),
                 menu: (base) => ({
                   ...base,
                   zIndex: 9999,
                   width: "300px",
-                  minWidth: "300px"
+                  minWidth: "300px",
+                  borderRadius: "10px"
+                }),
+                menuList: (base) => ({
+                  ...base,
+                  padding: "4px"
                 })
               },
               components: isUser ? {
@@ -33988,61 +33999,67 @@ var SelectDropdownField = (props) => {
               onChange2 && onChange2(name2 ?? "", selectedOption.value);
             },
             value: defaultValue || null,
-            required: !invisible && required,
-            styles: {
-              control: () => ({}),
-              clearIndicator: (base) => ({
-                ...base,
-                padding: "0"
-              })
-            }
+            required: !invisible && required
           };
           return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "group", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
               StateManagedSelect$1,
               {
                 ...commonProps,
+                classNames: {
+                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                  valueContainer: () => "!m-0 !p-0 ",
+                  singleValue: () => `!m-0`,
+                  input: () => "!m-0 !p-0",
+                  dropdownIndicator: () => `m-0 p-0`,
+                  clearIndicator: () => `m-0 p-0'`,
+                  menu: () => "z-[99]"
+                },
                 styles: {
-                  control: (base, state) => ({
+                  control: () => ({}),
+                  container: (base) => ({
                     ...base,
-                    display: "flex",
-                    minHeight: "44px",
-                    cursor: readonly ? "not-allowed" : "pointer",
-                    backgroundColor: "#FFF",
-                    borderRadius: isEditTable ? "0px" : "10px",
-                    padding: "4px 0px",
-                    border: isForm ? state.isFocused ? "1px solid var(--color-primary)" : "1px solid rgba(66,66,66,0.12)" : "none",
-                    boxShadow: "none",
-                    "&:hover": {
-                      borderColor: "var(--color-primary)"
-                    },
-                    ...isEditTable && {
-                      minWidth: "300px",
-                      maxWidth: "300px",
-                      borderBottom: "1px solid transparent",
-                      background: "transparent"
-                    }
+                    height: "100%"
                   }),
                   clearIndicator: (base) => ({
                     ...base,
                     padding: "0"
                   }),
+                  valueContainer: (base) => ({
+                    ...base,
+                    padding: "0",
+                    margin: "0"
+                  }),
                   menuPortal: (base) => ({
                     ...base,
-                    zIndex: 9999
+                    zIndex: 999
+                  }),
+                  option: (base, state) => ({
+                    ...base,
+                    cursor: "pointer",
+                    backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
+                    color: "#060606",
+                    borderRadius: "8px",
+                    fontWeight: 400
                   }),
                   menu: (base) => ({
                     ...base,
-                    zIndex: 9999,
-                    width: isEditTable ? "300px" : "100%",
-                    minWidth: isEditTable ? "300px" : "100%"
+                    zIndex: 999,
+                    width: isEditTable ? "auto" : "100%",
+                    minWidth: isEditTable ? "200px" : "100%",
+                    borderRadius: "10px"
+                  }),
+                  menuList: (base) => ({
+                    ...base,
+                    padding: "4px"
                   })
                 },
                 menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                 components: {
                   IndicatorSeparator: () => null,
                   DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(components.DropdownIndicator, { ...props2 })
-                }
+                },
+                noOptionsMessage: () => i18n_default.t("no-available")
               }
             ) }),
             !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -34655,7 +34672,7 @@ var CustomMenuList2 = (props) => {
       {
         type: "button",
         onClick: () => setIsShowModalMany2Many(true),
-        className: "searh-more text-primary text-sm text-left w-full italic font-medium py-1 px-3",
+        className: "search-more text-primary text-sm text-left w-full italic font-medium py-1 px-3",
         children: [
           instance.t("search_more"),
           "..."
@@ -34675,13 +34692,13 @@ var Many2OneField = (props) => {
     methods,
     required,
     string,
-    //return
     allowShowDetail,
     index: index4,
     contextObject,
     renderDetail,
     tempSelectedOption,
     options: options2,
+    listOptions,
     fetchMoreOptions,
     handleSelectChange,
     isFetching,
@@ -34695,7 +34712,7 @@ var Many2OneField = (props) => {
     return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
-        model: relation,
+        model: options2?.model ?? relation,
         context: contextObject,
         idForm: id
       }),
@@ -34713,7 +34730,7 @@ var Many2OneField = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
     allowShowDetail && renderDetail({
       idToolTip: String(name2),
-      model: relation,
+      model: options2?.model ?? relation,
       context: contextObject,
       idForm: methods?.getValues(name2)?.id || methods?.getValues(name2)
     }),
@@ -34736,7 +34753,7 @@ var Many2OneField = (props) => {
             },
             render: ({ field, fieldState: { error: error2 } }) => {
               const currentValue = field?.value ? { value: field?.value?.id, label: field?.value?.display_name } : null;
-              const selectedOption = tempSelectedOption && options2?.length > 0 ? options2.find(
+              const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
                 (option) => option.value === tempSelectedOption?.value
               ) : currentValue ? currentValue : null;
               (0, import_react64.useEffect)(() => {
@@ -34749,7 +34766,7 @@ var Many2OneField = (props) => {
                   StateManagedSelect$1,
                   {
                     menuShouldScrollIntoView: false,
-                    options: options2,
+                    options: listOptions,
                     classNames: {
                       control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
                       valueContainer: () => "!m-0 !p-0 ",
@@ -34798,11 +34815,23 @@ var Many2OneField = (props) => {
                         ...base,
                         zIndex: 999
                       }),
+                      option: (base, state) => ({
+                        ...base,
+                        cursor: "pointer",
+                        backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
+                        color: "#060606",
+                        borderRadius: "8px"
+                      }),
                       menu: (base) => ({
                         ...base,
                         zIndex: 999,
                         width: isEditTable ? "auto" : "100%",
-                        minWidth: isEditTable ? "200px" : "100%"
+                        minWidth: isEditTable ? "200px" : "100%",
+                        borderRadius: "10px"
+                      }),
+                      menuList: (base) => ({
+                        ...base,
+                        padding: "4px"
                       })
                     },
                     components: {

package/dist/index.mjs CHANGED Viewed

@@ -12325,6 +12325,11 @@ var TableHead = (props) => {
                   /* @__PURE__ */ jsx44(
                     "span",
                     {
+                      style: {
+                        width: "12px",
+                        height: "12px",
+                        fontSize: "8px"
+                      },
                       "data-tooltip-id": `field-help-${col?.field?.name}`,
                       className: "lowercase rounded-full bg-primary size-[12px] text-[8px] text-white flex items-center justify-center",
                       children: "i"
@@ -33456,16 +33461,22 @@ var Many2ManyTagField = (props) => {
                 }),
                 option: (provided, { isFocused, isSelected }) => ({
                   ...provided,
-                  backgroundColor: isSelected ? "#007bff" : isFocused ? "#f1f1f1" : "white",
+                  backgroundColor: isSelected || isFocused ? "rgba(66,66,66,0.08)" : "#FFF",
                   color: isSelected ? "white" : "",
                   cursor: "pointer",
-                  transition: "all 0.2s ease"
+                  transition: "all 0.2s ease",
+                  borderRadius: "8px"
                 }),
                 menu: (base) => ({
                   ...base,
                   zIndex: 9999,
                   width: "300px",
-                  minWidth: "300px"
+                  minWidth: "300px",
+                  borderRadius: "10px"
+                }),
+                menuList: (base) => ({
+                  ...base,
+                  padding: "4px"
                 })
               },
               components: isUser ? {
@@ -33869,61 +33880,67 @@ var SelectDropdownField = (props) => {
               onChange2 && onChange2(name2 ?? "", selectedOption.value);
             },
             value: defaultValue || null,
-            required: !invisible && required,
-            styles: {
-              control: () => ({}),
-              clearIndicator: (base) => ({
-                ...base,
-                padding: "0"
-              })
-            }
+            required: !invisible && required
           };
           return /* @__PURE__ */ jsxs67(Fragment29, { children: [
             /* @__PURE__ */ jsx98("div", { className: "group", children: /* @__PURE__ */ jsx98(
               StateManagedSelect$1,
               {
                 ...commonProps,
+                classNames: {
+                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                  valueContainer: () => "!m-0 !p-0 ",
+                  singleValue: () => `!m-0`,
+                  input: () => "!m-0 !p-0",
+                  dropdownIndicator: () => `m-0 p-0`,
+                  clearIndicator: () => `m-0 p-0'`,
+                  menu: () => "z-[99]"
+                },
                 styles: {
-                  control: (base, state) => ({
+                  control: () => ({}),
+                  container: (base) => ({
                     ...base,
-                    display: "flex",
-                    minHeight: "44px",
-                    cursor: readonly ? "not-allowed" : "pointer",
-                    backgroundColor: "#FFF",
-                    borderRadius: isEditTable ? "0px" : "10px",
-                    padding: "4px 0px",
-                    border: isForm ? state.isFocused ? "1px solid var(--color-primary)" : "1px solid rgba(66,66,66,0.12)" : "none",
-                    boxShadow: "none",
-                    "&:hover": {
-                      borderColor: "var(--color-primary)"
-                    },
-                    ...isEditTable && {
-                      minWidth: "300px",
-                      maxWidth: "300px",
-                      borderBottom: "1px solid transparent",
-                      background: "transparent"
-                    }
+                    height: "100%"
                   }),
                   clearIndicator: (base) => ({
                     ...base,
                     padding: "0"
                   }),
+                  valueContainer: (base) => ({
+                    ...base,
+                    padding: "0",
+                    margin: "0"
+                  }),
                   menuPortal: (base) => ({
                     ...base,
-                    zIndex: 9999
+                    zIndex: 999
+                  }),
+                  option: (base, state) => ({
+                    ...base,
+                    cursor: "pointer",
+                    backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
+                    color: "#060606",
+                    borderRadius: "8px",
+                    fontWeight: 400
                   }),
                   menu: (base) => ({
                     ...base,
-                    zIndex: 9999,
-                    width: isEditTable ? "300px" : "100%",
-                    minWidth: isEditTable ? "300px" : "100%"
+                    zIndex: 999,
+                    width: isEditTable ? "auto" : "100%",
+                    minWidth: isEditTable ? "200px" : "100%",
+                    borderRadius: "10px"
+                  }),
+                  menuList: (base) => ({
+                    ...base,
+                    padding: "4px"
                   })
                 },
                 menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                 components: {
                   IndicatorSeparator: () => null,
                   DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ jsx98(components.DropdownIndicator, { ...props2 })
-                }
+                },
+                noOptionsMessage: () => i18n_default.t("no-available")
               }
             ) }),
             !isEditTable && error2 && /* @__PURE__ */ jsx98("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -34536,7 +34553,7 @@ var CustomMenuList2 = (props) => {
       {
         type: "button",
         onClick: () => setIsShowModalMany2Many(true),
-        className: "searh-more text-primary text-sm text-left w-full italic font-medium py-1 px-3",
+        className: "search-more text-primary text-sm text-left w-full italic font-medium py-1 px-3",
         children: [
           instance.t("search_more"),
           "..."
@@ -34556,13 +34573,13 @@ var Many2OneField = (props) => {
     methods,
     required,
     string,
-    //return
     allowShowDetail,
     index: index4,
     contextObject,
     renderDetail,
     tempSelectedOption,
     options: options2,
+    listOptions,
     fetchMoreOptions,
     handleSelectChange,
     isFetching,
@@ -34576,7 +34593,7 @@ var Many2OneField = (props) => {
     return /* @__PURE__ */ jsxs72(Fragment31, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
-        model: relation,
+        model: options2?.model ?? relation,
         context: contextObject,
         idForm: id
       }),
@@ -34594,7 +34611,7 @@ var Many2OneField = (props) => {
   return /* @__PURE__ */ jsxs72(Fragment31, { children: [
     allowShowDetail && renderDetail({
       idToolTip: String(name2),
-      model: relation,
+      model: options2?.model ?? relation,
       context: contextObject,
       idForm: methods?.getValues(name2)?.id || methods?.getValues(name2)
     }),
@@ -34617,7 +34634,7 @@ var Many2OneField = (props) => {
             },
             render: ({ field, fieldState: { error: error2 } }) => {
               const currentValue = field?.value ? { value: field?.value?.id, label: field?.value?.display_name } : null;
-              const selectedOption = tempSelectedOption && options2?.length > 0 ? options2.find(
+              const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
                 (option) => option.value === tempSelectedOption?.value
               ) : currentValue ? currentValue : null;
               useEffect25(() => {
@@ -34630,7 +34647,7 @@ var Many2OneField = (props) => {
                   StateManagedSelect$1,
                   {
                     menuShouldScrollIntoView: false,
-                    options: options2,
+                    options: listOptions,
                     classNames: {
                       control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
                       valueContainer: () => "!m-0 !p-0 ",
@@ -34679,11 +34696,23 @@ var Many2OneField = (props) => {
                         ...base,
                         zIndex: 999
                       }),
+                      option: (base, state) => ({
+                        ...base,
+                        cursor: "pointer",
+                        backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
+                        color: "#060606",
+                        borderRadius: "8px"
+                      }),
                       menu: (base) => ({
                         ...base,
                         zIndex: 999,
                         width: isEditTable ? "auto" : "100%",
-                        minWidth: isEditTable ? "200px" : "100%"
+                        minWidth: isEditTable ? "200px" : "100%",
+                        borderRadius: "10px"
+                      }),
+                      menuList: (base) => ({
+                        ...base,
+                        padding: "4px"
                       })
                     },
                     components: {
@@ -34804,11 +34833,11 @@ var StatusbarDurationField = (props) => {
 };
 // src/widgets/basic/status-bar-field/option/option.tsx
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo10 } from "react";
 import { jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
-  const memoizedStatusOptions = useMemo11(() => selection, [selection]);
+  const memoizedStatusOptions = useMemo10(() => selection, [selection]);
   return /* @__PURE__ */ jsx106(
     "div",
     {

package/dist/widgets.d.mts CHANGED Viewed

@@ -444,6 +444,7 @@ interface Many2OneProps extends IInputFieldProps {
     setIsShowModalMany2Many?: any;
     setInputValue?: any;
     setDomainObject?: any;
+    listOptions?: any;
 }
 declare const Many2OneField: (props: Many2OneProps) => JSX.Element;

package/dist/widgets.d.ts CHANGED Viewed

@@ -444,6 +444,7 @@ interface Many2OneProps extends IInputFieldProps {
     setIsShowModalMany2Many?: any;
     setInputValue?: any;
     setDomainObject?: any;
+    listOptions?: any;
 }
 declare const Many2OneField: (props: Many2OneProps) => JSX.Element;

package/dist/widgets.js CHANGED Viewed

@@ -12059,6 +12059,11 @@ var TableHead = (props) => {
                   /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                     "span",
                     {
+                      style: {
+                        width: "12px",
+                        height: "12px",
+                        fontSize: "8px"
+                      },
                       "data-tooltip-id": `field-help-${col?.field?.name}`,
                       className: "lowercase rounded-full bg-primary size-[12px] text-[8px] text-white flex items-center justify-center",
                       children: "i"
@@ -33201,16 +33206,22 @@ var Many2ManyTagField = (props) => {
                 }),
                 option: (provided, { isFocused, isSelected }) => ({
                   ...provided,
-                  backgroundColor: isSelected ? "#007bff" : isFocused ? "#f1f1f1" : "white",
+                  backgroundColor: isSelected || isFocused ? "rgba(66,66,66,0.08)" : "#FFF",
                   color: isSelected ? "white" : "",
                   cursor: "pointer",
-                  transition: "all 0.2s ease"
+                  transition: "all 0.2s ease",
+                  borderRadius: "8px"
                 }),
                 menu: (base) => ({
                   ...base,
                   zIndex: 9999,
                   width: "300px",
-                  minWidth: "300px"
+                  minWidth: "300px",
+                  borderRadius: "10px"
+                }),
+                menuList: (base) => ({
+                  ...base,
+                  padding: "4px"
                 })
               },
               components: isUser ? {
@@ -33614,61 +33625,67 @@ var SelectDropdownField = (props) => {
               onChange2 && onChange2(name2 ?? "", selectedOption.value);
             },
             value: defaultValue || null,
-            required: !invisible && required,
-            styles: {
-              control: () => ({}),
-              clearIndicator: (base) => ({
-                ...base,
-                padding: "0"
-              })
-            }
+            required: !invisible && required
           };
           return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "group", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
               StateManagedSelect$1,
               {
                 ...commonProps,
+                classNames: {
+                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                  valueContainer: () => "!m-0 !p-0 ",
+                  singleValue: () => `!m-0`,
+                  input: () => "!m-0 !p-0",
+                  dropdownIndicator: () => `m-0 p-0`,
+                  clearIndicator: () => `m-0 p-0'`,
+                  menu: () => "z-[99]"
+                },
                 styles: {
-                  control: (base, state) => ({
+                  control: () => ({}),
+                  container: (base) => ({
                     ...base,
-                    display: "flex",
-                    minHeight: "44px",
-                    cursor: readonly ? "not-allowed" : "pointer",
-                    backgroundColor: "#FFF",
-                    borderRadius: isEditTable ? "0px" : "10px",
-                    padding: "4px 0px",
-                    border: isForm ? state.isFocused ? "1px solid var(--color-primary)" : "1px solid rgba(66,66,66,0.12)" : "none",
-                    boxShadow: "none",
-                    "&:hover": {
-                      borderColor: "var(--color-primary)"
-                    },
-                    ...isEditTable && {
-                      minWidth: "300px",
-                      maxWidth: "300px",
-                      borderBottom: "1px solid transparent",
-                      background: "transparent"
-                    }
+                    height: "100%"
                   }),
                   clearIndicator: (base) => ({
                     ...base,
                     padding: "0"
                   }),
+                  valueContainer: (base) => ({
+                    ...base,
+                    padding: "0",
+                    margin: "0"
+                  }),
                   menuPortal: (base) => ({
                     ...base,
-                    zIndex: 9999
+                    zIndex: 999
+                  }),
+                  option: (base, state) => ({
+                    ...base,
+                    cursor: "pointer",
+                    backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
+                    color: "#060606",
+                    borderRadius: "8px",
+                    fontWeight: 400
                   }),
                   menu: (base) => ({
                     ...base,
-                    zIndex: 9999,
-                    width: isEditTable ? "300px" : "100%",
-                    minWidth: isEditTable ? "300px" : "100%"
+                    zIndex: 999,
+                    width: isEditTable ? "auto" : "100%",
+                    minWidth: isEditTable ? "200px" : "100%",
+                    borderRadius: "10px"
+                  }),
+                  menuList: (base) => ({
+                    ...base,
+                    padding: "4px"
                   })
                 },
                 menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                 components: {
                   IndicatorSeparator: () => null,
                   DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(components.DropdownIndicator, { ...props2 })
-                }
+                },
+                noOptionsMessage: () => i18n_default.t("no-available")
               }
             ) }),
             !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -34281,7 +34298,7 @@ var CustomMenuList2 = (props) => {
       {
         type: "button",
         onClick: () => setIsShowModalMany2Many(true),
-        className: "searh-more text-primary text-sm text-left w-full italic font-medium py-1 px-3",
+        className: "search-more text-primary text-sm text-left w-full italic font-medium py-1 px-3",
         children: [
           instance.t("search_more"),
           "..."
@@ -34301,13 +34318,13 @@ var Many2OneField = (props) => {
     methods,
     required,
     string,
-    //return
     allowShowDetail,
     index: index4,
     contextObject,
     renderDetail,
     tempSelectedOption,
     options: options2,
+    listOptions,
     fetchMoreOptions,
     handleSelectChange,
     isFetching,
@@ -34321,7 +34338,7 @@ var Many2OneField = (props) => {
     return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
-        model: relation,
+        model: options2?.model ?? relation,
         context: contextObject,
         idForm: id
       }),
@@ -34339,7 +34356,7 @@ var Many2OneField = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
     allowShowDetail && renderDetail({
       idToolTip: String(name2),
-      model: relation,
+      model: options2?.model ?? relation,
       context: contextObject,
       idForm: methods?.getValues(name2)?.id || methods?.getValues(name2)
     }),
@@ -34362,7 +34379,7 @@ var Many2OneField = (props) => {
             },
             render: ({ field, fieldState: { error: error2 } }) => {
               const currentValue = field?.value ? { value: field?.value?.id, label: field?.value?.display_name } : null;
-              const selectedOption = tempSelectedOption && options2?.length > 0 ? options2.find(
+              const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
                 (option) => option.value === tempSelectedOption?.value
               ) : currentValue ? currentValue : null;
               (0, import_react64.useEffect)(() => {
@@ -34375,7 +34392,7 @@ var Many2OneField = (props) => {
                   StateManagedSelect$1,
                   {
                     menuShouldScrollIntoView: false,
-                    options: options2,
+                    options: listOptions,
                     classNames: {
                       control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
                       valueContainer: () => "!m-0 !p-0 ",
@@ -34424,11 +34441,23 @@ var Many2OneField = (props) => {
                         ...base,
                         zIndex: 999
                       }),
+                      option: (base, state) => ({
+                        ...base,
+                        cursor: "pointer",
+                        backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
+                        color: "#060606",
+                        borderRadius: "8px"
+                      }),
                       menu: (base) => ({
                         ...base,
                         zIndex: 999,
                         width: isEditTable ? "auto" : "100%",
-                        minWidth: isEditTable ? "200px" : "100%"
+                        minWidth: isEditTable ? "200px" : "100%",
+                        borderRadius: "10px"
+                      }),
+                      menuList: (base) => ({
+                        ...base,
+                        padding: "4px"
                       })
                     },
                     components: {

package/dist/widgets.mjs CHANGED Viewed

@@ -11996,6 +11996,11 @@ var TableHead = (props) => {
                   /* @__PURE__ */ jsx44(
                     "span",
                     {
+                      style: {
+                        width: "12px",
+                        height: "12px",
+                        fontSize: "8px"
+                      },
                       "data-tooltip-id": `field-help-${col?.field?.name}`,
                       className: "lowercase rounded-full bg-primary size-[12px] text-[8px] text-white flex items-center justify-center",
                       children: "i"
@@ -33138,16 +33143,22 @@ var Many2ManyTagField = (props) => {
                 }),
                 option: (provided, { isFocused, isSelected }) => ({
                   ...provided,
-                  backgroundColor: isSelected ? "#007bff" : isFocused ? "#f1f1f1" : "white",
+                  backgroundColor: isSelected || isFocused ? "rgba(66,66,66,0.08)" : "#FFF",
                   color: isSelected ? "white" : "",
                   cursor: "pointer",
-                  transition: "all 0.2s ease"
+                  transition: "all 0.2s ease",
+                  borderRadius: "8px"
                 }),
                 menu: (base) => ({
                   ...base,
                   zIndex: 9999,
                   width: "300px",
-                  minWidth: "300px"
+                  minWidth: "300px",
+                  borderRadius: "10px"
+                }),
+                menuList: (base) => ({
+                  ...base,
+                  padding: "4px"
                 })
               },
               components: isUser ? {
@@ -33551,61 +33562,67 @@ var SelectDropdownField = (props) => {
               onChange2 && onChange2(name2 ?? "", selectedOption.value);
             },
             value: defaultValue || null,
-            required: !invisible && required,
-            styles: {
-              control: () => ({}),
-              clearIndicator: (base) => ({
-                ...base,
-                padding: "0"
-              })
-            }
+            required: !invisible && required
           };
           return /* @__PURE__ */ jsxs67(Fragment29, { children: [
             /* @__PURE__ */ jsx98("div", { className: "group", children: /* @__PURE__ */ jsx98(
               StateManagedSelect$1,
               {
                 ...commonProps,
+                classNames: {
+                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                  valueContainer: () => "!m-0 !p-0 ",
+                  singleValue: () => `!m-0`,
+                  input: () => "!m-0 !p-0",
+                  dropdownIndicator: () => `m-0 p-0`,
+                  clearIndicator: () => `m-0 p-0'`,
+                  menu: () => "z-[99]"
+                },
                 styles: {
-                  control: (base, state) => ({
+                  control: () => ({}),
+                  container: (base) => ({
                     ...base,
-                    display: "flex",
-                    minHeight: "44px",
-                    cursor: readonly ? "not-allowed" : "pointer",
-                    backgroundColor: "#FFF",
-                    borderRadius: isEditTable ? "0px" : "10px",
-                    padding: "4px 0px",
-                    border: isForm ? state.isFocused ? "1px solid var(--color-primary)" : "1px solid rgba(66,66,66,0.12)" : "none",
-                    boxShadow: "none",
-                    "&:hover": {
-                      borderColor: "var(--color-primary)"
-                    },
-                    ...isEditTable && {
-                      minWidth: "300px",
-                      maxWidth: "300px",
-                      borderBottom: "1px solid transparent",
-                      background: "transparent"
-                    }
+                    height: "100%"
                   }),
                   clearIndicator: (base) => ({
                     ...base,
                     padding: "0"
                   }),
+                  valueContainer: (base) => ({
+                    ...base,
+                    padding: "0",
+                    margin: "0"
+                  }),
                   menuPortal: (base) => ({
                     ...base,
-                    zIndex: 9999
+                    zIndex: 999
+                  }),
+                  option: (base, state) => ({
+                    ...base,
+                    cursor: "pointer",
+                    backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
+                    color: "#060606",
+                    borderRadius: "8px",
+                    fontWeight: 400
                   }),
                   menu: (base) => ({
                     ...base,
-                    zIndex: 9999,
-                    width: isEditTable ? "300px" : "100%",
-                    minWidth: isEditTable ? "300px" : "100%"
+                    zIndex: 999,
+                    width: isEditTable ? "auto" : "100%",
+                    minWidth: isEditTable ? "200px" : "100%",
+                    borderRadius: "10px"
+                  }),
+                  menuList: (base) => ({
+                    ...base,
+                    padding: "4px"
                   })
                 },
                 menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                 components: {
                   IndicatorSeparator: () => null,
                   DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ jsx98(components.DropdownIndicator, { ...props2 })
-                }
+                },
+                noOptionsMessage: () => i18n_default.t("no-available")
               }
             ) }),
             !isEditTable && error2 && /* @__PURE__ */ jsx98("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -34218,7 +34235,7 @@ var CustomMenuList2 = (props) => {
       {
         type: "button",
         onClick: () => setIsShowModalMany2Many(true),
-        className: "searh-more text-primary text-sm text-left w-full italic font-medium py-1 px-3",
+        className: "search-more text-primary text-sm text-left w-full italic font-medium py-1 px-3",
         children: [
           instance.t("search_more"),
           "..."
@@ -34238,13 +34255,13 @@ var Many2OneField = (props) => {
     methods,
     required,
     string,
-    //return
     allowShowDetail,
     index: index4,
     contextObject,
     renderDetail,
     tempSelectedOption,
     options: options2,
+    listOptions,
     fetchMoreOptions,
     handleSelectChange,
     isFetching,
@@ -34258,7 +34275,7 @@ var Many2OneField = (props) => {
     return /* @__PURE__ */ jsxs72(Fragment31, { children: [
       allowShowDetail && renderDetail({
         idToolTip: String(name2) + Number(index4),
-        model: relation,
+        model: options2?.model ?? relation,
         context: contextObject,
         idForm: id
       }),
@@ -34276,7 +34293,7 @@ var Many2OneField = (props) => {
   return /* @__PURE__ */ jsxs72(Fragment31, { children: [
     allowShowDetail && renderDetail({
       idToolTip: String(name2),
-      model: relation,
+      model: options2?.model ?? relation,
       context: contextObject,
       idForm: methods?.getValues(name2)?.id || methods?.getValues(name2)
     }),
@@ -34299,7 +34316,7 @@ var Many2OneField = (props) => {
             },
             render: ({ field, fieldState: { error: error2 } }) => {
               const currentValue = field?.value ? { value: field?.value?.id, label: field?.value?.display_name } : null;
-              const selectedOption = tempSelectedOption && options2?.length > 0 ? options2.find(
+              const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
                 (option) => option.value === tempSelectedOption?.value
               ) : currentValue ? currentValue : null;
               useEffect25(() => {
@@ -34312,7 +34329,7 @@ var Many2OneField = (props) => {
                   StateManagedSelect$1,
                   {
                     menuShouldScrollIntoView: false,
-                    options: options2,
+                    options: listOptions,
                     classNames: {
                       control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-[200px] max-w-[300px] rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
                       valueContainer: () => "!m-0 !p-0 ",
@@ -34361,11 +34378,23 @@ var Many2OneField = (props) => {
                         ...base,
                         zIndex: 999
                       }),
+                      option: (base, state) => ({
+                        ...base,
+                        cursor: "pointer",
+                        backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
+                        color: "#060606",
+                        borderRadius: "8px"
+                      }),
                       menu: (base) => ({
                         ...base,
                         zIndex: 999,
                         width: isEditTable ? "auto" : "100%",
-                        minWidth: isEditTable ? "200px" : "100%"
+                        minWidth: isEditTable ? "200px" : "100%",
+                        borderRadius: "10px"
+                      }),
+                      menuList: (base) => ({
+                        ...base,
+                        padding: "4px"
                       })
                     },
                     components: {
@@ -34486,11 +34515,11 @@ var StatusbarDurationField = (props) => {
 };
 // src/widgets/basic/status-bar-field/option/option.tsx
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo10 } from "react";
 import { jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
-  const memoizedStatusOptions = useMemo11(() => selection, [selection]);
+  const memoizedStatusOptions = useMemo10(() => selection, [selection]);
   return /* @__PURE__ */ jsx106(
     "div",
     {

package/package.json CHANGED Viewed

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