react-miui 0.34.0 → 0.36.0

package/src/components/form/input/Input.stories.tsx

@@ -103,8 +103,54 @@ const InputRef: Story = {
     },
 };
 
+const Validation: Story = {
+    render: () => {
+        const [submitted, setSubmitted] = React.useState<Record<string, string> | null>(null);
+        return (
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    const data = new FormData(e.currentTarget);
+                    const result: Record<string, string> = {};
+                    data.forEach((v, k) => {
+                        if (typeof v === "string") {
+                            result[k] = v;
+                        }
+                    });
+                    setSubmitted(result);
+                }}
+            >
+                <Gap>
+                    <div>
+                        {"Every input reads native validity (pattern / required / type)."
+                            + " Type something, blur the field or hit Submit — invalid fields turn red on their own."}
+                    </div>
+                    <Input name={"email"} label={"Email"} type={"email"} required={true} />
+                    <Input name={"required"} label={"Required text"} required={true} />
+                    <Input
+                        name={"digits"}
+                        label={"4 digits only"}
+                        pattern={"\\d{4}"}
+                        placeholder={"1234"}
+                    />
+                    <Input
+                        name={"short"}
+                        label={"Min 5 characters"}
+                        minLength={5}
+                        defaultValue={"abc"}
+                    />
+                    <Button type={"submit"}>{"Submit"}</Button>
+                    {submitted
+                        ? <div>{"Submitted: " + JSON.stringify(submitted)}</div>
+                        : null}
+                </Gap>
+            </form>
+        );
+    },
+};
+
 export {
-    Primary, Mixed, WithLabel, FloatingLabel, InputRef,
+    Primary, Mixed, WithLabel, FloatingLabel, InputRef, Validation,
 };
 
 export default meta;

package/src/components/form/input/Input.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useId, useRef, useState } from "react";
 
 import type { ObjectValue, Value } from "../../../types/form";
 
+import { useNativeValidity } from "../../../utils";
 import { Suggestions } from "../Suggestions";
 import {
     StyledInput,
@@ -53,6 +54,8 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
     const isControlled = props.value !== undefined;
     const hasValue = isControlled ? Boolean(props.value) : internalHasValue;
 
+    const validity = useNativeValidity(error);
+
     const suggestionsId = useId();
     const generatedInputId = useId();
     const inputId = id ?? (label ? generatedInputId : undefined);
@@ -65,8 +68,9 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
 
     const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
         setFocused(false);
+        validity.onBlur(e);
         onBlur?.(e);
-    }, [onBlur]);
+    }, [onBlur, validity]);
 
     const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -80,6 +84,7 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
         if (!isControlled) {
             setInternalHasValue(Boolean(e.currentTarget.value));
         }
+        validity.onChange(e);
         if (!suggestions) {
             onChange?.(e);
             return;
@@ -96,7 +101,7 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
         }
         infoRef.current.picked = false;
         onChange?.(e);
-    }, [isControlled, suggestions, onChange, onSuggestionMatch]);
+    }, [isControlled, suggestions, onChange, onSuggestionMatch, validity]);
 
     const prefixElem = prefix ? <StyledPrefix>{prefix}</StyledPrefix> : null;
     const suffixElem = suffix ? <StyledSuffix>{suffix}</StyledSuffix> : null;
@@ -115,7 +120,7 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
             <StyledLabel
                 htmlFor={inputId}
                 floating={floating}
-                error={Boolean(error)}
+                error={validity.finalError}
             >
                 {label}
             </StyledLabel>
@@ -128,7 +133,7 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
             focused={focused}
             disabled={Boolean(props.disabled)}
             readOnly={Boolean(props.readOnly)}
-            error={Boolean(error)}
+            error={validity.finalError}
         >
             {prefixElem}
             <StyledInputContainer>
@@ -143,7 +148,8 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
                     onKeyDown={handleKeyDown}
                     onFocus={handleFocus}
                     onBlur={handleBlur}
-                    data-error={Boolean(error)}
+                    onInvalid={validity.onInvalid}
+                    data-error={validity.finalError}
                 />
                 <Suggestions id={suggestionsId} suggestions={suggestions} />
             </StyledInputContainer>

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