Fixes for popover in nav bar and z-index on ControlledPopover (#786)

* - 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.

* - Add zIndex and appendTo to NavBarPopoverButton.

* - Add zIndex and appendTo to DateRangeDualTextInput.

packages/calendar/src/components/input-types/date-range-dual-text-input/DateRangeDualTextInput.tsx

@@ -4,7 +4,10 @@ import {
   TextInputProps,
   ValueAndOnValueChangeProps,
 } from "@stenajs-webui/forms";
-import { ControlledPopover } from "@stenajs-webui/tooltip";
+import {
+  ControlledPopover,
+  ControlledPopoverProps,
+} from "@stenajs-webui/tooltip";
 import { isAfter } from "date-fns";
 import * as React from "react";
 import { useMemo, useRef } from "react";
@@ -27,7 +30,8 @@ import { defaultMaxDate } from "../../../config/DefaultMaxDate";
 export interface DateRangeDualTextInputProps<TData = unknown>
   extends ValueAndOnValueChangeProps<DateRange>,
     OptionalMinMaxDatesAsString,
-    Pick<DualTextInputProps, "widthLeft" | "widthRight" | "variant"> {
+    Pick<DualTextInputProps, "widthLeft" | "widthRight" | "variant">,
+    Pick<ControlledPopoverProps, "zIndex" | "appendTo"> {
   onEsc?: () => void;
   onEnter?: () => void;
   onBlur?: () => void;
@@ -50,6 +54,8 @@ export function DateRangeDualTextInput<TData>({
   widthRight = 128,
   variant,
   disabled,
+  zIndex,
+  appendTo,
 }: DateRangeDualTextInputProps<TData>) {
   const { startDate, endDate } = value || {};
 
@@ -121,6 +127,8 @@ export function DateRangeDualTextInput<TData>({
         hideArrow
         restoreFocus={false}
         returnFocus={false}
+        zIndex={zIndex}
+        appendTo={appendTo}
         renderTrigger={(props) => (
           <Box {...props}>
             <DualTextInput

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,11 @@
 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,
+  ControlledPopoverProps,
+} from "@stenajs-webui/tooltip";
+import { Box, useBoolean } from "@stenajs-webui/core";
 
 type RenderProp = (args: RenderPropArgs) => ReactNode;
 
@@ -11,30 +14,34 @@ interface RenderPropArgs {
 }
 
 export interface NavBarPopoverButtonProps
-  extends Omit<NavBarButtonProps, "onClick" | "content"> {
+  extends Omit<NavBarButtonProps, "onClick" | "content">,
+    Pick<ControlledPopoverProps, "zIndex" | "appendTo"> {
   content?: RenderProp;
 }
 
 export const NavBarPopoverButton: React.FC<NavBarPopoverButtonProps> = ({
   content,
   children,
+  appendTo,
+  zIndex,
   ...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}
+      zIndex={zIndex}
+      appendTo={appendTo}
     >
-      {({ 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