@refraktor/core 0.0.4 → 0.0.5

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

@@ -1,333 +0,0 @@
-import { useId, useUncontrolled } from "@refraktor/utils";
-import {
-    Children,
-    isValidElement,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef
-} from "react";
-import type { ReactNode } from "react";
-import { useTheme } from "../../../theme";
-import { factory, useClassNames, useProps } from "../../../utils";
-import {
-    focusSelectItem,
-    getNodeTextValue,
-    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";
-import { InputWrapper } from "../../input/input-wrapper";
-
-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>;
-
-function collectSelectItemLabels(node: ReactNode, labels: Map<string, string>) {
-    Children.forEach(node, (child) => {
-        if (!isValidElement(child)) {
-            return;
-        }
-
-        const typeDisplayName = (child.type as { displayName?: string })
-            .displayName;
-        const props = child.props as {
-            value?: string;
-            textValue?: string;
-            children?: ReactNode;
-        };
-
-        if (
-            typeDisplayName === "@refraktor/core/Select.Item" &&
-            typeof props.value === "string"
-        ) {
-            labels.set(
-                props.value,
-                getNodeTextValue(props.children, props.textValue) || props.value
-            );
-        }
-
-        if (props.children !== undefined && props.children !== null) {
-            collectSelectItemLabels(props.children, labels);
-        }
-    });
-}
-
-function getSelectItemLabels(node: ReactNode) {
-    const labels = new Map<string, string>();
-    collectSelectItemLabels(node, labels);
-    return labels;
-}
-
-const SelectRoot = factory<SelectRootFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const {
-        id,
-        children,
-        label,
-        description,
-        error,
-        required,
-        withAsterisk,
-        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 hasWrapper = label || description || error;
-    const inferredLabels = useMemo(() => getSelectItemLabels(children), [children]);
-
-    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) ??
-            inferredLabels.get(selectedValue) ??
-            selectedValue
-        );
-    }, [selectedValue, inferredLabels]);
-
-    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,
-        error: !!error,
-        required: !!required,
-        size,
-        radius,
-        variant,
-        withinPortal: !!withinPortal,
-        transitionProps,
-        listId,
-        triggerId,
-        triggerInputRef,
-        searchInputRef,
-        registerItem,
-        getItems,
-        getVisibleItems,
-        hasVisibleItems,
-        isSearchMatch,
-        isGroupVisible,
-        getSelectedLabel,
-        focusFirstItem,
-        focusLastItem,
-        focusSelectedOrFirstItem,
-        getStyles
-    };
-
-    const content = (
-        <div
-            ref={ref}
-            id={_id}
-            className={cx("relative w-full", classes.root, className)}
-            {...props}
-        >
-            {children}
-        </div>
-    );
-
-    return (
-        <SelectProvider value={context}>
-            {hasWrapper ? (
-                <InputWrapper
-                    label={label}
-                    description={description}
-                    error={error}
-                    required={required}
-                    withAsterisk={withAsterisk}
-                    inputId={triggerId}
-                >
-                    {content}
-                </InputWrapper>
-            ) : (
-                content
-            )}
-        </SelectProvider>
-    );
-});
-
-SelectRoot.displayName = "@refraktor/core/Select.Root";
-
-export default SelectRoot;

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

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

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

@@ -1,123 +0,0 @@
-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
-                    required={select.required}
-                    error={select.error}
-                    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

@@ -1,140 +0,0 @@
-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;
-    error: boolean;
-    required: 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 "";
-}