fix(Dialog): remove underlay from type panel dialogs (#567)

tenphi · web-flow · commit c9f76f5c1400 · 2025-01-13T18:42:53.000+01:00
diff --git a/.changeset/eleven-foxes-shake.md b/.changeset/eleven-foxes-shake.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Remove underlay from dialogs with type `panel`.
diff --git a/.changeset/metal-worms-worry.md b/.changeset/metal-worms-worry.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add ReturnIcon component.
diff --git a/src/components/fields/TextArea/TextArea.stories.tsx b/src/components/fields/TextArea/TextArea.stories.tsx
@@ -38,3 +38,6 @@ WithIcon.args = { icon: true };
 
 export const Password = Template.bind({});
 Password.args = { icon: true, type: 'password', defaultValue: 'hidden value' };
+
+export const AutoSize = Template.bind({});
+AutoSize.args = { autoSize: true, defaultValue: '1\n2\n3\n4', rows: 1 };
diff --git a/src/components/fields/TextArea/TextArea.tsx b/src/components/fields/TextArea/TextArea.tsx
@@ -70,7 +70,7 @@ function TextArea(props: WithNullableValue<CubeTextAreaProps>, ref) {
     if (inputRef.current) {
       onHeightChange();
     }
-  }, [onHeightChange, inputValue, inputRef]);
+  }, [inputValue, inputRef.current]);
 
   let { labelProps, inputProps } = useTextField(
     {
diff --git a/src/components/overlays/Dialog/Dialog.tsx b/src/components/overlays/Dialog/Dialog.tsx
@@ -1,10 +1,8 @@
-import styled from 'styled-components';
 import { useDOMRef } from '@react-spectrum/utils';
-import { DismissButton } from 'react-aria';
-import { forwardRef, ReactElement } from 'react';
+import { DismissButton, FocusScope, useFocusManager } from 'react-aria';
+import { forwardRef, ReactElement, useEffect, useMemo, useState } from 'react';
 import { useDialog, useMessageFormatter, AriaDialogProps } from 'react-aria';
 import { DOMRef } from '@react-types/shared';
-import FocusLock from 'react-focus-lock';
 
 import {
   BASE_STYLES,
@@ -31,35 +29,40 @@ const DialogElement = tasty({
   as: 'section',
   styles: {
     pointerEvents: 'auto',
-    position: 'relative',
+    position: {
+      '': 'relative',
+      '[data-type="panel"]': 'absolute',
+    },
     display: 'flex',
     placeItems: 'stretch',
     placeContent: 'stretch',
     width: {
       '': '288px @dialog-size 90vw',
       '[data-type="fullscreen"]': '90vw 90vw',
       '[data-type="fullscreenTakeover"]': '100vw 100vw',
-      '[data-type="panel"]': '100vw 100vw',
+      '[data-type="panel"]': 'auto',
     },
     height: {
       '': 'max 90vh',
       '[data-type="fullscreenTakeover"] | [data-type="panel"]': 'max 100vh',
+      '[data-type="panel"]': 'auto',
     },
     gap: 0,
     flow: 'column',
     radius: {
       '': '(@large-radius + 1bw)',
       '[data-type="tray"]': '(@large-radius + 1bw) top',
-      '[data-type="fullscreenTakeover"] | [data-type="panel"]': '0r',
+      '[data-type="fullscreenTakeover"]': '0r',
     },
     fill: '#white',
     shadow: {
-      '': '0 20px 30px #shadow',
-      '[data-type="popover"]': '0px 4px 16px #shadow',
+      '': '0 2x 4x #shadow',
+      '[data-type="popover"] | [data-type="panel"]': '0px .5x 2x #shadow',
     },
     top: {
       '': false,
       '[data-type="modal"]': '((50vh - 50%) / -3)',
+      '[data-type="panel"]': 'auto',
     },
     placeSelf: 'stretch',
     '@dialog-heading-padding-v': {
@@ -82,10 +85,6 @@ const DialogElement = tasty({
   },
 });
 
-const StyledFocusLock = styled(FocusLock)`
-  display: contents;
-`;
-
 const CLOSE_BUTTON_STYLES: Styles = {
   display: 'flex',
   position: 'absolute',
@@ -144,10 +143,16 @@ export const Dialog = forwardRef(function Dialog(
 
   const isEntered = transitionContext?.transitionState === 'entered';
 
+  const context = useDialogContext();
+
+  const content = useMemo(() => {
+    return <DialogContent key="content" {...props} ref={ref} />;
+  }, [props, ref]);
+
   return (
-    <StyledFocusLock returnFocus disabled={!isEntered}>
-      <DialogContent key="content" {...props} ref={ref} />
-    </StyledFocusLock>
+    <FocusScope restoreFocus contain={isEntered && context.type !== 'panel'}>
+      {content}
+    </FocusScope>
   );
 });
 
@@ -168,6 +173,8 @@ const DialogContent = forwardRef(function DialogContent(
     ...otherProps
   } = props;
 
+  const [isCloseDisabled, setIsCloseDisabled] = useState(true);
+
   size = sizeMap[size.toUpperCase()] || size;
 
   const styles: Styles = extractStyles(otherProps, STYLES_LIST);
@@ -187,6 +194,20 @@ const DialogContent = forwardRef(function DialogContent(
     dismissButton = <DismissButton onDismiss={onDismiss} />;
   }
 
+  const focusManager = useFocusManager();
+
+  // Focus the first focusable element in the dialog when it opens
+  useEffect(() => {
+    if (contextProps.isOpen) {
+      setTimeout(() => {
+        focusManager?.focusFirst();
+        setIsCloseDisabled(false);
+      });
+    } else {
+      setIsCloseDisabled(true);
+    }
+  }, [contextProps.isOpen]);
+
   // let hasHeader = useHasChild('[data-id="Header"]', domRef);
   // let hasFooter = useHasChild('[data-id="Footer"]', domRef);
 
@@ -241,6 +262,7 @@ const DialogContent = forwardRef(function DialogContent(
       styles={styles}
       as="section"
       {...dialogProps}
+      tabIndex={undefined}
       mods={{ dismissable: isDismissable }}
       style={{ '--dialog-size': `${sizePxMap[size] || 288}px` }}
       data-type={type}
@@ -251,6 +273,7 @@ const DialogContent = forwardRef(function DialogContent(
       <SlotProvider slots={slots}>
         {isDismissable && (
           <Button
+            isDisabled={isCloseDisabled}
             qa="ModalCloseButton"
             type="neutral"
             styles={CLOSE_BUTTON_STYLES}
diff --git a/src/components/overlays/Dialog/DialogContainer.tsx b/src/components/overlays/Dialog/DialogContainer.tsx
@@ -19,7 +19,7 @@ export interface CubeDialogContainerProps {
    * The type of Dialog that should be rendered. See the visual options below for examples of each.
    * @default 'modal'
    */
-  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover';
+  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';
   /** Whether the Dialog is dismissible. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */
   isDismissable?: boolean;
   /**
@@ -64,6 +64,7 @@ export function DialogContainer(props: CubeDialogContainerProps) {
     type,
     onClose: onDismiss,
     isDismissable,
+    isOpen,
   };
 
   return (
diff --git a/src/components/overlays/Dialog/DialogTrigger.tsx b/src/components/overlays/Dialog/DialogTrigger.tsx
@@ -10,6 +10,7 @@ import {
   Placement,
 } from 'react-aria';
 
+import { useCombinedRefs } from '../../../utils/react/index';
 import { Modal, Popover, Tray, WithCloseBehavior } from '../Modal';
 import { Styles } from '../../../tasty';
 
@@ -191,6 +192,7 @@ function DialogTrigger(props: CubeDialogTriggerProps) {
       isDismissable={isDismissable}
       trigger={trigger}
       overlay={renderOverlay()}
+      hideOnClose={hideOnClose}
       onClose={onClose}
     />
   );
@@ -289,6 +291,8 @@ function PopoverTrigger(allProps) {
 }
 
 function DialogTriggerBase(props) {
+  const ref = useCombinedRefs(props.ref);
+
   let {
     type,
     state,
@@ -298,18 +302,30 @@ function DialogTriggerBase(props) {
     triggerProps = {},
     overlay,
     trigger,
+    hideOnClose,
   } = props;
 
   let context = {
     type,
     onClose,
     isDismissable,
+    isOpen: state.isOpen,
     ...dialogProps,
   };
 
+  // Restore focus manually when the dialog closes and has `hideOnClose` set to true
+  useEffect(() => {
+    if (!state.isOpen && hideOnClose) {
+      setTimeout(() => {
+        ref.current?.focus();
+      });
+    }
+  }, [state.isOpen, ref.current]);
+
   return (
     <Fragment>
       <PressResponder
+        ref={ref}
         {...triggerProps}
         isPressed={
           state.isOpen &&
diff --git a/src/components/overlays/Dialog/context.tsx b/src/components/overlays/Dialog/context.tsx
@@ -2,9 +2,16 @@ import { createContext, HTMLAttributes, useContext } from 'react';
 import invariant from 'tiny-invariant';
 
 export interface DialogContextValue extends HTMLAttributes<HTMLElement> {
-  type?: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover';
+  type?:
+    | 'modal'
+    | 'popover'
+    | 'tray'
+    | 'fullscreen'
+    | 'fullscreenTakeover'
+    | 'panel';
   isDismissable?: boolean;
   onClose?: (arg?: string) => void;
+  isOpen?: boolean;
 }
 
 export const DialogContext = createContext<DialogContextValue | null>({});
diff --git a/src/components/overlays/Dialog/stories/Dialog.stories.tsx b/src/components/overlays/Dialog/stories/Dialog.stories.tsx
@@ -34,12 +34,12 @@ export default {
 
 const Template: StoryFn<
   CubeDialogTriggerProps & { size: CubeDialogProps['size'] }
-> = ({ size, ...props }) => {
+> = ({ size, styles, ...props }) => {
   return (
     <DialogTrigger {...props}>
       <Button>Click me!</Button>
       {(close) => (
-        <Dialog size={size}>
+        <Dialog size={size} styles={styles}>
           <Header>
             <Title>Modal title</Title>
             <Text>Header</Text>
@@ -108,6 +108,13 @@ FullscreenTakeover.play = Default.play;
 export const Panel: typeof Template = Template.bind({});
 Panel.args = {
   type: 'panel',
+  styles: {
+    right: '2x',
+    bottom: '2x',
+    radius: true,
+    width: '320px',
+    height: '(100vh - 10x)',
+  },
 };
 Panel.play = Default.play;
 
@@ -191,21 +198,20 @@ CloseOnEsc.play = async (context) => {
 
   await userEvent.click(trigger);
 
+  await timeout(500);
+
   const dialog = await findByRole('dialog');
 
   await expect(dialog).toBeInTheDocument();
   await expect(dialog.contains(document.activeElement)).toBe(true);
 
-  await timeout(500);
-
   await userEvent.keyboard('{Escape}');
 
   await timeout(500);
 
   await expect(dialog).not.toBeInTheDocument();
 
-  // @TODO: fix this
-  // await waitFor(() => expect(document.activeElement).toBe(trigger));
+  await waitFor(() => expect(document.activeElement).toBe(trigger));
 };
 
 export const CloseOnEscCloseBehaviorHide: typeof Template = Template.bind({});
@@ -221,12 +227,12 @@ CloseOnEscCloseBehaviorHide.play = async (context) => {
 
   await userEvent.click(trigger);
 
+  await timeout(500);
+
   const dialog = await findByRole('dialog');
 
   await expect(dialog).toBeInTheDocument();
 
-  await timeout(500);
-
   await expect(dialog.contains(document.activeElement)).toBe(true);
 
   await userEvent.keyboard('{Escape}');
@@ -235,8 +241,6 @@ CloseOnEscCloseBehaviorHide.play = async (context) => {
 
   await expect(dialog).toBeInTheDocument();
 
-  await timeout(500);
-
   await waitFor(() => expect(document.activeElement).toBe(trigger));
 };
 
diff --git a/src/components/overlays/Modal/Modal.tsx b/src/components/overlays/Modal/Modal.tsx
@@ -49,16 +49,19 @@ const ModalElement = tasty({
       '[data-type="fullscreenTakeover"] | [data-type="panel"]': '100dvh 100dvh',
       '[data-type="fullscreen"]': '90dvh 90dvh',
       '[data-type="fullscreenTakeover"]': '100dvh 100dvh',
+      '[data-type="panel"]': 'auto',
     },
     width: {
-      width: '288px 90vw',
+      '': '288px 90vw',
+      '[data-type="panel"]': 'auto',
     },
     pointerEvents: 'none',
     transition: 'opacity .25s linear, transform .25s ease-in-out',
     transform: {
       '': 'initial',
       '[data-type="modal"] & !open': 'translate(0, -3x) scale(1, 1)',
-      '[data-type^="fullscreen"] & !open': 'translate(0, 0) scale(1.02, 1.02)',
+      '([data-type^="fullscreen"] | [data-type="panel"]) & !open':
+        'translate(0, 0) scale(1.02, 1.02)',
     },
     opacity: {
       '': 0,
@@ -86,7 +89,9 @@ function Modal(props: CubeModalProps, ref) {
 
   return (
     <Overlay {...otherProps}>
-      {type !== 'fullscreenTakeover' && <Underlay {...underlayProps} />}
+      {type !== 'fullscreenTakeover' && type !== 'panel' && (
+        <Underlay {...underlayProps} />
+      )}
       <ModalWrapper
         ref={domRef}
         qa={qa}
diff --git a/src/icons/ReturnIcon.tsx b/src/icons/ReturnIcon.tsx
@@ -0,0 +1,19 @@
+import { wrapIcon } from './wrap-icon';
+
+export const ReturnIcon = wrapIcon(
+  'ReturnIcon',
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="none"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M8.556 3.9a.6.6 0 0 0 0 1.2h3.455v4.794H5V8.442a.4.4 0 0 0-.684-.282L2.278 10.22a.4.4 0 0 0 0 .562l2.038 2.059A.4.4 0 0 0 5 12.558v-1.464h7.011a1.2 1.2 0 0 0 1.2-1.2V5.1a1.2 1.2 0 0 0-1.2-1.2z"
+      clipRule="evenodd"
+    />
+  </svg>,
+);
diff --git a/src/icons/index.ts b/src/icons/index.ts
@@ -51,6 +51,7 @@ export { PauseCircleIcon } from './PauseCircleIcon';
 export { PieChartIcon } from './PieChartIcon';
 export { PlusIcon } from './PlusIcon';
 export { ReloadIcon } from './ReloadIcon';
+export { ReturnIcon } from './ReturnIcon';
 export { RightIcon } from './RightIcon';
 export { SearchIcon } from './SearchIcon';
 export { SettingsIcon } from './SettingsIcon';

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@cube-dev/ui-kit': minor
 +---
++
 +Remove underlay from dialogs with type `panel`.
Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@ function TextArea(props: WithNullableValue<CubeTextAreaProps>, ref) {`
`70`	`70`	`if (inputRef.current) {`
`71`	`71`	`onHeightChange();`
`72`	`72`	`}`
`73`		`- }, [onHeightChange, inputValue, inputRef]);`
	`73`	`+ }, [inputValue, inputRef.current]);`
`74`	`74`
`75`	`75`	`let { labelProps, inputProps } = useTextField(`
`76`	`76`	`{`