@razorpay/blade 8.3.0 → 8.4.0

package/build/components/index.d.ts

@@ -2234,7 +2234,40 @@ declare type BoxVisualProps = MakeObjectResponsive<{
 }> & {
     as: BoxAsType;
 };
-declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxVisualProps & {
+declare type BoxCallbackProps = Omit<Platform.Select<{
+    web: {
+        /**
+         * **Warning**
+         *
+         * Make sure to not use Box when you want to create a trigger that performs action on hover.
+         * You would probably want to render it as `button` using `styled.button` instead.
+         *
+         * Use this for hoverable containers in cases like custom menus.
+         */
+        onMouseOver: React.MouseEventHandler<HTMLElement>;
+        /**
+         * **Warning**
+         *
+         * Make sure to not use Box when you want to create a trigger that performs action on hover.
+         * You would probably want to render it as `button` using `styled.button` instead.
+         *
+         * Use this for hoverable containers in cases like custom menus.
+         */
+        onMouseEnter: React.MouseEventHandler<HTMLElement>;
+        /**
+         * **Warning**
+         *
+         * Make sure to not use Box when you want to create a trigger that performs action on hover.
+         * You would probably want to render it as `button` using `styled.button` instead.
+         *
+         * Use this for hoverable containers in cases like custom menus.
+         */
+        onMouseLeave: React.MouseEventHandler<HTMLElement>;
+        onScroll: React.UIEventHandler<HTMLElement>;
+    };
+    native: Record<'onMouseOver' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll', undefined>;
+}>, '__brand__'>;
+declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxCallbackProps & BoxVisualProps & {
     children?: React.ReactNode | React.ReactNode[];
 } & TestID>;
 declare type BoxRefType = Platform.Select<{
@@ -2281,7 +2314,12 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<MakeObjectRe
     left: SpacingValueType;
 } & PickIfExist$1<styled_components.CSSObject, "position" | "zIndex"> & {
     __brand__?: "platform-web" | undefined;
-}> & MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">> & MakeObjectResponsive<{
+}> & MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">> & {
+    onMouseOver: React__default.MouseEventHandler<HTMLElement>;
+    onMouseEnter: React__default.MouseEventHandler<HTMLElement>;
+    onMouseLeave: React__default.MouseEventHandler<HTMLElement>;
+    onScroll: React__default.UIEventHandler<HTMLElement>;
+} & MakeObjectResponsive<{
     backgroundColor: "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast";
     borderWidth: "none" | "thin" | "thick";
     borderColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";

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

@@ -2236,7 +2236,40 @@ declare type BoxVisualProps = MakeObjectResponsive<{
 }> & {
     as: BoxAsType;
 };
-declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxVisualProps & {
+declare type BoxCallbackProps = Omit<Platform.Select<{
+    web: {
+        /**
+         * **Warning**
+         *
+         * Make sure to not use Box when you want to create a trigger that performs action on hover.
+         * You would probably want to render it as `button` using `styled.button` instead.
+         *
+         * Use this for hoverable containers in cases like custom menus.
+         */
+        onMouseOver: React.MouseEventHandler<HTMLElement>;
+        /**
+         * **Warning**
+         *
+         * Make sure to not use Box when you want to create a trigger that performs action on hover.
+         * You would probably want to render it as `button` using `styled.button` instead.
+         *
+         * Use this for hoverable containers in cases like custom menus.
+         */
+        onMouseEnter: React.MouseEventHandler<HTMLElement>;
+        /**
+         * **Warning**
+         *
+         * Make sure to not use Box when you want to create a trigger that performs action on hover.
+         * You would probably want to render it as `button` using `styled.button` instead.
+         *
+         * Use this for hoverable containers in cases like custom menus.
+         */
+        onMouseLeave: React.MouseEventHandler<HTMLElement>;
+        onScroll: React.UIEventHandler<HTMLElement>;
+    };
+    native: Record<'onMouseOver' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll', undefined>;
+}>, '__brand__'>;
+declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxCallbackProps & BoxVisualProps & {
     children?: React.ReactNode | React.ReactNode[];
 } & TestID>;
 declare type BoxRefType = Platform.Select<{
@@ -2283,7 +2316,12 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<MakeObjectRe
     left: SpacingValueType;
 } & PickIfExist$1<react_native.ViewStyle, "position" | "zIndex"> & {
     __brand__?: "platform-native" | undefined;
-}> & MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">> & MakeObjectResponsive<{
+}> & MakeObjectResponsive<PickCSSByPlatform$1<"grid" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate">> & {
+    onMouseOver: undefined;
+    onMouseEnter: undefined;
+    onMouseLeave: undefined;
+    onScroll: undefined;
+} & MakeObjectResponsive<{
     backgroundColor: "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast";
     borderWidth: "none" | "thin" | "thick";
     borderColor: "surface.border.normal.lowContrast" | "surface.border.normal.highContrast" | "surface.border.subtle.lowContrast" | "surface.border.subtle.highContrast";

package/build/components/index.native.js

@@ -3979,7 +3979,7 @@ var _excluded$m=["children","contrast","fontWeight","icon","size","variant","tes
 
 var validBoxAsValues=['div','section','footer','header','main','aside','nav','span'];
 
-var validateBackgroundString=function validateBackgroundString(stringBackgroundColorValue){if(!stringBackgroundColorValue.startsWith('surface.background')){throw new Error("[Blade - Box]: Oops! Currently you can only use `surface.background.*` tokens with backgroundColor property but we received `"+stringBackgroundColorValue+"` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss \u2728");}};var validateBackgroundProp=function validateBackgroundProp(responsiveBackgroundColor){if(responsiveBackgroundColor){if(typeof responsiveBackgroundColor==='string'){validateBackgroundString(responsiveBackgroundColor);return;}Object.values(responsiveBackgroundColor).forEach(function(backgroundColor){validateBackgroundString(backgroundColor);});}};var makeBoxProps=function makeBoxProps(props){return {display:props.display,overflow:props.overflow,overflowX:props.overflowX,overflowY:props.overflowY,height:props.height,minHeight:props.minHeight,maxHeight:props.maxHeight,width:props.width,minWidth:props.minWidth,maxWidth:props.maxWidth,flex:props.flex,flexWrap:props.flexWrap,flexDirection:props.flexDirection,flexGrow:props.flexGrow,flexShrink:props.flexShrink,flexBasis:props.flexBasis,alignItems:props.alignItems,alignContent:props.alignContent,alignSelf:props.alignSelf,justifyItems:props.justifyItems,justifyContent:props.justifyContent,justifySelf:props.justifySelf,placeSelf:props.placeSelf,order:props.order,grid:props.grid,gridColumn:props.gridColumn,gridRow:props.gridRow,gridRowStart:props.gridRowStart,gridRowEnd:props.gridRowEnd,gridColumnStart:props.gridColumnStart,gridColumnEnd:props.gridColumnEnd,gridArea:props.gridArea,gridAutoFlow:props.gridAutoFlow,gridAutoRows:props.gridAutoRows,gridAutoColumns:props.gridAutoColumns,gridTemplate:props.gridTemplate,gridTemplateAreas:props.gridTemplateAreas,gridTemplateColumns:props.gridTemplateColumns,gridTemplateRows:props.gridTemplateRows,padding:props.padding,paddingTop:props.paddingTop,paddingBottom:props.paddingBottom,paddingRight:props.paddingRight,paddingLeft:props.paddingLeft,paddingX:props.paddingX,paddingY:props.paddingY,margin:props.margin,marginBottom:props.marginBottom,marginTop:props.marginTop,marginRight:props.marginRight,marginLeft:props.marginLeft,marginX:props.marginX,marginY:props.marginY,gap:props.gap,rowGap:props.rowGap,columnGap:props.columnGap,position:props.position,zIndex:props.zIndex,top:props.top,right:props.right,bottom:props.bottom,left:props.left,backgroundColor:props.backgroundColor,borderWidth:props.borderWidth,borderColor:props.borderColor,borderTopWidth:props.borderTopWidth,borderTopColor:props.borderTopColor,borderRightWidth:props.borderRightWidth,borderRightColor:props.borderRightColor,borderBottomWidth:props.borderBottomWidth,borderBottomColor:props.borderBottomColor,borderLeftWidth:props.borderLeftWidth,borderLeftColor:props.borderLeftColor,borderRadius:props.borderRadius,borderTopLeftRadius:props.borderTopLeftRadius,borderTopRightRadius:props.borderTopRightRadius,borderBottomRightRadius:props.borderBottomRightRadius,borderBottomLeftRadius:props.borderBottomLeftRadius,children:props.children,as:isReactNative$4()?undefined:props.as};};var _Box=function _Box(props,ref){React__default.useEffect(function(){validateBackgroundProp(props.backgroundColor);},[props.backgroundColor]);React__default.useEffect(function(){if(props.as){if(isReactNative$4()){throw new Error('[Blade - Box]: `as` prop is not supported on React Native');}if(!validBoxAsValues.includes(props.as)){throw new Error("[Blade - Box]: Invalid `as` prop value - "+props.as+". Only "+validBoxAsValues.join(', ')+" are valid values");}}},[props.as]);return jsx(BaseBox,_extends({ref:ref},metaAttribute({name:MetaConstants.Box,testID:props.testID}),makeBoxProps(props)));};var Box=assignWithoutSideEffects(React__default.forwardRef(_Box),{displayName:'Box'});
+var validateBackgroundString=function validateBackgroundString(stringBackgroundColorValue){if(!stringBackgroundColorValue.startsWith('surface.background')){throw new Error("[Blade - Box]: Oops! Currently you can only use `surface.background.*` tokens with backgroundColor property but we received `"+stringBackgroundColorValue+"` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss \u2728");}};var validateBackgroundProp=function validateBackgroundProp(responsiveBackgroundColor){if(responsiveBackgroundColor){if(typeof responsiveBackgroundColor==='string'){validateBackgroundString(responsiveBackgroundColor);return;}Object.values(responsiveBackgroundColor).forEach(function(backgroundColor){validateBackgroundString(backgroundColor);});}};var makeBoxProps=function makeBoxProps(props){return {display:props.display,overflow:props.overflow,overflowX:props.overflowX,overflowY:props.overflowY,height:props.height,minHeight:props.minHeight,maxHeight:props.maxHeight,width:props.width,minWidth:props.minWidth,maxWidth:props.maxWidth,flex:props.flex,flexWrap:props.flexWrap,flexDirection:props.flexDirection,flexGrow:props.flexGrow,flexShrink:props.flexShrink,flexBasis:props.flexBasis,alignItems:props.alignItems,alignContent:props.alignContent,alignSelf:props.alignSelf,justifyItems:props.justifyItems,justifyContent:props.justifyContent,justifySelf:props.justifySelf,placeSelf:props.placeSelf,order:props.order,grid:props.grid,gridColumn:props.gridColumn,gridRow:props.gridRow,gridRowStart:props.gridRowStart,gridRowEnd:props.gridRowEnd,gridColumnStart:props.gridColumnStart,gridColumnEnd:props.gridColumnEnd,gridArea:props.gridArea,gridAutoFlow:props.gridAutoFlow,gridAutoRows:props.gridAutoRows,gridAutoColumns:props.gridAutoColumns,gridTemplate:props.gridTemplate,gridTemplateAreas:props.gridTemplateAreas,gridTemplateColumns:props.gridTemplateColumns,gridTemplateRows:props.gridTemplateRows,padding:props.padding,paddingTop:props.paddingTop,paddingBottom:props.paddingBottom,paddingRight:props.paddingRight,paddingLeft:props.paddingLeft,paddingX:props.paddingX,paddingY:props.paddingY,margin:props.margin,marginBottom:props.marginBottom,marginTop:props.marginTop,marginRight:props.marginRight,marginLeft:props.marginLeft,marginX:props.marginX,marginY:props.marginY,gap:props.gap,rowGap:props.rowGap,columnGap:props.columnGap,position:props.position,zIndex:props.zIndex,top:props.top,right:props.right,bottom:props.bottom,left:props.left,backgroundColor:props.backgroundColor,borderWidth:props.borderWidth,borderColor:props.borderColor,borderTopWidth:props.borderTopWidth,borderTopColor:props.borderTopColor,borderRightWidth:props.borderRightWidth,borderRightColor:props.borderRightColor,borderBottomWidth:props.borderBottomWidth,borderBottomColor:props.borderBottomColor,borderLeftWidth:props.borderLeftWidth,borderLeftColor:props.borderLeftColor,borderRadius:props.borderRadius,borderTopLeftRadius:props.borderTopLeftRadius,borderTopRightRadius:props.borderTopRightRadius,borderBottomRightRadius:props.borderBottomRightRadius,borderBottomLeftRadius:props.borderBottomLeftRadius,onMouseEnter:props.onMouseEnter,onMouseLeave:props.onMouseLeave,onMouseOver:props.onMouseOver,onScroll:props.onScroll,children:props.children,as:isReactNative$4()?undefined:props.as};};var _Box=function _Box(props,ref){React__default.useEffect(function(){validateBackgroundProp(props.backgroundColor);},[props.backgroundColor]);React__default.useEffect(function(){if(props.as){if(isReactNative$4()){throw new Error('[Blade - Box]: `as` prop is not supported on React Native');}if(!validBoxAsValues.includes(props.as)){throw new Error("[Blade - Box]: Invalid `as` prop value - "+props.as+". Only "+validBoxAsValues.join(', ')+" are valid values");}}},[props.as]);return jsx(BaseBox,_extends({ref:ref},metaAttribute({name:MetaConstants.Box,testID:props.testID}),makeBoxProps(props)));};var Box=assignWithoutSideEffects(React__default.forwardRef(_Box),{displayName:'Box'});
 
 var _excluded$l=["children","surfaceLevel","elevation"];var CardSurfaceStyled=styled(BaseBox)(function(_ref){var surfaceLevel=_ref.surfaceLevel,elevation=_ref.elevation,theme=_ref.theme;var backgroundColor=theme.colors.surface.background["level"+surfaceLevel].lowContrast;return {width:'100%',display:'flex',flexDirection:'column',borderWidth:elevation==='none'?""+theme.border.width.thin:undefined,borderStyle:elevation==='none'?'solid':undefined,borderColor:elevation==='none'?""+theme.colors.surface.border.normal.lowContrast:undefined,backgroundColor:backgroundColor};});var CardSurface=function CardSurface(_ref2){var children=_ref2.children,surfaceLevel=_ref2.surfaceLevel,elevation=_ref2.elevation,props=_objectWithoutProperties(_ref2,_excluded$l);var _useTheme=useTheme(),theme=_useTheme.theme;return jsx(CardSurfaceStyled,_extends({},props,{surfaceLevel:surfaceLevel,elevation:elevation,style:castNativeType(theme.elevation[elevation]),children:children}));};