@refraktor/core 0.0.2 → 0.0.4

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

@@ -0,0 +1,135 @@
+import {
+    FloatingFocusManager,
+    FloatingPortal
+} from "@floating-ui/react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { Transition, TransitionProps } from "../../transition";
+import { useDrawerContext } from "../drawer.context";
+import { DrawerContentFactoryPayload, DrawerPosition } from "../drawer.types";
+import { getSizeStyles } from "../drawer.styles";
+
+const positionClasses: Record<DrawerPosition, string> = {
+    left: "left-0 top-0 h-full max-h-full",
+    right: "right-0 top-0 h-full max-h-full",
+    top: "left-0 top-0 w-full max-w-full",
+    bottom: "bottom-0 left-0 w-full max-w-full"
+};
+
+const transitionsByPosition: Record<
+    DrawerPosition,
+    TransitionProps["transition"]
+> = {
+    left: "slide-right",
+    right: "slide-left",
+    top: "slide-down",
+    bottom: "slide-up"
+};
+
+const DrawerContent = factory<DrawerContentFactoryPayload>(
+    ({ children, className, style, ...props }, ref) => {
+        const { cx, getRadius } = useTheme();
+        const {
+            drawer,
+            withinPortal,
+            radius,
+            position,
+            size,
+            trapFocus,
+            returnFocus,
+            transitionProps,
+            headerId,
+            getStyles
+        } = useDrawerContext();
+
+        const setRefs = (node: HTMLDivElement | null) => {
+            drawer.refs.setFloating(node);
+
+            if (typeof ref === "function") {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        };
+
+        const { className: transitionClassName, ...resolvedTransitionProps } =
+            transitionProps ?? {};
+
+        const sizeStyles = getSizeStyles(position, size);
+
+        const content = (
+            <Transition
+                transition={transitionsByPosition[position]}
+                duration={200}
+                mounted={drawer.opened}
+                {...resolvedTransitionProps}
+                className={cx(
+                    "fixed inset-0 z-50 pointer-events-none",
+                    transitionClassName
+                )}
+            >
+                {drawer.opened ? (
+                    <FloatingFocusManager
+                        context={drawer.context}
+                        modal={trapFocus}
+                        returnFocus={returnFocus}
+                        outsideElementsInert={false}
+                    >
+                        <div
+                            ref={setRefs}
+                            aria-labelledby={headerId}
+                            data-opened={drawer.opened}
+                            data-position={position}
+                            style={{
+                                ...sizeStyles,
+                                ...style
+                            }}
+                            className={cx(
+                                "pointer-events-auto fixed z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
+                                positionClasses[position],
+                                getRadius(radius),
+                                getStyles("content"),
+                                className
+                            )}
+                            {...drawer.getFloatingProps()}
+                            {...props}
+                        >
+                            {children}
+                        </div>
+                    </FloatingFocusManager>
+                ) : (
+                    <div
+                        ref={setRefs}
+                        aria-labelledby={headerId}
+                        data-opened={drawer.opened}
+                        data-position={position}
+                        style={{
+                            ...sizeStyles,
+                            ...style
+                        }}
+                        className={cx(
+                            "pointer-events-auto fixed z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-4 text-[var(--refraktor-text)] shadow-md",
+                            positionClasses[position],
+                            getRadius(radius),
+                            getStyles("content"),
+                            className
+                        )}
+                        {...props}
+                    >
+                        {children}
+                    </div>
+                )}
+            </Transition>
+        );
+
+        return withinPortal ? (
+            <FloatingPortal>{content}</FloatingPortal>
+        ) : (
+            content
+        );
+    }
+);
+
+DrawerContent.displayName = "@refraktor/core/Drawer.Content";
+
+export default DrawerContent;

package/src/components/drawer/drawer-content/index.ts

@@ -0,0 +1 @@
+export { default as DrawerContent } from "./drawer-content";

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

@@ -0,0 +1,40 @@
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { DrawerClose } from "../drawer-close";
+import { useDrawerContext } from "../drawer.context";
+import { DrawerHeaderFactoryPayload } from "../drawer.types";
+
+const DrawerHeader = factory<DrawerHeaderFactoryPayload>(
+    ({ children, className, id, text, withClose = true, ...props }, ref) => {
+        const { cx } = useTheme();
+        const { headerId, getStyles } = useDrawerContext();
+        const resolvedId = id ?? headerId;
+
+        return (
+            <div
+                ref={ref}
+                className={cx(
+                    "mb-4 flex items-center justify-between",
+                    getStyles("header"),
+                    className
+                )}
+                {...props}
+            >
+                <div
+                    id={resolvedId}
+                    className="min-w-0 flex-1 text-sm font-semibold leading-5 text-[var(--refraktor-text)]"
+                >
+                    {text ?? children}
+                </div>
+
+                {withClose && (
+                    <DrawerClose className="static shrink-0 self-center" />
+                )}
+            </div>
+        );
+    }
+);
+
+DrawerHeader.displayName = "@refraktor/core/Drawer.Header";
+
+export default DrawerHeader;

package/src/components/drawer/drawer-header/index.ts

@@ -0,0 +1 @@
+export { default as DrawerHeader } from "./drawer-header";

package/src/components/drawer/drawer-overlay/drawer-overlay.tsx

@@ -0,0 +1,87 @@
+import { FloatingOverlay, FloatingPortal } from "@floating-ui/react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { Transition } from "../../transition";
+import { useDrawerContext } from "../drawer.context";
+import { DrawerOverlayFactoryPayload } from "../drawer.types";
+
+const DrawerOverlay = factory<DrawerOverlayFactoryPayload>(
+    (
+        {
+            closeOnClick = true,
+            backgroundOpacity = 0.5,
+            blur = 0,
+            className,
+            onMouseDown,
+            style,
+            ...props
+        },
+        ref
+    ) => {
+        const { cx } = useTheme();
+        const {
+            drawer,
+            closeOnClickOutside,
+            lockScroll,
+            withinPortal,
+            transitionProps,
+            getStyles
+        } = useDrawerContext();
+
+        const blurValue = typeof blur === "number" ? `${blur}px` : blur;
+        const backdropFilterValue =
+            blurValue !== "0" && blurValue !== "0px"
+                ? `blur(${blurValue})`
+                : undefined;
+
+        const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+            onMouseDown?.(event);
+
+            if (
+                event.defaultPrevented ||
+                !closeOnClick ||
+                !closeOnClickOutside
+            ) {
+                return;
+            }
+
+            drawer.close();
+        };
+
+        const overlayContent = (
+            <Transition
+                transition="fade"
+                duration={150}
+                mounted={drawer.opened}
+                {...transitionProps}
+            >
+                <FloatingOverlay
+                    lockScroll={lockScroll}
+                    ref={ref}
+                    className={cx(
+                        "z-40",
+                        getStyles("overlay"),
+                        className
+                    )}
+                    style={{
+                        backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
+                        backdropFilter: backdropFilterValue,
+                        ...style
+                    }}
+                    onMouseDown={handleMouseDown}
+                    {...props}
+                />
+            </Transition>
+        );
+
+        return withinPortal ? (
+            <FloatingPortal>{overlayContent}</FloatingPortal>
+        ) : (
+            overlayContent
+        );
+    }
+);
+
+DrawerOverlay.displayName = "@refraktor/core/Drawer.Overlay";
+
+export default DrawerOverlay;

