@charlesgomes/leafcode-shared-lib-react 1.0.75 → 1.0.77

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.d.mts +39 -20
  2. package/dist/index.d.ts +39 -20
  3. package/dist/index.js +70 -51
  4. package/dist/index.mjs +70 -51
  5. package/dist/styles/input.css +2 -0
  6. package/dist/styles/tooltip.css +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
- import react__default, { ReactNode as ReactNode$1, InputHTMLAttributes } from 'react';
3
+ import react__default, { ReactNode as ReactNode$1, InputHTMLAttributes, JSX } from 'react';
4
4
  import { FieldError } from 'react-hook-form';
5
5
  import { FilterMatchMode } from 'primereact/api';
6
6
  export { FilterMatchMode, FilterOperator } from 'primereact/api';
@@ -18,7 +18,7 @@ interface ButtonProps {
18
18
  }
19
19
  declare function Button({ disabled, loading, color, type, onClick, title, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
20
20
 
21
- interface InputProps$1 extends React.InputHTMLAttributes<HTMLInputElement> {
21
+ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
22
22
  name: string;
23
23
  label?: string | ReactNode$1;
24
24
  error?: FieldError;
@@ -29,7 +29,7 @@ interface InputProps$1 extends React.InputHTMLAttributes<HTMLInputElement> {
29
29
  validationMode?: "default" | "restricted";
30
30
  showPasswordToggle?: boolean;
31
31
  }
32
- declare const Input: react.ForwardRefExoticComponent<InputProps$1 & react.RefAttributes<HTMLInputElement>>;
32
+ declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
33
33
 
34
34
  interface TextAreaProps {
35
35
  name: string;
@@ -94,26 +94,42 @@ interface Props {
94
94
  }
95
95
  declare function ModalBase({ show, onHide, onAction, title, children, loading, btnCancel, btnSuccess, type, disabledBtnSuccess, colors, fonts, modalMaxWidth, }: Props): react_jsx_runtime.JSX.Element;
96
96
 
97
- interface PaginatedResponse$1 {
98
- items: any[];
97
+ interface PaginatedResponse$1<T> {
98
+ items: T[];
99
99
  totalPages: number;
100
100
  totalCount: number;
101
101
  }
102
- interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
102
+ interface ServiceParams {
103
+ page: number;
104
+ size: number;
105
+ search: string;
106
+ [key: string]: any;
107
+ }
108
+ type QueryMode<T> = {
109
+ queryKey: string;
110
+ mutationFn: (page: number, size: number, search: string) => Promise<PaginatedResponse$1<T>>;
111
+ service?: never;
112
+ };
113
+ type ServiceMode<T> = {
114
+ service: (params: ServiceParams) => Promise<PaginatedResponse$1<T>>;
115
+ queryKey?: never;
116
+ mutationFn?: never;
117
+ };
118
+ type InputAutoCompleteProps<T> = (QueryMode<T> | ServiceMode<T>) & Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
103
119
  name: string;
104
120
  label?: string;
105
121
  value?: string;
106
- onChange?: (value: any) => void;
107
- onSelect: (item: any) => void;
108
122
  error?: FieldError;
109
- defaultValue?: any;
110
- inputAutocompleteActive?: string;
111
- queryKey: string;
123
+ getLabel?: (item: T) => string;
124
+ renderOption: (item: T) => ReactNode$1;
125
+ onSelect: (item: T | null) => void;
126
+ onChange?: (value: string) => void;
112
127
  isUppercaseLabel?: boolean;
113
- mutationFn: (pageNumber: number, pageSize: number, search: string) => Promise<PaginatedResponse$1>;
114
- renderOption: (item: any) => ReactNode$1;
115
- }
116
- declare const InputAutoComplete: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
128
+ [key: string]: any;
129
+ };
130
+ declare const InputAutoComplete: <T>(props: InputAutoCompleteProps<T> & {
131
+ ref?: React.Ref<HTMLInputElement>;
132
+ }) => JSX.Element;
117
133
 
118
134
  type IDataTableProps<T extends object> = {
119
135
  queryKey: string;
@@ -258,7 +274,7 @@ interface LeafcodeTheme {
258
274
  danger: string;
259
275
  border: string;
260
276
  text: string;
261
- light: string,
277
+ light: string;
262
278
  background: string;
263
279
  };
264
280
 
@@ -300,6 +316,11 @@ interface LeafcodeTheme {
300
316
  radius: string;
301
317
  };
302
318
  };
319
+ tooltip: {
320
+ fonts: {
321
+ TooltipSize: number | string;
322
+ };
323
+ };
303
324
  button: {
304
325
  colors: {
305
326
  text: string;
@@ -327,9 +348,7 @@ interface LeafcodeTheme {
327
348
  }
328
349
 
329
350
  type DeepPartial<T> = {
330
- [K in keyof T]?: T[K] extends object
331
- ? DeepPartial<T[K]>
332
- : T[K];
351
+ [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
333
352
  };
334
353
 
335
354
  interface LeafcodeThemeProviderProps {
@@ -340,4 +359,4 @@ declare const LeafcodeThemeProvider: ({ children, theme, }: LeafcodeThemeProvide
340
359
 
341
360
  declare const defaultTheme: LeafcodeTheme;
342
361
 
343
- export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, FilterMatchModeSelect, type IDataTableProps, type IItemProps, Input, InputAutoComplete, InputSelect, LeafcodeThemeProvider, ModalBase, SelectFilterTemplate, TextArea, ValueFilterTemplate, buildDynamicCampoFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getUrlParams, mapPrimeToBackendFilters };
362
+ export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, FilterMatchModeSelect, type IDataTableProps, type IItemProps, Input, InputAutoComplete, type InputAutoCompleteProps, InputSelect, LeafcodeThemeProvider, ModalBase, type PaginatedResponse$1 as PaginatedResponse, SelectFilterTemplate, type ServiceParams, TextArea, ValueFilterTemplate, buildDynamicCampoFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getUrlParams, mapPrimeToBackendFilters };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
- import react__default, { ReactNode as ReactNode$1, InputHTMLAttributes } from 'react';
3
+ import react__default, { ReactNode as ReactNode$1, InputHTMLAttributes, JSX } from 'react';
4
4
  import { FieldError } from 'react-hook-form';
5
5
  import { FilterMatchMode } from 'primereact/api';
6
6
  export { FilterMatchMode, FilterOperator } from 'primereact/api';
@@ -18,7 +18,7 @@ interface ButtonProps {
18
18
  }
19
19
  declare function Button({ disabled, loading, color, type, onClick, title, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
20
20
 
21
- interface InputProps$1 extends React.InputHTMLAttributes<HTMLInputElement> {
21
+ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
22
22
  name: string;
23
23
  label?: string | ReactNode$1;
24
24
  error?: FieldError;
@@ -29,7 +29,7 @@ interface InputProps$1 extends React.InputHTMLAttributes<HTMLInputElement> {
29
29
  validationMode?: "default" | "restricted";
30
30
  showPasswordToggle?: boolean;
31
31
  }
32
- declare const Input: react.ForwardRefExoticComponent<InputProps$1 & react.RefAttributes<HTMLInputElement>>;
32
+ declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
33
33
 
34
34
  interface TextAreaProps {
35
35
  name: string;
@@ -94,26 +94,42 @@ interface Props {
94
94
  }
95
95
  declare function ModalBase({ show, onHide, onAction, title, children, loading, btnCancel, btnSuccess, type, disabledBtnSuccess, colors, fonts, modalMaxWidth, }: Props): react_jsx_runtime.JSX.Element;
96
96
 
97
- interface PaginatedResponse$1 {
98
- items: any[];
97
+ interface PaginatedResponse$1<T> {
98
+ items: T[];
99
99
  totalPages: number;
100
100
  totalCount: number;
101
101
  }
102
- interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
102
+ interface ServiceParams {
103
+ page: number;
104
+ size: number;
105
+ search: string;
106
+ [key: string]: any;
107
+ }
108
+ type QueryMode<T> = {
109
+ queryKey: string;
110
+ mutationFn: (page: number, size: number, search: string) => Promise<PaginatedResponse$1<T>>;
111
+ service?: never;
112
+ };
113
+ type ServiceMode<T> = {
114
+ service: (params: ServiceParams) => Promise<PaginatedResponse$1<T>>;
115
+ queryKey?: never;
116
+ mutationFn?: never;
117
+ };
118
+ type InputAutoCompleteProps<T> = (QueryMode<T> | ServiceMode<T>) & Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
103
119
  name: string;
104
120
  label?: string;
105
121
  value?: string;
106
- onChange?: (value: any) => void;
107
- onSelect: (item: any) => void;
108
122
  error?: FieldError;
109
- defaultValue?: any;
110
- inputAutocompleteActive?: string;
111
- queryKey: string;
123
+ getLabel?: (item: T) => string;
124
+ renderOption: (item: T) => ReactNode$1;
125
+ onSelect: (item: T | null) => void;
126
+ onChange?: (value: string) => void;
112
127
  isUppercaseLabel?: boolean;
113
- mutationFn: (pageNumber: number, pageSize: number, search: string) => Promise<PaginatedResponse$1>;
114
- renderOption: (item: any) => ReactNode$1;
115
- }
116
- declare const InputAutoComplete: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
128
+ [key: string]: any;
129
+ };
130
+ declare const InputAutoComplete: <T>(props: InputAutoCompleteProps<T> & {
131
+ ref?: React.Ref<HTMLInputElement>;
132
+ }) => JSX.Element;
117
133
 
118
134
  type IDataTableProps<T extends object> = {
119
135
  queryKey: string;
@@ -258,7 +274,7 @@ interface LeafcodeTheme {
258
274
  danger: string;
259
275
  border: string;
260
276
  text: string;
261
- light: string,
277
+ light: string;
262
278
  background: string;
263
279
  };
264
280
 
@@ -300,6 +316,11 @@ interface LeafcodeTheme {
300
316
  radius: string;
301
317
  };
302
318
  };
319
+ tooltip: {
320
+ fonts: {
321
+ TooltipSize: number | string;
322
+ };
323
+ };
303
324
  button: {
304
325
  colors: {
305
326
  text: string;
@@ -327,9 +348,7 @@ interface LeafcodeTheme {
327
348
  }
328
349
 
329
350
  type DeepPartial<T> = {
330
- [K in keyof T]?: T[K] extends object
331
- ? DeepPartial<T[K]>
332
- : T[K];
351
+ [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
333
352
  };
334
353
 
335
354
  interface LeafcodeThemeProviderProps {
@@ -340,4 +359,4 @@ declare const LeafcodeThemeProvider: ({ children, theme, }: LeafcodeThemeProvide
340
359
 
341
360
  declare const defaultTheme: LeafcodeTheme;
342
361
 
343
- export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, FilterMatchModeSelect, type IDataTableProps, type IItemProps, Input, InputAutoComplete, InputSelect, LeafcodeThemeProvider, ModalBase, SelectFilterTemplate, TextArea, ValueFilterTemplate, buildDynamicCampoFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getUrlParams, mapPrimeToBackendFilters };
362
+ export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, FilterMatchModeSelect, type IDataTableProps, type IItemProps, Input, InputAutoComplete, type InputAutoCompleteProps, InputSelect, LeafcodeThemeProvider, ModalBase, type PaginatedResponse$1 as PaginatedResponse, SelectFilterTemplate, type ServiceParams, TextArea, ValueFilterTemplate, buildDynamicCampoFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getUrlParams, mapPrimeToBackendFilters };
package/dist/index.js CHANGED
@@ -108,6 +108,11 @@ var defaultTheme = {
108
108
  radius: "6px"
109
109
  }
110
110
  },
111
+ tooltip: {
112
+ fonts: {
113
+ TooltipSize: "12px"
114
+ }
115
+ },
111
116
  button: {
112
117
  colors: {
113
118
  text: "#FFFFFF",
@@ -235,7 +240,8 @@ function TooltipErrorInput({
235
240
  "--input-font-size": theme.components.input.fonts.inputSize,
236
241
  "--input-text-color": theme.components.input.colors.text,
237
242
  "--input-text-color-hover": theme.colors.light,
238
- "--input-error-border": theme.components.input.colors.errorBorder
243
+ "--input-error-border": theme.components.input.colors.errorBorder,
244
+ "--input-font-size-tooltip": theme.components.tooltip.fonts.TooltipSize
239
245
  };
240
246
  const [isTooltipOpen, setIsTooltipOpen] = (0, import_react3.useState)(true);
241
247
  const handleClose = () => setIsTooltipOpen(false);
@@ -717,23 +723,24 @@ LoadingSpinner.displayName = "LoadingSpinner";
717
723
  // src/components/Input/InputAutocomplete.tsx
718
724
  var import_jsx_runtime10 = require("react/jsx-runtime");
719
725
  var PAGE_SIZE = 10;
720
- var InputBase3 = ({
721
- name,
722
- label,
723
- error,
724
- onChange,
725
- onSelect,
726
- value,
727
- defaultValue,
728
- inputAutocompleteActive,
729
- queryKey,
730
- mutationFn,
731
- renderOption,
732
- disabled,
733
- placeholder,
734
- isUppercaseLabel = true,
735
- ...rest
736
- }, ref) => {
726
+ function AutoCompleteInner(props, ref) {
727
+ const {
728
+ name,
729
+ label,
730
+ error,
731
+ value,
732
+ onChange,
733
+ onSelect,
734
+ renderOption,
735
+ getLabel = (item) => item?.label ?? item?.nome ?? String(item),
736
+ disabled,
737
+ placeholder,
738
+ isUppercaseLabel = true,
739
+ queryKey,
740
+ mutationFn,
741
+ service,
742
+ ...inputProps
743
+ } = props;
737
744
  const theme = useLeafcodeTheme();
738
745
  const styleVars = {
739
746
  "--label-line": theme.colors.light,
@@ -756,13 +763,31 @@ var InputBase3 = ({
756
763
  const [search, setSearch] = (0, import_react12.useState)("");
757
764
  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
758
765
  const listRef = (0, import_react12.useRef)(null);
759
- const { data, isLoading } = (0, import_react_query.useQuery)({
760
- queryKey: [queryKey, pageNumber, search],
761
- queryFn: () => mutationFn(pageNumber, PAGE_SIZE, search),
766
+ const fetcher = () => {
767
+ if (service) {
768
+ return service({
769
+ page: pageNumber,
770
+ size: PAGE_SIZE,
771
+ search,
772
+ ...props
773
+ });
774
+ }
775
+ return mutationFn(pageNumber, PAGE_SIZE, search);
776
+ };
777
+ const queryKeyInternal = [
778
+ "autocomplete",
779
+ queryKey ?? "service",
780
+ pageNumber,
781
+ search
782
+ ];
783
+ const query = (0, import_react_query.useQuery)({
784
+ queryKey: queryKeyInternal,
785
+ queryFn: fetcher,
762
786
  enabled: isOpen
763
787
  });
788
+ const { data, isLoading } = query;
764
789
  (0, import_react12.useEffect)(() => {
765
- if (!data?.items) return;
790
+ if (!data) return;
766
791
  setItems(
767
792
  (prev) => pageNumber === 1 ? data.items : [...prev, ...data.items]
768
793
  );
@@ -771,7 +796,7 @@ var InputBase3 = ({
771
796
  const debounced = import_lodash2.default.debounce(() => {
772
797
  setPageNumber(1);
773
798
  setSearch(value ?? "");
774
- }, 600);
799
+ }, 500);
775
800
  debounced();
776
801
  return () => debounced.cancel();
777
802
  }, [value]);
@@ -783,35 +808,18 @@ var InputBase3 = ({
783
808
  }
784
809
  };
785
810
  const handleSelect = (item) => {
786
- onChange?.(item.nome);
811
+ const label2 = getLabel(item);
812
+ onChange?.(label2);
787
813
  setIsOpen(false);
788
814
  onSelect(item);
789
815
  };
790
- const renderDropdown = () => {
791
- if (!isOpen) return null;
792
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "dropdown-container", style: styleVars, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
793
- items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
794
- "li",
795
- {
796
- onClick: () => handleSelect(item),
797
- className: "dropdown-item",
798
- children: renderOption(item)
799
- },
800
- item.id
801
- )),
802
- isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-loading", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingSpinner, { size: 20 }) }),
803
- !isLoading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
804
- ] }) });
805
- };
806
816
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
807
817
  "div",
808
818
  {
809
819
  className: "input-wrapper",
810
820
  style: styleVars,
811
821
  tabIndex: -1,
812
- onBlur: (e) => {
813
- e.relatedTarget === null && setIsOpen(false);
814
- },
822
+ onBlur: (e) => e.relatedTarget === null && setIsOpen(false),
815
823
  children: [
816
824
  label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
817
825
  "label",
@@ -834,35 +842,46 @@ var InputBase3 = ({
834
842
  className: "input",
835
843
  value: value ?? "",
836
844
  onChange: (e) => {
837
- const val = e.target.value;
838
- onChange?.(val);
845
+ onChange?.(e.target.value);
839
846
  setIsOpen(true);
840
847
  },
841
848
  onFocus: () => setIsOpen(true),
842
- ...rest
849
+ ...inputProps
843
850
  }
844
851
  ),
845
852
  value && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
846
853
  "button",
847
854
  {
848
855
  type: "button",
856
+ className: "dropdown-clear",
849
857
  onClick: () => {
850
858
  setPageNumber(1);
851
859
  onChange?.("");
852
860
  onSelect(null);
853
861
  },
854
- className: "dropdown-clear",
855
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.X, { size: 16, className: "icone-clear" })
862
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.X, { size: 16, color: "#bf1717" })
856
863
  }
857
864
  ),
858
- renderDropdown()
865
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "dropdown-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
866
+ items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
867
+ "li",
868
+ {
869
+ onClick: () => handleSelect(item),
870
+ className: "dropdown-item",
871
+ children: renderOption(item)
872
+ },
873
+ i
874
+ )),
875
+ isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-loading", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingSpinner, { size: 20 }) }),
876
+ !isLoading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
877
+ ] }) })
859
878
  ] }),
860
879
  !value && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipErrorInput, { error, name })
861
880
  ]
862
881
  }
