@refraktor/core 0.0.1

package/src/components/select/select-item/select-item.tsx

@@ -0,0 +1,158 @@
+import { useId } from "@refraktor/utils";
+import { useCallback, useEffect, useRef } from "react";
+import type { MutableRefObject } from "react";
+import { CheckIcon } from "../../../icons";
+import { getRadius, useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import {
+    getNodeTextValue,
+    useSelectContext,
+    useSelectGroupContext
+} from "../select.context";
+import type { SelectItemFactoryPayload } from "../select.types";
+
+const SelectItem = factory<SelectItemFactoryPayload>(
+    (
+        {
+            id,
+            value,
+            children,
+            disabled,
+            textValue,
+            className,
+            onClick,
+            onMouseMove,
+            onKeyDown,
+            onSelect,
+            ...props
+        },
+        ref
+    ) => {
+        const { cx } = useTheme();
+        const select = useSelectContext();
+        const group = useSelectGroupContext();
+
+        const _id = useId(id);
+        const itemRef = useRef<HTMLButtonElement | null>(null);
+
+        const resolvedTextValue =
+            getNodeTextValue(children, textValue) || value;
+        const isVisible = select.isSearchMatch(resolvedTextValue);
+        const isSelected = select.value === value;
+
+        const handleSelect = useCallback(() => {
+            if (disabled) {
+                return;
+            }
+
+            select.selectValue(value, resolvedTextValue);
+            onSelect?.(value);
+        }, [disabled, onSelect, resolvedTextValue, select.selectValue, value]);
+
+        useEffect(() => {
+            return select.registerItem({
+                id: _id,
+                value,
+                ref: itemRef as MutableRefObject<HTMLElement | null>,
+                disabled: !!disabled,
+                label: resolvedTextValue,
+                textValue: resolvedTextValue,
+                groupId: group?.groupId,
+                select: handleSelect
+            });
+        }, [
+            _id,
+            disabled,
+            group?.groupId,
+            handleSelect,
+            resolvedTextValue,
+            select.registerItem,
+            value
+        ]);
+
+        return (
+            <button
+                ref={(node) => {
+                    itemRef.current = node;
+
+                    if (typeof ref === "function") {
+                        ref(node);
+                    } else if (ref) {
+                        ref.current = node;
+                    }
+                }}
+                id={_id}
+                type="button"
+                role="option"
+                tabIndex={-1}
+                disabled={disabled}
+                hidden={!isVisible}
+                data-selected={isSelected}
+                data-disabled={disabled}
+                aria-selected={isSelected}
+                aria-disabled={disabled}
+                className={cx(
+                    "w-full text-left p-1.5 text-sm rounded-none appearance-none border-none bg-transparent",
+                    "inline-flex items-center gap-2 outline-none transition-colors",
+                    "hover:bg-[var(--refraktor-bg-hover)] focus-visible:bg-[var(--refraktor-bg-hover)]",
+                    "data-[selected=true]:bg-[var(--refraktor-bg-hover)]",
+                    "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",
+                    getRadius(select.radius),
+                    select.getStyles("item"),
+                    className
+                )}
+                onMouseMove={(event) => {
+                    onMouseMove?.(event);
+
+                    if (
+                        !disabled &&
+                        document.activeElement !== event.currentTarget
+                    ) {
+                        event.currentTarget.focus();
+                    }
+                }}
+                onClick={(event) => {
+                    onClick?.(event);
+
+                    if (event.defaultPrevented) {
+                        return;
+                    }
+
+                    handleSelect();
+                }}
+                onKeyDown={(event) => {
+                    onKeyDown?.(event);
+
+                    if (event.defaultPrevented || disabled) {
+                        return;
+                    }
+
+                    if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        handleSelect();
+                    }
+                }}
+                {...props}
+            >
+                <span className={cx("flex-1", select.getStyles("itemLabel"))}>
+                    {children}
+                </span>
+
+                {isSelected && (
+                    <span
+                        className={cx(
+                            "inline-flex items-center shrink-0 text-[var(--refraktor-primary)]",
+                            select.getStyles("itemCheck")
+                        )}
+                    >
+                        <CheckIcon size={14} />
+                    </span>
+                )}
+            </button>
+        );
+    }
+);
+
+SelectItem.displayName = "@refraktor/core/Select.Item";
+
+export default SelectItem;

package/src/components/select/select-root/index.ts

@@ -0,0 +1 @@
+export { default as SelectRoot } from "./select-root";

package/src/components/select/select-root/select-root.tsx

