untitledui 0.1.1

package/templates/default/src/components/shared/input-dropdown/input-dropdown.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import type { ReactNode, Ref, RefAttributes } from "react";
+import { createContext } from "react";
+import { ChevronDown, User01 } from "@untitledui/icons";
+import type { SelectProps as AriaSelectProps } from "react-aria-components";
+import { Button as AriaButton, ListBox as AriaListBox, Select as AriaSelect, SelectValue as AriaSelectValue } from "react-aria-components";
+import Dot from "@/components/foundations/dot-icon";
+import { cx } from "@/components/utils";
+import Avatar from "../avatar/avatar";
+import type { IconComponentType } from "../badges/badge-types";
+import HintText from "../inputs/hint-text";
+import Label from "../inputs/label";
+import { ComboBox } from "./combobox";
+import type { ListBoxItemIconProps } from "./dropdown-item";
+import Item from "./dropdown-item";
+import { Popover } from "./popover";
+
+export type SelectValueType = {
+    label: string;
+    value: string;
+    avatarUrl?: string;
+    isDisabled?: boolean;
+    supportingText?: string;
+    icon?: IconComponentType;
+};
+
+type Types = "default" | "iconLeading" | "avatarLeading" | "dotLeading" | "search" | "tags";
+type SelectTypes = "default" | "iconLeading" | "avatarLeading" | "dotLeading";
+
+export interface CommonProps {
+    hint?: string;
+    label?: string;
+    tooltip?: string;
+    size?: "sm" | "md";
+    placeholder?: string;
+}
+
+interface SelectProps extends Omit<AriaSelectProps<SelectValueType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    type?: SelectTypes;
+    items?: SelectValueType[];
+    popoverClassName?: string;
+    placeholderIcon?: IconComponentType;
+    children: ReactNode | ((item: SelectValueType) => ReactNode);
+}
+
+interface SelectValueProps {
+    isOpen: boolean;
+    size: "sm" | "md";
+    type: SelectTypes;
+    isFocused: boolean;
+    isDisabled: boolean;
+    placeholder?: string;
+    ref?: Ref<HTMLButtonElement>;
+    placeholderIcon?: IconComponentType;
+}
+
+export const sizes = {
+    sm: { root: "py-2 px-3", shortcut: "pr-2.5" },
+    md: { root: "py-2.5 px-3.5", shortcut: "pr-3" },
+};
+
+const selectIcons = {
+    default: () => <></>,
+    avatarLeading: ({ isDisabled }: ListBoxItemIconProps) => (
+        <User01 aria-hidden="true" className={cx("size-5 shrink-0 text-fg-quaternary", isDisabled && "text-fg-disabled")} />
+    ),
+    iconLeading: ({ icon: Icon = User01, isDisabled }: ListBoxItemIconProps) => (
+        <Icon aria-hidden="true" className={cx("size-5 shrink-0 text-fg-quaternary", isDisabled && "text-fg-disabled")} />
+    ),
+    dotLeading: ({ icon: Icon, isDisabled }: ListBoxItemIconProps) =>
+        Icon ? (
+            <Icon aria-hidden="true" className={cx("flex size-min shrink-0 text-fg-success-secondary", isDisabled && "text-fg-disabled_subtle")} />
+        ) : (
+            <Dot size="md" className={cx("flex size-min shrink-0 text-fg-success-secondary", isDisabled && "text-fg-disabled_subtle")} />
+        ),
+};
+
+const SelectValue = (props: SelectValueProps) => {
+    const Icon = selectIcons[props.type];
+
+    return (
+        <AriaButton
+            className={cx(
+                "relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-border-primary outline-hidden transition duration-100 ease-linear ring-inset",
+                (props.isFocused || props.isOpen) && "ring-2 ring-border-brand",
+                props.isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled",
+            )}
+        >
+            <AriaSelectValue<SelectValueType>
+                className={cx("flex h-max w-full items-center justify-start gap-2 truncate text-left align-middle", sizes[props.size].root)}
+            >
+                {(state) => (
+                    <>
+                        {state?.selectedItem?.avatarUrl ? (
+                            <Avatar size="xs" src={state.selectedItem.avatarUrl} alt={state.selectedItem.label} />
+                        ) : (
+                            <Icon {...state?.selectedItem} icon={state?.selectedItem?.icon || props.placeholderIcon} {...props} />
+                        )}
+
+                        {state.selectedItem ? (
+                            <section className="flex w-full gap-2 truncate">
+                                <p className="truncate tt-md-md text-primary">{state.selectedItem?.label}</p>
+                                {state.selectedItem?.supportingText && <p className="tt-md text-tertiary">{state.selectedItem?.supportingText}</p>}
+                            </section>
+                        ) : (
+                            <p className={cx("tt-md text-placeholder", props.isDisabled && "text-disabled")}>{props.placeholder}</p>
+                        )}
+
+                        <ChevronDown size={20} aria-hidden="true" className="ml-auto shrink-0 text-fg-quaternary" />
+                    </>
+                )}
+            </AriaSelectValue>
+        </AriaButton>
+    );
+};
+
+export const SelectContext = createContext<{ type: Types; size: "sm" | "md" }>({ type: "default", size: "sm" });
+
+export const Select = ({
+    type = "default",
+    placeholder = "Select",
+    placeholderIcon,
+    size = "sm",
+    children,
+    items,
+    label,
+    hint,
+    tooltip,
+    ...rest
+}: SelectProps) => {
+    const itemsWithId = items?.map((item) => ({ ...item, id: item.value }));
+
+    return (
+        <SelectContext.Provider value={{ type, size }}>
+            <AriaSelect {...rest}>
+                {(state) => (
+                    <div className="flex flex-col gap-1.5">
+                        {label && (
+                            <Label isRequired={state.isRequired} tooltip={tooltip}>
+                                {label}
+                            </Label>
+                        )}
+
+                        <SelectValue
+                            {...state}
+                            {...{ type, size, placeholder }}
+                            placeholderIcon={type === "avatarLeading" || type === "iconLeading" ? placeholderIcon || User01 : undefined}
+                        />
+
+                        <Popover size={size} className={rest.popoverClassName}>
+                            <AriaListBox items={itemsWithId} className="size-full outline-hidden">
+                                {children}
+                            </AriaListBox>
+                        </Popover>
+
+                        {hint && <HintText isInvalid={state.isInvalid}>{hint}</HintText>}
+                    </div>
+                )}
+            </AriaSelect>
+        </SelectContext.Provider>
+    );
+};
+
+const InputDropdown = Select as typeof Select & {
+    ComboBox: typeof ComboBox;
+    Item: typeof Item;
+};
+InputDropdown.ComboBox = ComboBox;
+InputDropdown.Item = Item;
+
+export { InputDropdown };

