@refraktor/core 0.0.2 → 0.0.4

package/src/components/for/for.tsx

@@ -0,0 +1,53 @@
+import { Fragment } from "react";
+import type { JSX } from "react";
+import type { ForProps } from "./for.types";
+
+const normalize = <T,>(collection?: ForProps<T>["each"]): T[] => {
+    if (!collection) {
+        return [];
+    }
+
+    if (Array.isArray(collection)) {
+        return collection.slice();
+    }
+
+    return Array.from(collection as Iterable<T> | ArrayLike<T>);
+};
+
+const For = <T,>({
+    each,
+    children,
+    fallback = null,
+    keyExtractor
+}: ForProps<T>): JSX.Element | null => {
+    const items = normalize(each);
+
+    if (items.length === 0) {
+        return fallback === null ? null : <>{fallback}</>;
+    }
+
+    const lastIndex = items.length - 1;
+
+    return (
+        <>
+            {items.map((item, index) => {
+                const meta = {
+                    index,
+                    length: items.length,
+                    isFirst: index === 0,
+                    isLast: index === lastIndex,
+                    previous: index > 0 ? items[index - 1] : undefined,
+                    next: index < lastIndex ? items[index + 1] : undefined
+                };
+
+                const key = keyExtractor?.(item, index) ?? index;
+
+                return <Fragment key={key}>{children(item, meta)}</Fragment>;
+            })}
+        </>
+    );
+};
+
+For.displayName = "@refraktor/core/For";
+
+export default For;

package/src/components/for/for.types.ts

@@ -0,0 +1,40 @@
+import { Key, ReactNode } from "react";
+
+/**
+ * Supported collections for the For component. Accepts arrays, array-likes and iterables.
+ */
+export type ForList<T> = readonly T[] | Iterable<T> | ArrayLike<T>;
+
+/**
+ * Metadata passed to the render function for each item in the collection.
+ */
+export type ForRenderMeta<T> = {
+    /** Index of the current item in the collection. */
+    index: number;
+
+    /** Total number of items in the collection. */
+    length: number;
+
+    /** Indicates whether the current item is the first in the collection. */
+    isFirst: boolean;
+
+    /** Indicates whether the current item is the last in the collection. */
+    isLast: boolean;
+
+    /** Previous item in the collection if it exists. */
+    previous?: T;
+
+    /** Next item in the collection if it exists. */
+    next?: T;
+};
+
+export type ForProps<T> = {
+    /** Collection that should be iterated. */
+    each?: ForList<T> | null;
+    /** Render function that receives the current item and helpful metadata. */
+    children: (item: T, meta: ForRenderMeta<T>) => ReactNode;
+    /** Node rendered when the collection is empty. */
+    fallback?: ReactNode;
+    /** Optional function to derive a stable React key for each item. */
+    keyExtractor?: (item: T, index: number) => Key;
+};

package/src/components/for/index.ts

@@ -0,0 +1,2 @@
+export { default as For } from "./for";
+export type { ForList, ForProps, ForRenderMeta } from "./for.types";

package/src/components/index.ts

@@ -1,25 +1,35 @@
 export * from "./accordion";
 export * from "./avatar";
 export * from "./badge";
+export * from "./breadcrumbs";
 export * from "./button";
 export * from "./checkbox";
+export * from "./chip";
 export * from "./color-swatch";
+export * from "./drawer";
+export * from "./file-input";
+export * from "./for";
 export * from "./input";
 export * from "./loader";
 export * from "./modal";
 export * from "./menu";
 export * from "./number-input";
+export * from "./password-input";
+export * from "./pin-input";
 export * from "./pagination";
 export * from "./popover";
 export * from "./portal";
 export * from "./progress";
 export * from "./progress-circle";
 export * from "./radio";
+export * from "./scroll-area";
 export * from "./select";
+export * from "./segmented-control";
 export * from "./slider";
-export * from "./switch";
-export * from "./tabs";
-export * from "./timeline";
-export * from "./textarea";
-export * from "./tooltip";
-export * from "./transition";
+export * from "./switch";
+export * from "./table";
+export * from "./tabs";
+export * from "./timeline";
+export * from "./textarea";
+export * from "./tooltip";
+export * from "./transition";

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

