next-helios-fe 1.8.88 → 1.8.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.88",
+  "version": "1.8.90",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/dropdown/item.tsx

@@ -25,7 +25,7 @@ export const Item: React.FC<ItemProps> = ({
           : `disabled:text-disabled ${
               as === "title" ? "" : "hover:bg-secondary-light"
             }`
-      }`}
+      } outline-0`}
       disabled={active ? true : (disabled || as === "title") ?? false}
       onClick={onClick}
     >

package/src/components/form/input/file.tsx

@@ -62,7 +62,8 @@ export const File: React.FC<FileProps> = ({
         options?.height === "full" && "h-full"
       }`}
     >
-      {!options?.buttonOnly &&
+      {options?.variant !== "drag&drop" &&
+        !options?.buttonOnly &&
         (label ||
           (!options?.hideInputDetail &&
             (options?.maxSizeInMb || description))) && (
@@ -79,7 +80,7 @@ export const File: React.FC<FileProps> = ({
             )}
             {!options?.hideInputDetail && (
               <div className="flex-1 flex justify-end items-center gap-2">
-                {options?.variant !== "drag&drop" && options?.maxSizeInMb && (
+                {options?.maxSizeInMb && (
                   <span className="text-sm select-none">
                     {options?.maxSizeInMb} MB
                   </span>

package/src/components/form/other/multipleSelect.tsx

@@ -11,6 +11,9 @@ export interface MultipleSelectProps
   menus: {
     label: string;
     value: string;
+    variant?: "button" | "title";
+    disabled?: boolean;
+    disableUnselect?: boolean;
     [key: string]: any;
   }[];
   label?: string;
@@ -126,6 +129,12 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
           </div>
         )}
         <div className="relative flex items-center">
+          <input
+            ref={inputRef}
+            type="text"
+            className="absolute bottom-0 -z-10 w-full border-0 rounded-md focus:ring-0"
+            disabled={disabled ?? false}
+          />
           <div
             ref={fakeInputRef}
             className={`group/button flex justify-between items-center gap-2 w-full min-h-10 px-4 border rounded-md caret-transparent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark ${height} ${
@@ -187,12 +196,6 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
               </div>
             )}
           </div>
-          <input
-            ref={inputRef}
-            type="text"
-            className="absolute bottom-0 -z-10 w-full border-0 focus:ring-0"
-            disabled={disabled ?? false}
-          />
           <div
             className="absolute left-4 flex flex-wrap gap-2 h-min pointer-events-none"
             style={{ width: itemContainerRef.current?.clientWidth }}
@@ -202,34 +205,38 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                 <div
                   key={item}
                   className={`flex items-center gap-2 px-2 py-0.5 rounded-md text-white select-none cursor-default pointer-events-auto ${
-                    disabled ? "bg-secondary" : "bg-primary"
+                    disabled ||
+                    menus.find((i) => i.value === item)?.disableUnselect
+                      ? "bg-secondary"
+                      : "bg-primary"
                   }`}
                 >
                   <span>{menus.find((i) => i.value === item)?.label}</span>
-                  <div
-                    className="cursor-pointer active:opacity-70 active:duration-300 active:ease-out disabled:active:opacity-100"
+                  <button
+                    disabled={
+                      disabled ||
+                      menus.find((i) => i.value === item)?.disableUnselect
+                    }
                     onClick={() => {
-                      if (!disabled) {
-                        setTempValue(tempValue.filter((i) => i !== item));
-                        if (onChange) {
-                          onChange({
-                            target: {
-                              value: tempValue.filter((i) => i !== item),
-                            },
-                          } as any);
-                        }
-                        if (onRemove) {
-                          onRemove({
-                            target: {
-                              value: item,
-                            },
-                          });
-                        }
+                      setTempValue(tempValue.filter((i) => i !== item));
+                      if (onChange) {
+                        onChange({
+                          target: {
+                            value: tempValue.filter((i) => i !== item),
+                          },
+                        } as any);
+                      }
+                      if (onRemove) {
+                        onRemove({
+                          target: {
+                            value: item,
+                          },
+                        });
                       }
                     }}
                   >
                     <Icon icon="pajamas:close" />
-                  </div>
+                  </button>
                 </div>
               );
             })}
@@ -273,6 +280,8 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                     active={
                       tempValue?.find((i) => i === item.value) ? true : false
                     }
+                    as={item.variant || "button"}
+                    disabled={item.disabled ?? false}
                     onClick={() => {
                       setTempValue([...tempValue, item.value]);
                       if (onChange) {

package/src/components/form/other/phoneNumber.tsx

@@ -1561,12 +1561,13 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
           <div className="relative flex items-center cursor-pointer">
             <input
               type="text"
-              className={`max-w-24 w-min ps-4 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height} ${
+              className={`max-w-24 w-min ps-4 pe-4 border-default border rounded-md bg-secondary-bg cursor-pointer placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height} ${
                 openDropdown
                   ? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
                   : "border-default placeholder:translate-x-0"
               }`}
               readOnly
+              tabIndex={-1}
               disabled={rest.disabled}
               value={`${
                 countryPhoneCode.find(