react-miui 0.33.0 → 0.35.0

package/src/components/ui/tooltip/Tooltip.styled.ts

@@ -0,0 +1,36 @@
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+
+import { dimensionsPxToRem, fontPxToRem, keyframes, pxToRem, styled } from "../../../theme";
+
+const fadeIn = keyframes({
+    from: { opacity: 0, transform: "scale(0.96)" },
+    to: { opacity: 1, transform: "scale(1)" },
+});
+
+const StyledContent = styled(RadixTooltip.Content, {
+    "zIndex": 10,
+    "background": "$text2",
+    "color": "$background",
+    "padding": `${dimensionsPxToRem(18)} ${dimensionsPxToRem(36)}`,
+    "borderRadius": dimensionsPxToRem(12),
+    "fontSize": fontPxToRem(24),
+    "lineHeight": 1.3,
+    "maxWidth": pxToRem(280),
+    "boxShadow": `0 ${pxToRem(2)} ${pxToRem(8)} rgba(0, 0, 0, 0.18)`,
+    "userSelect": "none",
+    "transformOrigin": "var(--radix-tooltip-content-transform-origin)",
+    "animation": `${fadeIn.toString()} 120ms ease-out`,
+
+    "&[data-state=\"closed\"]": {
+        animationDirection: "reverse",
+    },
+});
+
+const StyledArrow = styled(RadixTooltip.Arrow, {
+    fill: "$text2",
+});
+
+export {
+    StyledContent,
+    StyledArrow,
+};

package/src/components/ui/tooltip/Tooltip.tsx

@@ -0,0 +1,195 @@
+import React, { forwardRef } from "react";
+
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+
+import { StyledArrow, StyledContent } from "./Tooltip.styled";
+
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
+
+interface TooltipProviderProps {
+    /**
+     * The duration from when the pointer enters the trigger until the tooltip opens, in milliseconds.
+     * Default: `500`.
+     */
+    delayDuration?: number;
+    /**
+     * If a tooltip has opened, the duration during which other tooltips open instantly
+     * (without waiting for `delayDuration`), in milliseconds.
+     * Default: `300`.
+     */
+    skipDelayDuration?: number;
+    /**
+     * When `true`, the tooltip content stays open while the pointer is over it.
+     * Set to `false` for stricter "hover the trigger only" behavior.
+     * Default: `true`.
+     */
+    disableHoverableContent?: boolean;
+    children: React.ReactNode;
+}
+
+/**
+ * Required wrapper for `<Tooltip>`. Render it once near the root of your app — usually
+ * around (or just inside) your top-level layout. It enables group-delay behavior via
+ * `skipDelayDuration`: once one tooltip in the subtree has been seen, the next ones
+ * open without waiting for `delayDuration`.
+ *
+ * A single `<Tooltip>` without a `<TooltipProvider>` ancestor will throw at runtime.
+ */
+const TooltipProvider = (props: TooltipProviderProps) => {
+    const radixProps: Omit<React.ComponentProps<typeof RadixTooltip.Provider>, "children"> = {};
+    if (props.delayDuration !== undefined) { radixProps.delayDuration = props.delayDuration; }
+    if (props.skipDelayDuration !== undefined) { radixProps.skipDelayDuration = props.skipDelayDuration; }
+    if (props.disableHoverableContent !== undefined) {
+        radixProps.disableHoverableContent = props.disableHoverableContent;
+    }
+
+    return (
+        <RadixTooltip.Provider {...radixProps}>
+            {props.children}
+        </RadixTooltip.Provider>
+    );
+};
+
+interface TooltipProps {
+    /**
+     * The content to render inside the tooltip.
+     */
+    content: React.ReactNode;
+    /**
+     * Preferred side of the trigger to render the tooltip against. Will be flipped
+     * automatically on collision unless `avoidCollisions` is `false`.
+     * Default: `"top"`.
+     */
+    side?: Side;
+    /**
+     * Distance in pixels between the trigger and the tooltip.
+     * Default: `6`.
+     */
+    sideOffset?: number;
+    /**
+     * Alignment along the chosen side.
+     * Default: `"center"`.
+     */
+    align?: Align;
+    /**
+     * Offset in pixels from the `align` edge.
+     * Default: `0`.
+     */
+    alignOffset?: number;
+    /**
+     * The duration from when the pointer enters the trigger until the tooltip opens.
+     * Overrides the provider's `delayDuration` for this tooltip only.
+     */
+    delayDuration?: number;
+    /**
+     * When `true`, the tooltip will not flip to the opposite side on collision.
+     * Default: `true` (collisions are avoided).
+     */
+    avoidCollisions?: boolean;
+    /**
+     * When `true`, renders an arrow pointing at the trigger.
+     * Default: `true`.
+     */
+    arrow?: boolean;
+    /**
+     * Controlled open state. If omitted, the tooltip is uncontrolled.
+     */
+    open?: boolean;
+    /**
+     * Initial open state for the uncontrolled mode.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Additional class name applied to the tooltip content.
+     */
+    className?: string;
+    /**
+     * The element that triggers the tooltip on hover/focus. Must be a single React element
+     * that can receive a ref and event handlers (a DOM element or a component using forwardRef).
+     */
+    children: React.ReactElement;
+}
+
+/**
+ * A tooltip that appears on hover or keyboard focus of its child trigger.
+ *
+ * Powered by Radix UI under the hood, so accessibility (ARIA, focus, escape, group delay)
+ * is handled. The content is portalled to `document.body`, so it escapes stacking contexts
+ * and renders above modals/drawers.
+ *
+ * Requires a `<TooltipProvider>` somewhere up the tree.
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider>
+ *     <Tooltip content="Save changes" side="bottom">
+ *         <Button>Save</Button>
+ *     </Tooltip>
+ * </TooltipProvider>
+ * ```
+ */
+// eslint-disable-next-line react/no-multi-comp
+const Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
+    const {
+        content,
+        side = "top",
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        sideOffset = 6,
+        align = "center",
+        alignOffset = 0,
+        delayDuration,
+        avoidCollisions = true,
+        arrow = true,
+        open,
+        defaultOpen,
+        onOpenChange,
+        className,
+        children,
+    } = props;
+
+    const rootProps: React.ComponentProps<typeof RadixTooltip.Root> = {};
+    if (open !== undefined) { rootProps.open = open; }
+    if (defaultOpen !== undefined) { rootProps.defaultOpen = defaultOpen; }
+    if (onOpenChange !== undefined) { rootProps.onOpenChange = onOpenChange; }
+    if (delayDuration !== undefined) { rootProps.delayDuration = delayDuration; }
+
+    return (
+        <RadixTooltip.Root {...rootProps}>
+            <RadixTooltip.Trigger asChild={true}>
+                {children}
+            </RadixTooltip.Trigger>
+            <RadixTooltip.Portal>
+                <StyledContent
+                    ref={ref}
+                    side={side}
+                    sideOffset={sideOffset}
+                    align={align}
+                    alignOffset={alignOffset}
+                    avoidCollisions={avoidCollisions}
+                    className={className}
+                >
+                    {content}
+                    {/* eslint-disable-next-line react/jsx-no-leaked-render */}
+                    {arrow && <StyledArrow width={10} height={5} />}
+                </StyledContent>
+            </RadixTooltip.Portal>
+        </RadixTooltip.Root>
+    );
+});
+
+Tooltip.displayName = "Tooltip";
+Tooltip.toString = () => StyledContent.toString();
+
+const TooltipContentSelector = StyledContent.toString();
+
+export {
+    Tooltip,
+    TooltipProvider,
+    TooltipContentSelector,
+};
+export type { TooltipProps, TooltipProviderProps };

