@refraktor/core 0.0.4 → 0.0.5

package/src/components/accordion/accordion-control/accordion-control.tsx

@@ -1,156 +0,0 @@
-import { ChevronIcon } from "../../../icons";
-import { useMergedRefs } from "@refraktor/utils";
-import { MutableRefObject, useEffect, useRef } from "react";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import {
-    getNavigableAccordionItems,
-    useAccordionContext,
-    useAccordionItemContext
-} from "../accordion.context";
-import { getSize, getVariant } from "../accordion.styles";
-import { AccordionControlFactoryPayload } from "../accordion.types";
-
-const AccordionControl = factory<AccordionControlFactoryPayload>(
-    ({ children, chevron, className, onClick, onKeyDown, ...props }, ref) => {
-        const { cx } = useTheme();
-        const {
-            size,
-            variant,
-            isItemOpen,
-            toggleItem,
-            registerItem,
-            getItems,
-            getControlId,
-            getPanelId,
-            getStyles
-        } = useAccordionContext();
-        const item = useAccordionItemContext();
-
-        const localRef = useRef<HTMLButtonElement>(null);
-        const mergedRef = useMergedRefs(ref, localRef);
-
-        useEffect(() => {
-            return registerItem({
-                value: item.value,
-                ref: localRef as MutableRefObject<HTMLElement | null>,
-                disabled: item.disabled
-            });
-        }, [item.value, item.disabled, registerItem]);
-
-        const isOpen = isItemOpen(item.value);
-        const sizeStyles = getSize(size);
-        const variantStyles = getVariant(variant);
-
-        const moveFocus = (direction: -1 | 1) => {
-            const items = getNavigableAccordionItems(getItems());
-
-            if (!items.length) {
-                return;
-            }
-
-            const currentIndex = items.findIndex((x) => x.value === item.value);
-
-            if (currentIndex === -1) {
-                return;
-            }
-
-            const nextIndex =
-                (currentIndex + direction + items.length) % items.length;
-
-            items[nextIndex].ref.current?.focus();
-        };
-
-        const focusBoundary = (type: "first" | "last") => {
-            const items = getNavigableAccordionItems(getItems());
-
-            if (!items.length) {
-                return;
-            }
-
-            const target = type === "first" ? items[0] : items[items.length - 1];
-
-            target.ref.current?.focus();
-        };
-
-        return (
-            <button
-                ref={mergedRef}
-                id={getControlId(item.value)}
-                type="button"
-                aria-expanded={isOpen}
-                aria-controls={getPanelId(item.value)}
-                disabled={item.disabled}
-                data-opened={isOpen}
-                data-disabled={item.disabled}
-                className={cx(
-                    "w-full inline-flex items-center justify-between gap-2 text-left select-none outline-none transition-colors cursor-pointer",
-                    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
-                    "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",
-                    "text-[var(--refraktor-text)]",
-                    sizeStyles.control,
-                    variantStyles.control,
-                    getStyles("control"),
-                    className
-                )}
-                onClick={(event) => {
-                    onClick?.(event);
-
-                    if (event.defaultPrevented || item.disabled) {
-                        return;
-                    }
-
-                    toggleItem(item.value);
-                }}
-                onKeyDown={(event) => {
-                    onKeyDown?.(event);
-
-                    if (event.defaultPrevented || item.disabled) {
-                        return;
-                    }
-
-                    if (event.key === "ArrowDown") {
-                        event.preventDefault();
-                        moveFocus(1);
-                        return;
-                    }
-
-                    if (event.key === "ArrowUp") {
-                        event.preventDefault();
-                        moveFocus(-1);
-                        return;
-                    }
-
-                    if (event.key === "Home") {
-                        event.preventDefault();
-                        focusBoundary("first");
-                        return;
-                    }
-
-                    if (event.key === "End") {
-                        event.preventDefault();
-                        focusBoundary("last");
-                    }
-                }}
-                {...props}
-            >
-                <span>{children}</span>
-
-                <span
-                    className={cx(
-                        "shrink-0 transition-transform",
-                        sizeStyles.chevron,
-                        isOpen && "rotate-180",
-                        getStyles("chevron")
-                    )}
-                >
-                    {chevron ?? <ChevronIcon direction="down" size="100%" />}
-                </span>
-            </button>
-        );
-    }
-);
-
-AccordionControl.displayName = "@refraktor/core/Accordion.Control";
-
-export default AccordionControl;

package/src/components/accordion/accordion-control/index.ts

