@refraktor/core 0.0.4 → 0.0.5

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

@@ -1,299 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { InputField } from "../../input/input-field";
-import { Transition } from "../../transition";
-import {
-    findFocusedSelectItemIndex,
-    focusSelectItem,
-    getNavigableSelectItems,
-    useSelectContext
-} from "../select.context";
-import type { SelectDropdownFactoryPayload } from "../select.types";
-import {
-    FloatingFocusManager,
-    FloatingPortal,
-    useMergeRefs
-} from "@floating-ui/react";
-
-const SelectDropdown = factory<SelectDropdownFactoryPayload>(
-    ({ children, className, style, onKeyDown, ...props }, ref) => {
-        const { cx, getRadius } = useTheme();
-        const select = useSelectContext();
-
-        const typeaheadRef = useRef("");
-        const typeaheadTimeoutRef = useRef<number | null>(null);
-
-        useEffect(() => {
-            return () => {
-                if (typeaheadTimeoutRef.current !== null) {
-                    window.clearTimeout(typeaheadTimeoutRef.current);
-                }
-            };
-        }, []);
-
-        useEffect(() => {
-            if (!select.select.opened) {
-                return;
-            }
-
-            requestAnimationFrame(() => {
-                if (select.searchable) {
-                    select.searchInputRef.current?.focus();
-                    return;
-                }
-
-                select.focusSelectedOrFirstItem();
-            });
-        }, [
-            select.focusSelectedOrFirstItem,
-            select.searchable,
-            select.searchInputRef,
-            select.select.opened
-        ]);
-
-        const clearTypeahead = () => {
-            typeaheadRef.current = "";
-
-            if (typeaheadTimeoutRef.current !== null) {
-                window.clearTimeout(typeaheadTimeoutRef.current);
-                typeaheadTimeoutRef.current = null;
-            }
-        };
-
-        const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-            onKeyDown?.(event as any);
-
-            if (event.defaultPrevented) {
-                return;
-            }
-
-            const items = getNavigableSelectItems(select.getVisibleItems());
-            const focusedIndex = findFocusedSelectItemIndex(items);
-            const isSearchInputTarget =
-                event.target === select.searchInputRef.current;
-
-            if (event.key === "ArrowDown") {
-                event.preventDefault();
-
-                if (!items.length) {
-                    return;
-                }
-
-                const nextIndex =
-                    focusedIndex >= 0 ? (focusedIndex + 1) % items.length : 0;
-
-                focusSelectItem(items[nextIndex]);
-                return;
-            }
-
-            if (event.key === "ArrowUp") {
-                event.preventDefault();
-
-                if (!items.length) {
-                    return;
-                }
-
-                const nextIndex =
-                    focusedIndex >= 0
-                        ? (focusedIndex - 1 + items.length) % items.length
-                        : items.length - 1;
-
-                focusSelectItem(items[nextIndex]);
-                return;
-            }
-
-            if (event.key === "Home") {
-                event.preventDefault();
-                focusSelectItem(items[0]);
-                return;
-            }
-
-            if (event.key === "End") {
-                event.preventDefault();
-                focusSelectItem(items[items.length - 1]);
-                return;
-            }
-
-            if (event.key === "Escape") {
-                event.preventDefault();
-                select.select.close();
-                select.triggerInputRef.current?.focus();
-                return;
-            }
-
-            if (event.key === "Tab") {
-                select.select.close();
-                return;
-            }
-
-            if (
-                (event.key === "Enter" || event.key === " ") &&
-                !isSearchInputTarget
-            ) {
-                if (focusedIndex === -1) {
-                    return;
-                }
-
-                event.preventDefault();
-                items[focusedIndex].select();
-                return;
-            }
-
-            if (
-                !select.searchable &&
-                event.key.length === 1 &&
-                !event.ctrlKey &&
-                !event.metaKey &&
-                !event.altKey
-            ) {
-                const search = `${typeaheadRef.current}${event.key.toLowerCase()}`;
-                typeaheadRef.current = search;
-
-                if (typeaheadTimeoutRef.current !== null) {
-                    window.clearTimeout(typeaheadTimeoutRef.current);
-                }
-
-                typeaheadTimeoutRef.current = window.setTimeout(() => {
-                    clearTypeahead();
-                }, 400);
-
-                const matchedItem = items.find((item, index) => {
-                    if (index <= focusedIndex) {
-                        return false;
-                    }
-
-                    return item.textValue
-                        .trim()
-                        .toLowerCase()
-                        .startsWith(search);
-                });
-
-                if (matchedItem) {
-                    event.preventDefault();
-                    focusSelectItem(matchedItem);
-                    return;
-                }
-
-                const wrappedMatch = items.find((item, index) => {
-                    if (index > focusedIndex) {
-                        return false;
-                    }
-
-                    return item.textValue
-                        .trim()
-                        .toLowerCase()
-                        .startsWith(search);
-                });
-
-                if (wrappedMatch) {
-                    event.preventDefault();
-                    focusSelectItem(wrappedMatch);
-                }
-            }
-        };
-
-        const referenceWidth =
-            select.select.refs.reference.current?.offsetWidth;
-
-        const dropdownContent = (
-            <Transition
-                transition="fade"
-                duration={150}
-                mounted={select.select.opened}
-                style={{ position: "relative", zIndex: 1000 }}
-                {...select.transitionProps}
-            >
-                <div
-                    ref={useMergeRefs([ref, select.select.refs.setFloating])}
-                    id={select.listId}
-                    role="listbox"
-                    aria-labelledby={select.triggerId}
-                    tabIndex={-1}
-                    style={{
-                        ...select.select.floatingStyles,
-                        zIndex: 1000,
-                        width: referenceWidth,
-                        ...style
-                    }}
-                    className={cx(
-                        "z-50 min-w-32 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md border border-[var(--refraktor-border)]",
-                        getRadius(select.radius),
-                        select.getStyles("dropdown"),
-                        className
-                    )}
-                    {...select.select.getFloatingProps({
-                        onKeyDown: handleKeyDown
-                    })}
-                    {...props}
-                >
-                    {select.searchable && (
-                        <div
-                            className={cx(
-                                "p-1 border-b border-[var(--refraktor-border)]",
-                                select.getStyles("search")
-                            )}
-                        >
-                            <InputField
-                                ref={(node) => {
-                                    select.searchInputRef.current = node;
-                                }}
-                                value={select.search}
-                                onChange={(event) => {
-                                    select.setSearch(event.currentTarget.value);
-                                }}
-                                size={select.size}
-                                radius={select.radius}
-                                variant={select.variant}
-                                placeholder={select.searchPlaceholder}
-                                autoComplete="off"
-                                className={select.getStyles("searchInput")}
-                            />
-                        </div>
-                    )}
-
-                    <div
-                        className={cx(
-                            "max-h-80 overflow-y-auto refraktor-scrollbar p-1",
-                            select.getStyles("options")
-                        )}
-                    >
-                        {children}
-
-                        {!select.hasVisibleItems() && (
-                            <div
-                                className={cx(
-                                    "px-1.5 py-1.5 text-sm text-[var(--refraktor-text-secondary)]",
-                                    select.getStyles("empty")
-                                )}
-                            >
-                                {select.nothingFound}
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </Transition>
-        );
-
-        const wrappedContent = (
-            <FloatingFocusManager
-                context={select.select.context}
-                modal={false}
-                initialFocus={-1}
-                disabled={!select.select.opened}
-            >
-                {dropdownContent}
-            </FloatingFocusManager>
-        );
-
-        return select.withinPortal ? (
-            <FloatingPortal>{wrappedContent}</FloatingPortal>
-        ) : (
-            wrappedContent
-        );
-    }
-);
-
-SelectDropdown.displayName = "@refraktor/core/Select.Dropdown";
-
-export default SelectDropdown;

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

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

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

@@ -1,47 +0,0 @@
-import { useId } from "@refraktor/utils";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { SelectGroupProvider, useSelectContext } from "../select.context";
-import type { SelectGroupFactoryPayload } from "../select.types";
-
-const SelectGroup = factory<SelectGroupFactoryPayload>(
-    ({ id, label, children, className, ...props }, ref) => {
-        const { cx } = useTheme();
-        const select = useSelectContext();
-
-        const _id = useId(id);
-        const labelId = `${_id}-label`;
-        const isVisible = select.isGroupVisible(_id);
-
-        return (
-            <SelectGroupProvider value={{ groupId: _id }}>
-                <div
-                    ref={ref}
-                    role="group"
-                    aria-labelledby={label ? labelId : undefined}
-                    hidden={!isVisible}
-                    className={cx("py-1", select.getStyles("group"), className)}
-                    {...props}
-                >
-                    {label && (
-                        <div
-                            id={labelId}
-                            className={cx(
-                                "px-1.5 pb-1 text-xs font-medium text-[var(--refraktor-text-secondary)]",
-                                select.getStyles("groupLabel")
-                            )}
-                        >
-                            {label}
-                        </div>
-                    )}
-
-                    {children}
-                </div>
-            </SelectGroupProvider>
-        );
-    }
-);
-
-SelectGroup.displayName = "@refraktor/core/Select.Group";
-
-export default SelectGroup;

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

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

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

@@ -1,157 +0,0 @@
-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-xs 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-[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

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