@refraktor/core 0.0.3 → 0.0.4

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

@@ -1,221 +1,221 @@
-import { useEffect, useRef } from "react";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { MenuSubDropdownFactoryPayload } from "../menu.types";
-import {
-    findFocusedMenuItemIndex,
-    findTypeaheadMatch,
-    focusMenuItem,
-    getNavigableMenuItems,
-    MenuLevelProvider,
-    useMenuRootContext,
-    useMenuSubContext
-} from "../menu.context";
-import { Transition } from "../../transition";
-import {
-    FloatingFocusManager,
-    FloatingPortal,
-    useMergeRefs
-} from "@floating-ui/react";
-
-const MenuSubDropdown = factory<MenuSubDropdownFactoryPayload>(
-    ({ children, className, style, ...props }, ref) => {
-        const { cx, getRadius } = useTheme();
-        const { radius, withinPortal, transitionProps, getStyles } =
-            useMenuRootContext();
-        const { submenuLevel } = useMenuSubContext();
-
-        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(submenuLevel.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") {
-                event.preventDefault();
-                submenuLevel.closeMenu();
-                submenuLevel.menu.refs.reference.current?.focus();
-                return;
-            }
-
-            if (event.key === "Escape") {
-                event.preventDefault();
-                submenuLevel.closeMenu();
-                submenuLevel.menu.refs.reference.current?.focus();
-                return;
-            }
-
-            if (event.key === "Tab") {
-                submenuLevel.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={submenuLevel.menu.opened}
-                style={{ position: "relative", zIndex: 1000 }}
-                {...transitionProps}
-            >
-                <MenuLevelProvider value={submenuLevel}>
-                    <div
-                        ref={useMergeRefs([
-                            ref,
-                            submenuLevel.menu.refs.setFloating
-                        ])}
-                        role="menu"
-                        tabIndex={-1}
-                        style={{
-                            ...submenuLevel.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"),
-                            getStyles("subDropdown"),
-                            className
-                        )}
-                        {...submenuLevel.menu.getFloatingProps({
-                            onKeyDown: handleKeyDown
-                        })}
-                        {...props}
-                    >
-                        {children}
-                    </div>
-                </MenuLevelProvider>
-            </Transition>
-        );
-
-        const wrappedContent = submenuLevel.menu.opened ? (
-            <FloatingFocusManager
-                context={submenuLevel.menu.context}
-                modal={false}
-                initialFocus={-1}
-            >
-                {dropdownContent}
-            </FloatingFocusManager>
-        ) : (
-            dropdownContent
-        );
-
-        return withinPortal ? (
-            <FloatingPortal>{wrappedContent}</FloatingPortal>
-        ) : (
-            wrappedContent
-        );
-    }
-);
-
-MenuSubDropdown.displayName = "@refraktor/core/Menu.SubDropdown";
-
-export default MenuSubDropdown;
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { MenuSubDropdownFactoryPayload } from "../menu.types";
+import {
+    findFocusedMenuItemIndex,
+    findTypeaheadMatch,
+    focusMenuItem,
+    getNavigableMenuItems,
+    MenuLevelProvider,
+    useMenuRootContext,
+    useMenuSubContext
+} from "../menu.context";
+import { Transition } from "../../transition";
+import {
+    FloatingFocusManager,
+    FloatingPortal,
+    useMergeRefs
+} from "@floating-ui/react";
+
+const MenuSubDropdown = factory<MenuSubDropdownFactoryPayload>(
+    ({ children, className, style, ...props }, ref) => {
+        const { cx, getRadius } = useTheme();
+        const { radius, withinPortal, transitionProps, getStyles } =
+            useMenuRootContext();
+        const { submenuLevel } = useMenuSubContext();
+
+        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(submenuLevel.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") {
+                event.preventDefault();
+                submenuLevel.closeMenu();
+                submenuLevel.menu.refs.reference.current?.focus();
+                return;
+            }
+
+            if (event.key === "Escape") {
+                event.preventDefault();
+                submenuLevel.closeMenu();
+                submenuLevel.menu.refs.reference.current?.focus();
+                return;
+            }
+
+            if (event.key === "Tab") {
+                submenuLevel.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={submenuLevel.menu.opened}
+                style={{ position: "relative", zIndex: 1000 }}
+                {...transitionProps}
+            >
+                <MenuLevelProvider value={submenuLevel}>
+                    <div
+                        ref={useMergeRefs([
+                            ref,
+                            submenuLevel.menu.refs.setFloating
+                        ])}
+                        role="menu"
+                        tabIndex={-1}
+                        style={{
+                            ...submenuLevel.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"),
+                            getStyles("subDropdown"),
+                            className
+                        )}
+                        {...submenuLevel.menu.getFloatingProps({
+                            onKeyDown: handleKeyDown
+                        })}
+                        {...props}
+                    >
+                        {children}
+                    </div>
+                </MenuLevelProvider>
+            </Transition>
+        );
+
+        const wrappedContent = submenuLevel.menu.opened ? (
+            <FloatingFocusManager
+                context={submenuLevel.menu.context}
+                modal={false}
+                initialFocus={-1}
+            >
+                {dropdownContent}
+            </FloatingFocusManager>
+        ) : (
+            dropdownContent
+        );
+
+        return withinPortal ? (
+            <FloatingPortal>{wrappedContent}</FloatingPortal>
+        ) : (
+            wrappedContent
+        );
+    }
+);
+
+MenuSubDropdown.displayName = "@refraktor/core/Menu.SubDropdown";
+
+export default MenuSubDropdown;

package/src/components/modal/index.ts

@@ -3,6 +3,7 @@ export { ModalRoot } from "./modal-root";
 export { ModalOverlay } from "./modal-overlay";
 export { ModalContent } from "./modal-content";
 export { ModalHeader } from "./modal-header";
