@razorpay/blade 10.5.0 → 10.6.0

package/build/components/index.native.js

@@ -2748,7 +2748,7 @@ var _excluded$u=["onClick","accessibilityLabel"];var PressableIndicatorButton=st
 
 var _excluded$t=["onClick","isActive","variant"];var IndicatorButton=function IndicatorButton(_ref){var onClick=_ref.onClick,isActive=_ref.isActive,variant=_ref.variant,props=_objectWithoutProperties(_ref,_excluded$t);return jsx(StyledIndicatorButton,Object.assign({},props,metaAttribute({name:'carousel-indicator-button'}),{isActive:isActive,variant:variant,onClick:onClick}));};
 
-var Indicators=function Indicators(props){var _useCarouselContext=useCarouselContext(),carouselId=_useCarouselContext.carouselId,visibleItems=_useCarouselContext.visibleItems;return jsx(BaseBox,Object.assign({display:"flex",flexDirection:"row",gap:"spacing.2"},makeAccessible({role:'tablist',label:'Slides'}),{children:new Array(props.totalItems).fill(0).map(function(_,idx){var isResponsive=visibleItems==='autofit';var _visibleItems=visibleItems;if(isResponsive){_visibleItems=1;}return jsx(IndicatorButton,Object.assign({},makeAccessible({role:'tab',label:`Slide ${idx*_visibleItems+1}`,selected:idx===props.activeIndex,controls:`${carouselId}-carousel-item-${idx*_visibleItems}`}),{slideIndex:idx*_visibleItems,isActive:idx===props.activeIndex,onClick:function onClick(){return props==null?void 0:props.onClick==null?void 0:props.onClick(idx);},variant:props.variant}),idx);})}));};
+var Indicators=function Indicators(props){var _useCarouselContext=useCarouselContext(),carouselId=_useCarouselContext.carouselId,isResponsive=_useCarouselContext.isResponsive,visibleItems=_useCarouselContext.visibleItems;return jsx(BaseBox,Object.assign({display:"flex",flexDirection:"row",gap:"spacing.2"},makeAccessible({role:'tablist',label:'Slides'}),{children:new Array(props.totalItems).fill(0).map(function(_,idx){var _visibleItems=visibleItems;if(isResponsive){_visibleItems=1;}return jsx(IndicatorButton,Object.assign({},makeAccessible({role:'tab',label:`Slide ${idx*_visibleItems+1}`,selected:idx===props.activeIndex,controls:`${carouselId}-carousel-item-${idx*_visibleItems}`}),{slideIndex:idx*_visibleItems,isActive:idx===props.activeIndex,onClick:function onClick(){return props==null?void 0:props.onClick==null?void 0:props.onClick(idx);},variant:props.variant}),idx);})}));};
 
 var getNavigationButtonStyles=function getNavigationButtonStyles(props){var theme=props.theme,_props$isPressed=props.isPressed,isPressed=_props$isPressed===void 0?false:_props$isPressed,_props$variant=props.variant,variant=_props$variant===void 0?'filled':_props$variant;var motionToken=theme.motion;var iconColor={filled:{default:theme.colors.action.icon.tertiary.default,hover:theme.colors.action.icon.tertiary.hover,focus:theme.colors.action.icon.tertiary.focus,active:theme.colors.action.icon.tertiary.active},stroked:{default:theme.colors.surface.action.icon.active.highContrast,hover:theme.colors.surface.action.icon.active.highContrast,focus:theme.colors.surface.action.icon.active.highContrast,active:theme.colors.surface.action.icon.active.highContrast}};var backgroundColor={filled:{default:theme.colors.action.background.tertiary.default,hover:theme.colors.action.background.tertiary.hover,focus:theme.colors.action.background.tertiary.focus,active:theme.colors.action.background.tertiary.active},stroked:{default:'transparent',hover:theme.colors.brand.gray.a50.highContrast,focus:theme.colors.brand.gray.a100.highContrast,active:theme.colors.brand.gray.a100.highContrast}};var borderColorToken=theme.colors.action.border.tertiary;var borderWidth=theme.border.width.thin;var borderRadius=theme.border.radius.max;var state=isPressed?'active':'default';return Object.assign({cursor:'pointer',background:'transparent',border:'none',borderStyle:'solid',borderWidth:borderWidth,borderRadius:borderRadius,borderColor:borderColorToken[state],backgroundColor:backgroundColor[variant][state],color:iconColor[variant][state],padding:makeSpace(theme.spacing[3]),display:'flex',alignItems:'center',justifyContent:'center',alignSelf:'center'},isReactNative$4()?{}:{transitionProperty:'color, box-shadow',transitionDuration:castWebType(makeMotionTime(motionToken.duration.xquick)),transitionTimingFunction:castWebType(motionToken.easing.standard.effective),boxShadow:variant==='filled'?castWebType(theme.elevation.midRaised):undefined,'&:hover':{color:iconColor[variant].hover,borderColor:borderColorToken.hover,backgroundColor:backgroundColor[variant].hover},'&:focus':{outline:'none',boxShadow:`0px 0px 0px 4px ${theme.colors.brand.primary[400]}`,color:iconColor[variant].focus,borderColor:borderColorToken.focus,backgroundColor:backgroundColor[variant].focus},'&:active':{color:iconColor[variant].active,borderColor:borderColorToken.active,backgroundColor:backgroundColor[variant].active}});};
 
