@fctc/sme-widget-ui 2.6.6 → 2.6.7

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