Add shouldCloseOnInteractOutside in <DialogTrigger /> (#292)

Author: MrFlashAccount

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