@@ -0,0 +1,257 @@
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useCallback, useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory, useClassNames, useProps } from "../../../utils";
+import {
+    focusSelectItem,
+    getNavigableSelectItems,
+    SelectProvider,
+    useSelectItemsRegistry
+} from "../select.context";
+import type {
+    SelectContextValue,
+    SelectItemRegistration
+} from "../select.context";
+import type {
+    SelectClassNames,
+    SelectRootFactoryPayload,
+    SelectRootProps
+} from "../select.types";
+import { useSelect } from "../use-select";
+
+const defaultProps = {
+    positioning: {
+        placement: "bottom-start",
+        offset: 4
+    },
+    middlewares: { flip: true, shift: true },
+    searchable: false,
+    placeholder: "Select option",
+    searchPlaceholder: "Search...",
+    nothingFound: "No options",
+    size: "md",
+    radius: "default",
+    variant: "default",
+    withinPortal: true,
+    closeOnClickOutside: true,
+    closeOnEscape: true
+} satisfies Partial<SelectRootProps>;
+
+const SelectRoot = factory<SelectRootFactoryPayload>((_props, ref) => {
+    const { cx } = useTheme();
+    const {
+        id,
+        children,
+        value,
+        defaultValue,
+        onChange,
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        searchable,
+        searchValue,
+        defaultSearchValue,
+        onSearchChange,
+        placeholder,
+        searchPlaceholder,
+        nothingFound,
+        size,
+        radius,
+        variant,
+        withinPortal,
+        closeOnClickOutside,
+        closeOnEscape,
+        transitionProps,
+        className,
+        classNames,
+        ...props
+    } = useProps("Select", defaultProps, _props);
+    const classes = useClassNames("Select", classNames);
+
+    const _id = useId(id);
+    const listId = `${_id}-listbox`;
+    const triggerId = `${_id}-trigger`;
+
+    const [selectedValue, setSelectedValue] = useUncontrolled<string | null>({
+        value,
+        defaultValue,
+        finalValue: null,
+        onChange
+    });
+
+    const [search, setSearch] = useUncontrolled<string>({
+        value: searchValue,
+        defaultValue: defaultSearchValue,
+        finalValue: "",
+        onChange: onSearchChange
+    });
+
+    const select = useSelect({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        closeOnClickOutside,
+        closeOnEscape
+    });
+
+    const { registerItem: registerRegistryItem, getItems } =
+        useSelectItemsRegistry();
+    const labelsRef = useRef(new Map<string, string>());
+    const triggerInputRef = useRef<HTMLInputElement | null>(null);
+    const searchInputRef = useRef<HTMLInputElement | null>(null);
+
+    const normalizedSearch = search.trim().toLowerCase();
+
+    const isSearchMatch = useCallback(
+        (textValue: string) => {
+            if (!normalizedSearch) {
+                return true;
+            }
+
+            return textValue.toLowerCase().includes(normalizedSearch);
+        },
+        [normalizedSearch]
+    );
+
+    const getVisibleItems = useCallback(
+        () => getItems().filter((item) => isSearchMatch(item.textValue)),
+        [getItems, isSearchMatch]
+    );
+
+    const hasVisibleItems = useCallback(
+        () => getVisibleItems().length > 0,
+        [getVisibleItems]
+    );
+
+    const isGroupVisible = useCallback(
+        (groupId: string) => {
+            if (!normalizedSearch) {
+                return true;
+            }
+
+            const groupItems = getItems().filter(
+                (item) => item.groupId === groupId
+            );
+
+            if (!groupItems.length) {
+                return true;
+            }
+
+            return groupItems.some((item) => isSearchMatch(item.textValue));
+        },
+        [getItems, isSearchMatch, normalizedSearch]
+    );
+
+    const getSelectedLabel = useCallback(() => {
+        if (!selectedValue) {
+            return "";
+        }
+
+        return labelsRef.current.get(selectedValue) ?? selectedValue;
+    }, [selectedValue]);
+
+    const focusFirstItem = useCallback(() => {
+        const items = getNavigableSelectItems(getVisibleItems());
+        focusSelectItem(items[0]);
+    }, [getVisibleItems]);
+
+    const focusLastItem = useCallback(() => {
+        const items = getNavigableSelectItems(getVisibleItems());
+        focusSelectItem(items[items.length - 1]);
+    }, [getVisibleItems]);
+
+    const focusSelectedOrFirstItem = useCallback(() => {
+        const items = getNavigableSelectItems(getVisibleItems());
+
+        if (!items.length) {
+            return;
+        }
+
+        const selectedItem = items.find((item) => item.value === selectedValue);
+        focusSelectItem(selectedItem ?? items[0]);
+    }, [getVisibleItems, selectedValue]);
+
+    const selectValue = useCallback(
+        (nextValue: string, label: string) => {
+            labelsRef.current.set(nextValue, label);
+            setSelectedValue(nextValue);
+            select.close();
+        },
+        [select, setSelectedValue]
+    );
+
+    const registerItem = useCallback(
+        (item: SelectItemRegistration) => {
+            labelsRef.current.set(item.value, item.label);
+            return registerRegistryItem(item);
+        },
+        [registerRegistryItem]
+    );
+
+    useEffect(() => {
+        if (!select.opened && search) {
+            setSearch("");
+        }
+    }, [search, select.opened, setSearch]);
+
+    const getStyles = useCallback(
+        (part: keyof SelectClassNames) => classes[part],
+        [classes]
+    );
+
+    const context: SelectContextValue = {
+        select,
+        value: selectedValue,
+        selectValue,
+        searchable: !!searchable,
+        search,
+        setSearch,
+        placeholder,
+        searchPlaceholder,
+        nothingFound,
+        disabled: !!disabled,
+        size,
+        radius,
+        variant,
+        withinPortal: !!withinPortal,
+        transitionProps,
+        listId,
+        triggerId,
+        triggerInputRef,
+        searchInputRef,
+        registerItem,
+        getItems,
+        getVisibleItems,
+        hasVisibleItems,
+        isSearchMatch,
+        isGroupVisible,
+        getSelectedLabel,
+        focusFirstItem,
+        focusLastItem,
+        focusSelectedOrFirstItem,
+        getStyles
+    };
+
+    return (
+        <SelectProvider value={context}>
+            <div
+                ref={ref}
+                id={_id}
+                className={cx("relative w-full", classes.root, className)}
+                {...props}
+            >
+                {children}
+            </div>
+        </SelectProvider>
+    );
+});
+
+SelectRoot.displayName = "@refraktor/core/Select.Root";
+
+export default SelectRoot;

