@axos-web-dev/shared-components 0.0.184 → 0.0.186

package/dist/types/popover.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export type TPopoverPosition = "left" | "center" | "right";
+export type TPopoverProps = {
+    children?: ReactNode;
+    trigger: ReactNode | ReactNode[];
+    position?: TPopoverPosition;
+};

package/dist/types/popover.js

@@ -0,0 +1 @@
+

package/dist/utils/allowedAxosDomains.js

@@ -34,7 +34,8 @@ const moreDomains = {
   "{AXMWDJ}": process.env.AXOS_MY_WORK_DAY_JOBS ?? "https://axos.wd5.myworkdayjobs.com/Axos",
   "{AXMHA}": process.env.AXOS_MY_HOME_ADVANTAGE ?? "https://axos.myhomeadvantage.com",
   "{AXTPL}": process.env.AXOS_THIRD_PARTY_LENDING ?? "https://thirdpartylending.axosbank.com",
-  "{AXBHUBSVIDYARD}": process.env.AXBHUBSVIDYARD_URL || "https://www.axosbank.hubs.vidyard.com"
+  "{AXBHUBSVIDYARD}": process.env.AXBHUBSVIDYARD_URL || "https://www.axosbank.hubs.vidyard.com",
+  "{AUTOAX}": process.env.AUTO_AXOSBANK_URL || "https://auto.axosbank.com/"
 };
 const isAllowedUrl = (url) => {
   const uri = new URL(url, location.href);

package/dist/utils/constants/format.d.ts

@@ -0,0 +1 @@
+export declare const FORMAT_DATE = "MM.dd.yyyy";

package/dist/utils/constants/format.js

@@ -0,0 +1,4 @@
+const FORMAT_DATE = "MM.dd.yyyy";
+export {
+  FORMAT_DATE
+};

package/dist/utils/constants/popper.d.ts

@@ -0,0 +1,6 @@
+export declare const POPOVER_WIDTH = 512;
+export declare const POPOVER_POSITION_STYLES: {
+    left: string;
+    center: string;
+    right: string;
+};

package/dist/utils/constants/popper.js

@@ -0,0 +1,10 @@
+const POPOVER_WIDTH = 512;
+const POPOVER_POSITION_STYLES = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+export {
+  POPOVER_POSITION_STYLES,
+  POPOVER_WIDTH
+};

package/dist/utils/hooks/usePopover.d.ts

@@ -0,0 +1,25 @@
+import { TPopoverPosition } from '../../types/popover';
+import { CSSProperties, Dispatch, RefObject, SetStateAction } from 'react';
+
+type TUsePopoverResponse = {
+    attributes: {
+        [p: string]: {
+            [p: string]: string;
+        } | undefined;
+    };
+    onPopperElement: Dispatch<SetStateAction<HTMLDivElement | null | undefined>>;
+    onPopoverPosition: Dispatch<SetStateAction<TPopoverPosition>>;
+    onReferenceElement: Dispatch<SetStateAction<HTMLButtonElement | null | undefined>>;
+    popperElement?: HTMLDivElement | null | undefined;
+    popoverPosition: TPopoverPosition;
+    referenceElement?: HTMLButtonElement | null | undefined;
+    styles: {
+        [p: string]: CSSProperties;
+    };
+};
+type TProps = {
+    triggerRef: RefObject<HTMLDivElement>;
+};
+type TUsePopover = (props: TProps) => TUsePopoverResponse;
+export declare const usePopover: TUsePopover;
+export {};

package/dist/utils/hooks/usePopover.js

@@ -0,0 +1,64 @@
+"use client";
+import { useState, useEffect } from "react";
+import { usePopper } from "react-popper";
+import { POPOVER_WIDTH } from "../constants/popper.js";
+const usePopover = (props) => {
+  const { triggerRef } = props;
+  const position = "center";
+  const [popperElement, setPopperElement] = useState(null);
+  const [popoverPosition, setPopoverPosition] = useState(position);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [
+      {
+        name: "flip",
+        options: {
+          altBoundary: true
+        }
+      },
+      {
+        name: "offset",
+        options: {
+          offset: [0, 12]
+        }
+      },
+      {
+        name: "preventOverflow",
+        options: {
+          altBoundary: true,
+          padding: 12
+        }
+      }
+    ]
+  });
+  useEffect(() => {
+    if (triggerRef.current && !position) {
+      const { right, width } = triggerRef.current.getBoundingClientRect();
+      const bodyWidth = document.body.clientWidth;
+      const centerWidth = POPOVER_WIDTH / 2;
+      const triggerCenter = right - width / 2;
+      const rightSize = bodyWidth - triggerCenter;
+      const isRight = rightSize < centerWidth;
+      const isLeft = centerWidth > triggerCenter;
+      if (isRight) {
+        setPopoverPosition("right");
+      }
+      if (isLeft) {
+        setPopoverPosition("left");
+      }
+    }
+  }, []);
+  return {
+    attributes,
+    onPopperElement: setPopperElement,
+    onPopoverPosition: setPopoverPosition,
+    onReferenceElement: setReferenceElement,
+    popperElement,
+    popoverPosition,
+    referenceElement,
+    styles
+  };
+};
+export {
+  usePopover
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.184",
+  "version": "0.0.186",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",