@a-type/ui 4.1.2 → 4.1.4

package/src/components/collapsible/Collapsible.tsx

@@ -1,74 +1,71 @@
-'use client';
-import {
-	Collapsible as BaseCollapsible,
-	CollapsiblePanelProps,
-	CollapsibleRootProps,
-} from '@base-ui/react/collapsible';
-import { Ref } from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
-
-export const CollapsibleRoot = BaseCollapsible.Root;
-const CollapsibleContentBase = withClassName(
-	BaseCollapsible.Panel,
-	'overflow-hidden transition-all',
-	'data-[vertical]:h-[--collapsible-panel-height] data-[horizontal]:w-[--collapsible-panel-width]',
-	'data-[both]:(h-[--collapsible-panel-height] w-[--collapsible-panel-width])',
-	'data-[starting-style]:data-[vertical]:(h-0)',
-	'data-[starting-style]:data-[both]:(h-0 w-0)',
-	'data-[ending-style]:data-[vertical]:(h-0)',
-	'data-[ending-style]:data-[both]:(h-0 w-0)',
-	'data-[starting-style]:data-[horizontal]:(w-0)',
-	'data-[ending-style]:data-[horizontal]:(w-0)',
-	'data-[hidden]:[&:not([hidden="until-found"])]:(hidden)',
-);
-// specifically removing className... it's causing problems?
-export const CollapsibleContent = function CollapsibleContent({
-	ref,
-	horizontal,
-	both,
-	...props
-}: CollapsiblePanelProps & {
-	horizontal?: boolean;
-	both?: boolean;
-	ref?: Ref<HTMLDivElement>;
-}) {
-	const extraProps: any = {};
-	if (horizontal) {
-		extraProps['data-horizontal'] = true;
-	} else if (both) {
-		extraProps['data-both'] = true;
-	} else {
-		extraProps['data-vertical'] = true;
-	}
-	return <CollapsibleContentBase {...extraProps} {...props} ref={ref} />;
-};
-export const CollapsibleTrigger = BaseCollapsible.Trigger;
-
-export const CollapsibleSimple = ({
-	horizontal,
-	both,
-	children,
-	...props
-}: CollapsibleRootProps & {
-	horizontal?: boolean;
-	both?: boolean;
-}) => (
-	<CollapsibleRoot {...props}>
-		<CollapsibleContent horizontal={horizontal} both={both}>
-			{children}
-		</CollapsibleContent>
-	</CollapsibleRoot>
-);
-
-export const CollapsibleIcon = withClassName(
-	'span',
-	'layer-components:transition-transform',
-	'layer-components:[[data-panel-open]_&]:rotate-180',
-);
-
-export const Collapsible = Object.assign(CollapsibleRoot, {
-	Content: CollapsibleContent,
-	Trigger: CollapsibleTrigger,
-	Simple: CollapsibleSimple,
-	Icon: CollapsibleIcon,
-});
+'use client';
+import {
+	Collapsible as BaseCollapsible,
+	CollapsiblePanelProps,
+	CollapsibleRootProps,
+} from '@base-ui/react/collapsible';
+import { Ref } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+
+export const CollapsibleRoot = BaseCollapsible.Root;
+const CollapsibleContentBase = withClassName(
+	BaseCollapsible.Panel,
+	'overflow-hidden transition-all',
+	'data-[horizontal]:w-[--collapsible-panel-width] data-[vertical]:h-[--collapsible-panel-height]',
+	'data-[both]:(h-[--collapsible-panel-height] w-[--collapsible-panel-width])',
+	'start-end:data-[vertical]:(h-0)',
+	'start-end:data-[both]:(h-0 w-0)',
+	'start-end:data-[horizontal]:(w-0)',
+	'data-[hidden]:[&:not([hidden="until-found"])]:(hidden)',
+);
+// specifically removing className... it's causing problems?
+export const CollapsibleContent = function CollapsibleContent({
+	ref,
+	horizontal,
+	both,
+	...props
+}: CollapsiblePanelProps & {
+	horizontal?: boolean;
+	both?: boolean;
+	ref?: Ref<HTMLDivElement>;
+}) {
+	const extraProps: any = {};
+	if (horizontal) {
+		extraProps['data-horizontal'] = true;
+	} else if (both) {
+		extraProps['data-both'] = true;
+	} else {
+		extraProps['data-vertical'] = true;
+	}
+	return <CollapsibleContentBase {...extraProps} {...props} ref={ref} />;
+};
+export const CollapsibleTrigger = BaseCollapsible.Trigger;
+
+export const CollapsibleSimple = ({
+	horizontal,
+	both,
+	children,
+	...props
+}: CollapsibleRootProps & {
+	horizontal?: boolean;
+	both?: boolean;
+}) => (
+	<CollapsibleRoot {...props}>
+		<CollapsibleContent horizontal={horizontal} both={both}>
+			{children}
+		</CollapsibleContent>
+	</CollapsibleRoot>
+);
+
+export const CollapsibleIcon = withClassName(
+	'span',
+	'layer-components:transition-transform',
+	'layer-components:[[data-panel-open]_&]:rotate-180',
+);
+
+export const Collapsible = Object.assign(CollapsibleRoot, {
+	Content: CollapsibleContent,
+	Trigger: CollapsibleTrigger,
+	Simple: CollapsibleSimple,
+	Icon: CollapsibleIcon,
+});

