next-helios-fe 1.1.3 → 1.1.5

package/package.json

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

package/src/components/content-container/drawer.tsx

@@ -13,7 +13,7 @@ export const Drawer: React.FC<DrawerProps> = ({
   title,
   subtitle,
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [open, setOpen] = useState(false);
 
   useEffect(() => {
     document.addEventListener("mousedown", (e) => {
@@ -21,7 +21,7 @@ export const Drawer: React.FC<DrawerProps> = ({
         e.target instanceof HTMLElement &&
         !e.target.closest("#info-screen")
       ) {
-        setIsOpen(false);
+        setOpen(false);
       }
     });
   }, []);
@@ -29,19 +29,19 @@ export const Drawer: React.FC<DrawerProps> = ({
   return (
     <div
       className={`absolute top-0 right-0 h-full z-40 ${
-        !isOpen && "pointer-events-none"
+        !open && "pointer-events-none"
       }`}
     >
       <div
         className={`flex h-full duration-300 ${
-          isOpen ? "translate-x-0" : "translate-x-96"
+          open ? "translate-x-0" : "translate-x-96"
         }`}
       >
         <button
           type="button"
           className="group sticky top-36 h-min rounded-l-md text-white bg-primary p-2 hover:bg-primary-dark pointer-events-auto active:opacity-70 active:duration-300 active:ease-out"
           onClick={() => {
-            setIsOpen((prev) => !prev);
+            setOpen((prev) => !prev);
           }}
         >
           <Icon
@@ -63,7 +63,7 @@ export const Drawer: React.FC<DrawerProps> = ({
                 type="button"
                 className="flex justify-center items-center rounded-full p-1 text-slate-400 hover:bg-secondary-light"
                 onClick={() => {
-                  setIsOpen(false);
+                  setOpen(false);
                 }}
               >
                 <Icon icon="pajamas:close" className="text-2xl" />

package/src/components/content-container/modal/index.tsx

@@ -19,8 +19,8 @@ interface ModalProps {
     label?: string;
     onClick: () => void;
   };
-  isOpen: boolean;
-  onClose: (isOpen: boolean) => void;
+  open: boolean;
+  onClose: (open: boolean) => void;
 }
 
 export const Modal: React.FC<ModalProps> = ({
@@ -29,7 +29,7 @@ export const Modal: React.FC<ModalProps> = ({
   title,
   options,
   action,
-  isOpen,
+  open,
   onClose,
 }) => {
   useEffect(() => {
@@ -57,7 +57,7 @@ export const Modal: React.FC<ModalProps> = ({
       <div
         id={id}
         className={`absolute top-0 left-0 w-dvw h-dvh z-40 bg-black/30 backdrop-blur-sm ${
-          !isOpen && "hidden"
+          !open && "hidden"
         }`}
       >
         <div className="flex justify-center items-center w-full h-full">

package/src/components/dialog/index.tsx

@@ -11,15 +11,15 @@ interface DialogProps {
   options?: {
     timeout?: 3000 | 5000 | 7000 | 10000;
   };
-  isOpen: boolean;
-  onClose: (isOpen: boolean) => void;
+  open: boolean;
+  onClose: (open: boolean) => void;
 }
 
 export const Dialog: React.FC<DialogProps> = ({
   children,
   action,
   options,
-  isOpen,
+  open,
   onClose,
 }) => {
   const actionVariant =
@@ -50,12 +50,12 @@ export const Dialog: React.FC<DialogProps> = ({
       }, options.timeout);
       return () => clearTimeout(timeout);
     }
-  }, [isOpen]);
+  }, [open]);
 
   return (
     <div
       className={`absolute top-0 left-0 w-dvw h-dvh z-40 ${
-        !isOpen && "hidden"
+        !open && "hidden"
       } ${options?.timeout ? "pointer-events-none" : "bg-black/30"}`}
     >
       <div className="flex justify-center mt-4">

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

@@ -13,7 +13,7 @@ export interface TimeProps extends React.InputHTMLAttributes<HTMLInputElement> {
 
 export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
   const [tempValue, setTempValue] = useState(dayjs().format("hh:mm a"));
-  const [isOpen, setIsOpen] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState(false);
   const [position, setPosition] = useState<{
     top: number;
     left: number;
@@ -115,7 +115,7 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
         !dropdownRef.current.contains(e.target as Node) &&
         !triggerRef.current?.contains(e.target as Node)
       ) {
-        setIsOpen(false);
+        setOpenDropdown(false);
       }
     };
 
@@ -147,15 +147,15 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
       }
     }
 
-    if (isOpen) {
+    if (openDropdown) {
       document.getElementById("body")!.style.overflow = "hidden";
     } else {
       document.getElementById("body")!.style.overflow = "auto";
     }
-  }, [isOpen]);
+  }, [openDropdown]);
 
   useEffect(() => {
-    if (isOpen) {
+    if (openDropdown) {
       const scrollToSelected = (
         ref: React.RefObject<HTMLDivElement>,
         value: string,
@@ -175,7 +175,7 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
       scrollToSelected(hoursRef, tempValue.split(":")[0], 0);
       scrollToSelected(minutesRef, tempValue.split(":")[1].split(" ")[0], 0);
     }
-  }, [isOpen, tempValue]);
+  }, [openDropdown, tempValue]);
 
   useEffect(() => {
     if (rest.value) {
@@ -210,7 +210,7 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
       <div className="relative" ref={triggerRef}>
         <div
           className="relative flex items-center cursor-pointer"
-          onClick={() => setIsOpen(!isOpen)}
+          onClick={() => setOpenDropdown(!openDropdown)}
         >
           <input
             type="text"
@@ -219,7 +219,7 @@ export const Time: React.FC<TimeProps> = ({ options, label, ...rest }) => {
             {...rest}
           />
         </div>
-        {isOpen &&
+        {openDropdown &&
           position &&
           createPortal(
             <div

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

@@ -26,7 +26,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
   ...rest
 }) => {
   const [tempValue, setTempValue] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState(false);
   const [position, setPosition] = useState<{
     top: number;
     left: number;
@@ -49,7 +49,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
         !dropdownRef.current.contains(e.target as Node) &&
         !triggerRef.current?.contains(e.target as Node)
       ) {
-        setIsOpen(false);
+        setOpenDropdown(false);
       }
     };
 
@@ -81,12 +81,12 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
       }
     }
 
-    if (isOpen) {
+    if (openDropdown) {
       document.getElementById("body")!.style.overflow = "hidden";
     } else {
       document.getElementById("body")!.style.overflow = "auto";
     }
-  }, [isOpen, tempValue]);
+  }, [openDropdown, tempValue]);
 
   useEffect(() => {
     if (rest.value) {
@@ -121,7 +121,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
       <div className="relative" ref={triggerRef}>
         <div
           className="relative flex items-center cursor-pointer"
-          onClick={() => setIsOpen(!isOpen)}
+          onClick={() => setOpenDropdown(!openDropdown)}
         >
           <input
             type="text"
@@ -133,15 +133,15 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
               setTempValue(e.target.value);
             }}
             onClick={() => {
-              setIsOpen(true);
+              setOpenDropdown(true);
               setTempValue("");
             }}
           />
           <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">
-            <Icon icon={`gravity-ui:chevron-${isOpen ? "up" : "down"}`} />
+            <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
           </div>
         </div>
-        {isOpen &&
+        {openDropdown &&
           position &&
           createPortal(
             <div
@@ -176,7 +176,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                       }`}
                       onMouseDown={() => {
                         setTempValue(item.label);
-                        setIsOpen(false);
+                        setOpenDropdown(false);
                       }}
                     >
                       {item.label}

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

@@ -41,7 +41,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   ...rest
 }) => {
   const [tempValue, setTempValue] = useState<string[]>([]);
-  const [isOpen, setIsOpen] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState(false);
   const [position, setPosition] = useState<{
     top: number;
     left: number;
@@ -64,7 +64,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
         !dropdownRef.current.contains(e.target as Node) &&
         !triggerRef.current?.contains(e.target as Node)
       ) {
-        setIsOpen(false);
+        setOpenDropdown(false);
       }
     };
 
@@ -96,12 +96,12 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
       }
     }
 
-    if (isOpen) {
+    if (openDropdown) {
       document.getElementById("body")!.style.overflow = "hidden";
     } else {
       document.getElementById("body")!.style.overflow = "auto";
     }
-  }, [isOpen]);
+  }, [openDropdown]);
 
   useEffect(() => {
     if (value) {
@@ -135,7 +135,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
           disabled={rest.disabled}
           onClick={() => {
             onClick && onClick();
-            setIsOpen(true);
+            setOpenDropdown(true);
           }}
           {...rest}
         >
@@ -166,10 +166,10 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
             </div>
           )}
           <div className="text-xl text-slate-400 pointer-events-none">
-            <Icon icon={`gravity-ui:chevron-${isOpen ? "up" : "down"}`} />
+            <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
           </div>
         </button>
-        {isOpen &&
+        {openDropdown &&
           position &&
           createPortal(
             <div

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

@@ -1476,7 +1476,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
   const triggerRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [tempValue, setTempValue] = useState(["🇮🇩 ID", ""]);
-  const [isOpen, setIsOpen] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState(false);
   const [position, setPosition] = useState<{
     top: number;
     left: number;
@@ -1497,7 +1497,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
         !dropdownRef.current.contains(e.target as Node) &&
         !triggerRef.current?.contains(e.target as Node)
       ) {
-        setIsOpen(false);
+        setOpenDropdown(false);
       }
     };
 
@@ -1529,12 +1529,12 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
       }
     }
 
-    if (isOpen) {
+    if (openDropdown) {
       document.getElementById("body")!.style.overflow = "hidden";
     } else {
       document.getElementById("body")!.style.overflow = "auto";
     }
-  }, [isOpen]);
+  }, [openDropdown]);
 
   useEffect(() => {
     if (rest.value) {
@@ -1605,11 +1605,11 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
                 setTempValue((prev) => [e.target.value, prev[1]]);
               }}
               onClick={() => {
-                setIsOpen(true);
+                setOpenDropdown(true);
                 setTempValue((prev) => ["", prev[1]]);
               }}
             />
-            {isOpen &&
+            {openDropdown &&
               position &&
               createPortal(
                 <div
@@ -1650,7 +1650,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
                               `${item.emoji} ${item.code}`,
                               prev[1],
                             ]);
-                            setIsOpen(false);
+                            setOpenDropdown(false);
                           }}
                         >
                           {`${item.emoji} ${item.code}`}

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

@@ -26,7 +26,7 @@ export const Select: React.FC<SelectProps> = ({
   ...rest
 }) => {
   const [tempValue, setTempValue] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState(false);
   const [position, setPosition] = useState<{
     top: number;
     left: number;
@@ -49,7 +49,7 @@ export const Select: React.FC<SelectProps> = ({
         !dropdownRef.current.contains(e.target as Node) &&
         !triggerRef.current?.contains(e.target as Node)
       ) {
-        setIsOpen(false);
+        setOpenDropdown(false);
       }
     };
 
@@ -81,12 +81,12 @@ export const Select: React.FC<SelectProps> = ({
       }
     }
 
-    if (isOpen) {
+    if (openDropdown) {
       document.getElementById("body")!.style.overflow = "hidden";
     } else {
       document.getElementById("body")!.style.overflow = "auto";
     }
-  }, [isOpen]);
+  }, [openDropdown]);
 
   useEffect(() => {
     if (rest.value) {
@@ -121,7 +121,7 @@ export const Select: React.FC<SelectProps> = ({
       <div className="relative" ref={triggerRef}>
         <div
           className="relative flex items-center cursor-pointer"
-          onClick={() => setIsOpen(!isOpen)}
+          onClick={() => setOpenDropdown(!openDropdown)}
         >
           <input
             type="text"
@@ -129,13 +129,13 @@ export const Select: React.FC<SelectProps> = ({
             placeholder={placeholder}
             disabled={rest.disabled}
             value={tempValue}
-            onClick={() => setIsOpen(true)}
+            onClick={() => setOpenDropdown(true)}
           />
           <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">
-            <Icon icon={`gravity-ui:chevron-${isOpen ? "up" : "down"}`} />
+            <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
           </div>
         </div>
-        {isOpen &&
+        {openDropdown &&
           position &&
           createPortal(
             <div
@@ -164,7 +164,7 @@ export const Select: React.FC<SelectProps> = ({
                     }`}
                     onMouseDown={() => {
                       setTempValue(item.label);
-                      setIsOpen(false);
+                      setOpenDropdown(false);
                     }}
                   >
                     {item.label}