draft-components 2.5.3 → 2.7.0

package/css/draft-components.css

@@ -1067,72 +1067,55 @@
   --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-inset-shadow-color: var(--dc-border-color-transparent-2);
+  --dc-dialog-divider-color: var(--dc-border-color-transparent-2);
   --dc-dialog-backdrop-color: rgb(var(--dc-gray-900-rgb) / 0.4);
 
   color-scheme: light;
-  position: relative;
-  z-index: var(--dc-overlay-z-index);
-}
-
-.dc-dialog-backdrop {
   position: fixed;
+  z-index: var(--dc-overlay-z-index);
   top: 0;
   left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   padding: var(--dc-dialog-viewport-gap);
-  background: var(--dc-dialog-backdrop-color);
-}
-
-.dc-dialog_closed .dc-dialog-backdrop {
-  opacity: 0;
-  transition: opacity var(--dc-dialog-transition-duration) linear;
 }
 
-.dc-dialog_opened .dc-dialog-backdrop {
-  opacity: 1;
+.dc-dialog__backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--dc-dialog-backdrop-color);
 }
 
-.dc-dialog-modal {
+.dc-dialog__modal {
+  font: var(--dc-text-sm);
   color: var(--dc-dialog-text-color);
-  position: fixed;
-  top: 50%;
-  left: 50%;
+  position: relative;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  width: 100%;
-  max-width: calc(var(--dc-dialog-max-width) + 2 * var(--dc-dialog-safe-area));
-  max-height: calc(100% - 2 * var(--dc-dialog-viewport-gap));
-  transform: translate(-50%, -50%);
+  width: 480px;
+  max-width: 100%;
+  max-height: 100%;
   border-radius: 12px;
   background: var(--dc-dialog-bg);
   box-shadow: var(--dc-shadow-xl);
 }
 
-.dc-dialog-modal_sm {
-  --dc-dialog-max-width: 320px;
-}
-
-.dc-dialog-modal_lg {
-  --dc-dialog-max-width: 640px;
-}
-
-.dc-dialog_closed .dc-dialog-modal {
-  opacity: 0;
-  transform: translate(-50%, -50%) scale(0.95);
-  transition: var(--dc-dialog-transition-duration) ease;
-  transition-property: opacity, transform;
+.dc-dialog__modal_sm {
+  width: 320px;
 }
 
-.dc-dialog_opened .dc-dialog-modal {
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
+.dc-dialog__modal_lg {
+  width: 640px;
 }
 
 .dc-dialog-header,
@@ -1143,33 +1126,31 @@
 
 .dc-dialog-header {
   font: var(--dc-text-sm);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-gap: 4px;
+  align-items: center;
 }
 
-.dc-dialog-header_has_border {
-  border-bottom: 1px solid var(--dc-dialog-inset-shadow-color);
-}
-
-.dc-dialog-header__title-bar {
-  position: relative;
-  padding-right: 24px;
+.dc-dialog-header_has_divider {
+  border-bottom: 1px solid var(--dc-dialog-divider-color);
 }
 
-.dc-dialog-header__heading {
+.dc-dialog-header__title {
   font: 700 var(--dc-text-md);
+  grid-column: 1 / 2;
   margin: 0;
 }
 
-.dc-dialog-header__close-btn {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 24px;
-  height: 24px;
+.dc-dialog-header__subtitle,
+.dc-dialog-header__body {
+  grid-column: 1 / 3;
 }
 
-.dc-dialog-header__subheading,
-.dc-dialog-header__body {
-  margin-top: 4px;
+.dc-dialog-header__close-button {
+  grid-column: 2 / 3;
+  width: 24px;
+  height: 24px;
 }
 
 .dc-dialog-body {
@@ -1184,32 +1165,61 @@
 .dc-dialog-footer {
   display: flex;
   flex-wrap: wrap;
+  gap: 8px;
   align-items: center;
   justify-content: flex-end;
 }
 
-.dc-dialog-footer > * + * {
-  margin-left: 8px;
-}
-
-.dc-dialog-footer_has_border {
-  border-top: 1px solid var(--dc-dialog-inset-shadow-color);
+.dc-dialog-footer_has_divider {
+  border-top: 1px solid var(--dc-dialog-divider-color);
 }
 
-.dc-dialog-modal > .dc-dialog-header:first-child,
-.dc-dialog-modal > .dc-dialog-body:first-child,
-.dc-dialog-modal > .dc-dialog-footer:first-child {
+.dc-dialog__modal > :first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
 
-.dc-dialog-modal > .dc-dialog-header:last-child,
-.dc-dialog-modal > .dc-dialog-body:last-child,
-.dc-dialog-modal > .dc-dialog-footer:last-child {
+.dc-dialog__modal > :last-child {
   border-bottom-right-radius: inherit;
   border-bottom-left-radius: inherit;
 }
 
+.dc-dialog.enter {
+  transition: opacity var(--dc-dialog-open-transition-duration) ease;
+}
+
+.dc-dialog.enter-from {
+  opacity: 0;
+}
+
+.dc-dialog.enter-to {
+  opacity: 1;
+}
+
+.dc-dialog.enter .dc-dialog__modal {
+  transition: transform var(--dc-dialog-open-transition-duration) ease-out;
+}
+
+.dc-dialog.enter-from .dc-dialog__modal {
+  transform: scale(0.95);
+}
+
+.dc-dialog.enter-to .dc-dialog__modal {
+  transform: scale(1);
+}
+
+.dc-dialog.leave {
+  transition: opacity var(--dc-dialog-close-transition-duration) ease;
+}
+
+.dc-dialog.leave-from {
+  opacity: 1;
+}
+
+.dc-dialog.leave-to {
+  opacity: 0;
+}
+
 .dc-slide-over-header {
   color: var(--dc-slide-over-text-color);
   box-sizing: border-box;
@@ -3467,6 +3477,11 @@
   background: var(--dc-menu-item-bg);
 }
 
+.dc-menu-btn:disabled {
+  opacity: var(--dc-disabled-state-opacity);
+  cursor: default;
+}
+
 .dc-menu-btn__label {
   flex-grow: 1;
 }

package/css/draft-components.dark.css

@@ -339,7 +339,7 @@
 .dark.dc-dialog {
   --dc-dialog-border-color: var(--dc-gray-700);
   --dc-dialog-bg: var(--dc-gray-800);
-  --dc-dialog-inset-shadow-color: var(--dc-border-color-transparent-1);
+  --dc-dialog-divider-color: var(--dc-border-color-transparent-1);
 
   color-scheme: dark;
 }

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

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 type DialogFooterHTMLProps = ComponentPropsWithoutRef<'div'>;
 export type DialogFooterProps = {
-    hasBorder?: boolean;
+    hasDivider?: boolean;
 } & DialogFooterHTMLProps;
-export declare function DialogFooter({ hasBorder, className, children, }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogFooter({ className, hasDivider, children, }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/dialog/dialog-footer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from '../../lib/react-helpers.js';
-export function DialogFooter({ hasBorder, className, children, }) {
+export function DialogFooter({ className, hasDivider, children, }) {
     return (_jsx("div", { className: classNames(className, {
             'dc-dialog-footer': true,
-            'dc-dialog-footer_has_border': hasBorder,
+            'dc-dialog-footer_has_divider': hasDivider,
         }), children: children }));
 }

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

@@ -1,9 +1,10 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 type DialogHeaderHTMLProps = ComponentPropsWithoutRef<'div'>;
+type DialogHeaderBaseProps = Omit<DialogHeaderHTMLProps, 'title'>;
 export type DialogHeaderProps = {
-    hasBorder?: boolean;
-    heading?: ReactNode;
-    subheading?: ReactNode;
-} & DialogHeaderHTMLProps;
-export declare function DialogHeader({ hasBorder, heading, subheading, className, children, }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+    hasDivider?: boolean;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+} & DialogHeaderBaseProps;
+export declare function DialogHeader({ className, hasDivider, title, subtitle, children, }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/dialog/dialog-header.js

@@ -3,13 +3,16 @@ import { classNames } from '../../lib/react-helpers.js';
 import { useDialogContext } from './dialog-context.js';
 import { IconButton } from '../button/index.js';
 import { XMarkIcon } from '../hero-icons/24/outline/x-mark-icon.js';
-export function DialogHeader({ hasBorder, heading, subheading, className, children, }) {
-    const { titleId, descriptionId, onClose, } = useDialogContext();
-    const shouldRenderHeading = Boolean(heading);
-    const shouldRenderDescription = Boolean(subheading);
-    const shouldRenderChildren = Boolean(children);
+export function DialogHeader({ className, hasDivider, title, subtitle, children, }) {
+    const { titleId, descriptionId, onClose } = useDialogContext();
     return (_jsxs("div", { className: classNames(className, {
             'dc-dialog-header': true,
-            'dc-dialog-header_has_border': hasBorder,
-        }), children: [_jsxs("div", { className: "dc-dialog-header__title-bar", children: [shouldRenderHeading && (_jsx("h2", { id: titleId, className: "dc-dialog-header__heading", children: heading })), _jsx(IconButton, { className: "dc-dialog-header__close-btn", buttonStyle: "plain", onClick: () => onClose(), children: _jsx(XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }) })] }), shouldRenderDescription && (_jsx("div", { id: descriptionId, className: "dc-dialog-header__subheading", children: subheading })), shouldRenderChildren && (_jsx("div", { className: "dc-dialog-header__body", children: children }))] }));
+            'dc-dialog-header_has_divider': hasDivider,
+        }), children: [title
+                ? _jsx("h3", { id: titleId, className: "dc-dialog-header__title", children: title })
+                : null, _jsx(IconButton, { buttonStyle: "plain", className: "dc-dialog-header__close-button", onClick: () => onClose(), children: _jsx(XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }) }), subtitle
+                ? _jsx("div", { id: descriptionId, className: "dc-dialog-header__subtitle", children: subtitle })
+                : null, children
+                ? _jsx("div", { className: "dc-dialog-header__body", children: children })
+                : null] }));
 }

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

@@ -1,12 +1,28 @@
 import { ComponentPropsWithoutRef, RefObject } 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;
-    openFocusRef?: RefObject<HTMLElement>;
-    closeFocusRef?: RefObject<HTMLElement>;
+    focusAfterOpenRef?: RefObject<HTMLElement>;
+    focusAfterCloseRef?: RefObject<HTMLElement>;
+    openAnimationDurationMs?: number;
+    closeAnimationDurationMs?: number;
+    containerProps?: ContainerProps;
+    backdropProps?: BackdropProps;
     isOpen: boolean;
     onClose: () => void;
+    onOpenAnimationEnd?: () => void;
+    onCloseAnimationEnd?: () => void;
 } & DialogHTMLProps;
-export declare function Dialog({ width, isOpen, openFocusRef, closeFocusRef, onClose, className, children, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Dialog(props: DialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Dialog {
+    var Header: typeof DialogHeader;
+    var Body: typeof DialogBody;
+    var Footer: typeof DialogFooter;
+}
 export {};

package/dist/components/dialog/dialog.js

@@ -1,42 +1,52 @@
 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, useMountTransition } from '../../hooks/index.js';
+import { useDisableBodyScroll, useEscKeyDown, useFocusTrap, usePreservePropsWhenClosed, useShowTransition, } from '../../hooks/index.js';
 import { Portal } from '../portal/index.js';
 import { DialogContextProvider } from './dialog-context.js';
-export function Dialog({ width = 'md', isOpen = false, openFocusRef, closeFocusRef, onClose, className, children, ...props }) {
+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 defaultId = useId();
     const dialogRef = useRef(null);
-    const durationMs = 200;
-    const { isMounted, className: transitionClass } = useMountTransition({
-        durationMs,
-        isShown: isOpen,
-        enterFrom: 'dc-dialog_closed',
-        enterTo: 'dc-dialog_opened',
+    const modalRef = useRef(null);
+    const { shouldRender, transitionClassName } = useShowTransition({
+        isOpen,
+        enterDurationMs: openAnimationDurationMs,
+        leaveDurationMs: closeAnimationDurationMs,
+        onEnterTransitionEnd: onOpenAnimationEnd,
+        onLeaveTransitionEnd: onCloseAnimationEnd,
     });
+    useDisableBodyScroll({ isEnabled: shouldRender });
+    useEscKeyDown(onClose, { isEnabled: shouldRender });
+    useFocusTrap(modalRef, { isEnabled: shouldRender });
     useEffect(() => {
-        if (isOpen) {
-            const openFocus = openFocusRef?.current;
-            const closeFocus = closeFocusRef?.current;
-            focusElement(openFocus);
-            return () => focusElement(closeFocus);
+        if (shouldRender) {
+            const focusAfterOpen = focusAfterOpenRef?.current;
+            const focusAfterClose = focusAfterCloseRef?.current;
+            focusElement(focusAfterOpen);
+            return () => {
+                focusElement(focusAfterClose);
+            };
         }
-    }, [isOpen, openFocusRef, closeFocusRef]);
-    useEscKeyDown(() => {
-        onClose();
-    }, { isEnabled: isOpen });
-    useFocusTrap(dialogRef, { isEnabled: isOpen });
-    useDisableBodyScroll({ isEnabled: isOpen });
-    if (!isOpen && !isMounted) {
+    }, [shouldRender, focusAfterOpenRef, focusAfterCloseRef]);
+    if (!shouldRender) {
         return null;
     }
-    const id = props.id || defaultId;
+    const id = otherProps.id || defaultId;
     const titleId = `dialog-title-${id}`;
     const descriptionId = `dialog-description-${id}`;
-    return (_jsx(Portal, { children: _jsxs("div", { style: {
-                '--dc-dialog-transition-duration': `${durationMs}ms`,
-            }, className: classNames('dc-dialog', transitionClass), children: [_jsx("div", { className: "dc-dialog-backdrop" }), _jsx("div", { ...props, ref: dialogRef, className: classNames(className, {
-                        'dc-dialog-modal': true,
-                        [`dc-dialog-modal_${width}`]: width,
-                    }), role: "dialog", id: id, "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: _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 }) })] }) }));
 }
+Dialog.Header = DialogHeader;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;

package/dist/components/menu/menu-item.d.ts

@@ -3,6 +3,7 @@ type MenuItemHTMLProps = ComponentPropsWithRef<'button'>;
 type MenuItemBaseProps = Omit<MenuItemHTMLProps, 'children' | 'role'>;
 export type MenuItemProps = {
     role?: 'menuitem' | 'menuitemradio';
+    disabled?: boolean;
     destructive?: boolean;
     iconLeft?: ReactNode;
     iconRight?: ReactNode;

package/dist/components/menu/menu-item.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export const MenuItem = forwardRef(function MenuItem({ role = 'menuitem', destructive, iconLeft, iconRight, children, className, ...props }, ref) {
+export const MenuItem = forwardRef(function MenuItem({ role = 'menuitem', disabled, destructive, iconLeft, iconRight, children, className, ...props }, ref) {
     let label = children;
     if (iconLeft || iconRight) {
         const className = classNames('dc-menu-btn__label', {
@@ -12,5 +12,5 @@ export const MenuItem = forwardRef(function MenuItem({ role = 'menuitem', destru
     }
     return (_jsx("li", { role: "presentation", children: _jsxs("button", { ...props, ref: ref, className: classNames(className, 'dc-menu-btn', {
                 'dc-menu-btn_destructive': destructive,
-            }), type: "button", role: role, tabIndex: -1, children: [iconLeft, label, iconRight] }) }));
+            }), type: "button", disabled: disabled, role: role, tabIndex: -1, children: [iconLeft, label, iconRight] }) }));
 });

package/dist/components/menu/menu.js

@@ -183,6 +183,6 @@ function getMenuItems(menuId) {
     if (!menuEl) {
         return [];
     }
-    const nodes = menuEl.querySelectorAll('button[role="menuitem"], button[role="menuitemradio"]');
+    const nodes = menuEl.querySelectorAll('button[role="menuitem"]:not(:disabled), button[role="menuitemradio"]:not(:disabled)');
     return Array.from(nodes);
 }

package/dist/hooks/index.d.ts

@@ -1,4 +1,7 @@
+export * from './use-callback-ref.js';
 export * from './use-disable-body-scroll.js';
 export * from './use-esc-key-down.js';
 export * from './use-focus-trap.js';
 export * from './use-mount-transition.js';
+export * from './use-show-transition.js';
+export * from './use-preserve-props-when-closed.js';

package/dist/hooks/index.js

@@ -1,4 +1,7 @@
+export * from './use-callback-ref.js';
 export * from './use-disable-body-scroll.js';
 export * from './use-esc-key-down.js';
 export * from './use-focus-trap.js';
 export * from './use-mount-transition.js';
+export * from './use-show-transition.js';
+export * from './use-preserve-props-when-closed.js';

package/dist/hooks/use-callback-ref.d.ts

@@ -0,0 +1,3 @@
+type Callback = (...args: unknown[]) => unknown;
+export declare function useCallbackRef<T extends Callback>(callback: T): T;
+export {};

package/dist/hooks/use-callback-ref.js

@@ -0,0 +1,8 @@
+import { useEffect, useMemo, useRef } from 'react';
+export function useCallbackRef(callback) {
+    const savedCallback = useRef(callback);
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    return useMemo(() => ((...args) => savedCallback.current(...args)), []);
+}

package/dist/hooks/use-mount-transition.d.ts

@@ -29,4 +29,7 @@ export type TransitionState = {
     isMounted: boolean;
     className: string;
 };
+/**
+ * @deprecated
+ */
 export declare function useMountTransition({ animateFirstMount, isShown, durationMs, enterFrom, enterTo, }: TransitionParams): TransitionState;

package/dist/hooks/use-mount-transition.js

@@ -1,5 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { classNames } from '../lib/react-helpers.js';
+/**
+ * @deprecated
+ */
 export function useMountTransition({ animateFirstMount = false, isShown, durationMs, enterFrom, enterTo, }) {
     const [isMounted, setIsMounted] = useState(isShown);
     const [hasEnterToClass, setHasEnterToClass] = useState(false);

package/dist/hooks/use-prefers-reduced-motion.d.ts

@@ -0,0 +1 @@
+export declare function usePrefersReducedMotion(): boolean;

package/dist/hooks/use-prefers-reduced-motion.js

@@ -0,0 +1,15 @@
+import { useEffect, useMemo, useState } from 'react';
+export function usePrefersReducedMotion() {
+    const media = useMemo(() => window.matchMedia('(prefers-reduced-motion)'), []);
+    const [reduced, setReduced] = useState(media.matches);
+    useEffect(() => {
+        const handleChange = () => {
+            setReduced(media.matches);
+        };
+        media.addEventListener('change', handleChange);
+        return () => {
+            media.removeEventListener('change', handleChange);
+        };
+    }, [media]);
+    return reduced;
+}

package/dist/hooks/use-preserve-props-when-closed.d.ts

@@ -0,0 +1 @@
+export declare function usePreservePropsWhenClosed<T extends Record<string, unknown>>(props: T, openProp: keyof T): T;

package/dist/hooks/use-preserve-props-when-closed.js

@@ -0,0 +1,14 @@
+import { useRef } from 'react';
+export function usePreservePropsWhenClosed(props, openProp) {
+    const savedProps = useRef(props);
+    if (props[openProp]) {
+        savedProps.current = props;
+    }
+    else {
+        savedProps.current = {
+            ...savedProps.current,
+            [openProp]: false,
+        };
+    }
+    return savedProps.current;
+}

package/dist/hooks/use-show-transition.d.ts

@@ -0,0 +1,16 @@
+export declare function useShowTransition({ isOpen, enterDurationMs, leaveDurationMs, enter, enterFrom, enterTo, leave, leaveFrom, leaveTo, onEnterTransitionEnd: _onEnterTransitionEnd, onLeaveTransitionEnd: _onLeaveTransitionEnd, }: {
+    isOpen: boolean;
+    enterDurationMs: number;
+    leaveDurationMs: number;
+    enter?: string;
+    enterFrom?: string;
+    enterTo?: string;
+    leave?: string;
+    leaveFrom?: string;
+    leaveTo?: string;
+    onEnterTransitionEnd?: () => void;
+    onLeaveTransitionEnd?: () => void;
+}): {
+    shouldRender: boolean;
+    transitionClassName: string;
+};

package/dist/hooks/use-show-transition.js

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from 'react';
+import { useCallbackRef } from './index.js';
+import { classNames, noop } from '../lib/index.js';
+import { usePrefersReducedMotion } from './use-prefers-reduced-motion.js';
+export function useShowTransition({ isOpen, enterDurationMs, leaveDurationMs, enter = 'enter', enterFrom = 'enter-from', enterTo = 'enter-to', leave = 'leave', leaveFrom = 'leave-from', leaveTo = 'leave-to', onEnterTransitionEnd: _onEnterTransitionEnd = noop, onLeaveTransitionEnd: _onLeaveTransitionEnd = noop, }) {
+    const onEnterTransitionEnd = useCallbackRef(_onEnterTransitionEnd);
+    const onLeaveTransitionEnd = useCallbackRef(_onLeaveTransitionEnd);
+    const enterTimeoutRef = useRef(-1);
+    const leaveTimeoutRef = useRef(-1);
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const [shouldRender, setShouldRender] = useState(isOpen);
+    const [transitionClasses, setTransitionClasses] = useState(isOpen
+        ? [enter, enterTo]
+        : [enter, enterFrom]);
+    useEffect(() => {
+        if (prefersReducedMotion) {
+            return;
+        }
+        if (isOpen) {
+            window.clearTimeout(leaveTimeoutRef.current);
+            setShouldRender(true);
+            return () => {
+                window.clearTimeout(enterTimeoutRef.current);
+                setTransitionClasses([leave, leaveFrom]);
+                window.setTimeout(() => {
+                    setTransitionClasses([leave, leaveTo]);
+                });
+                leaveTimeoutRef.current = window.setTimeout(() => {
+                    setShouldRender(false);
+                    setTransitionClasses([enter, enterFrom]);
+                    onLeaveTransitionEnd();
+                }, leaveDurationMs);
+            };
+        }
+    }, [
+        prefersReducedMotion,
+        isOpen,
+        enter,
+        enterFrom,
+        leave,
+        leaveFrom,
+        leaveTo,
+        leaveDurationMs,
+        onLeaveTransitionEnd,
+    ]);
+    useEffect(() => {
+        if (prefersReducedMotion) {
+            return;
+        }
+        if (shouldRender) {
+            setTransitionClasses([enter, enterTo]);
+            enterTimeoutRef.current = window.setTimeout(() => {
+                setTransitionClasses([]);
+                onEnterTransitionEnd();
+            }, enterDurationMs);
+        }
+    }, [
+        prefersReducedMotion,
+        shouldRender,
+        enter,
+        enterTo,
+        enterDurationMs,
+        onEnterTransitionEnd,
+    ]);
+    return {
+        shouldRender: isOpen || shouldRender,
+        transitionClassName: prefersReducedMotion ? '' : classNames(...transitionClasses),
+    };
+}

package/dist/lib/helpers.d.ts

@@ -1,5 +1,6 @@
 type AnyFunction = (...args: any[]) => any;
 export declare function once<T extends AnyFunction>(fn: T): (...args: Parameters<T>) => ReturnType<T>;
-export declare function exhaustiveCheck(value: never, message?: string): never;
 export declare function assertIfNullable<T>(value: T, message?: string): asserts value is NonNullable<T>;
+export declare function exhaustiveCheck(value: never, message?: string): never;
+export declare function noop(): undefined;
 export {};

package/dist/lib/helpers.js

@@ -9,11 +9,14 @@ export function once(fn) {
         return result;
     };
 }
-export function exhaustiveCheck(value, message) {
-    throw new Error(message);
-}
 export function assertIfNullable(value, message = 'assertIfNullable: value is null or undefined.') {
     if (value == null) {
         throw Error(message);
     }
 }
+export function exhaustiveCheck(value, message) {
+    throw new Error(message);
+}
+export function noop() {
+    return undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "2.5.3",
+  "version": "2.7.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {