next-recomponents 2.0.45 → 2.0.47

package/dist/index.js

@@ -36748,6 +36748,29 @@ function Select({
   const [options, setOptions] = (0, import_react9.useState)(
     []
   );
+  const [dropdownPos, setDropdownPos] = (0, import_react9.useState)({ left: 0, width: 0 });
+  (0, import_react9.useEffect)(() => {
+    if (isOpen && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      if (spaceBelow < 200 && spaceAbove > spaceBelow) {
+        setOpenUpwards(true);
+        setDropdownPos({
+          bottom: window.innerHeight - rect.top + 4,
+          left: rect.left,
+          width: rect.width
+        });
+      } else {
+        setOpenUpwards(false);
+        setDropdownPos({
+          top: rect.bottom + 4,
+          left: rect.left,
+          width: rect.width
+        });
+      }
+    }
+  }, [isOpen]);
   const [filtered, setFiltered] = (0, import_react9.useState)(
     []
   );
@@ -36765,12 +36788,12 @@ function Select({
     }).map((child) => {
       return {
         value: child.props.value,
-        label: child.props.children
+        label: import_react9.default.Children.toArray(child.props.children).join("")
       };
     });
     setOptions(parsedOptions);
     setFiltered(parsedOptions);
-    const value = (props == null ? void 0 : props.value) && ((_a = parsedOptions.find((opt) => opt.value == props.value)) == null ? void 0 : _a.label);
+    const value = (props == null ? void 0 : props.value) ? ((_a = parsedOptions.find((opt) => opt.value == props.value)) == null ? void 0 : _a.label) || "" : "";
     setInputValue(value);
   }, [children]);
   (0, import_react9.useEffect)(() => {
@@ -36798,7 +36821,8 @@ function Select({
     }
   };
   const selectOption = (opt) => {
-    setInputValue(opt.label);
+    const v = `${opt.label}`;
+    setInputValue(v);
     setIsOpen(false);
   };
   const containerRef = (0, import_react9.useRef)(null);
@@ -36816,7 +36840,7 @@ function Select({
     }
   }, [isOpen]);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: containerRef, className: "w-full relative my-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative flex items-center border rounded bg-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative flex items-center border rounded bg-white ", children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "input",
         {
@@ -36858,7 +36882,10 @@ function Select({
         " ",
         (props == null ? void 0 : props.required) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-red-500", children: "*" })
       ] }),
-      !isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectIcon, {}) }),
+      !isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute top-0 right-0 flex  justify-center items-center px-2 py-2 font-bold", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "font-normal text-xs text-gray-400", children: filtered.length == 0 && "Loading..." }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectIcon, {})
+      ] }),
       isOpen && inputValue != "" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
@@ -36877,44 +36904,54 @@ function Select({
           children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseIcon, {})
         }
       ),
