Popper spectrum provider + positioning (deephaven#293)

bmingles · Mar 6, 2024 · 5a5445f · 5a5445f
1 parent 9280b73
commit 5a5445f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/packages/components/src/popper/Popper.tsx b/packages/components/src/popper/Popper.tsx
@@ -23,6 +23,7 @@ import PopperJs, { PopperOptions, ReferenceObject } from 'popper.js';
 import PropTypes from 'prop-types';
 import ThemeExport from '../ThemeExport';
 import './Popper.scss';
+import { SpectrumThemeProvider } from '../theme/SpectrumThemeProvider';
 
 interface PopperProps {
   options: PopperOptions;
@@ -251,25 +252,27 @@ class Popper extends Component<PopperProps, PopperState> {
         onEntered={this.handleEnter}
         onExited={this.handleExit}
       >
-        <div
-          onClick={e => {
-            // stop click events from escaping popper
-            e.stopPropagation();
-          }}
-          onKeyDown={e => {
-            if (e.key === 'Escape') this.hide();
-          }}
-          className={classNames('popper', { interactive }, className)}
-          onBlur={closeOnBlur ? this.handleBlur : undefined}
-          tabIndex={closeOnBlur ? -1 : undefined}
-          role="presentation"
-        >
-          <div className="popper-content">
-            {children}
-            {/* eslint-disable-next-line react/no-unknown-property */}
-            <div className="popper-arrow" x-arrow="" />
+        <SpectrumThemeProvider isPortal>
+          <div
+            onClick={e => {
+              // stop click events from escaping popper
+              e.stopPropagation();
+            }}
+            onKeyDown={e => {
+              if (e.key === 'Escape') this.hide();
+            }}
+            className={classNames('popper', { interactive }, className)}
+            onBlur={closeOnBlur ? this.handleBlur : undefined}
+            tabIndex={closeOnBlur ? -1 : undefined}
+            role="presentation"
+          >
+            <div className="popper-content">
+              {children}
+              {/* eslint-disable-next-line react/no-unknown-property */}
+              <div className="popper-arrow" x-arrow="" />
+            </div>
           </div>
-        </div>
+        </SpectrumThemeProvider>
       </CSSTransition>
     );
   }

diff --git a/packages/components/src/spectrum/picker/PickerUtils.ts b/packages/components/src/spectrum/picker/PickerUtils.ts
@@ -235,13 +235,13 @@ export function normalizePickerItemList(
  */
 export function normalizeTooltipOptions(
   options?: boolean | TooltipOptions | null
-): PopperOptions | null {
+): TooltipOptions | null {
   if (options == null || options === false) {
     return null;
   }
 
   if (options === true) {
-    return { placement: 'top-start' };
+    return { placement: 'right' };
   }
 
   return options;