react-miui 0.34.0 → 0.35.0

package/src/components/form/timepicker/TimePicker.css.ts

@@ -0,0 +1,132 @@
+import type { ThemeCSS } from "../../../theme";
+
+import { borderPxToRem, dimensionsPxToRem, fontPxToRem } from "../../../theme";
+
+const ITEM_HEIGHT_PX = 200;
+const VISIBLE_ITEMS = 5;
+
+const wheelViewport = {
+    "position": "relative",
+    "height": dimensionsPxToRem(ITEM_HEIGHT_PX * VISIBLE_ITEMS),
+    "width": dimensionsPxToRem(360),
+    "overflowY": "scroll",
+    "scrollSnapType": "y mandatory",
+    "scrollbarWidth": "none",
+    "WebkitMaskImage":
+        "linear-gradient(to bottom, transparent 0%, transparent 10%, black 45%,"
+        + " black 55%, transparent 90%, transparent 100%)",
+    "maskImage":
+        "linear-gradient(to bottom, transparent 0%, transparent 10%, black 45%,"
+        + " black 55%, transparent 90%, transparent 100%)",
+    "overscrollBehavior": "contain",
+
+    "&::-webkit-scrollbar": {
+        display: "none",
+    },
+    "&:focus": {
+        outline: "none",
+    },
+} satisfies ThemeCSS;
+
+const wheelWrapper = {
+    position: "relative",
+    display: "flex",
+} satisfies ThemeCSS;
+
+const wheelFocusRing = {
+    position: "absolute",
+    top: "50%",
+    left: 0,
+    right: 0,
+    height: dimensionsPxToRem(ITEM_HEIGHT_PX),
+    transform: "translateY(-50%)",
+    pointerEvents: "none",
+    border: `${borderPxToRem(2)} solid transparent`,
+    borderRadius: dimensionsPxToRem(16),
+    boxSizing: "border-box",
+    transition: "border-color 0.15s",
+} satisfies ThemeCSS;
+
+const wheelPadder = {
+    height: dimensionsPxToRem(ITEM_HEIGHT_PX * 2),
+} satisfies ThemeCSS;
+
+const wheelItem = {
+    height: dimensionsPxToRem(ITEM_HEIGHT_PX),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    scrollSnapAlign: "center",
+    scrollSnapStop: "always",
+    fontSize: fontPxToRem(80),
+    fontVariantNumeric: "tabular-nums",
+    color: "$text",
+    userSelect: "none",
+    fontWeight: 500,
+} satisfies ThemeCSS;
+
+const wheelHighlight = {
+    position: "absolute",
+    top: "50%",
+    left: 0,
+    right: 0,
+    height: dimensionsPxToRem(ITEM_HEIGHT_PX),
+    transform: "translateY(-50%)",
+    pointerEvents: "none",
+    borderTop: "1px solid $border",
+    borderBottom: "1px solid $border",
+} satisfies ThemeCSS;
+
+const wheelsContainer = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: dimensionsPxToRem(36),
+    position: "relative",
+} satisfies ThemeCSS;
+
+const wheelSeparator = {
+    fontSize: fontPxToRem(80),
+    color: "$text",
+    fontWeight: 500,
+    userSelect: "none",
+    pointerEvents: "none",
+} satisfies ThemeCSS;
+
+const suffixButton = {
+    "display": "flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "background": "none",
+    "border": "none",
+    "padding": dimensionsPxToRem(24),
+    "margin": `0 -${dimensionsPxToRem(24)}`,
+    "cursor": "pointer",
+    "color": "$text",
+
+    "&:disabled": {
+        cursor: "not-allowed",
+        opacity: 0.5,
+    },
+} satisfies ThemeCSS;
+
+const timeInput = {
+    fontVariantNumeric: "tabular-nums",
+    letterSpacing: "0.05em",
+    caretColor: "$mainColor",
+} satisfies ThemeCSS;
+
+export {
+    ITEM_HEIGHT_PX,
+    VISIBLE_ITEMS,
+    wheelViewport,
+    wheelWrapper,
+    wheelFocusRing,
+    wheelPadder,
+    wheelItem,
+    wheelHighlight,
+    wheelsContainer,
+    wheelSeparator,
+    suffixButton,
+    timeInput,
+};

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

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Gap } from "../../utils/Gap";
+import { TimePicker } from "./TimePicker";
+
+const meta: Meta<typeof TimePicker> = {
+    title: "Components/Form/TimePicker",
+    component: TimePicker,
+    tags: ["autodocs", "form"],
+    argTypes: {
+        error: { type: "boolean" },
+        disabled: { type: "boolean" },
+        readOnly: { type: "boolean" },
+        withSeconds: { type: "boolean" },
+        minuteStep: { type: "number" },
+        secondStep: { type: "number" },
+    },
+};
+
+type Story = StoryObj<typeof TimePicker>;
+
+const Primary: Story = {
+    args: {
+        label: "Time",
+    },
+};
+
+const Controlled: Story = {
+    render: () => {
+        const [value, setValue] = useState("14:30");
+        return (
+            <Gap>
+                <TimePicker label={"Time"} value={value} onChange={setValue} />
+                <div>{"Value: " + (value || "(empty)")}</div>
+            </Gap>
+        );
+    },
+};
+
+const Uncontrolled: Story = {
+    args: {
+        label: "Time",
+        defaultValue: "08:00",
+    },
+};
+
+const WithSeconds: Story = {
+    args: {
+        label: "Time with seconds",
+        withSeconds: true,
+        defaultValue: "12:34:56",
+    },
+};
+
+const MinuteStep5: Story = {
+    args: {
+        label: "Time (5 min step)",
+        minuteStep: 5,
+    },
+};
+
+const Validation: Story = {
+    render: () => {
+        const [submitted, setSubmitted] = useState<string | null>(null);
+        return (
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    const data = new FormData(e.currentTarget);
+                    const v = data.get("time");
+                    setSubmitted(typeof v === "string" ? v : "");
+                }}
+            >
+                <Gap>
+                    <div>
+                        {"Type something invalid (e.g. \"9:5\" or \"abc\") and blur — TimePicker"
+                            + " reads native validity and auto-applies its error variant."}
+                    </div>
+                    <TimePicker name={"time"} label={"Time"} required={true} />
+                    <button type={"submit"}>{"Submit"}</button>
+                    {submitted !== null
+                        ? <div>{"Submitted: " + (submitted || "(empty)")}</div>
+                        : null}
+                </Gap>
+            </form>
+        );
+    },
+};
+
+const Mixed: Story = {
+    render: () => (
+        <Gap>
+            <TimePicker label={"Default"} />
+            <TimePicker label={"With value"} defaultValue={"09:15"} />
+            <TimePicker label={"With seconds"} withSeconds={true} defaultValue={"23:59:30"} />
+            <TimePicker label={"Every 15 min"} minuteStep={15} />
+            <TimePicker label={"Disabled"} defaultValue={"10:00"} disabled={true} />
+            <TimePicker label={"Read only"} defaultValue={"10:00"} readOnly={true} />
+            <TimePicker label={"Error"} defaultValue={"10:00"} error={true} />
+        </Gap>
+    ),
+};
+
+export default meta;
+export { Primary, Controlled, Uncontrolled, WithSeconds, MinuteStep5, Validation, Mixed };

