@refraktor/core 0.0.4 → 0.0.5

package/src/components/select/select.test.tsx

@@ -1,190 +0,0 @@
-import { useState } from "react";
-import { describe, expect, it, vi } from "vitest";
-import { render, screen, userEvent, waitFor } from "../../vitest";
-import Select from "./select";
-
-describe("@refraktor/core/Select", () => {
-    const transitionProps = {
-        duration: 0,
-        immediate: true
-    } as const;
-
-    it("supports built-in data mode", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Select
-                placeholder="Pick framework"
-                transitionProps={transitionProps}
-                data={[
-                    { value: "react", label: "React" },
-                    { value: "vue", label: "Vue" }
-                ]}
-            />
-        );
-
-        const trigger = screen.getByRole("combobox");
-        expect(trigger).toHaveAttribute("placeholder", "Pick framework");
-
-        await user.click(trigger);
-        await user.click(screen.getByRole("option", { name: "React" }));
-
-        expect(trigger).toHaveValue("React");
-
-        await waitFor(() => {
-            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
-        });
-    });
-
-    it("renders defaultValue label in trigger before opening", async () => {
-        await render(
-            <Select
-                defaultValue="apple"
-                data={[
-                    { value: "apple", label: "Apple" },
-                    { value: "orange", label: "Orange" }
-                ]}
-            />
-        );
-
-        expect(screen.getByRole("combobox")).toHaveValue("Apple");
-    });
-
-    it("renders searchable input inside dropdown", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Select
-                searchable
-                transitionProps={transitionProps}
-                data={[
-                    { value: "react", label: "React" },
-                    { value: "vue", label: "Vue" },
-                    { value: "solid", label: "Solid" }
-                ]}
-            />
-        );
-
-        await user.click(screen.getByRole("combobox"));
-
-        const searchInput = screen.getByPlaceholderText("Search...");
-        expect(searchInput).toBeInTheDocument();
-
-        await user.type(searchInput, "vu");
-
-        expect(screen.getByRole("option", { name: "Vue" })).toBeInTheDocument();
-        expect(
-            screen.queryByRole("option", { name: "React" })
-        ).not.toBeInTheDocument();
-
-        await user.clear(searchInput);
-        await user.type(searchInput, "unknown");
-
-        expect(screen.getByText("No options")).toBeInTheDocument();
-    });
-
-    it("supports compound mode with groups", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Select.Root transitionProps={transitionProps}>
-                <Select.Trigger />
-
-                <Select.Dropdown>
-                    <Select.Group label="Frontend">
-                        <Select.Item value="react">React</Select.Item>
-                    </Select.Group>
-
-                    <Select.Group label="Backend">
-                        <Select.Item value="node">Node.js</Select.Item>
-                    </Select.Group>
-                </Select.Dropdown>
-            </Select.Root>
-        );
-
-        const trigger = screen.getByRole("combobox");
-
-        await user.click(trigger);
-        expect(screen.getByText("Frontend")).toBeInTheDocument();
-        expect(screen.getByText("Backend")).toBeInTheDocument();
-
-        await user.click(screen.getByRole("option", { name: "Node.js" }));
-        expect(trigger).toHaveValue("Node.js");
-    });
-
-    it("supports keyboard selection", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Select
-                transitionProps={transitionProps}
-                data={[
-                    { value: "react", label: "React" },
-                    { value: "vue", label: "Vue" }
-                ]}
-            />
-        );
-
-        const trigger = screen.getByRole("combobox");
-        trigger.focus();
-
-        await user.keyboard("{ArrowDown}");
-        await user.keyboard("{ArrowDown}");
-        await user.keyboard("{Enter}");
-
-        expect(trigger).toHaveValue("Vue");
-    });
-
-    it("supports controlled mode", async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-
-        function Demo() {
-            const [value, setValue] = useState<string | null>("react");
-
-            return (
-                <Select
-                    value={value}
-                    onChange={(nextValue) => {
-                        onChange(nextValue);
-                        setValue(nextValue);
-                    }}
-                    transitionProps={transitionProps}
-                    data={[
-                        { value: "react", label: "React" },
-                        { value: "vue", label: "Vue" }
-                    ]}
-                />
-            );
-        }
-
-        await render(<Demo />);
-
-        await user.click(screen.getByRole("combobox"));
-        await user.click(screen.getByRole("option", { name: "Vue" }));
-
-        expect(onChange).toHaveBeenCalledWith("vue");
-        expect(screen.getByRole("combobox")).toHaveValue("Vue");
-    });
-
-    it("supports input wrapper props", async () => {
-        await render(
-            <Select
-                label="Framework"
-                description="Pick one option"
-                error="Selection is required"
-                transitionProps={transitionProps}
-                data={[
-                    { value: "react", label: "React" },
-                    { value: "vue", label: "Vue" }
-                ]}
-            />
-        );
-
-        const trigger = screen.getByLabelText("Framework");
-
-        expect(trigger).toHaveAttribute("aria-invalid", "true");
-        expect(screen.getByText("Pick one option")).toBeInTheDocument();
-        expect(screen.getByText("Selection is required")).toBeInTheDocument();
-    });
-});

