gbs-add-block 1.0.20 → 1.0.22

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.20)
+# GBS Building Blocks 2.0 (v1.0.22)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,7 @@ 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.20)
+## What's New 🎉 (Ver 1.0.22)
 
 - Style Update
 - General Bug Fix

package/package.json

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

package/source/components/multiselect/index.tsx

@@ -123,39 +123,42 @@ 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>
-        )}
+        <div className={selectStyle["input-parent"]}>
+          {showSearch && (
+            <div className="flex items-center gap-2 px-2 py-1">
+              <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>
+          )}
+        </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="w-full px-1" key={value}>
+              <button
+                type="button"
+                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>
           ))
         ) : (
           <div className="text-sm text-center">No Data Found</div>

package/source/components/select/index.tsx

@@ -131,49 +131,52 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   // 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 "
-            ref={inputRef}
-            value={searchTerm}
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-              if (onFiltering) onFiltering(e.target.value);
-              setFocusedIndex(-1);
-            }}
-          />
-        </div>
-      )}
+      <div className={selectStyle["input-parent"]}>
+        {showSearch && (
+          <div className="flex items-center gap-2 px-2 py-1">
+            <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>
+        )}
+      </div>
       {filteredItems.length > 0 ? (
         filteredItems.map(({ value, label }, index: number) => (
-          <button
-            key={value}
-            ref={(el: any) => {
-              if (itemRefs.current) {
-                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" : ""
+          <div className="w-full px-1" key={value}>
+            <button
+              ref={(el: any) => {
+                if (itemRefs.current) {
+                  itemRefs.current[index] = el;
+                }
+              }}
+              className={`${selectStyle["filter-button"]} ${
+                focusedIndex === index ? "bg-gray-100 dark:bg-gray-700" : ""
               }`}
-            />
-            {label.length > 20 ? `${label.substring(0, 20)}...` : label}
-          </button>
+              onClick={() => handleSelect({ value, label })}
+              onMouseEnter={() => setFocusedIndex(index)}
+            >
+              <Icon
+                elements={check}
+                svgClass={`h-4 w-4 fill-none ${
+                  selectedItem === value ? "stroke-gray-500" : ""
+                }`}
+              />
+              {label.length > 20 ? `${label.substring(0, 20)}...` : label}
+            </button>
+          </div>
         ))
       ) : (
         <div className="text-sm text-center p-2">No Data Found</div>

package/source/globalStyle.ts

@@ -5,7 +5,7 @@ export const primary = {
 
 export const popUp = {
   "pop-up-style":
-    "w-full px-1 absolute overflow-y-auto border border-slate-200 rounded-lg mt-[2px] scrollbar bg-white z-90 scrollbar h-40 dark:bg-black dark:text-white animate-fade-down animate-once animate-duration-200",
+    "w-full absolute overflow-y-auto border border-slate-200 rounded-lg mt-[2px] scrollbar bg-white z-90 scrollbar h-40 dark:bg-black dark:text-white animate-fade-down animate-once animate-duration-200",
 };
 
 export const iconClass = {
@@ -23,11 +23,11 @@ export const inputStyles = {
 
 export const selectStyle = {
   "select-button":
-    "flex items-center px-4 py-2 w-full justify-between rounded-lg font-medium text-sm",
+    "flex items-center px-4 py-2 w-full justify-between rounded-lg font-medium text-md",
   "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-0 gap-1 items-center sticky top-0 border-b rounded-lg border-slate-200 z-50 bg-white dark:bg-black",
+    "text-sm flex w-full -mt-1 gap-1 items-center sticky top-0 border-b rounded-lg border-slate-200 z-50 bg-white dark:bg-black",
   "selectedDisplay-Button":
-    "absolute right-8 top-0 h-full flex items-center px-2 z-20",
+    "absolute right-8 top-0 h-full flex items-center px-2 z-20 absolute right-4 top-1/2 transform -translate-y-1/2 z-10",
 };