cr-ui-lib 1.1.21 → 1.1.22

package/dist/index.js

@@ -3000,8 +3000,14 @@ function SingleSelectDropdown({
   const [searchTerm, setSearchTerm] = React.useState("");
   const dropdownRef = React.useRef(null);
   const listRef = React.useRef(null);
+  const portalRef = React.useRef(null);
   const searchTimeoutRef = React.useRef();
-  const [hoveredId, setHoveredId] = React.useState(null);
+  const [_, setHoveredId] = React.useState(null);
+  const [dropdownPosition, setDropdownPosition] = React.useState({
+    top: 0,
+    left: 0,
+    width: 0
+  });
   const selectedOption = options.find((opt) => opt.id === value) || null;
   const handleScroll = React.useCallback(() => {
     if (!listRef.current || isLoading || !hasMore) return;
@@ -3031,28 +3037,13 @@ function SingleSelectDropdown({
       }
     };
   }, []);
-  const getFilteredOptions = () => {
-    if (onSearch) {
-      return options;
-    } else {
-      return options.filter(
-        (opt) => {
-          var _a;
-          return ((_a = opt.name) != null ? _a : "").toLowerCase().includes(searchTerm.toLowerCase());
-        }
-      );
-    }
-  };
-  const filteredOptions = getFilteredOptions();
-  const getDisplayOptions = () => {
-    if (requiresSearch && onSearch) {
-      if (searchTerm.length < minSearchLength) {
-        return selectedOption ? [selectedOption] : [];
-      }
+  const filteredOptions = onSearch ? options : options.filter(
+    (opt) => {
+      var _a;
+      return ((_a = opt.name) != null ? _a : "").toLowerCase().includes(searchTerm.toLowerCase());
     }
-    return filteredOptions;
-  };
-  const displayOptions = getDisplayOptions();
+  );
+  const displayOptions = requiresSearch && onSearch && searchTerm.length < minSearchLength ? selectedOption ? [selectedOption] : [] : filteredOptions;
   const getEmptyStateContent = () => {
     if (requiresSearch && onSearch && searchTerm.length < minSearchLength) {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-8 text-center", children: [
@@ -3087,7 +3078,7 @@ function SingleSelectDropdown({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-2 text-sm text-gray-500", children: !isLoading && options.length === 0 && emptyMessage });
   };
   const handleClickOutside = (event) => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target) && portalRef.current && !portalRef.current.contains(event.target)) {
       setIsOpen(false);
     }
   };
@@ -3101,86 +3092,39 @@ function SingleSelectDropdown({
       onSearch("");
     }
   }, [isOpen]);
+  React.useLayoutEffect(() => {
+    if (isOpen && dropdownRef.current) {
+      const rect = dropdownRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  }, [isOpen]);
   const handleToggle = () => {
     if (!disabled) {
       setIsOpen(!isOpen);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "label",
-      {
-        className: tailwindMerge.twMerge(
-          "block py-1 pt-1 text-[14px] font-semibold mb-1 text-[#545454] ",
-          labelClass
-        ),
-        style: { letterSpacing: "0.2px" },
-        children: label
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          onClick: handleToggle,
-          className: tailwindMerge.twMerge(
-            `border-[1.5px] rounded-md h-[40px] pl-3 pr-2 py-2 bg-[#F8F8F8] cursor-pointer flex items-center justify-between ${disabled ? "bg-gray-100 cursor-not-allowed border-gray-200" : isOpen ? "border-[#4683B4]" : "border-[#E2E2E2]"}`,
-            buttonClass
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: `text-sm ${disabled ? "text-gray-400" : selectedOption ? "text-gray-700" : "text-gray-400"}`,
-                children: (selectedOption == null ? void 0 : selectedOption.name) || placeholder
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: `transition-transform duration-200 ${isOpen ? "rotate-180" : ""} ${disabled ? "text-gray-400" : ""}
-             ${hasIcon ? "block" : "hidden"}
-              `,
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "svg",
-                  {
-                    className: "transform rotate-180",
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 20 20",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_10508_5931)", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "path",
-                        {
-                          d: "M5.83333 11.6665L10 7.49984L14.1667 11.6665H5.83333Z",
-                          fill: "currentColor"
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_10508_5931", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "rect",
-                        {
-                          width: "20",
-                          height: "20",
-                          fill: "white",
-                          transform: "matrix(1 0 0 -1 0 20)"
-                        }
-                      ) }) })
-                    ]
-                  }
-                )
-              }
-            )
-          ]
-        }
-      ),
-      isOpen && !disabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute mt-1 w-full rounded-md bg-white shadow-lg z-20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 shadow-md border rounded-md max-h-[410px] flex flex-col", children: [
+  const DropdownMenu = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: portalRef,
+      style: {
+        position: "absolute",
+        top: `${dropdownPosition.top + 4}px`,
+        left: `${dropdownPosition.left}px`,
+        width: `${dropdownPosition.width}px`
+      },
+      className: "rounded-md bg-white shadow-lg z-50",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 shadow-md border rounded-md max-h-[410px] flex flex-col", children: [
         searchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               type: "text",
