@razorpay/blade 7.2.0 → 7.2.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @razorpay/blade
 
+## 7.2.2
+
+### Patch Changes
+
+- 2a6b8c89: chore: add meta attribute `data-component-from-blade='true'` to native components
+
+## 7.2.1
+
+### Patch Changes
+
+- 40a16da7: fix(blade): BottomSheet body dynamic height
+- e0f80522: feat(blade): added bottomsheet component ids
+
 ## 7.2.0
 
 ### Minor Changes

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

@@ -3795,7 +3795,7 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
      */
     type?: Type;
 } & StyledPropsBlade;
-declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "value" | "onBlur" | "onFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
+declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "value" | "onBlur" | "onFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -3881,7 +3881,7 @@ declare type PasswordInputExtraProps = {
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'password' | 'newPassword'>;
 };
 declare type PasswordInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID'> & PasswordInputExtraProps & StyledPropsBlade;
-declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "value" | "onBlur" | "onFocus" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<Omit<MakeObjectResponsive<{
+declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "value" | "onBlur" | "onFocus" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<Omit<MakeObjectResponsive<{
     margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
     marginX: SpacingValueType;
     marginY: SpacingValueType;
@@ -3915,7 +3915,7 @@ declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'n
      */
     onClearButtonClick?: () => void;
 } & StyledPropsBlade;
-declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "value" | "onBlur" | "onFocus" | "numberOfLines" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "validationState" | "isRequired" | "maxCharacters"> & {
+declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "value" | "onBlur" | "onFocus" | "numberOfLines" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "validationState" | "isRequired" | "maxCharacters"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -4040,7 +4040,7 @@ declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' |
  *
  * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
  */
-declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "onBlur" | "onFocus" | "onClick" | "prefix" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired"> & {
+declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "name" | "placeholder" | "label" | "onBlur" | "onFocus" | "onClick" | "prefix" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired"> & {
     icon?: IconComponent$1 | undefined;
     onChange?: (({ name, values }: {
         name?: string | undefined;

package/build/components/index.native.js

@@ -1,9 +1,9 @@
 import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
 import React__default, { useMemo, useCallback, useState, useEffect, useRef, createContext, useContext, Fragment as Fragment$1 } from 'react';
+import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import { Appearance, Platform, View, SectionList, TouchableOpacity, Image, Pressable, AccessibilityInfo, Linking, Dimensions, Keyboard, findNodeHandle } from 'react-native';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import Animated, { Easing, Keyframe, useSharedValue, useAnimatedStyle, withTiming, withRepeat, cancelAnimation, interpolate, withSequence, withDelay } from 'react-native-reanimated';
 import styled, { ThemeProvider } from 'styled-components/native';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -2044,10 +2044,10 @@ var nodeUtil = _nodeUtil.exports;
 /* Node.js helper references. */
 nodeUtil && nodeUtil.isSet;
 
-var metaAttribute=function metaAttribute(_ref){var testID=_ref.testID;return _extends({},testID?{testID:testID}:{});};
-
 var MetaConstants={ActionList:'action-list',ActionListFooter:'action-list-footer',ActionListHeader:'action-list-header',ActionListItem:'action-list-item',ActionListSection:'action-list-section',Alert:'alert',Amount:'amount',Badge:'badge',Box:'box',Button:'button',Checkbox:'checkbox',CheckboxGroup:'checkbox-group',Code:'code',Component:'blade-component',Counter:'counter',DropdownOverlay:'dropdown-overlay',Icon:'icon',IconButton:'icon-button',Indicator:'indicator',Link:'link',List:'list',ListItem:'list-item',OTPInput:'otp-input',ProgressBar:'progress-bar',Radio:'radio',RadioGroup:'radio-group',SkipNav:'skipnav',Spinner:'spinner',SelectInput:'select-input',Card:'card',CardBody:'card-body',CardHeader:'card-header',CardFooter:'card-footer',VisuallyHidden:'visually-hidden'};
 
+var metaAttribute=function metaAttribute(_ref){var testID=_ref.testID,name=_ref.name;return _extends({},name?_defineProperty$1({},"data-"+MetaConstants.Component,name):{},testID?{testID:testID}:{});};
+
 var getColorScheme=function getColorScheme(){var colorScheme=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'light';if(colorScheme==='light'||colorScheme==='dark'){return colorScheme;}if(colorScheme==='system'){var _Appearance$getColorS;return (_Appearance$getColorS=Appearance.getColorScheme())!=null?_Appearance$getColorS:'light';}return 'light';};
 
 var baseGetTag$1 = _baseGetTag,
@@ -4009,7 +4009,7 @@ var _CardHeaderIcon=function _CardHeaderIcon(_ref){var Icon=_ref.icon;useVerifyI
 
 var useIsMobile=function useIsMobile(){var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;return matchedDeviceType==='mobile';};var _CardFooter=function _CardFooter(_ref){var _footerChildrensArray,_footerChildrensArray2;var children=_ref.children,testID=_ref.testID;var isMobile=useIsMobile();useVerifyInsideCard('CardFooter');useVerifyAllowedComponents(children,'CardFooter',[ComponentIds$2.CardFooterLeading,ComponentIds$2.CardFooterTrailing]);var footerChildrensArray=React__default.Children.toArray(children);if(!React__default.isValidElement(footerChildrensArray[0])){throw new Error("Invalid React Element "+footerChildrensArray);}var baseBoxJustifyContent=footerChildrensArray.length===2||!((_footerChildrensArray=footerChildrensArray[0])!=null&&(_footerChildrensArray2=_footerChildrensArray.props)!=null&&_footerChildrensArray2.actions)?'space-between':'flex-end';return jsxs(BaseBox,_extends({marginTop:"auto"},metaAttribute({name:MetaConstants.CardFooter,testID:testID}),{children:[jsx(BaseBox,{marginTop:"spacing.7"}),jsx(Divider$1,{}),jsx(BaseBox,{marginTop:"spacing.7",display:"flex",flexDirection:isMobile?'column':'row',justifyContent:baseBoxJustifyContent,alignItems:isMobile?'stretch':'center',children:children})]}));};var CardFooter=assignWithoutSideEffects(_CardFooter,{componentId:ComponentIds$2.CardFooter});var _CardFooterLeading=function _CardFooterLeading(_ref2){var title=_ref2.title,subtitle=_ref2.subtitle;useVerifyInsideCard('CardFooterLeading');return jsxs(BaseBox,{children:[title&&jsx(Text,{variant:"body",size:"medium",weight:"bold",children:title}),subtitle&&jsx(Text,{variant:"body",size:"small",weight:"regular",children:subtitle})]});};var CardFooterLeading=assignWithoutSideEffects(_CardFooterLeading,{componentId:ComponentIds$2.CardFooterLeading});var _CardFooterTrailing=function _CardFooterTrailing(_ref3){var actions=_ref3.actions;var isMobile=useIsMobile();useVerifyInsideCard('CardFooterTrailing');return jsxs(BaseBox,{display:"flex",flexDirection:"row",alignSelf:isMobile?'auto':'center',marginTop:isMobile?'spacing.5':'spacing.0',marginLeft:isMobile?'spacing.0':'spacing.5',children:[jsx(BaseBox,{flexGrow:1,children:actions!=null&&actions.secondary?jsx(Button,_extends({isFullWidth:true,size:"medium",variant:"secondary"},actions.secondary,{children:actions.secondary.text})):null}),jsx(BaseBox,{marginLeft:"spacing.5"}),jsx(BaseBox,{flexGrow:1,children:actions!=null&&actions.primary?jsx(Button,_extends({isFullWidth:true,size:"medium"},actions.primary,{children:actions.primary.text})):null})]});};var CardFooterTrailing=assignWithoutSideEffects(_CardFooterTrailing,{componentId:ComponentIds$2.CardFooterTrailing});
 
-var ComponentIds$1={BottomSheet:'BottomSheet',BottomSheetHeader:'BottomSheetHeader',BottomSheetHeaderTrailing:'BottomSheetHeaderTrailing',BottomSheetHeaderLeading:'BottomSheetHeaderLeading',BottomSheetFooter:'BottomSheetFooter',BottomSheetFooterTrailing:'BottomSheetFooterTrailing',BottomSheetFooterLeading:'BottomSheetFooterLeading',BottomSheetBody:'BottomSheetBody'};
+var ComponentIds$1={BottomSheet:'BottomSheet',BottomSheetHeader:'BottomSheetHeader',BottomSheetFooter:'BottomSheetFooter',BottomSheetBody:'BottomSheetBody',BottomSheetGrabHandle:'BottomSheetGrabHandle'};
 
 var _excluded$f=["children","selectionType"];var _Dropdown=function _Dropdown(_ref){var children=_ref.children,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,styledProps=_objectWithoutProperties(_ref,_excluded$f);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isOpen=_React$useState2[0],setIsOpen=_React$useState2[1];var _React$useState3=React__default.useState([]),_React$useState4=_slicedToArray(_React$useState3,2),options=_React$useState4[0],setOptions=_React$useState4[1];var _React$useState5=React__default.useState([]),_React$useState6=_slicedToArray(_React$useState5,2),selectedIndices=_React$useState6[0],setSelectedIndices=_React$useState6[1];var _React$useState7=React__default.useState(-1),_React$useState8=_slicedToArray(_React$useState7,2),activeIndex=_React$useState8[0],setActiveIndex=_React$useState8[1];var _React$useState9=React__default.useState(false),_React$useState10=_slicedToArray(_React$useState9,2),shouldIgnoreBlur=_React$useState10[0],setShouldIgnoreBlur=_React$useState10[1];var _React$useState11=React__default.useState(false),_React$useState12=_slicedToArray(_React$useState11,2),shouldIgnoreBlurAnimation=_React$useState12[0],setShouldIgnoreBlurAnimation=_React$useState12[1];var triggererRef=React__default.useRef(null);var actionListItemRef=React__default.useRef(null);var _React$useState13=React__default.useState(false),_React$useState14=_slicedToArray(_React$useState13,2),hasFooterAction=_React$useState14[0],setHasFooterAction=_React$useState14[1];var _React$useState15=React__default.useState(false),_React$useState16=_slicedToArray(_React$useState15,2),hasLabelOnLeft=_React$useState16[0],setHasLabelOnLeft=_React$useState16[1];var _React$useState17=React__default.useState(false),_React$useState18=_slicedToArray(_React$useState17,2),isKeydownPressed=_React$useState18[0],setIsKeydownPressed=_React$useState18[1];var _React$useState19=React__default.useState(false),_React$useState20=_slicedToArray(_React$useState19,2),dropdownHasBottomSheet=_React$useState20[0],setDropdownHasBottomSheet=_React$useState20[1];var dropdownBaseId=useId('dropdown');var dropdownTriggerer=React__default.useRef();React__default.Children.map(children,function(child){if(React__default.isValidElement(child)){if(!isValidAllowedChildren(child,'SelectInput')&&!isValidAllowedChildren(child,componentIds.DropdownOverlay)&&!isValidAllowedChildren(child,ComponentIds$1.BottomSheet)){throw new Error("[Dropdown]: Dropdown can only have `SelectInput` and `DropdownOverlay` as children\n\n Check out: https://blade.razorpay.com/?path=/story/components-dropdown");}if(isValidAllowedChildren(child,'SelectInput')){dropdownTriggerer.current='SelectInput';}}});var contextValue=React__default.useMemo(function(){return {isOpen:isOpen,setIsOpen:setIsOpen,selectedIndices:selectedIndices,setSelectedIndices:setSelectedIndices,options:options,setOptions:setOptions,activeIndex:activeIndex,setActiveIndex:setActiveIndex,shouldIgnoreBlur:shouldIgnoreBlur,setShouldIgnoreBlur:setShouldIgnoreBlur,shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,setShouldIgnoreBlurAnimation:setShouldIgnoreBlurAnimation,isKeydownPressed:isKeydownPressed,setIsKeydownPressed:setIsKeydownPressed,dropdownBaseId:dropdownBaseId,triggererRef:triggererRef,actionListItemRef:actionListItemRef,selectionType:selectionType,hasFooterAction:hasFooterAction,setHasFooterAction:setHasFooterAction,hasLabelOnLeft:hasLabelOnLeft,setHasLabelOnLeft:setHasLabelOnLeft,dropdownTriggerer:dropdownTriggerer.current};},[isOpen,selectedIndices,options,activeIndex,shouldIgnoreBlur,shouldIgnoreBlurAnimation,selectionType,hasFooterAction,hasLabelOnLeft,isKeydownPressed]);var onBottomSheetDismiss=React__default.useCallback(function(){setIsOpen(false);},[]);var BottomSheetAndDropdownGlueContextValue=React__default.useMemo(function(){return {isOpen:isOpen,dropdownHasBottomSheet:dropdownHasBottomSheet,setDropdownHasBottomSheet:setDropdownHasBottomSheet,onBottomSheetDismiss:onBottomSheetDismiss};},[dropdownHasBottomSheet,isOpen,onBottomSheetDismiss]);return jsx(BottomSheetAndDropdownGlueContext.Provider,{value:BottomSheetAndDropdownGlueContextValue,children:jsx(DropdownContext.Provider,{value:contextValue,children:jsx(BaseBox,_extends({position:"relative"},getStyledProps(styledProps),{children:children}))})});};var Dropdown=assignWithoutSideEffects(_Dropdown,{componentId:componentIds.Dropdown});