package/src/components/drawer/drawer-overlay/index.ts

@@ -0,0 +1 @@
+export { default as DrawerOverlay } from "./drawer-overlay";

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

@@ -0,0 +1,93 @@
+import { useId } from "@refraktor/utils";
+import { useTheme } from "../../../theme";
+import { factory, useClassNames, useProps } from "../../../utils";
+import { DrawerProvider } from "../drawer.context";
+import { useDrawer } from "../use-drawer";
+import {
+    DrawerClassNames,
+    DrawerRootFactoryPayload,
+    DrawerRootProps
+} from "../drawer.types";
+
+const defaultProps = {
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    lockScroll: true,
+    withinPortal: true,
+    radius: "none",
+    position: "right",
+    size: "md",
+    trapFocus: true,
+    returnFocus: true
+} satisfies Partial<DrawerRootProps>;
+
+const DrawerRoot = factory<DrawerRootFactoryPayload>((_props, ref) => {
+    const { cx } = useTheme();
+    const {
+        id,
+        children,
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        closeOnClickOutside,
+        closeOnEscape,
+        lockScroll,
+        withinPortal,
+        radius,
+        position,
+        size,
+        trapFocus,
+        returnFocus,
+        transitionProps,
+        className,
+        classNames,
+        ...props
+    } = useProps("Drawer", defaultProps, _props);
+    const classes = useClassNames("Drawer", classNames);
+
+    const _id = useId(id);
+    const headerId = `${_id}-header`;
+
+    const drawer = useDrawer({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        closeOnClickOutside,
+        closeOnEscape
+    });
+
+    const getStyles = (part: keyof DrawerClassNames) => classes[part];
+
+    return (
+        <DrawerProvider
+            value={{
+                drawer,
+                closeOnClickOutside,
+                lockScroll,
+                withinPortal,
+                radius,
+                position,
+                size,
+                trapFocus,
+                returnFocus,
+                transitionProps,
+                headerId,
+                classNames,
+                getStyles
+            }}
+        >
+            <div
+                ref={ref}
+                id={_id}
+                className={cx(classes.root, className)}
+                {...props}
+            >
+                {children}
+            </div>
+        </DrawerProvider>
+    );
+});
+
+DrawerRoot.displayName = "@refraktor/core/Drawer.Root";
+
+export default DrawerRoot;