-      isOpen && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
         {
-          style: { zIndex: 9999999999 },
-          className: `absolute w-full border rounded shadow bg-white z-10 max-h-100 top-10  overflow-y-auto ${openUpwards ? "bottom-full mb-1" : "mt-1"}`,
-          children: filtered.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            "div",
-            {
-              className: `p-2 cursor-pointer ${index === highlightedIndex ? "bg-blue-100" : "hover:bg-gray-100"}`,
-              onClick: () => {
-                var _a;
-                try {
-                  (_a = props == null ? void 0 : props.onChange) == null ? void 0 : _a.call(props, {
-                    target: { value: (opt == null ? void 0 : opt.value) || opt.label }
-                  });
-                } catch (error) {
-                }
-                setHasEdition(false);
-                const item = validOption(opt.label);
-                if (inputRef == null ? void 0 : inputRef.current) {
-                  if (!item) {
-                    if (strictMode) {
-                      inputRef.current.value = "";
-                      inputRef.current.classList.remove("bg-green-200");
-                      inputRef.current.classList.add("bg-red-200");
-                      return;
+          style: {
+            zIndex: 999999,
+            position: "fixed",
+            top: dropdownPos.top,
+            bottom: dropdownPos.bottom,
+            left: dropdownPos.left,
+            width: dropdownPos.width
+          },
+          className: "border rounded shadow bg-white max-h-100 overflow-y-auto",
+          children: [
+            filtered.length == 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "font-normal p-2 text-gray-400", children: "Loading options..." }),
+            filtered.map((opt, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "div",
+              {
+                className: `p-2 cursor-pointer ${index === highlightedIndex ? "bg-blue-100" : "hover:bg-gray-100"}`,
+                onClick: () => {
+                  var _a;
+                  try {
+                    (_a = props == null ? void 0 : props.onChange) == null ? void 0 : _a.call(props, {
+                      target: { value: (opt == null ? void 0 : opt.value) || opt.label }
+                    });
+                  } catch (error) {
+                  }
+                  setHasEdition(false);
+                  const item = validOption(opt.label);
+                  if (inputRef == null ? void 0 : inputRef.current) {
+                    if (!item) {
+                      if (strictMode) {
+                        inputRef.current.value = "";
+                        inputRef.current.classList.remove("bg-green-200");
+                        inputRef.current.classList.add("bg-red-200");
+                        return;
+                      }
+                    } else {
+                      inputRef.current.classList.add("bg-green-200");
+                      inputRef.current.classList.remove("bg-red-200");
                     }
-                  } else {
-                    inputRef.current.classList.add("bg-green-200");
-                    inputRef.current.classList.remove("bg-red-200");
                   }
-                }
-                selectOption(opt);
+                  selectOption(opt);
+                },
+                children: opt.label
               },
-              children: opt.label
-            },
-            index
-          ))
+              index
+            ))
+          ]
         }
       )
     ] }),

package/dist/index.mjs