@@ -2758,7 +2758,9 @@ var NavigationButton=function NavigationButton(_ref){var type=_ref.type,variant=
 
 var CAROUSEL_AUTOPLAY_INTERVAL=6000;
 
-var percentageStringToNumber=function percentageStringToNumber(percentage){if(!percentage.endsWith('%')){logger({message:'Only percentage values are allowed',type:'error',moduleName:'Carousel'});}return Number(percentage.substring(0,percentage.length-1))/100;};var Controls=function Controls(_ref){var showIndicators=_ref.showIndicators,activeIndicator=_ref.activeIndicator,totalSlides=_ref.totalSlides,onIndicatorButtonClick=_ref.onIndicatorButtonClick,onNextButtonClick=_ref.onNextButtonClick,onPreviousButtonClick=_ref.onPreviousButtonClick,indicatorVariant=_ref.indicatorVariant,navigationButtonVariant=_ref.navigationButtonVariant;return jsxs(BaseBox,{marginTop:"spacing.7",display:"flex",flexDirection:"row",alignItems:"center",gap:"spacing.4",children:[jsx(BaseBox,{children:jsx(NavigationButton,{type:"previous",variant:navigationButtonVariant,onClick:onPreviousButtonClick})}),showIndicators?jsx(Indicators,{onClick:onIndicatorButtonClick,activeIndex:activeIndicator,totalItems:totalSlides,variant:indicatorVariant}):null,jsx(BaseBox,{children:jsx(NavigationButton,{onClick:onNextButtonClick,type:"next",variant:navigationButtonVariant})})]});};var Carousel=function Carousel(_ref2){var autoPlay=_ref2.autoPlay,_ref2$showIndicators=_ref2.showIndicators,showIndicators=_ref2$showIndicators===void 0?true:_ref2$showIndicators,children=_ref2.children,_ref2$carouselItemWid=_ref2.carouselItemWidth,carouselItemWidth=_ref2$carouselItemWid===void 0?'100%':_ref2$carouselItemWid,accessibilityLabel=_ref2.accessibilityLabel,onChange=_ref2.onChange,_ref2$indicatorVarian=_ref2.indicatorVariant,indicatorVariant=_ref2$indicatorVarian===void 0?'gray':_ref2$indicatorVarian,_ref2$navigationButto=_ref2.navigationButtonVariant,navigationButtonVariant=_ref2$navigationButto===void 0?'filled':_ref2$navigationButto;var containerRef=React__default.useRef(null);var _React$useState=React__default.useState(0),_React$useState2=_slicedToArray(_React$useState,2),activeSlide=_React$useState2[0],setActiveSlide=_React$useState2[1];var _React$useState3=React__default.useState(0),_React$useState4=_slicedToArray(_React$useState3,2),scrollViewWidth=_React$useState4[0],setScrollViewWidth=_React$useState4[1];var _React$useState5=React__default.useState(false),_React$useState6=_slicedToArray(_React$useState5,2),shouldPauseAutoplay=_React$useState6[0],setShouldPauseAutoplay=_React$useState6[1];var id=useId();var _visibleItems=1;var slideWidth=scrollViewWidth*percentageStringToNumber(castNativeType(carouselItemWidth));var totalNumberOfSlides=React__default.Children.count(children);var goToSlideIndex=function goToSlideIndex(slideIndex){if(!containerRef.current)return;containerRef.current.scrollTo({x:slideIndex*slideWidth,y:0,animated:true});setActiveSlide(slideIndex);};var goToNextSlide=function goToNextSlide(){var slideIndex=activeSlide+1;if(slideIndex>=totalNumberOfSlides){slideIndex=0;}goToSlideIndex(slideIndex);};var goToPreviousSlide=function goToPreviousSlide(){var slideIndex=activeSlide-1;if(activeSlide<=0){slideIndex=totalNumberOfSlides-1;}goToSlideIndex(slideIndex);};var carouselContext=React__default.useMemo(function(){return {visibleItems:_visibleItems,carouselItemWidth:carouselItemWidth,carouselId:id,totalNumberOfSlides:totalNumberOfSlides,slideWidth:slideWidth,activeSlide:activeSlide,carouselContainerRef:containerRef,setActiveIndicator:setActiveSlide,carouselItemAlignment:undefined,shouldAddStartEndSpacing:false};},[carouselItemWidth,id,totalNumberOfSlides,slideWidth,activeSlide]);useInterval(function(){goToNextSlide();},{delay:CAROUSEL_AUTOPLAY_INTERVAL,enable:autoPlay&&!shouldPauseAutoplay});React__default.useEffect(function(){onChange==null?void 0:onChange(activeSlide);},[activeSlide,onChange]);React__default.useEffect(function(){announce(`Slide ${activeSlide+1} of ${totalNumberOfSlides}`);},[activeSlide,totalNumberOfSlides]);return jsx(CarouselContext.Provider,{value:carouselContext,children:jsxs(BaseBox,{display:"flex",alignItems:"center",flexDirection:"column",children:[jsx(BaseBox,{width:"100%",position:"relative",display:"flex",alignItems:"center",gap:"spacing.4",flexDirection:"row",children:jsx(ScrollView,Object.assign({onScrollBeginDrag:function onScrollBeginDrag(){setShouldPauseAutoplay(true);},onScrollEndDrag:function onScrollEndDrag(){setShouldPauseAutoplay(false);}},makeAccessible({label:accessibilityLabel}),{ref:containerRef,onLayout:function onLayout(e){setScrollViewWidth(e.nativeEvent.layout.width);},onMomentumScrollEnd:function onMomentumScrollEnd(e){var slideIndex=Math.round(e.nativeEvent.contentOffset.x/slideWidth);setActiveSlide(slideIndex);},horizontal:true,snapToAlignment:"start",decelerationRate:"fast",overScrollMode:"never",contentInsetAdjustmentBehavior:"never",automaticallyAdjustContentInsets:false,showsHorizontalScrollIndicator:false,showsVerticalScrollIndicator:false,snapToInterval:slideWidth,contentInset:{left:0,right:0},contentOffset:{x:0,y:0},contentContainerStyle:{paddingVertical:size[10]},children:React__default.Children.map(children,function(child,index){return React__default.cloneElement(child,{index:index,shouldHaveStartSpacing:index===0,shouldHaveEndSpacing:index===totalNumberOfSlides-1});})}))}),jsx(Controls,{totalSlides:totalNumberOfSlides,activeIndicator:activeSlide,showIndicators:showIndicators,onIndicatorButtonClick:goToSlideIndex,onNextButtonClick:goToNextSlide,onPreviousButtonClick:goToPreviousSlide,indicatorVariant:indicatorVariant,navigationButtonVariant:navigationButtonVariant})]})});};
+var useDidUpdate=function useDidUpdate(effectCallback,dependencies){var isMounted=useRef(false);useEffect(function(){if(isMounted.current){return effectCallback();}isMounted.current=true;return undefined;},dependencies);};
+
+var percentageStringToNumber=function percentageStringToNumber(percentage){if(!percentage.endsWith('%')){logger({message:'Only percentage values are allowed',type:'error',moduleName:'Carousel'});}return Number(percentage.substring(0,percentage.length-1))/100;};var Controls=function Controls(_ref){var showIndicators=_ref.showIndicators,activeIndicator=_ref.activeIndicator,totalSlides=_ref.totalSlides,onIndicatorButtonClick=_ref.onIndicatorButtonClick,onNextButtonClick=_ref.onNextButtonClick,onPreviousButtonClick=_ref.onPreviousButtonClick,indicatorVariant=_ref.indicatorVariant,navigationButtonVariant=_ref.navigationButtonVariant;return jsxs(BaseBox,{marginTop:"spacing.7",display:"flex",flexDirection:"row",alignItems:"center",gap:"spacing.4",children:[jsx(BaseBox,{children:jsx(NavigationButton,{type:"previous",variant:navigationButtonVariant,onClick:onPreviousButtonClick})}),showIndicators?jsx(Indicators,{onClick:onIndicatorButtonClick,activeIndex:activeIndicator,totalItems:totalSlides,variant:indicatorVariant}):null,jsx(BaseBox,{children:jsx(NavigationButton,{onClick:onNextButtonClick,type:"next",variant:navigationButtonVariant})})]});};var Carousel=function Carousel(_ref2){var autoPlay=_ref2.autoPlay,_ref2$showIndicators=_ref2.showIndicators,showIndicators=_ref2$showIndicators===void 0?true:_ref2$showIndicators,children=_ref2.children,_ref2$carouselItemWid=_ref2.carouselItemWidth,carouselItemWidth=_ref2$carouselItemWid===void 0?'100%':_ref2$carouselItemWid,accessibilityLabel=_ref2.accessibilityLabel,onChange=_ref2.onChange,_ref2$indicatorVarian=_ref2.indicatorVariant,indicatorVariant=_ref2$indicatorVarian===void 0?'gray':_ref2$indicatorVarian,_ref2$navigationButto=_ref2.navigationButtonVariant,navigationButtonVariant=_ref2$navigationButto===void 0?'filled':_ref2$navigationButto;var containerRef=React__default.useRef(null);var _React$useState=React__default.useState(0),_React$useState2=_slicedToArray(_React$useState,2),activeSlide=_React$useState2[0],setActiveSlide=_React$useState2[1];var _React$useState3=React__default.useState(0),_React$useState4=_slicedToArray(_React$useState3,2),scrollViewWidth=_React$useState4[0],setScrollViewWidth=_React$useState4[1];var _React$useState5=React__default.useState(false),_React$useState6=_slicedToArray(_React$useState5,2),shouldPauseAutoplay=_React$useState6[0],setShouldPauseAutoplay=_React$useState6[1];var id=useId();var _visibleItems=1;var slideWidth=scrollViewWidth*percentageStringToNumber(castNativeType(carouselItemWidth));var totalNumberOfSlides=React__default.Children.count(children);var goToSlideIndex=function goToSlideIndex(slideIndex){if(!containerRef.current)return;containerRef.current.scrollTo({x:slideIndex*slideWidth,y:0,animated:true});setActiveSlide(slideIndex);};var goToNextSlide=function goToNextSlide(){var slideIndex=activeSlide+1;if(slideIndex>=totalNumberOfSlides){slideIndex=0;}goToSlideIndex(slideIndex);};var goToPreviousSlide=function goToPreviousSlide(){var slideIndex=activeSlide-1;if(activeSlide<=0){slideIndex=totalNumberOfSlides-1;}goToSlideIndex(slideIndex);};var carouselContext=React__default.useMemo(function(){return {isResponsive:false,visibleItems:_visibleItems,carouselItemWidth:carouselItemWidth,carouselId:id,totalNumberOfSlides:totalNumberOfSlides,slideWidth:slideWidth,activeSlide:activeSlide,carouselContainerRef:containerRef,setActiveIndicator:setActiveSlide,carouselItemAlignment:undefined,shouldAddStartEndSpacing:false};},[carouselItemWidth,id,totalNumberOfSlides,slideWidth,activeSlide]);useInterval(function(){goToNextSlide();},{delay:CAROUSEL_AUTOPLAY_INTERVAL,enable:autoPlay&&!shouldPauseAutoplay});useDidUpdate(function(){onChange==null?void 0:onChange(activeSlide);},[activeSlide,onChange]);React__default.useEffect(function(){announce(`Slide ${activeSlide+1} of ${totalNumberOfSlides}`);},[activeSlide,totalNumberOfSlides]);return jsx(CarouselContext.Provider,{value:carouselContext,children:jsxs(BaseBox,{display:"flex",alignItems:"center",flexDirection:"column",children:[jsx(BaseBox,{width:"100%",position:"relative",display:"flex",alignItems:"center",gap:"spacing.4",flexDirection:"row",children:jsx(ScrollView,Object.assign({onScrollBeginDrag:function onScrollBeginDrag(){setShouldPauseAutoplay(true);},onScrollEndDrag:function onScrollEndDrag(){setShouldPauseAutoplay(false);}},makeAccessible({label:accessibilityLabel}),{ref:containerRef,onLayout:function onLayout(e){setScrollViewWidth(e.nativeEvent.layout.width);},onMomentumScrollEnd:function onMomentumScrollEnd(e){var slideIndex=Math.round(e.nativeEvent.contentOffset.x/slideWidth);setActiveSlide(slideIndex);},horizontal:true,snapToAlignment:"start",decelerationRate:"fast",overScrollMode:"never",contentInsetAdjustmentBehavior:"never",automaticallyAdjustContentInsets:false,showsHorizontalScrollIndicator:false,showsVerticalScrollIndicator:false,snapToInterval:slideWidth,contentInset:{left:0,right:0},contentOffset:{x:0,y:0},contentContainerStyle:{paddingVertical:size[10]},children:React__default.Children.map(children,function(child,index){return React__default.cloneElement(child,{index:index,shouldHaveStartSpacing:index===0,shouldHaveEndSpacing:index===totalNumberOfSlides-1});})}))}),jsx(Controls,{totalSlides:totalNumberOfSlides,activeIndicator:activeSlide,showIndicators:showIndicators,onIndicatorButtonClick:goToSlideIndex,onNextButtonClick:goToNextSlide,onPreviousButtonClick:goToPreviousSlide,indicatorVariant:indicatorVariant,navigationButtonVariant:navigationButtonVariant})]})});};
 
 var CarouselItem=function CarouselItem(_ref){var children=_ref.children;var _useCarouselContext=useCarouselContext(),slideWidth=_useCarouselContext.slideWidth;return jsx(BaseBox,{width:`${slideWidth}px`,margin:"spacing.0",paddingLeft:"spacing.4",paddingRight:"spacing.4",children:children});};