gbs-add-block 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/input/index.tsx

@@ -74,6 +74,7 @@ export const Input = ({
           {/* If Type is password, this will show a password visible toggle button */}
           {props.type && props.type === "password" && (
             <button
+              type="button"
               className="absolute inset-y-0 right-0 flex items-center pr-2"
               onClick={toggleTypeForPassword}
             >
@@ -98,7 +99,9 @@ export const Input = ({
                 value={otpValues[index]}
                 onChange={(e) => updateOtpValue(index, e)}
                 onKeyDown={(e) => handleKeydown(index, e)}
-                // ref={(ref) => (inputRefs.current[index] = ref)}
+                ref={(ref) => {
+                  inputRefs.current[index] = ref;
+                }}
                 className={OTPClass}
               />
             ))}

package/source/components/multiselect/index.tsx

@@ -8,6 +8,7 @@
 import React, {
   forwardRef,
   memo,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useRef,
@@ -50,10 +51,6 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
     handleDataSource();
   }, [items]);
 
-  useEffect(() => {
-    if (onSelect) onSelect(selected);
-  }, [selected, onSelect]);
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -87,13 +84,16 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
     setShowPopover(!showPopover);
   };
 
-  const handleSelect = (value: string) => {
-    setSelected((prev) =>
-      prev.includes(value)
-        ? prev.filter((item) => item !== value)
-        : [...prev, value]
-    );
-  };
+  const handleSelect = useCallback(
+    (value: string) => {
+      const newSelected = selected.includes(value)
+        ? selected.filter((item) => item !== value)
+        : [...selected, value];
+      setSelected(newSelected);
+      onSelect?.(newSelected);
+    },
+    [selected, onSelect]
+  );
 
   const getSelectedDisplay = () => {
     if (selected.length === 0) return placeholder;
@@ -127,6 +127,7 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
   const clearSelected = () => {
     setSelected([]);
     setShowPopover(false);
+    if (onSelect) onSelect([]);
   };
 
   useImperativeHandle(ref, () => ({
@@ -142,19 +143,27 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
   return (
     <div className="relative w-[200px]" ref={selectRef}>
       <div className="relative border w-[200px] flex items-center px-4 py-2 rounded-lg">
-        <button onClick={togglePopover} className="flex-grow text-sm text-left">
+        <button
+          onClick={togglePopover}
+          className="flex-grow text-sm text-left"
+          type="button"
+        >
           {getSelectedDisplay()}
         </button>
         <div className="flex items-center space-x-2">
           {selected.length > 0 && (
-            <button className="flex items-center px-2" onClick={clearSelected}>
+            <button
+              className="flex items-center px-2"
+              onClick={clearSelected}
+              type="button"
+            >
               <Icon
                 elements={x}
                 svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
               />
             </button>
           )}
-          <button onClick={togglePopover}>
+          <button onClick={togglePopover} type="button">
             <Icon
               elements={upDown}
               svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
@@ -187,6 +196,7 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
           {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)}