@sikka/hawa 0.0.199 → 0.0.200

package/lib/layout/HawaAppLayout.d.ts

@@ -23,7 +23,7 @@ type HawaAppLayoutTypes = {
 type MenuItems = {
     icon?: JSX.Element;
     label: string;
-    action?: (e: React.MouseEvent<HTMLLIElement, MouseEvent>, item: string) => void;
+    action?: (e: any) => void;
     isButton?: boolean;
 };
 export declare const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.199",
+  "version": "0.0.200",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/HawaItemCard.tsx

@@ -18,10 +18,7 @@ interface ItemCardTypes {
 type THeaderActions = {
   icon?: JSX.Element
   label: string
-  action?: (
-    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
-    item: string
-  ) => void
+  action?: (e: any) => void
   isButton?: boolean
 }
 export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({

package/src/elements/HawaMenu.tsx

@@ -20,16 +20,15 @@ interface TMenuTypes {
     | "bottom-right"
     | "bottom-left"
   onClickOutside?: any
+  actionedItem?: any
   size?: "small" | "normal" | "large"
 }
 
 type MenuItems = {
   icon?: JSX.Element
   label: string
-  action?: (
-    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
-    item: string
-  ) => void
+  // action?: (item: any) => void
+  action?: (e: any) => void
   isButton?: boolean
   element?: any
 }
@@ -43,6 +42,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
   size = "normal",
   children,
   onClickOutside,
+  actionedItem,
   position = "top-right",
 }) => {
   const [menuOpened, setMenuOpened] = useState(false)
@@ -196,7 +196,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                   </li>
                 ) : (
                   <li
-                    onClick={(e) => item.action(e, item.label)}
+                    onClick={() => item?.action(actionedItem)}
                     className={clsx(
                       item.isButton
                         ? "flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 py-2 px-4 text-white hover:bg-buttonPrimary-700 rtl:flex-row-reverse dark:hover:bg-buttonPrimary-700 dark:hover:text-white"
@@ -205,7 +205,13 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                     )}
                   >
                     {item.icon && (
-                      <div className="mr-2 rtl:ml-2">{item.icon}</div>
+                      <div
+                        className={
+                          size === "small" ? "mr-1 rtl:ml-1" : "mr-2 rtl:ml-2"
+                        }
+                      >
+                        {item.icon}
+                      </div>
                     )}
                     {item.label}
                   </li>

package/src/elements/HawaTable.tsx

@@ -2,8 +2,9 @@ import React from "react"
 import { BsThreeDotsVertical } from "react-icons/bs"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
-// TODO: make action click return row
+
 // TODO: make action column width max fit
+
 type TableTypes = {
   columns: any[string]
   actions?: ActionItems[][]
@@ -18,15 +19,13 @@ type TableTypes = {
   clickable?: boolean
   actionsText?: string
   bordersWidth?: string
+  onActionClicked?: any
   borders?: "all" | "cols" | "rows" | "outer" | "inner"
 }
 type ActionItems = {
   icon?: JSX.Element
   label: string
-  action?: (
-    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
-    item: string
-  ) => void
+  action?: (e: any) => void
   isButton?: boolean
   element?: any
 }
@@ -157,6 +156,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                       <div className="flex items-center justify-center">
                         <HawaMenu
                           size="small"
+                          actionedItem={[rowIndex, singleRow]}
                           menuItems={props.actions}
                           position={
                             direction === "rtl" ? "right-bottom" : "left-bottom"
@@ -192,28 +192,3 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
     </div>
   )
 }
-
-// const TableActionButton = (props) => {
-//   let smallAct = props.action?.toLowerCase()
-//   return (
-//     <HawaButton
-//       tooltipSize="small"
-//       buttonID={props.action + props.row}
-//       tooltipPosition="top-right"
-//       size="xs"
-//       variant="contained"
-//       tooltip={props.action}
-//       onClick={() => props.handleActionClick(smallAct)}
-//     >
-//       {smallAct === "delete" ? (
-//         <FaTrash />
-//       ) : smallAct === "view" ? (
-//         <FaExclamationCircle />
-//       ) : smallAct === "edit" ? (
-//         <FaPen />
-//       ) : (
-//         props.action
-//       )}
-//     </HawaButton>
-//   )
-// }

package/src/elements/InvoiceAccordion.tsx

@@ -26,8 +26,7 @@ type InvoiceAccordionTypes = {
     icon?: JSX.Element
     label: string
     action?: (
-      e: React.MouseEvent<HTMLLIElement, MouseEvent>,
-      item: string
+      e: any
     ) => void
     isButton?: boolean
     element?: any

package/src/layout/HawaAppLayout.tsx

@@ -33,10 +33,7 @@ type HawaAppLayoutTypes = {
 type MenuItems = {
   icon?: JSX.Element
   label: string
-  action?: (
-    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
-    item: string
-  ) => void
+  action?: (e: any) => void
   isButton?: boolean
 }
 export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({

package/src/styles.css

@@ -715,6 +715,9 @@ video {
 .mt-1 {
   margin-top: 0.25rem;
 }
+.mr-1 {
+  margin-right: 0.25rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -772,9 +775,6 @@ video {
 .mr-1\.5 {
   margin-right: 0.375rem;
 }
-.mr-1 {
-  margin-right: 0.25rem;
-}
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -2136,6 +2136,10 @@ body {
   --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
 }
 
+[dir="rtl"] .rtl\:ml-1 {
+  margin-left: 0.25rem;
+}
+
 [dir="rtl"] .rtl\:ml-2 {
   margin-left: 0.5rem;
 }