package/src/components/contextMenu/contextMenu.tsx

@@ -1,67 +1,66 @@
-import {
-	ContextMenu as BaseContextMenu,
-	ContextMenuPopupProps,
-} from '@base-ui/react/context-menu';
-import classNames from 'clsx';
-import { withClassName } from '../../hooks/withClassName.js';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
-
-export const ContextMenuRoot = BaseContextMenu.Root;
-
-export const ContextMenuContent = function Content({
-	ref,
-	className,
-	onClick,
-	...props
-}: ContextMenuPopupProps & {
-	ref?: React.Ref<HTMLDivElement>;
-}) {
-	return (
-		<BaseContextMenu.Portal>
-			<BaseContextMenu.Positioner alignOffset={-10}>
-				<GroupScaleReset>
-					<BaseContextMenu.Popup
-						className={classNames(
-							'layer-components:(z-menu min-w-120px overflow-hidden border rounded-md shadow-md bg-white border-gray-dark)',
-							'layer-components:transform-origin-[var(--transform-origin)]',
-							'layer-components:data-[starting-style]:(scale-95 opacity-0)',
-							'layer-components:data-[ending-style]:(scale-95 opacity-0)',
-							'layer-components:(overflow-y-auto overflow-unstable)',
-							'important:motion-reduce:animate-none',
-							'layer-components:(max-h-[--available-height] max-w-[--available-width])',
-							className,
-						)}
-						onClick={(ev) => {
-							ev.stopPropagation();
-							onClick?.(ev);
-						}}
-						ref={ref}
-						{...props}
-					/>
-				</GroupScaleReset>
-			</BaseContextMenu.Positioner>
-		</BaseContextMenu.Portal>
-	);
-};
-
-export const ContextMenuArrow = withClassName(
-	BaseContextMenu.Arrow,
-	'layer-components:arrow',
-);
-
-export const ContextMenuItem = withClassName(
-	BaseContextMenu.Item,
-	'palette-gray',
-	'layer-components:(flex items-center overflow-hidden min-h-touch-large py-sm px-2 relative pl-25px select-none outline-none cursor-pointer)',
-	'layer-components:hover:bg-main-light layer-components:[&[data-highlighted=true]]:bg-main-light',
-	'layer-components:[&[data-disabled=true]]:(opacity-50 cursor-default) layer-components:disabled:(opacity-50 cursor-default))',
-);
-
-export const ContextMenuTrigger = withClassName(BaseContextMenu.Trigger, '');
-
-export const ContextMenu = Object.assign(ContextMenuRoot, {
-	Content: ContextMenuContent,
-	Arrow: ContextMenuArrow,
-	Item: ContextMenuItem,
-	Trigger: ContextMenuTrigger,
-});
+import {
+	ContextMenu as BaseContextMenu,
+	ContextMenuPopupProps,
+} from '@base-ui/react/context-menu';
+import classNames from 'clsx';
+import { withClassName } from '../../hooks/withClassName.js';
+import { GroupScaleReset } from '../../systems/GroupScale.js';
+
+export const ContextMenuRoot = BaseContextMenu.Root;
+
+export const ContextMenuContent = function Content({
+	ref,
+	className,
+	onClick,
+	...props
+}: ContextMenuPopupProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	return (
+		<BaseContextMenu.Portal>
+			<BaseContextMenu.Positioner alignOffset={-10}>
+				<GroupScaleReset>
+					<BaseContextMenu.Popup
+						className={classNames(
+							'layer-components:(z-menu min-w-120px overflow-hidden border rounded-md shadow-md bg-white border-gray-dark)',
+							'layer-components:transform-origin-[var(--transform-origin)]',
+							'layer-components:start-end:(scale-95 opacity-0)',
+							'layer-components:(overflow-y-auto overflow-unstable)',
+							'important:motion-reduce:animate-none',
+							'layer-components:(max-h-[--available-height] max-w-[--available-width])',
+							className,
+						)}
+						onClick={(ev) => {
+							ev.stopPropagation();
+							onClick?.(ev);
+						}}
+						ref={ref}
+						{...props}
+					/>
+				</GroupScaleReset>
+			</BaseContextMenu.Positioner>
+		</BaseContextMenu.Portal>
+	);
+};
+
+export const ContextMenuArrow = withClassName(
+	BaseContextMenu.Arrow,
+	'layer-components:arrow',
+);
+
+export const ContextMenuItem = withClassName(
+	BaseContextMenu.Item,
+	'palette-gray',
+	'layer-components:(relative min-h-touch-large flex cursor-pointer select-none items-center overflow-hidden px-2 py-sm pl-25px outline-none)',
+	'layer-components:[&[data-highlighted=true]]:bg-main-light layer-components:hover:bg-main-light',
+	'layer-components:disabled:cursor-default) layer-components:[&[data-disabled=true]]:(cursor-default opacity-50) layer-components:disabled:(opacity-50)',
+);
+
+export const ContextMenuTrigger = withClassName(BaseContextMenu.Trigger, '');
+
+export const ContextMenu = Object.assign(ContextMenuRoot, {
+	Content: ContextMenuContent,
+	Arrow: ContextMenuArrow,
+	Item: ContextMenuItem,
+	Trigger: ContextMenuTrigger,
+});

