react-miui 0.35.0 → 0.36.0

package/esm/utils/useRipple.js

@@ -0,0 +1,84 @@
+import React, { useCallback, useRef, useState } from "react";
+const HALF = 2;
+const RIPPLE_SPEED_PX_PER_MS = 1.5;
+const RIPPLE_MIN_DURATION_MS = 250;
+const prefersReducedMotion = () => {
+    if (typeof window === "undefined") {
+        return false;
+    }
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+const isDisabled = (el) => {
+    if ("disabled" in el && el.disabled) {
+        return true;
+    }
+    return el.getAttribute("aria-disabled") === "true";
+};
+const isRippleDisabledByCssVar = (el) => {
+    if (typeof window === "undefined") {
+        return false;
+    }
+    return window.getComputedStyle(el).getPropertyValue("--miui-ripple").trim() === "0";
+};
+const useRipple = (args) => {
+    const { ref, onPointerDown, onKeyDown, fromCenter = false } = args;
+    const [ripples, setRipples] = useState([]);
+    const idCounter = useRef(0);
+    const addRippleAt = useCallback((clientX, clientY) => {
+        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((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 === null || onPointerDown === void 0 ? void 0 : onPointerDown(evt);
+    }, [addRippleAt, onPointerDown, fromCenter, ref]);
+    const handleKeyDown = useCallback((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 === null || onKeyDown === void 0 ? void 0 : onKeyDown(evt);
+    }, [addRippleAt, ref, onKeyDown]);
+    const handleAnimationEnd = useCallback((evt) => {
+        const id = Number(evt.currentTarget.dataset.rippleId);
+        setRipples((arr) => arr.filter((r) => r.id !== id));
+    }, []);
+    const elements = ripples.map((r) => (React.createElement("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 };
+//# sourceMappingURL=useRipple.js.map

package/esm/utils/useRipple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRipple.js","sourceRoot":"","sources":["../../src/utils/useRipple.tsx"],"names":[],"mappings":"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"}

package/esm/utils/useRipple.styled.d.ts

@@ -0,0 +1,28 @@
+declare const rippleHostStyles: {
+    position: string;
+    overflow: string;
+    WebkitTapHighlightColor: string;
+    transition: string;
+    "&:where(a, button):hover:not(:disabled):not([aria-disabled='true'])": {
+        boxShadow: string;
+    };
+    "&:where(a, button):active:not(:disabled):not([aria-disabled='true'])": {
+        boxShadow: string;
+    };
+    "@media (prefers-reduced-motion: reduce)": {
+        transition: string;
+    };
+    "& > span[data-miui-ripple]": {
+        position: string;
+        pointerEvents: string;
+        borderRadius: string;
+        backgroundColor: string;
+        transform: string;
+        opacity: number;
+        animationName: string;
+        animationTimingFunction: string;
+        animationFillMode: string;
+    };
+};
+export { rippleHostStyles, };
+//# sourceMappingURL=useRipple.styled.d.ts.map

package/esm/utils/useRipple.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRipple.styled.d.ts","sourceRoot":"","sources":["../../src/utils/useRipple.styled.ts"],"names":[],"mappings":"AAkBA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;CAiCrB,CAAC;AAEF,OAAO,EACH,gBAAgB,GACnB,CAAC"}

package/esm/utils/useRipple.styled.js

@@ -0,0 +1,33 @@
+import { keyframes } from "../theme.js";
+const rippleKeyframes = keyframes({
+    "0%": { transform: "scale(0)", opacity: 0.35 },
+    "100%": { transform: "scale(1)", opacity: 0 },
+});
+const rippleHostStyles = {
+    "position": "relative",
+    "overflow": "hidden",
+    "WebkitTapHighlightColor": "transparent",
+    "transition": "box-shadow 150ms ease-out",
+    "&: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, };
+//# sourceMappingURL=useRipple.styled.js.map

package/esm/utils/useRipple.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRipple.styled.js","sourceRoot":"","sources":["../../src/utils/useRipple.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,eAAe,GAAG,SAAS,CAAC;IAC9B,IAAI,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE;IAC9C,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,EAAE;CAChD,CAAC,CAAC;AAaH,MAAM,gBAAgB,GAAG;IACrB,UAAU,EAAE,UAAU;IACtB,UAAU,EAAE,QAAQ;IACpB,yBAAyB,EAAE,aAAa;IACxC,YAAY,EAAE,2BAA2B;IAOzC,qEAAqE,EAAE;QACnE,SAAS,EAAE,mGAAmG;KACjH;IACD,sEAAsE,EAAE;QACpE,SAAS,EAAE,oGAAoG;KAClH;IAED,yCAAyC,EAAE;QACvC,UAAU,EAAE,MAAM;KACrB;IAED,4BAA4B,EAAE;QAC1B,QAAQ,EAAE,UAAU;QACpB,aAAa,EAAE,MAAM;QACrB,YAAY,EAAE,KAAK;QACnB,eAAe,EAAE,cAAc;QAC/B,SAAS,EAAE,UAAU;QACrB,OAAO,EAAE,CAAC;QACV,aAAa,EAAE,MAAM,CAAC,eAAe,CAAC;QACtC,uBAAuB,EAAE,UAAU;QACnC,iBAAiB,EAAE,UAAU;KAChC;CACJ,CAAC;AAEF,OAAO,EACH,gBAAgB,GACnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "exports": {

package/src/components/layout/header/HeaderIconAction.styled.ts

@@ -1,24 +1,17 @@
 import { borderPxToRem, css, pxToRem, styled } from "../../../theme";
+import { rippleHostStyles } from "../../../utils/useRipple.styled";
 import { Icon } from "../../icons/Icon";
 
-const sharedStyles = css({
-    "width": pxToRem(30),
-    "height": pxToRem(30),
-    "background": "none",
-    "borderRadius": "666px",
-    "display": "inline-flex",
-    "alignItems": "center",
-    "justifyContent": "center",
-    "border": borderPxToRem(2),
-    "color": "currentColor",
-
-    "&:hover": {
-        background: "#00000022",
-    },
-    "&:active": {
-        background: "#00000011",
-        color: "currentColor",
-    },
+const sharedStyles = css(rippleHostStyles, {
+    width: pxToRem(30),
+    height: pxToRem(30),
+    background: "none",
+    borderRadius: "666px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: borderPxToRem(2),
+    color: "currentColor",
 });
 
 const Btn = styled("button", sharedStyles);

package/src/components/layout/header/HeaderIconAction.tsx

@@ -1,8 +1,11 @@
 import React, { forwardRef } from "react";
 
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+
 import type { ReactNode } from "react";
 import type { ICON } from "../../icons/Icon";
 
+import { useRipple } from "../../../utils/useRipple";
 import { A, Btn, sharedStyles, StyledIcon } from "./HeaderIconAction.styled";
 
 interface LinkProps { // @TODO extract? - same on list item
@@ -41,8 +44,10 @@ interface Props {
  * Use this component if you need a clickable icon that stylistically fits the header.
  * It can be a simple link, a button or a custom link component.
  */
-const HeaderIconAction = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => {
+const HeaderIconAction = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => { // eslint-disable-line max-lines-per-function
     const { icon, href, to, Link, className, ...restProps } = props;
+    const innerRef = useForwardedRef<HTMLAnchorElement | HTMLButtonElement | null>(ref);
+    const ripple = useRipple({ ref: innerRef });
 
     let content: ReactNode = icon;
     if (typeof icon === "string") {
@@ -56,23 +61,45 @@ const HeaderIconAction = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props
 
         return (
             <Link href={to} {...restProps}>
-                <A ref={ref as React.Ref<HTMLAnchorElement>} className={props.className}>{content}</A>
+                <A
+                    ref={innerRef as React.Ref<HTMLAnchorElement>}
+                    className={props.className}
+                    onPointerDown={ripple.onPointerDown}
+                    onKeyDown={ripple.onKeyDown}
+                >
+                    {content}
+                    {ripple.ripples}
+                </A>
             </Link>
         );
     }
 
     if (href) {
         return (
-            <A ref={ref as React.Ref<HTMLAnchorElement>} href={href} className={props.className} {...restProps}>
+            <A
+                ref={innerRef as React.Ref<HTMLAnchorElement>}
+                href={href}
+                className={props.className}
+                onPointerDown={ripple.onPointerDown}
+                onKeyDown={ripple.onKeyDown}
+                {...restProps}
+            >
                 {content}
+                {ripple.ripples}
             </A>
         );
     }
 
     return (
-
-        <Btn ref={ref as React.Ref<HTMLButtonElement>} className={props.className} onClick={props.onClick}>
+        <Btn
+            ref={innerRef as React.Ref<HTMLButtonElement>}
+            className={props.className}
+            onClick={props.onClick}
+            onPointerDown={ripple.onPointerDown}
+            onKeyDown={ripple.onKeyDown}
+        >
             {content}
+            {ripple.ripples}
         </Btn>
     );
 });

package/src/components/layout/list/Item.styled.ts

@@ -1,7 +1,8 @@
 import { css, dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme";
+import { rippleHostStyles } from "../../../utils/useRipple.styled";
 import { Icon } from "../../icons/Icon";
 
-const StyledInnerContainer = styled("div", {
+const StyledInnerContainer = styled("div", rippleHostStyles, {
     display: "flex",
     minHeight: dimensionsPxToRem(174),
     alignItems: "center",

package/src/components/layout/list/Item.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useRef } from "react";
 
 import { fnWithProps } from "../../../types/fnWithProps";
+import { useRipple } from "../../../utils/useRipple";
 import { ICON } from "../../icons/Icon";
 import { StyledIcon, StyledInnerContainer, StyledItem, StyledNoIcon } from "./Item.styled";
 import { Label } from "./Label";
@@ -68,7 +69,10 @@ type StyledItemProps = React.ComponentProps<typeof StyledItem>;
  */
 const ItemBase = forwardRef<
     HTMLLIElement, StyledItemProps & Props
->(({ href, to, onClick, Link, ratio, ...props }, ref) => {
+>(({ href, to, onClick, Link, ratio, ...props }, ref) => { // eslint-disable-line max-lines-per-function
+    const innerRef = useRef<HTMLElement | null>(null);
+    const ripple = useRipple({ ref: innerRef });
+
     const r = ratio ? ratio.split("/") : [];
 
     const pre = typeof props.selected === "boolean"
@@ -92,6 +96,11 @@ const ItemBase = forwardRef<
             });
         }) ?? [];
 
+    const interactive = Boolean(onClick ?? href ?? to);
+    const rippleProps = interactive
+        ? { onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown }
+        : {};
+
     if (to) {
         if (!Link) {
             throw new TypeError("`to` prop given without `Link` component");
@@ -99,7 +108,16 @@ const ItemBase = forwardRef<
 
         return (
             <StyledItem {...props} ref={ref}>
-                <Link href={to}><StyledInnerContainer as={"a"} href={to}>{pre}{ren}</StyledInnerContainer></Link>
+                <Link href={to}>
+                    <StyledInnerContainer
+                        as={"a"}
+                        href={to}
+                        ref={innerRef as React.Ref<HTMLAnchorElement>}
+                        {...rippleProps}
+                    >
+                        {pre}{ren}{ripple.ripples}
+                    </StyledInnerContainer>
+                </Link>
             </StyledItem>
         );
     }
@@ -107,7 +125,15 @@ const ItemBase = forwardRef<
     if (href) {
         return (
             <StyledItem {...props} ref={ref}>
-                <StyledInnerContainer as={"a"} href={href} onClick={onClick}>{pre}{ren}</StyledInnerContainer>
+                <StyledInnerContainer
+                    as={"a"}
+                    href={href}
+                    onClick={onClick}
+                    ref={innerRef as React.Ref<HTMLAnchorElement>}
+                    {...rippleProps}
+                >
+                    {pre}{ren}{ripple.ripples}
+                </StyledInnerContainer>
             </StyledItem>
         );
     }
@@ -115,7 +141,14 @@ const ItemBase = forwardRef<
     if (onClick) {
         return (
             <StyledItem {...props} ref={ref}>
-                <StyledInnerContainer as={"button"} onClick={onClick}>{pre}{ren}</StyledInnerContainer>
+                <StyledInnerContainer
+                    as={"button"}
+                    onClick={onClick}
+                    ref={innerRef as React.Ref<HTMLButtonElement>}
+                    {...rippleProps}
+                >
+                    {pre}{ren}{ripple.ripples}
+                </StyledInnerContainer>
             </StyledItem>
         );
     }

package/src/components/ui/button/Button.styled.ts

@@ -1,9 +1,10 @@
 import { borderPxToRem, dimensionsPxToRem, fontPxToRem, pxToRem, styled } from "../../../theme";
+import { rippleHostStyles } from "../../../utils/useRipple.styled";
 
 /**
  * Call-to-action button.
  */
-const Button = styled("button", {
+const StyledButton = styled("button", rippleHostStyles, {
     "height": dimensionsPxToRem(118),
     "background": "$green1",
     "border": `${borderPxToRem(1)} solid $green1Darker`,
@@ -39,5 +40,5 @@ const Button = styled("button", {
 });
 
 export {
-    Button,
+    StyledButton,
 };

package/src/components/ui/button/Button.tsx

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

package/src/components/ui/directionPad/Button.styled.ts

@@ -1,6 +1,7 @@
 import { styled } from "../../../theme";
+import { rippleHostStyles } from "../../../utils/useRipple.styled";
 
-const StyledButton = styled("button", {
+const StyledButton = styled("button", rippleHostStyles, {
     height: "50px",
     width: "50px",
     margin: "0",

package/src/components/ui/directionPad/Button.tsx

@@ -1,5 +1,8 @@
 import React, { forwardRef } from "react";
 
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+
+import { useRipple } from "../../../utils/useRipple";
 import { StyledButton, StyledDot } from "./Button.styled";
 
 type PadButtonProps = {
@@ -7,9 +10,18 @@ type PadButtonProps = {
 };
 
 const PadButton = forwardRef<HTMLButtonElement, PadButtonProps>((props, ref) => {
+    const innerRef = useForwardedRef(ref);
+    const ripple = useRipple({ ref: innerRef, fromCenter: true });
+
     return (
-        <StyledButton {...props} ref={ref}>
+        <StyledButton
+            {...props}
+            ref={innerRef}
+            onPointerDown={ripple.onPointerDown}
+            onKeyDown={ripple.onKeyDown}
+        >
             <StyledDot />
+            {ripple.ripples}
         </StyledButton>
     );
 });

package/src/components/ui/directionPad/Middle.styled.ts

@@ -1,6 +1,7 @@
 import { styled } from "../../../theme";
+import { rippleHostStyles } from "../../../utils/useRipple.styled";
 
-const StyledMiddle = styled("button", {
+const StyledMiddle = styled("button", rippleHostStyles, {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",

package/src/components/ui/directionPad/Middle.tsx

@@ -1,5 +1,8 @@
 import React, { forwardRef } from "react";
 
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+
+import { useRipple } from "../../../utils/useRipple";
 import { StyledMiddle } from "./Middle.styled";
 
 type PadMiddleProps = {
@@ -8,9 +11,18 @@ type PadMiddleProps = {
 };
 
 const PadMiddle = forwardRef<HTMLButtonElement, PadMiddleProps>((props, ref) => {
+    const innerRef = useForwardedRef(ref);
+    const ripple = useRipple({ ref: innerRef, fromCenter: true });
+
     return (
-        <StyledMiddle onClick={props.onClick} ref={ref}>
+        <StyledMiddle
+            onClick={props.onClick}
+            ref={innerRef}
+            onPointerDown={ripple.onPointerDown}
+            onKeyDown={ripple.onKeyDown}
+        >
             {props.label}
+            {ripple.ripples}
         </StyledMiddle>
     );
 });

package/src/components/ui/modal/ModalButtons.styled.ts

@@ -1,5 +1,5 @@
 import { dimensionsPxToRem, styled } from "../../../theme";
-import { fnWithProps } from "../../../types/fnWithProps";
+import { rippleHostStyles } from "../../../utils/useRipple.styled";
 import { NEGATIVE_PADDING } from "./Modal.styled";
 
 const Container = styled("div", {
@@ -9,7 +9,7 @@ const Container = styled("div", {
     marginBottom: NEGATIVE_PADDING,
 });
 
-const Button = styled("button", {
+const StyledButton = styled("button", rippleHostStyles, {
     "border": "none",
     "borderTop": "1px solid $modalButtonBorder",
     "background": "$modalButtonBg",
@@ -41,10 +41,7 @@ const Button = styled("button", {
     },
 });
 
-const ModalButtons = fnWithProps(Container, {
-    Button,
-});
-
 export {
-    ModalButtons,
+    Container,
+    StyledButton,
 };

package/src/components/ui/modal/ModalButtons.tsx

@@ -1 +1,38 @@
-export { ModalButtons } from "./ModalButtons.styled";
+import React, { forwardRef } from "react";
+
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+
+import { fnWithProps } from "../../../types/fnWithProps";
+import { useRipple } from "../../../utils/useRipple";
+import { Container, StyledButton } from "./ModalButtons.styled";
+
+type ButtonProps = React.ComponentProps<typeof StyledButton>;
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+    const { children, onPointerDown, onKeyDown, ...rest } = props;
+    const innerRef = useForwardedRef(ref);
+    const ripple = useRipple({ ref: innerRef, onPointerDown, onKeyDown });
+
+    return (
+        <StyledButton
+            ref={innerRef}
+            onPointerDown={ripple.onPointerDown}
+            onKeyDown={ripple.onKeyDown}
+            {...rest}
+        >
+            {children}
+            {ripple.ripples}
+        </StyledButton>
+    );
+});
+
+Button.displayName = "ModalButtons.Button";
+Button.toString = () => StyledButton.toString();
+
+const ModalButtons = fnWithProps(Container, {
+    Button,
+});
+
+export {
+    ModalButtons,
+};

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