@refraktor/core 0.0.1 → 0.0.2

package/src/components/modal/modal.test.tsx

@@ -1,110 +1,110 @@
-import { describe, expect, it, vi } from "vitest";
-import { render, screen, userEvent, waitFor } from "../../vitest";
-import Modal from "./modal";
-import { ModalContent } from "./modal-content";
-import { ModalOverlay } from "./modal-overlay";
-import { ModalRoot } from "./modal-root";
-
-describe("@refraktor/core/Modal", () => {
-    const transitionProps = {
-        duration: 0,
-        immediate: true
-    } as const;
-
-    it("renders with compound subcomponents and closes with header close button", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Modal defaultOpened transitionProps={transitionProps}>
-                <Modal.Overlay />
-
-                <Modal.Content>
-                    <Modal.Header text="Delete item" />
-                    <p>Are you sure?</p>
-                </Modal.Content>
-            </Modal>
-        );
-
-        expect(
-            await screen.findByRole("dialog", { name: "Delete item" })
-        ).toBeInTheDocument();
-
-        await user.click(screen.getByRole("button", { name: "Close" }));
-
-        await waitFor(() => {
-            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-        });
-    });
-
-    it("calls onOpenedChange when clicking overlay in controlled mode", async () => {
-        const user = userEvent.setup();
-        const onOpenedChange = vi.fn();
-
-        await render(
-            <Modal
-                opened
-                onOpenedChange={onOpenedChange}
-                transitionProps={transitionProps}
-            >
-                <Modal.Overlay data-testid="overlay" />
-                <Modal.Content>Controlled modal</Modal.Content>
-            </Modal>
-        );
-
-        await user.click(await screen.findByTestId("overlay"));
-
-        expect(onOpenedChange).toHaveBeenCalledWith(false);
-    });
-
-    it("closes on Escape key", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Modal defaultOpened transitionProps={transitionProps}>
-                <Modal.Content>Keyboard close</Modal.Content>
-            </Modal>
-        );
-
-        await screen.findByRole("dialog");
-
-        await user.keyboard("{Escape}");
-
-        await waitFor(() => {
-            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-        });
-    });
-
-    it("supports standalone subcomponents with ModalRoot", async () => {
-        await render(
-            <ModalRoot defaultOpened transitionProps={transitionProps}>
-                <ModalOverlay />
-                <ModalContent>Standalone composition</ModalContent>
-            </ModalRoot>
-        );
-
-        expect(await screen.findByRole("dialog")).toBeInTheDocument();
-    });
-
-    it("locks and unlocks body scroll when enabled", async () => {
-        const user = userEvent.setup();
-
-        await render(
-            <Modal defaultOpened lockScroll transitionProps={transitionProps}>
-                <Modal.Content>
-                    Scroll locked
-                    <Modal.Close />
-                </Modal.Content>
-            </Modal>
-        );
-
-        await waitFor(() => {
-            expect(document.body).toHaveAttribute("data-scroll-locked");
-        });
-
-        await user.click(screen.getByRole("button", { name: "Close" }));
-
-        await waitFor(() => {
-            expect(document.body).not.toHaveAttribute("data-scroll-locked");
-        });
-    });
-});
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent, waitFor } from "../../vitest";
+import Modal from "./modal";
+import { ModalContent } from "./modal-content";
+import { ModalOverlay } from "./modal-overlay";
+import { ModalRoot } from "./modal-root";
+
+describe("@refraktor/core/Modal", () => {
+    const transitionProps = {
+        duration: 0,
+        immediate: true
+    } as const;
+
+    it("renders with compound subcomponents and closes with header close button", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Modal defaultOpened transitionProps={transitionProps}>
+                <Modal.Overlay />
+
+                <Modal.Content>
+                    <Modal.Header text="Delete item" />
+                    <p>Are you sure?</p>
+                </Modal.Content>
+            </Modal>
+        );
+
+        expect(
+            await screen.findByRole("dialog", { name: "Delete item" })
+        ).toBeInTheDocument();
+
+        await user.click(screen.getByRole("button", { name: "Close" }));
+
+        await waitFor(() => {
+            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        });
+    });
+
+    it("calls onOpenedChange when clicking overlay in controlled mode", async () => {
+        const user = userEvent.setup();
+        const onOpenedChange = vi.fn();
+
+        await render(
+            <Modal
+                opened
+                onOpenedChange={onOpenedChange}
+                transitionProps={transitionProps}
+            >
+                <Modal.Overlay data-testid="overlay" />
+                <Modal.Content>Controlled modal</Modal.Content>
+            </Modal>
+        );
+
+        await user.click(await screen.findByTestId("overlay"));
+
+        expect(onOpenedChange).toHaveBeenCalledWith(false);
+    });
+
+    it("closes on Escape key", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Modal defaultOpened transitionProps={transitionProps}>
+                <Modal.Content>Keyboard close</Modal.Content>
+            </Modal>
+        );
+
+        await screen.findByRole("dialog");
+
+        await user.keyboard("{Escape}");
+
+        await waitFor(() => {
+            expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+        });
+    });
+
+    it("supports standalone subcomponents with ModalRoot", async () => {
+        await render(
+            <ModalRoot defaultOpened transitionProps={transitionProps}>
+                <ModalOverlay />
+                <ModalContent>Standalone composition</ModalContent>
+            </ModalRoot>
+        );
+
+        expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    });
+
+    it("locks and unlocks body scroll when enabled", async () => {
+        const user = userEvent.setup();
+
+        await render(
+            <Modal defaultOpened lockScroll transitionProps={transitionProps}>
+                <Modal.Content>
+                    Scroll locked
+                    <Modal.Close />
+                </Modal.Content>
+            </Modal>
+        );
+
+        await waitFor(() => {
+            expect(document.body).toHaveAttribute("data-scroll-locked");
+        });
+
+        await user.click(screen.getByRole("button", { name: "Close" }));
+
+        await waitFor(() => {
+            expect(document.body).not.toHaveAttribute("data-scroll-locked");
+        });
+    });
+});

