@axos-web-dev/shared-components 2.0.0-queryparams.1 → 2.0.0-queryparams.2

package/dist/Button/Button.js

@@ -13,6 +13,7 @@ import '../assets/Modal/Modal.css';import '../assets/VideoWrapper/VideoWrapper.c
 /* empty css                                                    */
 /* empty css                                                */
 import { getVariant } from "../utils/getVariant.js";
+import { isInternalSamePathHref, mergeHrefWithCurrentSearch, performSamePageQueryParamNavigation } from "../utils/samePageQueryParamsNavigation.js";
 import clsx from "clsx";
 import { useState, createElement } from "react";
 import "../AlertBanner/AlertBanner.css.js";
@@ -160,6 +161,17 @@ const Button = ({
         handleSamePageNavigation(e);
         return;
       }
+      const resolvedHref = resolveUrl(targetUrl);
+      if (e.currentTarget instanceof HTMLAnchorElement && !e.currentTarget.classList.contains("ext-link") && isInternalSamePathHref(resolvedHref)) {
+        e.preventDefault();
+        e.nativeEvent.stopImmediatePropagation();
+        const merged = mergeHrefWithCurrentSearch(
+          resolvedHref,
+          window.location.search
+        );
+        performSamePageQueryParamNavigation(merged);
+        return;
+      }
       const external_link = validateLink(targetUrl);
       if (external_link) {
         e.preventDefault();

package/dist/Chevron/index.js

@@ -18,6 +18,7 @@ import { Interstitial } from "../Interstitial/Interstitial.js";
 import { chevron, chevron_wrapper } from "./Chevron.css.js";
 /* empty css                                */
 import { useGlobalContext } from "../Modal/contextApi/store.js";
+import { isInternalSamePathHref, mergeHrefWithCurrentSearch, performSamePageQueryParamNavigation } from "../utils/samePageQueryParamsNavigation.js";
 import clsx from "clsx";
 import "../Button/Button.css.js";
 import "react-use";
@@ -172,6 +173,17 @@ const Chevron = ({
   };
   const onClick = !goBack ? (e) => {
     if (targetUrl) {
+      const resolvedHref = resolveUrl(targetUrl);
+      if (e.currentTarget instanceof HTMLAnchorElement && !e.currentTarget.classList.contains("ext-link") && isInternalSamePathHref(resolvedHref)) {
+        e.preventDefault();
+        e.nativeEvent.stopImmediatePropagation();
+        const merged = mergeHrefWithCurrentSearch(
+          resolvedHref,
+          window.location.search
+        );
+        performSamePageQueryParamNavigation(merged);
+        return;
+      }
       const external_link = validateLink(targetUrl);
       if (external_link) {
         e.nativeEvent.stopImmediatePropagation();

package/dist/Hyperlink/index.js

@@ -11,6 +11,7 @@ import '../assets/Modal/Modal.css';import '../assets/VideoWrapper/VideoWrapper.c
 /* empty css                                    */
 /* empty css                                                    */
 /* empty css                                                */
+import { isInternalSamePathHref, mergeHrefWithCurrentSearch, performSamePageQueryParamNavigation } from "../utils/samePageQueryParamsNavigation.js";
 import clsx from "clsx";
 import "react";
 import "../AlertBanner/AlertBanner.css.js";
@@ -142,6 +143,17 @@ const Hyperlink = ({
   const isTelOrMailto = targetUrl && (isPhoneLink(targetUrl) || isEmailLink(targetUrl));
   const onClick = (e) => {
     if (targetUrl) {
+      const resolvedHref = resolveUrl(targetUrl);
+      if (e.currentTarget instanceof HTMLAnchorElement && !e.currentTarget.classList.contains("ext-link") && isInternalSamePathHref(resolvedHref)) {
+        e.preventDefault();
+        e.nativeEvent.stopImmediatePropagation();
+        const merged = mergeHrefWithCurrentSearch(
+          resolvedHref,
+          window.location.search
+        );
+        performSamePageQueryParamNavigation(merged);
+        return;
+      }
       const external_link = validateLink(targetUrl);
       if (external_link) {
         e.nativeEvent.stopImmediatePropagation();

package/dist/main.js

@@ -209,6 +209,7 @@ import { Tab } from "./Tab/Tab.js";
 import { TabContainer } from "./Tab/TabContainer.js";
 import { findMoreAxosDomains, getMoreDomains, isAllowedUrl } from "./utils/allowedAxosDomains.js";
 import { appendQueryParams } from "./utils/appendQueryParams.js";
+import { isInternalSamePathHref, isSkippableAnchorHref, mergeHrefWithCurrentSearch, performSamePageQueryParamNavigation } from "./utils/samePageQueryParamsNavigation.js";
 import { createCachedEmailValidator } from "./utils/emailValidation.js";
 import { associatedEmail } from "./utils/EverestValidity.js";
 import { getVariant, getVariantWithRegex } from "./utils/getVariant.js";
@@ -676,7 +677,9 @@ export {
   isAbsoluteUrl,
   isAllowedUrl,
   isEmailLink,
+  isInternalSamePathHref,
   isPhoneLink,
+  isSkippableAnchorHref,
   isValidHoneyPot,
   is_bg_img,
   isolate_container,
@@ -702,6 +705,7 @@ export {
   mb_8,
   mb_form,
   media,
+  mergeHrefWithCurrentSearch,
   messageStyle,
   messagesContainerStyle,
   mh_330,
@@ -723,6 +727,7 @@ export {
   padding,
   padding_in_footer,
   paragraph,
+  performSamePageQueryParamNavigation,
   person,
   picker_arrow,
   picker_container,

package/dist/utils/appendQueryParams.js

@@ -1,72 +1,35 @@
+import { isSkippableAnchorHref, mergeHrefWithCurrentSearch, performSamePageQueryParamNavigation } from "./samePageQueryParamsNavigation.js";
+let samePageQueryClickListenerAttached = false;
 const appendQueryParams = () => {
-  const currentOrigin = window.location.origin;
-  const currentPathname = window.location.pathname;
-  const filterParams = (href, currentSearch) => {
-    try {
-      const search = currentSearch ?? window.location.search;
-      const searchParams = new URLSearchParams(search);
-      const base = window.location.origin + window.location.pathname + window.location.search;
-      const url = new URL(href, base);
-      const existingParams = new URLSearchParams(url.search);
-      const newParams = new URLSearchParams();
-      const addedKeys = /* @__PURE__ */ new Set();
-      for (const key of existingParams.keys()) {
-        addedKeys.add(decodeURIComponent(key));
-      }
-      for (const [key, value] of searchParams.entries()) {
-        const decodedKey = decodeURIComponent(key);
-        const decodedValue = decodeURIComponent(value);
-        const lowerKey = decodedKey.toLowerCase();
-        if (!addedKeys.has(lowerKey) && !decodedKey.includes("[]")) {
-          newParams.append(lowerKey, decodedValue);
-          addedKeys.add(lowerKey);
-        } else if (decodedKey.includes("[]")) {
-          const existingValues = existingParams.getAll(key).map(decodeURIComponent);
-          if (!existingValues.includes(decodedValue)) {
-            newParams.append(decodedKey, decodedValue);
-          }
-        }
-      }
-      const mergedParams = new URLSearchParams(existingParams);
-      newParams.forEach((value, key) => mergedParams.append(key, value));
-      return `${url.origin}${url.pathname}?${mergedParams.toString()}${url.hash}`;
-    } catch (e) {
-      console.error(e);
-      return href;
-    }
-  };
+  if (typeof window === "undefined") return;
   const handleSamePageClick = (e) => {
     const anchor = e.target?.closest?.("a[href]");
     if (!anchor || anchor.classList.contains("ext-link"))
       return;
     const href = anchor.getAttribute("href")?.trim();
-    if (!href || href.startsWith("tel:") || href.startsWith("mailto:") || href === "#" || href === "" || href.startsWith("#"))
-      return;
+    if (isSkippableAnchorHref(href)) return;
     const base = window.location.origin + window.location.pathname + window.location.search;
     const url = new URL(href, base);
-    if (url.origin !== currentOrigin || url.pathname !== currentPathname)
+    if (url.origin !== window.location.origin || url.pathname !== window.location.pathname)
       return;
     e.preventDefault();
     e.stopImmediatePropagation();
-    const merged = filterParams(href, window.location.search);
-    const mergedUrl = new URL(merged, window.location.origin);
-    const fullUrl = `${mergedUrl.pathname}${mergedUrl.search}${mergedUrl.hash}`;
-    window.history.replaceState({ ...window.history.state }, "", fullUrl);
-    window.dispatchEvent(
-      new PopStateEvent("popstate", { state: window.history.state })
-    );
-    if (mergedUrl.hash) {
-      const el = document.querySelector(mergedUrl.hash);
-      el?.scrollIntoView({ behavior: "smooth" });
-    }
+    const merged = mergeHrefWithCurrentSearch(href, window.location.search);
+    performSamePageQueryParamNavigation(merged);
   };
-  document.addEventListener("click", handleSamePageClick, true);
+  if (!samePageQueryClickListenerAttached) {
+    samePageQueryClickListenerAttached = true;
+    window.addEventListener("click", handleSamePageClick, true);
+  }
   if (window.location.search.length) {
     const searchParams = new URLSearchParams(window.location.search);
     document.querySelectorAll("a[href]:not(.ext-link)").forEach((anchor) => {
       const href = anchor.getAttribute("href")?.trim();
-      if (href && !href.startsWith("tel:") && !href.startsWith("mailto:") && href !== "#" && href !== "" && !href.startsWith("#")) {
-        anchor.href = filterParams(href, searchParams.toString());
+      if (!isSkippableAnchorHref(href)) {
+        anchor.href = mergeHrefWithCurrentSearch(
+          href,
+          searchParams.toString()
+        );
       }
     });
   }

package/dist/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './allowedAxosDomains';
 export * from './appendQueryParams';
+export * from './samePageQueryParamsNavigation';
 export * from './emailValidation';
 export * from './EverestValidity';
 export * from './getVariant';

package/dist/utils/index.js

@@ -1,6 +1,7 @@
 "use client";
 import { findMoreAxosDomains, getMoreDomains, isAllowedUrl } from "./allowedAxosDomains.js";
 import { appendQueryParams } from "./appendQueryParams.js";
+import { isInternalSamePathHref, isSkippableAnchorHref, mergeHrefWithCurrentSearch, performSamePageQueryParamNavigation } from "./samePageQueryParamsNavigation.js";
 import { createCachedEmailValidator } from "./emailValidation.js";
 import { associatedEmail } from "./EverestValidity.js";
 import { getVariant, getVariantWithRegex } from "./getVariant.js";
@@ -21,7 +22,11 @@ export {
   isAbsoluteUrl,
   isAllowedUrl,
   isEmailLink,
+  isInternalSamePathHref,
   isPhoneLink,
+  isSkippableAnchorHref,
+  mergeHrefWithCurrentSearch,
+  performSamePageQueryParamNavigation,
   shortUrl,
   useCachedEmailValidator,
   useCachedNMLSValidator,

package/dist/utils/samePageQueryParamsNavigation.d.ts

@@ -0,0 +1,4 @@
+export declare function mergeHrefWithCurrentSearch(href: string, currentSearch?: string): string;
+export declare function isSkippableAnchorHref(href: string | undefined | null): boolean;
+export declare function isInternalSamePathHref(href: string): boolean;
+export declare function performSamePageQueryParamNavigation(mergedHref: string): void;

package/dist/utils/samePageQueryParamsNavigation.js

@@ -0,0 +1,63 @@
+function mergeHrefWithCurrentSearch(href, currentSearch) {
+  try {
+    const search = currentSearch ?? window.location.search;
+    const searchParams = new URLSearchParams(search);
+    const base = window.location.origin + window.location.pathname + window.location.search;
+    const url = new URL(href.trim(), base);
+    const existingParams = new URLSearchParams(url.search);
+    const newParams = new URLSearchParams();
+    const addedKeys = /* @__PURE__ */ new Set();
+    for (const key of existingParams.keys()) {
+      addedKeys.add(decodeURIComponent(key));
+    }
+    for (const [key, value] of searchParams.entries()) {
+      const decodedKey = decodeURIComponent(key);
+      const decodedValue = decodeURIComponent(value);
+      const lowerKey = decodedKey.toLowerCase();
+      if (!addedKeys.has(lowerKey) && !decodedKey.includes("[]")) {
+        newParams.append(lowerKey, decodedValue);
+        addedKeys.add(lowerKey);
+      } else if (decodedKey.includes("[]")) {
+        const existingValues = existingParams.getAll(key).map(decodeURIComponent);
+        if (!existingValues.includes(decodedValue)) {
+          newParams.append(decodedKey, decodedValue);
+        }
+      }
+    }
+    const mergedParams = new URLSearchParams(existingParams);
+    newParams.forEach((value, key) => mergedParams.append(key, value));
+    return `${url.origin}${url.pathname}?${mergedParams.toString()}${url.hash}`;
+  } catch (e) {
+    console.error(e);
+    return href;
+  }
+}
+function isSkippableAnchorHref(href) {
+  if (!href) return true;
+  const h = href.trim();
+  return !h || h.startsWith("tel:") || h.startsWith("mailto:") || h === "#" || h === "" || h.startsWith("#");
+}
+function isInternalSamePathHref(href) {
+  if (isSkippableAnchorHref(href)) return false;
+  const base = window.location.origin + window.location.pathname + window.location.search;
+  const url = new URL(href.trim(), base);
+  return url.origin === window.location.origin && url.pathname === window.location.pathname;
+}
+function performSamePageQueryParamNavigation(mergedHref) {
+  const mergedUrl = new URL(mergedHref, window.location.origin);
+  const fullUrl = `${mergedUrl.pathname}${mergedUrl.search}${mergedUrl.hash}`;
+  window.history.replaceState({ ...window.history.state }, "", fullUrl);
+  window.dispatchEvent(
+    new PopStateEvent("popstate", { state: window.history.state })
+  );
+  if (mergedUrl.hash) {
+    const el = document.querySelector(mergedUrl.hash);
+    el?.scrollIntoView({ behavior: "smooth" });
+  }
+}
+export {
+  isInternalSamePathHref,
+  isSkippableAnchorHref,
+  mergeHrefWithCurrentSearch,
+  performSamePageQueryParamNavigation
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "2.0.0-queryparams.1",
+  "version": "2.0.0-queryparams.2",
   "type": "module",
   "main": "index.js",
   "module": "dist/main.js",