@@ -1 +0,0 @@
-export { default as AccordionControl } from "./accordion-control";

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

@@ -1,40 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import {
-    AccordionItemProvider,
-    useAccordionContext
-} from "../accordion.context";
-import { getVariant } from "../accordion.styles";
-import { AccordionItemFactoryPayload } from "../accordion.types";
-
-const AccordionItem = factory<AccordionItemFactoryPayload>(
-    ({ value, disabled, children, className, ...props }, ref) => {
-        const { cx, getRadius } = useTheme();
-        const { variant, radius, isItemOpen, getStyles } = useAccordionContext();
-        const variantStyles = getVariant(variant);
-
-        return (
-            <AccordionItemProvider value={{ value, disabled: !!disabled }}>
-                <div
-                    ref={ref}
-                    data-opened={isItemOpen(value)}
-                    data-disabled={disabled}
-                    className={cx(
-                        "overflow-hidden",
-                        variantStyles.item,
-                        variant === "separated" && getRadius(radius),
-                        getStyles("item"),
-                        className
-                    )}
-                    {...props}
-                >
-                    {children}
-                </div>
-            </AccordionItemProvider>
-        );
-    }
-);
-
-AccordionItem.displayName = "@refraktor/core/Accordion.Item";
-
-export default AccordionItem;

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

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

package/src/components/accordion/accordion-panel/accordion-panel.tsx

