- Add zIndex and appendTo props to ControlledPopover.

- NavBarPopoverButton now toggles the popover, so if the user clicks it when it is open, it closes.
- NavBarButton now forwards ref, so that it works with Popover anchoring.

packages/panels/src/components/nav-bar/NavBarButton.tsx

@@ -1,25 +1,25 @@
 import { FlatButton, FlatButtonProps } from "@stenajs-webui/elements";
 import * as React from "react";
+import { forwardRef } from "react";
 import cx from "classnames";
 import styles from "./NavBarButton.module.css";
 
 export interface NavBarButtonProps extends FlatButtonProps {
   selected?: boolean;
 }
 
-export const NavBarButton: React.FC<NavBarButtonProps> = ({
-  selected,
-  className,
-  ...buttonProps
-}) => {
-  return (
-    <FlatButton
-      {...buttonProps}
-      className={cx(
-        styles.navBarButton,
-        selected && styles.selected,
-        className
-      )}
-    />
-  );
-};
+export const NavBarButton = forwardRef<HTMLButtonElement, NavBarButtonProps>(
+  function ({ selected, className, ...buttonProps }, ref) {
+    return (
+      <FlatButton
+        {...buttonProps}
+        ref={ref}
+        className={cx(
+          styles.navBarButton,
+          selected && styles.selected,
+          className
+        )}
+      />
+    );
+  }
+);

packages/panels/src/components/nav-bar/NavBarPopoverButton.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { ReactNode } from "react";
 import { NavBarButton, NavBarButtonProps } from "./NavBarButton";
-import { Popover } from "@stenajs-webui/tooltip";
-import { Box, Row } from "@stenajs-webui/core";
+import { ControlledPopover } from "@stenajs-webui/tooltip";
+import { Box, useBoolean } from "@stenajs-webui/core";
 
 type RenderProp = (args: RenderPropArgs) => ReactNode;
 
@@ -20,21 +20,20 @@ export const NavBarPopoverButton: React.FC<NavBarPopoverButtonProps> = ({
   children,
   ...navBarButtonProps
 }) => {
+  const [isOpen, , close, toggle] = useBoolean(false);
+
   return (
-    <Popover
+    <ControlledPopover
       renderTrigger={(props) => (
-        <Row {...props}>
-          <NavBarButton {...navBarButtonProps} />
-        </Row>
+        <NavBarButton {...navBarButtonProps} {...props} onClick={toggle} />
       )}
-      trigger={"click"}
+      open={isOpen}
+      onRequestClose={close}
     >
-      {({ onRequestClose }) => (
-        <Box>
-          {content && content({ close: onRequestClose })}
-          {children}
-        </Box>
-      )}
-    </Popover>
+      <Box>
+        {content && content({ close })}
+        {children}
+      </Box>
+    </ControlledPopover>
   );
 };

packages/tooltip/src/components/popover/ControlledPopover.tsx

@@ -28,6 +28,8 @@ export interface ControlledPopoverProps extends PropsWithChildren {
   disablePadding?: boolean;
   restoreFocus?: boolean;
   returnFocus?: boolean;
+  appendTo?: HTMLElement | null | React.MutableRefObject<HTMLElement | null>;
+  zIndex?: number;
 }
 
 const ARROW_WIDTH = 12;
@@ -44,6 +46,8 @@ export const ControlledPopover: React.FC<ControlledPopoverProps> = ({
   onRequestClose,
   restoreFocus,
   returnFocus,
+  appendTo,
+  zIndex,
 }) => {
   const arrowRef = useRef(null);
 
@@ -88,7 +92,7 @@ export const ControlledPopover: React.FC<ControlledPopoverProps> = ({
       {renderTrigger({ ref: refs.setReference, ...getReferenceProps() })}
 
       {isMounted && (
-        <FloatingPortal>
+        <FloatingPortal root={appendTo}>
           <FloatingFocusManager
             context={context}
             modal={false}
@@ -97,7 +101,7 @@ export const ControlledPopover: React.FC<ControlledPopoverProps> = ({
           >
             <div
               ref={refs.setFloating}
-              style={floatingStyles}
+              style={{ zIndex, ...floatingStyles }}
               {...getFloatingProps}
             >
               <div