@charlesgomes/leafcode-shared-lib-react 1.0.91 → 1.0.93

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 (6) hide show
  1. package/dist/index.d.mts +7 -1
  2. package/dist/index.d.ts +7 -1
  3. package/dist/index.js +127 -88
  4. package/dist/index.mjs +114 -76
  5. package/dist/styles/input.css +15 -0
  6. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -17,6 +17,12 @@ interface ButtonProps {
17
17
  }
18
18
  declare function Button({ disabled, loading, color, type, onClick, title, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
19
19
 
20
+ interface Props$1 {
21
+ id: string;
22
+ label: string;
23
+ }
24
+ declare function TooltipCustom({ label, id }: Props$1): react.ReactPortal;
25
+
20
26
  interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
21
27
  name: string;
22
28
  label?: string | ReactNode$1;
@@ -385,4 +391,4 @@ declare const LeafcodeThemeProvider: ({ children, theme, }: LeafcodeThemeProvide
385
391
 
386
392
  declare const defaultTheme: LeafcodeTheme;
387
393
 
388
- export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, Input, InputAutoComplete, type InputAutoCompleteProps, InputSelect, LeafcodeThemeProvider, ModalBase, type PaginatedResponse$1 as PaginatedResponse, SelectFilterTemplate, type ServiceParams, TextArea, ValueFilterTemplate, buildDynamicFieldFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsNumber, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getNullableCollection, getUrlParams, isSpecialMatchMode, mapPrimeToBackendFilters };
394
+ export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, Input, InputAutoComplete, type InputAutoCompleteProps, InputSelect, LeafcodeThemeProvider, ModalBase, type PaginatedResponse$1 as PaginatedResponse, SelectFilterTemplate, type ServiceParams, TextArea, TooltipCustom, ValueFilterTemplate, buildDynamicFieldFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsNumber, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getNullableCollection, getUrlParams, isSpecialMatchMode, mapPrimeToBackendFilters };
package/dist/index.d.ts CHANGED
@@ -17,6 +17,12 @@ interface ButtonProps {
17
17
  }
18
18
  declare function Button({ disabled, loading, color, type, onClick, title, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
19
19
 
20
+ interface Props$1 {
21
+ id: string;
22
+ label: string;
23
+ }
24
+ declare function TooltipCustom({ label, id }: Props$1): react.ReactPortal;
25
+
20
26
  interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
21
27
  name: string;
22
28
  label?: string | ReactNode$1;
@@ -385,4 +391,4 @@ declare const LeafcodeThemeProvider: ({ children, theme, }: LeafcodeThemeProvide
385
391
 
386
392
  declare const defaultTheme: LeafcodeTheme;
387
393
 
388
- export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, Input, InputAutoComplete, type InputAutoCompleteProps, InputSelect, LeafcodeThemeProvider, ModalBase, type PaginatedResponse$1 as PaginatedResponse, SelectFilterTemplate, type ServiceParams, TextArea, ValueFilterTemplate, buildDynamicFieldFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsNumber, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getNullableCollection, getUrlParams, isSpecialMatchMode, mapPrimeToBackendFilters };
394
+ export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, Input, InputAutoComplete, type InputAutoCompleteProps, InputSelect, LeafcodeThemeProvider, ModalBase, type PaginatedResponse$1 as PaginatedResponse, SelectFilterTemplate, type ServiceParams, TextArea, TooltipCustom, ValueFilterTemplate, buildDynamicFieldFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsNumber, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getNullableCollection, getUrlParams, isSpecialMatchMode, mapPrimeToBackendFilters };
package/dist/index.js CHANGED
@@ -44,6 +44,7 @@ __export(index_exports, {
44
44
  ModalBase: () => ModalBase,
45
45
  SelectFilterTemplate: () => SelectFilterTemplate,
46
46
  TextArea: () => TextArea,
47
+ TooltipCustom: () => TooltipCustom,
47
48
  ValueFilterTemplate: () => ValueFilterTemplate,
48
49
  buildDynamicFieldFilters: () => buildDynamicFieldFilters,
49
50
  buildSortingWithFilters: () => buildSortingWithFilters,
@@ -259,14 +260,35 @@ function Button({
259
260
  );
260
261
  }
261
262
 
263
+ // src/components/TooltipCustom.tsx
264
+ var import_react_tooltip = require("react-tooltip");
265
+ var import_react_dom = require("react-dom");
266
+ var import_jsx_runtime3 = require("react/jsx-runtime");
267
+ function TooltipCustom({ label, id }) {
268
+ return (0, import_react_dom.createPortal)(
269
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
270
+ import_react_tooltip.Tooltip,
271
+ {
272
+ anchorSelect: `#${id}`,
273
+ place: "top",
274
+ positionStrategy: "fixed",
275
+ className: "tooltip-icone",
276
+ style: { zIndex: 13 },
277
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tooltip-custom", children: label })
278
+ }
279
+ ),
280
+ document.body
281
+ );
282
+ }
283
+
262
284
  // src/components/Input/Input.tsx
263
285
  var import_react4 = require("react");
264
286
 
265
287
  // src/components/Tooltips/TooltipErrorInput.tsx
266
288
  var import_react2 = require("@phosphor-icons/react");
267
289
  var import_react3 = require("react");
268
- var import_react_tooltip = require("react-tooltip");
269
- var import_jsx_runtime3 = require("react/jsx-runtime");
290
+ var import_react_tooltip2 = require("react-tooltip");
291
+ var import_jsx_runtime4 = require("react/jsx-runtime");
270
292
  function TooltipErrorInput({
271
293
  error,
272
294
  name,
@@ -290,24 +312,24 @@ function TooltipErrorInput({
290
312
  (0, import_react3.useEffect)(() => {
291
313
  setIsTooltipOpen(true);
292
314
  }, [error]);
293
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
315
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
294
316
  "div",
295
317
  {
296
318
  style: styleVars,
297
319
  className: `tooltip-wrapper ${isSelect ? isInvalid ? "tooltip-right-select-invalid" : "tooltip-right-select" : "tooltip-right-default"}`,
298
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: error?.message && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
299
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
320
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: error?.message && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
321
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
300
322
  "a",
301
323
  {
302
324
  "data-tooltip-id": name,
303
325
  "data-tooltip-content": "",
304
326
  "data-tooltip-place": "top-end",
305
327
  onClick: () => setIsTooltipOpen(true),
306
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.WarningCircle, { size: 22, className: "tooltip-icon" })
328
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react2.WarningCircle, { size: 22, className: "tooltip-icon" })
307
329
  }
308
330
  ),
309
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
310
- import_react_tooltip.Tooltip,
331
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
332
+ import_react_tooltip2.Tooltip,
311
333
  {
312
334
  className: "tooltip-content",
313
335
  id: name,
@@ -322,9 +344,9 @@ function TooltipErrorInput({
322
344
  clickable: true,
323
345
  openOnClick: true,
324
346
  isOpen: isTooltipOpen,
325
- children: isTooltipOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tooltip-inner", children: [
326
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: error?.message }),
327
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
347
+ children: isTooltipOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "tooltip-inner", children: [
348
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: error?.message }),
349
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
328
350
  "button",
329
351
  {
330
352
  onClick: handleClose,
@@ -334,7 +356,7 @@ function TooltipErrorInput({
334
356
  background: "transparent",
335
357
  cursor: "pointer"
336
358
  },
337
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.X, { size: 16, weight: "bold" })
359
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react2.X, { size: 16, weight: "bold" })
338
360
  }
339
361
  )
340
362
  ] })
@@ -347,7 +369,7 @@ function TooltipErrorInput({
347
369
 
348
370
  // src/components/Input/Input.tsx
349
371
  var import_react5 = require("@phosphor-icons/react");
350
- var import_jsx_runtime4 = require("react/jsx-runtime");
372
+ var import_jsx_runtime5 = require("react/jsx-runtime");
351
373
  var InputBase = ({
352
374
  name,
353
375
  label,
@@ -403,13 +425,13 @@ var InputBase = ({
403
425
  const [show, setShow] = (0, import_react4.useState)(false);
404
426
  const isPassword = showPasswordToggle;
405
427
  const handleClick = () => setShow(!show);
406
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
428
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
407
429
  "div",
408
430
  {
409
431
  className: `input-wrapper ${disabled ? "is-disabled" : ""}`,
410
432
  style: styleVars,
411
433
  children: [
412
- !!label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
434
+ !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
413
435
  "label",
414
436
  {
415
437
  className: `label-input ${isUppercaseLabel && "is-uppercase"}`,
@@ -417,8 +439,8 @@ var InputBase = ({
417
439
  children: label
418
440
  }
419
441
  ),
420
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
421
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
442
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
443
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
422
444
  "input",
423
445
  {
424
446
  id: name,
@@ -435,16 +457,16 @@ var InputBase = ({
435
457
  ...rest
436
458
  }
437
459
  ),
438
- showPasswordToggle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
460
+ showPasswordToggle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
439
461
  "div",
440
462
  {
441
463
  onClick: () => handleClick(),
442
464
  className: `password-toggle ${error ? "error" : "no-error"}`,
443
- children: show ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Eye, { size: 21 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.EyeSlash, { size: 21 })
465
+ children: show ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Eye, { size: 21 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.EyeSlash, { size: 21 })
444
466
  }
445
467
  )
446
468
  ] }),
447
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipErrorInput, { error, name })
469
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipErrorInput, { error, name })
448
470
  ]
449
471
  }
450
472
  );
@@ -453,7 +475,7 @@ var Input = (0, import_react4.forwardRef)(InputBase);
453
475
 
454
476
  // src/components/Input/TextArea.tsx
455
477
  var import_react6 = require("react");
456
- var import_jsx_runtime5 = require("react/jsx-runtime");
478
+ var import_jsx_runtime6 = require("react/jsx-runtime");
457
479
  var TextAreaBase = ({
458
480
  name,
459
481
  label,
@@ -490,13 +512,13 @@ var TextAreaBase = ({
490
512
  "--input-height-text-area": theme.components.input.sizes.heightTextArea,
491
513
  "--input-border-radius": theme.components.input.sizes.radius
492
514
  };
493
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
515
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
494
516
  "div",
495
517
  {
496
518
  className: `input-wrapper ${disabled ? "is-disabled" : ""}`,
497
519
  style: styleVars,
498
520
  children: [
499
- !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
521
+ !!label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
500
522
  "label",
501
523
  {
502
524
  className: `label-input ${isUppercaseLabel ? "is-uppercase" : ""}`,
@@ -504,8 +526,8 @@ var TextAreaBase = ({
504
526
  children: label
505
527
  }
506
528
  ),
507
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
508
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
529
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
530
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
509
531
  "textarea",
510
532
  {
511
533
  ref,
@@ -518,7 +540,7 @@ var TextAreaBase = ({
518
540
  ...rest
519
541
  }
520
542
  ),
521
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "errorTooltip", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipErrorInput, { error, name }) })
543
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "errorTooltip", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TooltipErrorInput, { error, name }) })
522
544
  ] })
523
545
  ]
524
546
  }
@@ -532,9 +554,9 @@ var TextArea = (0, import_react6.forwardRef)(
532
554
  var import_react7 = require("react");
533
555
  var import_react_hook_form = require("react-hook-form");
534
556
  var import_react_select = __toESM(require("react-select"));
535
- var import_jsx_runtime6 = require("react/jsx-runtime");
557
+ var import_jsx_runtime7 = require("react/jsx-runtime");
536
558
  var NoOptionsMessage = (props) => {
537
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_select.components.NoOptionsMessage, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "", children: "Nenhuma op\xE7\xE3o" }) });
559
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_select.components.NoOptionsMessage, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "", children: "Nenhuma op\xE7\xE3o" }) });
538
560
  };
