From 46ce739dfc37b7f8e03b342b6c68ea4d10c95180 Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Mon, 18 Nov 2024 08:47:48 -0600
Subject: [PATCH] wrap Card render output with StripesOverlayContext (#2391)

---
 CHANGELOG.md     |  1 +
 lib/Card/Card.js | 21 ++++++++++++---------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 63bf14b5e..104c9ac7b 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/lib/Card/Card.js b/lib/Card/Card.js
index 0b3f254fe..56ec3833e 100644
--- a/lib/Card/Card.js
+++ b/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>
     );
   }
 }