package/src/components/form/timepicker/TimePicker.styled.ts

@@ -0,0 +1,52 @@
+import { styled } from "../../../theme";
+import { StyledInput } from "../input/Input.styled";
+import {
+    suffixButton,
+    timeInput,
+    wheelFocusRing,
+    wheelHighlight,
+    wheelItem,
+    wheelPadder,
+    wheelsContainer,
+    wheelSeparator,
+    wheelViewport,
+    wheelWrapper,
+} from "./TimePicker.css";
+
+const StyledTimeInput = styled(StyledInput, timeInput);
+
+const StyledSuffixButton = styled("button", suffixButton);
+
+const StyledWheelsContainer = styled("div", wheelsContainer);
+
+const StyledWheelViewport = styled("div", wheelViewport);
+
+const StyledWheelWrapper = styled("div", wheelWrapper);
+
+const StyledWheelPadder = styled("div", wheelPadder);
+
+const StyledWheelItem = styled("div", wheelItem);
+
+const StyledWheelHighlight = styled("div", wheelHighlight);
+
+const StyledWheelSeparator = styled("div", wheelSeparator);
+
+const StyledWheelFocusRing = styled("div", {
+    ...wheelFocusRing,
+    [StyledWheelViewport.toString() + ":focus-visible + &"]: {
+        borderColor: "$focusColor",
+    },
+});
+
+export {
+    StyledTimeInput,
+    StyledSuffixButton,
+    StyledWheelsContainer,
+    StyledWheelViewport,
+    StyledWheelWrapper,
+    StyledWheelPadder,
+    StyledWheelItem,
+    StyledWheelHighlight,
+    StyledWheelSeparator,
+    StyledWheelFocusRing,
+};

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