@axos-web-dev/shared-components 0.0.154 → 0.0.156

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/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
-export * from './EverestValidity';
 export * from './allowedAxosDomains';
+export * from './EverestValidity';
 export * from './getVariant';
 export * from './validateExternalLinks';
 export * from './variant.types';

package/dist/utils/index.js

@@ -1,5 +1,5 @@
-import { associatedEmail } from "./EverestValidity.js";
 import { findMoreAxosDomains, isAllowedUrl } from "./allowedAxosDomains.js";
+import { associatedEmail } from "./EverestValidity.js";
 import { getVariant, getVariantWithRegex } from "./getVariant.js";
 import { isAbsoluteUrl, isEmailLink, isPhoneLink, shortUrl, validateLink } from "./validateExternalLinks.js";
 export {

package/package.json

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