cr-ui-lib 1.1.19 → 1.1.21

package/dist/index.mjs

@@ -1,9 +1,10 @@
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Filler, Legend } from 'chart.js';
-import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useRef, useState, useEffect, useMemo, useLayoutEffect, useCallback } from 'react';
 import { Line } from 'react-chartjs-2';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { createPortal } from 'react-dom';
 import { isValid, parseISO, startOfDay, isToday, format } from 'date-fns';
 import DatePicker from 'react-datepicker';
 import ReactPaginate from 'react-paginate';
@@ -2650,12 +2651,17 @@ var MultipleAutoSuggestionInput = ({
   var _a;
   const [filteredOptions, setFilteredOptions] = useState(options);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0
+  });
   const inputRef = useRef(null);
-  const dropdownRef = useRef(null);
+  const containerRef = useRef(null);
   const selectedList = isMulti ? selectedItems : selectedItems ? [selectedItems] : [];
   useEffect(() => {
     const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsDropdownOpen(false);
       }
     };
@@ -2675,10 +2681,20 @@ var MultipleAutoSuggestionInput = ({
     setFilteredOptions(filtered);
     if (inputValue) {
       setIsDropdownOpen(true);
-    } else {
+    } else if (!isDropdownAutoOpen) {
       setIsDropdownOpen(false);
     }
   }, [inputValue, options, selectedItems]);
+  useLayoutEffect(() => {
+    if (isDropdownOpen && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  }, [isDropdownOpen]);
   const handleInputChange = (e) => {
     setInputValue(e.target.value);
     onChange(e);
@@ -2688,6 +2704,32 @@ var MultipleAutoSuggestionInput = ({
     setInputValue("");
     setIsDropdownOpen(false);
   };
+  const DropdownMenu = /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: `${dropdownPosition.top + 4}px`,
+        // position based on state
+        left: `${dropdownPosition.left}px`,
+        width: `${dropdownPosition.width}px`
+      },
+      className: twMerge(
+        "w-full rounded-lg bg-white shadow-lg z-50 max-h-60 overflow-auto border border-[#E2E2E2]",
+        // Increased z-index
+        dropdownOpenClass
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "py-1 rounded-lg border-[#E2E2E2]", children: filteredOptions.map((option) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "px-4 py-2 text-sm cursor-pointer custom-listing-hover",
+          onClick: () => handleOptionSelect(option.key),
+          children: option.name
+        },
+        option.key
+      )) })
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       "label",
@@ -2699,10 +2741,10 @@ var MultipleAutoSuggestionInput = ({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "div",
       {
-        ref: dropdownRef,
+        ref: containerRef,
         className: "relative",
         onClick: () => {
           var _a2, _b;
@@ -2711,81 +2753,34 @@ var MultipleAutoSuggestionInput = ({
             setIsDropdownOpen(true);
           }
         },
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: twMerge(
-                "border border-[#E2E2E2] focus-within:border-[#4683B4] rounded-lg p-1.5 bg-[#F8F8F8] cursor-pointer flex flex-wrap items-center gap-2 min-h-[2.5rem]",
-                buttonClass
-              ),
-              children: [
-                isMulti && Array.isArray(selectedList) ? selectedList.map((itemKey) => {
-                  const option = options.find((opt) => opt.key === itemKey);
-                  return /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: twMerge(
-                        "flex flex border-[#E2E2E2] border items-center px-2 py-1 bg-white text-gray-700 rounded-md text-xs font-medium",
-                        selectedItemsClass
-                      ),
-                      children: [
-                        option ? option.name : itemKey,
-                        onRemove && /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            onClick: (e) => {
-                              e.stopPropagation();
-                              onRemove(itemKey);
-                            },
-                            className: twMerge(
-                              "ml-1 text-gray-500 hover:text-gray-700 bg-white",
-                              removeIconClass
-                            ),
-                            children: /* @__PURE__ */ jsx(
-                              "svg",
-                              {
-                                xmlns: "http://www.w3.org/2000/svg",
-                                width: "14",
-                                height: "14",
-                                viewBox: "0 0 14 14",
-                                fill: "none",
-                                children: /* @__PURE__ */ jsx(
-                                  "path",
-                                  {
-                                    d: "M11.0837 3.739L10.2612 2.9165L7.00033 6.17734L3.73949 2.9165L2.91699 3.739L6.17783 6.99984L2.91699 10.2607L3.73949 11.0832L7.00033 7.82234L10.2612 11.0832L11.0837 10.2607L7.82283 6.99984L11.0837 3.739Z",
-                                    fill: "#323232"
-                                  }
-                                )
-                              }
-                            )
-                          }
-                        )
-                      ]
-                    },
-                    itemKey
-                  );
-                }) : selectedList.length > 0 && /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: twMerge(
+              "border border-[#E2E2E2] focus-within:border-[#4683B4] rounded-lg p-1.5 bg-[#F8F8F8] cursor-pointer flex flex-wrap items-center gap-2 min-h-[2.5rem]",
+              buttonClass
+            ),
+            children: [
+              isMulti && Array.isArray(selectedList) ? selectedList.map((itemKey) => {
+                const option = options.find((opt) => opt.key === itemKey);
+                return /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: twMerge(
-                      "flex border-[#E2E2E2] border items-center px-2 py-1 bg-white text-gray-700 rounded-md text-xs font-medium",
+                      "flex flex border-[#E2E2E2] border items-center px-2 py-1 bg-white text-gray-700 rounded-md text-xs font-medium",
                       selectedItemsClass
                     ),
                     children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-800", children: ((_a = options.find((opt) => opt.key === selectedList[0])) == null ? void 0 : _a.name) || selectedList[0] }),
+                      option ? option.name : itemKey,
                       onRemove && /* @__PURE__ */ jsx(
                         "button",
                         {
                           onClick: (e) => {
-                            var _a2;
                             e.stopPropagation();
-                            onRemove(
-                              ((_a2 = options.find((opt) => opt.key === selectedList[0])) == null ? void 0 : _a2.name) || selectedList[0]
-                            );
+                            onRemove(itemKey);
                           },
                           className: twMerge(
-                            "ml-1 text-gray-500 hover:text-gray-700",
+                            "ml-1 text-gray-500 hover:text-gray-700 bg-white",
                             removeIconClass
                           ),
                           children: /* @__PURE__ */ jsx(
@@ -2808,49 +2803,77 @@ var MultipleAutoSuggestionInput = ({
                         }
                       )
                     ]
-                  }
-                ),
-                !isMulti && !enableTypingSingle && selectedList.length === 0 && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 px-1 py-1", children: "Select..." }),
-                isMulti && enableTypingSingle && /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "text",
-                    ref: inputRef,
-                    value: inputValue,
-                    onKeyDown: keyDown,
-                    onChange: handleInputChange,
-                    className: "w-full flex-1 px-0 py-1 bg-[#F8F8F8] text-xs border-none outline-none focus:ring-0",
-                    onFocus: () => {
-                      if (!isDropdownOpen && (!isMulti || inputValue)) {
-                        setIsDropdownOpen(true);
+                  },
+                  itemKey
+                );
+              }) : selectedList.length > 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: twMerge(
+                    "flex border-[#E2E2E2] border items-center px-2 py-1 bg-white text-gray-700 rounded-md text-xs font-medium",
+                    selectedItemsClass
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-800", children: ((_a = options.find((opt) => opt.key === selectedList[0])) == null ? void 0 : _a.name) || selectedList[0] }),
+                    onRemove && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          var _a2;
+                          e.stopPropagation();
+                          onRemove(
+                            ((_a2 = options.find((opt) => opt.key === selectedList[0])) == null ? void 0 : _a2.name) || selectedList[0]
+                          );
+                        },
+                        className: twMerge(
+                          "ml-1 text-gray-500 hover:text-gray-700",
+                          removeIconClass
+                        ),
+                        children: /* @__PURE__ */ jsx(
+                          "svg",
+                          {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            width: "14",
+                            height: "14",
+                            viewBox: "0 0 14 14",
+                            fill: "none",
+                            children: /* @__PURE__ */ jsx(
+                              "path",
+                              {
+                                d: "M11.0837 3.739L10.2612 2.9165L7.00033 6.17734L3.73949 2.9165L2.91699 3.739L6.17783 6.99984L2.91699 10.2607L3.73949 11.0832L7.00033 7.82234L10.2612 11.0832L11.0837 10.2607L7.82283 6.99984L11.0837 3.739Z",
+                                fill: "#323232"
+                              }
+                            )
+                          }
+                        )
                       }
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          isDropdownOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: twMerge(
-                "absolute top-full left-0 mt-1 w-full rounded-lg bg-white shadow-lg z-10 max-h-60 overflow-auto border border-[#E2E2E2]",
-                dropdownOpenClass
+                    )
+                  ]
+                }
               ),
