@fctc/sme-widget-ui 2.6.6 → 2.6.8

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.
package/dist/index.js CHANGED
@@ -13095,14 +13095,18 @@ var TableHead = (props) => {
13095
13095
  isDisplayCheckbox && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
13096
13096
  "th",
13097
13097
  {
13098
- className: ` table-checkbox-row th-checkbox w-[2%] text-left font-medium uppercase text-gray-500 p-3`,
13098
+ style: {
13099
+ width: "40px",
13100
+ maxWidth: "40px"
13101
+ },
13102
+ className: ` table-checkbox-row th-checkbox text-left font-medium uppercase text-gray-500 p-3`,
13099
13103
  children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
13100
13104
  "input",
13101
13105
  {
13102
13106
  type: "checkbox",
13103
13107
  checked: checkedAll,
13104
13108
  onChange: handleCheckBoxAll,
13105
- className: "ml-2 align-middle custom-checkbox"
13109
+ className: "align-middle custom-checkbox"
13106
13110
  }
13107
13111
  )
13108
13112
  }
@@ -32711,9 +32715,16 @@ var Many2ManyTagField = (props) => {
32711
32715
  }, [field?.value, options2]);
32712
32716
  const handleChange = (selectedOptions) => {
32713
32717
  const newValue = transfer(selectedOptions);
32714
- field.onChange(newValue);
32718
+ methods?.setValue(name2, newValue, { shouldDirty: true });
32715
32719
  onChange2?.(name2 ?? "", newValue);
32716
32720
  clearErrors(name2);
32721
+ newValue.forEach((item, index4) => {
32722
+ Object.keys(item).forEach((key) => {
32723
+ methods.setValue(`${name2}[${index4}].${key}`, item[key], {
32724
+ shouldDirty: true
32725
+ });
32726
+ });
32727
+ });
32717
32728
  };
32718
32729
  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "group h-full overflow-y-auto", children: [
32719
32730
  /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
@@ -33956,6 +33967,8 @@ var Many2OneField = (props) => {
33956
33967
  } : false
33957
33968
  },
33958
33969
  render: ({ field, fieldState: { error: error2 } }) => {
33970
+ const [menuOpen, setMenuOpen] = (0, import_react68.useState)(false);
33971
+ const [hover, setHover] = (0, import_react68.useState)(false);
33959
33972
  const currentValue = field?.value ? {
33960
33973
  value: field?.value?.id,
33961
33974
  label: field?.value?.display_name,
@@ -33969,103 +33982,128 @@ var Many2OneField = (props) => {
33969
33982
  methods?.clearErrors(name2);
33970
33983
  }
33971
33984
  }, [selectedOption]);
