@bigbinary/neeto-site-blocks 1.8.20 → 1.8.22

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,11 @@ 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;
+          scrollToCenter(element);
           element.classList.add("highlight-element");
           element.focus();
         }, 350);
@@ -14582,10 +14609,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 +14633,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 +14656,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 +14677,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 +14692,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);
@@ -43223,9 +43235,11 @@ var LogoClouds = function LogoClouds(_ref) {
     design: design.body,
     nestedClassName: baseClasses
   }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    disableButtonAndLinks: disableButtonAndLinks,
     isTitle: true,
     className: "col-span-12",
     component: "h3",
+    id: "logo-clouds-title",
     style: design.title
   }, title), logos.map(function (_ref2, index) {
     var src = _ref2.src,
@@ -43238,17 +43252,20 @@ var LogoClouds = function LogoClouds(_ref) {
       key: getUniqueKey(title, index)
     }, /*#__PURE__*/React__default.createElement(StyledImage$1, {
       alt: alt,
+      disableButtonAndLinks: disableButtonAndLinks,
+      index: index,
       src: src,
       title: title,
       className: "logo-image",
       design: design.logo,
+      id: "logo-clouds-".concat(index, "-image"),
       wrapperClassName: "max-w-56 max-h-28"
     }));
   }));
 };
 
 var _excluded$3 = ["configurations", "className", "id"],
-  _excluded2 = ["link", "index", "disableButtonAndLinks", "design"];
+  _excluded2 = ["feature", "index", "disableButtonAndLinks", "design"];
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Paragraph = function Paragraph(_ref) {
@@ -43299,18 +43316,19 @@ var Paragraph = function Paragraph(_ref) {
       "list-decimal": isOrdered,
       "list-disc": !isOrdered
     })
-  }, features.map(function (link, index) {
-    return /*#__PURE__*/React__default.createElement(ListItem, _extends$2({
-      index: index,
-      link: link,
+  }, features.map(function (feature, index) {
+    return /*#__PURE__*/React__default.createElement(ListItem, _extends$2({}, _objectSpread$1(_objectSpread$1({}, otherProps), {}, {
+      feature: feature,
+      index: index
+    }), {
       design: design.featureTitle,
       disableButtonAndLinks: otherProps.disableButtonAndLinks,
-      key: getUniqueKey(link.label, index)
-    }, otherProps));
+      key: getUniqueKey(feature.label, index)
+    }));
   })))));
 };
 var ListItem = function ListItem(_ref2) {
-  var link = _ref2.link,
+  var feature = _ref2.feature,
     index = _ref2.index,
     disableButtonAndLinks = _ref2.disableButtonAndLinks,
     design = _ref2.design,
@@ -43325,7 +43343,7 @@ var ListItem = function ListItem(_ref2) {
   }, _objectSpread$1(_objectSpread$1({
     disableButtonAndLinks: disableButtonAndLinks,
     index: index
-  }, link), otherProps))));
+  }, feature), otherProps))));
 };
 
 var _excluded$2 = ["configurations", "className", "id"];