react-miui 0.33.0 → 0.35.0

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

@@ -0,0 +1,229 @@
+import React, {
+    forwardRef,
+    useCallback,
+    useEffect,
+    useId,
+    useState,
+} from "react";
+
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+
+import { useNativeValidity } from "../../../utils/useNativeValidity";
+import { Clock } from "../../icons/Clock";
+import {
+    StyledInputContainer,
+    StyledLabel,
+    StyledSuffix,
+    StyledWrapper,
+} from "../input/Input.styled";
+import {
+    StyledSuffixButton,
+    StyledTimeInput,
+} from "./TimePicker.styled";
+import { TimePickerModal } from "./TimePickerModal";
+
+const PATTERN_HHMM = "(?:[01]\\d|2[0-3]):[0-5]\\d";
+const PATTERN_HHMMSS = "(?:[01]\\d|2[0-3]):[0-5]\\d:[0-5]\\d";
+const MAX_LEN_HHMM = 5;
+const MAX_LEN_HHMMSS = 8;
+
+const assertStep = (name: string, step: number): void => {
+    if (!Number.isInteger(step) || step < 1 || step > 60) {
+        throw new Error(
+            `TimePicker: \`${name}\` must be an integer between 1 and 60, got ${String(step)}`,
+        );
+    }
+};
+
+interface CustomProps {
+    children?: never;
+    label?: string;
+    pinnedLabel?: boolean;
+    error?: boolean;
+    withSeconds?: boolean;
+    minuteStep?: number;
+    secondStep?: number;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    modalTitle?: React.ReactNode;
+    okLabel?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+}
+
+type InputAttrs = Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "value" | "defaultValue" | "onChange" | "type" | "prefix" | "pattern" | "placeholder" | "maxLength"
+>;
+
+type Props = InputAttrs & CustomProps;
+
+// eslint-disable-next-line max-lines-per-function,max-statements
+const TimePickerInner = ({
+    className,
+    label,
+    pinnedLabel = false,
+    error,
+    withSeconds = false,
+    minuteStep = 1,
+    secondStep = 1,
+    value,
+    defaultValue,
+    onChange,
+    onFocus,
+    onBlur,
+    disabled,
+    readOnly,
+    id,
+    modalTitle,
+    okLabel = "OK",
+    cancelLabel = "Cancel",
+    ...rest
+}: Props, ref: React.Ref<HTMLInputElement>) => {
+    assertStep("minuteStep", minuteStep);
+    if (withSeconds) {
+        assertStep("secondStep", secondStep);
+    }
+
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+    const currentValue = isControlled ? (value ?? "") : internalValue;
+
+    const [focused, setFocused] = useState(false);
+    const validity = useNativeValidity(error);
+    const { revalidate } = validity;
+    const inputRef = useForwardedRef(ref);
+    const generatedId = useId();
+    const inputId = id ?? (label ? generatedId : undefined);
+
+    const [modalOpen, setModalOpen] = useState(false);
+
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const next = e.target.value;
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        validity.onChange(e);
+        onChange?.(next);
+    }, [isControlled, onChange, validity]);
+
+    const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+        setFocused(true);
+        onFocus?.(e);
+    }, [onFocus]);
+
+    const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+        setFocused(false);
+        validity.onBlur(e);
+        onBlur?.(e);
+    }, [onBlur, validity]);
+
+    useEffect(() => {
+        revalidate(inputRef.current);
+    }, [currentValue, revalidate, inputRef]);
+
+    const openModal = useCallback(() => {
+        setModalOpen(true);
+    }, []);
+
+    const closeModal = useCallback(() => {
+        setModalOpen(false);
+        inputRef.current?.focus();
+    }, [inputRef]);
+
+    const confirmModal = useCallback((next: string) => {
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onChange?.(next);
+        setModalOpen(false);
+        inputRef.current?.focus();
+    }, [isControlled, onChange, inputRef]);
+
+    const hasValue = currentValue.length > 0;
+    const floating = Boolean(label) && (pinnedLabel || focused || hasValue);
+    const placeholder = withSeconds ? "--:--:--" : "--:--";
+    const pattern = withSeconds ? PATTERN_HHMMSS : PATTERN_HHMM;
+    const maxLength = withSeconds ? MAX_LEN_HHMMSS : MAX_LEN_HHMM;
+    const finalError = validity.finalError;
+
+    const labelElem = label
+        ? (
+            <StyledLabel
+                htmlFor={inputId}
+                floating={floating}
+                error={finalError}
+            >
+                {label}
+            </StyledLabel>
+        )
+        : null;
+
+    return (
+        <>
+            <StyledWrapper
+                className={className}
+                focused={focused}
+                disabled={Boolean(disabled)}
+                readOnly={Boolean(readOnly)}
+                error={finalError}
+            >
+                <StyledInputContainer>
+                    {labelElem}
+                    <StyledTimeInput
+                        ref={inputRef}
+                        {...rest}
+                        id={inputId}
+                        type={"text"}
+                        inputMode={"numeric"}
+                        autoComplete={"off"}
+                        value={currentValue}
+                        placeholder={placeholder}
+                        pattern={pattern}
+                        maxLength={maxLength}
+                        disabled={disabled}
+                        readOnly={readOnly}
+                        onChange={handleChange}
+                        onFocus={handleFocus}
+                        onBlur={handleBlur}
+                        onInvalid={validity.onInvalid}
+                        data-error={finalError}
+                    />
+                </StyledInputContainer>
+                <StyledSuffix>
+                    <StyledSuffixButton
+                        type={"button"}
+                        onClick={openModal}
+                        disabled={disabled}
+                        aria-label={"Open time picker"}
+                    >
+                        <Clock />
+                    </StyledSuffixButton>
+                </StyledSuffix>
+            </StyledWrapper>
+            <TimePickerModal
+                isOpen={modalOpen}
+                initialValue={currentValue}
+                withSeconds={withSeconds}
+                minuteStep={minuteStep}
+                secondStep={secondStep}
+                readOnly={Boolean(readOnly)}
+                title={modalTitle}
+                okLabel={okLabel}
+                cancelLabel={cancelLabel}
+                onClose={closeModal}
+                onConfirm={confirmModal}
+            />
+        </>
+    );
+};
+
+const TimePickerRef = forwardRef(TimePickerInner);
+TimePickerRef.displayName = "TimePicker";
+TimePickerRef.toString = () => StyledWrapper.toString();
+
+const TimePicker = TimePickerRef;
+
+export { TimePicker };
+
+export type { Props as TimePickerProps };

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) => {