package/src/components/select/select-trigger/index.ts

@@ -0,0 +1 @@
+export { default as SelectTrigger } from "./select-trigger";

package/src/components/select/select-trigger/select-trigger.tsx

@@ -0,0 +1,121 @@
+import { ChevronIcon } from "../../../icons";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { InputField } from "../../input/input-field";
+import { useSelectContext } from "../select.context";
+import type { SelectTriggerFactoryPayload } from "../select.types";
+
+const SelectTrigger = factory<SelectTriggerFactoryPayload>(
+    ({ className, placeholder, rightSection, onKeyDown, ...props }, ref) => {
+        const { cx } = useTheme();
+        const select = useSelectContext();
+
+        const hasValue = !!select.value;
+        const selectedLabel = select.getSelectedLabel();
+
+        return (
+            <div
+                ref={(node) => {
+                    select.select.refs.setReference(node);
+
+                    if (typeof ref === "function") {
+                        ref(node);
+                    } else if (ref) {
+                        ref.current = node;
+                    }
+                }}
+                className={cx("w-full", select.getStyles("trigger"), className)}
+                data-opened={select.select.opened}
+                {...select.select.getReferenceProps({
+                    onKeyDown: (event: React.KeyboardEvent) => {
+                        onKeyDown?.(event as any);
+
+                        if (event.defaultPrevented || select.disabled) {
+                            return;
+                        }
+
+                        if (event.key === "ArrowDown") {
+                            event.preventDefault();
+
+                            if (!select.select.opened) {
+                                select.select.open();
+                            }
+
+                            requestAnimationFrame(select.focusFirstItem);
+                            return;
+                        }
+
+                        if (event.key === "ArrowUp") {
+                            event.preventDefault();
+
+                            if (!select.select.opened) {
+                                select.select.open();
+                            }
+
+                            requestAnimationFrame(select.focusLastItem);
+                            return;
+                        }
+
+                        if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+
+                            if (!select.select.opened) {
+                                select.select.open();
+                            } else {
+                                select.select.close();
+                            }
+                            return;
+                        }
+
+                        if (event.key === "Escape" && select.select.opened) {
+                            event.preventDefault();
+                            select.select.close();
+                        }
+                    }
+                })}
+                {...props}
+            >
+                <InputField
+                    id={select.triggerId}
+                    ref={(node) => {
+                        select.triggerInputRef.current = node;
+                    }}
+                    readOnly
+                    disabled={select.disabled}
+                    value={hasValue ? selectedLabel : ""}
+                    placeholder={hasValue ? undefined : placeholder ?? select.placeholder}
+                    size={select.size}
+                    radius={select.radius}
+                    variant={select.variant}
+                    role="combobox"
+                    aria-expanded={select.select.opened}
+                    aria-controls={select.listId}
+                    aria-haspopup="listbox"
+                    aria-autocomplete={select.searchable ? "list" : "none"}
+                    aria-disabled={select.disabled}
+                    className={cx(
+                        "cursor-pointer",
+                        select.getStyles("triggerInput")
+                    )}
+                    rightSection={
+                        rightSection ?? (
+                            <ChevronIcon
+                                direction="down"
+                                size={14}
+                                className={cx(
+                                    "transition-transform",
+                                    select.select.opened && "rotate-180",
+                                    select.getStyles("triggerIcon")
+                                )}
+                            />
+                        )
+                    }
+                />
+            </div>
+        );
+    }
+);
+
+SelectTrigger.displayName = "@refraktor/core/Select.Trigger";
+
+export default SelectTrigger;

