Add shouldCloseOnInteractOutside in <DialogTrigger />

.changeset/late-fans-tap.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Added new prop in `<DialogTrigger />` - `shouldCloseOnInteractOutside`, which gives you a chance to filter out interaction with elements that should not dismiss the overlay.

src/components/overlays/Dialog/DialogTrigger.tsx

@@ -41,6 +41,7 @@ export interface CubeDialogTriggerProps extends WithCloseBehavior {
   mobileViewport?: number;
   /** The style map for the overlay **/
   styles?: Styles;
+  shouldCloseOnInteractOutside?: (element: Element) => boolean;
 }
 
 function DialogTrigger(props) {
@@ -56,6 +57,7 @@ function DialogTrigger(props) {
     styles,
     mobileViewport = 700,
     hideOnClose,
+    shouldCloseOnInteractOutside,
     ...positionProps
   } = props;
 
@@ -117,6 +119,7 @@ function DialogTrigger(props) {
         content={content}
         isKeyboardDismissDisabled={isKeyboardDismissDisabled}
         hideArrow={hideArrow}
+        shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
         onClose={onClose}
       />
     );
@@ -136,6 +139,7 @@ function DialogTrigger(props) {
             type={type}
             isKeyboardDismissDisabled={isKeyboardDismissDisabled}
             styles={styles}
+            shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
             onClose={onClose}
             onExiting={onExiting}
             onExited={onExited}
@@ -188,6 +192,7 @@ function PopoverTrigger(allProps) {
     onClose,
     isKeyboardDismissDisabled,
     hideOnClose,
+    shouldCloseOnInteractOutside,
     ...props
   } = allProps;
 
@@ -232,6 +237,7 @@ function PopoverTrigger(allProps) {
       isKeyboardDismissDisabled={isKeyboardDismissDisabled}
       hideArrow={hideArrow}
       updatePosition={updatePosition}
+      shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
       onClose={onClose}
     >
       {typeof content === 'function' ? content(state.close) : content}

src/components/overlays/Dialog/stories/Dialog.stories.tsx

@@ -1,6 +1,8 @@
 import { within, userEvent, waitFor } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 import { Story } from '@storybook/react';
+import { useRef, useState } from 'react';
+import { FocusableRefValue } from '@react-types/shared';
 
 import { CubeDialogProps } from '../Dialog';
 import { CubeDialogTriggerProps } from '../DialogTrigger';
@@ -14,6 +16,7 @@ import {
   Header,
   Paragraph,
   Title,
+  Space,
 } from '../../../../index';
 import { baseProps } from '../../../../stories/lists/baseProps';
 
@@ -215,3 +218,54 @@ CloseOnOutsideClick.play = async (context) => {
 
   expect(dialog).not.toBeInTheDocument();
 };
+
+export const DoNotCloseOnClickAtParticularElement: typeof Template = () => {
+  const btnRef = useRef<FocusableRefValue<HTMLButtonElement>>(null);
+  const [itWorks, setItWorks] = useState(false);
+
+  return (
+    <>
+      <Space gap="2x">
+        <DialogTrigger
+          type="popover"
+          shouldCloseOnInteractOutside={(e) =>
+            btnRef.current?.UNSAFE_getDOMNode() !== e
+          }
+        >
+          <Button size="small">Open modal</Button>
+
+          <Dialog size="small">
+            <Header>
+              <Title>Modal title</Title>
+            </Header>
+            <Content>
+              <Paragraph>Test content</Paragraph>
+              <Paragraph>Test content</Paragraph>
+            </Content>
+          </Dialog>
+        </DialogTrigger>
+
+        <Button ref={btnRef} size="small" onPress={() => setItWorks(true)}>
+          {itWorks ? 'It works!' : 'Click me!'}
+        </Button>
+      </Space>
+    </>
+  );
+};
+DoNotCloseOnClickAtParticularElement.play = async (context) => {
+  if (context.viewMode === 'docs') return;
+
+  const { findByRole } = within(context.canvasElement);
+
+  const trigger = await findByRole('button', { name: 'Open modal' });
+  const button = await findByRole('button', { name: 'Click me!' });
+
+  await userEvent.click(trigger);
+
+  await expect(await findByRole('dialog')).toBeInTheDocument();
+
+  await userEvent.click(button);
+
+  await expect(await findByRole('dialog')).toBeInTheDocument();
+  await expect(button).toHaveTextContent('It works!');
+};

src/components/overlays/Modal/Modal.tsx

@@ -77,13 +77,14 @@ export interface CubeModalProps
   onClose?: (action?: string) => void;
   type?: 'modal' | 'fullscreen' | 'fullscreenTakeover';
   styles?: Styles;
+  shouldCloseOnInteractOutside?: (element: Element) => boolean;
 }
 
 function Modal(props: CubeModalProps, ref) {
   let { qa, children, onClose, type, styles, ...otherProps } = props;
   let domRef = useDOMRef(ref);
 
-  let { overlayProps, underlayProps } = useOverlay(props, domRef);
+  let { overlayProps, underlayProps } = useOverlay({ ...props }, domRef);
 
   return (
     <Overlay {...otherProps}>

src/components/overlays/Modal/Popover.tsx

@@ -52,6 +52,7 @@ export interface CubePopoverProps
   isNonModal?: boolean;
   isDismissable?: boolean;
   updatePosition?: () => void;
+  shouldCloseOnInteractOutside?: (element: Element) => boolean;
 }
 
 function Popover(props: CubePopoverProps, ref) {
@@ -68,6 +69,7 @@ function Popover(props: CubePopoverProps, ref) {
     isNonModal,
     isDismissable = true,
     updatePosition,
+    shouldCloseOnInteractOutside,
     ...otherProps
   } = props;
 
@@ -85,6 +87,7 @@ function Popover(props: CubePopoverProps, ref) {
         isNonModal={isNonModal}
         isDismissable={isDismissable}
         updatePosition={updatePosition}
+        shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
         onClose={onClose}
       >
         {children}