@@ -1,58 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import {
-    useAccordionContext,
-    useAccordionItemContext
-} from "../accordion.context";
-import { getSize, getVariant } from "../accordion.styles";
-import { AccordionPanelFactoryPayload } from "../accordion.types";
-
-const AccordionPanel = factory<AccordionPanelFactoryPayload>(
-    ({ children, className, ...props }, ref) => {
-        const { cx } = useTheme();
-        const {
-            keepMounted,
-            size,
-            variant,
-            isItemOpen,
-            getControlId,
-            getPanelId,
-            getStyles
-        } = useAccordionContext();
-        const item = useAccordionItemContext();
-
-        const isOpen = isItemOpen(item.value);
-
-        if (!keepMounted && !isOpen) {
-            return null;
-        }
-
-        const sizeStyles = getSize(size);
-        const variantStyles = getVariant(variant);
-
-        return (
-            <div
-                ref={ref}
-                id={getPanelId(item.value)}
-                role="region"
-                aria-labelledby={getControlId(item.value)}
-                data-opened={isOpen}
-                hidden={!isOpen}
-                className={cx(
-                    "outline-none",
-                    sizeStyles.panel,
-                    variantStyles.panel,
-                    getStyles("panel"),
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </div>
-        );
-    }
-);
-
-AccordionPanel.displayName = "@refraktor/core/Accordion.Panel";
-
-export default AccordionPanel;

package/src/components/accordion/accordion-panel/index.ts

@@ -1 +0,0 @@
-export { default as AccordionPanel } from "./accordion-panel";

package/src/components/accordion/accordion.context.ts

@@ -1,93 +0,0 @@
-import { createSafeContext } from "@refraktor/utils";
-import { MutableRefObject, useCallback, useRef } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import { AccordionClassNames, AccordionVariant } from "./accordion.types";
-
-export interface AccordionItemRegistration {
-    value: string;
-    ref: MutableRefObject<HTMLElement | null>;
-    disabled: boolean;
-}
-
-export interface AccordionContextValue {
-    openValues: string[];
-    multiple: boolean;
-    collapsible: boolean;
-    keepMounted: boolean;
-    size: RefraktorSize;
-    radius: RefraktorRadius;
-    variant: AccordionVariant;
-    toggleItem: (value: string) => void;
-    isItemOpen: (value: string) => boolean;
-    registerItem: (item: AccordionItemRegistration) => () => void;
-    getItems: () => AccordionItemRegistration[];
-    getControlId: (value: string) => string;
-    getPanelId: (value: string) => string;
-    getStyles: (part: keyof AccordionClassNames) => string | undefined;
-}
-
-export interface AccordionItemContextValue {
-    value: string;
-    disabled: boolean;
-}
-
-export const [AccordionProvider, useAccordionContext] =
-    createSafeContext<AccordionContextValue>(
-        "Accordion component was not found in tree. Make sure Accordion.Item, Accordion.Control and Accordion.Panel are wrapped with Accordion."
-    );
-
-export const [AccordionItemProvider, useAccordionItemContext] =
-    createSafeContext<AccordionItemContextValue>(
-        "Accordion.Item component was not found in tree. Make sure Accordion.Control and Accordion.Panel are wrapped with Accordion.Item."
-    );
-
-export function useAccordionItemsRegistry() {
-    const itemsRef = useRef<AccordionItemRegistration[]>([]);
-
-    const registerItem = useCallback((item: AccordionItemRegistration) => {
-        itemsRef.current = [
-            ...itemsRef.current.filter((x) => x.value !== item.value),
-            item
-        ];
-
-        return () => {
-            itemsRef.current = itemsRef.current.filter(
-                (x) => x.value !== item.value
-            );
-        };
-    }, []);
-
-    const getItems = useCallback(() => sortAccordionItems(itemsRef.current), []);
-
-    return {
-        registerItem,
-        getItems
-    };
-}
-
-export function sortAccordionItems(items: AccordionItemRegistration[]) {
-    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 getNavigableAccordionItems(items: AccordionItemRegistration[]) {
-    return items.filter((item) => !item.disabled);
-}

package/src/components/accordion/accordion.styles.ts

@@ -1,60 +0,0 @@
-import { RefraktorSize } from "../../theme";
-import { AccordionVariant } from "./accordion.types";
-
-type AccordionSizeStyles = {
-    control: string;
-    panel: string;
-    chevron: string;
-};
-
-type AccordionVariantStyles = {
-    item: string;
-    control: string;
-    panel: string;
-};
-
-const sizes: Record<RefraktorSize, AccordionSizeStyles> = {
-    xs: {
-        control: "min-h-7 px-2 py-1 text-xs",
-        panel: "px-2 pb-2 text-xs",
-        chevron: "size-3"
-    },
-    sm: {
-        control: "min-h-8 px-2.5 py-1.5 text-sm",
-        panel: "px-2.5 pb-2.5 text-sm",
-        chevron: "size-3.5"
-    },
-    md: {
-        control: "min-h-9 px-3 py-2 text-sm",
-        panel: "px-3 pb-3 text-sm",
-        chevron: "size-4"
-    },
-    lg: {
-        control: "min-h-10 px-3.5 py-2.5 text-base",
-        panel: "px-3.5 pb-3.5 text-base",
-        chevron: "size-4.5"
-    },
-    xl: {
-        control: "min-h-11 px-4 py-3 text-lg",
-        panel: "px-4 pb-4 text-lg",
-        chevron: "size-5"
-    }
-};
-
-const variants: Record<AccordionVariant, AccordionVariantStyles> = {
-    default: {
-        item: "border-b border-[var(--refraktor-border)] last:border-b-0",
-        control: "bg-transparent hover:bg-[var(--refraktor-bg-hover)]",
-        panel: "text-[var(--refraktor-text-secondary)]"
-    },
-    separated: {
-        item: "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg-subtle)]",
-        control: "bg-transparent hover:bg-[var(--refraktor-bg-hover)]",
-        panel: "border-t border-[var(--refraktor-border)] text-[var(--refraktor-text-secondary)]"
-    }
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];
-
-export const getVariant = (variant: AccordionVariant = "default") =>
-    variants[variant];

package/src/components/accordion/accordion.test.tsx

@@ -1,174 +0,0 @@
-import { useState } from "react";
-import { describe, expect, it, vi } from "vitest";
-import { render, screen, userEvent } from "../../vitest";
-import Accordion from "./accordion";
-
-describe("@refraktor/core/Accordion", () => {
-    it("renders default opened item", async () => {
-        await render(
-            <Accordion defaultValue="account">
-                <Accordion.Item value="account">
-                    <Accordion.Control>Account</Accordion.Control>
-                    <Accordion.Panel>Account panel</Accordion.Panel>
-                </Accordion.Item>
-
-                <Accordion.Item value="security">
-                    <Accordion.Control>Security</Accordion.Control>
-                    <Accordion.Panel>Security panel</Accordion.Panel>
-                </Accordion.Item>
-            </Accordion>
-        );
-
-        expect(
-            screen.getByRole("button", { name: "Account" })
-        ).toHaveAttribute("aria-expanded", "true");
-        expect(screen.getByText("Account panel")).toBeInTheDocument();
-        expect(screen.queryByText("Security panel")).not.toBeInTheDocument();
-    });
-
-    it("toggles items in single mode", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Accordion defaultValue="account">
-                <Accordion.Item value="account">
-                    <Accordion.Control>Account</Accordion.Control>
-                    <Accordion.Panel>Account panel</Accordion.Panel>
-                </Accordion.Item>
-
-                <Accordion.Item value="security">
-                    <Accordion.Control>Security</Accordion.Control>
-                    <Accordion.Panel>Security panel</Accordion.Panel>
-                </Accordion.Item>
-            </Accordion>
-        );
-
-        await user.click(screen.getByRole("button", { name: "Security" }));
-
-        expect(screen.getByText("Security panel")).toBeInTheDocument();
-        expect(screen.queryByText("Account panel")).not.toBeInTheDocument();
-
-        await user.click(screen.getByRole("button", { name: "Security" }));
-
-        expect(screen.queryByText("Security panel")).not.toBeInTheDocument();
-    });
-
-    it("supports multiple mode", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Accordion multiple defaultValue={["account"]}>
-                <Accordion.Item value="account">
-                    <Accordion.Control>Account</Accordion.Control>
-                    <Accordion.Panel>Account panel</Accordion.Panel>
-                </Accordion.Item>
-
-                <Accordion.Item value="security">
-                    <Accordion.Control>Security</Accordion.Control>
-                    <Accordion.Panel>Security panel</Accordion.Panel>
-                </Accordion.Item>
-            </Accordion>
-        );
-
-        await user.click(screen.getByRole("button", { name: "Security" }));
-
-        expect(screen.getByText("Account panel")).toBeInTheDocument();
-        expect(screen.getByText("Security panel")).toBeInTheDocument();
-    });
-
-    it("supports controlled mode", async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-
-        function Demo() {
-            const [value, setValue] = useState<string | null>("account");
-
-            return (
-                <Accordion
-                    value={value}
-                    onChange={(nextValue) => {
-                        onChange(nextValue);
-
-                        if (typeof nextValue === "string" || nextValue === null) {
-                            setValue(nextValue);
-                        }
-                    }}
-                >
-                    <Accordion.Item value="account">
-                        <Accordion.Control>Account</Accordion.Control>
-                        <Accordion.Panel>Account panel</Accordion.Panel>
-                    </Accordion.Item>
-
-                    <Accordion.Item value="security">
-                        <Accordion.Control>Security</Accordion.Control>
-                        <Accordion.Panel>Security panel</Accordion.Panel>
-                    </Accordion.Item>
-                </Accordion>
-            );
-        }
-
-        await render(<Demo />);
-
-        await user.click(screen.getByRole("button", { name: "Security" }));
-
-        expect(onChange).toHaveBeenCalledWith("security");
-        expect(screen.getByText("Security panel")).toBeInTheDocument();
-    });
-
-    it("supports keyboard navigation and skips disabled items", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Accordion defaultValue="account">
-                <Accordion.Item value="account">
-                    <Accordion.Control>Account</Accordion.Control>
-                    <Accordion.Panel>Account panel</Accordion.Panel>
-                </Accordion.Item>
-
-                <Accordion.Item value="security" disabled>
-                    <Accordion.Control>Security</Accordion.Control>
-                    <Accordion.Panel>Security panel</Accordion.Panel>
-                </Accordion.Item>
-
-                <Accordion.Item value="billing">
-                    <Accordion.Control>Billing</Accordion.Control>
-                    <Accordion.Panel>Billing panel</Accordion.Panel>
-                </Accordion.Item>
-            </Accordion>
-        );
-
-        const account = screen.getByRole("button", { name: "Account" });
-
-        account.focus();
-        await user.keyboard("{ArrowDown}");
-
-        expect(screen.getByRole("button", { name: "Billing" })).toHaveFocus();
-
-        await user.keyboard("{Home}");
-        expect(account).toHaveFocus();
-
-        await user.keyboard("{End}");
-        expect(screen.getByRole("button", { name: "Billing" })).toHaveFocus();
-    });
-
-    it("keeps closed panels mounted when keepMounted is true", async () => {
-        await render(
-            <Accordion defaultValue="account" keepMounted>
-                <Accordion.Item value="account">
-                    <Accordion.Control>Account</Accordion.Control>
-                    <Accordion.Panel>Account panel</Accordion.Panel>
-                </Accordion.Item>
-
-                <Accordion.Item value="security">
-                    <Accordion.Control>Security</Accordion.Control>
-                    <Accordion.Panel>Security panel</Accordion.Panel>
-                </Accordion.Item>
-            </Accordion>
-        );
-
-        const hiddenPanel = screen.getByText("Security panel");
-
-        expect(hiddenPanel).toBeInTheDocument();
-        expect(hiddenPanel).toHaveAttribute("hidden");
-    });
-});