react-miui 0.34.0 → 0.36.0

package/src/components/ui/pop/Pop.styled.ts

@@ -1,4 +1,5 @@
 import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";
+import { rippleHostStyles } from "../../../utils/useRipple.styled";
 
 const Overlay = styled("div", {
     position: "fixed",
@@ -26,24 +27,20 @@ const ListItem = styled("li", {
     },
 });
 
-const Button = styled("button", {
-    "border": "none",
-    "background": "$background",
-    "height": dimensionsPxToRem(116),
-    "padding": `0 ${dimensionsPxToRem(42)}`,
-    "boxSizing": "border-box",
-    "width": "100%",
-    "minWidth": dimensionsPxToRem(460),
-    "textAlign": "left",
-    "color": "$popText",
-    "fontSize": fontPxToRem(26),
-    "fontWeight": "revert",
-    "display": "flex",
-    "alignItems": "center",
-
-    "&:hover": {
-        background: "$activeBg",
-    },
+const Button = styled("button", rippleHostStyles, {
+    border: "none",
+    background: "$background",
+    height: dimensionsPxToRem(116),
+    padding: `0 ${dimensionsPxToRem(42)}`,
+    boxSizing: "border-box",
+    width: "100%",
+    minWidth: dimensionsPxToRem(460),
+    textAlign: "left",
+    color: "$popText",
+    fontSize: fontPxToRem(26),
+    fontWeight: "revert",
+    display: "flex",
+    alignItems: "center",
 });
 
 const Icon = styled("div", {

package/src/components/ui/pop/PopOption.tsx

@@ -1,5 +1,8 @@
 import React, { forwardRef } from "react";
 
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+
+import { useRipple } from "../../../utils/useRipple";
 import { Button, FakeIcon, Icon, ListItem } from "./Pop.styled";
 
 interface Props {
@@ -11,13 +14,24 @@ interface Props {
 }
 
 const PopOption = forwardRef<HTMLLIElement, Props>((props, ref) => {
+    const buttonRef = useForwardedRef<HTMLButtonElement | null>(null);
+    const ripple = useRipple({ ref: buttonRef });
+
     const ic = props.icon
         ? <Icon>{props.icon}</Icon>
         : ((props.forceEmptyIcon ?? true) ? <FakeIcon /> : null);
 
     return (
         <ListItem ref={ref} className={props.className}>
-            <Button onClick={props.onClick}>{ic}{props.children}</Button>
+            <Button
+                ref={buttonRef}
+                onClick={props.onClick}
+                onPointerDown={ripple.onPointerDown}
+                onKeyDown={ripple.onKeyDown}
+            >
+                {ic}{props.children}
+                {ripple.ripples}
+            </Button>
         </ListItem>
     );
 });

package/src/components/ui/toolButton/ToolButton.styled.ts

@@ -1,27 +1,24 @@
 import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";
+import { rippleHostStyles } from "../../../utils/useRipple.styled";
 
 /**
  * Small buttons for toolbars
  */
-const ToolButton = styled("button", {
-    "height": dimensionsPxToRem(79),
-    "borderRadius": dimensionsPxToRem(10),
-    "fontWeight": "bold",
-    "fontSize": fontPxToRem(23),
-    "display": "flex",
-    "alignItems": "center",
-    "justifyContent": "center",
-    "paddingInline": dimensionsPxToRem(16),
-    "background": "white",
-    "boxSizing": "border-box",
-    "border": `${dimensionsPxToRem(6)} solid transparent`,
+const StyledToolButton = styled("button", rippleHostStyles, {
+    height: dimensionsPxToRem(79),
+    borderRadius: dimensionsPxToRem(10),
+    fontWeight: "bold",
+    fontSize: fontPxToRem(23),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingInline: dimensionsPxToRem(16),
+    background: "white",
+    boxSizing: "border-box",
+    border: `${dimensionsPxToRem(6)} solid transparent`,
+    color: "$toolButtonText",
 
-    "color": "$toolButtonText",
-    "&:hover": {
-        background: "#ffffffcc",
-    },
-
-    "variants": {
+    variants: {
         inline: {
             true: {
                 width: "auto",
@@ -30,19 +27,16 @@ const ToolButton = styled("button", {
         },
         variant: {
             secondary: {
-                "border": `${dimensionsPxToRem(6)} solid #ffffff42`,
-                "background": "none",
-
-                "&:hover": {
-                    background: "#ffffff22",
-                },
-                "color": "white",
+                border: `${dimensionsPxToRem(6)} solid #ffffff42`,
+                background: "none",
+                color: "white",
             },
             secondaryOnLight: {
                 "border": `${dimensionsPxToRem(6)} solid $border`,
                 "background": "none",
                 "color": "$text",
 
+                // emphasize border on hover (more than just the universal tint overlay)
                 "&:hover": {
                     borderColor: "$buttonBorder",
                 },
@@ -52,5 +46,5 @@ const ToolButton = styled("button", {
 });
 
 export {
-    ToolButton,
+    StyledToolButton,
 };

package/src/components/ui/toolButton/ToolButton.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+
+import { useRipple } from "../../../utils/useRipple";
+import { StyledToolButton } from "./ToolButton.styled";
+
+type Props = React.ComponentProps<typeof StyledToolButton>;
+
+const ToolButton = forwardRef<HTMLButtonElement, Props>((props, ref) => {
+    const { children, onPointerDown, onKeyDown, ...rest } = props;
+    const innerRef = useForwardedRef(ref);
+    const ripple = useRipple({ ref: innerRef, onPointerDown, onKeyDown });
+
+    return (
+        <StyledToolButton
+            ref={innerRef}
+            onPointerDown={ripple.onPointerDown}
+            onKeyDown={ripple.onKeyDown}
+            {...rest}
+        >
+            {children}
+            {ripple.ripples}
+        </StyledToolButton>
+    );
+});
+
+ToolButton.displayName = "ToolButton";
+ToolButton.toString = () => StyledToolButton.toString();
+
+export {
+    ToolButton,
+};

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 };

package/src/utils/useRipple.styled.ts

@@ -0,0 +1,56 @@
+import { keyframes } from "../theme";
+
+const rippleKeyframes = keyframes({
+    "0%": { transform: "scale(0)", opacity: 0.35 },
+    "100%": { transform: "scale(1)", opacity: 0 },
+});
+
+/**
+ * Use with Stitches `styled(...)` definition to make the element a ripple host.
+ * Pair with `useRipple()` which provides handlers and rendered ripple spans.
+ *
+ * Sets `position: relative` and `overflow: hidden` on the host.
+ *
+ * To disable the effect for an element or whole subtree, set the CSS variable
+ * `--miui-ripple: 0` on the element or any ancestor. The hover/active overlay
+ * opacity is multiplied by this var and the JS hook skips ripple creation when
+ * it reads `0`.
+ */
+const rippleHostStyles = {
+    "position": "relative",
+    "overflow": "hidden",
+    "WebkitTapHighlightColor": "transparent",
+    "transition": "box-shadow 150ms ease-out",
+
+    // Subtle hover/active overlay so interactive elements look clickable.
+    // Scoped to `a`/`button` so non-interactive hosts (e.g. List.Item rendered
+    // as <div>) don't get false affordances. `:active` also serves as the
+    // minimal feedback for users with `prefers-reduced-motion: reduce`,
+    // who don't see the ripple.
+    "&:where(a, button):hover:not(:disabled):not([aria-disabled='true'])": {
+        boxShadow: "inset 0 0 0 9999px color-mix(in srgb, currentColor calc(6% * var(--miui-ripple, 1)), transparent)",
+    },
+    "&:where(a, button):active:not(:disabled):not([aria-disabled='true'])": {
+        boxShadow: "inset 0 0 0 9999px color-mix(in srgb, currentColor calc(12% * var(--miui-ripple, 1)), transparent)",
+    },
+
+    "@media (prefers-reduced-motion: reduce)": {
+        transition: "none",
+    },
+
+    "& > span[data-miui-ripple]": {
+        position: "absolute",
+        pointerEvents: "none",
+        borderRadius: "50%",
+        backgroundColor: "currentColor",
+        transform: "scale(0)",
+        opacity: 0,
+        animationName: String(rippleKeyframes),
+        animationTimingFunction: "ease-out",
+        animationFillMode: "forwards",
+    },
+};
+
+export {
+    rippleHostStyles,
+};

package/src/utils/useRipple.tsx

@@ -0,0 +1,139 @@
+import React, { useCallback, useRef, useState } from "react";
+
+type Ripple = {
+    id: number;
+    x: number;
+    y: number;
+    size: number;
+    duration: number;
+};
+
+const HALF = 2;
+const RIPPLE_SPEED_PX_PER_MS = 1.5;
+const RIPPLE_MIN_DURATION_MS = 250;
+
+const prefersReducedMotion = (): boolean => {
+    if (typeof window === "undefined") {
+        return false;
+    }
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+
+const isDisabled = (el: HTMLElement): boolean => {
+    if ("disabled" in el && (el as HTMLButtonElement).disabled) {
+        return true;
+    }
+    return el.getAttribute("aria-disabled") === "true";
+};
+
+const isRippleDisabledByCssVar = (el: HTMLElement): boolean => {
+    if (typeof window === "undefined") {
+        return false;
+    }
+    return window.getComputedStyle(el).getPropertyValue("--miui-ripple").trim() === "0";
+};
+
+type UseRippleArgs<T extends HTMLElement> = {
+    ref: React.RefObject<T | null>;
+    onPointerDown?: React.PointerEventHandler<T> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<T> | undefined;
+    /**
+     * If true, the ripple always emanates from the element's center,
+     * regardless of pointer position.
+     */
+    fromCenter?: boolean | undefined;
+};
+
+type UseRippleResult<T extends HTMLElement> = {
+    onPointerDown: React.PointerEventHandler<T>;
+    onKeyDown: React.KeyboardEventHandler<T>;
+    ripples: React.ReactNode;
+};
+
+/**
+ * Adds an Android-style ripple effect to an element.
+ *
+ * Pair with `rippleHostStyles` spread into the host's styled definition.
+ *
+ * - Triggered by pointer (mouse/touch/pen) and keyboard (Enter/Space — emanates from center).
+ * - Skipped when the host is `disabled` / `aria-disabled` or when `prefers-reduced-motion: reduce`.
+ * - Ripple duration scales with size (constant px/ms) so big and small elements feel the same.
+ */
+// eslint-disable-next-line max-lines-per-function
+const useRipple = <T extends HTMLElement>(args: UseRippleArgs<T>): UseRippleResult<T> => {
+    const { ref, onPointerDown, onKeyDown, fromCenter = false } = args;
+    const [ripples, setRipples] = useState<Ripple[]>([]);
+    const idCounter = useRef(0);
+
+    const addRippleAt = useCallback((clientX: number, clientY: number) => {
+        const el = ref.current;
+        if (!el || isDisabled(el) || prefersReducedMotion() || isRippleDisabledByCssVar(el)) {
+            return;
+        }
+        const rect = el.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+        const maxX = Math.max(x, rect.width - x);
+        const maxY = Math.max(y, rect.height - y);
+        const size = Math.hypot(maxX, maxY) * HALF;
+        const duration = Math.max(RIPPLE_MIN_DURATION_MS, size / RIPPLE_SPEED_PX_PER_MS);
+        idCounter.current += 1;
+        const id = idCounter.current;
+        setRipples((arr) => [...arr, { id, x, y, size, duration }]);
+    }, [ref]);
+
+    const handlePointerDown = useCallback<React.PointerEventHandler<T>>((evt) => {
+        if (fromCenter) {
+            const el = ref.current;
+            if (el) {
+                const rect = el.getBoundingClientRect();
+                addRippleAt(rect.left + (rect.width / HALF), rect.top + (rect.height / HALF));
+            }
+        }
+        else {
+            addRippleAt(evt.clientX, evt.clientY);
+        }
+        onPointerDown?.(evt);
+    }, [addRippleAt, onPointerDown, fromCenter, ref]);
+
+    const handleKeyDown = useCallback<React.KeyboardEventHandler<T>>((evt) => {
+        if (!evt.repeat && (evt.key === "Enter" || evt.key === " ")) {
+            const el = ref.current;
+            if (el) {
+                const rect = el.getBoundingClientRect();
+                addRippleAt(rect.left + (rect.width / HALF), rect.top + (rect.height / HALF));
+            }
+        }
+        onKeyDown?.(evt);
+    }, [addRippleAt, ref, onKeyDown]);
+
+    const handleAnimationEnd = useCallback<React.AnimationEventHandler<HTMLSpanElement>>((evt) => {
+        const id = Number(evt.currentTarget.dataset.rippleId);
+        setRipples((arr) => arr.filter((r) => r.id !== id));
+    }, []);
+
+    const elements = ripples.map((r) => (
+        <span
+            key={r.id}
+            data-miui-ripple={true}
+            data-ripple-id={r.id}
+            aria-hidden={true}
+            style={{
+                left: `${String(r.x - (r.size / HALF))}px`,
+                top: `${String(r.y - (r.size / HALF))}px`,
+                width: `${String(r.size)}px`,
+                height: `${String(r.size)}px`,
+                animationDuration: `${String(r.duration)}ms`,
+            }}
+            onAnimationEnd={handleAnimationEnd}
+        />
+    ));
+
+    return {
+        onPointerDown: handlePointerDown,
+        onKeyDown: handleKeyDown,
+        ripples: elements,
+    };
+};
+
+export { useRipple };

package/src/components/ui/toolButton/ToolButton.ts

@@ -1 +0,0 @@
-export { ToolButton } from "./ToolButton.styled";