@a-type/ui 6.1.16 → 6.1.19

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

@@ -0,0 +1,235 @@
+.overlay {
+	--bleed: 3rem;
+	--swipe-opacity: 0.2;
+
+	position: fixed;
+	min-height: 100dvh;
+	inset: 0;
+
+	@apply --mx-bg(var(--m-gray-ink));
+	opacity: calc(
+		0.2 + var(--swipe-opacity) * (1 - var(--drawer-swipe-progress, 0))
+	);
+
+	border-top: var(--m-lw) solid var(--m-gray);
+
+	transition: all var(--m-dur-long) var(--m-ease);
+
+	backdrop-filter: blur(2px);
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		opacity: 0;
+	}
+
+	&[data-swiping] {
+		transition-duration: 0ms;
+	}
+
+	&[data-ending-style] {
+		transition-duration: calc(var(--drawer-swipe-strength) * var(--m-dur-long));
+	}
+}
+
+.viewport {
+	--bleed: 3rem;
+
+	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;
+	}
+
+	/* While swiping, the popup's own bleed covers the bottom edge, so hide the
+     fixed fill — otherwise it paints white over the backdrop once the popup is
+     dragged far enough down. */
+	&:has([data-swiping])::after {
+		opacity: 0;
+	}
+}
+
+.popup {
+	--bleed: 3rem;
+	--top-gap: 1rem;
+
+	box-sizing: border-box;
+	position: relative;
+	z-index: 1;
+	max-width: unset;
+	width: 100%;
+	max-height: calc(100% - var(--top-gap) + var(--bleed));
+	height: calc(100% - var(--top-gap) + var(--bleed));
+	margin-bottom: calc(-1 * var(--bleed));
+	padding-bottom: max(
+		0px,
+		calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
+	);
+
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-borderColor(var(--m-gray-heavy));
+
+	touch-action: none;
+
+	overflow: visible;
+
+	transition:
+		transform var(--m-dur-long) var(--m-ease),
+		box-shadow var(--m-dur-long) var(--m-ease),
+		padding-bottom var(--m-dur-long) 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);
+
+	border-radius: var(--m-surface-rd) var(--m-surface-rd) 0 0;
+	border-bottom-width: 0;
+
+	transform: translateY(
+		calc(
+			var(--drawer-swipe-movement-y) + var(--drawer-snap-point-offset) -
+				var(--bleed)
+		)
+	);
+	will-change: transform;
+
+	/* Disable transitions while swiping so movement is immediate */
+	&[data-swiping] {
+		transition: none;
+		user-select: none;
+	}
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		transform: translateY(calc(100% - var(--bleed)));
+		padding-bottom: 0;
+		box-shadow: 0 0 0 transparent;
+	}
+
+	&[data-ending-style] {
+		transition-duration: calc(var(--drawer-swipe-strength) * var(--m-dur-long));
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		inset-inline: 0;
+		top: 100%;
+		height: var(--bleed);
+		background-color: inherit;
+		pointer-events: none;
+	}
+}
+
+.contentScrollArea {
+	flex: 1 1 auto;
+	min-height: 0;
+	overscroll-behavior: contain;
+	touch-action: auto;
+	overflow-y: auto;
+	padding: var(--m-surface-p);
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-sp-md);
+}
+
+.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: 0;
+	z-index: 100;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: end;
+	align-self: end;
+	@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);
+
+	/*
+		Hide the actions when the keyboard is open.
+		Done by moving them downward behind it.
+		This both fixes a bug with the positioning, and
+		gives the user more room to see.
+	*/
+	transform: translateY(calc(2 * var(--drawer-keyboard-inset, 0px)));
+	/*
+		Same but with modern CSS if()
+	*/
+	@supports (
+		display: if(style(--drawer-keyboard-inset > 0px): none; else: flex;)
+	) {
+		display: if(style(--drawer-keyboard-inset > 0px): none; else: flex;);
+	}
+}