package/src/components/drawer/drawer-root/index.ts

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

package/src/components/drawer/drawer.context.ts

@@ -0,0 +1,26 @@
+import { createSafeContext } from "@refraktor/utils";
+import { RefraktorRadius, RefraktorSize } from "../../theme";
+import { TransitionProps } from "../transition";
+import { DrawerClassNames, DrawerPosition } from "./drawer.types";
+import { UseDrawerReturn } from "./use-drawer";
+
+export interface DrawerContextValue {
+    drawer: UseDrawerReturn;
+    closeOnClickOutside: boolean;
+    lockScroll: boolean;
+    withinPortal: boolean;
+    radius: RefraktorRadius;
+    position: DrawerPosition;
+    size: RefraktorSize;
+    trapFocus: boolean;
+    returnFocus: boolean;
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    headerId: string;
+    classNames?: DrawerClassNames;
+    getStyles: (part: keyof DrawerClassNames) => string | undefined;
+}
+
+export const [DrawerProvider, useDrawerContext] =
+    createSafeContext<DrawerContextValue>(
+        "Drawer context was not found in tree. Make sure Drawer subcomponents are wrapped with Drawer or DrawerRoot."
+    );

package/src/components/drawer/drawer.styles.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from "react";
+import { RefraktorSize } from "../../theme";
+import { DrawerPosition } from "./drawer.types";
+
+const sizes: Record<RefraktorSize, string> = {
+    xs: "16rem",
+    sm: "20rem",
+    md: "24rem",
+    lg: "30rem",
+    xl: "36rem"
+};
+
+export const getSize = (size: RefraktorSize = "md") => sizes[size];
+
+export function getSizeStyles(
+    position: DrawerPosition,
+    size: RefraktorSize = "md"
+): CSSProperties {
+    const resolvedSize = getSize(size);
+
+    if (position === "left" || position === "right") {
+        return {
+            width: resolvedSize,
+            maxWidth: "100vw"
+        };
+    }
+
+    return {
+        height: resolvedSize,
+        maxHeight: "100vh"
+    };
+}