@bigbinary/neeto-site-blocks 1.8.20 → 1.8.21

package/dist/index.js

@@ -14549,6 +14549,36 @@ var useElementClick = function useElementClick(_ref) {
     index = _ref$index === void 0 ? undefined : _ref$index,
     _ref$isTitle = _ref.isTitle,
     isTitle = _ref$isTitle === void 0 ? false : _ref$isTitle;
+  var getScrollableParent = function getScrollableParent(element) {
+    if (!element) return null;
+    var isScrollable = function isScrollable(el) {
+      var style = getComputedStyle(el);
+      return style.overflowY === "auto" || style.overflowY === "scroll";
+    };
+    var parent = element.parentElement;
+    while (parent) {
+      if (isScrollable(parent)) {
+        return parent;
+      }
+      parent = parent.parentElement;
+    }
+    return document.documentElement; // Fallback to document
+  };
+
+  var scrollToCenter = function scrollToCenter(element) {
+    var scrollableParent = getScrollableParent(element);
+    if (!scrollableParent) return;
+    var parentRect = scrollableParent.getBoundingClientRect();
+    var elementRect = element.getBoundingClientRect();
+    var elementCenterY = elementRect.top + elementRect.height / 2;
+    var parentCenterY = parentRect.top + parentRect.height / 2;
+    var scrollOptions = {
+      top: elementCenterY - parentCenterY + scrollableParent.scrollTop,
+      behavior: "smooth"
+    };
+    scrollableParent.scrollTo(scrollOptions);
+  };
+
   // This function is used as the click handler for "Link" and "Button" elements in the to highlight the element
   var handleClick = function handleClick(event) {
     event.preventDefault();
@@ -14561,14 +14591,14 @@ var useElementClick = function useElementClick(_ref) {
       // If the element is inside an accordion, open the accordion and scroll to the element
       if (isPresent(index)) {
         if (!accordion) return;
-        accordion.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest"
-        });
         accordion.classList.add("open-accordion__".concat(index));
         setTimeout(function () {
           element = document.querySelector("[data-element-id=".concat(id, "]"));
           if (!element) return;
+          element.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+          });
           element.classList.add("highlight-element");
           element.focus();
         }, 350);
@@ -14582,10 +14612,7 @@ var useElementClick = function useElementClick(_ref) {
         if (!(element && card)) return;
         var inputWrapper = card.querySelector(".neeto-ui-input");
         if (!inputWrapper) return;
-        card.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest"
-        });
+        scrollToCenter(card);
         card.classList.add("highlight-element");
         inputWrapper.classList.add("highlight-element");
         element.focus();
@@ -14609,15 +14636,12 @@ var useElementClick = function useElementClick(_ref) {
       // If the element is inside an accordion, open the accordion and scroll to the element
       if (isPresent(index)) {
         if (!accordion) return;
-        accordion.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest"
-        });
         accordion.classList.add("open-accordion__".concat(index));
         setTimeout(function () {
           var _element2;
           element = document.querySelector("[data-element-id=".concat(id, "]"));
           if (!element) return;
+          scrollToCenter(element);
           if (!isTitle) inputWrapper = element;
           card === null || card === void 0 ? void 0 : card.classList.add("highlight-element");
           (_element2 = element) === null || _element2 === void 0 ? void 0 : _element2.classList.add("highlight-element");
@@ -14635,10 +14659,7 @@ var useElementClick = function useElementClick(_ref) {
           inputWrapper = _element3;
         }
         if (!(_element3 && card && inputWrapper)) return;
-        card.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest"
-        });
+        scrollToCenter(inputWrapper);
         inputWrapper.classList.add("highlight-element");
         card.classList.add("highlight-element");
         _element3.focus();
@@ -14659,14 +14680,11 @@ var useElementClick = function useElementClick(_ref) {
       if (isPresent(index)) {
         var accordion = document.querySelector("[data-accordion-id=".concat(id === null || id === void 0 ? void 0 : id.replace(/-[^-]+$/, ""), "]"));
         if (!accordion) return;
-        accordion.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest"
-        });
         accordion.classList.add("open-accordion__".concat(index));
         setTimeout(function () {
           var imageWrapper = document.querySelector("[data-highlight-id=".concat(id, "]"));
           if (!imageWrapper) return;
+          scrollToCenter(imageWrapper);
           imageWrapper.classList.add("highlight-element");
         }, 350);
         setTimeout(function () {
@@ -14677,10 +14695,7 @@ var useElementClick = function useElementClick(_ref) {
       } else {
         var imageWrapper = document.querySelector("[data-highlight-id=".concat(id, "]"));
         if (!imageWrapper) return;
-        imageWrapper.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest"
-        });
+        scrollToCenter(imageWrapper);
         setTimeout(function () {
           imageWrapper.classList.add("highlight-element");
         }, 350);