@@ -36733,6 +36733,29 @@ function Select({
   const [options, setOptions] = useState8(
     []
   );
+  const [dropdownPos, setDropdownPos] = useState8({ left: 0, width: 0 });
+  useEffect5(() => {
+    if (isOpen && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      if (spaceBelow < 200 && spaceAbove > spaceBelow) {
+        setOpenUpwards(true);
+        setDropdownPos({
+          bottom: window.innerHeight - rect.top + 4,
+          left: rect.left,
+          width: rect.width
+        });
+      } else {
+        setOpenUpwards(false);
+        setDropdownPos({
+          top: rect.bottom + 4,
+          left: rect.left,
+          width: rect.width
+        });
+      }
+    }
+  }, [isOpen]);
   const [filtered, setFiltered] = useState8(
     []
   );
@@ -36750,12 +36773,12 @@ function Select({
     }).map((child) => {
       return {
         value: child.props.value,
-        label: child.props.children
+        label: React5.Children.toArray(child.props.children).join("")
       };
     });
     setOptions(parsedOptions);
     setFiltered(parsedOptions);
-    const value = (props == null ? void 0 : props.value) && ((_a = parsedOptions.find((opt) => opt.value == props.value)) == null ? void 0 : _a.label);
+    const value = (props == null ? void 0 : props.value) ? ((_a = parsedOptions.find((opt) => opt.value == props.value)) == null ? void 0 : _a.label) || "" : "";
     setInputValue(value);
   }, [children]);
   useEffect5(() => {
@@ -36783,7 +36806,8 @@ function Select({
     }
   };
   const selectOption = (opt) => {
-    setInputValue(opt.label);
+    const v = `${opt.label}`;
+    setInputValue(v);
     setIsOpen(false);
   };
   const containerRef = useRef2(null);
@@ -36801,7 +36825,7 @@ function Select({
     }
   }, [isOpen]);
   return /* @__PURE__ */ jsxs7("div", { ref: containerRef, className: "w-full relative my-3", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "relative flex items-center border rounded bg-white", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "relative flex items-center border rounded bg-white ", children: [
       /* @__PURE__ */ jsx10(
         "input",
         {
@@ -36843,7 +36867,10 @@ function Select({
         " ",
         (props == null ? void 0 : props.required) && /* @__PURE__ */ jsx10("span", { className: "text-red-500", children: "*" })
       ] }),
-      !isOpen && /* @__PURE__ */ jsx10("div", { className: "absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold", children: /* @__PURE__ */ jsx10(SelectIcon, {}) }),
+      !isOpen && /* @__PURE__ */ jsxs7("div", { className: "absolute top-0 right-0 flex  justify-center items-center px-2 py-2 font-bold", children: [
+        /* @__PURE__ */ jsx10("div", { className: "font-normal text-xs text-gray-400", children: filtered.length == 0 && "Loading..." }),
+        /* @__PURE__ */ jsx10(SelectIcon, {})
+      ] }),
       isOpen && inputValue != "" && /* @__PURE__ */ jsx10(
         "button",
         {
@@ -36862,44 +36889,54 @@ function Select({
           children: /* @__PURE__ */ jsx10(CloseIcon, {})
         }
       ),
-      isOpen && filtered.length > 0 && /* @__PURE__ */ jsx10(
+      isOpen && /* @__PURE__ */ jsxs7(
         "div",
         {
-          style: { zIndex: 9999999999 },
-          className: `absolute w-full border rounded shadow bg-white z-10 max-h-100 top-10  overflow-y-auto ${openUpwards ? "bottom-full mb-1" : "mt-1"}`,
-          children: filtered.map((opt, index) => /* @__PURE__ */ jsx10(
-            "div",
-            {
-              className: `p-2 cursor-pointer ${index === highlightedIndex ? "bg-blue-100" : "hover:bg-gray-100"}`,
-              onClick: () => {
-                var _a;
-                try {
-                  (_a = props == null ? void 0 : props.onChange) == null ? void 0 : _a.call(props, {
-                    target: { value: (opt == null ? void 0 : opt.value) || opt.label }
-                  });
-                } catch (error) {
-                }
-                setHasEdition(false);
-                const item = validOption(opt.label);
-                if (inputRef == null ? void 0 : inputRef.current) {
-                  if (!item) {
-                    if (strictMode) {
-                      inputRef.current.value = "";
-                      inputRef.current.classList.remove("bg-green-200");
-                      inputRef.current.classList.add("bg-red-200");
-                      return;
+          style: {
+            zIndex: 999999,
+            position: "fixed",
+            top: dropdownPos.top,
+            bottom: dropdownPos.bottom,
+            left: dropdownPos.left,
+            width: dropdownPos.width
+          },
+          className: "border rounded shadow bg-white max-h-100 overflow-y-auto",
+          children: [
+            filtered.length == 0 && /* @__PURE__ */ jsx10("div", { className: "font-normal p-2 text-gray-400", children: "Loading options..." }),
+            filtered.map((opt, index) => /* @__PURE__ */ jsx10(
+              "div",
+              {
+                className: `p-2 cursor-pointer ${index === highlightedIndex ? "bg-blue-100" : "hover:bg-gray-100"}`,
+                onClick: () => {
+                  var _a;
+                  try {
+                    (_a = props == null ? void 0 : props.onChange) == null ? void 0 : _a.call(props, {
+                      target: { value: (opt == null ? void 0 : opt.value) || opt.label }
+                    });
+                  } catch (error) {
+                  }
+                  setHasEdition(false);
+                  const item = validOption(opt.label);
+                  if (inputRef == null ? void 0 : inputRef.current) {
+                    if (!item) {
+                      if (strictMode) {
+                        inputRef.current.value = "";
+                        inputRef.current.classList.remove("bg-green-200");
+                        inputRef.current.classList.add("bg-red-200");
+                        return;
+                      }
+                    } else {
+                      inputRef.current.classList.add("bg-green-200");
+                      inputRef.current.classList.remove("bg-red-200");
                     }
-                  } else {
-                    inputRef.current.classList.add("bg-green-200");
-                    inputRef.current.classList.remove("bg-red-200");
                   }
-                }
-                selectOption(opt);
+                  selectOption(opt);
+                },
+                children: opt.label
               },
-              children: opt.label
-            },
-            index
-          ))
+              index
+            ))
+          ]
         }
       )
     ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "2.0.45",
+  "version": "2.0.47",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/select/index.tsx

@@ -32,6 +32,37 @@ export default function Select({
   const [options, setOptions] = useState<{ value: string; label: string }[]>(
     [],
   );
+  const [dropdownPos, setDropdownPos] = useState<{
+    top?: number;
+    bottom?: number;
+    left: number;
+    width: number;
+  }>({ left: 0, width: 0 });
+
+  useEffect(() => {
+    if (isOpen && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+
+      if (spaceBelow < 200 && spaceAbove > spaceBelow) {
+        setOpenUpwards(true);
+        setDropdownPos({
+          bottom: window.innerHeight - rect.top + 4,
+          left: rect.left,
+          width: rect.width,
+        });
+      } else {
+        setOpenUpwards(false);
+        setDropdownPos({
+          top: rect.bottom + 4,
+          left: rect.left,
+          width: rect.width,
+        });
+      }
+    }
+  }, [isOpen]);
+
   const [filtered, setFiltered] = useState<{ value: string; label: string }[]>(
     [],
   );
@@ -56,14 +87,14 @@ export default function Select({
       .map((child: any) => {
         return {
           value: child.props.value,
-          label: child.props.children,
+          label: React.Children.toArray(child.props.children).join(""),
         };
       });
     setOptions(parsedOptions);
     setFiltered(parsedOptions);
-    const value =
-      props?.value &&
-      parsedOptions.find((opt) => opt.value == props.value)?.label;
+    const value = props?.value
+      ? parsedOptions.find((opt) => opt.value == props.value)?.label || ""
+      : "";
     setInputValue(value);
   }, [children]);
 
@@ -97,8 +128,9 @@ export default function Select({
   };
 
   const selectOption = (opt: { value: string; label: string }) => {
-    // console.log(opt.label);
-    setInputValue(opt.label);
+    const v = `${opt.label}`;
+
+    setInputValue(v);
     setIsOpen(false);
   };
 
@@ -120,7 +152,7 @@ export default function Select({
   }, [isOpen]);
   return (
     <div ref={containerRef} className="w-full relative my-3">
-      <div className="relative flex items-center border rounded bg-white">
+      <div className="relative flex items-center border rounded bg-white ">
         <input
           autoComplete="off"
           ref={inputRef}
@@ -162,13 +194,17 @@ export default function Select({
           onFocus={() => setIsOpen(true)}
           onKeyDown={handleKeyDown}
         />
+
         {label && (
           <label className="absolute -top-2.5 left-2 text-xs font-bold  px-1">
             {label} {props?.required && <span className="text-red-500">*</span>}
           </label>
         )}
         {!isOpen && (
-          <div className="absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold">
+          <div className="absolute top-0 right-0 flex  justify-center items-center px-2 py-2 font-bold">
+            <div className="font-normal text-xs text-gray-400">
+              {filtered.length == 0 && "Loading..."}
+            </div>
             <SelectIcon />
           </div>
         )}
@@ -190,13 +226,23 @@ export default function Select({
             <CloseIcon />
           </button>
         )}
-        {isOpen && filtered.length > 0 && (
+        {isOpen && (
           <div
-            style={{ zIndex: 9999999999 }}
-            className={`absolute w-full border rounded shadow bg-white z-10 max-h-100 top-10  overflow-y-auto ${
-              openUpwards ? "bottom-full mb-1" : "mt-1"
-            }`}
+            style={{
+              zIndex: 999999,
+              position: "fixed",
+              top: dropdownPos.top,
+              bottom: dropdownPos.bottom,
+              left: dropdownPos.left,
+              width: dropdownPos.width,
+            }}
+            className="border rounded shadow bg-white max-h-100 overflow-y-auto"
           >
+            {filtered.length == 0 && (
+              <div className="font-normal p-2 text-gray-400">
+                Loading options...
+              </div>
+            )}
             {filtered.map((opt, index) => (
               <div
                 key={index}