@sikka/hawa 0.0.260 → 0.0.262

package/lib/layout/HawaAppLayoutSimplified.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+type HawaAppLayoutTypes = {
+    drawerItems: {
+        label: string;
+        icon: any;
+        slug: string;
+        action: () => void;
+        subItems?: any;
+    }[][];
+    direction?: "rtl" | "ltr";
+    currentPage: string;
+    pageTitle?: string;
+    logoSymbol?: any;
+    logoLink?: string;
+    logoText?: any;
+    children?: any;
+    topBar?: boolean;
+    username?: string;
+    email?: string;
+    drawerSize?: "sm" | "md" | "large";
+    profileMenuItems?: MenuItems[][];
+    onSettingsClick?: () => void;
+};
+type MenuItems = {
+    icon?: JSX.Element;
+    label: string;
+    action?: (e: any) => void;
+    isButton?: boolean;
+};
+export declare const HawaAppLayoutSimplified: React.FunctionComponent<HawaAppLayoutTypes>;
+export {};

package/lib/layout/index.d.ts

@@ -2,6 +2,7 @@ export * from "./Box";
 export * from "./HawaBottomAppBar";
 export * from "./HawaSiteLayout";
 export * from "./HawaAppLayout";
+export * from "./HawaAppLayoutSimplified";
 export * from "./HawaContainer";
 export * from "./AppSidebar";
 export * from "./Footer";

package/package.json

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

package/src/elements/BackToTop.tsx

