next-helios-fe 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "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 [open, setOpen] = useState(false);
+  const [isOpen, setIsOpen] = 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")
       ) {
-        setOpen(false);
+        setIsOpen(false);
       }
     });
   }, []);
@@ -29,19 +29,19 @@ export const Drawer: React.FC<DrawerProps> = ({
   return (
     <div
       className={`absolute top-0 right-0 h-full z-40 ${
-        !open && "pointer-events-none"
+        !isOpen && "pointer-events-none"
       }`}
     >
       <div
         className={`flex h-full duration-300 ${
-          open ? "translate-x-0" : "translate-x-96"
+          isOpen ? "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={() => {
-            setOpen((prev) => !prev);
+            setIsOpen((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={() => {
-                  setOpen(false);
+                  setIsOpen(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;
   };
-  open: boolean;
-  setOpen: (open: boolean) => void;
+  isOpen: boolean;
+  onClose: (isOpen: boolean) => void;
 }
 
 export const Modal: React.FC<ModalProps> = ({
@@ -29,14 +29,14 @@ export const Modal: React.FC<ModalProps> = ({
   title,
   options,
   action,
-  open,
-  setOpen,
+  isOpen,
+  onClose,
 }) => {
   useEffect(() => {
     if (!options?.disableClose) {
       document.addEventListener("keydown", (e) => {
         if (e.key === "Escape") {
-          setOpen(false);
+          onClose(false);
         }
       });
     }
@@ -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 ${
-          !open && "hidden"
+          !isOpen && "hidden"
         }`}
       >
         <div className="flex justify-center items-center w-full h-full">
@@ -73,7 +73,7 @@ export const Modal: React.FC<ModalProps> = ({
                     type="button"
                     className="flex justify-center items-center rounded-full px-1 py-1 text-slate-400 hover:bg-secondary-light"
                     onClick={() => {
-                      setOpen(false);
+                      onClose(false);
                     }}
                   >
                     <Icon icon="pajamas:close" className="text-2xl" />
@@ -98,7 +98,7 @@ export const Modal: React.FC<ModalProps> = ({
                       border: true,
                     }}
                     onClick={() => {
-                      setOpen(false);
+                      onClose(false);
                     }}
                   >
                     Close

package/src/components/dialog/index.tsx

@@ -11,16 +11,16 @@ interface DialogProps {
   options?: {
     timeout?: 3000 | 5000 | 7000 | 10000;
   };
-  open: boolean;
-  setOpen: (open: boolean) => void;
+  isOpen: boolean;
+  onClose: (isOpen: boolean) => void;
 }
 
 export const Dialog: React.FC<DialogProps> = ({
   children,
   action,
   options,
-  open,
-  setOpen,
+  isOpen,
+  onClose,
 }) => {
   const actionVariant =
     action.variant === "secondary"
@@ -46,16 +46,16 @@ export const Dialog: React.FC<DialogProps> = ({
   useEffect(() => {
     if (options?.timeout) {
       const timeout = setTimeout(() => {
-        setOpen(false);
+        onClose(false);
       }, options.timeout);
       return () => clearTimeout(timeout);
     }
-  }, [open]);
+  }, [isOpen]);
 
   return (
     <div
       className={`absolute top-0 left-0 w-dvw h-dvh z-40 ${
-        !open && "hidden"
+        !isOpen && "hidden"
       } ${options?.timeout ? "pointer-events-none" : "bg-black/30"}`}
     >
       <div className="flex justify-center mt-4">
@@ -70,7 +70,7 @@ export const Dialog: React.FC<DialogProps> = ({
             <button
               className="text-danger hover:text-danger-dark hover:underline"
               onClick={() => {
-                setOpen(false);
+                onClose(false);
               }}
             >
               Close