gbs-add-block 1.0.6 → 1.0.8

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.6)
+# GBS Building Blocks 2.0 (v1.0.8)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +6,10 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 1.0.6)
+## What's New 🎉 (Ver 1.0.8)
 
 - Uploader Enhancement
+- Select Bug Fix
 
 ## Authors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/select/index.tsx

@@ -12,7 +12,9 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
 } from "react";
+import { createPortal } from "react-dom";
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
 import type { ItemsProps, SelectHandle, SelectProps } from "./types";
@@ -26,6 +28,46 @@ import {
   useKeyboardNavigation,
 } from "@grampro/headless-helpers";
 
+// Portal Dropdown Component
+const PortalDropdown = ({ targetRef, children, isVisible }: any) => {
+  const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+
+  useEffect(() => {
+    if (isVisible && targetRef.current) {
+      const rect = targetRef.current.getBoundingClientRect();
+      const scrollTop =
+        window.pageYOffset || document.documentElement.scrollTop;
+      const scrollLeft =
+        window.pageXOffset || document.documentElement.scrollLeft;
+
+      setPosition({
+        top: rect.bottom + scrollTop + 4,
+        left: rect.left + scrollLeft,
+        width: rect.width, // Match the width of the select button
+      });
+    }
+  }, [isVisible, targetRef]);
+
+  if (!isVisible) return null;
+
+  return createPortal(
+    <div
+      style={{
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+        width: position.width,
+        zIndex: 1000,
+      }}
+      className={popUp["pop-up-style"]}
+      data-select-portal="true"
+    >
+      {children}
+    </div>,
+    document.body
+  );
+};
+
 const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   const {
     id = "",
@@ -67,6 +109,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
 
   const inputRef = useRef<HTMLInputElement>(null);
   const selectRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null); // Reference for portal positioning
 
   useClickOutside(selectRef as React.RefObject<HTMLElement>, () =>
     setShowPopover(false)
@@ -120,6 +163,55 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
     selected: selectedItem,
   }));
 
+  // Portal dropdown content
+  const dropdownContent = (
+    <>
+      {showSearch && (
+        <div className={selectStyle["input-parent"]}>
+          <Icon elements={search} svgClass={iconClass["grey-common"]} />
+          <input
+            autoComplete="off"
+            type="text"
+            name="search"
+            id="search"
+            placeholder="Search a value"
+            className="w-full outline-none dark:bg-transparent"
+            ref={inputRef}
+            value={searchTerm}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+              if (onFiltering) onFiltering(e.target.value);
+              setFocusedIndex(-1);
+            }}
+          />
+        </div>
+      )}
+      {filteredItems.length > 0 ? (
+        filteredItems.map(({ value, label }, index: number) => (
+          <button
+            key={value}
+            ref={(el: any) => (itemRefs.current[index] = el)}
+            className={`${selectStyle["filter-button"]} ${
+              focusedIndex === index ? "bg-gray-100 dark:bg-gray-700" : ""
+            }`}
+            onClick={() => handleSelect({ value, label })}
+            onMouseEnter={() => setFocusedIndex(index)}
+          >
+            <Icon
+              elements={check}
+              svgClass={`h-4 w-4 fill-none ${
+                selectedItem === value ? "stroke-gray-500" : ""
+              }`}
+            />
+            {label}
+          </button>
+        ))
+      ) : (
+        <div className="text-sm text-center p-2">No Data Found</div>
+      )}
+    </>
+  );
+
   return (
     <div
       className="relative w-full mt-2"
@@ -129,6 +221,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
     >
       <div className="w-full relative">
         <button
+          ref={buttonRef} // Add ref for portal positioning
           className={`${error ? primary["error-border"] : "border"} ${
             selectStyle["select-button"]
           } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
@@ -163,53 +256,13 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
         disabled={disabled}
       />
 
-      {showPopover && !disabled && (
-        <div className={popUp["pop-up-style"]}>
-          {showSearch && (
-            <div className={selectStyle["input-parent"]}>
-              <Icon elements={search} svgClass={iconClass["grey-common"]} />
-              <input
-                autoComplete="off"
-                type="text"
-                name="search"
-                id="search"
-                placeholder="Search a value"
-                className="w-full outline-none"
-                ref={inputRef}
-                value={searchTerm}
-                onChange={(e) => {
-                  setSearchTerm(e.target.value);
-                  if (onFiltering) onFiltering(e.target.value);
-                  setFocusedIndex(-1);
-                }}
-              />
-            </div>
-          )}
-          {filteredItems.length > 0 ? (
-            filteredItems.map(({ value, label }, index: number) => (
-              <button
-                key={value}
-                ref={(el: any) => (itemRefs.current[index] = el)}
-                className={`${selectStyle["filter-button"]} ${
-                  focusedIndex === index ? "bg-gray-100" : ""
-                }`}
-                onClick={() => handleSelect({ value, label })}
-                onMouseEnter={() => setFocusedIndex(index)}
-              >
-                <Icon
-                  elements={check}
-                  svgClass={`h-4 w-4 fill-none ${
-                    selectedItem === value ? "stroke-gray-500" : ""
-                  }`}
-                />
-                {label}
-              </button>
-            ))
-          ) : (
-            <div className="text-sm text-center">No Data Found</div>
-          )}
-        </div>
-      )}
+      {/* Portal Dropdown - renders to document.body */}
+      <PortalDropdown
+        targetRef={buttonRef}
+        isVisible={showPopover && !disabled}
+      >
+        {dropdownContent}
+      </PortalDropdown>
     </div>
   );
 });