package/src/components/drawer/Drawer.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button/index.js';
+import { Input } from '../input/Input.js';
+import { H1, P } from '../typography/index.js';
+import { Drawer } from './Drawer.js';
+
+const meta: any = {
+	title: 'Components/Drawer',
+	component: Drawer,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+
+function DummyContent() {
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column' }}>
+			<H1>Some content</H1>
+			<P>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
+				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi.
+			</P>
+			<Input placeholder="Type something..." />
+			<P>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
+				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi.
+			</P>
+			<Input placeholder="Type something..." />
+			<P>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
+				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem
+				ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor
+				sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan,
+				sit amet ullamcorper nunc ultricies. Nulla facilisi.
+			</P>
+			<Input placeholder="Type something..." />
+			<P>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
+				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem
+				ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor
+				sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan,
+				sit amet ullamcorper nunc ultricies. Nulla facilisi.
+			</P>
+			<Input placeholder="Type something..." />
+			<P>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
+				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem
+				ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor
+				sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan,
+				sit amet ullamcorper nunc ultricies. Nulla facilisi.
+			</P>
+			<Input placeholder="Type something..." />
+			<P>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
+				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Lorem
+				ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor
+				sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan,
+				sit amet ullamcorper nunc ultricies. Nulla facilisi.
+			</P>
+			<Input placeholder="Type something..." />
+		</div>
+	);
+}
+
+export const Default: Story = {
+	args: {
+		children: (
+			<>
+				<Drawer.Trigger render={<Button />}>Open</Drawer.Trigger>
+				<Drawer.Content>
+					<Drawer.Title>Hello world</Drawer.Title>
+					<DummyContent />
+					<Drawer.Actions>
+						<Drawer.Close />
+						<Button emphasis="primary">Accept</Button>
+					</Drawer.Actions>
+				</Drawer.Content>
+			</>
+		),
+	},
+};
+
+export const NoDefaultClose: Story = {
+	args: {
+		children: (
+			<>
+				<Drawer.Trigger render={<Button />}>Open</Drawer.Trigger>
+				<Drawer.Content disableDefaultClose>
+					<Drawer.Title>No default close</Drawer.Title>
+					<DummyContent />
+					<Drawer.Actions>
+						<Drawer.Close />
+					</Drawer.Actions>
+				</Drawer.Content>
+			</>
+		),
+	},
+};

package/src/components/drawer/Drawer.tsx