@@ -1,220 +1,220 @@
-import { useEffect, useRef } from "react";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { MenuDropdownFactoryPayload } from "../menu.types";
-import {
-    findFocusedMenuItemIndex,
-    findTypeaheadMatch,
-    focusMenuItem,
-    getNavigableMenuItems,
-    useMenuLevelContext,
-    useMenuRootContext
-} from "../menu.context";
-import { Transition } from "../../transition";
-import {
-    FloatingFocusManager,
-    FloatingPortal,
-    useMergeRefs
-} from "@floating-ui/react";
-
-const MenuDropdown = factory<MenuDropdownFactoryPayload>(
-    ({ children, className, style, ...props }, ref) => {
-        const { cx, getRadius } = useTheme();
-        const { radius, withinPortal, transitionProps, getStyles } =
-            useMenuRootContext();
-        const level = useMenuLevelContext();
-
-        const typeaheadRef = useRef("");
-        const typeaheadTimeoutRef = useRef<number | null>(null);
-
-        useEffect(() => {
-            return () => {
-                if (typeaheadTimeoutRef.current !== null) {
-                    window.clearTimeout(typeaheadTimeoutRef.current);
-                }
-            };
-        }, []);
-
-        const clearTypeahead = () => {
-            typeaheadRef.current = "";
-
-            if (typeaheadTimeoutRef.current !== null) {
-                window.clearTimeout(typeaheadTimeoutRef.current);
-                typeaheadTimeoutRef.current = null;
-            }
-        };
-
-        const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-            const items = getNavigableMenuItems(level.getItems());
-            const focusedIndex = findFocusedMenuItemIndex(items);
-
-            if (event.key === "ArrowDown") {
-                event.preventDefault();
-
-                if (!items.length) {
-                    return;
-                }
-
-                const nextIndex =
-                    focusedIndex >= 0 ? (focusedIndex + 1) % items.length : 0;
-
-                focusMenuItem(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;
-
-                focusMenuItem(items[nextIndex]);
-                return;
-            }
-
-            if (event.key === "Home") {
-                event.preventDefault();
-                focusMenuItem(items[0]);
-                return;
-            }
-
-            if (event.key === "End") {
-                event.preventDefault();
-                focusMenuItem(items[items.length - 1]);
-                return;
-            }
-
-            if (event.key === "ArrowRight") {
-                if (focusedIndex < 0) {
-                    return;
-                }
-
-                const activeItem = items[focusedIndex];
-
-                if (activeItem.hasSubmenu && activeItem.openSubmenu) {
-                    event.preventDefault();
-                    activeItem.openSubmenu(true);
-                }
-
-                return;
-            }
-
-            if (event.key === "ArrowLeft" && level.isSubmenu) {
-                event.preventDefault();
-                level.closeMenu();
-                level.menu.refs.reference.current?.focus();
-                return;
-            }
-
-            if (event.key === "Escape") {
-                event.preventDefault();
-
-                if (level.isSubmenu) {
-                    level.closeMenu();
-                    level.menu.refs.reference.current?.focus();
-                } else {
-                    level.closeAllMenus();
-                    level.menu.refs.reference.current?.focus();
-                }
-
-                return;
-            }
-
-            if (event.key === "Tab") {
-                level.closeAllMenus();
-                return;
-            }
-
-            if (
-                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 matchedIndex = findTypeaheadMatch(
-                    items,
-                    search,
-                    focusedIndex
-                );
-
-                if (matchedIndex !== -1) {
-                    event.preventDefault();
-                    focusMenuItem(items[matchedIndex]);
-                }
-            }
-        };
-
-        const dropdownContent = (
-            <Transition
-                transition="fade"
-                duration={150}
-                mounted={level.menu.opened}
-                style={{ position: "relative", zIndex: 1000 }}
-                {...transitionProps}
-            >
-                <div
-                    ref={useMergeRefs([ref, level.menu.refs.setFloating])}
-                    role="menu"
-                    tabIndex={-1}
-                    style={{
-                        ...level.menu.floatingStyles,
-                        zIndex: 1000,
-                        scrollbarGutter: "auto",
-                        ...style
-                    }}
-                    className={cx(
-                        "z-50 min-w-32 max-h-80 overflow-y-auto refraktor-scrollbar",
-                        "p-1 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md border border-[var(--refraktor-border)]",
-                        getRadius(radius),
-                        getStyles("dropdown"),
-                        className
-                    )}
-                    {...level.menu.getFloatingProps({
-                        onKeyDown: handleKeyDown
-                    })}
-                    {...props}
-                >
-                    {children}
-                </div>
-            </Transition>
-        );
-
-        const wrappedContent = (
-            <FloatingFocusManager
-                context={level.menu.context}
-                modal={false}
-                initialFocus={-1}
-                disabled={!level.menu.opened}
-            >
-                {dropdownContent}
-            </FloatingFocusManager>
-        );
-
-        return withinPortal ? (
-            <FloatingPortal>{wrappedContent}</FloatingPortal>
-        ) : (
-            wrappedContent
-        );
-    }
-);
-
-MenuDropdown.displayName = "@refraktor/core/Menu.Dropdown";
-
-export default MenuDropdown;
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { MenuDropdownFactoryPayload } from "../menu.types";
+import {
+    findFocusedMenuItemIndex,
+    findTypeaheadMatch,
+    focusMenuItem,
+    getNavigableMenuItems,
+    useMenuLevelContext,
+    useMenuRootContext
+} from "../menu.context";
+import { Transition } from "../../transition";
+import {
+    FloatingFocusManager,
+    FloatingPortal,
+    useMergeRefs
+} from "@floating-ui/react";
+
+const MenuDropdown = factory<MenuDropdownFactoryPayload>(
+    ({ children, className, style, ...props }, ref) => {
+        const { cx, getRadius } = useTheme();
+        const { radius, withinPortal, transitionProps, getStyles } =
+            useMenuRootContext();
+        const level = useMenuLevelContext();
+
+        const typeaheadRef = useRef("");
+        const typeaheadTimeoutRef = useRef<number | null>(null);
+
+        useEffect(() => {
+            return () => {
+                if (typeaheadTimeoutRef.current !== null) {
+                    window.clearTimeout(typeaheadTimeoutRef.current);
+                }
+            };
+        }, []);
+
+        const clearTypeahead = () => {
+            typeaheadRef.current = "";
+
+            if (typeaheadTimeoutRef.current !== null) {
+                window.clearTimeout(typeaheadTimeoutRef.current);
+                typeaheadTimeoutRef.current = null;
+            }
+        };
+
+        const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+            const items = getNavigableMenuItems(level.getItems());
+            const focusedIndex = findFocusedMenuItemIndex(items);
+
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+
+                if (!items.length) {
+                    return;
+                }
+
+                const nextIndex =
+                    focusedIndex >= 0 ? (focusedIndex + 1) % items.length : 0;
+
+                focusMenuItem(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;
+
+                focusMenuItem(items[nextIndex]);
+                return;
+            }
+
+            if (event.key === "Home") {
+                event.preventDefault();
+                focusMenuItem(items[0]);
+                return;
+            }
+
+            if (event.key === "End") {
+                event.preventDefault();
+                focusMenuItem(items[items.length - 1]);
+                return;
+            }
+
+            if (event.key === "ArrowRight") {
+                if (focusedIndex < 0) {
+                    return;
+                }
+
+                const activeItem = items[focusedIndex];
+
+                if (activeItem.hasSubmenu && activeItem.openSubmenu) {
+                    event.preventDefault();
+                    activeItem.openSubmenu(true);
+                }
+
+                return;
+            }
+
+            if (event.key === "ArrowLeft" && level.isSubmenu) {
+                event.preventDefault();
+                level.closeMenu();
+                level.menu.refs.reference.current?.focus();
+                return;
+            }
+
+            if (event.key === "Escape") {
+                event.preventDefault();
+
+                if (level.isSubmenu) {
+                    level.closeMenu();
+                    level.menu.refs.reference.current?.focus();
+                } else {
+                    level.closeAllMenus();
+                    level.menu.refs.reference.current?.focus();
+                }
+
+                return;
+            }
+
+            if (event.key === "Tab") {
+                level.closeAllMenus();
+                return;
+            }
+
+            if (
+                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 matchedIndex = findTypeaheadMatch(
+                    items,
+                    search,
+                    focusedIndex
+                );
+
+                if (matchedIndex !== -1) {
+                    event.preventDefault();
+                    focusMenuItem(items[matchedIndex]);
+                }
+            }
+        };
+
+        const dropdownContent = (
+            <Transition
+                transition="fade"
+                duration={150}
+                mounted={level.menu.opened}
+                style={{ position: "relative", zIndex: 1000 }}
+                {...transitionProps}
+            >
+                <div
+                    ref={useMergeRefs([ref, level.menu.refs.setFloating])}
+                    role="menu"
+                    tabIndex={-1}
+                    style={{
+                        ...level.menu.floatingStyles,
+                        zIndex: 1000,
+                        scrollbarGutter: "auto",
+                        ...style
+                    }}
+                    className={cx(
+                        "z-50 min-w-32 max-h-80 overflow-y-auto refraktor-scrollbar",
+                        "p-1 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md border border-[var(--refraktor-border)]",
+                        getRadius(radius),
+                        getStyles("dropdown"),
+                        className
+                    )}
+                    {...level.menu.getFloatingProps({
+                        onKeyDown: handleKeyDown
+                    })}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </Transition>
+        );
+
+        const wrappedContent = (
+            <FloatingFocusManager
+                context={level.menu.context}
+                modal={false}
+                initialFocus={-1}
+                disabled={!level.menu.opened}
+            >
+                {dropdownContent}
+            </FloatingFocusManager>
+        );
+
+        return withinPortal ? (
+            <FloatingPortal>{wrappedContent}</FloatingPortal>
+        ) : (
+            wrappedContent
+        );
+    }
+);
+
+MenuDropdown.displayName = "@refraktor/core/Menu.Dropdown";
+
+export default MenuDropdown;