draft-components 3.5.0 → 4.0.0

package/dist/components/dialog/dialog.css

@@ -1,34 +1,111 @@
 .dc-dialog {
-  --dc-dialog-max-width: 480px;
-  --dc-dialog-safe-area: 16px;
-  --dc-dialog-viewport-gap: 16px;
-  --dc-dialog-transition-duration: 200ms;
-  --dc-dialog-open-transition-duration: 250ms;
-  --dc-dialog-close-transition-duration: 150ms;
-  --dc-dialog-text-color: var(--dc-primary-text-color);
-  --dc-dialog-border-color: transparent;
-  --dc-dialog-bg: var(--dc-primary-bg);
-  --dc-dialog-divider-color: var(--dc-border-color-transparent-2);
-  --dc-dialog-backdrop-color: rgb(var(--dc-gray-900-rgb) / 40%);
+  --viewport-padding: 16px;
+  --modal-font: var(--dc-text-sm);
+  --modal-background: var(--dc-background-primary);
+  --modal-border: none;
+  --modal-shadow: var(--dc-shadow-xl);
+  --backdrop-color: rgb(var(--dc-neutral-900-rgb) / 25%);
+  --scroll-shadow-top: 0 2px 2px rgb(0 0 0 / 10%);
+  --scroll-shadow-bottom: 0 -2px 2px rgb(0 0 0 / 10%);
+  --section-delimiter-width: 1px;
+  --section-delimiter-color: var(--dc-border-color-2);
+  --enter-animation-duration: 100ms;
+  --leave-animation-duration: 100ms;
+  --enter-slide-animation-duration: 250ms;
+  --leave-slide-animation-duration: 250ms;
+}
 
