gbs-add-block 1.0.10 → 1.0.12

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.10)
+# GBS Building Blocks 2.0 (v1.0.12)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,10 +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.10)
+## What's New 🎉 (Ver 1.0.12)
 
 - Uploader Enhancement
-- Select Bug Fix
+- Select & MultiSelect Bug Fix
 
 ## Authors
 

package/package.json

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

package/source/components/multiselect/PortalDropDown.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { popUp } from "../globalStyle";
+
+export 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,
+      });
+    }
+  }, [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
+  );
+};

package/source/components/multiselect/index.tsx

@@ -21,7 +21,9 @@ import {
 } from "@grampro/headless-helpers";
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
-import { iconClass, popUp, primary } from "../globalStyle";
+import { iconClass, primary } from "../globalStyle";
+import { selectStyle } from "../globalStyle";
+import { PortalDropdown } from "./PortalDropDown";
 
 const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
   (props, ref) => {
@@ -42,6 +44,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
 
     const inputRef = useRef<HTMLInputElement>(null);
     const selectRef = useRef<HTMLDivElement>(null);
+    const buttonRef = useRef<HTMLButtonElement>(null);
 
     const {
       showPopover,
@@ -57,9 +60,15 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
       getSelectItems,
     } = useMultiSelectState(items, selectedItems, lazy, onSelect);
 
-    useClickOutside(selectRef as React.RefObject<HTMLElement>, () =>
-      setShowPopover(false)
-    );
+    useClickOutside(selectRef as React.RefObject<HTMLElement>, (event) => {
+      const portalElement = document.querySelector(
+        '[data-select-portal="true"]'
+      );
+      if (portalElement && portalElement.contains(event.target as Node)) {
+        return;
+      }
+      setShowPopover(false);
+    });
 
     useEffect(() => {
       if (showPopover) {
@@ -68,7 +77,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
     }, [showPopover]);
 
     const getSelectedDisplay = useCallback(() => {
-      if (selected.length === 0) return placeholder;
+      // if (selected.length === 0) return placeholder;
       const displayedItems = selected
         .slice(0, 3)
         .map(
@@ -110,42 +119,112 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
       ]
     );
 
+    // 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)}
+            />
+          </div>
+        )}
+
+        {filteredItems.length > 0 ? (
+          filteredItems.map(({ value, label }) => (
+            <button
+              type="button"
+              key={value}
+              className={selectStyle["filter-button"]}
+              onClick={() => handleSelect(value)}
+            >
+              <Icon
+                elements={check}
+                svgClass={`h-4 w-4 fill-none ${
+                  selected.includes(value) ? "stroke-gray-500" : ""
+                }`}
+              />
+              {label.length > 20 ? `${label.substring(0, 20)}...` : label}
+            </button>
+          ))
+        ) : (
+          <div className="text-sm text-center">No Data Found</div>
+        )}
+      </>
+    );
+
+    // Selected display Content
+    const selectedDisplay = (
+      <span className="flex items-center gap-1">
+        {selected
+          .slice(0, truncate && selected.length > 3 ? 3 : selected.length)
+          .map((item: string, index: number) => {
+            return (
+              <span
+                key={index}
+                className="bg-slate-800 text-white px-2 py-1 rounded flex items-center gap-1 text-xs"
+              >
+                {item}{" "}
+                <span
+                  onClick={() => handleSelect(item)}
+                  className="cursor-pointer"
+                >
+                  <Icon elements={x} svgClass={iconClass["grey-common"]} />
+                </span>
+              </span>
+            );
+          })}
+        {truncate && selected.length > 3 && (
+          <span className="bg-slate-800 text-white px-2 py-1 rounded text-xs">
+            +{selected.length - 3} more
+          </span>
+        )}
+      </span>
+    );
+
     return (
       <div className="relative w-full" ref={selectRef}>
-        <div
-          className={`relative border border-gary-300 w-full flex items-center px-4 py-2 rounded-lg ${
-            error && "border-red-500"
-          }`}
-        >
+        <div className="w-full relative">
           <button
+            ref={buttonRef}
+            className={`${error ? primary["error-border"] : "border"} ${
+              selectStyle["select-button"]
+            } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
             onClick={togglePopover}
-            className={`flex-grow text-sm text-left font-medium ${
-              disabled ? "opacity-50 cursor-not-allowed" : ""
-            }`}
             type="button"
             disabled={disabled}
           >
-            {getSelectedDisplay()}
-          </button>
-          <div className="flex items-center space-x-2">
-            {selected.length > 0 && (
-              <button
-                className="flex items-center px-2"
-                onClick={handleClear}
-                type="button"
-              >
-                <Icon elements={x} svgClass={iconClass["grey-common"]} />
-              </button>
+            {selected.length == 0 ? (
+              <span>{placeholder}</span>
+            ) : (
+              <span>{selectedDisplay}</span>
             )}
-            <button onClick={togglePopover} type="button">
-              <Icon
-                elements={upDown}
-                svgClass={`${iconClass["grey-common"]} ${
-                  disabled ? "opacity-50" : ""
-                }`}
-              />
+
+            <Icon
+              elements={upDown}
+              svgClass={`${iconClass["grey-common"]} ${
+                disabled ? "opacity-50" : ""
+              }`}
+            />
+          </button>
+          {selected.length > 0 && (
+            <button
+              className={selectStyle["selectedDisplay-Button"]}
+              onClick={handleClear}
+              type="button"
+            >
+              <Icon elements={x} svgClass={iconClass["grey-common"]} />
             </button>
-          </div>
+          )}
         </div>
         {error && <p className={primary["error-primary"]}>{error}</p>}
 
@@ -157,46 +236,12 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
           disabled={disabled}
         />
 
-        {showPopover && !disabled && (
-          <div className={popUp["pop-up-style"]}>
-            {showSearch && (
-              <div className="flex p-2 gap-1 items-center sticky top-0 bg-white border-b dark:bg-black">
-                <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-black"
-                  ref={inputRef}
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                />
-              </div>
-            )}
-            {filteredItems.length > 0 ? (
-              filteredItems.map(({ value, label }) => (
-                <button
-                  type="button"
-                  key={value}
-                  className="flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-sm dark:hover:bg-blue-600"
-                  onClick={() => handleSelect(value)}
-                >
-                  <Icon
-                    elements={check}
-                    svgClass={`h-4 w-4 fill-none ${
-                      selected.includes(value) ? "stroke-gray-500" : ""
-                    }`}
-                  />
-                  {label}
-                </button>
-              ))
-            ) : (
-              <div className="text-sm text-center">No Data Found</div>
-            )}
-          </div>
-        )}
+        <PortalDropdown
+          targetRef={buttonRef}
+          isVisible={showPopover && !disabled}
+        >
+          {dropdownContent}
+        </PortalDropdown>
       </div>
     );
   }

package/source/components/select/PortalDropDown.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { popUp } from "../globalStyle";
+
+export 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,
+      });
+    }
+  }, [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
+  );
+};

package/source/components/select/index.tsx

@@ -12,14 +12,12 @@ 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";
-import { selectStyle } from "./style";
-import { iconClass, popUp, primary } from "../globalStyle";
+import { selectStyle } from "../globalStyle";
+import { iconClass, primary } from "../globalStyle";
 import {
   useSelectState,
   useSelectData,
@@ -27,46 +25,7 @@ import {
   useKeyboardNavigation,
   useClickOutside,
 } 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,
-      });
-    }
-  }, [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
-  );
-};
+import { PortalDropdown } from "./PortalDropDown";
 
 const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   const {
@@ -211,7 +170,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
                 selectedItem === value ? "stroke-gray-500" : ""
               }`}
             />
-            {label}
+            {label.length > 20 ? `${label.substring(0, 20)}...` : label}
           </button>
         ))
       ) : (
@@ -222,14 +181,14 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
 
   return (
     <div
-      className="relative w-full mt-2"
+      className="relative w-full"
       ref={selectRef}
       id={id}
       onKeyDown={handleKeyDown}
     >
       <div className="w-full relative">
         <button
-          ref={buttonRef} // Add ref for portal positioning
+          ref={buttonRef}
           className={`${error ? primary["error-border"] : "border"} ${
             selectStyle["select-button"]
           } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}

package/source/globalStyle.ts

@@ -5,7 +5,7 @@ export const primary = {
 
 export const popUp = {
   "pop-up-style":
-    "w-full absolute overflow-y-auto border px-2 rounded-lg mt-[1px] scrollbar bg-white z-50 scrollbar h-auto dark:bg-black dark:text-white animate-fade-down animate-once animate-duration-200",
+    "w-full absolute overflow-y-auto px-2 border border-slate-200 rounded-lg mt-[2px] scrollbar bg-white z-90 scrollbar h-auto dark:bg-black dark:text-white animate-fade-down animate-once animate-duration-200",
 };
 
 export const iconClass = {
@@ -20,3 +20,14 @@ export const inputStyles = {
   passwordToggle: "absolute inset-y-0 right-0 flex items-center pr-2",
   otpContainer: "otp-container",
 };
+
+export const selectStyle = {
+  "select-button":
+    "flex items-center px-4 py-2 w-full justify-between rounded-lg font-medium text-sm",
+  "filter-button":
+    "flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-xs dark:hover:bg-blue-600",
+  "input-parent":
+    "text-sm flex p-1 mt-1 gap-1 items-center sticky top-0 bg-white border rounded-lg border-slate-200 z-10",
+  "selectedDisplay-Button":
+    "absolute right-8 top-0 h-full flex items-center px-2 z-20",
+};

package/source/components/select/style.ts

@@ -1,9 +0,0 @@
-export const selectStyle = {
-  "select-button":
-    "flex items-center px-4 py-2 w-full justify-between rounded-lg font-medium text-sm",
-  "filter-button":
-    "flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-sm dark:hover:bg-blue-600",
-  "input-parent": "flex p-2 gap-1 items-center sticky top-0 bg-white border-b",
-  "selectedDisplay-Button":
-    "absolute right-8 top-0 h-full flex items-center px-2 z-20",
-};