import * as RMWC from '@rmwc/types' ; import React from 'react' ; import { wrapChild , createComponent } from '@rmwc/base' ; import { Tag , useClassNames } from '@rmwc/base' ; /** The Elevation Component */ export interface ElevationProps { /** A number from 0 - 24 for different levels of elevation */ z ? : number | string ; /** Allows for smooth transitions between elevations when the z value changes. */ transition ? : boolean ; /** Allows the elevation classes to be merged onto the child component instead of creating an new DOM node. */ wrap ? : boolean ; } /** The Elevation Component */ export const Elevation = createComponent < ElevationProps > ( function Elevation ( props , ref ) { const { z = 0 , transition = false , wrap , ... rest } = props ; const className = useClassNames ( props , [ `mdc-elevation--z${ z }` , { 'mdc-elevation-transition' : transition } ] ) ; if ( wrap ) { return wrapChild ( { ... rest , className , ref } ) ; } return < Tag { ... rest } ref = { ref } className = { className } / > ; } ) ;