@razorpay/blade 10.20.0 → 10.21.0

package/build/components/index.native.d.ts

@@ -4418,6 +4418,7 @@ declare type DropdownOverlayProps = {
      * @default 1001
      */
     zIndex?: number;
+    width?: BoxProps['width'];
 } & TestID;
 
 declare const Dropdown: ({ children, isOpen, onOpenChange, selectionType, onDismiss, testID, ...styledProps }: DropdownProps) => React__default.ReactElement;
@@ -7137,12 +7138,9 @@ declare const CollapsibleButton: React$1.ForwardRefExoticComponent<CollapsibleBu
 
 declare type CollapsibleBodyProps = {
     children: ReactNode;
-    /**
-     * **Internal**: used for React Native specific workarounds. Collapsible automatically takes care of width, you shouldn't need to configure this
-     */
-    _width?: BaseBoxProps['width'];
+    width?: BaseBoxProps['width'];
 } & TestID;
-declare const CollapsibleBody: ({ children, testID, _width }: CollapsibleBodyProps) => ReactElement;
+declare const CollapsibleBody: ({ children, testID, width }: CollapsibleBodyProps) => ReactElement;
 
 declare type TooltipProps = {
     /**

package/build/components/index.native.js

@@ -3252,9 +3252,9 @@ var _CollapsibleButton=function _CollapsibleButton(_ref,ref){var children=_ref.c
 
 var AnimatedStyledCollapsibleBodyContent=styled(Animated$1.View)(function(){return {overflow:'hidden'};});var CollapsibleBodyContent=function CollapsibleBodyContent(_ref){var children=_ref.children;var _useCollapsible=useCollapsible(),isExpanded=_useCollapsible.isExpanded,direction=_useCollapsible.direction;var _useTheme=useTheme(),theme=_useTheme.theme;var opacity=useSharedValue(getOpacity({isExpanded:isExpanded}));var height=useSharedValue(isExpanded?undefined:0);var _useState=useState(0),_useState2=_slicedToArray(_useState,2),layoutHeight=_useState2[0],setLayoutHeight=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isAnimating=_useState4[0],setIsAnimating=_useState4[1];var onAnimationComplete=useCallback(function(){requestAnimationFrame(function(){return setIsAnimating(false);});},[]);var duration=castNativeType(getTransitionDuration(theme));var easing=castNativeType(getTransitionEasing(theme));useEffect(function(){setIsAnimating(true);opacity.value=withTiming(getOpacity({isExpanded:isExpanded}),{duration:duration,easing:easing});height.value=withTiming(isExpanded&&layoutHeight?layoutHeight:0,{duration:duration,easing:easing},function(isComplete){if(isComplete){runOnJS(onAnimationComplete)();}});},[isExpanded,opacity,duration,easing,height,layoutHeight,onAnimationComplete]);var animatedStyles=useAnimatedStyle(function(){return {opacity:opacity.value,height:height.value};});var onLayout=useCallback(function(event){if(isAnimating){if(event.nativeEvent.layout.height>layoutHeight){setLayoutHeight(event.nativeEvent.layout.height);}}else if(event.nativeEvent.layout.height!==layoutHeight){setLayoutHeight(event.nativeEvent.layout.height);}},[layoutHeight,isAnimating]);return jsx(AnimatedStyledCollapsibleBodyContent,{isExpanded:isExpanded,style:animatedStyles,children:jsx(View,{onLayout:onLayout,style:isExpanded||isAnimating?nativeStyles.collapsibleBodyExpanded:nativeStyles.collapsibleBodyCollapsed,children:jsx(Box,Object.assign({},getCollapsibleBodyContentBoxProps({direction:direction}),{children:children}))})});};
 
-var _CollapsibleBody=function _CollapsibleBody(_ref){var children=_ref.children,testID=_ref.testID,_width=_ref._width;var _useCollapsible=useCollapsible(),collapsibleBodyId=_useCollapsible.collapsibleBodyId,isExpanded=_useCollapsible.isExpanded;return jsx(BaseBox,Object.assign({id:collapsibleBodyId,width:_width},makeAccessible({role:'region',hidden:!isExpanded}),metaAttribute({name:MetaConstants.CollapsibleBody,testID:testID}),{children:jsx(CollapsibleBodyContent,{children:children})}));};var CollapsibleBody=assignWithoutSideEffects(_CollapsibleBody,{componentId:MetaConstants.CollapsibleBody});
+var _CollapsibleBody=function _CollapsibleBody(_ref){var children=_ref.children,testID=_ref.testID,width=_ref.width;var _useCollapsible=useCollapsible(),collapsibleBodyId=_useCollapsible.collapsibleBodyId,isExpanded=_useCollapsible.isExpanded;return jsx(BaseBox,Object.assign({id:collapsibleBodyId,width:width},makeAccessible({role:'region',hidden:!isExpanded}),metaAttribute({name:MetaConstants.CollapsibleBody,testID:testID}),{children:jsx(CollapsibleBodyContent,{children:children})}));};var CollapsibleBody=assignWithoutSideEffects(_CollapsibleBody,{componentId:MetaConstants.CollapsibleBody});
 
-var BLANK_SPACE=' ';var reactNativeMultilineTextOverflowFix=jsx(BaseBox,Object.assign({},makeAccessible({hidden:true}),{children:jsx(Text,{children:BLANK_SPACE})}));var AccordionItem=function AccordionItem(_ref){var title=_ref.title,description=_ref.description,icon=_ref.icon,children=_ref.children,_index=_ref._index,testID=_ref.testID;var _useAccordion=useAccordion(),expandedIndex=_useAccordion.expandedIndex,onExpandChange=_useAccordion.onExpandChange,defaultExpandedIndex=_useAccordion.defaultExpandedIndex;var isExpanded=expandedIndex===_index;var isDefaultExpanded=defaultExpandedIndex===_index;var _description=description&&jsx(Text,{type:"subtle",children:description});var handleExpandChange=function handleExpandChange(_ref2){var isExpanded=_ref2.isExpanded;if(isExpanded&&typeof _index!=='undefined'){onExpandChange(_index);}else {onExpandChange(-1);}};var collapsibleBodyContent=isReactNative$4()?jsxs(BaseBox,{marginX:"spacing.5",children:[_description,jsx(BaseBox,{marginTop:description&&children?'spacing.5':'spacing.0',children:children}),reactNativeMultilineTextOverflowFix]}):jsxs(BaseBox,{display:"flex",flexDirection:"column",gap:"spacing.5",marginBottom:"spacing.5",marginX:"spacing.5",children:[_description,children]});return jsxs(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.AccordionItem,testID:testID}),{children:[jsxs(Collapsible,{isExpanded:isExpanded,defaultIsExpanded:isDefaultExpanded,onExpandChange:handleExpandChange,_shouldApplyWidthRestrictions:false,children:[jsx(AccordionButton,{index:_index,icon:icon,children:title}),jsx(CollapsibleBody,{_width:isReactNative$4()?'100%':undefined,children:collapsibleBodyContent})]}),jsx(Divider,{})]}));};
+var BLANK_SPACE=' ';var reactNativeMultilineTextOverflowFix=jsx(BaseBox,Object.assign({},makeAccessible({hidden:true}),{children:jsx(Text,{children:BLANK_SPACE})}));var AccordionItem=function AccordionItem(_ref){var title=_ref.title,description=_ref.description,icon=_ref.icon,children=_ref.children,_index=_ref._index,testID=_ref.testID;var _useAccordion=useAccordion(),expandedIndex=_useAccordion.expandedIndex,onExpandChange=_useAccordion.onExpandChange,defaultExpandedIndex=_useAccordion.defaultExpandedIndex;var isExpanded=expandedIndex===_index;var isDefaultExpanded=defaultExpandedIndex===_index;var _description=description&&jsx(Text,{type:"subtle",children:description});var handleExpandChange=function handleExpandChange(_ref2){var isExpanded=_ref2.isExpanded;if(isExpanded&&typeof _index!=='undefined'){onExpandChange(_index);}else {onExpandChange(-1);}};var collapsibleBodyContent=isReactNative$4()?jsxs(BaseBox,{marginX:"spacing.5",children:[_description,jsx(BaseBox,{marginTop:description&&children?'spacing.5':'spacing.0',children:children}),reactNativeMultilineTextOverflowFix]}):jsxs(BaseBox,{display:"flex",flexDirection:"column",gap:"spacing.5",marginBottom:"spacing.5",marginX:"spacing.5",children:[_description,children]});return jsxs(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.AccordionItem,testID:testID}),{children:[jsxs(Collapsible,{isExpanded:isExpanded,defaultIsExpanded:isDefaultExpanded,onExpandChange:handleExpandChange,_shouldApplyWidthRestrictions:false,children:[jsx(AccordionButton,{index:_index,icon:icon,children:title}),jsx(CollapsibleBody,{width:isReactNative$4()?'100%':undefined,children:collapsibleBodyContent})]}),jsx(Divider,{})]}));};
 
 var getTooltipContentWrapperStyles=function getTooltipContentWrapperStyles(_ref){var theme=_ref.theme,styles=_ref.styles;return Object.assign({backgroundColor:theme.colors.brand.gray[200].highContrast,borderWidth:makeBorderSize(theme.border.width.thin),borderRadius:makeBorderSize(theme.border.radius.medium),borderColor:theme.colors.brand.gray[300].highContrast,borderStyle:'solid',boxShadow:isReactNative$4()?undefined:castWebType(theme.elevation.lowRaised)},styles);};