863
882
  );
864
- };
865
- var InputAutoComplete = (0, import_react12.forwardRef)(InputBase3);
883
+ }
884
+ var InputAutoComplete = (0, import_react12.forwardRef)(AutoCompleteInner);
866
885
 
867
886
  // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
868
887
  var import_react19 = require("react");
package/dist/index.mjs CHANGED
@@ -46,6 +46,11 @@ var defaultTheme = {
46
46
  radius: "6px"
47
47
  }
48
48
  },
49
+ tooltip: {
50
+ fonts: {
51
+ TooltipSize: "12px"
52
+ }
53
+ },
49
54
  button: {
50
55
  colors: {
51
56
  text: "#FFFFFF",
@@ -176,7 +181,8 @@ function TooltipErrorInput({
176
181
  "--input-font-size": theme.components.input.fonts.inputSize,
177
182
  "--input-text-color": theme.components.input.colors.text,
178
183
  "--input-text-color-hover": theme.colors.light,
179
- "--input-error-border": theme.components.input.colors.errorBorder
184
+ "--input-error-border": theme.components.input.colors.errorBorder,
185
+ "--input-font-size-tooltip": theme.components.tooltip.fonts.TooltipSize
180
186
  };
181
187
  const [isTooltipOpen, setIsTooltipOpen] = useState(true);
182
188
  const handleClose = () => setIsTooltipOpen(false);
@@ -667,23 +673,24 @@ LoadingSpinner.displayName = "LoadingSpinner";
667
673
  // src/components/Input/InputAutocomplete.tsx
668
674
  import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
669
675
  var PAGE_SIZE = 10;
670
- var InputBase3 = ({
671
- name,
672
- label,
673
- error,
674
- onChange,
675
- onSelect,
676
- value,
677
- defaultValue,
678
- inputAutocompleteActive,
679
- queryKey,
680
- mutationFn,
681
- renderOption,
682
- disabled,
683
- placeholder,
684
- isUppercaseLabel = true,
685
- ...rest
686
- }, ref) => {
676
+ function AutoCompleteInner(props, ref) {
677
+ const {
678
+ name,
679
+ label,
680
+ error,
681
+ value,
682
+ onChange,
683
+ onSelect,
684
+ renderOption,
685
+ getLabel = (item) => item?.label ?? item?.nome ?? String(item),
686
+ disabled,
687
+ placeholder,
688
+ isUppercaseLabel = true,
689
+ queryKey,
690
+ mutationFn,
691
+ service,
692
+ ...inputProps
693
+ } = props;
687
694
  const theme = useLeafcodeTheme();
688
695
  const styleVars = {
689
696
  "--label-line": theme.colors.light,
@@ -706,13 +713,31 @@ var InputBase3 = ({
706
713
  const [search, setSearch] = useState4("");
707
714
  const [isOpen, setIsOpen] = useState4(false);
708
715
  const listRef = useRef(null);
709
- const { data, isLoading } = useQuery({
710
- queryKey: [queryKey, pageNumber, search],
711
- queryFn: () => mutationFn(pageNumber, PAGE_SIZE, search),
716
+ const fetcher = () => {
717
+ if (service) {
718
+ return service({
719
+ page: pageNumber,
720
+ size: PAGE_SIZE,
721
+ search,
722
+ ...props
723
+ });
724
+ }
725
+ return mutationFn(pageNumber, PAGE_SIZE, search);
726
+ };
727
+ const queryKeyInternal = [
728
+ "autocomplete",
729
+ queryKey ?? "service",
730
+ pageNumber,
731
+ search
732
+ ];
733
+ const query = useQuery({
734
+ queryKey: queryKeyInternal,
735
+ queryFn: fetcher,
712
736
  enabled: isOpen
713
737
  });
738
+ const { data, isLoading } = query;
714
739
  useEffect4(() => {
715
- if (!data?.items) return;
740
+ if (!data) return;
716
741
  setItems(
717
742
  (prev) => pageNumber === 1 ? data.items : [...prev, ...data.items]
718
743
  );
@@ -721,7 +746,7 @@ var InputBase3 = ({
721
746
  const debounced = _.debounce(() => {
722
747
  setPageNumber(1);
723
748
  setSearch(value ?? "");
724
- }, 600);
749
+ }, 500);
725
750
  debounced();
726
751
  return () => debounced.cancel();
727
752
  }, [value]);
@@ -733,35 +758,18 @@ var InputBase3 = ({
733
758
  }
734
759
  };
735
760
  const handleSelect = (item) => {
736
- onChange?.(item.nome);
761
+ const label2 = getLabel(item);
762
+ onChange?.(label2);
737
763
  setIsOpen(false);
738
764
  onSelect(item);
739
765
  };
740
- const renderDropdown = () => {
741
- if (!isOpen) return null;
742
- return /* @__PURE__ */ jsx10("div", { className: "dropdown-container", style: styleVars, children: /* @__PURE__ */ jsxs7("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
743
- items.map((item) => /* @__PURE__ */ jsx10(
744
- "li",
745
- {
746
- onClick: () => handleSelect(item),
747
- className: "dropdown-item",
748
- children: renderOption(item)
749
- },
750
- item.id
751
- )),
752
- isLoading && /* @__PURE__ */ jsx10("li", { className: "dropdown-loading", children: /* @__PURE__ */ jsx10(LoadingSpinner, { size: 20 }) }),
753
- !isLoading && items.length === 0 && /* @__PURE__ */ jsx10("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
754
- ] }) });
755
- };
756
766
  return /* @__PURE__ */ jsxs7(
757
767
  "div",
758
768
  {
759
769
  className: "input-wrapper",
760
770
  style: styleVars,
761
771
  tabIndex: -1,
762
- onBlur: (e) => {
763
- e.relatedTarget === null && setIsOpen(false);
764
- },
772
+ onBlur: (e) => e.relatedTarget === null && setIsOpen(false),
765
773
  children: [
766
774
  label && /* @__PURE__ */ jsx10(
767
775
  "label",
@@ -784,35 +792,46 @@ var InputBase3 = ({
784
792
  className: "input",
785
793
  value: value ?? "",
786
794
  onChange: (e) => {
787
- const val = e.target.value;
788
- onChange?.(val);
795
+ onChange?.(e.target.value);
789
796
  setIsOpen(true);
790
797
  },
791
798
  onFocus: () => setIsOpen(true),
792
- ...rest
799
+ ...inputProps
793
800
  }
794
801
  ),
795
802
  value && /* @__PURE__ */ jsx10(
796
803
  "button",
797
804
  {
798
805
  type: "button",
806
+ className: "dropdown-clear",
799
807
  onClick: () => {
800
808
  setPageNumber(1);
801
809
  onChange?.("");
802
810
  onSelect(null);
803
811
  },
804
- className: "dropdown-clear",
805
- children: /* @__PURE__ */ jsx10(X3, { size: 16, className: "icone-clear" })
812
+ children: /* @__PURE__ */ jsx10(X3, { size: 16, color: "#bf1717" })
806
813
  }
807
814
  ),
808
- renderDropdown()
815
+ isOpen && /* @__PURE__ */ jsx10("div", { className: "dropdown-container", children: /* @__PURE__ */ jsxs7("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
816
+ items.map((item, i) => /* @__PURE__ */ jsx10(
817
+ "li",
818
+ {
819
+ onClick: () => handleSelect(item),
820
+ className: "dropdown-item",
821
+ children: renderOption(item)
822
+ },
823
+ i
824
+ )),
825
+ isLoading && /* @__PURE__ */ jsx10("li", { className: "dropdown-loading", children: /* @__PURE__ */ jsx10(LoadingSpinner, { size: 20 }) }),
826
+ !isLoading && items.length === 0 && /* @__PURE__ */ jsx10("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
827
+ ] }) })
809
828
  ] }),
810
829
  !value && !isOpen && /* @__PURE__ */ jsx10(TooltipErrorInput, { error, name })
811
830
  ]
812
831
  }
813
832
  );
814
- };
815
- var InputAutoComplete = forwardRef4(InputBase3);
833
+ }
834
+ var InputAutoComplete = forwardRef4(AutoCompleteInner);
816
835
 
817
836
  // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
818
837
  import { useEffect as useEffect7, useState as useState7 } from "react";
package/dist/styles/input.css CHANGED
@@ -156,6 +156,7 @@ input:-webkit-autofill:focus {
156
156
  font-size: var(--input-font-size, 13px);
157
157
  box-shadow: none !important;
158
158
  background-color: var(--input-bg, #ffffff) !important;
159
+ text-align: left;
159
160
  }
160
161
 
161
162
  .react-select__control--is-focused {
@@ -178,6 +179,7 @@ input:-webkit-autofill:focus {
178
179
  font-family: var(--input-font-family, "Roboto", sans-serif);
179
180
  font-weight: var(--input-font-weight, 400);
180
181
  font-size: var(--input-font-size, 13px) !important;
182
+ text-align: left;
181
183
  }
182
184
 
183
185
  .react-select__option--is-focused {
package/dist/styles/tooltip.css CHANGED
@@ -36,7 +36,7 @@
36
36
  gap: 0.25rem;
37
37
  font-family: var(--input-font-family, "Roboto", sans-serif);
38
38
  font-weight: var(--input-font-weight, 400);
39
- font-size: var(--input-font-size, 1px);
39
+ font-size: var(--input-font-size-tooltip, 12px);
40
40
  line-height: 125%;
41
41
  transition: all 0.2s ease-in-out;
42
42
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@charlesgomes/leafcode-shared-lib-react",
3
- "version": "1.0.75",
3
+ "version": "1.0.77",
4
4
  "description": "Lib de componentes react",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",