@a-type/ui 6.1.16 → 6.1.18

package/src/components/dialog/Dialog.tsx

@@ -1,3 +1,4 @@
+import { UseRenderRenderProp } from '@base-ui/react';
 import {
 	Dialog as BaseDialog,
 	DialogCloseProps,
@@ -5,187 +6,70 @@ import {
 	DialogRootProps,
 	DialogTriggerProps,
 } from '@base-ui/react/dialog';
+import { DrawerRootProps } from '@base-ui/react/drawer';
 import { Radio as BaseRadio } from '@base-ui/react/radio';
 import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
-import { useDrag } from '@use-gesture/react';
 import clsx from 'clsx';
-import {
-	ComponentPropsWithoutRef,
-	createContext,
-	Ref,
-	TouchEvent,
-	useCallback,
-	useContext,
-	useRef,
-	useState,
-} from 'react';
+import { ComponentPropsWithoutRef, Ref, useCallback, useState } from 'react';
 import { useMediaQuery } from '../../hooks/useMediaQuery.js';
-import useMergedRef from '../../hooks/useMergedRef.js';
 import { withClassName } from '../../hooks/withClassName.js';
+import { createWithContextVariant } from '../../hooks/withContextVariant.js';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/index.js';
+import { Drawer } from '../drawer/Drawer.js';
+import drawerCls from '../drawer/Drawer.module.css';
 import { Icon } from '../icon/Icon.js';
-import { useParticles } from '../particles/index.js';
 import menuCls from '../primitives/menus.module.css';
-import { useConfig } from '../provider/Provider.js';
 import { ScrollArea } from '../scrollArea/ScrollArea.js';
 import { selectTriggerClassName } from '../select/index.js';
 import cls from './Dialog.module.css';
 
-const StyledOverlay = withClassName(BaseDialog.Backdrop, cls.overlay);
+const { Context: MobileDrawerContext, withContextVariant } =
+	createWithContextVariant();
 
+// baseline Dialog-specific component implementations
+const StyledOverlay = withClassName(BaseDialog.Backdrop, cls.overlay);
 const StyledContent = withClassName(BaseDialog.Popup, cls.content);
-
-function sheetCloseGestureLogic(
-	swipeY: number,
-	dy: number,
-	last: boolean,
-	close: () => void,
-	content: HTMLElement,
-) {
-	const contentHeight = content.clientHeight;
-
-	const shouldClose = last && (swipeY === 1 || dy > contentHeight / 2);
-	if (shouldClose) {
-		close();
-	}
-	const gestureY = last ? (shouldClose ? -1000 : 0) : -Math.max(0, dy);
-	content.style.setProperty('--gesture-y', `${gestureY}px`);
-	content.style.setProperty('transition', last ? 'bottom 0.2s' : '');
-}
-
-// filter out gestures that are within scrollable descendants
-// if those elements are not scrolled to the top already
-function filterScrollables(
-	target: HTMLElement,
-	root: HTMLElement,
-	dy: number,
-	vy: number,
-) {
-	// always allow upward swipes
-	if (vy < 0) {
-		return false;
-	}
-
-	let cur: HTMLElement | null = target;
-	while (cur) {
-		if (cur === root) return false;
-		cur = cur.parentElement;
-		if (
-			cur &&
-			cur.scrollHeight > cur.clientHeight &&
-			cur.scrollTop !== 0 &&
-			vy >= 0
-		)
-			return true;
-	}
-	return false;
-}
-
-export interface DialogContentProps extends DialogPopupProps {
+export interface DialogContentProps
+	extends Omit<DialogPopupProps, 'className' | 'style' | 'render'> {
 	width?: 'sm' | 'md' | 'lg';
-	disableSheet?: boolean;
 	disableDefaultClose?: boolean;
 	/** @deprecated */
 	outerClassName?: string;
 	ref?: Ref<HTMLDivElement>;
 	innerClassName?: string;
+	className?: string;
+	style?: React.CSSProperties;
+	// minimal state overlap between drawer and dialog primitives
+	render?: UseRenderRenderProp<{ open: boolean }>;
 }
-
-const SWIPE_VELOCITY_THRESHOLD = 1.5;
-
-export const Content = function Content({
+const FunctionalContent = function Content({
 	ref,
 	children,
 	width,
 	outerClassName,
 	className,
-	disableSheet,
 	disableDefaultClose,
 	innerClassName,
 	...props
 }: DialogContentProps) {
-	const particles = useParticles();
-	const wasOpenRef = useRef(false);
-	const openRef = useCallback(
-		(element: HTMLDivElement | null) => {
-			if (!wasOpenRef.current && element?.hasAttribute('data-open')) {
-				wasOpenRef.current = true;
-
-				const matchesSmall =
-					!disableSheet &&
-					typeof window !== 'undefined' &&
-					!window.matchMedia('(min-width:600px)').matches;
-				if (!matchesSmall) return;
-
-				setTimeout(() => {
-					particles?.addParticles(
-						particles.elementExplosion({
-							count: 20,
-							margin: 40,
-							borders: ['top'],
-							color: [
-								{
-									space: 'rgb',
-									values: [0, 0, 0],
-									opacity: 0.02,
-								},
-								{
-									space: 'rgb',
-									values: [0, 0, 0],
-									opacity: 0,
-								},
-							],
-							element,
-							startRadius: 15,
-							endRadius: 0,
-							lifespan: 1000,
-							force: 0.5,
-							drag: 0.01,
-							forceFuzz: 0.5,
-							angleFuzz: 0.1,
-						}),
-					);
-				}, 180);
-			} else if (!element?.hasAttribute('data-open')) {
-				wasOpenRef.current = false;
-			}
-		},
-		[particles, disableSheet],
-	);
-
-	const { gestureRef, onTouchStart, onTouchMove, onTouchEnd } =
-		useDialogInherentSwipe({ disableSheet });
-	const finalRef = useMergedRef(ref, openRef, gestureRef);
-
-	const { virtualKeyboardBehavior } = useConfig();
-
 	return (
 		<BaseDialog.Portal>
 			<StyledOverlay />
 			<StyledContent
-				data-dialog-content
-				ref={finalRef}
+				ref={ref}
 				{...props}
-				onTouchStart={onTouchStart}
-				onTouchMove={onTouchMove}
-				onTouchEnd={onTouchEnd}
-				onTouchCancel={onTouchEnd}
-				data-disable-sheet={disableSheet ? 'true' : undefined}
-				data-keyboard-behavior={virtualKeyboardBehavior}
 				data-width={width}
 				className={clsx(outerClassName || className)}
 			>
-				{!disableDefaultClose && (
-					<DialogDefaultClose showOnMobile={disableSheet} />
-				)}
-				{!disableSheet && <DialogSwipeHandle />}
-				<ScrollArea direction="vertical" className={cls.contentScrollArea}>
+				{!disableDefaultClose && <DialogDefaultClose />}
+				<ScrollArea
+					direction="vertical"
+					className={drawerCls.contentScrollArea}
+				>
 					<ScrollArea.Content
-						className={clsx(cls.contentScrollAreaContent, innerClassName)}
-						style={{
-							minWidth: undefined,
-						}}
+						className={clsx(drawerCls.contentScrollAreaContent, innerClassName)}
+						style={{ minWidth: undefined }}
 					>
 						{children}
 					</ScrollArea.Content>
@@ -194,140 +78,7 @@ export const Content = function Content({
 		</BaseDialog.Portal>
 	);
 };
-
-function useDialogInherentSwipe({ disableSheet }: { disableSheet?: boolean }) {
-	const gestureRef = useRef<HTMLDivElement>(null);
-
-	const close = useContext(DialogCloseContext);
-	const isSmall = useMediaQuery('(max-width: 640px)');
-
-	const gestureState = useRef({
-		sy: 0,
-		dy: 0,
-		vy: 0,
-		active: false,
-		timeStamp: 0,
-		filtered: false,
-	});
-
-	const onTouchStart = useCallback(
-		(event: TouchEvent) => {
-			if (!isSmall || disableSheet) return;
-			const touch = event.touches[0];
-			gestureState.current.sy = touch.clientY;
-			gestureState.current.timeStamp = event.timeStamp;
-		},
-		[isSmall, disableSheet],
-	);
-	const onTouchMove = useCallback(
-		(event: TouchEvent) => {
-			if (!isSmall || disableSheet) return;
-
-			const touch = event.touches[0];
-			const dy = touch.clientY - gestureState.current.sy;
-			const vy =
-				(dy - gestureState.current.dy) /
-				(event.timeStamp -
-					(gestureState.current.timeStamp ?? event.timeStamp - 1));
-
-			gestureState.current.dy = dy;
-			gestureState.current.vy = vy;
-
-			if (
-				gestureState.current.filtered ||
-				filterScrollables(
-					event.target as HTMLElement,
-					gestureRef.current!,
-					dy,
-					vy,
-				)
-			) {
-				gestureState.current.filtered = true;
-				return;
-			}
-			if (!gestureState.current.active) {
-				gestureState.current.active = true;
-				gestureState.current.sy = touch.clientY;
-			}
-
-			if (gestureRef.current && gestureRef.current.scrollTop < 3) {
-				sheetCloseGestureLogic(
-					Math.abs(vy) > SWIPE_VELOCITY_THRESHOLD ? Math.sign(vy) : 0,
-					dy,
-					false,
-					close,
-					gestureRef.current,
-				);
-			}
-
-			gestureState.current.timeStamp = event.timeStamp;
-		},
-		[isSmall, disableSheet, close],
-	);
-	const onTouchEnd = useCallback(
-		(event: TouchEvent) => {
-			if (gestureState.current.active && gestureRef.current) {
-				const { vy, dy } = gestureState.current;
-				sheetCloseGestureLogic(
-					Math.abs(vy) > SWIPE_VELOCITY_THRESHOLD ? Math.sign(vy) : 0,
-					dy,
-					true,
-					close,
-					gestureRef.current,
-				);
-			}
-			gestureState.current.active = false;
-			gestureState.current.filtered = false;
-			gestureState.current.timeStamp = event.timeStamp;
-			gestureState.current.vy = 0;
-			gestureState.current.dy = 0;
-			gestureState.current.sy = 0;
-		},
-		[close],
-	);
-
-	return { gestureRef, onTouchStart, onTouchMove, onTouchEnd };
-}
-
-export function DialogSwipeHandle({
-	ref,
-	className,
-	...props
-}: ComponentPropsWithoutRef<'div'> & {
-	ref?: React.Ref<HTMLDivElement>;
-}) {
-	const close = useContext(DialogCloseContext);
-	const innerRef = useRef<HTMLDivElement>(null);
-	useDrag(
-		({ swipe: [, swipeY], movement: [, dy], last }) => {
-			const content = findParentDialogContent(innerRef.current);
-			if (!content) return;
-			sheetCloseGestureLogic(swipeY, dy, last, close, content);
-		},
-		{
-			target: innerRef,
-			axis: 'y',
-		},
-	);
-	const finalRef = useMergedRef(ref, innerRef);
-	return (
-		<div ref={finalRef} {...props} className={clsx(cls.swipeHandle, className)}>
-			<div className={cls.swipeHandleBar} />
-		</div>
-	);
-}
-
-function findParentDialogContent(
-	element: HTMLElement | null,
-): HTMLElement | null {
-	if (!element) return null;
-	if (element.getAttribute('data-dialog-content')) return element;
-	return findParentDialogContent(element.parentElement);
-}
-
-const DialogCloseContext = createContext<() => void>(() => {});
-
-export const DialogDefaultClose = function DialogDefaultClose({
+const DialogDefaultClose = function DialogDefaultClose({
 	ref,
 	className,
 	showOnMobile,
@@ -349,55 +100,15 @@ export const DialogDefaultClose = function DialogDefaultClose({
 		</DialogClose>
 	);
 };
-
-const StyledTitle = withClassName(BaseDialog.Title, cls.title);
-
+const StyledDialogTitle = withClassName(BaseDialog.Title, cls.title);
 const StyledDescription = withClassName(
 	BaseDialog.Description,
 	cls.description,
 );
-
-// Exports
-const DialogRoot = (props: DialogRootProps) => {
-	const [innerOpen, innerOnOpenChange] = useState(props.defaultOpen || false);
-	const open = props.open ?? innerOpen;
-	const onOpenChange = useCallback<
-		Exclude<DialogRootProps['onOpenChange'], undefined>
-	>(
-		(open, eventDetails) => {
-			innerOnOpenChange(open);
-			props.onOpenChange?.(open, eventDetails);
-		},
-		[props.onOpenChange],
-	);
-
-	const close = useCallback(() => {
-		onOpenChange(false, {
-			allowPropagation() {},
-			cancel() {},
-			isCanceled: false,
-			event: null as any,
-			isPropagationAllowed: true,
-			preventUnmountOnClose() {},
-			reason: 'imperative-action',
-			trigger: undefined,
-		});
-	}, [onOpenChange]);
-
-	return (
-		<DialogCloseContext.Provider value={close}>
-			<BaseDialog.Root {...props} open={open} onOpenChange={onOpenChange} />
-		</DialogCloseContext.Provider>
-	);
-};
-
-export const DialogTrigger = ({ render, ...props }: DialogTriggerProps) => (
+const StyledTrigger = ({ render, ...props }: DialogTriggerProps) => (
 	<BaseDialog.Trigger render={render || <Button />} {...props} />
 );
-export const DialogContent = Content;
-export const DialogTitle = StyledTitle;
-export const DialogDescription = StyledDescription;
-export const DialogClose = function DialogClose({
+const StyledClose = function DialogClose({
 	children,
 	render,
 	...props
@@ -413,12 +124,70 @@ export const DialogClose = function DialogClose({
 		</BaseDialog.Close>
 	);
 };
+const StyledActions = withClassName(Box, cls.actions);
 
-export type { DialogRootProps as DialogProps } from '@base-ui/react/dialog';
+// Variant Dialog/Drawer component wrappers
+const DialogContent = withContextVariant<DialogContentProps>(
+	Drawer.Content,
+	FunctionalContent,
+);
+const DialogTitle = withContextVariant(Drawer.Title, StyledDialogTitle);
+const DialogDescription = withContextVariant(
+	Drawer.Description,
+	StyledDescription,
+);
 
-export const DialogActions = withClassName(Box, cls.actions);
+export interface DialogProps extends Omit<DialogRootProps, 'children'> {
+	children: React.ReactNode;
+	disableSheet?: boolean;
+}
+const DialogRoot = ({
+	children,
+	defaultOpen,
+	disableSheet,
+	...rootProps
+}: DialogProps) => {
+	const [innerOpen, innerOnOpenChange] = useState(defaultOpen || false);
+	const open = rootProps.open ?? innerOpen;
+	const onOpenChange = useCallback<
+		Exclude<DialogRootProps['onOpenChange'], undefined>
+	>(
+		(open, eventDetails) => {
+			innerOnOpenChange(open);
+			rootProps.onOpenChange?.(open, eventDetails);
+		},
+		[rootProps.onOpenChange],
+	);
+
+	const isSmall = useMediaQuery('(max-width: 600px)');
+	const useDrawer = isSmall && !disableSheet;
+
+	if (useDrawer) {
+		return (
+			<MobileDrawerContext.Provider value={true}>
+				<Drawer
+					{...rootProps}
+					open={open}
+					onOpenChange={onOpenChange as DrawerRootProps['onOpenChange']}
+				>
+					{children}
+				</Drawer>
+			</MobileDrawerContext.Provider>
+		);
+	}
 
-export const DialogSelectTrigger = function DialogSelectTrigger({
+	return (
+		<BaseDialog.Root {...rootProps} open={open} onOpenChange={onOpenChange}>
+			{children}
+		</BaseDialog.Root>
+	);
+};
+const DialogTrigger = withContextVariant(Drawer.Trigger, StyledTrigger);
+const DialogClose = withContextVariant(Drawer.Close, StyledClose);
+const DialogActions = withContextVariant(Drawer.Actions, StyledActions);
+
+// "Select" stuff - deprecate soon?
+const DialogSelectTrigger = function DialogSelectTrigger({
 	children,
 	className,
 	...props
@@ -426,21 +195,18 @@ export const DialogSelectTrigger = function DialogSelectTrigger({
 	ref?: React.Ref<HTMLButtonElement>;
 }) {
 	return (
-		<BaseDialog.Trigger
+		<DialogTrigger
 			className={clsx(selectTriggerClassName, className)}
 			{...props}
 		>
 			<span>{children}</span>
 			<Icon name="chevron" />
-		</BaseDialog.Trigger>
+		</DialogTrigger>
 	);
 };
-
-export const DialogSelectList = withClassName(BaseRadioGroup, menuCls.itemList);
-
-export const DialogSelectItemRoot = withClassName(BaseRadio.Root, menuCls.item);
-
-export const DialogSelectItem = function DialogSelectItem({
+const DialogSelectList = withClassName(BaseRadioGroup, menuCls.itemList);
+const DialogSelectItemRoot = withClassName(BaseRadio.Root, menuCls.item);
+const DialogSelectItem = function DialogSelectItem({
 	children,
 	...props
 }: ComponentPropsWithoutRef<typeof DialogSelectItemRoot> & {
@@ -458,9 +224,9 @@ export const DialogSelectItem = function DialogSelectItem({
 
 export const Dialog = Object.assign(DialogRoot, {
 	Trigger: DialogTrigger,
-	Content,
-	Title: StyledTitle,
-	Description: StyledDescription,
+	Content: DialogContent,
+	Title: DialogTitle,
+	Description: DialogDescription,
 	Close: DialogClose,
 	Actions: DialogActions,
 	SelectTrigger: DialogSelectTrigger,

package/src/components/drawer/Drawer.module.css

@@ -0,0 +1,181 @@
+.overlay {
+	position: fixed;
+	inset: 0;
+	@apply --mx-shadow;
+	@apply --mx-bg(var(--m-gray-ink));
+	@apply --mx-bg-faded(5%);
+	border-top: var(--m-lw) solid var(--m-gray);
+	transition: all var(--m-dur) var(--m-ease);
+	backdrop-filter: blur(2px);
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		opacity: 0;
+	}
+}
+
+.viewport {
+	--bleed: 100px;
+
+	position: fixed;
+	inset: 0;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+	touch-action: none;
+
+	&::after {
+		content: '';
+		position: fixed;
+		inset-inline: 0;
+		bottom: 0;
+		height: var(--bleed);
+		@apply --mx-bg(var(--m-surface-ambient-bg));
+		pointer-events: none;
+	}
+
+	&[data-closed]::after {
+		opacity: 0;
+	}
+}
+
+.popup {
+	box-sizing: border-box;
+	position: relative;
+	z-index: 1;
+	max-width: unset;
+	width: 100%;
+	max-height: 85svh;
+
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	touch-action: none;
+
+	overflow: visible;
+
+	transition:
+		transform var(--m-dur) var(--m-ease),
+		opacity var(--m-dur) var(--m-ease);
+
+	--shadow-dir: -1;
+	@apply --mx-shadow;
+	--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-lg-y))
+		var(--m-shadow-lg-blur) var(--m-shadow-lg-spread) var(--m-shadow-lg-color);
+
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-borderColor(var(--m-gray-heavy));
+
+	border-radius: var(--m-surface-rd) var(--m-surface-rd) 0 0;
+	border-bottom-width: 0;
+	padding-bottom: max(
+		0px,
+		calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
+	);
+
+	/* Use drawer's built-in swipe movement for animation */
+	transform: translateY(
+		calc(
+			var(--drawer-swipe-movement-y, 0px) + var(--drawer-snap-point-offset, 0px)
+		)
+	);
+	will-change: transform;
+
+	/* Disable transitions while swiping so movement is immediate */
+	&[data-swiping] {
+		transition: none;
+	}
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		transform: translateY(100%);
+		padding-bottom: 0;
+	}
+	&[data-ending-style] {
+		transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
+	}
+}
+
+.contentScrollArea {
+	width: 100%;
+	height: 100%;
+	flex: 1 1 auto;
+	min-height: 0;
+	overscroll-behavior: contain;
+}
+
+.contentScrollAreaContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-sp-md);
+	padding: var(--m-surface-p);
+	overscroll-behavior: contain;
+}
+
+.swipeHandle {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	cursor: grab;
+	touch-action: none;
+	padding-block: var(--m-sp-lg);
+	user-select: none;
+	flex-shrink: 0;
+}
+
+.swipeHandleBar {
+	height: --fn-literal(4px);
+	width: 20%;
+	@apply --mx-bg(var(--m-gray));
+	border-radius: var(--m-rd-lg);
+}
+
+.close {
+	position: absolute;
+	right: var(--m-sp-sm);
+	top: var(--m-sp-sm);
+	z-index: 101;
+	display: flex;
+}
+
+.title {
+	@apply --mx-fg(var(--m-gray-ink));
+	font-size: var(--m-prose-primary-size);
+	font-weight: var(--m-prose-primary-weight);
+	line-height: var(--m-prose-primary-lineHeight);
+	margin-block-end: var(--m-sp-xs);
+	margin-block-start: 0;
+}
+
+.description {
+	@apply --mx-fg(var(--m-gray-heavy));
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	margin: 0;
+	margin-block-end: var(--m-sp-xs);
+}
+
+.actions {
+	position: sticky;
+	bottom: var(--m-sp-md);
+	z-index: 100;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: end;
+	align-self: end;
+	padding-bottom: --fn-literal(1px);
+	@apply --mx-shadow;
+	--mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
+		var(--m-shadow-md-spread) var(--m-gray-paper);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-bg-faded(50%);
+	margin-block-start: var(--m-sp-md);
+	gap: var(--m-sp-sm);
+	border-radius: var(--m-surface-rd);
+	transition: bottom var(--m-dur) var(--m-ease);
+}