539
561
  var InputBase2 = ({
540
562
  name,
@@ -581,8 +603,8 @@ var InputBase2 = ({
581
603
  (0, import_react7.useEffect)(() => {
582
604
  setMenuPortalTarget(document.body);
583
605
  }, []);
584
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "input-wrapper", style: styleVars, children: [
585
- !!label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
606
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "input-wrapper", style: styleVars, children: [
607
+ !!label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
586
608
  "label",
587
609
  {
588
610
  className: `label-input ${isUppercaseLabel && "is-uppercase"}`,
@@ -590,7 +612,7 @@ var InputBase2 = ({
590
612
  children: label
591
613
  }
592
614
  ),
593
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
615
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
594
616
  import_react_hook_form.Controller,
595
617
  {
596
618
  name,
@@ -600,8 +622,8 @@ var InputBase2 = ({
600
622
  (option) => option.value === value
601
623
  );
602
624
  const displayValue = value?.label ? value : selectedOption || { label: value, value };
603
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
604
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
625
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
626
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
605
627
  import_react_select.default,
606
628
  {
607
629
  ref: ref2,
@@ -637,7 +659,7 @@ var InputBase2 = ({
637
659
  }
638
660
  }
639
661
  ),
640
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
662
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
641
663
  TooltipErrorInput,
642
664
  {
643
665
  error,
@@ -658,14 +680,14 @@ var InputSelect = (0, import_react7.forwardRef)(InputBase2);
658
680
  var import_react8 = require("@phosphor-icons/react");
659
681
 
660
682
  // src/components/ModalBase/FooterButtons.tsx
661
- var import_jsx_runtime7 = require("react/jsx-runtime");
683
+ var import_jsx_runtime8 = require("react/jsx-runtime");
662
684
  function FooterButtons({ children }) {
663
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "modal-footer", children });
685
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "modal-footer", children });
664
686
  }
665
687
 
666
688
  // src/components/ModalBase/ModalBase.tsx
667
689
  var import_react9 = require("react");
668
- var import_jsx_runtime8 = require("react/jsx-runtime");
690
+ var import_jsx_runtime9 = require("react/jsx-runtime");
669
691
  function ModalBase({
670
692
  show,
671
693
  onHide,
@@ -705,15 +727,15 @@ function ModalBase({
705
727
  document.removeEventListener("keydown", handleKeyDown);
706
728
  };
707
729
  }, [onHide]);
708
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: show ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
709
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "modal-overlay", style: styleVars, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "modal-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "modal-content", children: [
710
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "modal-header", children: [
711
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "modal-title", children: title }),
712
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "modal-close", type: "button", onClick: onHide, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.X, { size: 18, className: "button-close" }) })
730
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: show ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
731
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "modal-overlay", style: styleVars, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "modal-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "modal-content", children: [
732
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "modal-header", children: [
733
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "modal-title", children: title }),
734
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "modal-close", type: "button", onClick: onHide, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.X, { size: 18, className: "button-close" }) })
713
735
  ] }),
714
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "modal-body", children }),
715
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(FooterButtons, { children: [
716
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
736
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "modal-body", children }),
737
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FooterButtons, { children: [
738
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
717
739
  Button,
718
740
  {
719
741
  color: "danger",
@@ -722,7 +744,7 @@ function ModalBase({
722
744
  onClick: onHide
723
745
  }
724
746
  ),
725
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
747
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
726
748
  Button,
727
749
  {
728
750
  type,
@@ -734,7 +756,7 @@ function ModalBase({
734
756
  )
735
757
  ] })
736
758
  ] }) }) }),
737
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "modal-backdrop" })
759
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "modal-backdrop" })
738
760
  ] }) : null });
739
761
  }
740
762
 
@@ -746,10 +768,10 @@ var import_react_query = require("@tanstack/react-query");
746
768
 
747
769
  // src/components/Loading/Loading.tsx
748
770
  var import_react10 = require("react");
