@a-type/ui 4.0.9 → 4.1.0-beta.4

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -1,190 +1,173 @@
-'use client';
-import {
-	Menu as BaseMenu,
-	MenuArrowProps,
-	MenuItemProps,
-	MenuPopupProps,
-	MenuPositionerProps,
-	MenuTriggerProps,
-} from '@base-ui/react/menu';
-import classNames, { clsx } from 'clsx';
-import { Ref } from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
-import { PaletteName } from '../../uno/index.js';
-import { ArrowSvg } from '../utility/ArrowSvg.js';
-import { SlotDiv } from '../utility/SlotDiv.js';
-import { DropdownTriggerProvider } from './DropdownTriggerContext.js';
-
-const StyledContent = withClassName(
-	function DropdownMenuContent(props: MenuPopupProps) {
-		return (
-			<GroupScaleReset>
-				<BaseMenu.Popup {...props} />
-			</GroupScaleReset>
-		);
-	},
-	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-md border border-black flex flex-col transition)',
-	'layer-components:transform-origin-[var(--transform-origin)]',
-
-	'layer-components:data-[starting-style]:data-[side=bottom]:(opacity-0 translate-y-4px)',
-	'layer-components:data-[ending-style]:data-[side=bottom]:(opacity-0 translate-y-4px)',
-	'layer-components:data-[starting-style]:data-[side=top]:(opacity-0 translate-y--4px)',
-	'layer-components:data-[ending-style]:data-[side=top]:(opacity-0 translate-y-0)',
-	'layer-components:data-[starting-style]:data-[side=right]:(opacity-0 translate-x-4px)',
-	'layer-components:data-[ending-style]:data-[side=right]:(opacity-0 translate-x-0)',
-	'layer-components:data-[starting-style]:data-[side=left]:(opacity-0 translate-x--4px)',
-	'layer-components:data-[ending-style]:data-[side=left]:(opacity-0 translate-x-0)',
-
-	'layer-components:(max-h-[--available-height] max-w-[--available-width])',
-
-	'important:motion-reduce:animate-none',
-	'will-change-transform',
-);
-const itemClassName = classNames(
-	'layer-components:(relative min-h-touch-large flex cursor-pointer select-none items-center py-sm pl-8 pr-4 text-left text-md leading-4 color-main-ink)',
-	'layer-components:[&[data-disabled]]:(pointer-events-none color-gray-dark bg-white)',
-	'layer-components:focus-visible:(color-black bg-main-light)',
-	'layer-components:hover:(color-black bg-main-light)',
-	'layer-components:focus:outline-none',
-);
-const StyledItemBase = withClassName(BaseMenu.Item, itemClassName);
-export interface DropdownMenuItemProps extends MenuItemProps {
-	color?: PaletteName;
-	ref?: Ref<HTMLDivElement>;
-}
-const StyledItem = ({
-	ref: forwardedRef,
-	className,
-	color = 'gray',
-	...props
-}: DropdownMenuItemProps) => {
-	return (
-		<StyledItemBase
-			{...props}
-			className={clsx(color && `palette-${color}`, className)}
-			ref={forwardedRef}
-		/>
-	);
-};
-const StyledCheckboxItem = withClassName(BaseMenu.CheckboxItem, itemClassName);
-const StyledRadioItem = withClassName(BaseMenu.RadioItem, itemClassName);
-
-const StyledLabel = withClassName(
-	'span',
-	'layer-components:(pl-3 py-1 font-bold text-sm leading-6)',
-);
-
-const StyledSeparator = withClassName(
-	BaseMenu.Separator,
-	'layer-components:(h-1px bg-gray m-5px)',
-);
-
-const StyledItemIndicator = withClassName(
-	BaseMenu.CheckboxItemIndicator,
-	'layer-components:(absolute left-0 w-25px inline-flex items-center justify-center)',
-);
-
-const StyledArrow = withClassName(
-	(props: MenuArrowProps) => (
-		<BaseMenu.Arrow {...props}>
-			<ArrowSvg />
-		</BaseMenu.Arrow>
-	),
-	'layer-components:(arrow)',
-	'layer-components:data-[closed]:(opacity-0 scale-0)',
-	'layer-components:data-[open]:(opacity-100 scale-100)',
-);
-
-const StyledTrigger = withClassName(BaseMenu.Trigger, 'select-none');
-
-const StyledPortal = BaseMenu.Portal;
-
-// Exports
-export const DropdownMenuRoot = BaseMenu.Root;
-export const DropdownMenuItem = StyledItem;
-export const DropdownMenuCheckboxItem = StyledCheckboxItem;
-export const DropdownMenuRadioGroup = BaseMenu.RadioGroup;
-export const DropdownMenuRadioItem = StyledRadioItem;
-export const DropdownMenuItemIndicator = StyledItemIndicator;
-export const DropdownMenuLabel = StyledLabel;
-export const DropdownMenuSeparator = StyledSeparator;
-export const DropdownMenuArrow = StyledArrow;
-
-export function DropdownMenuTrigger({ ...props }: MenuTriggerProps) {
-	return (
-		<DropdownTriggerProvider>
-			<StyledTrigger {...props} />
-		</DropdownTriggerProvider>
-	);
-}
-export const DropdownMenuTriggerIcon = withClassName(
-	SlotDiv,
-	'layer-components:[[data-popup-open]>&]:rotate-180 layer-components:transition-transform',
-);
-
-export const DropdownMenuContent = ({
-	children,
-	forceMount,
-	keepMounted,
-	side,
-	sideOffset = 8,
-	align,
-	alignOffset,
-	anchor,
-	arrowPadding = 2,
-	collisionAvoidance,
-	collisionBoundary,
-	collisionPadding,
-	sticky,
-	positionMethod,
-	...props
-}: MenuPopupProps &
-	MenuPositionerProps & {
-		/** @deprecated - use keepMounted */
-		forceMount?: boolean;
-		keepMounted?: boolean;
-	}) => {
-	return (
-		<StyledPortal keepMounted={keepMounted ?? forceMount}>
-			<BaseMenu.Positioner
-				sideOffset={sideOffset}
-				side={side}
-				align={align}
-				alignOffset={alignOffset}
-				anchor={anchor}
-				arrowPadding={arrowPadding}
-				collisionAvoidance={collisionAvoidance}
-				collisionBoundary={collisionBoundary}
-				collisionPadding={collisionPadding}
-				sticky={sticky}
-				positionMethod={positionMethod}
-			>
-				<StyledContent {...props}>
-					<div className="layer-components:(max-h-full min-h-0 overflow-x-hidden rounded-md overflow-y-auto overflow-unstable)">
-						{children}
-					</div>
-					<StyledArrow />
-				</StyledContent>
-			</BaseMenu.Positioner>
-		</StyledPortal>
-	);
-};
-
-export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto pl-md');
-
-export const DropdownMenu = Object.assign(DropdownMenuRoot, {
-	Content: DropdownMenuContent,
-	Trigger: DropdownMenuTrigger,
-	Item: StyledItem,
-	CheckboxItem: StyledCheckboxItem,
-	RadioGroup: BaseMenu.RadioGroup,
-	RadioItem: StyledRadioItem,
-	ItemIndicator: StyledItemIndicator,
-	Label: StyledLabel,
-	Separator: StyledSeparator,
-	Arrow: StyledArrow,
-	ItemRightSlot: DropdownMenuItemRightSlot,
-	TriggerIcon: DropdownMenuTriggerIcon,
-	createHandle: BaseMenu.createHandle,
-});
+'use client';
+import {
+	Menu as BaseMenu,
+	MenuArrowProps,
+	MenuItemProps,
+	MenuPopupProps,
+	MenuPositionerProps,
+	MenuTriggerProps,
+} from '@base-ui/react/menu';
+import { clsx } from 'clsx';
+import { Ref } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+import { GroupScaleReset } from '../../systems/GroupScale.js';
+import { PaletteName } from '../../uno/index.js';
+import {
+	itemClassName,
+	itemListClassName,
+	popupClassName,
+} from '../primitives/menus.js';
+import { ArrowSvg } from '../utility/ArrowSvg.js';
+import { SlotDiv } from '../utility/SlotDiv.js';
+import { DropdownTriggerProvider } from './DropdownTriggerContext.js';
+
+const StyledContent = withClassName(
+	function DropdownMenuContent(props: MenuPopupProps) {
+		return (
+			<GroupScaleReset>
+				<BaseMenu.Popup {...props} />
+			</GroupScaleReset>
+		);
+	},
+	popupClassName,
+	'layer-components:(min-w-220px)',
+);
+
+const StyledItemBase = withClassName(BaseMenu.Item, itemClassName);
+export interface DropdownMenuItemProps extends MenuItemProps {
+	color?: PaletteName;
+	ref?: Ref<HTMLDivElement>;
+}
+const StyledItem = ({
+	ref: forwardedRef,
+	className,
+	color = 'gray',
+	...props
+}: DropdownMenuItemProps) => {
+	return (
+		<StyledItemBase
+			{...props}
+			className={clsx(color && `palette-${color}`, className)}
+			ref={forwardedRef}
+		/>
+	);
+};
+const StyledCheckboxItem = withClassName(BaseMenu.CheckboxItem, itemClassName);
+const StyledRadioItem = withClassName(BaseMenu.RadioItem, itemClassName);
+
+const StyledLabel = withClassName(
+	'span',
+	'layer-components:(py-1 pl-3 text-sm font-bold leading-6)',
+);
+
+const StyledSeparator = withClassName(
+	BaseMenu.Separator,
+	'layer-components:(m-5px h-1px bg-gray)',
+);
+
+const StyledItemIndicator = withClassName(
+	BaseMenu.CheckboxItemIndicator,
+	'layer-components:(absolute left-0 w-25px inline-flex items-center justify-center)',
+);
+
+const StyledArrow = withClassName(
+	(props: MenuArrowProps) => (
+		<BaseMenu.Arrow {...props}>
+			<ArrowSvg />
+		</BaseMenu.Arrow>
+	),
+	'layer-components:(arrow)',
+	'layer-components:data-[closed]:(scale-0 opacity-0)',
+	'layer-components:data-[open]:(scale-100 opacity-100)',
+);
+
+const StyledTrigger = withClassName(BaseMenu.Trigger, 'select-none');
+
+const StyledPortal = BaseMenu.Portal;
+
+// Exports
+export const DropdownMenuRoot = BaseMenu.Root;
+export const DropdownMenuItem = StyledItem;
+export const DropdownMenuCheckboxItem = StyledCheckboxItem;
+export const DropdownMenuRadioGroup = BaseMenu.RadioGroup;
+export const DropdownMenuRadioItem = StyledRadioItem;
+export const DropdownMenuItemIndicator = StyledItemIndicator;
+export const DropdownMenuLabel = StyledLabel;
+export const DropdownMenuSeparator = StyledSeparator;
+export const DropdownMenuArrow = StyledArrow;
+
+export function DropdownMenuTrigger({ ...props }: MenuTriggerProps) {
+	return (
+		<DropdownTriggerProvider>
+			<StyledTrigger {...props} />
+		</DropdownTriggerProvider>
+	);
+}
+export const DropdownMenuTriggerIcon = withClassName(
+	SlotDiv,
+	'layer-components:transition-transform layer-components:[[data-popup-open]>&]:rotate-180',
+);
+
+export const DropdownMenuContent = ({
+	children,
+	forceMount,
+	keepMounted,
+	side,
+	sideOffset = 8,
+	align,
+	alignOffset,
+	anchor,
+	arrowPadding = 2,
+	collisionAvoidance,
+	collisionBoundary,
+	collisionPadding,
+	sticky,
+	positionMethod,
+	...props
+}: MenuPopupProps &
+	MenuPositionerProps & {
+		/** @deprecated - use keepMounted */
+		forceMount?: boolean;
+		keepMounted?: boolean;
+	}) => {
+	return (
+		<StyledPortal keepMounted={keepMounted ?? forceMount}>
+			<BaseMenu.Positioner
+				sideOffset={sideOffset}
+				side={side}
+				align={align}
+				alignOffset={alignOffset}
+				anchor={anchor}
+				arrowPadding={arrowPadding}
+				collisionAvoidance={collisionAvoidance}
+				collisionBoundary={collisionBoundary}
+				collisionPadding={collisionPadding}
+				sticky={sticky}
+				positionMethod={positionMethod}
+			>
+				<StyledContent {...props}>
+					<div className={itemListClassName}>{children}</div>
+					<StyledArrow />
+				</StyledContent>
+			</BaseMenu.Positioner>
+		</StyledPortal>
+	);
+};
+
+export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto pl-md');
+
+export const DropdownMenu = Object.assign(DropdownMenuRoot, {
+	Content: DropdownMenuContent,
+	Trigger: DropdownMenuTrigger,
+	Item: StyledItem,
+	CheckboxItem: StyledCheckboxItem,
+	RadioGroup: BaseMenu.RadioGroup,
+	RadioItem: StyledRadioItem,
+	ItemIndicator: StyledItemIndicator,
+	Label: StyledLabel,
+	Separator: StyledSeparator,
+	Arrow: StyledArrow,
+	ItemRightSlot: DropdownMenuItemRightSlot,
+	TriggerIcon: DropdownMenuTriggerIcon,
+	createHandle: BaseMenu.createHandle,
+});