+.dc-dialog,
+.dc-dialog_size_md,
+.dc-dialog_size_centered {
   position: fixed;
-  top: 0;
-  left: 0;
+  inset: 0;
   z-index: var(--dc-overlay-z-index);
   box-sizing: border-box;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100%;
+  width: 512px;
+  max-width: calc(100% - 2 * var(--viewport-padding));
+  height: -moz-fit-content;
+  height: fit-content;
+  max-height: calc(100% - 2 * var(--viewport-padding));
+  margin: auto;
+  border-radius: 12px;
+  isolation: isolate;
+}
+
+.dc-dialog_size_sm {
+  width: 384px;
+}
+
+.dc-dialog_size_lg {
+  width: 640px;
+}
+
+.dc-dialog_position_left,
+.dc-dialog_position_right {
+  max-width: calc(100% - var(--viewport-padding));
   height: 100%;
-  padding: var(--dc-dialog-viewport-gap);
-  color-scheme: light;
+  max-height: 100%;
+  border-radius: 0;
+}
+
+.dc-dialog_position_right {
+  inset: 0 0 0 auto;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.dc-dialog_position_left {
+  inset: 0 auto 0 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .dc-dialog__backdrop {
   position: fixed;
   inset: 0;
-  background: var(--dc-dialog-backdrop-color);
+  background: var(--backdrop-color);
+}
+
+@keyframes dc-dialog-backdrop-enter {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dc-dialog-backdrop-leave {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.dc-dialog__backdrop[data-animation="enter"] {
+  animation: dc-dialog-backdrop-enter var(--enter-animation-duration) ease forwards;
+}
+
+.dc-dialog__backdrop[data-animation="leave"] {
+  animation: dc-dialog-backdrop-leave var(--leave-animation-duration) ease forwards;
+}
+
+.dc-dialog_position_right .dc-dialog__backdrop[data-animation="enter"],
+.dc-dialog_position_left .dc-dialog__backdrop[data-animation="enter"] {
+  animation-duration: var(--enter-slide-animation-duration);
+}
+
+.dc-dialog_position_right .dc-dialog__backdrop[data-animation="leave"],
+.dc-dialog_position_left .dc-dialog__backdrop[data-animation="leave"] {
+  animation-duration: var(--leave-slide-animation-duration);
 }
 
 .dc-dialog__modal {
@@ -36,138 +113,282 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  width: 480px;
-  max-width: 100%;
-  max-height: 100%;
-  font: var(--dc-text-sm);
-  color: var(--dc-dialog-text-color);
-  background: var(--dc-dialog-bg);
-  border-radius: 12px;
-  box-shadow: var(--dc-shadow-xl);
+  width: 100%;
+  height: auto;
+  padding: var(--padding);
+  overflow: hidden;
+  font: var(--modal-font);
+  background: var(--modal-background);
+  border: var(--modal-border);
+  border-radius: inherit;
+  box-shadow: var(--modal-shadow);
 }
 
-.dc-dialog__modal_sm {
-  width: 320px;
+.dc-dialog_position_right .dc-dialog__modal,
+.dc-dialog_position_left .dc-dialog__modal {
+  height: 100%;
 }
 
-.dc-dialog__modal_lg {
-  width: 640px;
+@keyframes dc-dialog-modal-enter {
+  from {
+    transform: scale(0.9);
+  }
+
+  to {
+    transform: scale(1);
+  }
 }
 
-.dc-dialog-header,
-.dc-dialog-body,
-.dc-dialog-footer {
-  padding: var(--dc-dialog-safe-area);
+@keyframes dc-dialog-modal-leave {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
 }
 
-.dc-dialog-header {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-gap: 4px;
-  align-items: center;
-  font: var(--dc-text-sm);
+@keyframes dc-dialog-modal-slide-left-enter {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
 }
 
-.dc-dialog-header_has_divider {
-  border-bottom: 1px solid var(--dc-dialog-divider-color);
+@keyframes dc-dialog-modal-slide-left-leave {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
 }
 
-.dc-dialog-header__title {
-  grid-column: 1 / 2;
-  margin: 0;
-  font: 700 var(--dc-text-md);
+@keyframes dc-dialog-modal-slide-right-enter {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes dc-dialog-modal-slide-right-leave {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+.dc-dialog__modal[data-animation="enter"] {
+  animation: dc-dialog-modal-enter var(--enter-animation-duration) ease forwards;
+}
+
+.dc-dialog__modal[data-animation="leave"] {
+  animation: dc-dialog-modal-leave var(--leave-animation-duration) ease forwards;
 }
 
-.dc-dialog-header__subtitle,
-.dc-dialog-header__body {
-  grid-column: 1 / 3;
+.dc-dialog_position_right .dc-dialog__modal[data-animation="enter"] {
+  animation-name: dc-dialog-modal-slide-left-enter;
+  animation-duration: var(--enter-slide-animation-duration);
 }
 
-.dc-dialog-header__close-button {
-  grid-column: 2 / 3;
-  width: 24px;
-  height: 24px;
+.dc-dialog_position_right .dc-dialog__modal[data-animation="leave"] {
+  animation-name: dc-dialog-modal-slide-left-leave;
+  animation-duration: var(--leave-slide-animation-duration);
 }
 
-.dc-dialog-body {
+.dc-dialog_position_left .dc-dialog__modal[data-animation="enter"] {
+  animation-name: dc-dialog-modal-slide-right-enter;
+  animation-duration: var(--enter-slide-animation-duration);
+}
+
+.dc-dialog_position_left .dc-dialog__modal[data-animation="leave"] {
+  animation-name: dc-dialog-modal-slide-right-leave;
+  animation-duration: var(--leave-slide-animation-duration);
+}
+
+@media (prefers-reduced-motion) {
+  .dc-dialog__backdrop[data-animation="enter"],
+  .dc-dialog__backdrop[data-animation="leave"],
+  .dc-dialog__modal[data-animation="enter"],
+  .dc-dialog__modal[data-animation="leave"] {
+    animation-duration: 0ms !important;
+  }
+}
+
+.dc-dialog__header,
+.dc-dialog__body,
+.dc-dialog__footer {
+  padding: 16px;
+}
+
+.dc-dialog__header,
+.dc-dialog__footer {
+  z-index: 1;
+}
+
+.dc-dialog__header {
   position: relative;
-  flex-grow: 1;
-  padding-top: var(--dc-dialog-safe-area);
-  padding-bottom: var(--dc-dialog-safe-area);
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
 }
 
-.dc-dialog-footer {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  justify-content: flex-end;
+.dc-dialog__header_content-align_left {
+  text-align: left;
+}
+
+.dc-dialog__header_content-align_right {
+  text-align: right;
 }
 
-.dc-dialog-footer_has_divider {
-  border-top: 1px solid var(--dc-dialog-divider-color);
+.dc-dialog__header_content-align_center {
+  text-align: center;
 }
 
-.dc-dialog__modal > :first-child {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
+.dc-dialog__header_has_scroll-shadow {
+  box-shadow: var(--scroll-shadow-top);
 }
 
-.dc-dialog__modal > :last-child {
-  border-bottom-right-radius: inherit;
-  border-bottom-left-radius: inherit;
+.dc-dialog__close-button {
+  --dc-button-width: 24px;
+  --dc-button-height: 24px;
+  --dc-button-radius: 8px;
+
+  position: absolute;
+  top: 6px;
 }
 
-.dc-dialog.enter {
-  transition: opacity var(--dc-dialog-open-transition-duration) ease;
+.dc-dialog__header_content-align_left .dc-dialog__close-button,
+.dc-dialog__header_content-align_center .dc-dialog__close-button {
+  right: 6px;
 }
 
-.dc-dialog.enter-from {
-  opacity: 0;
+.dc-dialog__header_content-align_right .dc-dialog__close-button {
+  left: 6px;
 }
 
-.dc-dialog.enter-to {
-  opacity: 1;
+.dc-dialog__title {
+  position: relative;
+  margin: 0;
+  font: var(--dc-text-md);
+  font-weight: 700;
+  word-break: break-all;
+  text-wrap: balance;
 }
 
-.dc-dialog.enter .dc-dialog__modal {
-  transition: transform var(--dc-dialog-open-transition-duration) ease-out;
+.dc-dialog__header_content-align_left .dc-dialog__title {
+  padding-right: 10px;
 }
 
-.dc-dialog.enter-from .dc-dialog__modal {
-  transform: scale(0.95);
+.dc-dialog__header_content-align_right .dc-dialog__title {
+  padding-left: 10px;
 }
 
-.dc-dialog.enter-to .dc-dialog__modal {
-  transform: scale(1);
+.dc-dialog__header_content-align_center .dc-dialog__title {
+  padding-right: 10px;
+  padding-left: 10px;
 }
 
-.dc-dialog.leave {
-  transition: opacity var(--dc-dialog-close-transition-duration) ease;
+.dc-dialog__header-body {
+  margin-top: 2px;
 }
 
-.dc-dialog.leave-from {
-  opacity: 1;
+.dc-dialog__body {
+  flex-grow: 1;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
 }
 
-.dc-dialog.leave-to {
-  opacity: 0;
+.dc-dialog__body:first-child,
+.dc-dialog__body_has_top-delimiter:not(:first-child) {
+  padding-top: 16px;
+}
+
+.dc-dialog__body:last-child,
+.dc-dialog__body_has_bottom-delimiter:not(:first-child) {
+  padding-bottom: 16px;
+}
+
+.dc-dialog__body_has_top-delimiter:not(:first-child) {
+  border-top: var(--section-delimiter-width) solid
+    var(--section-delimiter-color);
+}
+
+.dc-dialog__body_has_bottom-delimiter:not(:first-child) {
+  border-bottom: var(--section-delimiter-width) solid
+    var(--section-delimiter-color);
+}
+
+.dc-dialog__footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.dc-dialog__footer_has_scroll-shadow {
+  box-shadow: var(--scroll-shadow-bottom);
+}
+
+@media screen and ((width < 640px) or ((width < 900px) and (orientation: landscape))) {
+  @keyframes dc-dialog-modal-enter {
+    from {
+      transform: translateY(100%);
+    }
+
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes dc-dialog-modal-leave {
+    from {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(100%);
+    }
+  }
+
+  .dc-dialog_position_centered {
+    inset: auto 0 0;
+    max-width: 100%;
+    max-height: calc(100% - var(--viewport-padding));
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .dc-dialog_position_centered .dc-dialog__backdrop[data-animation="enter"],
+  .dc-dialog_position_centered .dc-dialog__modal[data-animation="enter"] {
+    animation-duration: var(--enter-slide-animation-duration);
+  }
+
+  .dc-dialog_position_centered .dc-dialog__backdrop[data-animation="leave"],
+  .dc-dialog_position_centered .dc-dialog__modal[data-animation="leave"] {
+    animation-duration: var(--leave-slide-animation-duration);
+  }
 }
 
 .dark .dc-dialog,
 .dark.dc-dialog {
-  --dc-dialog-border-color: var(--dc-gray-700);
-  --dc-dialog-bg: var(--dc-gray-800);
-  --dc-dialog-divider-color: var(--dc-border-color-transparent-1);
+  --modal-background: var(--dc-neutral-800);
+  --modal-shadow: 0 0 0 1px var(--dc-border-color-2), var(--dc-shadow-xl);
+  --backdrop-color: rgb(var(--dc-neutral-900-rgb) / 65%);
+  --scroll-shadow-top: 0 1px 1px rgb(255 255 255 / 15%);
+  --scroll-shadow-bottom: 0 -1px 1px rgb(255 255 255 / 15%);
 
   color-scheme: dark;
 }
-
-.dark .dc-dialog .dc-dialog-modal,
-.dark.dc-dialog .dc-dialog-modal {
-  box-shadow:
-    0 0 0 1px var(--dc-border-color-transparent-2),
-    var(--dc-shadow-xl);
-}

package/dist/components/dialog/dialog.d.ts

@@ -1,24 +1,19 @@
-import { ComponentPropsWithoutRef, RefObject } from 'react';
+import { type ComponentProps } from 'react';
 import { DialogHeader } from './dialog-header.js';
 import { DialogBody } from './dialog-body.js';
 import { DialogFooter } from './dialog-footer.js';
-type DialogHTMLProps = ComponentPropsWithoutRef<'section'>;
-type ContainerProps = ComponentPropsWithoutRef<'div'>;
-type BackdropProps = ComponentPropsWithoutRef<'div'>;
-export type DialogWidth = 'sm' | 'md' | 'lg';
-export type DialogProps = {
-    width?: DialogWidth;
-    focusAfterOpenRef?: RefObject<HTMLElement>;
-    focusAfterCloseRef?: RefObject<HTMLElement>;
-    openAnimationDurationMs?: number;
-    closeAnimationDurationMs?: number;
-    containerProps?: ContainerProps;
-    backdropProps?: BackdropProps;
-    isOpen: boolean;
-    onClose: () => void;
-    onOpenAnimationEnd?: () => void;
-    onCloseAnimationEnd?: () => void;
-} & DialogHTMLProps;
+export type DialogCloseHandler = () => void;
+export type DialogUnmountHandler = () => void;
+type DialogBaseProps = {
+    role?: 'dialog' | 'alertdialog';
+    size?: 'sm' | 'md' | 'lg';
+    position?: 'centered' | 'left' | 'right';
+    isOpen?: boolean;
+    onClose?: DialogCloseHandler;
+    onUnmount?: DialogUnmountHandler;
+};
+type DialogHTMLProps = ComponentProps<'div'>;
+export type DialogProps = DialogBaseProps & Omit<DialogHTMLProps, keyof DialogBaseProps>;
 export declare function Dialog(props: DialogProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace Dialog {
     var Header: typeof DialogHeader;

package/dist/components/dialog/dialog.js

@@ -1,52 +1,106 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef } from 'react';
-import { classNames, focusElement } from '../../lib/react-helpers.js';
-import { useDisableBodyScroll, useEscKeyDown, useFocusTrap, usePreservePropsWhenClosed, useShowTransition, } from '../../hooks/index.js';
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { classNames, tryToFocusElement } from '../../lib/react-helpers.js';
+import { useRefCallback } from '../../hooks/use-ref-callback.js';
+import { useCloseOnEsc } from '../../hooks/use-close-on-esc.js';
+import { useLockBodyScroll } from '../../hooks/use-lock-body-scroll.js';
+import { useFocusTrap } from '../../hooks/use-focus-trap.js';
+import { usePreservePropsWhenClosed } from '../../hooks/use-preserve-props-when-closed.js';
 import { Portal } from '../portal/index.js';
 import { DialogContextProvider } from './dialog-context.js';
 import { DialogHeader } from './dialog-header.js';
 import { DialogBody } from './dialog-body.js';
 import { DialogFooter } from './dialog-footer.js';
 export function Dialog(props) {
-    const { className, width = 'md', isOpen = false, focusAfterOpenRef, focusAfterCloseRef, openAnimationDurationMs = 250, closeAnimationDurationMs = 150, containerProps = {}, backdropProps = {}, children, onClose, onOpenAnimationEnd, onCloseAnimationEnd, ...otherProps } = usePreservePropsWhenClosed(props, 'isOpen');
+    const { className, children, role = 'dialog', size = 'md', position = 'centered', isOpen = false, onClose, onUnmount, ...otherProps } = usePreservePropsWhenClosed(props, 'isOpen');
+    const [isMounted, setIsMounted] = useState(isOpen);
     const defaultId = useId();
-    const dialogRef = useRef(null);
     const modalRef = useRef(null);
-    const { shouldRender, transitionClassName } = useShowTransition({
-        isOpen,
-        enterDurationMs: openAnimationDurationMs,
-        leaveDurationMs: closeAnimationDurationMs,
-        onEnterTransitionEnd: onOpenAnimationEnd,
-        onLeaveTransitionEnd: onCloseAnimationEnd,
+    const backdropRef = useRef(null);
+    const close = useRefCallback(() => {
+        if (typeof onClose === 'function') {
+            onClose();
+        }
+    });
+    const unmount = useRefCallback(() => {
+        setIsMounted(false);
+        if (typeof onUnmount === 'function') {
+            onUnmount();
+        }
+    });
+    useLayoutEffect(() => {
+        const backdrop = backdropRef.current;
+        const modal = modalRef.current;
+        if (!backdrop || !modal) {
+            return;
+        }
+        if (isOpen) {
+            setIsMounted((isMounted) => {
+                if (isMounted) {
+                    return isMounted;
+                }
+                modal.dataset.animation = 'enter';
+                backdrop.dataset.animation = 'enter';
+                return !isMounted;
+            });
+        }
+        else {
+            let isModalAnimationEnded = false;
+            let isBackdropAnimationEnded = false;
+            const handleModalAnimationEnd = () => {
+                isModalAnimationEnded = true;
+                if (isModalAnimationEnded && isBackdropAnimationEnded) {
+                    unmount();
+                }
+            };
+            modal.dataset.animation = 'leave';
+            modal.addEventListener('animationend', handleModalAnimationEnd);
+            const handleBackdropAnimationEnd = () => {
+                isBackdropAnimationEnded = true;
+                if (isModalAnimationEnded && isBackdropAnimationEnded) {
+                    unmount();
+                }
+            };
+            backdrop.dataset.animation = 'leave';
+            backdrop.addEventListener('animationend', handleBackdropAnimationEnd);
+            return () => {
+                modal.removeEventListener('animationend', handleModalAnimationEnd);
+                backdrop.removeEventListener('animationend', handleBackdropAnimationEnd);
+            };
+        }
+    }, [isOpen, unmount]);
+    useFocusTrap(modalRef, {
+        disabled: !isMounted,
+    });
+    useLockBodyScroll({
+        disabled: !isMounted,
+    });
+    useCloseOnEsc(close, {
+        disabled: !isMounted,
     });
-    useDisableBodyScroll({ isEnabled: shouldRender });
-    useEscKeyDown(onClose, { isEnabled: shouldRender });
-    useFocusTrap(modalRef, { isEnabled: shouldRender });
     useEffect(() => {
-        if (shouldRender) {
-            const focusAfterOpen = focusAfterOpenRef?.current;
-            const focusAfterClose = focusAfterCloseRef?.current;
-            focusElement(focusAfterOpen);
+        if (isOpen) {
+            const prevFocusedElement = document.activeElement;
+            if (prevFocusedElement instanceof HTMLElement) {
+                prevFocusedElement.blur();
+            }
             return () => {
-                focusElement(focusAfterClose);
+                tryToFocusElement(prevFocusedElement);
             };
         }
-    }, [shouldRender, focusAfterOpenRef, focusAfterCloseRef]);
-    if (!shouldRender) {
+    }, [isOpen]);
+    if (!isOpen && !isMounted) {
         return null;
     }
     const id = otherProps.id || defaultId;
     const titleId = `dialog-title-${id}`;
-    const descriptionId = `dialog-description-${id}`;
-    return (_jsx(Portal, { children: _jsxs("div", { ...containerProps, ref: dialogRef, className: classNames('dc-dialog', transitionClassName, containerProps.className), style: {
-                '--dc-dialog-open-transition-duration': `${openAnimationDurationMs}ms`,
-                '--dc-dialog-close-transition-duration': `${closeAnimationDurationMs}ms`,
-                ...containerProps.style,
-            }, children: [_jsx("div", { ...backdropProps, className: classNames('dc-dialog__backdrop', backdropProps.className) }), _jsx("div", { ...otherProps, id: id, className: classNames(className, {
-                        'dc-dialog__modal': true,
-                        [`dc-dialog__modal_${width}`]: width,
-                    }), ref: modalRef, role: "dialog", "aria-labelledby": titleId, "aria-describedby": descriptionId, "aria-modal": true, children: _jsx(DialogContextProvider, { titleId: titleId, descriptionId: descriptionId, isOpen: isOpen, onClose: onClose, children: children }) })] }) }));
+    return (_jsx(Portal, { children: _jsx(DialogContextProvider, { titleId: titleId, isOpen: isOpen, onClose: close, children: _jsxs("div", { ...otherProps, id: id, className: classNames(className, {
+                    'dc-dialog': true,
+                    [`dc-dialog_size_${size}`]: size,
+                    [`dc-dialog_position_${position}`]: position,
+                }), role: role, "aria-modal": true, "aria-labelledby": titleId, children: [_jsx("div", { className: "dc-dialog__backdrop", ref: backdropRef, "data-testid": "dialog-backdrop" }), _jsx("div", { className: "dc-dialog__modal", ref: modalRef, "data-testid": "dialog-modal", children: children })] }) }) }));
 }
 Dialog.Header = DialogHeader;
 Dialog.Body = DialogBody;
 Dialog.Footer = DialogFooter;
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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"}