react-miui 0.34.0 → 0.36.0

package/src/components/form/timepicker/TimePickerModal.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import { Modal } from "../../ui/modal/Modal";
+import { ModalButtons } from "../../ui/modal/ModalButtons";
+import {
+    StyledWheelHighlight,
+    StyledWheelsContainer,
+    StyledWheelSeparator,
+} from "./TimePicker.styled";
+import { padTwo, parseTimeText } from "./utils";
+import { Wheel } from "./Wheel";
+
+interface Props {
+    isOpen: boolean;
+    /** Current input value, parsed to seed the wheels when the modal opens. */
+    initialValue: string;
+    withSeconds: boolean;
+    minuteStep: number;
+    secondStep: number;
+    readOnly: boolean;
+    title?: React.ReactNode;
+    okLabel: React.ReactNode;
+    cancelLabel: React.ReactNode;
+    onClose: () => void;
+    onConfirm: (value: string) => void;
+}
+
+const snapToStep = (v: number, step: number, max: number): number => {
+    const snapped = Math.round(v / step) * step;
+    return Math.min(snapped, max - (max % step === 0 ? step : max % step));
+};
+
+const TimePickerModal = ({
+    isOpen,
+    initialValue,
+    withSeconds,
+    minuteStep,
+    secondStep,
+    readOnly,
+    title,
+    okLabel,
+    cancelLabel,
+    onClose,
+    onConfirm,
+}: Props) => {
+    const [draftHours, setDraftHours] = useState(0);
+    const [draftMinutes, setDraftMinutes] = useState(0);
+    const [draftSeconds, setDraftSeconds] = useState(0);
+
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const digits = parseTimeText(initialValue, withSeconds);
+        const hh = digits.length >= 2 ? parseInt(digits.slice(0, 2), 10) : 0;
+        const mmRaw = digits.length >= 4 ? parseInt(digits.slice(2, 4), 10) : 0;
+        const ssRaw = digits.length >= 6 ? parseInt(digits.slice(4, 6), 10) : 0;
+        setDraftHours(hh);
+        setDraftMinutes(snapToStep(mmRaw, minuteStep, 60));
+        setDraftSeconds(snapToStep(ssRaw, secondStep, 60));
+    }, [isOpen, initialValue, withSeconds, minuteStep, secondStep]);
+
+    const handleConfirm = useCallback(() => {
+        const next = padTwo(draftHours) + ":" + padTwo(draftMinutes)
+            + (withSeconds ? ":" + padTwo(draftSeconds) : "");
+        onConfirm(next);
+    }, [draftHours, draftMinutes, draftSeconds, withSeconds, onConfirm]);
+
+    const handleWheelsKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Enter" && !readOnly) {
+            e.preventDefault();
+            handleConfirm();
+        }
+    }, [readOnly, handleConfirm]);
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            title={title}
+        >
+            <StyledWheelsContainer onKeyDown={handleWheelsKeyDown}>
+                <Wheel
+                    count={24}
+                    step={1}
+                    value={draftHours}
+                    onChange={setDraftHours}
+                    ariaLabel={"Hours"}
+                    autoFocus={true}
+                />
+                <StyledWheelSeparator>{":"}</StyledWheelSeparator>
+                <Wheel
+                    count={60}
+                    step={minuteStep}
+                    value={draftMinutes}
+                    onChange={setDraftMinutes}
+                    ariaLabel={"Minutes"}
+                />
+                {withSeconds
+                    ? (
+                        <>
+                            <StyledWheelSeparator>{":"}</StyledWheelSeparator>
+                            <Wheel
+                                count={60}
+                                step={secondStep}
+                                value={draftSeconds}
+                                onChange={setDraftSeconds}
+                                ariaLabel={"Seconds"}
+                            />
+                        </>
+                    )
+                    : null}
+                <StyledWheelHighlight aria-hidden={true} />
+            </StyledWheelsContainer>
+            <ModalButtons>
+                <ModalButtons.Button onClick={onClose}>
+                    {cancelLabel}
+                </ModalButtons.Button>
+                {readOnly
+                    ? null
+                    : (
+                        <ModalButtons.Button variant={"main"} onClick={handleConfirm}>
+                            {okLabel}
+                        </ModalButtons.Button>
+                    )}
+            </ModalButtons>
+        </Modal>
+    );
+};
+
+export { TimePickerModal };

package/src/components/form/timepicker/Wheel.tsx

