fix(Tearsheet): address Element type issue

carbon-design-system · Oct 17, 2023 · 74c311c · 74c311c
1 parent 7764b5a
commit 74c311c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/packages/ibm-products/src/components/Tearsheet/Tearsheet.js b/packages/ibm-products/src/components/Tearsheet/Tearsheet.js
@@ -23,6 +23,8 @@ import { ActionSet } from '../ActionSet';
 
 import { tearsheetHasCloseIcon, TearsheetShell } from './TearsheetShell';
 
+import { portalType } from './TearsheetShell';
+
 const componentName = 'Tearsheet';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -206,7 +208,7 @@ Tearsheet.propTypes = {
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
-  portalTarget: PropTypes.instanceOf(Element),
+  portalTarget: portalType,
 
   /**
    * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens

diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.js b/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.js
@@ -27,6 +27,8 @@ import {
   tearsheetShellWideProps as blocked,
 } from './TearsheetShell';
 
+import { portalType } from './TearsheetShell';
+
 const componentName = 'TearsheetNarrow';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -168,7 +170,7 @@ TearsheetNarrow.propTypes = {
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
-  portalTarget: PropTypes.instanceOf(Element),
+  portalTarget: portalType,
 
   /**
    * The main title of the tearsheet, displayed in the header area.

diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.js b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.js
@@ -335,6 +335,11 @@ export const TearsheetShell = React.forwardRef(
 // is used in preference to relying on function.name.
 TearsheetShell.displayName = componentName;
 
+export const portalType =
+  typeof Element === 'undefined'
+    ? PropTypes.object
+    : PropTypes.instanceOf(Element);
+
 export const deprecatedProps = {
   /**
    * **Deprecated**
@@ -478,7 +483,7 @@ TearsheetShell.propTypes = {
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
-  portalTarget: PropTypes.instanceOf(Element),
+  portalTarget: portalType,
 
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.