package/src/components/forms/TextField.tsx

@@ -1,140 +1,140 @@
-'use client';
-
-import { useField, useFormikContext } from 'formik';
-import {
-	ComponentProps,
-	InputHTMLAttributes,
-	KeyboardEvent,
-	Ref,
-	useCallback,
-	useEffect,
-	useRef,
-} from 'react';
-import { withClassName } from '../../hooks.js';
-import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
-import useMergedRef from '../../hooks/useMergedRef.js';
-import { Input } from '../input/Input.js';
-import { TextArea, TextAreaProps } from '../textArea/TextArea.js';
-import { FieldLabel } from './FieldLabel.js';
-
-export type TextFieldProps = {
-	name: string;
-	label?: string;
-	required?: boolean;
-	type?: InputHTMLAttributes<HTMLInputElement>['type'];
-	className?: string;
-	placeholder?: string;
-	autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
-	autoFocus?: InputHTMLAttributes<HTMLInputElement>['autoFocus'];
-	autoFocusDelay?: number;
-	inputRef?: Ref<HTMLInputElement>;
-	inputClassName?: string;
-} & ComponentProps<typeof Input>;
-
-const emptyRef = (() => {}) as any;
-
-export const TextField = function TextField({
-	ref,
-	name,
-	label,
-	className,
-	autoFocusDelay,
-	autoFocus,
-	inputRef,
-	onChange,
-	onFocus,
-	onBlur,
-	id: providedId,
-	inputClassName,
-	...rest
-}: TextFieldProps & {
-	ref?: React.Ref<HTMLDivElement>;
-}) {
-	const [props] = useField({
-		name,
-		onChange,
-		onFocus,
-		onBlur,
-	});
-	const innerInputRef = useRef<HTMLInputElement>(null);
-	const id = useIdOrGenerated(providedId);
-
-	useEffect(() => {
-		if (autoFocusDelay) {
-			setTimeout(() => {
-				if (innerInputRef.current) innerInputRef.current.focus();
-			}, autoFocusDelay);
-		}
-	}, [autoFocusDelay]);
-
-	return (
-		<FieldRoot className={className} ref={ref}>
-			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-			<Input
-				{...props}
-				{...rest}
-				id={id}
-				autoFocus={autoFocus}
-				className={inputClassName}
-				ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
-			/>
-		</FieldRoot>
-	);
-};
-
-export type TextAreaFieldProps = {
-	name: string;
-	label?: string;
-	required?: boolean;
-	rows?: number;
-	disabled?: boolean;
-	className?: string;
-	inputRef?: Ref<HTMLTextAreaElement>;
-	submitOnEnter?: boolean;
-	textAreaClassName?: string;
-} & TextAreaProps;
-
-export function TextAreaField({
-	name,
-	label,
-	className,
-	inputRef,
-	onKeyDown,
-	submitOnEnter,
-	id: providedId,
-	textAreaClassName,
-	...rest
-}: TextAreaFieldProps) {
-	const [props] = useField(name);
-	const { submitForm } = useFormikContext();
-	const onKeyDownInner = useCallback(
-		(e: KeyboardEvent<HTMLInputElement>) => {
-			if (submitOnEnter && e.key === 'Enter' && !e.shiftKey) {
-				e.preventDefault();
-				submitForm();
-			}
-			onKeyDown?.(e as any);
-		},
-		[submitOnEnter, onKeyDown, submitForm],
-	);
-	const id = useIdOrGenerated(providedId);
-
-	return (
-		<FieldRoot className={className}>
-			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-			<TextArea
-				ref={inputRef}
-				{...props}
-				{...rest}
-				className={textAreaClassName}
-				id={id}
-				onKeyDown={onKeyDownInner}
-			/>
-		</FieldRoot>
-	);
-}
-
-export const FieldRoot = withClassName(
-	'div',
-	'flex flex-col items-stretch gap-xs self-stretch',
-);
+'use client';
+
+import { useField, useFormikContext } from 'formik';
+import {
+	ComponentProps,
+	InputHTMLAttributes,
+	KeyboardEvent,
+	Ref,
+	useCallback,
+	useEffect,
+	useRef,
+} from 'react';
+import { withClassName } from '../../hooks.js';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { Input } from '../input/Input.js';
+import { TextArea, TextAreaProps } from '../textArea/TextArea.js';
+import { FieldLabel } from './FieldLabel.js';
+
+export type TextFieldProps = {
+	name: string;
+	label?: string;
+	required?: boolean;
+	type?: InputHTMLAttributes<HTMLInputElement>['type'];
+	className?: string;
+	placeholder?: string;
+	autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
+	autoFocus?: InputHTMLAttributes<HTMLInputElement>['autoFocus'];
+	autoFocusDelay?: number;
+	inputRef?: Ref<HTMLInputElement>;
+	inputClassName?: string;
+} & ComponentProps<typeof Input>;
+
+const emptyRef = (() => {}) as any;
+
+export const TextField = function TextField({
+	ref,
+	name,
+	label,
+	className,
+	autoFocusDelay,
+	autoFocus,
+	inputRef,
+	onChange,
+	onFocus,
+	onBlur,
+	id: providedId,
+	inputClassName,
+	...rest
+}: TextFieldProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	const [props] = useField({
+		name,
+		onChange,
+		onFocus,
+		onBlur,
+	});
+	const innerInputRef = useRef<HTMLInputElement>(null);
+	const id = useIdOrGenerated(providedId);
+
+	useEffect(() => {
+		if (autoFocusDelay) {
+			setTimeout(() => {
+				if (innerInputRef.current) innerInputRef.current.focus();
+			}, autoFocusDelay);
+		}
+	}, [autoFocusDelay]);
+
+	return (
+		<FieldRoot className={className} ref={ref}>
+			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
+			<Input
+				{...props}
+				{...rest}
+				id={id}
+				autoFocus={autoFocus}
+				className={inputClassName}
+				ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
+			/>
+		</FieldRoot>
+	);
+};
+
+export type TextAreaFieldProps = {
+	name: string;
+	label?: string;
+	required?: boolean;
+	rows?: number;
+	disabled?: boolean;
+	className?: string;
+	inputRef?: Ref<HTMLTextAreaElement>;
+	submitOnEnter?: boolean;
+	textAreaClassName?: string;
+} & TextAreaProps;
+
+export function TextAreaField({
+	name,
+	label,
+	className,
+	inputRef,
+	onKeyDown,
+	submitOnEnter,
+	id: providedId,
+	textAreaClassName,
+	...rest
+}: TextAreaFieldProps) {
+	const [props] = useField(name);
+	const { submitForm } = useFormikContext();
+	const onKeyDownInner = useCallback(
+		(e: KeyboardEvent<HTMLInputElement>) => {
+			if (submitOnEnter && e.key === 'Enter' && !e.shiftKey) {
+				e.preventDefault();
+				submitForm();
+			}
+			onKeyDown?.(e as any);
+		},
+		[submitOnEnter, onKeyDown, submitForm],
+	);
+	const id = useIdOrGenerated(providedId);
+
+	return (
+		<FieldRoot className={className}>
+			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
+			<TextArea
+				ref={inputRef as any}
+				{...props}
+				{...rest}
+				className={textAreaClassName}
+				id={id}
+				onKeyDown={onKeyDownInner}
+			/>
+		</FieldRoot>
+	);
+}
+
+export const FieldRoot = withClassName(
+	'div',
+	'flex flex-col items-stretch self-stretch gap-xs',
+);

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from '@base-ui/react/use-render';
 export * from './actions/index.js';
+export * from './autocomplete/Autocomplete.js';
 export * from './avatar/index.js';
 export * from './box/Box.js';
 export * from './button/index.js';
@@ -38,6 +39,7 @@ export * from './popover/index.js';
 export * from './progress/Progress.js';
 export * from './provider/Provider.js';
 export * from './pwaInstall/index.js';
+export * from './quickAction/QuickAction.js';
 export * from './relativeTime/index.js';
 export * from './richEditor/index.js';
 export * from './scrollArea/ScrollArea.js';