@@ -0,0 +1,201 @@
+import React, { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+
+import {
+    StyledWheelFocusRing,
+    StyledWheelItem,
+    StyledWheelPadder,
+    StyledWheelViewport,
+    StyledWheelWrapper,
+} from "./TimePicker.styled";
+import { padTwo } from "./utils";
+
+interface Props {
+    count: number;
+    step: number;
+    value: number;
+    onChange: (v: number) => void;
+    ariaLabel: string;
+    autoFocus?: boolean;
+}
+
+const PAGE_JUMP = 3;
+
+const Wheel = ({ count, step, value, onChange, ariaLabel, autoFocus = false }: Props) => {
+    const viewportRef = useRef<HTMLDivElement>(null);
+    const itemRef = useRef<HTMLDivElement>(null);
+    const itemHeightRef = useRef<number>(0);
+    const scrollRafRef = useRef<number | null>(null);
+    const valueRef = useRef(value);
+    valueRef.current = value;
+
+    const items = Math.ceil(count / step);
+    const lastValue = (items - 1) * step;
+
+    const valueToIndex = useCallback((v: number) => {
+        const idx = Math.round(v / step);
+        if (idx < 0) {
+            return 0;
+        }
+        if (idx >= items) {
+            return items - 1;
+        }
+        return idx;
+    }, [items, step]);
+
+    const scrollToValue = useCallback((v: number, behavior: ScrollBehavior) => {
+        const vp = viewportRef.current;
+        const h = itemHeightRef.current;
+        if (!vp || h === 0) {
+            return;
+        }
+        const idx = valueToIndex(v);
+        vp.scrollTo({ top: idx * h, behavior });
+    }, [valueToIndex]);
+
+    useLayoutEffect(() => {
+        const item = itemRef.current;
+        if (!item) {
+            return;
+        }
+        itemHeightRef.current = item.getBoundingClientRect().height;
+        scrollToValue(valueRef.current, "auto");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        const item = itemRef.current;
+        if (!item || typeof ResizeObserver === "undefined") {
+            return;
+        }
+        const ro = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            const h = entry.contentRect.height;
+            if (h > 0 && h !== itemHeightRef.current) {
+                itemHeightRef.current = h;
+                scrollToValue(valueRef.current, "auto");
+            }
+        });
+        ro.observe(item);
+        return () => {
+            ro.disconnect();
+        };
+    }, [scrollToValue]);
+
+    useEffect(() => {
+        const vp = viewportRef.current;
+        const h = itemHeightRef.current;
+        if (!vp || h === 0) {
+            return;
+        }
+        const currentIdx = Math.round(vp.scrollTop / h);
+        const desiredIdx = valueToIndex(value);
+        if (currentIdx !== desiredIdx) {
+            scrollToValue(value, "smooth");
+        }
+    }, [value, valueToIndex, scrollToValue]);
+
+    const handleScroll = useCallback(() => {
+        const vp = viewportRef.current;
+        if (!vp) {
+            return;
+        }
+        if (scrollRafRef.current != null) {
+            cancelAnimationFrame(scrollRafRef.current);
+        }
+        scrollRafRef.current = requestAnimationFrame(() => {
+            scrollRafRef.current = null;
+            const vpInner = viewportRef.current;
+            const h = itemHeightRef.current;
+            if (!vpInner || h === 0) {
+                return;
+            }
+            const rawIdx = Math.round(vpInner.scrollTop / h);
+            const clamped = Math.max(0, Math.min(items - 1, rawIdx));
+            const newValue = clamped * step;
+            if (newValue !== valueRef.current) {
+                onChange(newValue);
+            }
+        });
+    }, [items, step, onChange]);
+
+    const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+        let next: number;
+        switch (e.key) {
+            case "ArrowDown":
+                next = valueRef.current + step;
+                break;
+            case "ArrowUp":
+                next = valueRef.current - step;
+                break;
+            case "PageDown":
+                next = valueRef.current + (step * PAGE_JUMP);
+                break;
+            case "PageUp":
+                next = valueRef.current - (step * PAGE_JUMP);
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = lastValue;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        const clamped = Math.max(0, Math.min(lastValue, next));
+        if (clamped !== valueRef.current) {
+            onChange(clamped);
+        }
+    }, [step, lastValue, onChange]);
+
+    useEffect(() => () => {
+        if (scrollRafRef.current != null) {
+            cancelAnimationFrame(scrollRafRef.current);
+        }
+    }, []);
+
+    useEffect(() => {
+        if (autoFocus) {
+            viewportRef.current?.focus({ preventScroll: true });
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const itemElems: React.ReactElement[] = [];
+    for (let i = 0; i < items; i++) {
+        const v = i * step;
+        itemElems.push(
+            <StyledWheelItem key={i} ref={i === 0 ? itemRef : undefined}>
+                {padTwo(v)}
+            </StyledWheelItem>,
+        );
+    }
+
+    return (
+        <StyledWheelWrapper>
+            <StyledWheelViewport
+                ref={viewportRef}
+                onScroll={handleScroll}
+                onKeyDown={handleKeyDown}
+                role={"spinbutton"}
+                aria-label={ariaLabel}
+                aria-valuemin={0}
+                aria-valuemax={lastValue}
+                aria-valuenow={value}
+                aria-valuetext={padTwo(value)}
+                tabIndex={0}
+            >
+                <StyledWheelPadder />
+                {itemElems}
+                <StyledWheelPadder />
+            </StyledWheelViewport>
+            <StyledWheelFocusRing aria-hidden={true} />
+        </StyledWheelWrapper>
+    );
+};
+
+export { Wheel };

package/src/components/form/timepicker/utils.ts

@@ -0,0 +1,66 @@
+/** Pads a number to a 2-digit string with a leading zero (e.g. `7` → `"07"`). */
+const padTwo = (n: number): string => n.toString().padStart(2, "0");
+
+/** Clamps each completed pair in the digit buffer to a valid range: HH≤23, MM≤59, SS≤59. */
+const clampDigits = (digits: string, withSeconds: boolean): string => {
+    if (digits.length < 2) {
+        return digits;
+    }
+    let hh = parseInt(digits.slice(0, 2), 10);
+    if (hh > 23) {
+        hh = 23;
+    }
+    let out = padTwo(hh);
+    if (digits.length < 4) {
+        return out + digits.slice(2);
+    }
+    let mm = parseInt(digits.slice(2, 4), 10);
+    if (mm > 59) {
+        mm = 59;
+    }
+    out += padTwo(mm);
+    if (!withSeconds || digits.length < 6) {
+        return out + digits.slice(4);
+    }
+    let ss = parseInt(digits.slice(4, 6), 10);
+    if (ss > 59) {
+        ss = 59;
+    }
+    out += padTwo(ss);
+    return out;
+};
+
+/**
+ * Parses a free-form time string into a clamped 2/4/6-digit buffer.
+ * Colon-aware: each colon-separated segment is padded to 2 digits, so `"3:40"` → `"0340"`.
+ * Used by the modal to extract HH/MM/SS from whatever the user typed.
+ */
+const parseTimeText = (text: string, withSeconds: boolean): string => {
+    if (!text) {
+        return "";
+    }
+    const max = withSeconds ? 6 : 4;
+    const segments = text.split(":");
+    let raw: string;
+    if (segments.length === 1) {
+        raw = (segments[0] ?? "").replace(/\D/gu, "");
+        if (raw.length === 1) {
+            raw = "0" + raw;
+        }
+    }
+    else {
+        raw = segments.map((s) => {
+            const d = s.replace(/\D/gu, "");
+            if (d.length === 0) {
+                return "";
+            }
+            if (d.length === 1) {
+                return "0" + d;
+            }
+            return d.slice(0, 2);
+        }).join("");
+    }
+    return clampDigits(raw.slice(0, max), withSeconds);
+};
+
+export { padTwo, parseTimeText };

package/src/components/icons/Clock.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Clock = forwardRef<SVGSVGElement, Props>((props, ref) => {
+    return (
+        <svg
+            ref={ref}
+            width={"16"}
+            height={"16"}
+            viewBox={"0 0 16 16"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <circle
+                cx={"8"}
+                cy={"8"}
+                r={"6.5"}
+                fill={"none"}
+                stroke={"currentColor"}
+                strokeWidth={"1.5"}
+            />
+            <path
+                fill={"none"}
+                stroke={"currentColor"}
+                strokeWidth={"1.5"}
+                strokeLinecap={"round"}
+                d={"M8 4.5V8l2.5 1.75"}
+            />
+        </svg>
+    );
+});
+
+Clock.displayName = "Clock";
+
+export { Clock };

package/src/components/icons/Icon.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef } from "react";
 import { Back } from "./Back";
 import { Battery } from "./Battery";
 import { Checkmark } from "./Checkmark";
+import { Clock } from "./Clock";
 import { Config } from "./Config";
 import { Dots } from "./Dots";
 import { Forward } from "./Forward";
@@ -20,6 +21,7 @@ enum ICON {
     trash = "trash",
     config = "config",
     dots = "dots",
+    clock = "clock",
 }
 
 interface Props {
@@ -39,6 +41,7 @@ const iconsMap = new Map<ICON, IconComponent>([
     [ICON.trash, Trash],
     [ICON.config, Config],
     [ICON.dots, Dots],
+    [ICON.clock, Clock],
 ]);
 
 const Icon = forwardRef<SVGSVGElement, Props>(({ name: iconName, ...props }, ref) => {

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