Add hideOnClose flag in <DialogTrigger /> (#274)

Author: MrFlashAccount

.changeset/few-garlics-flash.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+added ability to specify the way how we'd like to hide a dialog: by unmounting or by hiding in css

package.json

@@ -33,7 +33,7 @@
     "eslint:errors": "npm run eslint -- --quiet",
     "lint": "npm-run-all -p eslint prettier",
     "fix": "npm-run-all -p eslint:fix prettier:fix",
-    "storybook": "STORYBOOK_MODE=stories start-storybook -p 6006",
+    "storybook": "STORYBOOK_MODE=stories start-storybook -p 6060",
     "build-storybook": "STORYBOOK_MODE=stories build-storybook",
     "build-docs": "STORYBOOK_MODE=docs build-storybook --docs -o storybook-docs",
     "size": "size-limit",
@@ -114,6 +114,7 @@
     "clsx": "^1.1.1",
     "email-validator": "^2.0.4",
     "prismjs": "^1.25.0",
+    "react-focus-lock": "^2.9.3",
     "react-is": "^17.0.0",
     "react-keyed-flatten-children": "1.3.0",
     "react-transition-group": "^4.4.2",

src/components/overlays/AlertDialog/AlertDialog.stories.tsx

@@ -7,7 +7,6 @@ import { baseProps } from '../../../stories/lists/baseProps';
 import { DialogTrigger } from '../Dialog/DialogTrigger';
 import { Button } from '../../actions';
 import { Paragraph } from '../../content/Paragraph';
-import { wait } from '../../../test';
 
 import { DialogProps } from './types';
 import { useAlertDialogAPI } from './AlertDialogApiProvider';
@@ -46,9 +45,9 @@ const Template: Story<CubeAlertDialogProps> = (args) => {
 export const Default = Template.bind({});
 Default.args = {};
 Default.play = async ({ canvasElement }) => {
-  const { getByRole } = within(canvasElement);
-  await userEvent.click(getByRole('button'));
-  await expect(getByRole('alertdialog')).toBeInTheDocument();
+  const { findByRole } = within(canvasElement);
+  await userEvent.click(await findByRole('button'));
+  await expect(await findByRole('alertdialog')).toBeInTheDocument();
 };
 
 export const UsingApi: Story<DialogProps> = (args) => {
@@ -69,10 +68,10 @@ export const UsingApi: Story<DialogProps> = (args) => {
   );
 };
 UsingApi.play = async ({ canvasElement }) => {
-  const { getByRole } = within(canvasElement);
-  await userEvent.click(getByRole('button'));
+  const { findByRole } = within(canvasElement);
+  await userEvent.click(await findByRole('button'));
 
-  await expect(getByRole('alertdialog')).toBeInTheDocument();
+  await expect(await findByRole('alertdialog')).toBeInTheDocument();
 };
 
 export const UsingApiWithCancel: Story<DialogProps> = (args) => {
@@ -107,11 +106,15 @@ export const UsingApiWithCancel: Story<DialogProps> = (args) => {
   );
 };
 UsingApiWithCancel.play = async ({ canvasElement }) => {
-  const { getByRole, getByTestId, queryByRole } = within(canvasElement);
+  const { getByRole, getByTestId, queryByRole, findByRole } =
+    within(canvasElement);
 
   await userEvent.click(getByRole('button'));
-  await expect(queryByRole('alertdialog')).toBeInTheDocument();
+
+  const dialog = await findByRole('alertdialog');
+
+  await expect(dialog).toBeInTheDocument();
   await userEvent.click(getByTestId('CancelToken'));
-  await wait(300);
+
   await expect(queryByRole('alertdialog')).not.toBeInTheDocument();
 };

src/components/overlays/Dialog/Dialog.tsx

@@ -1,11 +1,12 @@
+import styled from 'styled-components';
 import { useDOMRef } from '@react-spectrum/utils';
 import { DismissButton } from '@react-aria/overlays';
-import { FocusScope } from '@react-aria/focus';
 import { forwardRef, ReactElement } from 'react';
 import { useDialog } from '@react-aria/dialog';
 import { useMessageFormatter } from '@react-aria/i18n';
 import { CloseOutlined } from '@ant-design/icons';
 import { DOMRef } from '@react-types/shared';
+import FocusLock from 'react-focus-lock';
 
 import {
   BASE_STYLES,
@@ -21,6 +22,7 @@ import {
 } from '../../../tasty';
 import { mergeProps, SlotProvider } from '../../../utils/react';
 import { Button } from '../../actions';
+import { useOpenTransitionContext } from '../Modal/OpenTransition';
 
 import { useDialogContext } from './context';
 
@@ -83,6 +85,10 @@ const DialogElement = tasty({
   },
 });
 
+const StyledFocusLock = styled(FocusLock)`
+  display: contents;
+`;
+
 const CLOSE_BUTTON_STYLES: Styles = {
   display: 'flex',
   position: 'absolute',
@@ -135,6 +141,21 @@ export interface CubeDialogProps
 export const Dialog = forwardRef(function Dialog(
   props: CubeDialogProps,
   ref: DOMRef<HTMLDivElement>,
+) {
+  const transitionContext = useOpenTransitionContext();
+
+  const isEntered = transitionContext?.transitionState === 'entered';
+
+  return (
+    <StyledFocusLock returnFocus disabled={!isEntered}>
+      <DialogContent key="content" {...props} ref={ref} />
+    </StyledFocusLock>
+  );
+});
+
+const DialogContent = forwardRef(function DialogContent(
+  props: CubeDialogProps,
+  ref: DOMRef<HTMLDivElement>,
 ) {
   let { type = 'modal', ...contextProps } = useDialogContext();
 
@@ -161,8 +182,6 @@ export const Dialog = forwardRef(function Dialog(
     domRef,
   );
 
-  // console.log(dialogProps);
-
   // If rendered in a popover or tray there won't be a visible dismiss button,
   // so we render a hidden one for screen readers.
   let dismissButton;
@@ -217,35 +236,33 @@ export const Dialog = forwardRef(function Dialog(
   };
 
   return (
-    <FocusScope contain restoreFocus>
-      <DialogElement
-        ref={domRef}
-        data-id="Dialog"
-        data-qa={qa || 'Dialog'}
-        styles={styles}
-        as="section"
-        {...dialogProps}
-        mods={{ dismissable: isDismissable }}
-        style={{ '--dialog-size': `${sizePxMap[size] || 288}px` }}
-        data-type={type}
-        data-size={size}
-      >
-        {dismissButton}
-
-        <SlotProvider slots={slots}>
-          {isDismissable && (
-            <Button
-              qa="ModalCloseButton"
-              type="neutral"
-              styles={CLOSE_BUTTON_STYLES}
-              icon={closeIcon || <CloseOutlined />}
-              label={formatMessage('dismiss')}
-              onPress={() => onDismiss && onDismiss()}
-            />
-          )}
-          {children}
-        </SlotProvider>
-      </DialogElement>
-    </FocusScope>
+    <DialogElement
+      ref={domRef}
+      data-id="Dialog"
+      data-qa={qa || 'Dialog'}
+      styles={styles}
+      as="section"
+      {...dialogProps}
+      mods={{ dismissable: isDismissable }}
+      style={{ '--dialog-size': `${sizePxMap[size] || 288}px` }}
+      data-type={type}
+      data-size={size}
+    >
+      {dismissButton}
+
+      <SlotProvider slots={slots}>
+        {isDismissable && (
+          <Button
+            qa="ModalCloseButton"
+            type="neutral"
+            styles={CLOSE_BUTTON_STYLES}
+            icon={closeIcon || <CloseOutlined />}
+            label={formatMessage('dismiss')}
+            onPress={() => onDismiss && onDismiss()}
+          />
+        )}
+        {children}
+      </SlotProvider>
+    </DialogElement>
   );
 });

src/components/overlays/Dialog/DialogTrigger.tsx

@@ -4,14 +4,14 @@ import { PressResponder } from '@react-aria/interactions';
 import { useMediaQuery } from '@react-spectrum/utils';
 import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
 
-import { Modal, Popover, Tray } from '../Modal';
+import { Modal, Popover, Tray, WithCloseBehavior } from '../Modal';
 import { Styles } from '../../../tasty';
 
 import { DialogContext } from './context';
 
 export type CubeDialogClose = (close: () => void) => ReactElement;
 
-export interface CubeDialogTriggerProps {
+export interface CubeDialogTriggerProps extends WithCloseBehavior {
   /** The Dialog and its trigger element. See the DialogTrigger [Content section](#content) for more information on what to provide as children. */
   children: [ReactElement, CubeDialogClose | ReactElement];
   /**
@@ -55,6 +55,7 @@ function DialogTrigger(props) {
     isKeyboardDismissDisabled,
     styles,
     mobileViewport = 700,
+    hideOnClose,
     ...positionProps
   } = props;
 
@@ -109,6 +110,7 @@ function DialogTrigger(props) {
     return (
       <PopoverTrigger
         {...positionProps}
+        hideOnClose={hideOnClose}
         state={state}
         targetRef={targetRef}
         trigger={trigger}
@@ -128,6 +130,7 @@ function DialogTrigger(props) {
       case 'modal':
         return (
           <Modal
+            hideOnClose={hideOnClose}
             isOpen={state.isOpen}
             isDismissable={isDismissable}
             type={type}
@@ -143,6 +146,7 @@ function DialogTrigger(props) {
       case 'tray':
         return (
           <Tray
+            hideOnClose={hideOnClose}
             isOpen={state.isOpen}
             isKeyboardDismissDisabled={isKeyboardDismissDisabled}
             styles={styles}
@@ -183,6 +187,7 @@ function PopoverTrigger(allProps) {
     hideArrow,
     onClose,
     isKeyboardDismissDisabled,
+    hideOnClose,
     ...props
   } = allProps;
 
@@ -193,6 +198,7 @@ function PopoverTrigger(allProps) {
     overlayProps: popoverProps,
     placement,
     arrowProps,
+    updatePosition,
   } = useOverlayPosition({
     targetRef: targetRef || triggerRef,
     overlayRef: overlayRef,
@@ -218,12 +224,14 @@ function PopoverTrigger(allProps) {
   let overlay = (
     <Popover
       ref={overlayRef}
+      hideOnClose={hideOnClose}
       isOpen={state.isOpen}
       style={popoverProps.style}
       placement={placement}
       arrowProps={arrowProps}
       isKeyboardDismissDisabled={isKeyboardDismissDisabled}
       hideArrow={hideArrow}
+      updatePosition={updatePosition}
       onClose={onClose}
     >
       {typeof content === 'function' ? content(state.close) : content}