@a-type/ui 4.1.0-beta.7 → 4.1.0

package/src/components/autocomplete/Autocomplete.tsx

@@ -2,7 +2,6 @@ import {
 	AutocompleteArrowProps,
 	Autocomplete as BaseAutocomplete,
 	AutocompleteGroupProps as BaseAutocompleteGroupProps,
-	AutocompleteInputProps as BaseAutocompleteInputProps,
 	AutocompleteItemProps as BaseAutocompleteItemProps,
 	AutocompleteListProps as BaseAutocompleteListProps,
 	AutocompletePopupProps as BaseAutocompletePopupProps,
@@ -15,36 +14,44 @@ import {
 	ComboboxRowProps as BaseAutocompleteRowProps,
 } from '@base-ui/react/combobox';
 import clsx from 'clsx';
-import { createContext, ReactNode, useContext } from 'react';
+import { ReactNode } from 'react';
 import { withClassName } from '../../hooks.js';
 import { PaletteName } from '../../uno/index.js';
 import { Button } from '../button/Button.js';
 import { Chip, ChipProps } from '../chip/Chip.js';
+import {
+	comboboxBackdropClassName,
+	ComboboxComposedInput,
+	comboboxEmptyClassName,
+	comboboxGroupClassName,
+	comboboxGroupItemClassName,
+	comboboxGroupItemListClassName,
+	comboboxGroupLabelClassName,
+	comboboxIconClassName,
+	ComboboxInputProps,
+	comboboxListClassName,
+	comboboxPopupClassName,
+	comboboxRowClassName,
+	ComboboxValueContext,
+} from '../combobox/Combobox.js';
 import { Icon } from '../icon/Icon.js';
-import { Input } from '../input/Input.js';
 import {
 	arrowClassName,
 	itemClassName,
-	itemListClassName,
-	popupClassName,
 	separatorClassName,
 } from '../primitives/menus.js';
 import { ArrowSvg } from '../utility/ArrowSvg.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
 
-const ValueContext = createContext<string | number | readonly string[] | null>(
-	null,
-);
-
 const AutocompleteRoot = (props: BaseAutocompleteRootProps<any>) => {
 	return (
-		<ValueContext.Provider value={props.value || null}>
+		<ComboboxValueContext.Provider value={props.value || null}>
 			<BaseAutocomplete.Root {...props} />
-		</ValueContext.Provider>
+		</ComboboxValueContext.Provider>
 	);
 };
 
-export interface AutocompleteInputProps extends BaseAutocompleteInputProps {
+export interface AutocompleteInputProps extends ComboboxInputProps {
 	ref?: React.Ref<HTMLInputElement>;
 	icon?: ReactNode;
 	disableCaret?: boolean;
@@ -56,47 +63,31 @@ const AutocompleteInput = ({
 	icon,
 	children,
 	disableClear,
-	...props
+	...outerProps
 }: AutocompleteInputProps) => {
-	const valueFromContext = useContext(ValueContext);
 	return (
 		<BaseAutocomplete.Input
-			render={({ ref, className, ...props }, state) => (
-				<Input.Border ref={ref} className={className}>
-					{icon}
-					<Input.Input autoComplete="off" {...props} />
-					{((!disableClear && valueFromContext !== null) || !disableCaret) && (
-						<div className="flex items-center">
-							{!disableClear && valueFromContext !== null && (
-								<AutocompleteClear />
-							)}
-							{!disableCaret && (
-								<BaseAutocomplete.Trigger
-									render={<Button emphasis="ghost" size="small" />}
-								>
-									<AutocompleteIcon data-open={state.open ? true : undefined} />
-								</BaseAutocomplete.Trigger>
-							)}
-						</div>
-					)}
+			render={(props, state) => (
+				<ComboboxComposedInput
+					{...props}
+					open={state.open}
+					disableCaret={disableCaret}
+					disableClear={disableClear}
+					icon={icon}
+				>
 					{children}
-				</Input.Border>
+				</ComboboxComposedInput>
 			)}
-			{...props}
+			{...outerProps}
 		/>
 	);
 };
 
-const AutocompleteIcon = withClassName(
+export const AutocompleteIcon = withClassName(
 	({ className, ...props }: BaseAutocompleteIconProps) => (
 		<BaseAutocomplete.Icon
 			{...props}
-			className={clsx(
-				'icon',
-				'layer-components:(flex shrink-0 items-center justify-center transition-transform)',
-				'layer-components:data-[open]:(rotate-180)',
-				className,
-			)}
+			className={clsx(comboboxIconClassName, className)}
 		>
 			<Icon name="chevron" />
 		</BaseAutocomplete.Icon>
@@ -105,13 +96,12 @@ const AutocompleteIcon = withClassName(
 
 const AutocompletePopup = withClassName(
 	BaseAutocomplete.Popup,
-	popupClassName,
-	'layer-components:(w-[--anchor-width])',
+	comboboxPopupClassName,
 );
 
 const AutocompleteBackdrop = withClassName(
 	BaseAutocomplete.Backdrop,
-	'layer-components:(fixed inset-0)',
+	comboboxBackdropClassName,
 );
 
 const AutocompleteArrow = ({ className, ...props }: AutocompleteArrowProps) => (
@@ -149,14 +139,12 @@ const AutocompleteContent = ({
 
 const AutocompleteList = withClassName(
 	BaseAutocomplete.List,
-	itemListClassName,
-	'layer-components:(flex flex-col overscroll-contain outline-none overflow-y-auto overflow-unstable)',
-	'layer-components:empty:(p-0)',
+	comboboxListClassName,
 );
 
 const AutocompleteEmpty = withClassName(
 	BaseAutocomplete.Empty,
-	'layer-components:[&:not(:empty)]:(p-sm text-sm color-gray-dark)',
+	comboboxEmptyClassName,
 );
 
 export interface AutocompleteItemProps extends BaseAutocompleteItemProps {
@@ -180,27 +168,24 @@ const AutocompleteGroup = ({
 	return (
 		<BaseAutocomplete.Group
 			{...props}
-			className={clsx(
-				'layer-components:(flex flex-col gap-xs overflow-hidden p-sm)',
-				className,
-			)}
+			className={clsx(comboboxGroupClassName, className)}
 		/>
 	);
 };
 
 const AutocompleteGroupItemList = withClassName(
 	SlotDiv,
-	'layer-components:(flex flex-row flex-wrap gap-xs)',
+	comboboxGroupItemListClassName,
 );
 
 const AutocompleteGroupLabel = withClassName(
 	BaseAutocomplete.GroupLabel,
-	'layer-components:(w-full px-xs text-xs font-medium uppercase color-gray-dark)',
+	comboboxGroupLabelClassName,
 );
 
 const AutocompleteRow: React.FC<BaseAutocompleteRowProps> = withClassName(
 	BaseAutocomplete.Row,
-	'layer-components:(flex items-center gap-xs)',
+	comboboxRowClassName,
 );
 
 const AutocompleteSeparator = withClassName(
@@ -224,12 +209,7 @@ function AutocompleteGroupItem({
 		<BaseAutocomplete.Item
 			render={replace ?? <Button render={<Chip render={render} />} />}
 			{...props}
-			className={clsx(
-				'palette-primary',
-				'layer-composed-2:(bg-white)',
-				'layer-composed-2:data-[highlighted]:(ring-2 bg-main-wash ring-primary)',
-				className,
-			)}
+			className={clsx(comboboxGroupItemClassName, className)}
 		/>
 	);
 }
@@ -238,7 +218,10 @@ export type AutocompleteClearProps = ButtonProps & {
 	ref?: React.Ref<HTMLButtonElement>;
 	children?: ReactNode;
 };
-const AutocompleteClear = ({ children, ...props }: AutocompleteClearProps) => (
+export const AutocompleteClear = ({
+	children,
+	...props
+}: AutocompleteClearProps) => (
 	<BaseAutocomplete.Clear
 		render={<Button emphasis="ghost" size="small" />}
 		{...props}
@@ -276,7 +259,7 @@ const baseSubComponents = {
 function createAutocomplete<TItem>() {
 	function TypedRoot(
 		props: Omit<BaseAutocompleteRootProps<TItem>, 'items'> & {
-			items: readonly TItem[];
+			items?: readonly TItem[];
 		},
 	) {
 		return <AutocompleteRoot {...(props as any)} />;
@@ -290,10 +273,7 @@ function createAutocomplete<TItem>() {
 	}
 	return Object.assign(TypedRoot, {
 		...baseSubComponents,
-		Input: AutocompleteInput,
-		Content: AutocompleteContent,
 		List: TypedList,
-		Empty: AutocompleteEmpty,
 		Item: AutocompleteItem,
 	});
 }

package/src/components/combobox/Combobox.stories.tsx

@@ -0,0 +1,289 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
+import { Combobox } from './Combobox.js';
+
+interface Args {
+	arrow?: boolean;
+	autoHighlight?: boolean;
+	creatable?: boolean;
+	highlightItemOnHover?: boolean;
+}
+
+const meta = {
+	title: 'Components/Combobox',
+	argTypes: {
+		arrow: {
+			control: 'boolean',
+			description: 'Whether to show the arrow on the Combobox popup.',
+			defaultValue: false,
+		},
+		autoHighlight: {
+			control: 'boolean',
+			description:
+				'If true, the first item will be automatically highlighted when the list opens.',
+			defaultValue: false,
+		},
+		highlightItemOnHover: {
+			control: 'boolean',
+			description:
+				'If true, items will be highlighted when hovered with the mouse.',
+			defaultValue: false,
+		},
+		creatable: {
+			control: 'boolean',
+			description:
+				'If true, the Combobox will allow creating new items based on user input.',
+			defaultValue: false,
+		},
+	},
+	args: {
+		arrow: false,
+		autoHighlight: false,
+		highlightItemOnHover: true,
+		creatable: false,
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<Args>;
+
+export default meta;
+
+type Story = StoryObj<Args>;
+
+export interface Item {
+	id: string;
+	label: string;
+}
+
+const items: Item[] = [
+	{ id: 'apple', label: 'Apple' },
+	{ id: 'banana', label: 'Banana' },
+	{ id: 'cherry', label: 'Cherry' },
+	{ id: 'date', label: 'Date' },
+	{ id: 'elderberry', label: 'Elderberry' },
+	{ id: 'fig', label: 'Fig' },
+	{ id: 'grape', label: 'Grape' },
+	{ id: 'honeydew', label: 'Honeydew' },
+];
+
+const ExampleCombobox = Combobox.create<Item>();
+
+export const Default: Story = {
+	render({ arrow, autoHighlight, highlightItemOnHover, creatable }) {
+		const [value, setValue] = useState<Item | null>(null);
+		const allItems =
+			value && items.includes(value)
+				? items
+				: value
+				? [value, ...items]
+				: items;
+		return (
+			<ExampleCombobox
+				value={value}
+				onValueChange={setValue}
+				items={allItems}
+				autoHighlight={autoHighlight}
+				highlightItemOnHover={highlightItemOnHover}
+				showCreatableItem={creatable}
+				onCreate={
+					creatable
+						? (value: string) => {
+								console.log('Creating item:', value);
+								setValue({ id: value, label: value });
+						  }
+						: undefined
+				}
+			>
+				<ExampleCombobox.Input
+					icon={<Icon name="food" />}
+					className="w-[200px]"
+				/>
+				<ExampleCombobox.Content arrow={arrow}>
+					<ExampleCombobox.List>
+						{(item) => (
+							<ExampleCombobox.Item key={item.id} value={item}>
+								{item.label}
+							</ExampleCombobox.Item>
+						)}
+					</ExampleCombobox.List>
+					<ExampleCombobox.Empty>No results found.</ExampleCombobox.Empty>
+				</ExampleCombobox.Content>
+			</ExampleCombobox>
+		);
+	},
+};
+
+interface ItemGroup {
+	category: string;
+	items: Item[];
+}
+const groupedItems: ItemGroup[] = [
+	{
+		category: 'Fruits',
+		items: [
+			{ id: 'apple', label: 'Apple' },
+			{ id: 'banana', label: 'Banana' },
+			{ id: 'cherry', label: 'Cherry' },
+		],
+	},
+	{
+		category: 'Berries',
+		items: [
+			{ id: 'strawberry', label: 'Strawberry' },
+			{ id: 'blueberry', label: 'Blueberry' },
+			{ id: 'raspberry', label: 'Raspberry' },
+		],
+	},
+];
+
+const GroupedCombobox = Combobox.createGrouped<ItemGroup>();
+
+export const Grouped: Story = {
+	render({ arrow, autoHighlight, highlightItemOnHover, creatable }) {
+		const [value, setValue] = useState<Item | null>(null);
+		const [input, setInput] = useState<string>('');
+		return (
+			<GroupedCombobox
+				value={value}
+				onValueChange={setValue}
+				inputValue={input}
+				onInputValueChange={setInput}
+				items={groupedItems}
+				autoHighlight={autoHighlight}
+				highlightItemOnHover={highlightItemOnHover}
+				onCreate={
+					creatable
+						? (value: string) => alert(`Create item: ${value}`)
+						: undefined
+				}
+			>
+				<GroupedCombobox.Input />
+				<GroupedCombobox.Content arrow={arrow}>
+					<GroupedCombobox.List>
+						{(group) => (
+							<GroupedCombobox.Group key={group.category}>
+								<GroupedCombobox.GroupLabel>
+									{group.category}
+								</GroupedCombobox.GroupLabel>
+								<GroupedCombobox.GroupList>
+									{group.items.map((item) => (
+										<GroupedCombobox.Item key={item.id} value={item}>
+											{item.label}
+										</GroupedCombobox.Item>
+									))}
+								</GroupedCombobox.GroupList>
+							</GroupedCombobox.Group>
+						)}
+					</GroupedCombobox.List>
+					<GroupedCombobox.Empty>
+						{creatable ? (
+							<div>
+								<Icon name="enterKey" /> Create "{input}"
+							</div>
+						) : (
+							`No results found.`
+						)}
+					</GroupedCombobox.Empty>
+					<GroupedCombobox.Separator />
+					<div className="p-sm text-xs color-gray-dark">
+						Select your favorite fruit or berry.
+						{creatable ? ' Enter creates a new item.' : ''}
+					</div>
+				</GroupedCombobox.Content>
+			</GroupedCombobox>
+		);
+	},
+};
+
+export const NotPopover: Story = {
+	render({ autoHighlight, highlightItemOnHover, creatable }) {
+		const [value, setValue] = useState<Item | null>(null);
+		return (
+			<GroupedCombobox
+				value={value}
+				onValueChange={setValue}
+				items={groupedItems}
+				autoHighlight={autoHighlight}
+				highlightItemOnHover={highlightItemOnHover}
+				onCreate={
+					creatable
+						? (value: string) => alert(`Create item: ${value}`)
+						: undefined
+				}
+			>
+				<Box border p surface="white" col>
+					<GroupedCombobox.Input disableCaret className="w-full" disableClear>
+						<Button size="small" emphasis="primary" className="aspect-1 h-full">
+							<Icon name="plus" />
+						</Button>
+					</GroupedCombobox.Input>
+					<GroupedCombobox.List>
+						{(group) => (
+							<GroupedCombobox.Group key={group.category}>
+								<GroupedCombobox.GroupLabel>
+									{group.category}
+								</GroupedCombobox.GroupLabel>
+								<GroupedCombobox.GroupList>
+									{group.items.map((item) => (
+										<GroupedCombobox.Item key={item.id} value={item}>
+											{item.label}
+										</GroupedCombobox.Item>
+									))}
+								</GroupedCombobox.GroupList>
+							</GroupedCombobox.Group>
+						)}
+					</GroupedCombobox.List>
+					<GroupedCombobox.Empty>No results found.</GroupedCombobox.Empty>
+				</Box>
+			</GroupedCombobox>
+		);
+	},
+};
+
+export const MultiSelect: Story = {
+	render({ arrow, autoHighlight, highlightItemOnHover, creatable }) {
+		const [value, setValue] = useState<Item[]>([]);
+		return (
+			<ExampleCombobox.Multi
+				multiple
+				value={value}
+				onValueChange={setValue}
+				items={items}
+				autoHighlight={autoHighlight}
+				highlightItemOnHover={highlightItemOnHover}
+				showCreatableItem={creatable}
+			>
+				<ExampleCombobox.Chips className="w-300px">
+					<ExampleCombobox.MultiValue>
+						{(items) => (
+							<>
+								<ExampleCombobox.ChipsList>
+									{items.map((item) => (
+										<ExampleCombobox.Chip key={item.id}>
+											{item.label}
+										</ExampleCombobox.Chip>
+									))}
+								</ExampleCombobox.ChipsList>
+								<ExampleCombobox.Input />
+							</>
+						)}
+					</ExampleCombobox.MultiValue>
+				</ExampleCombobox.Chips>
+				<ExampleCombobox.Content arrow={arrow}>
+					<ExampleCombobox.List>
+						{(item) => (
+							<ExampleCombobox.Item key={item.id} value={item}>
+								{item.label}
+							</ExampleCombobox.Item>
+						)}
+					</ExampleCombobox.List>
+					<ExampleCombobox.Empty>No results found.</ExampleCombobox.Empty>
+				</ExampleCombobox.Content>
+			</ExampleCombobox.Multi>
+		);
+	},
+};