@fctc/sme-widget-ui 1.6.3 → 1.6.4

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
  1. package/dist/index.js +69 -40
  2. package/dist/index.mjs +71 -42
  3. package/dist/widgets.d.mts +1 -0
  4. package/dist/widgets.d.ts +1 -0
  5. package/dist/widgets.js +69 -40
  6. package/dist/widgets.mjs +71 -42
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -12444,6 +12444,11 @@ var TableHead = (props) => {
12444
12444
  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
12445
12445
  "span",
12446
12446
  {
12447
+ style: {
12448
+ width: "12px",
12449
+ height: "12px",
12450
+ color: "8px"
12451
+ },
12447
12452
  "data-tooltip-id": `field-help-${col?.field?.name}`,
12448
12453
  className: "lowercase rounded-full bg-primary size-[12px] text-[8px] text-white flex items-center justify-center",
12449
12454
  children: "i"
@@ -33575,16 +33580,22 @@ var Many2ManyTagField = (props) => {
33575
33580
  }),
33576
33581
  option: (provided, { isFocused, isSelected }) => ({
33577
33582
  ...provided,
33578
- backgroundColor: isSelected ? "#007bff" : isFocused ? "#f1f1f1" : "white",
33583
+ backgroundColor: isSelected || isFocused ? "rgba(66,66,66,0.08)" : "#FFF",
33579
33584
  color: isSelected ? "white" : "",
33580
33585
  cursor: "pointer",
33581
- transition: "all 0.2s ease"
33586
+ transition: "all 0.2s ease",
33587
+ borderRadius: "8px"
33582
33588
  }),
33583
33589
  menu: (base) => ({
33584
33590
  ...base,
33585
33591
  zIndex: 9999,
33586
33592
  width: "300px",
33587
- minWidth: "300px"
33593
+ minWidth: "300px",
33594
+ borderRadius: "10px"
33595
+ }),
33596
+ menuList: (base) => ({
33597
+ ...base,
33598
+ padding: "4px"
33588
33599
  })
33589
33600
  },
33590
33601
  components: isUser ? {
@@ -33988,61 +33999,67 @@ var SelectDropdownField = (props) => {
33988
33999
  onChange2 && onChange2(name2 ?? "", selectedOption.value);
33989
34000
  },
33990
34001
  value: defaultValue || null,
33991
- required: !invisible && required,
33992
- styles: {
33993
- control: () => ({}),
33994
- clearIndicator: (base) => ({
33995
- ...base,
33996
- padding: "0"
33997
- })
33998
- }
34002
+ required: !invisible && required
33999
34003
  };
34000
34004
  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
34001
34005
  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "group", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
34002
34006
  StateManagedSelect$1,
34003
34007
  {
34004
34008
  ...commonProps,
34009
+ classNames: {
34010
+ 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"}`,
34011
+ valueContainer: () => "!m-0 !p-0 ",
34012
+ singleValue: () => `!m-0`,
34013
+ input: () => "!m-0 !p-0",
34014
+ dropdownIndicator: () => `m-0 p-0`,
34015
+ clearIndicator: () => `m-0 p-0'`,
34016
+ menu: () => "z-[99]"
34017
+ },
34005
34018
  styles: {
34006
- control: (base, state) => ({
34019
+ control: () => ({}),
34020
+ container: (base) => ({
34007
34021
  ...base,
34008
- display: "flex",
34009
- minHeight: "44px",
34010
- cursor: readonly ? "not-allowed" : "pointer",
34011
- backgroundColor: "#FFF",
34012
- borderRadius: isEditTable ? "0px" : "10px",
34013
- padding: "4px 0px",
34014
- border: isForm ? state.isFocused ? "1px solid var(--color-primary)" : "1px solid rgba(66,66,66,0.12)" : "none",
34015
- boxShadow: "none",
34016
- "&:hover": {
34017
- borderColor: "var(--color-primary)"
34018
- },
34019
- ...isEditTable && {
34020
- minWidth: "300px",
34021
- maxWidth: "300px",
34022
- borderBottom: "1px solid transparent",
34023
- background: "transparent"
34024
- }
34022
+ height: "100%"
34025
34023
  }),
34026
34024
  clearIndicator: (base) => ({
34027
34025
  ...base,
34028
34026
  padding: "0"
34029
34027
  }),
34028
+ valueContainer: (base) => ({
34029
+ ...base,
34030
+ padding: "0",
34031
+ margin: "0"
34032
+ }),
34030
34033
  menuPortal: (base) => ({
34031
34034
  ...base,
34032
- zIndex: 9999
34035
+ zIndex: 999
34036
+ }),
34037
+ option: (base, state) => ({
34038
+ ...base,
34039
+ cursor: "pointer",
34040
+ backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
34041
+ color: "#060606",
34042
+ borderRadius: "8px",
34043
+ fontWeight: 400
34033
34044
  }),
34034
34045
  menu: (base) => ({
34035
34046
  ...base,
34036
- zIndex: 9999,
34037
- width: isEditTable ? "300px" : "100%",
34038
- minWidth: isEditTable ? "300px" : "100%"
34047
+ zIndex: 999,
34048
+ width: isEditTable ? "auto" : "100%",
34049
+ minWidth: isEditTable ? "200px" : "100%",
34050
+ borderRadius: "10px"
34051
+ }),
34052
+ menuList: (base) => ({
34053
+ ...base,
34054
+ padding: "4px"
34039
34055
  })
34040
34056
  },
34041
34057
  menuPortalTarget: typeof window !== "undefined" ? document.body : null,
34042
34058
  components: {
34043
34059
  IndicatorSeparator: () => null,
34044
34060
  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(components.DropdownIndicator, { ...props2 })
34045
- }
34061
+ },
34062
+ noOptionsMessage: () => i18n_default.t("no-available")
34046
34063
  }
34047
34064
  ) }),
