wrap Card render output with StripesOverlayContext (#2391)

CHANGELOG.md

@@ -12,6 +12,7 @@
 * Pin `currency-codes` to `v2.1.0` to avoid duplicate entries in `v2.2.0`. Refs STCOM-1379.
 * Wrap `<Selection>` in full-width div. Refs STCOM-1332.
 * Assign `<Modal>`'s exit key handler to Modal's element rather than `document`. refs STCOM-1382.
+* Wrap `<Card>`'s render output in `<StripesOverlayContext>` to facilitate ease with overlay components. Refs STCOM-1384.
 
 ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0)

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>
     );
   }
 }