@@ -0,0 +1,189 @@
+import {
+	Drawer as BaseDrawer,
+	DrawerCloseProps,
+	DrawerPopupProps,
+	DrawerRootProps,
+	DrawerTriggerProps,
+} from '@base-ui/react/drawer';
+import clsx from 'clsx';
+import { ComponentPropsWithoutRef, Ref, useCallback, useRef } from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { withClassName } from '../../hooks/withClassName.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/Icon.js';
+import { useParticles } from '../particles/ParticleContext.js';
+import cls from './Drawer.module.css';
+
+const DrawerBackdrop = withClassName(BaseDrawer.Backdrop, cls.overlay);
+
+const StyledPopup = withClassName(BaseDrawer.Popup, cls.popup);
+
+export interface DrawerContentProps extends DrawerPopupProps {
+	disableDefaultClose?: boolean;
+	ref?: Ref<HTMLDivElement>;
+	innerClassName?: string;
+}
+
+const DrawerContent = function DrawerContent({
+	ref,
+	children,
+	className,
+	disableDefaultClose,
+	innerClassName,
+	...props
+}: DrawerContentProps) {
+	const particles = useParticles();
+	const wasOpenRef = useRef(false);
+
+	const openRef = useCallback(
+		(element: HTMLDivElement | null) => {
+			if (!wasOpenRef.current && element?.hasAttribute('data-open')) {
+				wasOpenRef.current = true;
+
+				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],
+	);
+
+	const finalRef = useMergedRef(ref, openRef);
+
+	return (
+		<BaseDrawer.VirtualKeyboardProvider>
+			<BaseDrawer.Portal>
+				<DrawerBackdrop data-role="backdrop" />
+				<BaseDrawer.Viewport className={cls.viewport}>
+					<StyledPopup ref={finalRef} {...props} className={className}>
+						{!disableDefaultClose && <DrawerDefaultClose />}
+						<DrawerSwipeHandle />
+						<div className={clsx(cls.contentScrollArea, innerClassName)}>
+							{children}
+						</div>
+					</StyledPopup>
+				</BaseDrawer.Viewport>
+			</BaseDrawer.Portal>
+		</BaseDrawer.VirtualKeyboardProvider>
+	);
+};
+
+function DrawerSwipeHandle({
+	ref,
+	className,
+	...props
+}: ComponentPropsWithoutRef<'div'> & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	return (
+		<div ref={ref} {...props} className={clsx(cls.swipeHandle, className)}>
+			<div className={cls.swipeHandleBar} />
+		</div>
+	);
+}
+
+function DrawerDefaultClose({
+	ref,
+	className,
+	...props
+}: DrawerCloseProps & {
+	ref?: React.Ref<HTMLButtonElement>;
+}) {
+	return (
+		<DrawerClose
+			className={clsx(cls.close, className)}
+			aria-label="Close drawer"
+			ref={ref}
+			{...props}
+			render={<Button emphasis="ghost" size="small" />}
+		>
+			<Icon name="x" />
+		</DrawerClose>
+	);
+}
+
+const DrawerTitle = withClassName(BaseDrawer.Title, cls.title);
+const DrawerDescription = withClassName(
+	BaseDrawer.Description,
+	cls.description,
+);
+
+// TODO: support swipeDirection
+export interface DrawerProps extends Omit<DrawerRootProps, 'swipeDirection'> {}
+const defaultSnapPoints = [0.75, 1];
+const DrawerRoot = ({
+	children,
+	snapPoints = defaultSnapPoints,
+	...props
+}: DrawerProps) => {
+	return (
+		<BaseDrawer.Root swipeDirection="down" snapPoints={snapPoints} {...props}>
+			{children}
+		</BaseDrawer.Root>
+	);
+};
+
+const DrawerTrigger = ({ render, ...props }: DrawerTriggerProps) => (
+	<BaseDrawer.Trigger render={render || <Button />} {...props} />
+);
+
+function DrawerClose({
+	children,
+	render,
+	...props
+}: DrawerCloseProps & {
+	ref?: React.Ref<HTMLButtonElement>;
+}) {
+	return (
+		<BaseDrawer.Close
+			render={render ?? <Button emphasis="default" />}
+			{...props}
+		>
+			{children ?? 'Close'}
+		</BaseDrawer.Close>
+	);
+}
+
+const DrawerActions = withClassName(Box, cls.actions);
+
+export const Drawer = Object.assign(DrawerRoot, {
+	Trigger: DrawerTrigger,
+	Content: DrawerContent,
+	Title: DrawerTitle,
+	Description: DrawerDescription,
+	Close: DrawerClose,
+	Actions: DrawerActions,
+	Unstyled: BaseDrawer as DrawerParts,
+	createHandle: BaseDrawer.createHandle,
+});
+
+export type DrawerParts = typeof BaseDrawer;

package/src/components/drawer/index.ts

@@ -0,0 +1 @@
+export * from './Drawer.js';

package/src/components/globalErrorFallback/GlobalErrorFallback.tsx

@@ -1,5 +1,6 @@
-import { Box, BoxProps, Heading, P } from '@a-type/ui';
 import { useLocalStorage } from '../../hooks.js';
+import { Box, type BoxProps } from '../box/Box.js';
+import { Heading, P } from '../typography/typography.js';
 
 export function GlobalErrorFallback({ children, ...rest }: BoxProps) {
 	const hadRecentError = useHadRecentError();

package/src/components/index.ts

@@ -14,6 +14,7 @@ export * from './combobox/Combobox.js';
 export * from './contextMenu/contextMenu.js';
 export * from './datePicker/index.js';
 export * from './dialog/index.js';
+export * from './drawer/index.js';
 export * from './divider/index.js';
 export * from './dropdownMenu/index.js';
 export * from './editableText/EditableText.js';

package/src/components/scrollArea/ScrollArea.module.css

@@ -4,6 +4,7 @@
 	min-width: 0;
 	display: flex;
 	flex-direction: column;
+	touch-action: auto;
 }
 
 .viewport {

package/src/hooks/withContextVariant.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Creates a context and HOC which swaps between two components
+ * based on a contextual value
+ */
+export function createWithContextVariant() {
+	const Context = createContext(false);
+	function withContextVariant<P extends object>(
+		TrueComponent: React.ComponentType<P>,
+		FalseComponent: React.ComponentType<P>,
+	) {
+		return function WithContextVariant(props: P) {
+			const contextValue = useContext(Context);
+			const Component = contextValue ? TrueComponent : FalseComponent;
+			return <Component {...props} />;
+		};
+	}
+
+	return {
+		Context,
+		withContextVariant,
+	};
+}