34048
34065
  !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -34675,13 +34692,13 @@ var Many2OneField = (props) => {
34675
34692
  methods,
34676
34693
  required,
34677
34694
  string,
34678
- //return
34679
34695
  allowShowDetail,
34680
34696
  index: index4,
34681
34697
  contextObject,
34682
34698
  renderDetail,
34683
34699
  tempSelectedOption,
34684
34700
  options: options2,
34701
+ listOptions,
34685
34702
  fetchMoreOptions,
34686
34703
  handleSelectChange,
34687
34704
  isFetching,
@@ -34695,7 +34712,7 @@ var Many2OneField = (props) => {
34695
34712
  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
34696
34713
  allowShowDetail && renderDetail({
34697
34714
  idToolTip: String(name2) + Number(index4),
34698
- model: relation,
34715
+ model: options2?.model ?? relation,
34699
34716
  context: contextObject,
34700
34717
  idForm: id
34701
34718
  }),
@@ -34713,7 +34730,7 @@ var Many2OneField = (props) => {
34713
34730
  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
34714
34731
  allowShowDetail && renderDetail({
34715
34732
  idToolTip: String(name2),
34716
- model: relation,
34733
+ model: options2?.model ?? relation,
34717
34734
  context: contextObject,
34718
34735
  idForm: methods?.getValues(name2)?.id || methods?.getValues(name2)
34719
34736
  }),
@@ -34736,7 +34753,7 @@ var Many2OneField = (props) => {
34736
34753
  },
34737
34754
  render: ({ field, fieldState: { error: error2 } }) => {
34738
34755
  const currentValue = field?.value ? { value: field?.value?.id, label: field?.value?.display_name } : null;
34739
- const selectedOption = tempSelectedOption && options2?.length > 0 ? options2.find(
34756
+ const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
34740
34757
  (option) => option.value === tempSelectedOption?.value
34741
34758
  ) : currentValue ? currentValue : null;
34742
34759
  (0, import_react64.useEffect)(() => {
@@ -34749,7 +34766,7 @@ var Many2OneField = (props) => {
34749
34766
  StateManagedSelect$1,
34750
34767
  {
34751
34768
  menuShouldScrollIntoView: false,
34752
- options: options2,
34769
+ options: listOptions,
34753
34770
  classNames: {
34754
34771
  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"}`,
34755
34772
  valueContainer: () => "!m-0 !p-0 ",
@@ -34798,11 +34815,23 @@ var Many2OneField = (props) => {
34798
34815
  ...base,
34799
34816
  zIndex: 999
34800
34817
  }),
34818
+ option: (base, state) => ({
34819
+ ...base,
34820
+ cursor: "pointer",
34821
+ backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
34822
+ color: "#060606",
34823
+ borderRadius: "8px"
34824
+ }),
34801
34825
  menu: (base) => ({
34802
34826
  ...base,
34803
34827
  zIndex: 999,
34804
34828
  width: isEditTable ? "auto" : "100%",
34805
- minWidth: isEditTable ? "200px" : "100%"
34829
+ minWidth: isEditTable ? "200px" : "100%",
34830
+ borderRadius: "10px"
34831
+ }),
34832
+ menuList: (base) => ({
34833
+ ...base,
34834
+ padding: "4px"
34806
34835
  })
34807
34836
  },
34808
34837
  components: {
package/dist/index.mjs CHANGED
@@ -12325,6 +12325,11 @@ var TableHead = (props) => {
12325
12325
  /* @__PURE__ */ jsx44(
12326
12326
  "span",
12327
12327
  {
12328
+ style: {
12329
+ width: "12px",
12330
+ height: "12px",
12331
+ color: "8px"
12332
+ },
12328
12333
  "data-tooltip-id": `field-help-${col?.field?.name}`,
12329
12334
  className: "lowercase rounded-full bg-primary size-[12px] text-[8px] text-white flex items-center justify-center",
12330
12335
  children: "i"
@@ -33456,16 +33461,22 @@ var Many2ManyTagField = (props) => {
33456
33461
  }),
33457
33462
  option: (provided, { isFocused, isSelected }) => ({
33458
33463
  ...provided,
33459
- backgroundColor: isSelected ? "#007bff" : isFocused ? "#f1f1f1" : "white",
33464
+ backgroundColor: isSelected || isFocused ? "rgba(66,66,66,0.08)" : "#FFF",
33460
33465
  color: isSelected ? "white" : "",
33461
33466
  cursor: "pointer",
33462
- transition: "all 0.2s ease"
33467
+ transition: "all 0.2s ease",
33468
+ borderRadius: "8px"
33463
33469
  }),
33464
33470
  menu: (base) => ({
33465
33471
  ...base,
33466
33472
  zIndex: 9999,
33467
33473
  width: "300px",
33468
- minWidth: "300px"
33474
+ minWidth: "300px",
33475
+ borderRadius: "10px"
33476
+ }),
33477
+ menuList: (base) => ({
33478
+ ...base,
33479
+ padding: "4px"
33469
33480
  })
33470
33481
  },
33471
33482
  components: isUser ? {
@@ -33869,61 +33880,67 @@ var SelectDropdownField = (props) => {
33869
33880
  onChange2 && onChange2(name2 ?? "", selectedOption.value);
33870
33881
  },
33871
33882
  value: defaultValue || null,
33872
- required: !invisible && required,
33873
- styles: {
33874
- control: () => ({}),
33875
- clearIndicator: (base) => ({
33876
- ...base,
33877
- padding: "0"
33878
- })
33879
- }
33883
+ required: !invisible && required
33880
33884
  };
33881
33885
  return /* @__PURE__ */ jsxs67(Fragment29, { children: [
33882
33886
  /* @__PURE__ */ jsx98("div", { className: "group", children: /* @__PURE__ */ jsx98(
33883
33887
  StateManagedSelect$1,
33884
33888
  {
33885
33889
  ...commonProps,
33890
+ classNames: {
33891
+ 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"}`,
33892
+ valueContainer: () => "!m-0 !p-0 ",
33893
+ singleValue: () => `!m-0`,
33894
+ input: () => "!m-0 !p-0",
33895
+ dropdownIndicator: () => `m-0 p-0`,
33896
+ clearIndicator: () => `m-0 p-0'`,
33897
+ menu: () => "z-[99]"
33898
+ },
33886
33899
  styles: {
33887
- control: (base, state) => ({
33900
+ control: () => ({}),
33901
+ container: (base) => ({
33888
33902
  ...base,
33889
- display: "flex",
33890
- minHeight: "44px",
33891
- cursor: readonly ? "not-allowed" : "pointer",
33892
- backgroundColor: "#FFF",
33893
- borderRadius: isEditTable ? "0px" : "10px",
33894
- padding: "4px 0px",
33895
- border: isForm ? state.isFocused ? "1px solid var(--color-primary)" : "1px solid rgba(66,66,66,0.12)" : "none",
33896
- boxShadow: "none",
33897
- "&:hover": {
33898
- borderColor: "var(--color-primary)"
33899
- },
33900
- ...isEditTable && {
33901
- minWidth: "300px",
33902
- maxWidth: "300px",
33903
- borderBottom: "1px solid transparent",
33904
- background: "transparent"
33905
- }
33903
+ height: "100%"
33906
33904
  }),
33907
33905
  clearIndicator: (base) => ({
33908
33906
  ...base,
33909
33907
  padding: "0"
33910
33908
  }),
33909
+ valueContainer: (base) => ({
33910
+ ...base,
33911
+ padding: "0",
33912
+ margin: "0"
33913
+ }),
33911
33914
  menuPortal: (base) => ({
33912
33915
  ...base,
33913
- zIndex: 9999
33916
+ zIndex: 999
33917
+ }),
33918
+ option: (base, state) => ({
33919
+ ...base,
33920
+ cursor: "pointer",
33921
+ backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
33922
+ color: "#060606",
33923
+ borderRadius: "8px",
33924
+ fontWeight: 400
33914
33925
  }),
33915
33926
  menu: (base) => ({
33916
33927
  ...base,
33917
- zIndex: 9999,
33918
- width: isEditTable ? "300px" : "100%",
33919
- minWidth: isEditTable ? "300px" : "100%"
33928
+ zIndex: 999,
33929
+ width: isEditTable ? "auto" : "100%",
33930
+ minWidth: isEditTable ? "200px" : "100%",
33931
+ borderRadius: "10px"
33932
+ }),
33933
+ menuList: (base) => ({
33934
+ ...base,
33935
+ padding: "4px"
33920
33936
  })
33921
33937
  },
33922
33938
  menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33923
33939
  components: {
33924
33940
  IndicatorSeparator: () => null,
33925
33941
  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ jsx98(components.DropdownIndicator, { ...props2 })
33926
- }
33942
+ },
33943
+ noOptionsMessage: () => i18n_default.t("no-available")
33927
33944
  }
33928
33945
  ) }),
33929
33946
  !isEditTable && error2 && /* @__PURE__ */ jsx98("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -34556,13 +34573,13 @@ var Many2OneField = (props) => {
34556
34573
  methods,
34557
34574
  required,
34558
34575
  string,
34559
- //return
34560
34576
  allowShowDetail,
34561
34577
  index: index4,
34562
34578
  contextObject,
34563
34579
  renderDetail,
34564
34580
  tempSelectedOption,
34565
34581
  options: options2,
34582
+ listOptions,
34566
34583
  fetchMoreOptions,
34567
34584
  handleSelectChange,
34568
34585
  isFetching,
@@ -34576,7 +34593,7 @@ var Many2OneField = (props) => {
34576
34593
  return /* @__PURE__ */ jsxs72(Fragment31, { children: [
34577
34594
  allowShowDetail && renderDetail({
34578
34595
  idToolTip: String(name2) + Number(index4),
34579
- model: relation,
34596
+ model: options2?.model ?? relation,
34580
34597
  context: contextObject,
34581
34598
  idForm: id
34582
34599
  }),
@@ -34594,7 +34611,7 @@ var Many2OneField = (props) => {
34594
34611
  return /* @__PURE__ */ jsxs72(Fragment31, { children: [
34595
34612
  allowShowDetail && renderDetail({
34596
34613
  idToolTip: String(name2),
34597
- model: relation,
34614
+ model: options2?.model ?? relation,
34598
34615
  context: contextObject,
34599
34616
  idForm: methods?.getValues(name2)?.id || methods?.getValues(name2)
34600
34617
  }),
@@ -34617,7 +34634,7 @@ var Many2OneField = (props) => {
34617
34634
  },
34618
34635
  render: ({ field, fieldState: { error: error2 } }) => {
34619
34636
  const currentValue = field?.value ? { value: field?.value?.id, label: field?.value?.display_name } : null;
34620
- const selectedOption = tempSelectedOption && options2?.length > 0 ? options2.find(
34637
+ const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
34621
34638
  (option) => option.value === tempSelectedOption?.value
34622
34639
  ) : currentValue ? currentValue : null;
34623
34640
  useEffect25(() => {
@@ -34630,7 +34647,7 @@ var Many2OneField = (props) => {
34630
34647
  StateManagedSelect$1,
34631
34648
  {
34632
34649
  menuShouldScrollIntoView: false,
34633
- options: options2,
34650
+ options: listOptions,
34634
34651
  classNames: {
34635
34652
  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"}`,
34636
34653
  valueContainer: () => "!m-0 !p-0 ",
@@ -34679,11 +34696,23 @@ var Many2OneField = (props) => {
34679
34696
  ...base,
34680
34697
  zIndex: 999
34681
34698
  }),
34699
+ option: (base, state) => ({
34700
+ ...base,
34701
+ cursor: "pointer",
34702
+ backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
34703
+ color: "#060606",
34704
+ borderRadius: "8px"
34705
+ }),
34682
34706
  menu: (base) => ({
34683
34707
  ...base,
34684
34708
  zIndex: 999,
34685
34709
  width: isEditTable ? "auto" : "100%",
34686
- minWidth: isEditTable ? "200px" : "100%"
34710
+ minWidth: isEditTable ? "200px" : "100%",
34711
+ borderRadius: "10px"
34712
+ }),
34713
+ menuList: (base) => ({
34714
+ ...base,
34715
+ padding: "4px"
34687
34716
  })
34688
34717
  },
34689
34718
  components: {
@@ -34804,11 +34833,11 @@ var StatusbarDurationField = (props) => {
34804
34833
  };
34805
34834
 
34806
34835
  // src/widgets/basic/status-bar-field/option/option.tsx
34807
- import { useMemo as useMemo11 } from "react";
34836
+ import { useMemo as useMemo10 } from "react";
34808
34837
  import { jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
34809
34838
  var StatusBarOptionField = (props) => {
34810
34839
  const { selection, defaultValue } = props;
34811
- const memoizedStatusOptions = useMemo11(() => selection, [selection]);
34840
+ const memoizedStatusOptions = useMemo10(() => selection, [selection]);
34812
34841
  return /* @__PURE__ */ jsx106(
34813
34842
  "div",
34814
34843
  {
package/dist/widgets.d.mts CHANGED
@@ -444,6 +444,7 @@ interface Many2OneProps extends IInputFieldProps {
444
444
  setIsShowModalMany2Many?: any;
445
445
  setInputValue?: any;
446
446
  setDomainObject?: any;
447
+ listOptions?: any;
447
448
  }
448
449
 
449
450
  declare const Many2OneField: (props: Many2OneProps) => JSX.Element;
package/dist/widgets.d.ts CHANGED
@@ -444,6 +444,7 @@ interface Many2OneProps extends IInputFieldProps {
444
444
  setIsShowModalMany2Many?: any;
445
445
  setInputValue?: any;
446
446
  setDomainObject?: any;
447
+ listOptions?: any;
447
448
  }
448
449
 
449
450
  declare const Many2OneField: (props: Many2OneProps) => JSX.Element;
package/dist/widgets.js CHANGED
@@ -12059,6 +12059,11 @@ var TableHead = (props) => {
12059
12059
  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
12060
12060
  "span",
12061
12061
  {
12062
+ style: {
12063
+ width: "12px",
12064
+ height: "12px",
12065
+ color: "8px"
12066
+ },
12062
12067
  "data-tooltip-id": `field-help-${col?.field?.name}`,
12063
12068
  className: "lowercase rounded-full bg-primary size-[12px] text-[8px] text-white flex items-center justify-center",
12064
12069
  children: "i"
@@ -33201,16 +33206,22 @@ var Many2ManyTagField = (props) => {
33201
33206
  }),
33202
33207
  option: (provided, { isFocused, isSelected }) => ({
33203
33208
  ...provided,
33204
- backgroundColor: isSelected ? "#007bff" : isFocused ? "#f1f1f1" : "white",
33209
+ backgroundColor: isSelected || isFocused ? "rgba(66,66,66,0.08)" : "#FFF",
33205
33210
  color: isSelected ? "white" : "",
33206
33211
  cursor: "pointer",
33207
- transition: "all 0.2s ease"
33212
+ transition: "all 0.2s ease",
33213
+ borderRadius: "8px"
33208
33214
  }),
33209
33215
  menu: (base) => ({
33210
33216
  ...base,
33211
33217
  zIndex: 9999,
33212
33218
  width: "300px",
33213
- minWidth: "300px"
33219
+ minWidth: "300px",
33220
+ borderRadius: "10px"
33221
+ }),
33222
+ menuList: (base) => ({
33223
+ ...base,
33224
+ padding: "4px"
33214
33225
  })
33215
33226
  },
33216
33227
  components: isUser ? {
@@ -33614,61 +33625,67 @@ var SelectDropdownField = (props) => {
33614
33625
  onChange2 && onChange2(name2 ?? "", selectedOption.value);
33615
33626
  },
33616
33627
  value: defaultValue || null,
33617
- required: !invisible && required,
33618
- styles: {
33619
- control: () => ({}),
33620
- clearIndicator: (base) => ({
33621
- ...base,
33622
- padding: "0"
33623
- })
33624
- }
33628
+ required: !invisible && required
33625
33629
  };
33626
33630
  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
33627
33631
  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "group", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
33628
33632
  StateManagedSelect$1,
33629
33633
  {
33630
33634
  ...commonProps,
33635
+ classNames: {
33636
+ 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"}`,
33637
+ valueContainer: () => "!m-0 !p-0 ",
33638
+ singleValue: () => `!m-0`,
33639
+ input: () => "!m-0 !p-0",
33640
+ dropdownIndicator: () => `m-0 p-0`,
33641
+ clearIndicator: () => `m-0 p-0'`,
33642
+ menu: () => "z-[99]"
33643
+ },
33631
33644
  styles: {
33632
- control: (base, state) => ({
33645
+ control: () => ({}),
33646
+ container: (base) => ({
33633
33647
  ...base,
33634
- display: "flex",
33635
- minHeight: "44px",
33636
- cursor: readonly ? "not-allowed" : "pointer",
33637
- backgroundColor: "#FFF",
33638
- borderRadius: isEditTable ? "0px" : "10px",
33639
- padding: "4px 0px",
33640
- border: isForm ? state.isFocused ? "1px solid var(--color-primary)" : "1px solid rgba(66,66,66,0.12)" : "none",
33641
- boxShadow: "none",
33642
- "&:hover": {
33643
- borderColor: "var(--color-primary)"
33644
- },
33645
- ...isEditTable && {
33646
- minWidth: "300px",
33647
- maxWidth: "300px",
33648
- borderBottom: "1px solid transparent",
33649
- background: "transparent"
33650
- }
33648
+ height: "100%"
33651
33649
  }),
33652
33650
  clearIndicator: (base) => ({
33653
33651
  ...base,
33654
33652
  padding: "0"
33655
33653
  }),
33654
+ valueContainer: (base) => ({
33655
+ ...base,
33656
+ padding: "0",
33657
+ margin: "0"
33658
+ }),
33656
33659
  menuPortal: (base) => ({
33657
33660
  ...base,
33658
- zIndex: 9999
33661
+ zIndex: 999
33662
+ }),
33663
+ option: (base, state) => ({
33664
+ ...base,
33665
+ cursor: "pointer",
33666
+ backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
33667
+ color: "#060606",
33668
+ borderRadius: "8px",
33669
+ fontWeight: 400
33659
33670
  }),
33660
33671
  menu: (base) => ({
33661
33672
  ...base,
33662
- zIndex: 9999,
33663
- width: isEditTable ? "300px" : "100%",
33664
- minWidth: isEditTable ? "300px" : "100%"
33673
+ zIndex: 999,
33674
+ width: isEditTable ? "auto" : "100%",
33675
+ minWidth: isEditTable ? "200px" : "100%",
33676
+ borderRadius: "10px"
33677
+ }),
33678
+ menuList: (base) => ({
33679
+ ...base,
33680
+ padding: "4px"
33665
33681
  })
33666
33682
  },
33667
33683
  menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33668
33684
  components: {
33669
33685
  IndicatorSeparator: () => null,
33670
33686
  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(components.DropdownIndicator, { ...props2 })
33671
- }
33687
+ },
33688
+ noOptionsMessage: () => i18n_default.t("no-available")
33672
33689
  }
33673
33690
  ) }),
33674
33691
  !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -34301,13 +34318,13 @@ var Many2OneField = (props) => {
34301
34318
  methods,
34302
34319
  required,
34303
34320
  string,
34304
- //return
34305
34321
  allowShowDetail,
34306
34322
  index: index4,
34307
34323
  contextObject,
34308
34324
  renderDetail,
34309
34325
  tempSelectedOption,
34310
34326
  options: options2,
34327
+ listOptions,
34311
34328
  fetchMoreOptions,
34312
34329
  handleSelectChange,
34313
34330
  isFetching,
@@ -34321,7 +34338,7 @@ var Many2OneField = (props) => {
34321
34338
  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
34322
34339
  allowShowDetail && renderDetail({
34323
34340
  idToolTip: String(name2) + Number(index4),
34324
- model: relation,
34341
+ model: options2?.model ?? relation,
34325
34342
  context: contextObject,
34326
34343
  idForm: id
34327
34344
  }),
@@ -34339,7 +34356,7 @@ var Many2OneField = (props) => {
34339
34356
  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
34340
34357
  allowShowDetail && renderDetail({
34341
34358
  idToolTip: String(name2),
34342
- model: relation,
34359
+ model: options2?.model ?? relation,
34343
34360
  context: contextObject,
34344
34361
  idForm: methods?.getValues(name2)?.id || methods?.getValues(name2)
34345
34362
  }),
@@ -34362,7 +34379,7 @@ var Many2OneField = (props) => {
34362
34379
  },
34363
34380
  render: ({ field, fieldState: { error: error2 } }) => {
34364
34381
  const currentValue = field?.value ? { value: field?.value?.id, label: field?.value?.display_name } : null;
34365
- const selectedOption = tempSelectedOption && options2?.length > 0 ? options2.find(
34382
+ const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
34366
34383
  (option) => option.value === tempSelectedOption?.value
34367
34384
  ) : currentValue ? currentValue : null;
34368
34385
  (0, import_react64.useEffect)(() => {
@@ -34375,7 +34392,7 @@ var Many2OneField = (props) => {
34375
34392
  StateManagedSelect$1,
34376
34393
  {
34377
34394
  menuShouldScrollIntoView: false,
34378
- options: options2,
34395
+ options: listOptions,
34379
34396
  classNames: {
34380
34397
  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"}`,
34381
34398
  valueContainer: () => "!m-0 !p-0 ",
@@ -34424,11 +34441,23 @@ var Many2OneField = (props) => {
34424
34441
  ...base,
34425
34442
  zIndex: 999
34426
34443
  }),
34444
+ option: (base, state) => ({
34445
+ ...base,
34446
+ cursor: "pointer",
34447
+ backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
34448
+ color: "#060606",
34449
+ borderRadius: "8px"
34450
+ }),
34427
34451
  menu: (base) => ({
34428
34452
  ...base,
34429
34453
  zIndex: 999,
34430
34454
  width: isEditTable ? "auto" : "100%",
34431
- minWidth: isEditTable ? "200px" : "100%"
34455
+ minWidth: isEditTable ? "200px" : "100%",
34456
+ borderRadius: "10px"
34457
+ }),
34458
+ menuList: (base) => ({
34459
+ ...base,
34460
+ padding: "4px"
34432
34461
  })
34433
34462
  },
34434
34463
  components: {
package/dist/widgets.mjs CHANGED
@@ -11996,6 +11996,11 @@ var TableHead = (props) => {
11996
11996
  /* @__PURE__ */ jsx44(
11997
11997
  "span",
11998
11998
  {
11999
+ style: {
12000
+ width: "12px",
12001
+ height: "12px",
12002
+ color: "8px"
12003
+ },
11999
12004
  "data-tooltip-id": `field-help-${col?.field?.name}`,
12000
12005
  className: "lowercase rounded-full bg-primary size-[12px] text-[8px] text-white flex items-center justify-center",
12001
12006
  children: "i"
@@ -33138,16 +33143,22 @@ var Many2ManyTagField = (props) => {
33138
33143
  }),
33139
33144
  option: (provided, { isFocused, isSelected }) => ({
33140
33145
  ...provided,
33141
- backgroundColor: isSelected ? "#007bff" : isFocused ? "#f1f1f1" : "white",
33146
+ backgroundColor: isSelected || isFocused ? "rgba(66,66,66,0.08)" : "#FFF",
33142
33147
  color: isSelected ? "white" : "",
33143
33148
  cursor: "pointer",
33144
- transition: "all 0.2s ease"
33149
+ transition: "all 0.2s ease",
33150
+ borderRadius: "8px"
33145
33151
  }),
33146
33152
  menu: (base) => ({
33147
33153
  ...base,
33148
33154
  zIndex: 9999,
33149
33155
  width: "300px",
33150
- minWidth: "300px"
33156
+ minWidth: "300px",
33157
+ borderRadius: "10px"
33158
+ }),
33159
+ menuList: (base) => ({
33160
+ ...base,
33161
+ padding: "4px"
33151
33162
  })
33152
33163
  },
33153
33164
  components: isUser ? {
@@ -33551,61 +33562,67 @@ var SelectDropdownField = (props) => {
33551
33562
  onChange2 && onChange2(name2 ?? "", selectedOption.value);
33552
33563
  },
33553
33564
  value: defaultValue || null,
33554
- required: !invisible && required,
33555
- styles: {
33556
- control: () => ({}),
33557
- clearIndicator: (base) => ({
33558
- ...base,
33559
- padding: "0"
33560
- })
33561
- }
33565
+ required: !invisible && required
33562
33566
  };
33563
33567
  return /* @__PURE__ */ jsxs67(Fragment29, { children: [
33564
33568
  /* @__PURE__ */ jsx98("div", { className: "group", children: /* @__PURE__ */ jsx98(
33565
33569
  StateManagedSelect$1,
33566
33570
  {
33567
33571
  ...commonProps,
33572
+ classNames: {
33573
+ 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"}`,
33574
+ valueContainer: () => "!m-0 !p-0 ",
33575
+ singleValue: () => `!m-0`,
33576
+ input: () => "!m-0 !p-0",
33577
+ dropdownIndicator: () => `m-0 p-0`,
33578
+ clearIndicator: () => `m-0 p-0'`,
33579
+ menu: () => "z-[99]"
33580
+ },
33568
33581
  styles: {
33569
- control: (base, state) => ({
33582
+ control: () => ({}),
33583
+ container: (base) => ({
33570
33584
  ...base,
33571
- display: "flex",
33572
- minHeight: "44px",
33573
- cursor: readonly ? "not-allowed" : "pointer",
33574
- backgroundColor: "#FFF",
33575
- borderRadius: isEditTable ? "0px" : "10px",
33576
- padding: "4px 0px",
33577
- border: isForm ? state.isFocused ? "1px solid var(--color-primary)" : "1px solid rgba(66,66,66,0.12)" : "none",
33578
- boxShadow: "none",
33579
- "&:hover": {
33580
- borderColor: "var(--color-primary)"
33581
- },
33582
- ...isEditTable && {
33583
- minWidth: "300px",
33584
- maxWidth: "300px",
33585
- borderBottom: "1px solid transparent",
33586
- background: "transparent"
33587
- }
33585
+ height: "100%"
33588
33586
  }),
33589
33587
  clearIndicator: (base) => ({
33590
33588
  ...base,
33591
33589
  padding: "0"
33592
33590
  }),
33591
+ valueContainer: (base) => ({
33592
+ ...base,
33593
+ padding: "0",
33594
+ margin: "0"
33595
+ }),
33593
33596
  menuPortal: (base) => ({
33594
33597
  ...base,
33595
- zIndex: 9999
33598
+ zIndex: 999
33599
+ }),
33600
+ option: (base, state) => ({
33601
+ ...base,
33602
+ cursor: "pointer",
33603
+ backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
33604
+ color: "#060606",
33605
+ borderRadius: "8px",
33606
+ fontWeight: 400
33596
33607
  }),
33597
33608
  menu: (base) => ({
33598
33609
  ...base,
33599
- zIndex: 9999,
33600
- width: isEditTable ? "300px" : "100%",
33601
- minWidth: isEditTable ? "300px" : "100%"
33610
+ zIndex: 999,
33611
+ width: isEditTable ? "auto" : "100%",
33612
+ minWidth: isEditTable ? "200px" : "100%",
33613
+ borderRadius: "10px"
33614
+ }),
33615
+ menuList: (base) => ({
33616
+ ...base,
33617
+ padding: "4px"
33602
33618
  })
33603
33619
  },
33604
33620
  menuPortalTarget: typeof window !== "undefined" ? document.body : null,
33605
33621
  components: {
33606
33622
  IndicatorSeparator: () => null,
33607
33623
  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ jsx98(components.DropdownIndicator, { ...props2 })
33608
- }
33624
+ },
33625
+ noOptionsMessage: () => i18n_default.t("no-available")
33609
33626
  }
33610
33627
  ) }),
33611
33628
  !isEditTable && error2 && /* @__PURE__ */ jsx98("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -34238,13 +34255,13 @@ var Many2OneField = (props) => {
34238
34255
  methods,
34239
34256
  required,
34240
34257
  string,
34241
- //return
34242
34258
  allowShowDetail,
34243
34259
  index: index4,
34244
34260
  contextObject,
34245
34261
  renderDetail,
34246
34262
  tempSelectedOption,
34247
34263
  options: options2,
34264
+ listOptions,
34248
34265
  fetchMoreOptions,
34249
34266
  handleSelectChange,
34250
34267
  isFetching,
@@ -34258,7 +34275,7 @@ var Many2OneField = (props) => {
34258
34275
  return /* @__PURE__ */ jsxs72(Fragment31, { children: [
34259
34276
  allowShowDetail && renderDetail({
34260
34277
  idToolTip: String(name2) + Number(index4),
34261
- model: relation,
34278
+ model: options2?.model ?? relation,
34262
34279
  context: contextObject,
34263
34280
  idForm: id
34264
34281
  }),
@@ -34276,7 +34293,7 @@ var Many2OneField = (props) => {
34276
34293
  return /* @__PURE__ */ jsxs72(Fragment31, { children: [
34277
34294
  allowShowDetail && renderDetail({
34278
34295
  idToolTip: String(name2),
34279
- model: relation,
34296
+ model: options2?.model ?? relation,
34280
34297
  context: contextObject,
34281
34298
  idForm: methods?.getValues(name2)?.id || methods?.getValues(name2)
34282
34299
  }),
@@ -34299,7 +34316,7 @@ var Many2OneField = (props) => {
34299
34316
  },
34300
34317
  render: ({ field, fieldState: { error: error2 } }) => {
34301
34318
  const currentValue = field?.value ? { value: field?.value?.id, label: field?.value?.display_name } : null;
34302
- const selectedOption = tempSelectedOption && options2?.length > 0 ? options2.find(
34319
+ const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length > 0 ? options2.find(
34303
34320
  (option) => option.value === tempSelectedOption?.value
34304
34321
  ) : currentValue ? currentValue : null;
34305
34322
  useEffect25(() => {
@@ -34312,7 +34329,7 @@ var Many2OneField = (props) => {
34312
34329
  StateManagedSelect$1,
34313
34330
  {
34314
34331
  menuShouldScrollIntoView: false,
34315
- options: options2,
34332
+ options: listOptions,
34316
34333
  classNames: {
34317
34334
  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"}`,
34318
34335
  valueContainer: () => "!m-0 !p-0 ",
@@ -34361,11 +34378,23 @@ var Many2OneField = (props) => {
34361
34378
  ...base,
34362
34379
  zIndex: 999
34363
34380
  }),
34381
+ option: (base, state) => ({
34382
+ ...base,
34383
+ cursor: "pointer",
34384
+ backgroundColor: state?.isSelected || state?.isFocused || state.isFocusing ? "rgba(66,66,66,0.08)" : "#FFF",
34385
+ color: "#060606",
34386
+ borderRadius: "8px"
34387
+ }),
34364
34388
  menu: (base) => ({
34365
34389
  ...base,
34366
34390
  zIndex: 999,
34367
34391
  width: isEditTable ? "auto" : "100%",
34368
- minWidth: isEditTable ? "200px" : "100%"
34392
+ minWidth: isEditTable ? "200px" : "100%",
34393
+ borderRadius: "10px"
34394
+ }),
34395
+ menuList: (base) => ({
34396
+ ...base,
34397
+ padding: "4px"
34369
34398
  })
34370
34399
  },
34371
34400
  components: {
@@ -34486,11 +34515,11 @@ var StatusbarDurationField = (props) => {
34486
34515
  };
34487
34516
 
34488
34517
  // src/widgets/basic/status-bar-field/option/option.tsx
34489
- import { useMemo as useMemo11 } from "react";
34518
+ import { useMemo as useMemo10 } from "react";
34490
34519
  import { jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
34491
34520
  var StatusBarOptionField = (props) => {
34492
34521
  const { selection, defaultValue } = props;
34493
- const memoizedStatusOptions = useMemo11(() => selection, [selection]);
34522
+ const memoizedStatusOptions = useMemo10(() => selection, [selection]);
34494
34523
  return /* @__PURE__ */ jsx106(
34495
34524
  "div",
34496
34525
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fctc/sme-widget-ui",
3
- "version": "1.6.3",
3
+ "version": "1.6.4",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",