@bigbinary/neeto-site-blocks 1.16.9 → 1.16.11

package/dist/index.js

@@ -7,7 +7,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { has, __, isEmpty, mergeRight, pickBy, identity, mergeAll, prop, dissoc, equals, mergeLeft, omit } from 'ramda';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useState, useEffect, useSyncExternalStore, createElement as createElement$1, forwardRef, useRef, useLayoutEffect, createContext, Fragment } from 'react';
-import { isNotPresent, isPresent, isNotEmpty } from '@bigbinary/neeto-cist';
+import { isNotPresent, isPresent, isNotEmpty, existsBy } from '@bigbinary/neeto-cist';
 import Frame, { useFrame } from 'react-frame-component';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -5527,7 +5527,7 @@ var StyledWrapper = styled.div.attrs(function (props) {
     className: generateResponsiveStyles(props.design)
   };
 })(function (_ref) {
-  var _design$border, _design$borderTop, _design$borderTop2, _design$borderTop3, _design$borderBottom, _design$borderBottom2, _design$borderBottom3, _design$borderRight, _design$borderLeft, _design$border2;
+  var _design$border, _design$borderTop, _design$borderTop2, _design$border2, _design$borderTop3, _design$borderBottom, _design$borderBottom2, _design$borderBottom3, _design$borderRight, _design$borderLeft, _design$border3;
   var _ref$design = _ref.design,
     design = _ref$design === void 0 ? {} : _ref$design,
     _ref$backgroundImage = _ref.backgroundImage,
@@ -5536,13 +5536,14 @@ var StyledWrapper = styled.div.attrs(function (props) {
     borderColor: (_design$border = design.border) === null || _design$border === void 0 ? void 0 : _design$border.borderColor,
     borderTopColor: (_design$borderTop = design.borderTop) === null || _design$borderTop === void 0 ? void 0 : _design$borderTop.borderColor,
     borderTopWidth: (_design$borderTop2 = design.borderTop) === null || _design$borderTop2 === void 0 ? void 0 : _design$borderTop2.borderWidth,
+    borderStyle: (_design$border2 = design.border) === null || _design$border2 === void 0 ? void 0 : _design$border2.borderStyle,
     borderTopStyle: (_design$borderTop3 = design.borderTop) === null || _design$borderTop3 === void 0 ? void 0 : _design$borderTop3.borderStyle,
     borderBottomStyle: (_design$borderBottom = design.borderBottom) === null || _design$borderBottom === void 0 ? void 0 : _design$borderBottom.borderStyle,
     borderBottomWidth: (_design$borderBottom2 = design.borderBottom) === null || _design$borderBottom2 === void 0 ? void 0 : _design$borderBottom2.borderWidth,
     borderBottomColor: (_design$borderBottom3 = design.borderBottom) === null || _design$borderBottom3 === void 0 ? void 0 : _design$borderBottom3.borderColor,
     borderRightColor: (_design$borderRight = design.borderRight) === null || _design$borderRight === void 0 ? void 0 : _design$borderRight.borderColor,
     borderLeftColor: (_design$borderLeft = design.borderLeft) === null || _design$borderLeft === void 0 ? void 0 : _design$borderLeft.borderColor,
-    borderWidth: (_design$border2 = design.border) === null || _design$border2 === void 0 ? void 0 : _design$border2.borderWidth
+    borderWidth: (_design$border3 = design.border) === null || _design$border3 === void 0 ? void 0 : _design$border3.borderWidth
   };
   var borderColorStyles = pickBy(identity, borderColors);
   var backgroundStyles = _objectSpread$G({
@@ -13042,6 +13043,7 @@ var CardsInGridView = function CardsInGridView(_ref) {
         isStart: true,
         Icon: ArrowLeft$1,
         className: "flex-shrink-0",
+        design: design.navigationButtons,
         isActive: activeIndex > 0,
         onClick: function onClick() {
           var _swiperRef$current;
@@ -13081,6 +13083,7 @@ var CardsInGridView = function CardsInGridView(_ref) {
       }), isNavigationButtonEnabled && /*#__PURE__*/jsx(ArrowButton, {
         Icon: ArrowRight$1,
         className: "flex-shrink-0",
+        design: design.navigationButtons,
         isActive: activeIndex < cards.length - 2,
         onClick: function onClick() {
           var _swiperRef$current2;
@@ -14546,13 +14549,14 @@ var _excluded$e = ["configurations", "className", "id", "image"];
 function ownKeys$e(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$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FeatureWithProgressBar = function FeatureWithProgressBar(_ref) {
+  var _features, _features2, _features3, _features4, _features5;
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
     image = _ref.image,
     otherProps = _objectWithoutProperties(_ref, _excluded$e);
-  var _useState = useState(configurations.properties.features[0].id),
+  var _useState = useState(configurations.properties.features[0].position),
     _useState2 = _slicedToArray(_useState, 2),
     selectedTabId = _useState2[0],
     setSelectedTabId = _useState2[1];
@@ -14600,6 +14604,15 @@ var FeatureWithProgressBar = function FeatureWithProgressBar(_ref) {
       return clearInterval(id);
     };
   }, [selectedTabId]);
+  useEffect(function () {
+    var tabExists = existsBy({
+      position: selectedTabId
+    }, features);
+    if (!tabExists && isNotEmpty(features)) {
+      clearInterval(intervalId);
+      setSelectedTabId(features[0].position);
+    }
+  }, [features.length]);
   var imageBaseClasses = classnames("col-span-12 flex justify-center", {
     "lg:col-start-7": contentPosition === POSITIONS.LEFT.label,
     "lg:col-span-6": contentPosition === POSITIONS.RIGHT.label
@@ -14633,13 +14646,13 @@ var FeatureWithProgressBar = function FeatureWithProgressBar(_ref) {
         children: description
       })), features.map(function (_ref2, index) {
         var featureTitle = _ref2.title,
-          id = _ref2.id;
+          position = _ref2.position;
         return /*#__PURE__*/createElement$1(MotionWrapper, {
           enableAnimation: enableAnimation,
           className: "relative cursor-pointer",
           key: getUniqueKey(featureTitle, index),
           onClick: function onClick() {
-            return handleTabClick(id);
+            return handleTabClick(position);
           }
         }, /*#__PURE__*/jsx(Typography$1, _objectSpread$e(_objectSpread$e({
           index: index,
@@ -14655,7 +14668,7 @@ var FeatureWithProgressBar = function FeatureWithProgressBar(_ref) {
             backgroundColor: "#E6E6E6",
             height: "1px"
           },
-          children: selectedTabId === id && /*#__PURE__*/jsx(StyledWrapper, {
+          children: selectedTabId === position && /*#__PURE__*/jsx(StyledWrapper, {
             className: "h-full rounded-xl transition-all duration-300 ease-in-out",
             design: {
               width: "0%",
@@ -14669,16 +14682,16 @@ var FeatureWithProgressBar = function FeatureWithProgressBar(_ref) {
       className: imageBaseClasses,
       children: /*#__PURE__*/jsx(Media, {
         image: image,
-        alt: features[selectedTabId - 1].media.alt,
-        autoPlay: features[selectedTabId - 1].media.autoPlay,
+        alt: (_features = features[selectedTabId - 1]) === null || _features === void 0 ? void 0 : _features.media.alt,
+        autoPlay: (_features2 = features[selectedTabId - 1]) === null || _features2 === void 0 ? void 0 : _features2.media.autoPlay,
         design: design.media,
         disableButtonAndLinks: otherProps.disableButtonAndLinks,
         id: "feature-with-progress-bar-".concat(selectedTabId - 1, "-media"),
         index: selectedTabId - 1,
         isAddNewPane: otherProps.isAddNewPane,
-        isEmbedded: features[selectedTabId - 1].media.isEmbedded,
-        src: features[selectedTabId - 1].media.src,
-        videoUrl: features[selectedTabId - 1].media.videoUrl,
+        isEmbedded: (_features3 = features[selectedTabId - 1]) === null || _features3 === void 0 ? void 0 : _features3.media.isEmbedded,
+        src: (_features4 = features[selectedTabId - 1]) === null || _features4 === void 0 ? void 0 : _features4.media.src,
+        videoUrl: (_features5 = features[selectedTabId - 1]) === null || _features5 === void 0 ? void 0 : _features5.media.videoUrl,
         wrapperClassName: "h-full w-full"
       })
     })]