@sikka/hawa 0.0.106 → 0.0.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.106",
+  "version": "0.0.107",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -95,6 +95,7 @@
     "react-icons": "^4.6.0",
     "react-select": "^5.3.2",
     "rollup-plugin-swc": "^0.2.1",
-    "rollup-plugin-typescript2": "^0.34.1"
+    "rollup-plugin-typescript2": "^0.34.1",
+    "start": "^5.1.0"
   }
 }

package/src/elements/DragDropImages.tsx

@@ -15,7 +15,7 @@ type DragDropImagesTypes = {
   setFiles: any
   setDeletedFiles: any
   maxFiles: number
-  accept: any
+  accept: string
   onAcceptedFiles: any
   showPreview: any
   onDeleteFile: any
@@ -157,9 +157,9 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       <div
         // variant="drop-area"
         {...getRootProps({
-          //fix type error
-          // style: { backgroundColor: isDragActive && "white" },
+          style: {backgroundColor : isDragActive ?  "white" : "inherit" }
         })}
+        // style={{ backgroundColor: isDragActive ? "white" : "inherit" }}
         className="flex flex-col justify-center rounded-xl border border-dashed border-black"
       >
         <input {...getInputProps()} />

package/src/elements/HawaItemCard.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx"
 import React, { useEffect } from "react"
 import { useState } from "react"
+import useDiscloser from "../hooks/useDiscloser"
 import { HawaMenu } from "./HawaMenu"
 
 interface ItemCardTypes {
@@ -48,6 +49,8 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
     "inline-block rounded-lg p-1 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
 
   const [openActionHeader, setOpenActionHeader] = useState(false)
+  const {isOpen : isActionOpen, onClose : onActionClose, onOpen : onActionOpen} = useDiscloser();
+  const {isOpen : isDropDownOpen, onClose : onDropDownClose, onOpen : onDropDownOpen} = useDiscloser();
   const [openDropDown, setOpenDropDown] = useState(false)
 
   function handleOpenActionHeader() {
@@ -84,8 +87,9 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
             <HawaMenu
               buttonPosition="top-right"
               menuItems={headerActions}
-              handleClose={setOpenDropDown}
-              open={openDropDown}
+              handleOpen={onDropDownOpen}
+              handleClose={onDropDownClose}
+              open={isDropDownOpen}
             >
               <div
                 className={clsx(headerActionsButtonStyle)}

package/src/elements/HawaMenu.tsx

@@ -8,7 +8,8 @@ interface TMenuTypes {
   headerTitle?: string
   headerSubtitle?: string
   open?: boolean
-  handleClose?: (e: boolean) => void
+  handleClose?: () => void
+  handleOpen: () => void
   anchor?: any
   children?: ReactNode
   buttonPosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left"
@@ -32,6 +33,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
   headerSubtitle,
   open,
   handleClose,
+  handleOpen,
   buttonPosition,
   children,
 }) => {
@@ -48,7 +50,13 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
     closed: "h-0 ",
   }
   return (
-    <div className="relative w-fit " onClick={() => handleClose(!open)}>
+    <div
+      className="relative w-fit "
+      onClick={() => {
+        if (open) handleClose()
+        else handleOpen()
+      }}
+    >
       {children}
 
       <div

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useDiscloser"

package/src/hooks/useDiscloser.ts

@@ -0,0 +1,25 @@
+import { useState } from "react"
+
+
+type TUseDiscloser = {
+    isOpen : boolean,
+    onOpen : () => void,
+    onClose : () => void
+}
+
+const useDiscloser = (value: boolean = false) : TUseDiscloser => {
+  const [open, setOpen] = useState<boolean>(value)
+
+  const onOpen = () => setOpen(true)
+
+  const onClose = () => setOpen(false)
+
+  return {
+    isOpen: open,
+    onOpen: onOpen,
+    onClose: onClose,
+  }
+}
+
+
+export default useDiscloser;

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./elements"
 export * from "./layout"
-export * from "./blocks"
+export * from "./blocks"
+export * from "./hooks"