@algorithm-shift/design-system 1.2.84 → 1.2.86

package/dist/index.js

@@ -27951,11 +27951,16 @@ function LazySelectDropdown({
       }
     ),
     errorMessage && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "mt-1 text-xs text-red-500", children: errorMessage }),
-    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Portal_default, { container: dropdownRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "div",
       {
-        className: "fixed z-[9999] w-fit mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto",
-        style: { width: dropdownRef.current?.offsetWidth },
+        onMouseDown: (e) => e.stopPropagation(),
+        className: "absolute z-[9999] w-fit mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto",
+        style: {
+          width: dropdownRef.current?.offsetWidth,
+          top: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().bottom + window.scrollY : 0,
+          left: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().left + window.scrollX : 0
+        },
         children: loading && lazyOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "px-3 py-4 text-center text-gray-500 flex items-center justify-center gap-2 text-sm", children: [
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "animate-spin w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full" }),
           "Loading..."
@@ -27963,7 +27968,9 @@ function LazySelectDropdown({
           lazyOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "div",
             {
-              onClick: () => handleSelect(option.value),
+              onClick: () => {
+                handleSelect(option.value);
+              },
               className: `px-3 py-2 hover:bg-blue-50 cursor-pointer text-sm ${option.value === value ? "bg-blue-100" : ""}`,
               children: option.label
             },
@@ -28014,6 +28021,8 @@ var Dropdown = ({ className, style, ...props }) => {
       LazyDropdown_default,
       {
         ...props,
+        dataKey,
+        dataLabel,
         id: props.name || "lazy-select-field",
         options: list,
         onChange: handleChange,