+              autoFocus: true,
               className: tailwindMerge.twMerge(
                 "input-placeholder-ellipsis w-full pr-[30px] h-[40px] px-2 py-1 rounded-md border border-gray-300 text-sm focus:border-1 focus:border-[#4683B4] focus:outline-none",
                 searchInputClass
@@ -3242,7 +3186,7 @@ function SingleSelectDropdown({
                 "div",
                 {
                   className: tailwindMerge.twMerge(
-                    `h-[40px] px-2 py-2 my-1 text-sm cursor-pointer select-none ${opt.id === value && hoveredId == null ? "bg-[#ECF3F7] text-[#131414] font-semibold" : opt.id === value && hoveredId != null ? "text-[#131414] font-semibold" : "text-[#131414]"}`,
+                    `h-[40px] px-2 py-2 my-1 text-sm cursor-pointer select-none rounded-md hover:bg-gray-100 ${opt.id === value ? "bg-[#ECF3F7] text-[#131414] font-semibold" : "text-[#131414]"}`,
                     displayItemClass
                   ),
                   onClick: () => {
@@ -3260,7 +3204,76 @@ function SingleSelectDropdown({
             ]
           }
         )
-      ] }) })
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        className: tailwindMerge.twMerge(
+          "block py-1 pt-1 text-[14px] font-semibold mb-1 text-[#545454]",
+          labelClass
+        ),
+        style: { letterSpacing: "0.2px" },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          onClick: handleToggle,
+          className: tailwindMerge.twMerge(
+            `border-[1.5px] rounded-md h-[40px] pl-3 pr-2 py-2 bg-[#F8F8F8] cursor-pointer flex items-center justify-between ${disabled ? "bg-gray-100 cursor-not-allowed border-gray-200" : isOpen ? "border-[#4683B4]" : "border-[#E2E2E2]"}`,
+            buttonClass
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: `text-sm ${disabled ? "text-gray-400" : selectedOption ? "text-gray-700" : "text-gray-400"}`,
+                children: (selectedOption == null ? void 0 : selectedOption.name) || placeholder
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `transition-transform duration-200 ${!isOpen ? "rotate-180" : ""} ${disabled ? "text-gray-400" : ""} ${hasIcon ? "block" : "hidden"}`,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 20 20",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_10508_5931)", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          d: "M5.83333 11.6665L10 7.49984L14.1667 11.6665H5.83333Z",
+                          fill: "currentColor"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_10508_5931", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "rect",
+                        {
+                          width: "20",
+                          height: "20",
+                          fill: "white",
+                          transform: "matrix(1 0 0 -1 0 20)"
+                        }
+                      ) }) })
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && !disabled && reactDom.createPortal(DropdownMenu, document.body)
     ] })
   ] });
 }