33972
- return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "h-full", children: [
33973
- /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
33974
- StateManagedSelect$1,
33975
- {
33976
- menuShouldScrollIntoView: false,
33977
- options: listOptions,
33978
- classNames: {
33979
- control: ({ isFocused }) => `widget many2one-widget ${baseClassName} ${isForm && (isFocused ? "focused" : "")}`,
33980
- valueContainer: () => "!m-0 !p-0 ",
33981
- singleValue: () => `!m-0`,
33982
- input: () => "!m-0 !p-0",
33983
- dropdownIndicator: () => `m-0 p-0`,
33984
- clearIndicator: () => `m-0 p-0'`,
33985
- menu: () => "z-[99]"
33986
- },
33987
- placeholder,
33988
- onMenuOpen: fetchMoreOptions,
33989
- onMenuClose: () => {
33990
- const filteredDomain = [...domainObject ?? []]?.filter(
33991
- (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
33992
- ) || [];
33993
- setInputValue("");
33994
- setDomainObject(filteredDomain);
33995
- },
33996
- onChange: handleSelectChange,
33997
- onInputChange: (newValue, { action }) => {
33998
- if (action === "input-change") {
33999
- setInputValue(newValue);
34000
- }
34001
- },
34002
- value: selectedOption,
34003
- isSearchable: true,
34004
- isClearable: true,
34005
- menuPlacement: "auto",
34006
- menuPortalTarget: typeof window !== "undefined" ? document.body : null,
34007
- styles: {
34008
- control: () => ({
34009
- maxWidth: "100%",
34010
- minWidth: isEditTable ? "max-content" : "100%",
34011
- background: isEditTable ? "transparent" : "initial"
34012
- }),
34013
- container: (base) => ({
34014
- ...base,
34015
- height: "100%"
34016
- }),
34017
- clearIndicator: (base) => ({
34018
- ...base,
34019
- padding: "0"
34020
- }),
34021
- valueContainer: (base) => ({
34022
- ...base,
34023
- padding: "0",
34024
- margin: "0"
34025
- }),
34026
- menuPortal: (base) => ({
34027
- ...base,
34028
- zIndex: 999
34029
- }),
34030
- option: (base, state) => ({
34031
- ...base,
34032
- cursor: "pointer",
34033
- backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
34034
- color: "#060606",
34035
- borderRadius: "8px"
34036
- }),
34037
- menu: (base) => ({
34038
- ...base,
34039
- zIndex: 999,
34040
- width: "100%",
34041
- minWidth: "100%",
34042
- borderRadius: "10px"
34043
- }),
34044
- menuList: (base) => ({
34045
- ...base,
34046
- padding: "4px"
34047
- })
34048
- },
34049
- components: {
34050
- MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
34051
- CustomMenuList2,
34052
- {
34053
- ...menuListProps,
34054
- selectProps: {
34055
- ...menuListProps.selectProps,
34056
- setIsShowModalMany2Many
33985
+ return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
33986
+ "div",
33987
+ {
33988
+ className: "h-full",
33989
+ onMouseEnter: () => setHover(true),
33990
+ onMouseLeave: () => setHover(false),
33991
+ children: [
33992
+ /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
33993
+ StateManagedSelect$1,
33994
+ {
33995
+ menuShouldScrollIntoView: false,
33996
+ options: listOptions,
33997
+ classNames: {
33998
+ control: ({ isFocused }) => `widget many2one-widget ${baseClassName} ${isForm && (isFocused ? "focused" : "")}`,
33999
+ valueContainer: () => "!m-0 !p-0 ",
34000
+ singleValue: () => `!m-0`,
34001
+ input: () => "!m-0 !p-0",
34002
+ dropdownIndicator: () => `m-0 p-0`,
34003
+ clearIndicator: () => `m-0 p-0'`,
34004
+ menu: () => "z-[99]"
34005
+ },
34006
+ placeholder,
34007
+ onMenuOpen: () => {
34008
+ fetchMoreOptions();
34009
+ setMenuOpen(true);
34010
+ },
34011
+ onBlur: () => {
34012
+ setHover(false);
34013
+ },
34014
+ onMenuClose: () => {
34015
+ const filteredDomain = [...domainObject ?? []]?.filter(
34016
+ (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
34017
+ ) || [];
34018
+ setInputValue("");
34019
+ setDomainObject(filteredDomain);
34020
+ setMenuOpen(false);
34021
+ },
34022
+ onChange: handleSelectChange,
34023
+ onInputChange: (newValue, { action }) => {
34024
+ if (action === "input-change") {
34025
+ setInputValue(newValue);
34057
34026
  }
34058
- }
34059
- ),
34060
- IndicatorSeparator: () => null,
34061
- DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(components.DropdownIndicator, { ...props2 })
34062
- },
34063
- isDisabled: readonly,
34064
- noOptionsMessage: () => t3(isFetching ? "loading" : "no-available")
34065
- }
34066
- ),
34067
- !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
34068
- ] });
34027
+ },
34028
+ value: selectedOption,
34029
+ isSearchable: true,
34030
+ isClearable: menuOpen,
34031
+ menuPlacement: "auto",
34032
+ menuPortalTarget: typeof window !== "undefined" ? document.body : null,
34033
+ styles: {
34034
+ control: () => ({
34035
+ maxWidth: "100%",
34036
+ minWidth: isEditTable ? "max-content" : "100%",
34037
+ background: isEditTable ? "transparent" : "initial"
34038
+ }),
34039
+ container: (base) => ({
34040
+ ...base,
34041
+ height: "100%"
34042
+ }),
34043
+ clearIndicator: (base) => ({
34044
+ ...base,
34045
+ padding: "0"
34046
+ }),
34047
+ dropdownIndicator: (base) => ({
34048
+ ...base,
34049
+ padding: "0",
34050
+ display: hover ? "flex" : "none"
34051
+ }),
34052
+ valueContainer: (base) => ({
34053
+ ...base,
34054
+ padding: "0",
34055
+ margin: "0"
34056
+ }),
34057
+ indicatorsContainer: (base) => ({
34058
+ ...base,
34059
+ padding: "0",
34060
+ margin: "0"
34061
+ }),
34062
+ menuPortal: (base) => ({
34063
+ ...base,
34064
+ zIndex: 999
34065
+ }),
34066
+ option: (base, state) => ({
34067
+ ...base,
34068
+ cursor: "pointer",
34069
+ backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
34070
+ color: "#060606",
34071
+ borderRadius: "8px"
34072
+ }),
34073
+ menu: (base) => ({
34074
+ ...base,
34075
+ zIndex: 999,
34076
+ width: "100%",
34077
+ minWidth: "100%",
34078
+ borderRadius: "10px"
34079
+ }),
34080
+ menuList: (base) => ({
34081
+ ...base,
34082
+ padding: "4px"
34083
+ })
34084
+ },
34085
+ components: {
34086
+ MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
34087
+ CustomMenuList2,
34088
+ {
34089
+ ...menuListProps,
34090
+ selectProps: {
34091
+ ...menuListProps.selectProps,
34092
+ setIsShowModalMany2Many
34093
+ }
34094
+ }
34095
+ ),
34096
+ IndicatorSeparator: () => null,
34097
+ DropdownIndicator: (props2) => readonly || menuOpen ? null : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(components.DropdownIndicator, { ...props2 })
34098
+ },
34099
+ isDisabled: readonly,
34100
+ noOptionsMessage: () => t3(isFetching ? "loading" : "no-available")
34101
+ }
34102
+ ),
34103
+ !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
34104
+ ]
34105
+ }
34106
+ );
34069
34107
  }
34070
34108
  }
34071
34109
  )
