STCOM-1384 wrap Card render output with StripesOverlayContext (#2391)

(cherry picked from commit 46ce739)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change history for stripes-components
 
+## 12.2.6 IN PROGRESS
+
+* Wrap `<Card>`'s render output in `<StripesOverlayContext>` to facilitate ease with overlay components. Refs STCOM-1384.
+
 ## [12.2.5](https://github.com/folio-org/stripes-components/tree/v12.2.5) (2024-11-15)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.2.4...v12.2.5)
 

lib/Card/Card.js

@@ -6,6 +6,7 @@ import omitProps from '../../util/omitProps';
 
 import css from './Card.css';
 import DefaultCardHeader from './headers/DefaultCardHeader';
+import StripesOverlayWrapper from '../../util/StripesOverlayWrapper';
 
 export default class Card extends React.Component {
   static propTypes = {
@@ -73,18 +74,20 @@ export default class Card extends React.Component {
     ]);
 
     return (
-      <div
-        className={this.getCardStyle()}
-        {...customProps}
-      >
-        <HeaderComponent {...this.props} />
+      <StripesOverlayWrapper>
         <div
-          data-test-card-body
-          className={`${css.body} ${bodyClass || ''}`}
+          className={this.getCardStyle()}
+          {...customProps}
         >
-          {children}
+          <HeaderComponent {...this.props} />
+          <div
+            data-test-card-body
+            className={`${css.body} ${bodyClass || ''}`}
+          >
+            {children}
+          </div>
         </div>
-      </div>
+      </StripesOverlayWrapper>
     );
   }
 }