package/templates/default/src/components/shared/input-dropdown/multi-select.tsx

@@ -0,0 +1,373 @@
+"use client";
+
+import type { FocusEventHandler, KeyboardEvent, PointerEventHandler, RefAttributes } from "react";
+import { createContext, useCallback, useContext, useRef, useState } from "react";
+import { SearchLg } from "@untitledui/icons";
+import { FocusScope, useFilter, useFocusManager } from "react-aria";
+import type { ComboBoxProps as AriaComboBoxProps, ListBoxProps as AriaListBoxProps, Key } from "react-aria-components";
+import {
+    Button as AriaButton,
+    ComboBox as AriaComboBox,
+    Group as AriaGroup,
+    Input as AriaInput,
+    ListBox as AriaListBox,
+    ComboBoxStateContext,
+} from "react-aria-components";
+import { useHotkeys } from "react-hotkeys-hook";
+import type { ListData } from "react-stately";
+import { useListData } from "react-stately";
+import { cx } from "@/components/utils";
+import { useResizeObserver } from "@/hooks/use-resize-observer";
+import Avatar from "../avatar/avatar";
+import type { IconComponentType } from "../badges/badge-types";
+import HintText from "../inputs/hint-text";
+import Label from "../inputs/label";
+import { TagCloseX } from "../tags/base-components/tag-close-x";
+import DropdownItem from "./dropdown-item";
+import { type SelectValueType, sizes } from "./input-dropdown";
+import { Popover } from "./popover";
+
+const ComboboxContext = createContext<{
+    size: "sm" | "md";
+    selectedKeys: Key[];
+    selectedItems: ListData<SelectValueType>;
+    onRemove: (keys: Set<Key>) => void;
+    onInputChange: (value: string) => void;
+}>({
+    size: "sm",
+    selectedKeys: [],
+    selectedItems: {} as ListData<SelectValueType>,
+    onRemove: () => {},
+    onInputChange: () => {},
+});
+
+const InnerComboBox = ({ isDisabled, shortcut, shortcutClassName, placeholder }: ComboBoxValueProps) => {
+    const focusManager = useFocusManager();
+    const selectContext = useContext(ComboboxContext);
+
+    const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        const isCaretAtStart = event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0;
+
+        if (!isCaretAtStart && event.currentTarget.value !== "") {
+            return;
+        }
+
+        switch (event.key) {
+            case "Backspace":
+            case "ArrowLeft":
+                focusManager?.focusPrevious({ wrap: false, tabbable: false });
+                break;
+            case "ArrowRight":
+                focusManager?.focusNext({ wrap: false, tabbable: false });
+                break;
+        }
+    };
+
+    const handleTagKeyDown = (event: KeyboardEvent<HTMLButtonElement>, value: Key) => {
+        event.preventDefault();
+
+        const isFirstTag = selectContext?.selectedItems?.items?.[0]?.value === value;
+
+        switch (event.key) {
+            case " ":
+            case "Enter":
+            case "Backspace":
+                if (isFirstTag) {
+                    focusManager?.focusNext({ wrap: false, tabbable: false });
+                } else {
+                    focusManager?.focusPrevious({ wrap: false, tabbable: false });
+                }
+
+                selectContext.onRemove(new Set([value]));
+                break;
+
+            case "ArrowLeft":
+                focusManager?.focusPrevious({ wrap: false, tabbable: false });
+                break;
+            case "ArrowRight":
+                focusManager?.focusNext({ wrap: false, tabbable: false });
+                break;
+        }
+    };
+
+    const isSelectionEmpty = selectContext?.selectedItems?.items?.length === 0;
+
+    return (
+        <div className="relative flex w-full flex-1 flex-row flex-wrap items-center justify-start gap-1.5">
+            {!isSelectionEmpty &&
+                // TODO: Use <TagList /> here
+                selectContext?.selectedItems?.items?.map((value) => (
+                    <span key={value.value} className="flex items-center rounded-md bg-primary py-0.5 pr-1 pl-[5px] ring-1 ring-border-primary ring-inset">
+                        <Avatar size="xxs" alt={value?.label} src={value?.avatarUrl} />
+
+                        <p className="ml-[5px] truncate tt-sm-md whitespace-nowrap text-secondary select-none">{value?.label}</p>
+
+                        <TagCloseX
+                            size="md"
+                            isDisabled={isDisabled}
+                            className="ml-[3px]"
+                            // For workaround, onKeyDown is added to the button
+                            onKeyDown={(event) => handleTagKeyDown(event, value.value)}
+                            onPress={() => selectContext.onRemove(new Set([value.value]))}
+                        />
+                    </span>
+                ))}
+
+            <div className={cx("relative flex min-w-[20%] flex-1 flex-row items-center", !isSelectionEmpty && "ml-0.5", shortcut && "min-w-[30%]")}>
+                <AriaInput
+                    placeholder={placeholder}
+                    onKeyDown={handleInputKeyDown}
+                    className="w-full flex-[1_0_0] appearance-none bg-transparent tt-md text-ellipsis text-primary caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled"
+                />
+
+                {shortcut && (
+                    <div
+                        aria-hidden="true"
+                        className={cx(
+                            "absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
+                            shortcutClassName,
+                        )}
+                    >
+                        <span
+                            className={cx(
+                                "pointer-events-none rounded px-1 py-px tt-xs-md text-quaternary ring-1 ring-border-secondary select-none ring-inset",
+                                isDisabled && "bg-transparent text-disabled",
+                            )}
+                        >
+                            ⌘K
+                        </span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+interface ComboBoxValueProps extends RefAttributes<HTMLDivElement> {
+    size: "sm" | "md";
+    shortcut?: boolean;
+    isDisabled?: boolean;
+    placeholder?: string;
+    shortcutClassName?: string;
+    placeholderIcon?: IconComponentType | null;
+    onFocus?: FocusEventHandler;
+    onPointerEnter?: PointerEventHandler;
+}
+
+export const ComboBoxTagsValue = ({
+    size,
+    isDisabled,
+    shortcut,
+    placeholder,
+    shortcutClassName,
+    placeholderIcon: Icon = SearchLg,
+    ...otherProps
+}: ComboBoxValueProps) => {
+    const state = useContext(ComboBoxStateContext);
+
+    useHotkeys("meta+k", () => state?.setOpen(true), { enabled: !isDisabled && shortcut });
+
+    return (
+        <AriaGroup
+            {...otherProps}
+            className={({ isFocusWithin, isDisabled }) =>
+                cx(
+                    "relative flex w-full items-center gap-2 rounded-lg bg-primary shadow-xs ring-1 ring-border-primary outline-hidden transition duration-200 ease-in-out ring-inset",
+                    isDisabled && "cursor-not-allowed bg-disabled_subtle",
+                    isFocusWithin && "ring-2 ring-border-brand",
+                    sizes[size].root,
+                )
+            }
+        >
+            {Icon && (
+                <AriaButton>
+                    <Icon className="size-5 text-fg-quaternary" />
+                </AriaButton>
+            )}
+
+            <FocusScope contain={false} autoFocus={false} restoreFocus={false}>
+                <InnerComboBox size={size} isDisabled={isDisabled} shortcut={shortcut} shortcutClassName={shortcutClassName} placeholder={placeholder} />
+            </FocusScope>
+        </AriaGroup>
+    );
+};
+
+interface CommonProps {
+    hint?: string;
+    label?: string;
+    tooltip?: string;
+    size?: "sm" | "md";
+    placeholder?: string;
+}
+
+interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectValueType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    shortcut?: boolean;
+    items?: SelectValueType[];
+    popoverClassName?: string;
+    shortcutClassName?: string;
+    selectedItems: ListData<SelectValueType>;
+    placeholderIcon?: IconComponentType | null;
+    children: AriaListBoxProps<SelectValueType>["children"];
+    onItemCleared?: (key: Key) => void;
+    onItemInserted?: (key: Key) => void;
+}
+
+export const ComboBox = ({
+    name,
+    items,
+    children,
+    className,
+    size = "sm",
+    selectedItems,
+    onItemCleared,
+    onItemInserted,
+    shortcut,
+    placeholder = "Search",
+    ...props
+}: ComboBoxProps) => {
+    const { contains } = useFilter({ sensitivity: "base" });
+    const selectedKeys = selectedItems.items.map((i) => i?.value);
+
+    const filter = useCallback(
+        (item: SelectValueType, filterText: string) => {
+            return !selectedKeys.includes(item.value) && contains(item.value, filterText);
+        },
+        [contains, selectedKeys],
+    );
+
+    const accessibleList = useListData({
+        initialItems: items,
+        filter,
+    });
+
+    const [fieldState, setFieldState] = useState<{
+        selectedKey: Key | null;
+        inputValue: string;
+    }>({
+        selectedKey: null,
+        inputValue: "",
+    });
+
+    const onRemove = useCallback(
+        (keys: Set<Key>) => {
+            const key = keys.values().next().value;
+
+            if (!key) return;
+
+            selectedItems.remove(key);
+            onItemCleared?.(key);
+        },
+        [selectedItems, onItemCleared],
+    );
+
+    // TODO: `onSelectionChange` is being called on blur thus causing the already deleted item to reappear
+    const onSelectionChange = (id: Key | null) => {
+        if (!id) {
+            return;
+        }
+
+        const item = accessibleList.getItem(id);
+
+        if (!item) {
+            return;
+        }
+
+        if (!selectedKeys.includes(id as string)) {
+            selectedItems.append(item);
+            setFieldState({
+                inputValue: "",
+                selectedKey: id,
+            });
+            onItemInserted?.(id);
+        }
+
+        accessibleList.setFilterText("");
+    };
+
+    const onInputChange = (value: string) => {
+        setFieldState((prev) => ({
+            inputValue: value,
+            selectedKey: value === "" ? null : prev.selectedKey,
+        }));
+
+        accessibleList.setFilterText(value);
+    };
+
+    const placeholderRef = useRef<HTMLDivElement>(null);
+    const [popoverWidth, setPopoverWidth] = useState("");
+
+    // Resize observer for popover width
+    const onResize = useCallback(() => {
+        if (!placeholderRef.current) return;
+        let divRect = placeholderRef.current?.getBoundingClientRect();
+        setPopoverWidth(divRect.width + "px");
+    }, [placeholderRef, setPopoverWidth]);
+
+    useResizeObserver({
+        ref: placeholderRef,
+        onResize: onResize,
+        box: "border-box",
+    });
+
+    return (
+        <ComboboxContext.Provider
+            value={{
+                size,
+                selectedKeys,
+                selectedItems,
+                onInputChange,
+                onRemove,
+            }}
+        >
+            <AriaComboBox
+                allowsEmptyCollection
+                menuTrigger="focus"
+                items={accessibleList.items}
+                onInputChange={onInputChange}
+                inputValue={fieldState.inputValue}
+                selectedKey={fieldState.selectedKey}
+                onSelectionChange={onSelectionChange}
+                {...props}
+            >
+                {(state) => (
+                    <div className="flex flex-col gap-1.5">
+                        {props.label && (
+                            <Label isRequired={state.isRequired} tooltip={props.tooltip}>
+                                {props.label}
+                            </Label>
+                        )}
+
+                        <ComboBoxTagsValue
+                            size={size}
+                            shortcut={shortcut}
+                            ref={placeholderRef}
+                            placeholder={placeholder}
+                            // This is a workaround to correctly calculating the trigger width
+                            // while using ResizeObserver wasn't 100% reliable.
+                            onFocus={onResize}
+                            onPointerEnter={onResize}
+                            {...state}
+                            {...props}
+                        />
+
+                        <Popover size={"md"} triggerRef={placeholderRef} style={{ width: popoverWidth }} className={props?.popoverClassName}>
+                            <AriaListBox selectionMode="multiple" className="size-full outline-hidden">
+                                {children}
+                            </AriaListBox>
+                        </Popover>
+
+                        {props.hint && <HintText isInvalid={state.isInvalid}>{props.hint}</HintText>}
+                    </div>
+                )}
+            </AriaComboBox>
+        </ComboboxContext.Provider>
+    );
+};
+
+const MultiSelect = ComboBox as typeof ComboBox & {
+    Option: typeof DropdownItem;
+};
+
+MultiSelect.Option = DropdownItem;
+
+export { MultiSelect as MultiSelect };

package/templates/default/src/components/shared/input-dropdown/popover.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import type { RefAttributes } from "react";
+import type { PopoverProps as AriaPopoverProps } from "react-aria-components";
+import { Popover as AriaPopover } from "react-aria-components";
+import { cx } from "@/components/utils";
+
+interface PopoverProps extends AriaPopoverProps, RefAttributes<HTMLElement> {
+    size: "sm" | "md";
+}
+
+export const Popover = (props: PopoverProps) => {
+    return (
+        <AriaPopover
+            placement="bottom"
+            containerPadding={0}
+            offset={4}
+            {...props}
+            className={(state) =>
+                cx(
+                    "max-h-64! w-(--trigger-width) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-border-secondary_alt outline-hidden will-change-transform",
+
+                    // scrollbar styles
+                    // "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-alpha-black/15 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-primary [&::-webkit-scrollbar]:w-2",
+                    state.isEntering &&
+                        "ease-out animate-in animation-duration-150 fade-in placement-right:origin-left placement-right:slide-in-from-left-0.5 placement-top:origin-bottom placement-top:slide-in-from-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-in-from-top-0.5",
+                    state.isExiting &&
+                        "animation-duration-100 ease-in animate-out fade-out placement-right:origin-left placement-right:slide-out-to-left-0.5 placement-top:origin-bottom placement-top:slide-out-to-bottom-0.5 placement-bottom:origin-top placement-bottom:slide-out-to-top-0.5",
+                    props.size === "md" && "max-h-80!",
+
+                    typeof props.className === "function" ? props.className(state) : props.className,
+                )
+            }
+        />
+    );
+};

package/templates/default/src/components/shared/input-dropdown/select.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { type ChangeEventHandler, useId } from "react";
+import { ChevronDown } from "@untitledui/icons";
+import HintText from "../inputs/hint-text";
+import Label from "../inputs/label";
+
+export const NativeSelect = (props: {
+    label?: string;
+    hint?: string;
+    value?: string;
+    options: { label: string; value: string; disabled?: boolean }[];
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+}) => {
+    const id = useId();
+    const selectId = `select-native-${id}`;
+    const hintId = `select-native-hint-${id}`;
+
+    return (
+        <div className="w-full">
+            {props.label && (
+                <Label htmlFor={selectId} id={selectId} className="mb-1.5">
+                    {props.label}
+                </Label>
+            )}
+
+            <div className="relative grid w-full items-center">
+                <select
+                    id={selectId}
+                    value={props.value}
+                    defaultValue="default"
+                    onChange={props.onChange}
+                    aria-describedby={hintId}
+                    aria-labelledby={selectId}
+                    className="appearance-none rounded-lg bg-primary px-3.5 py-2.5 tt-md-md text-primary shadow-xs ring-1 ring-border-primary outline-hidden transition duration-200 ease-in-out ring-inset placeholder:text-fg-quaternary focus:ring-2 focus:ring-border-brand disabled:cursor-not-allowed disabled:bg-disabled_subtle disabled:text-disabled"
+                >
+                    <option value="default" disabled defaultChecked>
+                        Select team member
+                    </option>
+                    {props.options.map((opt) => (
+                        <option key={opt.value} value={opt.value}>
+                            {opt.label}
+                        </option>
+                    ))}
+                </select>
+                <span className="absolute right-3.5">
+                    <ChevronDown aria-hidden="true" size={20} className="text-fg-quaternary" />
+                </span>
+            </div>
+
+            {props.hint && (
+                <HintText className="mt-2" id={hintId}>
+                    {props.hint}
+                </HintText>
+            )}
+        </div>
+    );
+};
+
+NativeSelect.args = {
+    label: "Team member",
+    hint: "This is a hint text to help user.",
+};