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

package/dist/index.js

@@ -789,6 +789,8 @@ function AutoCompleteInner(props, ref) {
     ...inputProps
   } = props;
   const theme = useLeafcodeTheme();
+  const inputRef = (0, import_react12.useRef)(null);
+  const [placement, setPlacement] = (0, import_react12.useState)("bottom");
   const styleVars = {
     // Fonts
     "--label-font-family": theme.components.input.fonts.label,
@@ -813,6 +815,29 @@ function AutoCompleteInner(props, ref) {
   const [search, setSearch] = (0, import_react12.useState)("");
   const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
   const listRef = (0, import_react12.useRef)(null);
+  const calculatePlacement = () => {
+    const input = inputRef.current;
+    if (!input) return;
+    const rect = input.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const dropdownHeight = 180;
+    if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+      setPlacement("top");
+    } else {
+      setPlacement("bottom");
+    }
+  };
+  (0, import_react12.useEffect)(() => {
+    if (!isOpen) return;
+    calculatePlacement();
+    window.addEventListener("resize", calculatePlacement);
+    window.addEventListener("scroll", calculatePlacement, true);
+    return () => {
+      window.removeEventListener("resize", calculatePlacement);
+      window.removeEventListener("scroll", calculatePlacement, true);
+    };
+  }, [isOpen]);
   const fetcher = () => {
     if (service) {
       return service({
@@ -883,7 +908,11 @@ function AutoCompleteInner(props, ref) {
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "input",
             {
-              ref,
+              ref: (el) => {
+                inputRef.current = el;
+                if (typeof ref === "function") ref(el);
+                else if (ref) ref.current = el;
+              },
               id: name,
               name,
               disabled,
@@ -893,9 +922,13 @@ function AutoCompleteInner(props, ref) {
               value: value ?? "",
               onChange: (e) => {
                 onChange?.(e.target.value);
+                calculatePlacement();
+                setIsOpen(true);
+              },
+              onFocus: () => {
+                calculatePlacement();
                 setIsOpen(true);
               },
-              onFocus: () => setIsOpen(true),
               ...inputProps
             }
           ),
@@ -912,7 +945,7 @@ function AutoCompleteInner(props, ref) {
               children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.X, { size: 16, color: "#bf1717" })
             }
           ),
-          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: [
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `dropdown-container dropdown-${placement}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
             items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "li",
               {

package/dist/index.mjs

@@ -737,6 +737,8 @@ function AutoCompleteInner(props, ref) {
     ...inputProps
   } = props;
   const theme = useLeafcodeTheme();
+  const inputRef = useRef(null);
+  const [placement, setPlacement] = useState4("bottom");
   const styleVars = {
     // Fonts
     "--label-font-family": theme.components.input.fonts.label,
@@ -761,6 +763,29 @@ function AutoCompleteInner(props, ref) {
   const [search, setSearch] = useState4("");
   const [isOpen, setIsOpen] = useState4(false);
   const listRef = useRef(null);
+  const calculatePlacement = () => {
+    const input = inputRef.current;
+    if (!input) return;
+    const rect = input.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const dropdownHeight = 180;
+    if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+      setPlacement("top");
+    } else {
+      setPlacement("bottom");
+    }
+  };
+  useEffect4(() => {
+    if (!isOpen) return;
+    calculatePlacement();
+    window.addEventListener("resize", calculatePlacement);
+    window.addEventListener("scroll", calculatePlacement, true);
+    return () => {
+      window.removeEventListener("resize", calculatePlacement);
+      window.removeEventListener("scroll", calculatePlacement, true);
+    };
+  }, [isOpen]);
   const fetcher = () => {
     if (service) {
       return service({
@@ -831,7 +856,11 @@ function AutoCompleteInner(props, ref) {
           /* @__PURE__ */ jsx10(
             "input",
             {
-              ref,
+              ref: (el) => {
+                inputRef.current = el;
+                if (typeof ref === "function") ref(el);
+                else if (ref) ref.current = el;
+              },
               id: name,
               name,
               disabled,
@@ -841,9 +870,13 @@ function AutoCompleteInner(props, ref) {
               value: value ?? "",
               onChange: (e) => {
                 onChange?.(e.target.value);
+                calculatePlacement();
+                setIsOpen(true);
+              },
+              onFocus: () => {
+                calculatePlacement();
                 setIsOpen(true);
               },
-              onFocus: () => setIsOpen(true),
               ...inputProps
             }
           ),
@@ -860,7 +893,7 @@ function AutoCompleteInner(props, ref) {
               children: /* @__PURE__ */ jsx10(X3, { size: 16, color: "#bf1717" })
             }
           ),
-          isOpen && /* @__PURE__ */ jsx10("div", { className: "dropdown-container", children: /* @__PURE__ */ jsxs7("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
+          isOpen && /* @__PURE__ */ jsx10("div", { className: `dropdown-container dropdown-${placement}`, children: /* @__PURE__ */ jsxs7("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
             items.map((item, i) => /* @__PURE__ */ jsx10(
               "li",
               {

package/dist/styles/input.css

@@ -286,3 +286,18 @@ input:-webkit-autofill:focus {
   background-color: var(--input-disabled-bg, #f3f4f6) !important;
   cursor: not-allowed;
 }
+
+.dropdown-container {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 50;
+}
+
+.dropdown-bottom {
+  top: calc(100% + 4px);
+}
+
+.dropdown-top {
+  bottom: calc(100% + 4px);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charlesgomes/leafcode-shared-lib-react",
-  "version": "1.0.91",
+  "version": "1.0.92",
   "description": "Lib de componentes react",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",