package/src/components/dialog/Dialog.tsx

@@ -34,8 +34,7 @@ const StyledOverlay = withClassName(
 	BaseDialog.Backdrop,
 	'layer-components:border-top-1 layer-components:border-top-solid layer-components:border-top-gray layer-components:(fixed inset-0 shadow-[0_30px_60px_0px] shadow-black/20 shadow-inset transition bg-black/15)',
 	'layer-components:backdrop-blur-sm',
-	'data-[starting-style]:(opacity-0)',
-	'data-[ending-style]:(opacity-0)',
+	'start-end:opacity-0',
 );
 
 const StyledContent = withClassName(
@@ -45,15 +44,13 @@ const StyledContent = withClassName(
 	'transform-gpu',
 	'layer-components:(left-50% top-50% max-h-85vh max-w-450px w-90vw translate-[-50%] border-b-1 rounded-lg)',
 
-	'data-[starting-style]:layer-components:(scale-95 opacity-0)',
-	'data-[ending-style]:layer-components:(scale-95 opacity-0)',
+	'layer-components:start-end:scale-95 layer-components:start-end:opacity-0',
 );
 const sheetClassNames = clsx(
 	'layer-variants:lt-sm:(left-0 right-0 top-auto h-min-content max-w-none w-screen translate-0 border-b-0 rounded-b-0 rounded-tl-xl rounded-tr-xl pt-lg shadow-up)',
 	'layer-variants:lt-sm:pb-[calc(env(safe-area-inset-bottom,0px))]',
 
-	'data-[starting-style]:layer-variants:lt-sm:(translate-y-full opacity-0)',
-	'data-[ending-style]:layer-variants:lt-sm:(translate-y-full opacity-0)',
+	'layer-variants:start-end:lt-sm:(translate-y-full opacity-0)',
 );
 const sheetClassNameWithOverlayKeyboard = clsx(
 	'layer-variants:lt-sm:bottom-[calc(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px))+var(--gesture-y,0px))]',

package/src/components/quickAction/QuickAction.tsx

@@ -1,44 +1,59 @@
-import { Dialog } from '@base-ui/react/dialog';
+import { Dialog, DialogRootProps } from '@base-ui/react/dialog';
 import clsx from 'clsx';
-import { AnimatePresence, Transition } from 'motion/react';
-import { createContext, useContext, useId } from 'react';
+import { createContext, RefObject, useContext, useId, useRef } from 'react';
+import { useSize } from '../../hooks.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import {
+	useMonitor,
+	useValueMonitor,
+	ValueMonitor,
+} from '../../systems/ValueMonitor.js';
 import { Button, ButtonProps } from '../button/Button.js';
 
 const QuickActionIdContext = createContext<string>('qab');
 
+const TriggerSizeContext = createContext<
+	ValueMonitor<{ width: number; height: number }>
+>(new ValueMonitor({ width: 0, height: 0 }));
+
 export const QuickActionRoot = ({
 	children,
-}: {
-	children: React.ReactNode;
+	...props
+}: Omit<DialogRootProps, 'children'> & {
+	children?: React.ReactNode;
 }) => {
 	const id = useId();
+	const triggerSizeMonitor = useValueMonitor({ width: 0, height: 0 });
 	return (
-		<Dialog.Root>
-			<QuickActionIdContext.Provider value={id.replace(/:/g, '')}>
-				{children}
-			</QuickActionIdContext.Provider>
-		</Dialog.Root>
+		<TriggerSizeContext.Provider value={triggerSizeMonitor}>
+			<Dialog.Root {...props}>
+				<QuickActionIdContext.Provider value={id.replace(/:/g, '')}>
+					{children}
+				</QuickActionIdContext.Provider>
+			</Dialog.Root>
+		</TriggerSizeContext.Provider>
 	);
 };
 
-const transition: Transition = {
-	type: 'spring',
-	damping: 25,
-	stiffness: 300,
-	mass: 0.5,
-};
-
 export type QuickActionTriggerProps = ButtonProps;
 const QuickActionTrigger = ({
 	className,
 	emphasis = 'primary',
 	children,
+	ref,
 	...props
 }: QuickActionTriggerProps) => {
 	const layoutId = useContext(QuickActionIdContext);
+	const sizeMonitor = useContext(TriggerSizeContext);
+	const measureRef = useSize((size) => {
+		console.log('measure size', size);
+		sizeMonitor.set(size);
+	});
+	const finalRef = useMergedRef(ref, measureRef);
 	return (
 		<Dialog.Trigger
 			{...props}
+			ref={finalRef}
 			render={({ color: _, ...composed }) => (
 				<Button
 					color={props.color}
@@ -64,39 +79,59 @@ interface QuickActionContentProps {
 	children?: React.ReactNode;
 	className?: string;
 	align?: 'center' | 'start' | 'end';
+	ref?: RefObject<HTMLDivElement>;
 }
 const QuickActionContent = ({
 	children,
 	className,
 	align = 'center',
+	ref,
 }: QuickActionContentProps) => {
+	const innerRef = useRef<HTMLDivElement>(null);
+	const finalRef = useMergedRef(innerRef, ref);
 	const layoutId = useContext(QuickActionIdContext);
+	const triggerSizeMonitor = useContext(TriggerSizeContext);
+	useMonitor(triggerSizeMonitor, (size) => {
+		if (innerRef.current) {
+			const style = innerRef.current.style;
+			style.setProperty('--trigger-width', `${size.width}px`);
+			style.setProperty('--trigger-height', `${size.height}px`);
+		}
+	});
+
 	return (
-		<Dialog.Portal>
-			<AnimatePresence>
-				<Dialog.Popup
-					className={clsx(
-						'layer-components:(contain-layout border-1 rounded-md border-solid shadow-lg transition-all bg-white border-black)',
-						'layer-components:(fixed bottom-[anchor(bottom)] overflow-clip)',
-						{
-							'[justify-self:anchor-center]': align === 'center',
-							'left-[anchor(left)]': align === 'start',
-							'right-[anchor(right)]': align === 'end',
-						},
-						'data-[starting-style]:([will-change:width,height,transform] h-[anchor-size(height)] w-[anchor-size(width)] rounded-200px opacity-0)',
-						'layer-components:[&[data-starting-style]>*]:opacity-0',
-						'data-[ending-style]:([will-change:width,height,transform] h-[anchor-size(height)] w-[anchor-size(width)] rounded-200px opacity-80)',
-						'layer-components:[&[data-ending-style]>*]:opacity-0',
-						className,
-					)}
-					style={{
-						// @ts-ignore
-						'position-anchor': `--${layoutId}`,
-					}}
-				>
-					{children}
-				</Dialog.Popup>
-			</AnimatePresence>
+		<Dialog.Portal keepMounted>
+			<Dialog.Popup
+				ref={finalRef}
+				className={clsx(
+					'layer-components:(contain-layout border-1 rounded-md border-solid shadow-lg transition-all transition-ease-out bg-white border-black clip-inset-[-50px]-[-50px]-[-50px]-[-50px])',
+					'layer-components:(fixed bottom-[anchor(bottom)] overflow-clip)',
+					{
+						'[justify-self:anchor-center]': align === 'center',
+						'left-[anchor(left)]': align === 'start',
+						'right-[anchor(right)]': align === 'end',
+					},
+					{
+						'start-end:clip-inset-[calc(100%_-_var(--trigger-height))]-[calc((100%_-_var(--trigger-width))/2)]-[0]-[calc((100%_-_var(--trigger-width))/2)]-[round]-[200px]':
+							align === 'center',
+						'start-end:clip-inset-[calc(100%_-_var(--trigger-height))]-[calc(100%_-_var(--trigger-width))]-[0]-[0]-[round]-[200px]':
+							align === 'start',
+						'start-end:clip-inset-[calc(100%_-_var(--trigger-height))]-[0]-[0]-[calc(100%_-_var(--trigger-width))]-[round]-[200px]':
+							align === 'end',
+					},
+					'data-[ending-style]:opacity-0',
+					className,
+				)}
+				style={
+					{
+						positionAnchor: `--${layoutId}`,
+						'--trigger-width': triggerSizeMonitor.get().width + 'px',
+						'--trigger-height': triggerSizeMonitor.get().height + 'px',
+					} as any
+				}
+			>
+				{children}
+			</Dialog.Popup>
 		</Dialog.Portal>
 	);
 };