gbs-add-block 1.0.18 → 1.0.20

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.18)
+# GBS Building Blocks 2.0 (v1.0.20)
 
 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.18)
+## What's New 🎉 (Ver 1.0.20)
 
 - Style Update
+- General Bug Fix
 
 ## Authors
 

package/package.json

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

package/source/components/multiselect/index.tsx

@@ -72,12 +72,13 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
 
     useEffect(() => {
       if (showPopover) {
-        inputRef.current?.focus();
+        setTimeout(() => {
+          inputRef.current?.focus();
+        }, 0);
       }
     }, [showPopover]);
 
     const getSelectedDisplay = useCallback(() => {
-      // if (selected.length === 0) return placeholder;
       const displayedItems = selected
         .slice(0, 3)
         .map(
@@ -162,33 +163,40 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
       </>
     );
 
-    // Selected display Content
     const selectedDisplay = (
-      <span className="flex items-center gap-1">
+      <div className="flex items-center gap-1 flex-wrap pr-16">
         {selected
           .slice(0, truncate && selected.length > 3 ? 3 : selected.length)
-          .map((item: string, index: number) => {
+          .map((value: string, index: number) => {
+            const item = workingDataSource.find(
+              (dataItem) => dataItem.value === value
+            );
+            const label = item?.label || value;
+
             return (
               <span
                 key={index}
-                className="bg-slate-800 text-white px-2 py-1 rounded flex items-center gap-1 text-xs"
+                className="bg-slate-800 text-white px-2 py-1 rounded flex items-center gap-1 text-xs whitespace-nowrap"
               >
-                {item}{" "}
+                {label.length > 15 ? `${label.substring(0, 15)}...` : label}
                 <span
-                  onClick={() => handleSelect(item)}
-                  className="cursor-pointer"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleSelect(value);
+                  }}
+                  className="cursor-pointer hover:bg-slate-700 rounded p-0.5"
                 >
-                  <Icon elements={x} svgClass={iconClass["grey-common"]} />
+                  <Icon elements={x} svgClass="h-3 w-3 stroke-white" />
                 </span>
               </span>
             );
           })}
         {truncate && selected.length > 3 && (
-          <span className="bg-slate-800 text-white px-2 py-1 rounded text-xs">
+          <span className="bg-slate-800 text-white px-2 py-1 rounded text-xs whitespace-nowrap">
             +{selected.length - 3} more
           </span>
         )}
-      </span>
+      </div>
     );
 
     return (
@@ -198,28 +206,34 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
             ref={buttonRef}
             className={`${error ? primary["error-border"] : "border"} ${
               selectStyle["select-button"]
-            } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+            } ${disabled ? "opacity-50 cursor-not-allowed" : ""} relative`}
             onClick={togglePopover}
             type="button"
             disabled={disabled}
           >
             {selected.length == 0 ? (
-              <span>{placeholder}</span>
+              <span className="pr-8">{placeholder}</span>
             ) : (
-              <span>{selectedDisplay}</span>
+              selectedDisplay
             )}
 
-            <Icon
-              elements={upDown}
-              svgClass={`${iconClass["grey-common"]} ${
-                disabled ? "opacity-50" : ""
-              }`}
-            />
+            <div className="absolute right-2 top-1/2 transform -translate-y-1/2 pointer-events-none">
+              <Icon
+                elements={upDown}
+                svgClass={`${iconClass["grey-common"]} ${
+                  disabled ? "opacity-50" : ""
+                }`}
+              />
+            </div>
           </button>
+
           {selected.length > 0 && (
             <button
-              className={selectStyle["selectedDisplay-Button"]}
-              onClick={handleClear}
+              className={`${selectStyle["selectedDisplay-Button"]}`}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleClear();
+              }}
               type="button"
             >
               <Icon elements={x} svgClass={iconClass["grey-common"]} />

package/source/components/select/index.tsx

@@ -198,7 +198,9 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
           type="button"
           disabled={disabled}
         >
-          {selectedDisplay || placeholder}
+          {selectedDisplay.length > 20
+            ? `${selectedDisplay.substring(0, 20)}...` // We will truncate the display text if it exceeds 20 characters
+            : selectedDisplay || placeholder}
           <Icon
             elements={upDown}
             svgClass={`${iconClass["grey-common"]} ${