@@ -1,4 +1,4 @@
-import React, { FC, RefObject, useState, useEffect } from "react"
+import React, { FC, RefObject, useState, useEffect, useRef } from "react"
 import { clsx } from "clsx"
 
 type ComponentTypes = {
@@ -11,6 +11,14 @@ type ComponentTypes = {
 
 export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
   const [visible, setVisible] = useState<boolean>(false)
+  const [rect, _setRect] = useState<DOMRect>(null)
+  const _rect = useRef(rect)
+  const setRect = (data) => {
+    _rect.current = data
+    _setRect(data)
+  }
+
+  const self = useRef(null)
 
   const getCoords = () => {
     let anchor = props.anchor.current
@@ -29,42 +37,59 @@ export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
     props.anchor.current.scrollTo(0, 0)
   }
 
+  // FIXME: Observers and listeners run twice
   useEffect(() => {
+    if (!props.anchor.current) return
+
     props.anchor.current.addEventListener("scroll", onScroll)
 
+    // Listens to rect changes. Alternatives like ResizeObserver & IntersectionObserver fail to detect positional changes consistently
+    let interval = setInterval(() => {
+      if (!props.anchor.current) return
+
+      let newRect = props.anchor.current.getBoundingClientRect()
+      if (_rect.current == null) return setRect(newRect)
+
+      if (
+        !(
+          _rect.current.top == newRect.top &&
+          _rect.current.left == newRect.left &&
+          _rect.current.width == newRect.width &&
+          _rect.current.height == newRect.height
+        )
+      ) {
+        setRect(newRect)
+      }
+    }, 1)
+
     return () => {
       props.anchor.current?.removeEventListener("scroll", onScroll)
+      clearInterval(interval)
     }
   }, [])
 
-  // // Reference to tailwind classes of corners
-  // const corners = {
-  //   "top-left": ["top-0 left-0", "ml", "mt"],
-  //   "top-right": ["top-0 right-0", "mr", "mt"],
-  //   "bottom-left": ["bottom-0 left-0", "ml", "mb"],
-  //   "bottom-right": ["bottom-0 right-0", "mr", "mb"],
-  // }
-
-  // const getClasses = () => {
-  //   let [corner, horizontal, vertical] = corners[props.corner || "bottom-right"]
-
-  //   return clsx(
-  //     `${horizontal}-[${props.paddingX || 100}px]`,
-  //     `${vertical}-[${props.paddingY || 0}px]`,
-  //     `${corner}`,
-  //     `${visible ? "block" : "hidden"}`
-  //   )
-  // }
-
-  // Had to use react styles because tailwind didn't update top & left
   const getStyles = () => {
+    if (!props.anchor.current) return {}
+
     let corner = props.corner || "bottom-right"
     let [vertical, horizontal] = corner.split("-")
 
-    let style = {}
-
-    style[vertical] = props.paddingY || 15
-    style[horizontal] = props.paddingX || 30
+    let anchorRect = props.anchor.current.getBoundingClientRect()
+    let selfRect = self.current.getBoundingClientRect()
+
+    let width = horizontal == "right" ? anchorRect.width - selfRect.width : 0
+    let height = vertical == "bottom" ? anchorRect.height - selfRect.height : 0
+
+    let style = {
+      top:
+        anchorRect.y +
+        height +
+        (vertical == "bottom" ? -1 : 1) * (props.paddingX || 10),
+      left:
+        anchorRect.x +
+        width +
+        (horizontal == "right" ? -1 : 1) * (props.paddingX || 25),
+    }
 
     return style
   }
@@ -72,11 +97,19 @@ export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
   return (
     <div
       className={clsx(
-        "fixed w-fit rounded bg-blue-300 p-2 text-black transition-all hover:bg-blue-500 ",
-        `${visible ? "inline-block" : "hidden"}`
+        "fixed w-fit rounded bg-blue-300 p-2 text-black transition-all hover:bg-blue-500",
+        `${
+          visible
+            ? "pointer-events-all opacity-100"
+            : "pointer-events-none opacity-0"
+        }`
       )}
-      style={getStyles()}
+      style={{
+        ...getStyles(),
+        transitionProperty: "opacity, background-color",
+      }}
       onClick={backToTop}
+      ref={self}
     >
       {/* Back to top arrow 👇*/}
       <svg

package/src/elements/HawaAlert.tsx

@@ -117,7 +117,11 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         role="alert"
         dir={direction}
       >
-        <span className="font-medium">{props.title}</span>
+        <span
+          className={clsx("font-medium", direction === "rtl" ? "ml-8" : "mr-8")}
+        >
+          {props.title}
+        </span>
         <span>{" " + props.text}</span>
 
         {props.actions && (
@@ -137,8 +141,9 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         <button
           type="button"
           className={clsx(
-            "absolute right-2 top-2 inline-flex h-9  w-9 items-center justify-center rounded p-1.5 text-gray-400 transition-all  hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
-            closeButtonStyle[props.severity]
+            "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
+            closeButtonStyle[props.severity],
+            direction === "rtl" ? "left-2" : "right-2"
           )}
           data-dismiss-target="#alert-default"
           aria-label="Close"

package/src/layout/HawaAppLayout.tsx

@@ -7,7 +7,6 @@ import useDiscloser from "../hooks/useDiscloser"
 import useBreakpoint from "../hooks/useBreakpoint"
 import { HawaButton, HawaMenu } from "../elements"
 
-// TODO: when no navbar, the drawer can't be opened
 // TODO: when no pagetitle, navbar gets messy
 
 type HawaAppLayoutTypes = {
@@ -229,6 +228,8 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
         {/* Drawer Content Container */}
         <div
           className={clsx(
+            "no-scrollbar",
+
             props.topBar ? "" : "mt-2",
             openSideMenu ? "overflow-auto" : "overflow-hidden"
           )}
@@ -395,9 +396,10 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
           {openSideMenu && (
             <div
               className={clsx(
-                "fixed bottom-0 left-0 right-0 flex flex-row items-center bg-layoutPrimary-500 p-4",
-                openSideMenu ? "bg-layoutPrimary-500" : "bg-transparent",
-                onSettingsClick ? "justify-between" : "justify-end"
+                "fixed bottom-0 flex flex-row items-center bg-layoutPrimary-500 p-4 transition-all",
+                openSideMenu ? "bg-layoutPrimary-500 " : "bg-red-500",
+                onSettingsClick ? "justify-between" : "justify-end",
+                direction === "rtl" ? "right-0" : "left-0"
               )}
               style={{
                 width: `${
@@ -454,6 +456,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                       <FaChevronRight
                         fontSize={14}
                         className={clsx(
+                          "transition-all",
                           isRTL
                             ? keepOpen
                               ? "rotate-0"