Add onPointerDownOutside override to all modals

demo/pages/modal/acceptBid.tsx

@@ -186,6 +186,9 @@ const AcceptBidPage: NextPage = () => {
         onClose={() => {
           console.log('AcceptBidModal Closed')
         }}
+        onPointerDownOutside={(e) => {
+          console.log('onPointerDownOutside')
+        }}
       />
       <ChainSwitcher /> 
       <ThemeSwitcher />

demo/pages/modal/bid.tsx

@@ -233,6 +233,9 @@ const BidPage: NextPage = () => {
         onViewOffers={() => {
           console.log('On View offers clicked')
         }}
+        onPointerDownOutside={(e) => {
+          console.log('onPointerDownOutside')
+        }}
       />
       <ChainSwitcher />
       <ThemeSwitcher />

demo/pages/modal/buy.tsx

@@ -165,6 +165,9 @@ const BuyPage: NextPage = () => {
         onClose={() => {
           console.log('BuyModal Closed')
         }}
+        onPointerDownOutside={(e) => {
+          console.log('onPointerDownOutside')
+        }}
       />
       <ThemeSwitcher />
       <ChainSwitcher />

demo/pages/modal/cancelBid.tsx

@@ -102,6 +102,9 @@ const CancelBidPage: NextPage = () => {
         onClose={() => {
           console.log('CancelBidModal Closed')
         }}
+        onPointerDownOutside={(e) => {
+          console.log('onPointerDownOutside')
+        }}
       />
       <ChainSwitcher />
       <ThemeSwitcher />

demo/pages/modal/cancelListing.tsx

@@ -102,6 +102,9 @@ const CancelListingPage: NextPage = () => {
         onClose={() => {
           console.log('CancelListingModal Closed')
         }}
+        onPointerDownOutside={(e) => {
+          console.log('onPointerDownOutside')
+        }}
       />
       <ChainSwitcher />
       <ThemeSwitcher />

demo/pages/modal/collect.tsx

@@ -194,6 +194,9 @@ const CollectPage: NextPage = () => {
           console.log('CollectModal Closed')
         }}
         onGoToToken={(data) => console.log('Go to Token', data)}
+        onPointerDownOutside={(e) => {
+          console.log('onPointerDownOutside')
+        }}
       />
       <ChainSwitcher/>
       <ThemeSwitcher />

demo/pages/modal/editBid.tsx

@@ -118,6 +118,9 @@ const EditBidPage: NextPage = () => {
         onClose={() => {
           console.log('EditBidModal Closed')
         }}
+        onPointerDownOutside={(e) => {
+          console.log('onPointerDownOutside')
+        }}
       />
       <ChainSwitcher />
       <ThemeSwitcher />

demo/pages/modal/editListing.tsx

@@ -126,6 +126,9 @@ const EditListingPage: NextPage = () => {
         onClose={() => {
           console.log('EditListingModal Closed')
         }}
+        onPointerDownOutside={(e) => {
+          console.log('onPointerDownOutside')
+        }}
       />
       <ChainSwitcher />
       <ThemeSwitcher />

demo/pages/modal/list.tsx

@@ -205,6 +205,9 @@ const Index: NextPage = () => {
         onClose={() => {
           console.log('ListModal Closed')
         }}
+        onPointerDownOutside={(e) => {
+          console.log('onPointerDownOutside')
+        }}
       />
       <ThemeSwitcher />
       <ChainSwitcher />

packages/ui/src/modal/acceptBid/AcceptBidModal.tsx

@@ -1,4 +1,5 @@
 import React, {
+  ComponentPropsWithoutRef,
   Dispatch,
   ReactElement,
   SetStateAction,
@@ -45,6 +46,7 @@ import { truncateAddress } from '../../lib/truncate'
 import { WalletClient } from 'viem'
 import { ReservoirWallet, SellPath } from '@reservoir0x/reservoir-sdk'
 import getChainBlockExplorerUrl from '../../lib/getChainBlockExplorerUrl'
+import { Dialog } from '../../primitives/Dialog'
 
 type BidData = {
   tokens?: EnhancedAcceptBidTokenData[]
@@ -78,6 +80,9 @@ type Props = Pick<Parameters<typeof Modal>['0'], 'trigger'> & {
   ) => void
   onBidAcceptError?: (error: Error, data: BidData) => void
   onCurrentStepUpdate?: (data: AcceptBidStepData) => void
+  onPointerDownOutside?: ComponentPropsWithoutRef<
+    typeof Dialog
+  >['onPointerDownOutside']
 }
 
 export function AcceptBidModal({
@@ -94,6 +99,7 @@ export function AcceptBidModal({
   onClose,
   onBidAcceptError,
   onCurrentStepUpdate,
+  onPointerDownOutside,
 }: Props): ReactElement {
   const [open, setOpen] = useFallbackState(
     openState ? openState[0] : false,
@@ -201,6 +207,11 @@ export function AcceptBidModal({
               setOpen(open)
             }}
             loading={loading}
+            onPointerDownOutside={(e) => {
+              if (onPointerDownOutside) {
+                onPointerDownOutside(e)
+              }
+            }}
           >
             {acceptBidStep === AcceptBidStep.Unavailable && !loading && (
               <Flex

packages/ui/src/modal/bid/BidModal.tsx

@@ -6,6 +6,7 @@ import React, {
   Dispatch,
   SetStateAction,
   useContext,
+  ComponentPropsWithoutRef,
 } from 'react'
 import { styled } from '../../../stitches.config'
 import {
@@ -58,6 +59,7 @@ import { CSS } from '@stitches/react'
 import QuantitySelector from '../QuantitySelector'
 import { ReservoirWallet } from '@reservoir0x/reservoir-sdk'
 import { WalletClient } from 'viem'
+import { Dialog } from '../../primitives/Dialog'
 
 type BidCallbackData = {
   tokenId?: string
@@ -102,6 +104,9 @@ type Props = Pick<Parameters<typeof Modal>['0'], 'trigger'> & {
   ) => void
   onBidComplete?: (data: any) => void
   onBidError?: (error: Error, data: any) => void
+  onPointerDownOutside?: ComponentPropsWithoutRef<
+    typeof Dialog
+  >['onPointerDownOutside']
 }
 
 function titleForStep(step: BidStep, copy: typeof ModalCopy) {
@@ -160,6 +165,7 @@ export function BidModal({
   onClose,
   onBidComplete,
   onBidError,
+  onPointerDownOutside,
 }: Props): ReactElement {
   const copy: typeof ModalCopy = { ...ModalCopy, ...copyOverrides }
   const [open, setOpen] = useFallbackState(
@@ -386,6 +392,9 @@ export function BidModal({
               ) {
                 e.preventDefault()
               }
+              if (onPointerDownOutside) {
+                onPointerDownOutside(e)
+              }
             }}
             onFocusCapture={(e) => {
               e.stopPropagation()

packages/ui/src/modal/buy/BuyModal.tsx

@@ -1,4 +1,5 @@
 import React, {
+  ComponentPropsWithoutRef,
   Dispatch,
   ReactElement,
   SetStateAction,
@@ -38,6 +39,7 @@ import { truncateAddress } from '../../lib/truncate'
 import { SelectPaymentToken } from '../SelectPaymentToken'
 import { WalletClient } from 'viem'
 import getChainBlockExplorerUrl from '../../lib/getChainBlockExplorerUrl'
+import { Dialog } from '../../primitives/Dialog'
 
 type PurchaseData = {
   tokenId?: string
@@ -83,6 +85,9 @@ type Props = Pick<Parameters<typeof Modal>['0'], 'trigger'> & {
     stepData: BuyModalStepData | null,
     currentStep: BuyStep
   ) => void
+  onPointerDownOutside?: ComponentPropsWithoutRef<
+    typeof Dialog
+  >['onPointerDownOutside']
 }
 
 function titleForStep(
@@ -122,6 +127,7 @@ export function BuyModal({
   onPurchaseError,
   onClose,
   onGoToToken,
+  onPointerDownOutside,
 }: Props): ReactElement {
   const copy: typeof ModalCopy = { ...ModalCopy, ...copyOverrides }
   const [open, setOpen] = useFallbackState(
@@ -249,6 +255,9 @@ export function BuyModal({
               if (!clickedDismissableLayer && dismissableLayers.length > 0) {
                 e.preventDefault()
               }
+              if (onPointerDownOutside) {
+                onPointerDownOutside(e)
+              }
             }}
             onOpenChange={(open) => {
               if (!open && onClose) {

packages/ui/src/modal/cancelBid/CancelBidModal.tsx

@@ -1,5 +1,11 @@
 import { useFallbackState, useReservoirClient, useTimeSince } from '../../hooks'
-import React, { ReactElement, Dispatch, SetStateAction, useEffect } from 'react'
+import React, {
+  ReactElement,
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  ComponentPropsWithoutRef,
+} from 'react'
 import {
   Flex,
   Text,
@@ -19,6 +25,7 @@ import { truncateAddress } from '../../lib/truncate'
 import { ReservoirWallet } from '@reservoir0x/reservoir-sdk'
 import { WalletClient } from 'viem'
 import getChainBlockExplorerUrl from '../../lib/getChainBlockExplorerUrl'
+import { Dialog } from '../../primitives/Dialog'
 
 const ModalCopy = {
   title: 'Cancel Offer',
@@ -38,6 +45,9 @@ type Props = Pick<Parameters<typeof Modal>['0'], 'trigger'> & {
   onClose?: (data: any, currentStep: CancelStep) => void
   onCancelComplete?: (data: any) => void
   onCancelError?: (error: Error, data: any) => void
+  onPointerDownOutside?: ComponentPropsWithoutRef<
+    typeof Dialog
+  >['onPointerDownOutside']
 }
 
 export function CancelBidModal({
@@ -51,6 +61,7 @@ export function CancelBidModal({
   onClose,
   onCancelComplete,
   onCancelError,
+  onPointerDownOutside,
 }: Props): ReactElement {
   const copy: typeof ModalCopy = { ...ModalCopy, ...copyOverrides }
   const [open, setOpen] = useFallbackState(
@@ -135,6 +146,11 @@ export function CancelBidModal({
               setOpen(open)
             }}
             loading={loading}
+            onPointerDownOutside={(e) => {
+              if (onPointerDownOutside) {
+                onPointerDownOutside(e)
+              }
+            }}
           >
             {!isBidAvailable && !loading && (
               <Flex

packages/ui/src/modal/cancelListing/CancelListingModal.tsx

@@ -1,5 +1,11 @@
 import { useFallbackState, useReservoirClient, useTimeSince } from '../../hooks'
-import React, { ReactElement, Dispatch, SetStateAction, useEffect } from 'react'
+import React, {
+  ReactElement,
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  ComponentPropsWithoutRef,
+} from 'react'
 import {
   Flex,
   Text,
@@ -22,6 +28,7 @@ import { truncateAddress } from '../../lib/truncate'
 import { WalletClient } from 'viem'
 import { ReservoirWallet } from '@reservoir0x/reservoir-sdk'
 import getChainBlockExplorerUrl from '../../lib/getChainBlockExplorerUrl'
+import { Dialog } from '../../primitives/Dialog'
 
 const ModalCopy = {
   title: 'Cancel Listing',
@@ -41,6 +48,9 @@ type Props = Pick<Parameters<typeof Modal>['0'], 'trigger'> & {
   onClose?: (data: any, currentStep: CancelStep) => void
   onCancelComplete?: (data: any) => void
   onCancelError?: (error: Error, data: any) => void
+  onPointerDownOutside?: ComponentPropsWithoutRef<
+    typeof Dialog
+  >['onPointerDownOutside']
 }
 
 export function CancelListingModal({
@@ -54,6 +64,7 @@ export function CancelListingModal({
   onClose,
   onCancelComplete,
   onCancelError,
+  onPointerDownOutside,
 }: Props): ReactElement {
   const copy: typeof ModalCopy = { ...ModalCopy, ...copyOverrides }
   const [open, setOpen] = useFallbackState(
@@ -137,6 +148,11 @@ export function CancelListingModal({
               setOpen(open)
             }}
             loading={loading}
+            onPointerDownOutside={(e) => {
+              if (onPointerDownOutside) {
+                onPointerDownOutside(e)
+              }
+            }}
           >
             {!isListingAvailable && !loading && (
               <Flex

packages/ui/src/modal/collect/CollectModal.tsx

@@ -1,4 +1,10 @@
-import React, { Dispatch, ReactElement, SetStateAction, useEffect } from 'react'
+import React, {
+  ComponentPropsWithoutRef,
+  Dispatch,
+  ReactElement,
+  SetStateAction,
+  useEffect,
+} from 'react'
 import { useFallbackState, useReservoirClient } from '../../hooks'
 import { Modal } from '../Modal'
 import {
@@ -13,6 +19,7 @@ import { SweepContent } from './sweep/SweepContent'
 import { Flex, Text } from '../../primitives'
 import { ReservoirWallet } from '@reservoir0x/reservoir-sdk'
 import { WalletClient } from 'viem'
+import { Dialog } from '../../primitives/Dialog'
 
 export type CollectCallbackData = {
   collectionId?: string
@@ -58,6 +65,9 @@ type Props = Pick<Parameters<typeof Modal>['0'], 'trigger'> & {
   onCollectError?: (error: Error, data: CollectCallbackData) => void
   onClose?: (data: CollectCallbackData, currentStep: CollectStep) => void
   onGoToToken?: (data: CollectCallbackData) => any
+  onPointerDownOutside?: ComponentPropsWithoutRef<
+    typeof Dialog
+  >['onPointerDownOutside']
 }
 
 export function CollectModal({
@@ -73,12 +83,13 @@ export function CollectModal({
   copyOverrides,
   walletClient,
   usePermit,
+  defaultQuantity,
   onCollectComplete,
   onCollectError,
   onClose,
   onConnectWallet,
   onGoToToken,
-  defaultQuantity,
+  onPointerDownOutside,
 }: Props): ReactElement {
   const copy: typeof CollectModalCopy = {
     ...CollectModalCopy,
@@ -164,6 +175,9 @@ export function CollectModal({
               if (!clickedDismissableLayer && dismissableLayers.length > 0) {
                 e.preventDefault()
               }
+              if (onPointerDownOutside) {
+                onPointerDownOutside(e)
+              }
             }}
             onOpenChange={(open) => {
               if (!open && onClose) {