@razorpay/blade 10.5.0 → 10.7.0

package/build/components/index.d.ts

@@ -1936,7 +1936,7 @@ type IconProps$1 = {
   /**
    * Color token (not to be confused with actual hsla value)
    */
-  color:
+  color?:
     | ActionIconColors$1
     | SurfaceActionIconColors$1
     | FeedbackIconColors$1
@@ -1944,7 +1944,7 @@ type IconProps$1 = {
     | TextIconColors$1
     | BadgeIconColors$1
     | 'currentColor'; // currentColor is useful for letting the SVG inherit color property from its container
-  size: IconSize$1;
+  size?: IconSize$1;
 } & StyledPropsBlade$1;
 type IconComponent$1 = React.ComponentType<IconProps$1>;
 
@@ -5590,8 +5590,8 @@ declare type IconProps = {
     /**
      * Color token (not to be confused with actual hsla value)
      */
-    color: ActionIconColors | SurfaceActionIconColors | FeedbackIconColors | FeedbackActionIconColors | TextIconColors | BadgeIconColors | 'currentColor';
-    size: IconSize;
+    color?: ActionIconColors | SurfaceActionIconColors | FeedbackIconColors | FeedbackActionIconColors | TextIconColors | BadgeIconColors | 'currentColor';
+    size?: IconSize;
 } & StyledPropsBlade$1;
 declare type IconComponent = React.ComponentType<IconProps>;
 

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

@@ -6016,8 +6016,10 @@ var iconSize$1 = {
   '2xlarge': size[32]
 };
 function useIconProps(_ref) {
-  var size = _ref.size,
-    color = _ref.color;
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'surface.text.normal.lowContrast' : _ref$color;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var height = makeSize(iconSize$1[size]);
@@ -18777,6 +18779,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 +18790,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 +18950,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 +19047,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 +19267,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 +19297,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 +19309,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 +19320,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 +19424,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 +19434,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 +19459,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 +19474,7 @@ var CarouselItem = function CarouselItem(_ref2) {
     id: id,
     isMobile: isMobile,
     "data-slide-index": index,
+    isResponsive: isResponsive,
     visibleItems: visibleItems,
     maxWidth: carouselItemWidth,
     shouldAddStartEndSpacing: shouldAddStartEndSpacing,
@@ -29151,28 +29179,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; }
 /**