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

(cherry picked from commit 46ce739dfc37b7f8e03b342b6c68ea4d10c95180)
---
 CHANGELOG.md     |  4 ++++
 lib/Card/Card.js | 21 ++++++++++++---------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6546fd29a..0f48d7147 100644
--- a/CHANGELOG.md
+++ b/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)
 
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>
     );
   }
 }