-              children: /* @__PURE__ */ jsx("div", { className: "py-1 rounded-lg border-[#E2E2E2]", children: filteredOptions.map((option) => /* @__PURE__ */ jsx(
-                "div",
+              (!isMulti || enableTypingSingle) && /* @__PURE__ */ jsx(
+                "input",
                 {
-                  className: "px-4 py-2 text-sm cursor-pointer custom-listing-hover",
-                  onClick: () => handleOptionSelect(option.key),
-                  children: option.name
-                },
-                option.key
-              )) })
-            }
-          )
-        ]
+                  type: "text",
+                  ref: inputRef,
+                  value: inputValue,
+                  onKeyDown: keyDown,
+                  onChange: handleInputChange,
+                  className: "w-full flex-1 px-0 py-1 bg-[#F8F8F8] text-xs border-none outline-none focus:ring-0",
+                  onFocus: () => {
+                    if (!isDropdownOpen && (!isMulti || inputValue)) {
+                      setIsDropdownOpen(true);
+                    }
+                  },
+                  placeholder: selectedList.length === 0 ? "Type or select..." : ""
+                }
+              )
+            ]
+          }
+        )
       }
-    )
+    ),
+    isDropdownOpen && filteredOptions.length > 0 && createPortal(DropdownMenu, document.body)
   ] });
 };
 var MultipleAutoSuggestionInput_default = MultipleAutoSuggestionInput;