@thecb/components 9.2.0-beta.9 → 9.2.0

package/dist/index.d.ts

@@ -298,6 +298,57 @@ declare namespace index_d {
   };
 }
 
+/* 
+  Hook that assigns a click event listener to the main document element
+  Returns a ref to attach to another element (like an icon/button that triggers a popover)
+  If a click event gets captured by the document and the assigned element isn't the target
+  hook will run whatever handler is passed (eg a function that closes a popover)
+
+  See popover component for implementation
+
+*/
+
+declare const useOutsideClickHook = handler => {
+  const ref = useRef();
+
+  useEffect(() => {
+    const handleOutsideClick = e => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        handler();
+      }
+
+      document.addEventListener("click", handleOutsideClick, true);
+
+      return () => {
+        document.removeEventListener("click", handleOutsideClick, true);
+      };
+    };
+  }, [ref]);
+
+  return ref;
+};
+
+/* 
+  Hook that takes an ID selector for an element on the screen
+  And optionally values for top position, left position, smooth behavior
+  Finds element on screen and scrolls it to the provided coordinates
+
+  (string, number, number, string, number) => undefined;
+*/
+
+declare const useScrollTo = (id, top = 0, left = 0, behavior = "auto", delay) => {
+  let scrollItem;
+  if (delay) {
+    setTimeout(() => {
+      scrollItem = document.getElementById(id);
+      scrollItem?.scrollTo({ top, left, behavior });
+    }, delay);
+  } else {
+    scrollItem = document.getElementById(id);
+    scrollItem?.scrollTo({ top, left, behavior });
+  }
+};
+
 interface Field {
   hasErrors: boolean;
   dirty: boolean;
@@ -359,36 +410,39 @@ interface ErrorMessageDictionary {
 
 enum ToastVariants {
   ERROR = "error",
-  SUCCESS = "success",
+  SUCCESS = "success"
 }
 
-interface UseToastProps {
+interface UseToastOptions {
   timeout?: number;
 }
 
 interface UseToastResult {
   isToastOpen: boolean;
-  toastVariant: "" | ToastVariants;
+  toastVariant: string | ToastVariants;
   toastMessage: string;
   showToast: ({
     message,
-    variant,
+    variant
   }: {
     message: string;
-    variant: ToastVariants;
+    variant: string | ToastVariants;
   }) => void;
   hideToast: () => void;
 }
 
 declare function useToastNotification(
-  props: UseToastProps
+  options?: UseToastOptions
 ): UseToastResult;
 
 
 
+declare const index_useScrollTo: typeof useScrollTo;
 declare const index_useToastNotification: typeof useToastNotification;
 declare namespace index {
   export {
+    useOutsideClickHook as useOutsideClick,
+    index_useScrollTo as useScrollTo,
     index_useToastNotification as useToastNotification,
   };
 }