package/src/components/select/select.tsx

@@ -1,82 +0,0 @@
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory
-} from "../../utils";
-import { SelectDropdown } from "./select-dropdown";
-import { SelectGroup } from "./select-group";
-import { SelectItem } from "./select-item";
-import { SelectRoot } from "./select-root";
-import { SelectTrigger } from "./select-trigger";
-import type {
-    SelectClassNames,
-    SelectData,
-    SelectFactoryPayload,
-    SelectGroupData,
-    SelectProps
-} from "./select.types";
-
-function isGroupData(item: SelectData): item is SelectGroupData {
-    return "items" in item;
-}
-
-const Select = factory<SelectFactoryPayload>((_props, ref) => {
-    const { data, children, ...props } = _props;
-
-    if (children !== undefined && children !== null) {
-        return (
-            <SelectRoot ref={ref} {...props}>
-                {children}
-            </SelectRoot>
-        );
-    }
-
-    return (
-        <SelectRoot ref={ref} {...props}>
-            <SelectTrigger />
-
-            <SelectDropdown>
-                {(data ?? []).map((entry, index) => {
-                    if (isGroupData(entry)) {
-                        return (
-                            <SelectGroup key={`group-${index}`} label={entry.label}>
-                                {entry.items.map((item) => (
-                                    <SelectItem
-                                        key={item.value}
-                                        value={item.value}
-                                        disabled={item.disabled}
-                                        textValue={item.textValue}
-                                    >
-                                        {item.label}
-                                    </SelectItem>
-                                ))}
-                            </SelectGroup>
-                        );
-                    }
-
-                    return (
-                        <SelectItem
-                            key={entry.value}
-                            value={entry.value}
-                            disabled={entry.disabled}
-                            textValue={entry.textValue}
-                        >
-                            {entry.label}
-                        </SelectItem>
-                    );
-                })}
-            </SelectDropdown>
-        </SelectRoot>
-    );
-});
-
-Select.displayName = "@refraktor/core/Select";
-Select.configure = createComponentConfig<SelectProps>();
-Select.classNames = createClassNamesConfig<SelectClassNames>();
-Select.Root = SelectRoot;
-Select.Trigger = SelectTrigger;
-Select.Dropdown = SelectDropdown;
-Select.Group = SelectGroup;
-Select.Item = SelectItem;
-
-export default Select;

package/src/components/select/select.types.ts

