untitledui 0.1.2 → 0.1.3

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

@@ -1,172 +0,0 @@
-"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 };