From ed673f50779b0037010649cbaec0e86487c95276 Mon Sep 17 00:00:00 2001
From: TheSisb <shadiisber@gmail.com>
Date: Mon, 2 Oct 2023 16:47:45 -0500
Subject: [PATCH] fix(non-modal-dialog-primitive): always use portal

---
 .changeset/little-llamas-swim.md              |  6 ++++++
 .../primitives/non-modal-dialog/src/index.tsx | 20 ++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/little-llamas-swim.md

diff --git a/.changeset/little-llamas-swim.md b/.changeset/little-llamas-swim.md
new file mode 100644
index 0000000000..c2a34bdd1f
--- /dev/null
+++ b/.changeset/little-llamas-swim.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/core": patch
+"@twilio-paste/non-modal-dialog-primitive": patch
+---
+
+[Non-modal Dialog Primitive] Fix to always use a portal when rendering, even when using the state hook.
diff --git a/packages/paste-core/primitives/non-modal-dialog/src/index.tsx b/packages/paste-core/primitives/non-modal-dialog/src/index.tsx
index 694cda4497..492c979fc2 100644
--- a/packages/paste-core/primitives/non-modal-dialog/src/index.tsx
+++ b/packages/paste-core/primitives/non-modal-dialog/src/index.tsx
@@ -1,14 +1,28 @@
+import {
+  type PopoverInitialState as NonModalDialogPrimitivePopoverInitialState,
+  type PopoverStateReturn as NonModalDialogPrimitiveStateReturn,
+  usePopoverState as _usePopoverState,
+} from "@twilio-paste/reakit-library";
+
+/*
+ * Fixes issue where the popover would not open in a portal
+ * when using the state hook directly
+ */
+export const useNonModalDialogPrimitiveState = (
+  options: NonModalDialogPrimitivePopoverInitialState,
+): NonModalDialogPrimitiveStateReturn => {
+  return _usePopoverState({ modal: true, ...options });
+};
+
 export {
-  usePopoverState as useNonModalDialogPrimitiveState,
   Popover as NonModalDialogPrimitive,
   PopoverDisclosure as NonModalDialogDisclosurePrimitive,
   PopoverArrow as NonModalDialogArrowPrimitive,
 } from "@twilio-paste/reakit-library";
 
+export type {NonModalDialogPrimitivePopoverInitialState, NonModalDialogPrimitiveStateReturn};
 export type {
   PopoverState as NonModalDialogPrimitiveState,
-  PopoverStateReturn as NonModalDialogPrimitiveStateReturn,
-  PopoverInitialState as NonModalDialogPrimitivePopoverInitialState,
   PopoverProps as NonModalDialogPrimitiveProps,
   PopoverDisclosureProps as NonModalDialogDisclosurePrimitiveProps,
   PopoverArrowProps as NonModalDialogArrowPrimitiveProps,