@@ -1,272 +0,0 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-import type {
-    FlipOptions,
-    InlineOptions,
-    Placement,
-    ShiftOptions
-} from "@floating-ui/react";
-import type { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import type { TransitionProps } from "../transition";
-import type { InputVariant } from "../input";
-import type { SelectRoot } from "./select-root";
-import type { SelectTrigger } from "./select-trigger";
-import type { SelectDropdown } from "./select-dropdown";
-import type { SelectGroup } from "./select-group";
-import type { SelectItem } from "./select-item";
-
-export type SelectClassNames = {
-    root?: string;
-    trigger?: string;
-    triggerInput?: string;
-    triggerIcon?: string;
-    dropdown?: string;
-    search?: string;
-    searchInput?: string;
-    options?: string;
-    group?: string;
-    groupLabel?: string;
-    item?: string;
-    itemLabel?: string;
-    itemCheck?: string;
-    empty?: string;
-};
-
-export type SelectPositioning = {
-    /** The placement of the dropdown relative to the trigger @default `bottom-start` */
-    placement?: Placement;
-
-    /** Offset distance from the trigger in pixels @default `4` */
-    offset?: number;
-};
-
-export type SelectMiddlewares = {
-    shift?: boolean | ShiftOptions;
-    flip?: boolean | FlipOptions;
-    inline?: boolean | InlineOptions;
-};
-
-export interface SelectItemData {
-    /** Option value */
-    value: string;
-
-    /** Option label */
-    label: ReactNode;
-
-    /** Optional searchable text for non-string labels */
-    textValue?: string;
-
-    /** Whether the option is disabled */
-    disabled?: boolean;
-}
-
-export interface SelectGroupData {
-    /** Group label */
-    label?: ReactNode;
-
-    /** Group items */
-    items: SelectItemData[];
-}
-
-export type SelectData = SelectItemData | SelectGroupData;
-
-export interface SelectRootProps
-    extends Omit<
-        ComponentPropsWithoutRef<"div">,
-        "value" | "defaultValue" | "onChange"
-    > {
-    /** Children containing select subcomponents */
-    children: ReactNode;
-
-    /** Label text */
-    label?: ReactNode;
-
-    /** Description text */
-    description?: ReactNode;
-
-    /** Error message */
-    error?: ReactNode;
-
-    /** Whether the field is required */
-    required?: boolean;
-
-    /** Display an asterisk next to the label */
-    withAsterisk?: boolean;
-
-    /** Selected value (controlled) */
-    value?: string | null;
-
-    /** Initial selected value (uncontrolled) */
-    defaultValue?: string | null;
-
-    /** Callback called when selected value changes */
-    onChange?: (value: string | null) => void;
-
-    /** Dropdown open state (controlled) */
-    opened?: boolean;
-
-    /** Initial dropdown open state (uncontrolled) */
-    defaultOpened?: boolean;
-
-    /** Callback called when dropdown open state changes */
-    onOpenedChange?: (opened: boolean) => void;
-
-    /** Positioning settings */
-    positioning?: SelectPositioning;
-
-    /** Floating middleware settings */
-    middlewares?: SelectMiddlewares;
-
-    /** Whether select is disabled @default `false` */
-    disabled?: boolean;
-
-    /** Whether to render searchable input inside dropdown @default `false` */
-    searchable?: boolean;
-
-    /** Search query (controlled) */
-    searchValue?: string;
-
-    /** Initial search query (uncontrolled) */
-    defaultSearchValue?: string;
-
-    /** Callback called when search query changes */
-    onSearchChange?: (value: string) => void;
-
-    /** Trigger placeholder text @default `Select option` */
-    placeholder?: string;
-
-    /** Search input placeholder @default `Search...` */
-    searchPlaceholder?: string;
-
-    /** Content rendered when no options match @default `No options` */
-    nothingFound?: ReactNode;
-
-    /** Trigger and search input size @default `md` */
-    size?: RefraktorSize;
-
-    /** Trigger and search input radius @default `default` */
-    radius?: RefraktorRadius;
-
-    /** Trigger and search input variant @default `default` */
-    variant?: InputVariant;
-
-    /** Whether to render dropdown in portal @default `true` */
-    withinPortal?: boolean;
-
-    /** Whether to close on click outside @default `true` */
-    closeOnClickOutside?: boolean;
-
-    /** Whether to close on Escape key @default `true` */
-    closeOnEscape?: boolean;
-
-    /** Transition props for dropdown, uses Transition internally */
-    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: SelectClassNames;
-}
-
-export interface SelectTriggerProps extends ComponentPropsWithoutRef<"div"> {
-    /** Trigger placeholder override */
-    placeholder?: string;
-
-    /** Optional custom right section */
-    rightSection?: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface SelectDropdownProps extends ComponentPropsWithoutRef<"div"> {
-    /** Content displayed inside dropdown */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface SelectGroupProps extends ComponentPropsWithoutRef<"div"> {
-    /** Group label */
-    label?: ReactNode;
-
-    /** Group content */
-    children: ReactNode;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface SelectItemProps
-    extends Omit<ComponentPropsWithoutRef<"button">, "value" | "onSelect"> {
-    /** Option value */
-    value: string;
-
-    /** Option content */
-    children: ReactNode;
-
-    /** Callback called when option is selected */
-    onSelect?: (value: string) => void;
-
-    /** Optional searchable text for non-string children */
-    textValue?: string;
-
-    /** Whether option is disabled */
-    disabled?: boolean;
-
-    /** Used for editing root class name */
-    className?: string;
-}
-
-export interface SelectProps extends Omit<SelectRootProps, "children"> {
-    /** Compound children. If provided, data-based rendering is skipped */
-    children?: ReactNode;
-
-    /** Data used for built-in rendering mode */
-    data?: SelectData[];
-}
-
-export interface SelectFactoryPayload extends FactoryPayload {
-    props: SelectProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<SelectProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<SelectClassNames>>;
-        Root: typeof SelectRoot;
-        Trigger: typeof SelectTrigger;
-        Dropdown: typeof SelectDropdown;
-        Group: typeof SelectGroup;
-        Item: typeof SelectItem;
-    };
-}
-
-export interface SelectRootFactoryPayload extends FactoryPayload {
-    props: SelectRootProps;
-    ref: HTMLDivElement;
-}
-
-export interface SelectTriggerFactoryPayload extends FactoryPayload {
-    props: SelectTriggerProps;
-    ref: HTMLDivElement;
-}
-
-export interface SelectDropdownFactoryPayload extends FactoryPayload {
-    props: SelectDropdownProps;
-    ref: HTMLDivElement;
-}
-
-export interface SelectGroupFactoryPayload extends FactoryPayload {
-    props: SelectGroupProps;
-    ref: HTMLDivElement;
-}
-
-export interface SelectItemFactoryPayload extends FactoryPayload {
-    props: SelectItemProps;
-    ref: HTMLButtonElement;
-}

package/src/components/select/use-select.ts

@@ -1,170 +0,0 @@
-import { useUncontrolled } from "@refraktor/utils";
-import {
-    autoUpdate,
-    flip,
-    FloatingContext,
-    inline,
-    Middleware,
-    offset,
-    Placement,
-    shift,
-    useClick,
-    useDismiss,
-    useFloating,
-    useInteractions
-} from "@floating-ui/react";
-import { useCallback, useMemo } from "react";
-import type { SelectMiddlewares, SelectPositioning } from "./select.types";
-
-interface UseSelectProps {
-    opened?: boolean;
-    defaultOpened?: boolean;
-    onOpenedChange?: (opened: boolean) => void;
-    positioning?: SelectPositioning;
-    middlewares?: SelectMiddlewares;
-    disabled?: boolean;
-    closeOnClickOutside?: boolean;
-    closeOnEscape?: boolean;
-}
-
-export interface UseSelectReturn {
-    opened: boolean;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-    context: FloatingContext;
-    refs: {
-        setReference: (node: HTMLElement | null) => void;
-        setFloating: (node: HTMLElement | null) => void;
-        reference: React.MutableRefObject<HTMLElement | null>;
-        floating: React.MutableRefObject<HTMLElement | null>;
-    };
-    floatingStyles: React.CSSProperties;
-    getReferenceProps: (
-        userProps?: React.HTMLAttributes<HTMLElement>
-    ) => Record<string, unknown>;
-    getFloatingProps: (
-        userProps?: React.HTMLAttributes<HTMLElement>
-    ) => Record<string, unknown>;
-    placement: Placement;
-}
-
-export function useSelect(options: UseSelectProps = {}): UseSelectReturn {
-    const {
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        positioning = {
-            placement: "bottom-start",
-            offset: 4
-        },
-        middlewares = { flip: true, shift: true },
-        disabled = false,
-        closeOnClickOutside = true,
-        closeOnEscape = true
-    } = options;
-
-    const [isOpen, setIsOpen] = useUncontrolled({
-        value: opened,
-        defaultValue: defaultOpened,
-        finalValue: false,
-        onChange: onOpenedChange
-    });
-
-    const middleware = useMemo(() => {
-        const middlewareList: Middleware[] = [];
-
-        middlewareList.push(offset(positioning.offset ?? 4));
-
-        if (middlewares.flip) {
-            middlewareList.push(
-                flip(
-                    typeof middlewares.flip === "boolean"
-                        ? undefined
-                        : middlewares.flip
-                )
-            );
-        }
-
-        if (middlewares.shift) {
-            middlewareList.push(
-                shift(
-                    typeof middlewares.shift === "boolean"
-                        ? undefined
-                        : middlewares.shift
-                )
-            );
-        }
-
-        if (middlewares.inline) {
-            middlewareList.push(
-                inline(
-                    typeof middlewares.inline === "boolean"
-                        ? undefined
-                        : middlewares.inline
-                )
-            );
-        }
-
-        return middlewareList;
-    }, [positioning.offset, middlewares]);
-
-    const floating = useFloating({
-        placement: positioning.placement,
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        middleware,
-        whileElementsMounted: autoUpdate,
-        strategy: "fixed"
-    });
-
-    const click = useClick(floating.context, {
-        enabled: !disabled
-    });
-
-    const dismiss = useDismiss(floating.context, {
-        outsidePress: closeOnClickOutside,
-        escapeKey: closeOnEscape
-    });
-
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        click,
-        dismiss
-    ]);
-
-    const open = useCallback(() => {
-        if (!disabled) {
-            setIsOpen(true);
-        }
-    }, [disabled, setIsOpen]);
-
-    const close = useCallback(() => {
-        setIsOpen(false);
-    }, [setIsOpen]);
-
-    const toggle = useCallback(() => {
-        if (!disabled) {
-            setIsOpen(!isOpen);
-        }
-    }, [disabled, isOpen, setIsOpen]);
-
-    return {
-        opened: isOpen,
-        open,
-        close,
-        toggle,
-        context: floating.context,
-        refs: {
-            setReference: floating.refs.setReference,
-            setFloating: floating.refs.setFloating,
-            reference: floating.refs
-                .reference as React.MutableRefObject<HTMLElement | null>,
-            floating: floating.refs
-                .floating as React.MutableRefObject<HTMLElement | null>
-        },
-        floatingStyles: floating.floatingStyles,
-        getReferenceProps,
-        getFloatingProps,
-        placement: floating.placement
-    };
-}