package/src/components/select/select.context.ts

@@ -0,0 +1,138 @@
+import { createOptionalContext, createSafeContext } from "@refraktor/utils";
+import { useCallback, useRef } from "react";
+import type { MutableRefObject, ReactNode } from "react";
+import type { RefraktorRadius, RefraktorSize } from "../../theme";
+import type { InputVariant } from "../input";
+import type { TransitionProps } from "../transition";
+import type { SelectClassNames } from "./select.types";
+import type { UseSelectReturn } from "./use-select";
+
+export interface SelectItemRegistration {
+    id: string;
+    value: string;
+    ref: MutableRefObject<HTMLElement | null>;
+    disabled: boolean;
+    label: string;
+    textValue: string;
+    groupId?: string;
+    select: () => void;
+}
+
+export interface SelectContextValue {
+    select: UseSelectReturn;
+    value: string | null;
+    selectValue: (value: string, label: string) => void;
+    searchable: boolean;
+    search: string;
+    setSearch: (value: string) => void;
+    placeholder: string;
+    searchPlaceholder: string;
+    nothingFound: ReactNode;
+    disabled: boolean;
+    size: RefraktorSize;
+    radius: RefraktorRadius;
+    variant: InputVariant;
+    withinPortal: boolean;
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    listId: string;
+    triggerId: string;
+    triggerInputRef: MutableRefObject<HTMLInputElement | null>;
+    searchInputRef: MutableRefObject<HTMLInputElement | null>;
+    registerItem: (item: SelectItemRegistration) => () => void;
+    getItems: () => SelectItemRegistration[];
+    getVisibleItems: () => SelectItemRegistration[];
+    hasVisibleItems: () => boolean;
+    isSearchMatch: (textValue: string) => boolean;
+    isGroupVisible: (groupId: string) => boolean;
+    getSelectedLabel: () => string;
+    focusFirstItem: () => void;
+    focusLastItem: () => void;
+    focusSelectedOrFirstItem: () => void;
+    getStyles: (part: keyof SelectClassNames) => string | undefined;
+}
+
+export interface SelectGroupContextValue {
+    groupId: string;
+}
+
+export const [SelectProvider, useSelectContext] =
+    createSafeContext<SelectContextValue>(
+        "Select component was not found in tree. Make sure Select.Trigger, Select.Dropdown, Select.Group and Select.Item are wrapped with Select.Root or Select."
+    );
+
+export const [SelectGroupProvider, useSelectGroupContext] =
+    createOptionalContext<SelectGroupContextValue>();
+
+export function useSelectItemsRegistry() {
+    const itemsRef = useRef<SelectItemRegistration[]>([]);
+
+    const registerItem = useCallback((item: SelectItemRegistration) => {
+        itemsRef.current = [
+            ...itemsRef.current.filter((x) => x.id !== item.id),
+            item
+        ];
+
+        return () => {
+            itemsRef.current = itemsRef.current.filter((x) => x.id !== item.id);
+        };
+    }, []);
+
+    const getItems = useCallback(() => sortSelectItems(itemsRef.current), []);
+
+    return {
+        registerItem,
+        getItems
+    };
+}
+
+export function sortSelectItems(items: SelectItemRegistration[]) {
+    return [...items].sort((a, b) => {
+        const aNode = a.ref.current;
+        const bNode = b.ref.current;
+
+        if (!aNode || !bNode || aNode === bNode) {
+            return 0;
+        }
+
+        const position = aNode.compareDocumentPosition(bNode);
+
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
+        }
+
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+        }
+
+        return 0;
+    });
+}
+
+export function getNavigableSelectItems(items: SelectItemRegistration[]) {
+    return items.filter((item) => !item.disabled);
+}
+
+export function findFocusedSelectItemIndex(items: SelectItemRegistration[]) {
+    return items.findIndex(
+        (item) => item.ref.current === document.activeElement
+    );
+}
+
+export function focusSelectItem(item?: SelectItemRegistration) {
+    item?.ref.current?.focus();
+}
+
+export function getNodeTextValue(
+    children: ReactNode,
+    explicitTextValue?: string
+) {
+    if (explicitTextValue) {
+        return explicitTextValue;
+    }
+
+    if (typeof children === "string" || typeof children === "number") {
+        return String(children);
+    }
+
+    return "";
+}