+export { ModalBody } from "./modal-body";
 export { ModalClose } from "./modal-close";
 export type {
     ModalProps,
@@ -10,6 +11,8 @@ export type {
     ModalOverlayProps,
     ModalContentProps,
     ModalHeaderProps,
+    ModalBodyProps,
     ModalCloseProps,
-    ModalClassNames
+    ModalClassNames,
+    ModalSize
 } from "./modal.types";

package/src/components/modal/modal-body/index.ts

@@ -0,0 +1 @@
+export { default as ModalBody } from "./modal-body";

package/src/components/modal/modal-body/modal-body.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useModalContext } from "../modal.context";
+import { ModalBodyFactoryPayload } from "../modal.types";
+
+const ModalBody = factory<ModalBodyFactoryPayload>(
+    ({ children, className, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { getStyles } = useModalContext();
+
+        return (
+            <div
+                ref={ref}
+                className={cx(
+                    "overflow-y-auto",
+                    getStyles("body"),
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        );
+    }
+);
+
+ModalBody.displayName = "@refraktor/core/Modal.Body";
+
+export default ModalBody;

package/src/components/modal/modal-content/modal-content.tsx

@@ -1,9 +1,21 @@
+import {
+    FloatingFocusManager,
+    FloatingPortal
+} from "@floating-ui/react";
 import { useTheme } from "../../../theme";
 import { factory } from "../../../utils";
-import { Portal } from "../../portal";
 import { Transition } from "../../transition";
 import { useModalContext } from "../modal.context";
-import { ModalContentFactoryPayload } from "../modal.types";
+import { ModalContentFactoryPayload, ModalSize } from "../modal.types";
+
+const sizeClasses: Record<ModalSize, string> = {
+    xs: "max-w-xs",
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    full: "max-w-full"
+};
 
 const ModalContent = factory<ModalContentFactoryPayload>(
     ({ children, className, style, ...props }, ref) => {
@@ -12,14 +24,17 @@ const ModalContent = factory<ModalContentFactoryPayload>(
             modal,
             withinPortal,
             radius,
+            size,
+            centered,
+            trapFocus,
+            returnFocus,
             transitionProps,
             headerId,
-            contentRef,
             getStyles
         } = useModalContext();
 
         const setRefs = (node: HTMLDivElement | null) => {
-            contentRef.current = node;
+            modal.refs.setFloating(node);
 
             if (typeof ref === "function") {
                 ref(node);
@@ -38,32 +53,64 @@ const ModalContent = factory<ModalContentFactoryPayload>(
                 mounted={modal.opened}
                 {...resolvedTransitionProps}
                 className={cx(
-                    "fixed inset-0 z-50 grid place-items-center pointer-events-none",
+                    "fixed inset-0 z-50 grid pointer-events-none",
+                    centered ? "place-items-center" : "items-start justify-center pt-12",
                     transitionClassName
                 )}
             >
-                <div
-                    ref={setRefs}
-                    role="dialog"
-                    aria-modal="true"
-                    aria-labelledby={headerId}
-                    data-opened={modal.opened}
-                    style={style}
-                    className={cx(
-                        "pointer-events-auto relative z-50 w-full max-w-md",
-                        "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
-                        getRadius(radius),
-                        getStyles("content"),
-                        className
-                    )}
-                    {...props}
-                >
-                    {children}
-                </div>
+                {modal.opened ? (
+                    <FloatingFocusManager
+                        context={modal.context}
+                        modal={trapFocus}
+                        returnFocus={returnFocus}
+                        outsideElementsInert={false}
+                    >
+                        <div
+                            ref={setRefs}
+                            aria-labelledby={headerId}
+                            data-opened={modal.opened}
+                            style={style}
+                            className={cx(
+                                "pointer-events-auto relative z-50 w-full",
+                                "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
+                                sizeClasses[size],
+                                getRadius(radius),
+                                getStyles("content"),
+                                className
+                            )}
+                            {...modal.getFloatingProps()}
+                            {...props}
+                        >
+                            {children}
+                        </div>
+                    </FloatingFocusManager>
+                ) : (
+                    <div
+                        ref={setRefs}
+                        aria-labelledby={headerId}
+                        data-opened={modal.opened}
+                        style={style}
+                        className={cx(
+                            "pointer-events-auto relative z-50 w-full",
+                            "border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
+                            sizeClasses[size],
+                            getRadius(radius),
+                            getStyles("content"),
+                            className
+                        )}
+                        {...props}
+                    >
+                        {children}
+                    </div>
+                )}
             </Transition>
         );
 
-        return withinPortal ? <Portal>{content}</Portal> : content;
+        return withinPortal ? (
+            <FloatingPortal>{content}</FloatingPortal>
+        ) : (
+            content
+        );
     }
 );
 

package/src/components/modal/modal-header/modal-header.tsx

@@ -5,7 +5,7 @@ import { useModalContext } from "../modal.context";
 import { ModalHeaderFactoryPayload } from "../modal.types";
 
 const ModalHeader = factory<ModalHeaderFactoryPayload>(
-    ({ children, className, id, text, withClose = true, ...props }, ref) => {
+    ({ children, className, id, withClose = true, ...props }, ref) => {
         const { cx } = useTheme();
         const { headerId, getStyles } = useModalContext();
         const resolvedId = id ?? headerId;
@@ -24,7 +24,7 @@ const ModalHeader = factory<ModalHeaderFactoryPayload>(
                     id={resolvedId}
                     className="min-w-0 flex-1 text-sm font-semibold leading-5 text-[var(--refraktor-text)]"
                 >
-                    {text ?? children}
+                    {children}
                 </div>
 
                 {withClose && (