package/dist/index.mjs CHANGED
@@ -12968,14 +12968,18 @@ var TableHead = (props) => {
12968
12968
  isDisplayCheckbox && /* @__PURE__ */ jsx51(
12969
12969
  "th",
12970
12970
  {
12971
- className: ` table-checkbox-row th-checkbox w-[2%] text-left font-medium uppercase text-gray-500 p-3`,
12971
+ style: {
12972
+ width: "40px",
12973
+ maxWidth: "40px"
12974
+ },
12975
+ className: ` table-checkbox-row th-checkbox text-left font-medium uppercase text-gray-500 p-3`,
12972
12976
  children: /* @__PURE__ */ jsx51(
12973
12977
  "input",
12974
12978
  {
12975
12979
  type: "checkbox",
12976
12980
  checked: checkedAll,
12977
12981
  onChange: handleCheckBoxAll,
12978
- className: "ml-2 align-middle custom-checkbox"
12982
+ className: "align-middle custom-checkbox"
12979
12983
  }
12980
12984
  )
12981
12985
  }
@@ -32584,9 +32588,16 @@ var Many2ManyTagField = (props) => {
32584
32588
  }, [field?.value, options2]);
32585
32589
  const handleChange = (selectedOptions) => {
32586
32590
  const newValue = transfer(selectedOptions);
32587
- field.onChange(newValue);
32591
+ methods?.setValue(name2, newValue, { shouldDirty: true });
32588
32592
  onChange2?.(name2 ?? "", newValue);
32589
32593
  clearErrors(name2);
32594
+ newValue.forEach((item, index4) => {
32595
+ Object.keys(item).forEach((key) => {
32596
+ methods.setValue(`${name2}[${index4}].${key}`, item[key], {
32597
+ shouldDirty: true
32598
+ });
32599
+ });
32600
+ });
32590
32601
  };
32591
32602
  return /* @__PURE__ */ jsxs65("div", { className: "group h-full overflow-y-auto", children: [
32592
32603
  /* @__PURE__ */ jsx99(
@@ -33732,7 +33743,7 @@ var Many2ManyField = (props) => {
33732
33743
  };
33733
33744
 
33734
33745
  // src/widgets/basic/many2one-field/many2one.tsx
33735
- import React19, { useEffect as useEffect28 } from "react";
33746
+ import React19, { useEffect as useEffect28, useState as useState23 } from "react";
33736
33747
  import { Fragment as Fragment32, jsx as jsx112, jsxs as jsxs75 } from "react/jsx-runtime";
33737
33748
  var CustomMenuList2 = (props) => {
33738
33749
  const { t: t3 } = useI18n();
@@ -33829,6 +33840,8 @@ var Many2OneField = (props) => {
33829
33840
  } : false
33830
33841
  },
33831
33842
  render: ({ field, fieldState: { error: error2 } }) => {
33843
+ const [menuOpen, setMenuOpen] = useState23(false);
33844
+ const [hover, setHover] = useState23(false);
33832
33845
  const currentValue = field?.value ? {
33833
33846
  value: field?.value?.id,
33834
33847
  label: field?.value?.display_name,
@@ -33842,103 +33855,128 @@ var Many2OneField = (props) => {
33842
33855
  methods?.clearErrors(name2);
33843
33856
  }
33844
33857
  }, [selectedOption]);
33845
- return /* @__PURE__ */ jsxs75("div", { className: "h-full", children: [
33846
- /* @__PURE__ */ jsx112(
33847
- StateManagedSelect$1,
33848
- {
33849
- menuShouldScrollIntoView: false,
33850
- options: listOptions,
33851
- classNames: {
33852
- control: ({ isFocused }) => `widget many2one-widget ${baseClassName} ${isForm && (isFocused ? "focused" : "")}`,
33853
- valueContainer: () => "!m-0 !p-0 ",
33854
- singleValue: () => `!m-0`,
33855
- input: () => "!m-0 !p-0",
33856
- dropdownIndicator: () => `m-0 p-0`,
33857
- clearIndicator: () => `m-0 p-0'`,
33858
- menu: () => "z-[99]"
33859
- },
33860
- placeholder,
33861
- onMenuOpen: fetchMoreOptions,
33862
- onMenuClose: () => {
33863
- const filteredDomain = [...domainObject ?? []]?.filter(
33864
- (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
33865
- ) || [];
33866
- setInputValue("");
33867
- setDomainObject(filteredDomain);
33868
- },
33869
- onChange: handleSelectChange,
33870
- onInputChange: (newValue, { action }) => {
33871
- if (action === "input-change") {
33872
- setInputValue(newValue);
33873
- }
33874
- },
33875
- value: selectedOption,
33876
- isSearchable: true,
33877
- isClearable: true,
33878
- menuPlacement: "auto",
33879
- menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33880
- styles: {
33881
- control: () => ({
33882
- maxWidth: "100%",
33883
- minWidth: isEditTable ? "max-content" : "100%",
33884
- background: isEditTable ? "transparent" : "initial"
33885
- }),
33886
- container: (base) => ({
33887
- ...base,
33888
- height: "100%"
33889
- }),
33890
- clearIndicator: (base) => ({
33891
- ...base,
33892
- padding: "0"
33893
- }),
33894
- valueContainer: (base) => ({
33895
- ...base,
33896
- padding: "0",
33897
- margin: "0"
33898
- }),
33899
- menuPortal: (base) => ({
33900
- ...base,
33901
- zIndex: 999
33902
- }),
33903
- option: (base, state) => ({
33904
- ...base,
33905
- cursor: "pointer",
33906
- backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
33907
- color: "#060606",
33908
- borderRadius: "8px"
33909
- }),
33910
- menu: (base) => ({
33911
- ...base,
33912
- zIndex: 999,
33913
- width: "100%",
33914
- minWidth: "100%",
33915
- borderRadius: "10px"
33916
- }),
33917
- menuList: (base) => ({
33918
- ...base,
33919
- padding: "4px"
33920
- })
33921
- },
33922
- components: {
33923
- MenuList: (menuListProps) => /* @__PURE__ */ jsx112(
33924
- CustomMenuList2,
33925
- {
33926
- ...menuListProps,
33927
- selectProps: {
33928
- ...menuListProps.selectProps,
33929
- setIsShowModalMany2Many
33858
+ return /* @__PURE__ */ jsxs75(
33859
+ "div",
33860
+ {
33861
+ className: "h-full",
33862
+ onMouseEnter: () => setHover(true),
33863
+ onMouseLeave: () => setHover(false),
33864
+ children: [
33865
+ /* @__PURE__ */ jsx112(
33866
+ StateManagedSelect$1,
33867
+ {
33868
+ menuShouldScrollIntoView: false,
33869
+ options: listOptions,
33870
+ classNames: {
33871
+ control: ({ isFocused }) => `widget many2one-widget ${baseClassName} ${isForm && (isFocused ? "focused" : "")}`,
33872
+ valueContainer: () => "!m-0 !p-0 ",
33873
+ singleValue: () => `!m-0`,
33874
+ input: () => "!m-0 !p-0",
33875
+ dropdownIndicator: () => `m-0 p-0`,
33876
+ clearIndicator: () => `m-0 p-0'`,
33877
+ menu: () => "z-[99]"
33878
+ },
33879
+ placeholder,
33880
+ onMenuOpen: () => {
33881
+ fetchMoreOptions();
33882
+ setMenuOpen(true);
33883
+ },
33884
+ onBlur: () => {
33885
+ setHover(false);
33886
+ },
33887
+ onMenuClose: () => {
33888
+ const filteredDomain = [...domainObject ?? []]?.filter(
33889
+ (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
33890
+ ) || [];
33891
+ setInputValue("");
33892
+ setDomainObject(filteredDomain);
33893
+ setMenuOpen(false);
33894
+ },
33895
+ onChange: handleSelectChange,
33896
+ onInputChange: (newValue, { action }) => {
33897
+ if (action === "input-change") {
33898
+ setInputValue(newValue);
33930
33899
  }
33931
- }
33932
- ),
33933
- IndicatorSeparator: () => null,
33934
- DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx112(components.DropdownIndicator, { ...props2 })
33935
- },
33936
- isDisabled: readonly,
33937
- noOptionsMessage: () => t3(isFetching ? "loading" : "no-available")
33938
- }
33939
- ),
33940
- !isEditTable && error2 && /* @__PURE__ */ jsx112("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
33941
- ] });
33900
+ },
33901
+ value: selectedOption,
33902
+ isSearchable: true,
33903
+ isClearable: menuOpen,
33904
+ menuPlacement: "auto",
33905
+ menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33906
+ styles: {
33907
+ control: () => ({
33908
+ maxWidth: "100%",
33909
+ minWidth: isEditTable ? "max-content" : "100%",
33910
+ background: isEditTable ? "transparent" : "initial"
33911
+ }),
33912
+ container: (base) => ({
33913
+ ...base,
33914
+ height: "100%"
33915
+ }),
33916
+ clearIndicator: (base) => ({
33917
+ ...base,
33918
+ padding: "0"
33919
+ }),
33920
+ dropdownIndicator: (base) => ({
33921
+ ...base,
33922
+ padding: "0",
33923
+ display: hover ? "flex" : "none"
33924
+ }),
33925
+ valueContainer: (base) => ({
33926
+ ...base,
33927
+ padding: "0",
33928
+ margin: "0"
33929
+ }),
33930
+ indicatorsContainer: (base) => ({
33931
+ ...base,
33932
+ padding: "0",
33933
+ margin: "0"
33934
+ }),
33935
+ menuPortal: (base) => ({
33936
+ ...base,
33937
+ zIndex: 999
33938
+ }),
33939
+ option: (base, state) => ({
33940
+ ...base,
33941
+ cursor: "pointer",
33942
+ backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
33943
+ color: "#060606",
33944
+ borderRadius: "8px"
33945
+ }),
33946
+ menu: (base) => ({
33947
+ ...base,
33948
+ zIndex: 999,
33949
+ width: "100%",
33950
+ minWidth: "100%",
33951
+ borderRadius: "10px"
33952
+ }),
33953
+ menuList: (base) => ({
33954
+ ...base,
33955
+ padding: "4px"
33956
+ })
33957
+ },
33958
+ components: {
33959
+ MenuList: (menuListProps) => /* @__PURE__ */ jsx112(
33960
+ CustomMenuList2,
33961
+ {
33962
+ ...menuListProps,
33963
+ selectProps: {
33964
+ ...menuListProps.selectProps,
33965
+ setIsShowModalMany2Many
33966
+ }
33967
+ }
33968
+ ),
33969
+ IndicatorSeparator: () => null,
33970
+ DropdownIndicator: (props2) => readonly || menuOpen ? null : /* @__PURE__ */ jsx112(components.DropdownIndicator, { ...props2 })
33971
+ },
33972
+ isDisabled: readonly,
33973
+ noOptionsMessage: () => t3(isFetching ? "loading" : "no-available")
33974
+ }
33975
+ ),
33976
+ !isEditTable && error2 && /* @__PURE__ */ jsx112("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
33977
+ ]
33978
+ }
33979
+ );
33942
33980
  }
33943
33981
  }
33944
33982
  )
package/dist/widgets.js CHANGED
@@ -12087,14 +12087,18 @@ var TableHead = (props) => {
12087
12087
  isDisplayCheckbox && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
12088
12088
  "th",
12089
12089
  {
12090
- className: ` table-checkbox-row th-checkbox w-[2%] text-left font-medium uppercase text-gray-500 p-3`,
12090
+ style: {
12091
+ width: "40px",
12092
+ maxWidth: "40px"
12093
+ },
12094
+ className: ` table-checkbox-row th-checkbox text-left font-medium uppercase text-gray-500 p-3`,
12091
12095
  children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
12092
12096
  "input",
12093
12097
  {
12094
12098
  type: "checkbox",
12095
12099
  checked: checkedAll,
12096
12100
  onChange: handleCheckBoxAll,
12097
- className: "ml-2 align-middle custom-checkbox"
12101
+ className: "align-middle custom-checkbox"
12098
12102
  }
12099
12103
  )
12100
12104
  }
@@ -31960,9 +31964,16 @@ var Many2ManyTagField = (props) => {
31960
31964
  }, [field?.value, options2]);
31961
31965
  const handleChange = (selectedOptions) => {
31962
31966
  const newValue = transfer(selectedOptions);
31963
- field.onChange(newValue);
31967
+ methods?.setValue(name2, newValue, { shouldDirty: true });
31964
31968
  onChange2?.(name2 ?? "", newValue);
31965
31969
  clearErrors(name2);
31970
+ newValue.forEach((item, index4) => {
31971
+ Object.keys(item).forEach((key) => {
31972
+ methods.setValue(`${name2}[${index4}].${key}`, item[key], {
31973
+ shouldDirty: true
31974
+ });
31975
+ });
31976
+ });
31966
31977
  };
31967
31978
  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "group h-full overflow-y-auto", children: [
31968
31979
  /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
@@ -33205,6 +33216,8 @@ var Many2OneField = (props) => {
33205
33216
  } : false
33206
33217
  },
33207
33218
  render: ({ field, fieldState: { error: error2 } }) => {
33219
+ const [menuOpen, setMenuOpen] = (0, import_react68.useState)(false);
33220
+ const [hover, setHover] = (0, import_react68.useState)(false);
33208
33221
  const currentValue = field?.value ? {
33209
33222
  value: field?.value?.id,
33210
33223
  label: field?.value?.display_name,
@@ -33218,103 +33231,128 @@ var Many2OneField = (props) => {
33218
33231
  methods?.clearErrors(name2);
33219
33232
  }
33220
33233
  }, [selectedOption]);
33221
- return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "h-full", children: [
33222
- /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
33223
- StateManagedSelect$1,
33224
- {
33225
- menuShouldScrollIntoView: false,
33226
- options: listOptions,
33227
- classNames: {
33228
- control: ({ isFocused }) => `widget many2one-widget ${baseClassName} ${isForm && (isFocused ? "focused" : "")}`,
33229
- valueContainer: () => "!m-0 !p-0 ",
33230
- singleValue: () => `!m-0`,
33231
- input: () => "!m-0 !p-0",
33232
- dropdownIndicator: () => `m-0 p-0`,
33233
- clearIndicator: () => `m-0 p-0'`,
33234
- menu: () => "z-[99]"
33235
- },
33236
- placeholder,
33237
- onMenuOpen: fetchMoreOptions,
33238
- onMenuClose: () => {
33239
- const filteredDomain = [...domainObject ?? []]?.filter(
33240
- (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
33241
- ) || [];
33242
- setInputValue("");
33243
- setDomainObject(filteredDomain);
33244
- },
33245
- onChange: handleSelectChange,
33246
- onInputChange: (newValue, { action }) => {
33247
- if (action === "input-change") {
33248
- setInputValue(newValue);
33249
- }
33250
- },
33251
- value: selectedOption,
33252
- isSearchable: true,
33253
- isClearable: true,
33254
- menuPlacement: "auto",
33255
- menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33256
- styles: {
33257
- control: () => ({
33258
- maxWidth: "100%",
33259
- minWidth: isEditTable ? "max-content" : "100%",
33260
- background: isEditTable ? "transparent" : "initial"
33261
- }),
33262
- container: (base) => ({
33263
- ...base,
33264
- height: "100%"
33265
- }),
33266
- clearIndicator: (base) => ({
33267
- ...base,
33268
- padding: "0"
33269
- }),
33270
- valueContainer: (base) => ({
33271
- ...base,
33272
- padding: "0",
33273
- margin: "0"
33274
- }),
33275
- menuPortal: (base) => ({
33276
- ...base,
33277
- zIndex: 999
33278
- }),
33279
- option: (base, state) => ({
33280
- ...base,
33281
- cursor: "pointer",
33282
- backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
33283
- color: "#060606",
33284
- borderRadius: "8px"
33285
- }),
33286
- menu: (base) => ({
33287
- ...base,
33288
- zIndex: 999,
33289
- width: "100%",
33290
- minWidth: "100%",
33291
- borderRadius: "10px"
33292
- }),
33293
- menuList: (base) => ({
33294
- ...base,
33295
- padding: "4px"
33296
- })
33297
- },
33298
- components: {
33299
- MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
33300
- CustomMenuList2,
33301
- {
33302
- ...menuListProps,
33303
- selectProps: {
33304
- ...menuListProps.selectProps,
33305
- setIsShowModalMany2Many
33234
+ return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
33235
+ "div",
33236
+ {
33237
+ className: "h-full",
33238
+ onMouseEnter: () => setHover(true),
33239
+ onMouseLeave: () => setHover(false),
33240
+ children: [
33241
+ /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
33242
+ StateManagedSelect$1,
33243
+ {
33244
+ menuShouldScrollIntoView: false,
33245
+ options: listOptions,
33246
+ classNames: {
33247
+ control: ({ isFocused }) => `widget many2one-widget ${baseClassName} ${isForm && (isFocused ? "focused" : "")}`,
33248
+ valueContainer: () => "!m-0 !p-0 ",
33249
+ singleValue: () => `!m-0`,
33250
+ input: () => "!m-0 !p-0",
33251
+ dropdownIndicator: () => `m-0 p-0`,
33252
+ clearIndicator: () => `m-0 p-0'`,
33253
+ menu: () => "z-[99]"
33254
+ },
33255
+ placeholder,
33256
+ onMenuOpen: () => {
33257
+ fetchMoreOptions();
33258
+ setMenuOpen(true);
33259
+ },
33260
+ onBlur: () => {
33261
+ setHover(false);
33262
+ },
33263
+ onMenuClose: () => {
33264
+ const filteredDomain = [...domainObject ?? []]?.filter(
33265
+ (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
33266
+ ) || [];
33267
+ setInputValue("");
33268
+ setDomainObject(filteredDomain);
33269
+ setMenuOpen(false);
33270
+ },
33271
+ onChange: handleSelectChange,
33272
+ onInputChange: (newValue, { action }) => {
33273
+ if (action === "input-change") {
33274
+ setInputValue(newValue);
33306
33275
  }
33307
- }
33308
- ),
33309
- IndicatorSeparator: () => null,
33310
- DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(components.DropdownIndicator, { ...props2 })
33311
- },
33312
- isDisabled: readonly,
33313
- noOptionsMessage: () => t3(isFetching ? "loading" : "no-available")
33314
- }
33315
- ),
33316
- !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
33317
- ] });
33276
+ },
33277
+ value: selectedOption,
33278
+ isSearchable: true,
33279
+ isClearable: menuOpen,
33280
+ menuPlacement: "auto",
33281
+ menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33282
+ styles: {
33283
+ control: () => ({
33284
+ maxWidth: "100%",
33285
+ minWidth: isEditTable ? "max-content" : "100%",
33286
+ background: isEditTable ? "transparent" : "initial"
33287
+ }),
33288
+ container: (base) => ({
33289
+ ...base,
33290
+ height: "100%"
33291
+ }),
33292
+ clearIndicator: (base) => ({
33293
+ ...base,
33294
+ padding: "0"
33295
+ }),
33296
+ dropdownIndicator: (base) => ({
33297
+ ...base,
33298
+ padding: "0",
33299
+ display: hover ? "flex" : "none"
33300
+ }),
33301
+ valueContainer: (base) => ({
33302
+ ...base,
33303
+ padding: "0",
33304
+ margin: "0"
33305
+ }),
33306
+ indicatorsContainer: (base) => ({
33307
+ ...base,
33308
+ padding: "0",
33309
+ margin: "0"
33310
+ }),
33311
+ menuPortal: (base) => ({
33312
+ ...base,
33313
+ zIndex: 999
33314
+ }),
33315
+ option: (base, state) => ({
33316
+ ...base,
33317
+ cursor: "pointer",
33318
+ backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
33319
+ color: "#060606",
33320
+ borderRadius: "8px"
33321
+ }),
33322
+ menu: (base) => ({
33323
+ ...base,
33324
+ zIndex: 999,
33325
+ width: "100%",
33326
+ minWidth: "100%",
33327
+ borderRadius: "10px"
33328
+ }),
33329
+ menuList: (base) => ({
33330
+ ...base,
33331
+ padding: "4px"
33332
+ })
33333
+ },
33334
+ components: {
33335
+ MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
33336
+ CustomMenuList2,
33337
+ {
33338
+ ...menuListProps,
33339
+ selectProps: {
33340
+ ...menuListProps.selectProps,
33341
+ setIsShowModalMany2Many
33342
+ }
33343
+ }
33344
+ ),
33345
+ IndicatorSeparator: () => null,
33346
+ DropdownIndicator: (props2) => readonly || menuOpen ? null : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(components.DropdownIndicator, { ...props2 })
33347
+ },
33348
+ isDisabled: readonly,
33349
+ noOptionsMessage: () => t3(isFetching ? "loading" : "no-available")
33350
+ }
33351
+ ),
33352
+ !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
33353
+ ]
33354
+ }
33355
+ );
33318
33356
  }
33319
33357
  }
