Add advanced example for Dialog menu portal target

Author: csandman

demo/package-lock.json

@@ -20,6 +20,7 @@ import {
 } from "chakra-react-select";
 import ConnectedSelectMenuExample from "./components/advanced-examples/connected-select-menu-example";
 import CustomIndicatorIconsExample from "./components/advanced-examples/custom-indicator-icons-example";
+import MenuPortalTargetExample from "./components/advanced-examples/menu-portal-target-example";
 import OptionsWithIconsExample from "./components/advanced-examples/options-with-icons-example";
 import SelectPopoverExample from "./components/advanced-examples/select-popover-example";
 import { useColorModeValue } from "./components/ui/color-mode";
@@ -469,6 +470,10 @@ const App = () => {
         <Field label="Custom Indicator Icons">
           <CustomIndicatorIconsExample />
         </Field>
+
+        <Field label="Menu Portal Target">
+          <MenuPortalTargetExample />
+        </Field>
       </Stack>
     </Container>
   );

demo/src/app.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { Stack } from "@chakra-ui/react";
+import { Select, Props as SelectProps } from "chakra-react-select";
+import { colorOptions } from "../../data/options";
+import { Button } from "../ui/button";
+import {
+  DialogBackdrop,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { Field } from "../ui/field";
+import { Switch } from "../ui/switch";
+
+const MenuPortalTargetExample = () => {
+  const [isPortalEnabled, setIsPortalEnabled] = useState(false);
+
+  const portalProps: SelectProps = {
+    menuPortalTarget: document.body,
+    styles: {
+      menuPortal: (base) => ({
+        ...base,
+        // This could be --chakra-z-index-dropdown, to match the built-in Select component,
+        // but we need to make sure it's above the Dialog component for this use case.
+        zIndex: "var(--chakra-z-index-popover)",
+        // By default, the Chakra Dialog component will set pointer-events to none on the body element.
+        // We need to override this behavior to allow the menu to be interacted with.
+        // This isn't necessary if you pass modal={false} to the Dialog component.
+        pointerEvents: "auto",
+      }),
+    },
+  };
+
+  return (
+    <DialogRoot closeOnInteractOutside={false}>
+      <DialogBackdrop />
+      <DialogTrigger asChild>
+        <Button colorPalette="blue">Open Modal</Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogCloseTrigger />
+        <DialogHeader>
+          <DialogTitle>Menu Portal Target Example</DialogTitle>
+        </DialogHeader>
+        <DialogBody overflow="hidden">
+          <Stack gap={4}>
+            <Select
+              focusRingColor="blue.600"
+              options={colorOptions}
+              defaultValue={colorOptions[0]}
+              menuShouldScrollIntoView={false}
+              {...(isPortalEnabled ? portalProps : {})}
+            />
+
+            <Field>
+              <Switch
+                colorPalette="blue"
+                name="enable-portal"
+                checked={isPortalEnabled}
+                onCheckedChange={({ checked }) => {
+                  setIsPortalEnabled(checked);
+                }}
+                inputProps={{ onBlur: () => {} }}
+              >
+                Enable Portal
+              </Switch>
+            </Field>
+          </Stack>
+        </DialogBody>
+      </DialogContent>
+    </DialogRoot>
+  );
+};
+
+export default MenuPortalTargetExample;

demo/src/components/advanced-examples/menu-portal-target-example.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react";
+import { CloseButton } from "./close-button";
+
+interface DialogContentProps extends ChakraDialog.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+  backdrop?: boolean;
+}
+
+export const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  DialogContentProps
+>(function DialogContent(props, ref) {
+  const {
+    children,
+    portalled = true,
+    portalRef,
+    backdrop = true,
+    ...rest
+  } = props;
+
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      {backdrop && <ChakraDialog.Backdrop />}
+      <ChakraDialog.Positioner>
+        <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ChakraDialog.Content>
+      </ChakraDialog.Positioner>
+    </Portal>
+  );
+});
+
+export const DialogCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraDialog.CloseTriggerProps
+>(function DialogCloseTrigger(props, ref) {
+  return (
+    <ChakraDialog.CloseTrigger
+      position="absolute"
+      top="2"
+      insetEnd="2"
+      {...props}
+      asChild
+    >
+      <CloseButton size="sm" ref={ref}>
+        {props.children}
+      </CloseButton>
+    </ChakraDialog.CloseTrigger>
+  );
+});
+
+export const DialogRoot = ChakraDialog.Root;
+export const DialogFooter = ChakraDialog.Footer;
+export const DialogHeader = ChakraDialog.Header;
+export const DialogBody = ChakraDialog.Body;
+export const DialogBackdrop = ChakraDialog.Backdrop;
+export const DialogTitle = ChakraDialog.Title;
+export const DialogDescription = ChakraDialog.Description;
+export const DialogTrigger = ChakraDialog.Trigger;
+export const DialogActionTrigger = ChakraDialog.ActionTrigger;

demo/src/components/ui/dialog.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { Switch as ChakraSwitch } from "@chakra-ui/react";
+
+export interface SwitchProps extends ChakraSwitch.RootProps {
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  rootRef?: React.Ref<HTMLLabelElement>;
+  trackLabel?: { on: React.ReactNode; off: React.ReactNode };
+  thumbLabel?: { on: React.ReactNode; off: React.ReactNode };
+}
+
+export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  function Switch(props, ref) {
+    const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } =
+      props;
+
+    return (
+      <ChakraSwitch.Root ref={rootRef} {...rest}>
+        <ChakraSwitch.HiddenInput ref={ref} {...inputProps} />
+        <ChakraSwitch.Control>
+          <ChakraSwitch.Thumb>
+            {thumbLabel && (
+              <ChakraSwitch.ThumbIndicator fallback={thumbLabel?.off}>
+                {thumbLabel?.on}
+              </ChakraSwitch.ThumbIndicator>
+            )}
+          </ChakraSwitch.Thumb>
+          {trackLabel && (
+            <ChakraSwitch.Indicator fallback={trackLabel.off}>
+              {trackLabel.on}
+            </ChakraSwitch.Indicator>
+          )}
+        </ChakraSwitch.Control>
+        {children != null && (
+          <ChakraSwitch.Label>{children}</ChakraSwitch.Label>
+        )}
+      </ChakraSwitch.Root>
+    );
+  }
+);