react-miui 0.33.0 → 0.35.0

package/src/bugfixes/ToastsFromModal.stories.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback, useState } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Button } from "../components/ui/button/Button";
+import { Modal } from "../components/ui/modal/Modal";
+import { ModalButtons } from "../components/ui/modal/ModalButtons";
+import { toast } from "../components/ui/toaster/Toaster";
+
+const docs = [
+    "Real-world setup: the storybook preview wraps every story in a stacking context",
+    "(`transform: translateZ(0)` above `ToasterProvider`), which mirrors what real apps",
+    "tend to do unintentionally.",
+    "",
+    "**Without the fix:** sonner's huge z-index is trapped inside that stacking context.",
+    "The modal portals to `document.body` and renders on top — the toast is hidden.",
+    "",
+    "**With the fix:** `ToasterProvider` portals `<SonnerToaster>` to `document.body`,",
+    "escaping the stacking context. The toast renders above the modal.",
+].join("\n");
+
+const meta: Meta = {
+    title: "Bugfixes/Toasts from a Modal",
+    tags: ["bugfixes"],
+    parameters: { docs: { description: { component: docs } } },
+};
+
+type Story = StoryObj;
+
+const ToastFromModal: Story = {
+    render: () => {
+        const [open, setOpen] = useState(false);
+
+        const handleOpen = useCallback(() => { setOpen(true); }, []);
+        const handleClose = useCallback(() => { setOpen(false); }, []);
+        const handleToast = useCallback(() => {
+            toast.success("I should appear above the modal");
+        }, []);
+
+        return (
+            <div>
+                <Button onClick={handleOpen}>Open modal</Button>
+                <Modal onClose={handleClose} isOpen={open} title={"Repro"} position={"bottom"} full={true}>
+                    <p>Click the button — the toast must appear above this modal.</p>
+                    <ModalButtons>
+                        <ModalButtons.Button onClick={handleClose}>Cancel</ModalButtons.Button>
+                        <ModalButtons.Button variant={"main"} onClick={handleToast}>
+                            Show toast
+                        </ModalButtons.Button>
+                    </ModalButtons>
+                </Modal>
+            </div>
+        );
+    },
+};
+
+export { ToastFromModal };
+
+export default meta;

package/src/components/form/index.ts

@@ -1 +1,2 @@
 export * from "./input/Input";
+export * from "./timepicker/TimePicker";

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