nexaas-ui-components 1.0.86 → 1.0.88

package/dist/index.cjs

@@ -818,20 +818,8 @@ var DatePickerInput = React5.forwardRef(
     var _a;
     const [invalidDate, setInvalidDate] = React5.useState(false);
     const [showCalendar, setShowCalendar] = React5.useState(false);
-    const [inputWidth, setInputWidth] = React5.useState(0);
     const inputContainerRef = React5.useRef(null);
     const dateFnsFormat = "dd/MM/yyyy";
-    React5.useEffect(() => {
-      const updateWidth = () => {
-        if (inputContainerRef.current) {
-          setInputWidth(inputContainerRef.current.offsetWidth + 10);
-        }
-      };
-      updateWidth();
-      window.addEventListener("resize", updateWidth);
-      return () => window.removeEventListener("resize", updateWidth);
-    }, []);
-    const finalOffset = popoverOffset || [inputWidth || 250, -46];
     const fieldValidation = useFieldErrorsStore((state) => state.field);
     const fieldValidationMessages = [
       (_a = fieldValidation[name ? name : registration == null ? void 0 : registration.name]) == null ? void 0 : _a.message,
@@ -877,10 +865,6 @@ var DatePickerInput = React5.forwardRef(
                     ref.current = node;
                   }
                 },
-                style: {
-                  ["--popover-offset-x"]: `${finalOffset[0]}px`,
-                  ["--popover-offset-y"]: `${ -100}px`
-                },
                 children: [
                   icon && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
@@ -905,10 +889,21 @@ var DatePickerInput = React5.forwardRef(
                         style: { height: "46px" }
                       },
                       popoverProps: {
-                        placement: "bottom",
-                        usePortal: false,
+                        placement: "bottom-start",
+                        // usePortal false renderizava o calendario dentro do proprio input, entao
+                        // qualquer ancestral com overflow auto/hidden (modal com scroll, painel
+                        // lateral) o cortava e ele ficava inutilizavel. Com portal ele vai pro body e
+                        // o Popper reposiciona sozinho quando nao ha espaco abaixo.
+                        usePortal: true,
                         minimal: true,
-                        popoverClassName: "date-picker-popover"
+                        popoverClassName: "date-picker-popover",
+                        // Sem boundary o flip ignora o viewport quando o input esta dentro de um
+                        // container com scroll.
+                        modifiers: {
+                          preventOverflow: { enabled: true, options: { padding: 8 } },
+                          flip: { enabled: true },
+                          ...popoverOffset ? { offset: { enabled: true, options: { offset: popoverOffset } } } : {}
+                        }
                       },
                       disabled,
                       onChange: (e, isUserChange) => {