package/src/components/modal/use-modal.ts

@@ -1,101 +1,101 @@
-import { useUncontrolled } from "@refraktor/utils";
-import { useCallback, useEffect } from "react";
-
-interface UseModalProps {
-    opened?: boolean;
-    defaultOpened?: boolean;
-    onOpenedChange?: (opened: boolean) => void;
-    closeOnClickOutside?: boolean;
-    closeOnEscape?: boolean;
-    contentRef: React.MutableRefObject<HTMLElement | null>;
-}
-
-export interface UseModalReturn {
-    opened: boolean;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}
-
-export function useModal(options: UseModalProps): UseModalReturn {
-    const {
-        opened,
-        defaultOpened,
-        onOpenedChange,
-        closeOnClickOutside = true,
-        closeOnEscape = true,
-        contentRef
-    } = options;
-
-    const [isOpen, setIsOpen] = useUncontrolled({
-        value: opened,
-        defaultValue: defaultOpened,
-        finalValue: false,
-        onChange: onOpenedChange
-    });
-
-    const open = useCallback(() => {
-        setIsOpen(true);
-    }, [setIsOpen]);
-
-    const close = useCallback(() => {
-        setIsOpen(false);
-    }, [setIsOpen]);
-
-    const toggle = useCallback(() => {
-        setIsOpen(!isOpen);
-    }, [isOpen, setIsOpen]);
-
-    useEffect(() => {
-        if (!isOpen || !closeOnEscape) {
-            return;
-        }
-
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if (event.key === "Escape") {
-                setIsOpen(false);
-            }
-        };
-
-        document.addEventListener("keydown", handleKeyDown);
-
-        return () => {
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [closeOnEscape, isOpen, setIsOpen]);
-
-    useEffect(() => {
-        if (!isOpen || !closeOnClickOutside) {
-            return;
-        }
-
-        const handlePointerDown = (event: MouseEvent | TouchEvent) => {
-            const target = event.target;
-
-            if (!(target instanceof Node)) {
-                return;
-            }
-
-            if (contentRef.current?.contains(target)) {
-                return;
-            }
-
-            setIsOpen(false);
-        };
-
-        document.addEventListener("mousedown", handlePointerDown);
-        document.addEventListener("touchstart", handlePointerDown);
-
-        return () => {
-            document.removeEventListener("mousedown", handlePointerDown);
-            document.removeEventListener("touchstart", handlePointerDown);
-        };
-    }, [closeOnClickOutside, contentRef, isOpen, setIsOpen]);
-
-    return {
-        opened: isOpen,
-        open,
-        close,
-        toggle
-    };
-}
+import { useUncontrolled } from "@refraktor/utils";
+import { useCallback, useEffect } from "react";
+
+interface UseModalProps {
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onOpenedChange?: (opened: boolean) => void;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    contentRef: React.MutableRefObject<HTMLElement | null>;
+}
+
+export interface UseModalReturn {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+
+export function useModal(options: UseModalProps): UseModalReturn {
+    const {
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        closeOnClickOutside = true,
+        closeOnEscape = true,
+        contentRef
+    } = options;
+
+    const [isOpen, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+
+    const toggle = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen, setIsOpen]);
+
+    useEffect(() => {
+        if (!isOpen || !closeOnEscape) {
+            return;
+        }
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === "Escape") {
+                setIsOpen(false);
+            }
+        };
+
+        document.addEventListener("keydown", handleKeyDown);
+
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [closeOnEscape, isOpen, setIsOpen]);
+
+    useEffect(() => {
+        if (!isOpen || !closeOnClickOutside) {
+            return;
+        }
+
+        const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+            const target = event.target;
+
+            if (!(target instanceof Node)) {
+                return;
+            }
+
+            if (contentRef.current?.contains(target)) {
+                return;
+            }
+
+            setIsOpen(false);
+        };
+
+        document.addEventListener("mousedown", handlePointerDown);
+        document.addEventListener("touchstart", handlePointerDown);
+
+        return () => {
+            document.removeEventListener("mousedown", handlePointerDown);
+            document.removeEventListener("touchstart", handlePointerDown);
+        };
+    }, [closeOnClickOutside, contentRef, isOpen, setIsOpen]);
+
+    return {
+        opened: isOpen,
+        open,
+        close,
+        toggle
+    };
+}