package/src/index.ts

@@ -42,6 +42,7 @@ export * from "./components/ui/stats/Stats";
 export * from "./components/ui/tabs/Selector";
 export * from "./components/ui/toaster/Toaster";
 export * from "./components/ui/toolButton/ToolButton";
+export * from "./components/ui/tooltip/Tooltip";
 
 export * from "./components/utils/Gap";
 export * from "./components/utils/HandleEsc";

package/src/theme.css-global.ts

@@ -7,7 +7,6 @@ const injectGlobalStyles = globalCss({
     "*:focus-visible:focus-visible": {
         outline: "none !important",
         borderColor: "$focusColor",
-        backgroundColor: "var(--focus-bg-set)",
     },
     "body": {
         color: "$text",

package/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from "./toObjectValue";
 export * from "./useKeyPress";
+export * from "./useNativeValidity";
 export * from "./useTailSpin";

package/src/utils/useNativeValidity.ts

@@ -0,0 +1,57 @@
+import { useCallback, useState } from "react";
+
+import type React from "react";
+
+interface UseNativeValidityResult {
+    /** Combined: the explicit `error` prop OR the input's native invalid state. Pass to your `error`/styling. */
+    finalError: boolean;
+    /** Re-checks validity. Call from your `onBlur`. */
+    onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Clears the invalid flag if the value just became valid. Call from your `onChange`. */
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Fires when the form tries to submit an invalid value. Call from your `onInvalid`. */
+    onInvalid: () => void;
+    /** Clears the invalid flag if the input is currently valid. Useful after programmatic value changes. */
+    revalidate: (input: HTMLInputElement | null) => void;
+}
+
+/**
+ * Tracks native HTML5 validity (pattern, required, type=email/url, etc.) and surfaces it
+ * as an `error` boolean — the rule mirrors the CSS `:user-invalid` pseudo-class:
+ * invalid is sticky after blur or a failed submit, and clears as soon as the value becomes valid.
+ *
+ * Compose the returned handlers with your component's own `onBlur` / `onChange` / `onInvalid`.
+ */
+const useNativeValidity = (error: boolean | undefined): UseNativeValidityResult => {
+    const [nativeInvalid, setNativeInvalid] = useState(false);
+
+    const onBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+        setNativeInvalid(!e.currentTarget.checkValidity());
+    }, []);
+
+    const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.currentTarget.checkValidity()) {
+            setNativeInvalid(false);
+        }
+    }, []);
+
+    const onInvalid = useCallback(() => {
+        setNativeInvalid(true);
+    }, []);
+
+    const revalidate = useCallback((input: HTMLInputElement | null) => {
+        if (input?.checkValidity()) {
+            setNativeInvalid(false);
+        }
+    }, []);
+
+    return {
+        finalError: Boolean(error) || nativeInvalid,
+        onBlur,
+        onChange,
+        onInvalid,
+        revalidate,
+    };
+};
+
+export { useNativeValidity };