@razorpay/blade 10.5.0 → 10.6.0

package/build/components/index.development.web.js

@@ -18777,6 +18777,7 @@ function _objectSpread$13(target) { for (var i = 1; i < arguments.length; i++) {
 var Indicators = function Indicators(props) {
   var _useCarouselContext = useCarouselContext(),
     carouselId = _useCarouselContext.carouselId,
+    isResponsive = _useCarouselContext.isResponsive,
     visibleItems = _useCarouselContext.visibleItems;
   return /*#__PURE__*/jsx(BaseBox, _objectSpread$13(_objectSpread$13({
     display: "flex",
@@ -18787,7 +18788,6 @@ var Indicators = function Indicators(props) {
     label: 'Slides'
   })), {}, {
     children: new Array(props.totalItems).fill(0).map(function (_, idx) {
-      var isResponsive = visibleItems === 'autofit';
       var _visibleItems = visibleItems;
       if (isResponsive) {
         _visibleItems = 1;
@@ -18948,6 +18948,28 @@ var getCarouselItemId = function getCarouselItemId(containerId, index) {
 
 var CAROUSEL_AUTOPLAY_INTERVAL = 6000;
 
+/**
+ * Hook to run an effect on dependencies change after the component has *mounted*.
+ * Core difference from `useEffect` is this will trigger effects after the very first render.
+ *
+ * @param effectCallback `useEffect` callback
+ * @param dependencies `useEffect` dependencies
+ */
+var useDidUpdate = function useDidUpdate(effectCallback, dependencies) {
+  var isMounted = useRef(false);
+  useEffect(function () {
+    if (isMounted.current) {
+      // run normally after the very first render / mount
+      return effectCallback();
+    }
+    isMounted.current = true;
+    return undefined;
+
+    // we don't want to rerun every time effectCallback changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies);
+};
+
 function ownKeys$11(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$10(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$11(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$11(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Controls = function Controls(_ref) {
@@ -19023,7 +19045,6 @@ var CarouselContainer = /*#__PURE__*/styled(BaseBox).withConfig({
     flexWrap: 'nowrap',
     scrollSnapType: 'x mandatory',
     scrollSnapPointsY: "repeat(100%)",
-    scrollBehavior: 'smooth',
     msOverflowStyle: 'none' /* IE and Edge */,
     scrollbarWidth: 'none' /* Firefox */,
 
@@ -19244,6 +19265,8 @@ var Carousel = function Carousel(_ref4) {
 
   // Sync the indicators with scroll
   React__default.useEffect(function () {
+    // do not sync indicators on desktop, we are already in sync because we can only use the next/prev buttons
+    if (!isMobile) return;
     var carouselContainer = containerRef.current;
     if (!carouselContainer) return;
     var handleScroll = debounce_1(function () {
@@ -19272,7 +19295,7 @@ var Carousel = function Carousel(_ref4) {
     return function () {
       carouselContainer === null || carouselContainer === void 0 ? void 0 : carouselContainer.removeEventListener('scroll', handleScroll);
     };
-  }, [_visibleItems, isResponsive, shouldAddStartEndSpacing]);
+  }, [_visibleItems, isMobile, isResponsive, shouldAddStartEndSpacing]);
 
   // auto play
   useInterval(function () {
@@ -19284,7 +19307,8 @@ var Carousel = function Carousel(_ref4) {
   });
   var carouselContext = React__default.useMemo(function () {
     return {
-      visibleItems: visibleItems,
+      isResponsive: isResponsive,
+      visibleItems: _visibleItems,
       carouselItemWidth: carouselItemWidth,
       carouselContainerRef: containerRef,
       setActiveIndicator: setActiveIndicator,
@@ -19294,8 +19318,8 @@ var Carousel = function Carousel(_ref4) {
       startEndMargin: startEndMargin,
       shouldAddStartEndSpacing: shouldAddStartEndSpacing
     };
-  }, [id, startEndMargin, visibleItems, carouselItemWidth, totalNumberOfSlides, activeSlide, shouldAddStartEndSpacing]);
-  React__default.useEffect(function () {
+  }, [id, startEndMargin, isResponsive, _visibleItems, carouselItemWidth, totalNumberOfSlides, activeSlide, shouldAddStartEndSpacing]);
+  useDidUpdate(function () {
     onChange === null || onChange === void 0 ? void 0 : onChange(activeSlide);
   }, [activeSlide, onChange]);
   return /*#__PURE__*/jsx(CarouselContext.Provider, {
@@ -19398,6 +19422,7 @@ var StyledCarouselItem = /*#__PURE__*/styled(BaseBox).withConfig({
   componentId: "sc-56ppo3-0"
 })(function (_ref) {
   var visibleItems = _ref.visibleItems,
+    isResponsive = _ref.isResponsive,
     shouldAddStartEndSpacing = _ref.shouldAddStartEndSpacing,
     shouldHaveStartSpacing = _ref.shouldHaveStartSpacing,
     shouldHaveEndSpacing = _ref.shouldHaveEndSpacing,
@@ -19407,7 +19432,6 @@ var StyledCarouselItem = /*#__PURE__*/styled(BaseBox).withConfig({
     }),
     matchedDeviceType = _useBreakpoint.matchedDeviceType;
   var isMobile = matchedDeviceType === 'mobile';
-  var isResponsive = visibleItems === 'autofit';
   var gap = isMobile ? theme.spacing[4] : theme.spacing[5];
   var calculatedWidth = "calc(100% / ".concat(visibleItems, " - ").concat(gap, "px * (").concat(visibleItems, " - 1) / ").concat(visibleItems, ")");
   return _objectSpread$$({
@@ -19433,6 +19457,7 @@ var CarouselItem = function CarouselItem(_ref2) {
   var _useCarouselContext = useCarouselContext(),
     totalNumberOfSlides = _useCarouselContext.totalNumberOfSlides,
     visibleItems = _useCarouselContext.visibleItems,
+    isResponsive = _useCarouselContext.isResponsive,
     carouselItemWidth = _useCarouselContext.carouselItemWidth,
     shouldAddStartEndSpacing = _useCarouselContext.shouldAddStartEndSpacing;
   var _useTheme = useTheme(),
@@ -19447,6 +19472,7 @@ var CarouselItem = function CarouselItem(_ref2) {
     id: id,
     isMobile: isMobile,
     "data-slide-index": index,
+    isResponsive: isResponsive,
     visibleItems: visibleItems,
     maxWidth: carouselItemWidth,
     shouldAddStartEndSpacing: shouldAddStartEndSpacing,
@@ -29151,28 +29177,6 @@ var CollapsibleButton = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/forw
   componentId: MetaConstants.CollapsibleButton
 });
 
-/**
- * Hook to run an effect on dependencies change after the component has *mounted*.
- * Core difference from `useEffect` is this will trigger effects after the very first render.
- *
- * @param effectCallback `useEffect` callback
- * @param dependencies `useEffect` dependencies
- */
-var useDidUpdate = function useDidUpdate(effectCallback, dependencies) {
-  var isMounted = useRef(false);
-  useEffect(function () {
-    if (isMounted.current) {
-      // run normally after the very first render / mount
-      return effectCallback();
-    }
-    isMounted.current = true;
-    return undefined;
-
-    // we don't want to rerun every time effectCallback changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, dependencies);
-};
-
 function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**