package/src/components/number-input/number-input.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "../../vitest";
+import NumberInput from "./number-input";
+
+describe("@refraktor/core/NumberInput", () => {
+    it("supports input wrapper props", async () => {
+        await render(
+            <NumberInput
+                label="Quantity"
+                description="Enter desired amount"
+                error="Quantity is required"
+            />
+        );
+
+        const input = screen.getByLabelText("Quantity");
+
+        expect(input).toHaveAttribute("type", "number");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(screen.getByText("Enter desired amount")).toBeInTheDocument();
+        expect(screen.getByText("Quantity is required")).toBeInTheDocument();
+    });
+});

package/src/components/number-input/number-input.tsx

@@ -69,6 +69,11 @@ const NumberInput = factory<NumberInputFactoryPayload>((_props, ref) => {
     const { cx } = useTheme();
     const {
         id,
+        label,
+        description,
+        error,
+        required,
+        withAsterisk,
         value,
         defaultValue,
         size,
@@ -134,8 +139,8 @@ const NumberInput = factory<NumberInputFactoryPayload>((_props, ref) => {
     };
 
     const stopHold = () => {
-        if (holdTimer.current) clearTimeout(holdTimer.current);
-        if (repeatTimer.current) clearInterval(repeatTimer.current);
+        if (holdTimer.current) clearInterval(holdTimer.current);
+        if (repeatTimer.current) clearTimeout(repeatTimer.current);
         holdTimer.current = null;
         repeatTimer.current = null;
     };
@@ -292,56 +297,79 @@ const NumberInput = factory<NumberInputFactoryPayload>((_props, ref) => {
         );
     }, [controlsPosition, canIncrement, canDecrement, classes, controlSizing]);
 
+    const hasWrapper = label || description || error;
+
+    const field = (
+        <InputField
+            ref={ref}
+            id={_id}
+            type="number"
+            required={required}
+            error={!!error}
+            disabled={disabled}
+            size={size}
+            min={min}
+            max={max}
+            step={step}
+            value={_value}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            onWheel={handleWheel}
+            leftSection={controlsPosition === "left" ? controls : undefined}
+            rightSection={controlsPosition === "right" ? controls : undefined}
+            className={className}
+            classNames={{
+                root: cx(
+                    "px-0 gap-0 items-stretch overflow-hidden",
+                    controlsPosition === "none"
+                        ? "px-2"
+                        : controlsPosition === "left"
+                          ? "pr-2"
+                          : "pl-2",
+                    classes.root
+                ),
+                leftSection: cx(
+                    "h-full self-stretch",
+                    controlsPosition === "left" && controlSizing.leftSpacing,
+                    classes.leftSection
+                ),
+                rightSection: cx(
+                    "h-full self-stretch",
+                    controlsPosition === "right" && controlSizing.rightSpacing,
+                    classes.rightSection
+                ),
+                ...(classes as any)
+            }}
+            aria-describedby={
+                error
+                    ? `${_id}-error`
+                    : description
+                      ? `${_id}-description`
+                      : undefined
+            }
+            aria-disabled={disabled}
+            aria-valuemin={min}
+            aria-valuemax={max}
+            aria-valuenow={Number(_value)}
+            {...props}
+        />
+    );
+
+    if (!hasWrapper) {
+        return field;
+    }
+
     return (
-        <InputWrapper>
-            <InputField
-                ref={ref}
-                type="number"
-                disabled={disabled}
-                size={size}
-                min={min}
-                max={max}
-                step={step}
-                value={_value}
-                onChange={handleChange}
-                onBlur={handleBlur}
-                onKeyDown={handleKeyDown}
-                onWheel={handleWheel}
-                leftSection={controlsPosition === "left" ? controls : undefined}
-                rightSection={
-                    controlsPosition === "right" ? controls : undefined
-                }
-                className={className}
-                classNames={{
-                    root: cx(
-                        "px-0 gap-0 items-stretch overflow-hidden",
-                        controlsPosition === "none"
-                            ? "px-2"
-                            : controlsPosition === "left"
-                              ? "pr-2"
-                              : "pl-2",
-                        classes.root
-                    ),
-                    leftSection: cx(
-                        "h-full self-stretch",
-                        controlsPosition === "left" &&
-                            controlSizing.leftSpacing,
-                        classes.leftSection
-                    ),
-                    rightSection: cx(
-                        "h-full self-stretch",
-                        controlsPosition === "right" &&
-                            controlSizing.rightSpacing,
-                        classes.rightSection
-                    ),
-                    ...(classes as any)
-                }}
-                aria-disabled={disabled}
-                aria-valuemin={min}
-                aria-valuemax={max}
-                aria-valuenow={Number(_value)}
-                {...props}
-            />
+        <InputWrapper
+            label={label}
+            description={description}
+            error={error}
+            required={required}
+            withAsterisk={withAsterisk}
+            inputId={_id}
+        >
+            {field}
         </InputWrapper>
     );
 });

package/src/components/number-input/number-input.types.ts

@@ -1,9 +1,9 @@
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { InputFieldClassNames, InputFieldProps } from "../input";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import { InputFieldClassNames, InputProps } from "../input";
 
 export type NumberInputControlsPosition = "left" | "right" | "none";
 
@@ -43,8 +43,8 @@ export interface _NumberInputProps {
     classNames?: NumberInputClassNames;
 }
 
-export type NumberInputProps = _NumberInputProps &
-    Omit<InputFieldProps, "onChange" | "type" | keyof _NumberInputProps>;
+export type NumberInputProps = _NumberInputProps &
+    Omit<InputProps, "onChange" | "type" | keyof _NumberInputProps>;
 
 export interface NumberInputFactoryPayload extends FactoryPayload {
     props: NumberInputProps;

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

@@ -26,6 +26,7 @@ const PopoverDropdown = factory<PopoverDropdownFactoryPayload>(
                 transition="fade"
                 duration={200}
                 mounted={popover.opened}
+                style={{ position: "relative", zIndex: 1000 }}
                 {...transitionProps}
             >
                 <div
@@ -42,6 +43,7 @@ const PopoverDropdown = factory<PopoverDropdownFactoryPayload>(
                     aria-modal="true"
                     style={{
                         ...popover.floatingStyles,
+                        zIndex: 1000,
                         ...style
                     }}
                     className={cx(

package/src/components/popover/use-popover.ts

@@ -142,7 +142,8 @@ export function usePopover(options: UsePopoverProps = {}): UsePopoverReturn {
         open: isOpen,
         onOpenChange: setIsOpen,
         middleware: middleware,
-        whileElementsMounted: autoUpdate
+        whileElementsMounted: autoUpdate,
+        strategy: "fixed"
     });
 
     const click = useClick(floating.context, {

package/src/components/portal/portal.tsx

@@ -98,7 +98,7 @@ const Portal = factory<PortalFactoryPayload>((_props, ref) => {
     return createPortal(<>{children}</>, nodeRef.current);
 });
 
-Portal.displayName = "@velra/core/Portal";
+Portal.displayName = "@refraktor/core/Portal";
 Portal.configure = createComponentConfig<PortalProps>();
 
 export default Portal;