33320
33358
  )
package/dist/widgets.mjs CHANGED
@@ -12024,14 +12024,18 @@ var TableHead = (props) => {
12024
12024
  isDisplayCheckbox && /* @__PURE__ */ jsx51(
12025
12025
  "th",
12026
12026
  {
12027
- className: ` table-checkbox-row th-checkbox w-[2%] text-left font-medium uppercase text-gray-500 p-3`,
12027
+ style: {
12028
+ width: "40px",
12029
+ maxWidth: "40px"
12030
+ },
12031
+ className: ` table-checkbox-row th-checkbox text-left font-medium uppercase text-gray-500 p-3`,
12028
12032
  children: /* @__PURE__ */ jsx51(
12029
12033
  "input",
12030
12034
  {
12031
12035
  type: "checkbox",
12032
12036
  checked: checkedAll,
12033
12037
  onChange: handleCheckBoxAll,
12034
- className: "ml-2 align-middle custom-checkbox"
12038
+ className: "align-middle custom-checkbox"
12035
12039
  }
12036
12040
  )
12037
12041
  }
@@ -31897,9 +31901,16 @@ var Many2ManyTagField = (props) => {
31897
31901
  }, [field?.value, options2]);
31898
31902
  const handleChange = (selectedOptions) => {
31899
31903
  const newValue = transfer(selectedOptions);
31900
- field.onChange(newValue);
31904
+ methods?.setValue(name2, newValue, { shouldDirty: true });
31901
31905
  onChange2?.(name2 ?? "", newValue);
31902
31906
  clearErrors(name2);
31907
+ newValue.forEach((item, index4) => {
31908
+ Object.keys(item).forEach((key) => {
31909
+ methods.setValue(`${name2}[${index4}].${key}`, item[key], {
31910
+ shouldDirty: true
31911
+ });
31912
+ });
31913
+ });
31903
31914
  };
31904
31915
  return /* @__PURE__ */ jsxs65("div", { className: "group h-full overflow-y-auto", children: [
31905
31916
  /* @__PURE__ */ jsx99(
@@ -33045,7 +33056,7 @@ var Many2ManyField = (props) => {
33045
33056
  };
33046
33057
 
33047
33058
  // src/widgets/basic/many2one-field/many2one.tsx
33048
- import React19, { useEffect as useEffect28 } from "react";
33059
+ import React19, { useEffect as useEffect28, useState as useState23 } from "react";
33049
33060
  import { Fragment as Fragment32, jsx as jsx112, jsxs as jsxs75 } from "react/jsx-runtime";
33050
33061
  var CustomMenuList2 = (props) => {
33051
33062
  const { t: t3 } = useI18n();
@@ -33142,6 +33153,8 @@ var Many2OneField = (props) => {
33142
33153
  } : false
33143
33154
  },
33144
33155
  render: ({ field, fieldState: { error: error2 } }) => {
33156
+ const [menuOpen, setMenuOpen] = useState23(false);
33157
+ const [hover, setHover] = useState23(false);
33145
33158
  const currentValue = field?.value ? {
33146
33159
  value: field?.value?.id,
33147
33160
  label: field?.value?.display_name,
@@ -33155,103 +33168,128 @@ var Many2OneField = (props) => {
33155
33168
  methods?.clearErrors(name2);
33156
33169
  }
33157
33170
  }, [selectedOption]);
33158
- return /* @__PURE__ */ jsxs75("div", { className: "h-full", children: [
33159
- /* @__PURE__ */ jsx112(
33160
- StateManagedSelect$1,
33161
- {
33162
- menuShouldScrollIntoView: false,
33163
- options: listOptions,
33164
- classNames: {
33165
- control: ({ isFocused }) => `widget many2one-widget ${baseClassName} ${isForm && (isFocused ? "focused" : "")}`,
33166
- valueContainer: () => "!m-0 !p-0 ",
33167
- singleValue: () => `!m-0`,
33168
- input: () => "!m-0 !p-0",
33169
- dropdownIndicator: () => `m-0 p-0`,
33170
- clearIndicator: () => `m-0 p-0'`,
33171
- menu: () => "z-[99]"
33172
- },
33173
- placeholder,
33174
- onMenuOpen: fetchMoreOptions,
33175
- onMenuClose: () => {
33176
- const filteredDomain = [...domainObject ?? []]?.filter(
33177
- (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
33178
- ) || [];
33179
- setInputValue("");
33180
- setDomainObject(filteredDomain);
33181
- },
33182
- onChange: handleSelectChange,
33183
- onInputChange: (newValue, { action }) => {
33184
- if (action === "input-change") {
33185
- setInputValue(newValue);
33186
- }
33187
- },
33188
- value: selectedOption,
33189
- isSearchable: true,
33190
- isClearable: true,
33191
- menuPlacement: "auto",
33192
- menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33193
- styles: {
33194
- control: () => ({
33195
- maxWidth: "100%",
33196
- minWidth: isEditTable ? "max-content" : "100%",
33197
- background: isEditTable ? "transparent" : "initial"
33198
- }),
33199
- container: (base) => ({
33200
- ...base,
33201
- height: "100%"
33202
- }),
33203
- clearIndicator: (base) => ({
33204
- ...base,
33205
- padding: "0"
33206
- }),
33207
- valueContainer: (base) => ({
33208
- ...base,
33209
- padding: "0",
33210
- margin: "0"
33211
- }),
33212
- menuPortal: (base) => ({
33213
- ...base,
33214
- zIndex: 999
33215
- }),
33216
- option: (base, state) => ({
33217
- ...base,
33218
- cursor: "pointer",
33219
- backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
33220
- color: "#060606",
33221
- borderRadius: "8px"
33222
- }),
33223
- menu: (base) => ({
33224
- ...base,
33225
- zIndex: 999,
33226
- width: "100%",
33227
- minWidth: "100%",
33228
- borderRadius: "10px"
33229
- }),
33230
- menuList: (base) => ({
33231
- ...base,
33232
- padding: "4px"
33233
- })
33234
- },
33235
- components: {
33236
- MenuList: (menuListProps) => /* @__PURE__ */ jsx112(
33237
- CustomMenuList2,
33238
- {
33239
- ...menuListProps,
33240
- selectProps: {
33241
- ...menuListProps.selectProps,
33242
- setIsShowModalMany2Many
33171
+ return /* @__PURE__ */ jsxs75(
33172
+ "div",
33173
+ {
33174
+ className: "h-full",
33175
+ onMouseEnter: () => setHover(true),
33176
+ onMouseLeave: () => setHover(false),
33177
+ children: [
33178
+ /* @__PURE__ */ jsx112(
33179
+ StateManagedSelect$1,
33180
+ {
33181
+ menuShouldScrollIntoView: false,
33182
+ options: listOptions,
33183
+ classNames: {
33184
+ control: ({ isFocused }) => `widget many2one-widget ${baseClassName} ${isForm && (isFocused ? "focused" : "")}`,
33185
+ valueContainer: () => "!m-0 !p-0 ",
33186
+ singleValue: () => `!m-0`,
33187
+ input: () => "!m-0 !p-0",
33188
+ dropdownIndicator: () => `m-0 p-0`,
33189
+ clearIndicator: () => `m-0 p-0'`,
33190
+ menu: () => "z-[99]"
33191
+ },
33192
+ placeholder,
33193
+ onMenuOpen: () => {
33194
+ fetchMoreOptions();
33195
+ setMenuOpen(true);
33196
+ },
33197
+ onBlur: () => {
33198
+ setHover(false);
33199
+ },
33200
+ onMenuClose: () => {
33201
+ const filteredDomain = [...domainObject ?? []]?.filter(
33202
+ (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
33203
+ ) || [];
33204
+ setInputValue("");
33205
+ setDomainObject(filteredDomain);
33206
+ setMenuOpen(false);
33207
+ },
33208
+ onChange: handleSelectChange,
33209
+ onInputChange: (newValue, { action }) => {
33210
+ if (action === "input-change") {
33211
+ setInputValue(newValue);
33243
33212
  }
33244
- }
33245
- ),
33246
- IndicatorSeparator: () => null,
33247
- DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx112(components.DropdownIndicator, { ...props2 })
33248
- },
33249
- isDisabled: readonly,
33250
- noOptionsMessage: () => t3(isFetching ? "loading" : "no-available")
33251
- }
33252
- ),
33253
- !isEditTable && error2 && /* @__PURE__ */ jsx112("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
33254
- ] });
33213
+ },
33214
+ value: selectedOption,
33215
+ isSearchable: true,
33216
+ isClearable: menuOpen,
33217
+ menuPlacement: "auto",
33218
+ menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33219
+ styles: {
33220
+ control: () => ({
33221
+ maxWidth: "100%",
33222
+ minWidth: isEditTable ? "max-content" : "100%",
33223
+ background: isEditTable ? "transparent" : "initial"
33224
+ }),
33225
+ container: (base) => ({
33226
+ ...base,
33227
+ height: "100%"
33228
+ }),
33229
+ clearIndicator: (base) => ({
33230
+ ...base,
33231
+ padding: "0"
33232
+ }),
33233
+ dropdownIndicator: (base) => ({
33234
+ ...base,
33235
+ padding: "0",
33236
+ display: hover ? "flex" : "none"
33237
+ }),
33238
+ valueContainer: (base) => ({
33239
+ ...base,
33240
+ padding: "0",
33241
+ margin: "0"
33242
+ }),
33243
+ indicatorsContainer: (base) => ({
33244
+ ...base,
33245
+ padding: "0",
33246
+ margin: "0"
33247
+ }),
33248
+ menuPortal: (base) => ({
33249
+ ...base,
33250
+ zIndex: 999
33251
+ }),
33252
+ option: (base, state) => ({
33253
+ ...base,
33254
+ cursor: "pointer",
33255
+ backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
33256
+ color: "#060606",
33257
+ borderRadius: "8px"
33258
+ }),
33259
+ menu: (base) => ({
33260
+ ...base,
33261
+ zIndex: 999,
33262
+ width: "100%",
33263
+ minWidth: "100%",
33264
+ borderRadius: "10px"
33265
+ }),
33266
+ menuList: (base) => ({
33267
+ ...base,
33268
+ padding: "4px"
33269
+ })
33270
+ },
33271
+ components: {
33272
+ MenuList: (menuListProps) => /* @__PURE__ */ jsx112(
33273
+ CustomMenuList2,
33274
+ {
33275
+ ...menuListProps,
33276
+ selectProps: {
33277
+ ...menuListProps.selectProps,
33278
+ setIsShowModalMany2Many
33279
+ }
33280
+ }
33281
+ ),
33282
+ IndicatorSeparator: () => null,
33283
+ DropdownIndicator: (props2) => readonly || menuOpen ? null : /* @__PURE__ */ jsx112(components.DropdownIndicator, { ...props2 })
33284
+ },
33285
+ isDisabled: readonly,
33286
+ noOptionsMessage: () => t3(isFetching ? "loading" : "no-available")
33287
+ }
33288
+ ),
33289
+ !isEditTable && error2 && /* @__PURE__ */ jsx112("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
33290
+ ]
33291
+ }
33292
+ );
33255
33293
  }
33256
33294
  }
33257
33295
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fctc/sme-widget-ui",
3
- "version": "2.6.6",
3
+ "version": "2.6.8",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",