react-miui 0.34.0 → 0.35.0

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/ui/modal/Modal.stories.tsx

@@ -8,7 +8,6 @@ import { Label } from "../../form/Label";
 import { List } from "../../layout/list/List";
 import { Button } from "../button/Button";
 import { Modal } from "./Modal";
-import { RemovePadding } from "./Modal.styled";
 import { ModalButtons } from "./ModalButtons";
 
 const meta: Meta = {
@@ -77,19 +76,19 @@ const WithRemovedPaddingSections: Story = {
             <div>
                 <Button onClick={handleOpen}>Open modal</Button>
                 <Modal onClose={handleClose} isOpen={open} position={"bottom"} full={true}>
-                    <RemovePadding>
+                    <Modal.RemovePadding>
                         <Label>
                             <Input placeholder={"New station"} />
                         </Label>
-                    </RemovePadding>
+                    </Modal.RemovePadding>
                     <Label>
                         <Input placeholder={"New station"} />
                     </Label>
-                    <RemovePadding>
+                    <Modal.RemovePadding>
                         <Label>
                             <Input placeholder={"New station"} />
                         </Label>
-                    </RemovePadding>
+                    </Modal.RemovePadding>
                 </Modal>
             </div>
         );
@@ -116,14 +115,50 @@ const WithList: Story = {
             <div>
                 <Button onClick={handleOpen}>Open modal</Button>
                 <Modal onClose={handleClose} isOpen={open} position={"bottom"} full={true}>
-                    <RemovePadding>
+                    <Modal.RemovePadding>
                         <List inset={true}>
                             <List.Item selected={false} onClick={handleClose}>First item</List.Item>
                             <List.Item selected={true} onClick={handleClose}>Second item</List.Item>
                             <List.Item selected={false} onClick={handleClose}>Third item</List.Item>
                             <List.Item selected={false} onClick={handleClose}>Last option</List.Item>
                         </List>
-                    </RemovePadding>
+                    </Modal.RemovePadding>
+                </Modal>
+            </div>
+        );
+    },
+};
+
+/**
+ * Demonstrates a known issue: when the modal content is taller than the viewport,
+ * it gets clipped at the top and bottom because `ContainerStyled` has
+ * `maxHeight: 100%` but no `overflow: auto`. There is no scrolling inside the modal.
+ */
+const WithLongContent: Story = {
+    args: {},
+    render: () => {
+        const [open, setIsOpen] = useState(false);
+
+        const handleClose = useCallback(() => {
+            setIsOpen(false);
+        }, []);
+
+        const handleOpen = useCallback(() => {
+            setIsOpen(true);
+        }, []);
+
+        const lines = Array.from({ length: 60 }, (_, i) => i + 1);
+
+        return (
+            <div>
+                <Button onClick={handleOpen}>Open modal</Button>
+                <Modal onClose={handleClose} isOpen={open} title={"Long content"}>
+                    {lines.map((n) => (
+                        <p key={n}>
+                            Line {n} — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </p>
+                    ))}
                 </Modal>
             </div>
         );
@@ -134,6 +169,7 @@ export {
     Primary,
     WithRemovedPaddingSections,
     WithList,
+    WithLongContent,
 };
 
 export default meta;

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

@@ -13,20 +13,25 @@ const overlay = keyframes({
 });
 
 const OverlayStyled = styled("div", {
-    position: "fixed",
-    zIndex: 4,
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    animation: `${overlay.toString()} 300ms`,
-    animationFillMode: "forwards",
-    backdropFilter: "blur(5px)",
+    "position": "fixed",
+    "zIndex": 4,
+    "top": 0,
+    "bottom": 0,
+    "left": 0,
+    "right": 0,
+    "display": "flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "animation": `${overlay.toString()} 300ms`,
+    "animationFillMode": "forwards",
+    "backdropFilter": "blur(5px)",
 
-    variants: {
+    "@media (prefers-reduced-motion: reduce)": {
+        animation: "none",
+        background: "rgba($background, 0.3)",
+    },
+
+    "variants": {
         position: {
             bottom: {
                 alignItems: "flex-end",
@@ -57,18 +62,33 @@ const RemovePadding = styled("div", {
 });
 
 const ContainerStyled = styled("div", {
-    background: "$modalBg",
-    borderRadius: dimensionsPxToRem(12),
-    maxWidth: pxToRem(333),
-    maxHeight: "100%",
-    width: "calc(100% - 30px)",
-    padding: PADDING,
-    position: "relative",
-    boxSizing: "border-box",
-    animation: `${container.toString()} 300ms`,
-    animationFillMode: "forwards",
+    "background": "$modalBg",
+    "borderRadius": dimensionsPxToRem(12),
+    "maxWidth": pxToRem(333),
+    "maxHeight": "100%",
+    "width": "calc(100% - 30px)",
+    "padding": PADDING,
+    "position": "relative",
+    "boxSizing": "border-box",
+    "overflowY": "auto",
+    "overscrollBehavior": "contain",
+    "animation": `${container.toString()} 300ms`,
+    "animationFillMode": "forwards",
+
+    // The dialog uses tabindex=-1 to be programmatically focusable for initial focus
+    // fallback (when there is no focusable child). Hide the outline since it's only
+    // there as a focus target, not a user-visible affordance.
+    "&:focus": {
+        outline: "none",
+    },
+
+    "@media (prefers-reduced-motion: reduce)": {
+        animation: "none",
+        opacity: 1,
+        transform: "none",
+    },
 
-    variants: {
+    "variants": {
         // TODO this is very not rwd, it should be a media query
         full: {
             true: {
@@ -84,11 +104,12 @@ const ContainerStyled = styled("div", {
     },
 });
 
-const TitleStyled = styled("div", { // TODO header by default? expose this as `titleAs`?
+const TitleStyled = styled("h2", {
     fontSize: fontPxToRem(40),
     textAlign: "center",
     color: "$text3",
     margin: `${dimensionsPxToRem(90)} 0`,
+    fontWeight: "inherit",
 });
 
 export {