749
- var import_jsx_runtime9 = require("react/jsx-runtime");
771
+ var import_jsx_runtime10 = require("react/jsx-runtime");
750
772
  var LoadingSpinner = (0, import_react10.memo)(({ size = 20 }) => {
751
773
  const theme = useLeafcodeTheme();
752
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
774
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
753
775
  "span",
754
776
  {
755
777
  style: {
@@ -768,7 +790,7 @@ var LoadingSpinner = (0, import_react10.memo)(({ size = 20 }) => {
768
790
  LoadingSpinner.displayName = "LoadingSpinner";
769
791
 
770
792
  // src/components/Input/InputAutocomplete.tsx
771
- var import_jsx_runtime10 = require("react/jsx-runtime");
793
+ var import_jsx_runtime11 = require("react/jsx-runtime");
772
794
  var PAGE_SIZE = 10;
773
795
  function AutoCompleteInner(props, ref) {
774
796
  const {
@@ -789,6 +811,8 @@ function AutoCompleteInner(props, ref) {
789
811
  ...inputProps
790
812
  } = props;
791
813
  const theme = useLeafcodeTheme();
814
+ const inputRef = (0, import_react12.useRef)(null);
815
+ const [placement, setPlacement] = (0, import_react12.useState)("bottom");
792
816
  const styleVars = {
793
817
  // Fonts
794
818
  "--label-font-family": theme.components.input.fonts.label,
@@ -813,6 +837,29 @@ function AutoCompleteInner(props, ref) {
813
837
  const [search, setSearch] = (0, import_react12.useState)("");
814
838
  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
815
839
  const listRef = (0, import_react12.useRef)(null);
840
+ const calculatePlacement = () => {
841
+ const input = inputRef.current;
842
+ if (!input) return;
843
+ const rect = input.getBoundingClientRect();
844
+ const spaceBelow = window.innerHeight - rect.bottom;
845
+ const spaceAbove = rect.top;
846
+ const dropdownHeight = 180;
847
+ if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
848
+ setPlacement("top");
849
+ } else {
850
+ setPlacement("bottom");
851
+ }
852
+ };
853
+ (0, import_react12.useEffect)(() => {
854
+ if (!isOpen) return;
855
+ calculatePlacement();
856
+ window.addEventListener("resize", calculatePlacement);
857
+ window.addEventListener("scroll", calculatePlacement, true);
858
+ return () => {
859
+ window.removeEventListener("resize", calculatePlacement);
860
+ window.removeEventListener("scroll", calculatePlacement, true);
861
+ };
862
+ }, [isOpen]);
816
863
  const fetcher = () => {
817
864
  if (service) {
818
865
  return service({
@@ -863,7 +910,7 @@ function AutoCompleteInner(props, ref) {
863
910
  setIsOpen(false);
864
911
  onSelect(item);
865
912
  };
866
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
913
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
867
914
  "div",
868
915
  {
869
916
  className: "input-wrapper",
@@ -871,7 +918,7 @@ function AutoCompleteInner(props, ref) {
871
918
  tabIndex: -1,
872
919
  onBlur: (e) => e.relatedTarget === null && setIsOpen(false),
873
920
  children: [
874
- label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
921
+ label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
875
922
  "label",
876
923
  {
877
924
  htmlFor: name,
@@ -879,11 +926,15 @@ function AutoCompleteInner(props, ref) {
879
926
  children: label
880
927
  }
881
928
  ),
882
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
883
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
929
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { position: "relative", width: "100%" }, children: [
930
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
884
931
  "input",
885
932
  {
886
- ref,
933
+ ref: (el) => {
934
+ inputRef.current = el;
935
+ if (typeof ref === "function") ref(el);
936
+ else if (ref) ref.current = el;
937
+ },
887
938
  id: name,
888
939
  name,
889
940
  disabled,
@@ -893,13 +944,17 @@ function AutoCompleteInner(props, ref) {
893
944
  value: value ?? "",
894
945
  onChange: (e) => {
895
946
  onChange?.(e.target.value);
947
+ calculatePlacement();
948
+ setIsOpen(true);
949
+ },
950
+ onFocus: () => {
951
+ calculatePlacement();
896
952
  setIsOpen(true);
897
953
  },
898
- onFocus: () => setIsOpen(true),
899
954
  ...inputProps
900
955
  }
901
956
  ),
902
- value && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
957
+ value && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
903
958
  "button",
904
959
  {
905
960
  type: "button",
@@ -909,11 +964,11 @@ function AutoCompleteInner(props, ref) {
909
964
  onChange?.("");
910
965
  onSelect(null);
911
966
  },
912
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.X, { size: 16, color: "#bf1717" })
967
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react11.X, { size: 16, color: "#bf1717" })
913
968
  }
914
969
  ),
915
- 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: [
916
- items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
970
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `dropdown-container dropdown-${placement}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
971
+ items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
917
972
  "li",
918
973
  {
919
974
  onClick: () => handleSelect(item),
@@ -922,11 +977,11 @@ function AutoCompleteInner(props, ref) {
922
977
  },
923
978
  i
924
979
  )),
925
- isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-loading", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingSpinner, { size: 20 }) }),
926
- !isLoading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
980
+ isLoading && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "dropdown-loading", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LoadingSpinner, { size: 20 }) }),
981
+ !isLoading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
927
982
  ] }) })
928
983
  ] }),
929
- !value && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipErrorInput, { error, name })
984
+ !value && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipErrorInput, { error, name })
930
985
  ]
931
986
  }
932
987
  );
@@ -950,7 +1005,7 @@ var import_api = require("primereact/api");
950
1005
 
951
1006
  // src/components/DataTableAdvancedFilter/TableHeader.tsx
952
1007
  var import_react13 = require("@phosphor-icons/react");
953
- var import_jsx_runtime11 = require("react/jsx-runtime");
1008
+ var import_jsx_runtime12 = require("react/jsx-runtime");
954
1009
  var TableHeader = ({
955
1010
  globalFilterValue,
956
1011
  onGlobalFilterChange,
@@ -961,8 +1016,8 @@ var TableHeader = ({
961
1016
  target: { value: "" }
962
1017
  });
963
1018
  };
964
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { position: "relative" }, children: [
965
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1019
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { position: "relative" }, children: [
1020
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
966
1021
  import_inputtext.InputText,
967
1022
  {
968
1023
  value: globalFilterValue,
@@ -971,7 +1026,7 @@ var TableHeader = ({
971
1026
  className: "custom-input input-search"
972
1027
  }
973
1028
  ),
974
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.X, { size: 16, className: "close-search", onClick: limparCampo })
1029
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react13.X, { size: 16, className: "close-search", onClick: limparCampo })
975
1030
  ] });
976
1031
  };
977
1032
  var TableHeader_default = TableHeader;
@@ -998,27 +1053,6 @@ function centsToReal(value) {
998
1053
  return value / 100;
999
1054
  }
1000
1055
 
1001
- // src/components/TooltipCustom.tsx
1002
- var import_react_tooltip2 = require("react-tooltip");
1003
- var import_react_dom = require("react-dom");
1004
- var import_jsx_runtime12 = require("react/jsx-runtime");
1005
- function TooltipCustom({ label, id }) {
1006
- return (0, import_react_dom.createPortal)(
1007
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1008
- import_react_tooltip2.Tooltip,
1009
- {
1010
- anchorSelect: `#${id}`,
1011
- place: "top",
1012
- positionStrategy: "fixed",
1013
- className: "tooltip-icone",
1014
- style: { zIndex: 13 },
1015
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "tooltip-custom", children: label })
1016
- }
1017
- ),
1018
- document.body
1019
- );
1020
- }
1021
-
1022
1056
  // src/components/DataTableAdvancedFilter/TableActions.tsx
1023
1057
  var import_jsx_runtime13 = require("react/jsx-runtime");
1024
1058
  function TableActions({
@@ -1511,6 +1545,10 @@ function DataTableAdvancedFilterWrapper({
1511
1545
  "--p-column-filter-buttonbar-bg",
1512
1546
  theme.colors.primary
1513
1547
  );
1548
+ root.style.setProperty(
1549
+ "--p-column-filter-hover-focus",
1550
+ theme.colors.primary
1551
+ );
1514
1552
  root.style.setProperty(
1515
1553
  "--p-column-filter-buttonbar-bg-hover",
1516
1554
  theme.colors.primaryHover
@@ -2569,6 +2607,7 @@ var import_api5 = require("primereact/api");
2569
2607
  ModalBase,
2570
2608
  SelectFilterTemplate,
2571
2609
  TextArea,
2610
+ TooltipCustom,
2572
2611
  ValueFilterTemplate,
2573
2612
  buildDynamicFieldFilters,
2574
2613
  buildSortingWithFilters,
package/dist/index.mjs CHANGED
@@ -195,6 +195,27 @@ function Button({
195
195
  );
196
196
  }
197
197
 
198
+ // src/components/TooltipCustom.tsx
199
+ import { Tooltip } from "react-tooltip";
200
+ import { createPortal } from "react-dom";
201
+ import { jsx as jsx3 } from "react/jsx-runtime";
202
+ function TooltipCustom({ label, id }) {
203
+ return createPortal(
204
+ /* @__PURE__ */ jsx3(
205
+ Tooltip,
206
+ {
207
+ anchorSelect: `#${id}`,
208
+ place: "top",
209
+ positionStrategy: "fixed",
210
+ className: "tooltip-icone",
211
+ style: { zIndex: 13 },
212
+ children: /* @__PURE__ */ jsx3("div", { className: "tooltip-custom", children: label })
213
+ }
214
+ ),
215
+ document.body
216
+ );
217
+ }
218
+
198
219
  // src/components/Input/Input.tsx
199
220
  import {
200
221
  forwardRef,
@@ -204,8 +225,8 @@ import {
204
225
  // src/components/Tooltips/TooltipErrorInput.tsx
205
226
  import { WarningCircle, X } from "@phosphor-icons/react";
206
227
  import { useEffect, useState } from "react";
207
- import { Tooltip } from "react-tooltip";
208
- import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
228
+ import { Tooltip as Tooltip2 } from "react-tooltip";
229
+ import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
209
230
  function TooltipErrorInput({
210
231
  error,
211
232
  name,
@@ -229,24 +250,24 @@ function TooltipErrorInput({
229
250
  useEffect(() => {
230
251
  setIsTooltipOpen(true);
231
252
  }, [error]);
232
- return /* @__PURE__ */ jsx3(
253
+ return /* @__PURE__ */ jsx4(
233
254
  "div",
234
255
  {
235
256
  style: styleVars,
236
257
  className: `tooltip-wrapper ${isSelect ? isInvalid ? "tooltip-right-select-invalid" : "tooltip-right-select" : "tooltip-right-default"}`,
237
- children: /* @__PURE__ */ jsx3(Fragment, { children: error?.message && /* @__PURE__ */ jsxs2(Fragment, { children: [
238
- /* @__PURE__ */ jsx3(
258
+ children: /* @__PURE__ */ jsx4(Fragment, { children: error?.message && /* @__PURE__ */ jsxs2(Fragment, { children: [
259
+ /* @__PURE__ */ jsx4(
239
260
  "a",
240
261
  {
241
262
  "data-tooltip-id": name,
242
263
  "data-tooltip-content": "",
243
264
  "data-tooltip-place": "top-end",
244
265
  onClick: () => setIsTooltipOpen(true),
245
- children: /* @__PURE__ */ jsx3(WarningCircle, { size: 22, className: "tooltip-icon" })
266
+ children: /* @__PURE__ */ jsx4(WarningCircle, { size: 22, className: "tooltip-icon" })
246
267
  }
247
268
  ),
248
- /* @__PURE__ */ jsx3(
249
- Tooltip,
269
+ /* @__PURE__ */ jsx4(
270
+ Tooltip2,
250
271
  {
251
272
  className: "tooltip-content",
252
273
  id: name,
@@ -262,8 +283,8 @@ function TooltipErrorInput({
262
283
  openOnClick: true,
263
284
  isOpen: isTooltipOpen,
264
285
  children: isTooltipOpen && /* @__PURE__ */ jsxs2("div", { className: "tooltip-inner", children: [
265
- /* @__PURE__ */ jsx3("span", { children: error?.message }),
266
- /* @__PURE__ */ jsx3(
286
+ /* @__PURE__ */ jsx4("span", { children: error?.message }),
287
+ /* @__PURE__ */ jsx4(
267
288
  "button",
268
289
  {
269
290
  onClick: handleClose,
@@ -273,7 +294,7 @@ function TooltipErrorInput({
273
294
  background: "transparent",
274
295
  cursor: "pointer"
275
296
  },
276
- children: /* @__PURE__ */ jsx3(X, { size: 16, weight: "bold" })
297
+ children: /* @__PURE__ */ jsx4(X, { size: 16, weight: "bold" })
277
298
  }
278
299
  )
279
300
  ] })
@@ -286,7 +307,7 @@ function TooltipErrorInput({
286
307
 
287
308
  // src/components/Input/Input.tsx
288
309
  import { Eye, EyeSlash } from "@phosphor-icons/react";
289
- import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
310
+ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
290
311
  var InputBase = ({
291
312
  name,
292
313
  label,
@@ -348,7 +369,7 @@ var InputBase = ({
348
369
  className: `input-wrapper ${disabled ? "is-disabled" : ""}`,
349
370
  style: styleVars,
350
371
  children: [
351
- !!label && /* @__PURE__ */ jsx4(
372
+ !!label && /* @__PURE__ */ jsx5(
352
373
  "label",
353
374
  {
354
375
  className: `label-input ${isUppercaseLabel && "is-uppercase"}`,
@@ -357,7 +378,7 @@ var InputBase = ({
357
378
  }
358
379
  ),
359
380
  /* @__PURE__ */ jsxs3("div", { style: { position: "relative", width: "100%" }, children: [
360
- /* @__PURE__ */ jsx4(
381
+ /* @__PURE__ */ jsx5(
361
382
  "input",
362
383
  {
363
384
  id: name,
@@ -374,16 +395,16 @@ var InputBase = ({
374
395
  ...rest
375
396
  }
376
397
  ),
377
- showPasswordToggle && /* @__PURE__ */ jsx4(
398
+ showPasswordToggle && /* @__PURE__ */ jsx5(
378
399
  "div",
379
400
  {
380
401
  onClick: () => handleClick(),
381
402
  className: `password-toggle ${error ? "error" : "no-error"}`,
382
- children: show ? /* @__PURE__ */ jsx4(Eye, { size: 21 }) : /* @__PURE__ */ jsx4(EyeSlash, { size: 21 })
403
+ children: show ? /* @__PURE__ */ jsx5(Eye, { size: 21 }) : /* @__PURE__ */ jsx5(EyeSlash, { size: 21 })
383
404
  }
384
405
  )
385
406
  ] }),
386
- /* @__PURE__ */ jsx4(TooltipErrorInput, { error, name })
407
+ /* @__PURE__ */ jsx5(TooltipErrorInput, { error, name })
387
408
  ]
388
409
  }
389
410
  );
@@ -392,7 +413,7 @@ var Input = forwardRef(InputBase);
392
413
 
393
414
  // src/components/Input/TextArea.tsx
394
415
  import { forwardRef as forwardRef2 } from "react";
395
- import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
416
+ import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
396
417
  var TextAreaBase = ({
397
418
  name,
398
419
  label,
@@ -435,7 +456,7 @@ var TextAreaBase = ({
435
456
  className: `input-wrapper ${disabled ? "is-disabled" : ""}`,
436
457
  style: styleVars,
437
458
  children: [
438
- !!label && /* @__PURE__ */ jsx5(
459
+ !!label && /* @__PURE__ */ jsx6(
439
460
  "label",
440
461
  {
441
462
  className: `label-input ${isUppercaseLabel ? "is-uppercase" : ""}`,
@@ -444,7 +465,7 @@ var TextAreaBase = ({
444
465
  }
445
466
  ),
446
467
  /* @__PURE__ */ jsxs4("div", { style: { position: "relative", width: "100%" }, children: [
447
- /* @__PURE__ */ jsx5(
468
+ /* @__PURE__ */ jsx6(
448
469
  "textarea",
449
470
  {
450
471
  ref,
@@ -457,7 +478,7 @@ var TextAreaBase = ({
457
478
  ...rest
458
479
  }
459
480
  ),
460
- /* @__PURE__ */ jsx5("div", { className: "errorTooltip", children: /* @__PURE__ */ jsx5(TooltipErrorInput, { error, name }) })
481
+ /* @__PURE__ */ jsx6("div", { className: "errorTooltip", children: /* @__PURE__ */ jsx6(TooltipErrorInput, { error, name }) })
461
482
  ] })
462
483
  ]
463
484
  }
@@ -475,9 +496,9 @@ import {
475
496
  } from "react";
476
497
  import { Controller } from "react-hook-form";
477
498
  import Select, { components } from "react-select";
478
- import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
499
+ import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
479
500
  var NoOptionsMessage = (props) => {
480
- return /* @__PURE__ */ jsx6(components.NoOptionsMessage, { ...props, children: /* @__PURE__ */ jsx6("span", { className: "", children: "Nenhuma op\xE7\xE3o" }) });
501
+ return /* @__PURE__ */ jsx7(components.NoOptionsMessage, { ...props, children: /* @__PURE__ */ jsx7("span", { className: "", children: "Nenhuma op\xE7\xE3o" }) });
481
502
  };
482
503
  var InputBase2 = ({
483
504
  name,
@@ -525,7 +546,7 @@ var InputBase2 = ({
525
546
  setMenuPortalTarget(document.body);
526
547
  }, []);
527
548
  return /* @__PURE__ */ jsxs5("div", { className: "input-wrapper", style: styleVars, children: [
528
- !!label && /* @__PURE__ */ jsx6(
549
+ !!label && /* @__PURE__ */ jsx7(
529
550
  "label",
530
551
  {
531
552
  className: `label-input ${isUppercaseLabel && "is-uppercase"}`,
@@ -533,7 +554,7 @@ var InputBase2 = ({
533
554
  children: label
534
555
  }
535
556
  ),
536
- /* @__PURE__ */ jsx6(
557
+ /* @__PURE__ */ jsx7(
537
558
  Controller,
538
559
  {
539
560
  name,
@@ -544,7 +565,7 @@ var InputBase2 = ({
544
565
  );
545
566
  const displayValue = value?.label ? value : selectedOption || { label: value, value };
546
567
  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
547
- /* @__PURE__ */ jsx6(
568
+ /* @__PURE__ */ jsx7(
548
569
  Select,
549
570
  {
550
571
  ref: ref2,
@@ -580,7 +601,7 @@ var InputBase2 = ({
580
601
  }
581
602
  }
582
603
  ),
583
- /* @__PURE__ */ jsx6(
604
+ /* @__PURE__ */ jsx7(
584
605
  TooltipErrorInput,
585
606
  {
586
607
  error,
@@ -601,14 +622,14 @@ var InputSelect = forwardRef3(InputBase2);
601
622
  import { X as X2 } from "@phosphor-icons/react";
602
623
 
603
624
  // src/components/ModalBase/FooterButtons.tsx
604
- import { jsx as jsx7 } from "react/jsx-runtime";
625
+ import { jsx as jsx8 } from "react/jsx-runtime";
605
626
  function FooterButtons({ children }) {
606
- return /* @__PURE__ */ jsx7("div", { className: "modal-footer", children });
627
+ return /* @__PURE__ */ jsx8("div", { className: "modal-footer", children });
607
628
  }
608
629
 
609
630
  // src/components/ModalBase/ModalBase.tsx
610
631
  import { useEffect as useEffect3 } from "react";
611
- import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
632
+ import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
612
633
  function ModalBase({
613
634
  show,
614
635
  onHide,
@@ -648,15 +669,15 @@ function ModalBase({
648
669
  document.removeEventListener("keydown", handleKeyDown);
649
670
  };
650
671
  }, [onHide]);
651
- return /* @__PURE__ */ jsx8(Fragment3, { children: show ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
652
- /* @__PURE__ */ jsx8("div", { className: "modal-overlay", style: styleVars, children: /* @__PURE__ */ jsx8("div", { className: "modal-wrapper", children: /* @__PURE__ */ jsxs6("div", { className: "modal-content", children: [
672
+ return /* @__PURE__ */ jsx9(Fragment3, { children: show ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
673
+ /* @__PURE__ */ jsx9("div", { className: "modal-overlay", style: styleVars, children: /* @__PURE__ */ jsx9("div", { className: "modal-wrapper", children: /* @__PURE__ */ jsxs6("div", { className: "modal-content", children: [
653
674
  /* @__PURE__ */ jsxs6("div", { className: "modal-header", children: [
654
- /* @__PURE__ */ jsx8("h3", { className: "modal-title", children: title }),
655
- /* @__PURE__ */ jsx8("button", { className: "modal-close", type: "button", onClick: onHide, children: /* @__PURE__ */ jsx8(X2, { size: 18, className: "button-close" }) })
675
+ /* @__PURE__ */ jsx9("h3", { className: "modal-title", children: title }),
676
+ /* @__PURE__ */ jsx9("button", { className: "modal-close", type: "button", onClick: onHide, children: /* @__PURE__ */ jsx9(X2, { size: 18, className: "button-close" }) })
656
677
  ] }),
657
- /* @__PURE__ */ jsx8("div", { className: "modal-body", children }),
678
+ /* @__PURE__ */ jsx9("div", { className: "modal-body", children }),
658
679
  /* @__PURE__ */ jsxs6(FooterButtons, { children: [
659
- /* @__PURE__ */ jsx8(
680
+ /* @__PURE__ */ jsx9(
660
681
  Button,
661
682
  {
662
683
  color: "danger",
@@ -665,7 +686,7 @@ function ModalBase({
665
686
  onClick: onHide
666
687
  }
667
688
  ),
668
- /* @__PURE__ */ jsx8(
689
+ /* @__PURE__ */ jsx9(
669
690
  Button,
670
691
  {
671
692
  type,
@@ -677,7 +698,7 @@ function ModalBase({
677
698
  )
678
699
  ] })
679
700
  ] }) }) }),
680
- /* @__PURE__ */ jsx8("div", { className: "modal-backdrop" })
701
+ /* @__PURE__ */ jsx9("div", { className: "modal-backdrop" })
681
702
  ] }) : null });
682
703
  }
683
704
 
@@ -694,10 +715,10 @@ import { useQuery } from "@tanstack/react-query";
694
715
 
695
716
  // src/components/Loading/Loading.tsx
696
717
  import { memo } from "react";
697
- import { jsx as jsx9 } from "react/jsx-runtime";
718
+ import { jsx as jsx10 } from "react/jsx-runtime";
698
719
  var LoadingSpinner = memo(({ size = 20 }) => {
699
720
  const theme = useLeafcodeTheme();
700
- return /* @__PURE__ */ jsx9(
721
+ return /* @__PURE__ */ jsx10(
701
722
  "span",
702
723
  {
703
724
  style: {
@@ -716,7 +737,7 @@ var LoadingSpinner = memo(({ size = 20 }) => {
716
737
  LoadingSpinner.displayName = "LoadingSpinner";
717
738
 
718
739
  // src/components/Input/InputAutocomplete.tsx
719
- import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
740
+ import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
720
741
  var PAGE_SIZE = 10;
721
742
  function AutoCompleteInner(props, ref) {
722
743
  const {
@@ -737,6 +758,8 @@ function AutoCompleteInner(props, ref) {
737
758
  ...inputProps
738
759
  } = props;
739
760
  const theme = useLeafcodeTheme();
761
+ const inputRef = useRef(null);
762
+ const [placement, setPlacement] = useState4("bottom");
740
763
  const styleVars = {
741
764
  // Fonts
742
765
  "--label-font-family": theme.components.input.fonts.label,
@@ -761,6 +784,29 @@ function AutoCompleteInner(props, ref) {
761
784
  const [search, setSearch] = useState4("");
762
785
  const [isOpen, setIsOpen] = useState4(false);
763
786
  const listRef = useRef(null);
787
+ const calculatePlacement = () => {
788
+ const input = inputRef.current;
789
+ if (!input) return;
790
+ const rect = input.getBoundingClientRect();
791
+ const spaceBelow = window.innerHeight - rect.bottom;
792
+ const spaceAbove = rect.top;
793
+ const dropdownHeight = 180;
794
+ if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
795
+ setPlacement("top");
796
+ } else {
797
+ setPlacement("bottom");
798
+ }
799
+ };
800
+ useEffect4(() => {
801
+ if (!isOpen) return;
802
+ calculatePlacement();
803
+ window.addEventListener("resize", calculatePlacement);
804
+ window.addEventListener("scroll", calculatePlacement, true);
805
+ return () => {
806
+ window.removeEventListener("resize", calculatePlacement);
807
+ window.removeEventListener("scroll", calculatePlacement, true);
808
+ };
809
+ }, [isOpen]);
764
810
  const fetcher = () => {
765
811
  if (service) {
766
812
  return service({
@@ -819,7 +865,7 @@ function AutoCompleteInner(props, ref) {
819
865
  tabIndex: -1,
820
866
  onBlur: (e) => e.relatedTarget === null && setIsOpen(false),
821
867
  children: [
822
- label && /* @__PURE__ */ jsx10(
868
+ label && /* @__PURE__ */ jsx11(
823
869
  "label",
824
870
  {
825
871
  htmlFor: name,
@@ -828,10 +874,14 @@ function AutoCompleteInner(props, ref) {
828
874
  }
829
875
  ),
830
876
  /* @__PURE__ */ jsxs7("div", { style: { position: "relative", width: "100%" }, children: [
831
- /* @__PURE__ */ jsx10(
877
+ /* @__PURE__ */ jsx11(
832
878
  "input",
833
879
  {
834
- ref,
880
+ ref: (el) => {
881
+ inputRef.current = el;
882
+ if (typeof ref === "function") ref(el);
883
+ else if (ref) ref.current = el;
884
+ },
835
885
  id: name,
836
886
  name,
837
887
  disabled,
@@ -841,13 +891,17 @@ function AutoCompleteInner(props, ref) {
841
891
  value: value ?? "",
842
892
  onChange: (e) => {
843
893
  onChange?.(e.target.value);
894
+ calculatePlacement();
895
+ setIsOpen(true);
896
+ },
897
+ onFocus: () => {
898
+ calculatePlacement();
844
899
  setIsOpen(true);
845
900
  },
846
- onFocus: () => setIsOpen(true),
847
901
  ...inputProps
848
902
  }
849
903
  ),
850
- value && /* @__PURE__ */ jsx10(
904
+ value && /* @__PURE__ */ jsx11(
851
905
  "button",
852
906
  {
853
907
  type: "button",
@@ -857,11 +911,11 @@ function AutoCompleteInner(props, ref) {
857
911
  onChange?.("");
858
912
  onSelect(null);
859
913
  },
860
- children: /* @__PURE__ */ jsx10(X3, { size: 16, color: "#bf1717" })
914
+ children: /* @__PURE__ */ jsx11(X3, { size: 16, color: "#bf1717" })
861
915
  }
862
916
  ),
863
- isOpen && /* @__PURE__ */ jsx10("div", { className: "dropdown-container", children: /* @__PURE__ */ jsxs7("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
864
- items.map((item, i) => /* @__PURE__ */ jsx10(
917
+ isOpen && /* @__PURE__ */ jsx11("div", { className: `dropdown-container dropdown-${placement}`, children: /* @__PURE__ */ jsxs7("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
918
+ items.map((item, i) => /* @__PURE__ */ jsx11(
865
919
  "li",
866
920
  {
867
921
  onClick: () => handleSelect(item),
@@ -870,11 +924,11 @@ function AutoCompleteInner(props, ref) {
870
924
  },
871
925
  i
872
926
  )),
873
- isLoading && /* @__PURE__ */ jsx10("li", { className: "dropdown-loading", children: /* @__PURE__ */ jsx10(LoadingSpinner, { size: 20 }) }),
874
- !isLoading && items.length === 0 && /* @__PURE__ */ jsx10("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
927
+ isLoading && /* @__PURE__ */ jsx11("li", { className: "dropdown-loading", children: /* @__PURE__ */ jsx11(LoadingSpinner, { size: 20 }) }),
928
+ !isLoading && items.length === 0 && /* @__PURE__ */ jsx11("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
875
929
  ] }) })
876
930
  ] }),
877
- !value && !isOpen && /* @__PURE__ */ jsx10(TooltipErrorInput, { error, name })
931
+ !value && !isOpen && /* @__PURE__ */ jsx11(TooltipErrorInput, { error, name })
878
932
  ]
879
933
  }
880
934
  );
@@ -898,7 +952,7 @@ import { FilterMatchMode } from "primereact/api";
898
952
 
899
953
  // src/components/DataTableAdvancedFilter/TableHeader.tsx
900
954
  import { X as X4 } from "@phosphor-icons/react";
901
- import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
955
+ import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
902
956
  var TableHeader = ({
903
957
  globalFilterValue,
904
958
  onGlobalFilterChange,
@@ -910,7 +964,7 @@ var TableHeader = ({
910
964
  });
911
965
  };
912
966
  return /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
913
- /* @__PURE__ */ jsx11(
967
+ /* @__PURE__ */ jsx12(
914
968
  InputText,
915
969
  {
916
970
  value: globalFilterValue,
@@ -919,7 +973,7 @@ var TableHeader = ({
919
973
  className: "custom-input input-search"
920
974
  }
921
975
  ),
922
- /* @__PURE__ */ jsx11(X4, { size: 16, className: "close-search", onClick: limparCampo })
976
+ /* @__PURE__ */ jsx12(X4, { size: 16, className: "close-search", onClick: limparCampo })
923
977
  ] });
924
978
  };
925
979
  var TableHeader_default = TableHeader;
@@ -946,27 +1000,6 @@ function centsToReal(value) {
946
1000
  return value / 100;
947
1001
  }
948
1002
 
949
- // src/components/TooltipCustom.tsx
950
- import { Tooltip as Tooltip2 } from "react-tooltip";
951
- import { createPortal } from "react-dom";
952
- import { jsx as jsx12 } from "react/jsx-runtime";
953
- function TooltipCustom({ label, id }) {
954
- return createPortal(
955
- /* @__PURE__ */ jsx12(
956
- Tooltip2,
957
- {
958
- anchorSelect: `#${id}`,
959
- place: "top",
960
- positionStrategy: "fixed",
961
- className: "tooltip-icone",
962
- style: { zIndex: 13 },
963
- children: /* @__PURE__ */ jsx12("div", { className: "tooltip-custom", children: label })
964
- }
965
- ),
966
- document.body
967
- );
968
- }
969
-
970
1003
  // src/components/DataTableAdvancedFilter/TableActions.tsx
971
1004
  import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
972
1005
  function TableActions({
@@ -1459,6 +1492,10 @@ function DataTableAdvancedFilterWrapper({
1459
1492
  "--p-column-filter-buttonbar-bg",
1460
1493
  theme.colors.primary
1461
1494
  );
1495
+ root.style.setProperty(
1496
+ "--p-column-filter-hover-focus",
1497
+ theme.colors.primary
1498
+ );
1462
1499
  root.style.setProperty(
1463
1500
  "--p-column-filter-buttonbar-bg-hover",
1464
1501
  theme.colors.primaryHover
@@ -2516,6 +2553,7 @@ export {
2516
2553
  ModalBase,
2517
2554
  SelectFilterTemplate,
2518
2555
  TextArea,
2556
+ TooltipCustom,
2519
2557
  ValueFilterTemplate,
2520
2558
  buildDynamicFieldFilters,
2521
2559
  buildSortingWithFilters,
package/dist/styles/input.css CHANGED
@@ -286,3 +286,18 @@ input:-webkit-autofill:focus {
286
286
  background-color: var(--input-disabled-bg, #f3f4f6) !important;
287
287
  cursor: not-allowed;
288
288
  }
289
+
290
+ .dropdown-container {
291
+ position: absolute;
292
+ left: 0;
293
+ width: 100%;
294
+ z-index: 50;
295
+ }
296
+
297
+ .dropdown-bottom {
298
+ top: calc(100% + 4px);
299
+ }
300
+
301
+ .dropdown-top {
302
+ bottom: calc(100% + 4px);
303
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@charlesgomes/leafcode-shared-lib-react",
3
- "version": "1.0.91",
3
+ "version": "1.0.93",
4
4
  "description": "Lib de componentes react",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",