react-miui 0.32.2 → 0.33.0

package/patches/{@stitches+react+1.2.8.patch → @stitches__react@1.2.8.patch}

@@ -1,7 +1,7 @@
-diff --git a/node_modules/@stitches/react/types/css-util.d.ts b/node_modules/@stitches/react/types/css-util.d.ts
+diff --git a/types/css-util.d.ts b/types/css-util.d.ts
 index 1668fc2ab56c421894c547b2e5a988166cd90e5f..cfdad3f208ef7f57c89de7fb94cdaecbd7378c63 100644
---- a/node_modules/@stitches/react/types/css-util.d.ts
-+++ b/node_modules/@stitches/react/types/css-util.d.ts
+--- a/types/css-util.d.ts
++++ b/types/css-util.d.ts
 @@ -117,3 +117,11 @@ export type $$ScaleValue = typeof $$ScaleValue
  export declare const $$ThemeValue: unique symbol
 
@@ -15,10 +15,10 @@ index 1668fc2ab56c421894c547b2e5a988166cd90e5f..cfdad3f208ef7f57c89de7fb94cdaecb
 +	readonly [K in $$ScaleValue]: T;
 +}
 
-diff --git a/node_modules/@stitches/react/types/index.d.ts b/node_modules/@stitches/react/types/index.d.ts
+diff --git a/types/index.d.ts b/types/index.d.ts
 index 8dbcc9cad3f6c556a3f370065dd95300a02dd973..dafadd22e8b6285aadee2630936a7918c9c5b02b 100644
---- a/node_modules/@stitches/react/types/index.d.ts
-+++ b/node_modules/@stitches/react/types/index.d.ts
+--- a/types/index.d.ts
++++ b/types/index.d.ts
 @@ -35,7 +35,7 @@ export type ComponentProps<Component> = Component extends ((...args: any[]) => a
  /** Returns a type that expects a value to be a kind of CSS property value. */
  export type PropertyValue<Property extends keyof CSSUtil.CSSProperties, Config = null> = (

package/src/components/form/input/Input.css.ts

@@ -40,6 +40,7 @@ const wrapper = {
     padding: `0 ${dimensionsPxToRem(36)}`,
     border: `${borderPxToRem(1)} solid $border`,
     alignItems: "center",
+    position: "relative",
 
     variants: {
         disabled: {
@@ -64,9 +65,60 @@ const wrapper = {
     },
 } satisfies ThemeCSS;
 
+const inputContainer = {
+    position: "relative",
+    display: "flex",
+    flex: 1,
+    alignSelf: "stretch",
+    alignItems: "center",
+    backgroundColor: "inherit",
+} satisfies ThemeCSS;
+
+const label = {
+    position: "absolute",
+    left: 0,
+    color: "$sub",
+    pointerEvents: "none",
+    backgroundColor: "inherit",
+    padding: `0 ${dimensionsPxToRem(12)}`,
+    marginLeft: `-${dimensionsPxToRem(12)}`,
+    maxWidth: "100%",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    transition: "top 150ms ease, font-size 150ms ease, color 150ms ease",
+    top: "50%",
+    transform: "translateY(-50%)",
+    fontSize: fontPxToRem(25),
+    lineHeight: 1,
+
+    variants: {
+        floating: {
+            true: {
+                top: 0,
+                fontSize: fontPxToRem(17),
+                color: "$text",
+            },
+        },
+        error: {
+            true: {},
+        },
+    },
+
+    compoundVariants: [
+        {
+            floating: true,
+            error: true,
+            css: { color: "$red1" },
+        },
+    ],
+} satisfies ThemeCSS;
+
 export {
     input,
     wrapper,
+    inputContainer,
+    label,
     focusCSS,
     errorCSS,
 };

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

@@ -44,6 +44,7 @@ const Mixed: Story = {
             <Input prefix={"Text prefix"} value={"Polly W. Wilson"} />
             <Input prefix={"Disabled"} value={"Clayton J. Foster"} disabled={true} />
             <Input prefix={"Read only"} value={"Norma J. Gomez"} readOnly={true} />
+            <Input prefix={"Error state"} placeholder={"Placeholder"} value={""} error={true} />
             <Input
                 placeholder={"With suggestions, try country name"}
                 suggestions={countries}
@@ -53,6 +54,36 @@ const Mixed: Story = {
     ),
 };
 
+const WithLabel: Story = {
+    args: {
+        label: "Capacity",
+        placeholder: "Enter value in kWh",
+        prefix: <Icon name={ICON.battery} />,
+        suffix: "kWh",
+    },
+};
+
+const FloatingLabel: Story = {
+    render: () => (
+        <Gap>
+            <Input label={"Pinned label (default)"} placeholder={"Placeholder visible"} />
+            <Input label={"Floating label"} pinnedLabel={false} placeholder={"Visible on focus"} />
+            <Input label={"Only label, no placeholder"} pinnedLabel={false} />
+            <Input label={"With prefix"} pinnedLabel={false} prefix={<Icon name={ICON.battery} />} />
+            <Input
+                label={"With prefix and suffix"}
+                pinnedLabel={false}
+                prefix={<Icon name={ICON.battery} />}
+                suffix={"kWh"}
+            />
+            <Input label={"Prefilled"} pinnedLabel={false} defaultValue={"Some value"} />
+            <Input label={"Error state"} pinnedLabel={false} error={true} />
+            <Input label={"Disabled"} pinnedLabel={false} disabled={true} />
+            <Input label={"Read only"} pinnedLabel={false} readOnly={true} defaultValue={"Read-only value"} />
+        </Gap>
+    ),
+};
+
 const InputRef: Story = {
     render: () => {
         const ref = React.useRef<HTMLInputElement>(null);
@@ -73,7 +104,7 @@ const InputRef: Story = {
 };
 
 export {
-    Primary, Mixed, InputRef,
+    Primary, Mixed, WithLabel, FloatingLabel, InputRef,
 };
 
 export default meta;

package/src/components/form/input/Input.styled.ts

@@ -1,10 +1,14 @@
 import { dimensionsPxToRem, styled } from "../../../theme";
-import { input, wrapper } from "./Input.css";
+import { input, inputContainer, label, wrapper } from "./Input.css";
 
 const StyledInput = styled("input", input);
 
 const StyledWrapper = styled("div", wrapper);
 
+const StyledInputContainer = styled("div", inputContainer);
+
+const StyledLabel = styled("label", label);
+
 const StyledPrefix = styled("div", {
     marginRight: dimensionsPxToRem(36),
     display: "flex",
@@ -20,6 +24,8 @@ const StyledSuffix = styled("div", {
 export {
     StyledInput,
     StyledWrapper,
+    StyledInputContainer,
+    StyledLabel,
     StyledPrefix,
     StyledSuffix,
 };

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

@@ -3,13 +3,27 @@ import React, { useCallback, useId, useRef, useState } from "react";
 import type { ObjectValue, Value } from "../../../types/form";
 
 import { Suggestions } from "../Suggestions";
-import { StyledInput, StyledPrefix, StyledSuffix, StyledWrapper } from "./Input.styled";
+import {
+    StyledInput,
+    StyledInputContainer,
+    StyledLabel,
+    StyledPrefix,
+    StyledSuffix,
+    StyledWrapper,
+} from "./Input.styled";
 
 interface CustomProps<T extends string> {
     children?: never;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     error?: boolean;
+    label?: string;
+    /**
+     * When `true` (default), the label stays anchored to the top of the input.
+     * When `false`, the label sits inside the input like a placeholder and floats up
+     * on focus or when the input has a value.
+     */
+    pinnedLabel?: boolean;
     suggestions?: Array<Value<T>>;
     onSuggestionMatch?: (value: Exclude<Value<T>, ObjectValue>, __chromiumPickedFromList: boolean) => void;
 }
@@ -26,10 +40,22 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
     suggestions,
     onSuggestionMatch,
     error,
+    label,
+    pinnedLabel = true,
+    placeholder,
+    id,
     ...props
 }: Props<T>, ref: React.Ref<HTMLInputElement>) => {
     const [focused, setFocused] = useState(false);
+    const [internalHasValue, setInternalHasValue] = useState(() => {
+        return Boolean(props.value ?? props.defaultValue);
+    });
+    const isControlled = props.value !== undefined;
+    const hasValue = isControlled ? Boolean(props.value) : internalHasValue;
+
     const suggestionsId = useId();
+    const generatedInputId = useId();
+    const inputId = id ?? (label ? generatedInputId : undefined);
     const infoRef = useRef<{ picked?: boolean }>({});
 
     const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
@@ -51,6 +77,9 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
     }, [onKeyDown]);
 
     const handleChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
+        if (!isControlled) {
+            setInternalHasValue(Boolean(e.currentTarget.value));
+        }
         if (!suggestions) {
             onChange?.(e);
             return;
@@ -67,7 +96,7 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
         }
         infoRef.current.picked = false;
         onChange?.(e);
-    }, [suggestions, onChange, onSuggestionMatch]);
+    }, [isControlled, suggestions, onChange, onSuggestionMatch]);
 
     const prefixElem = prefix ? <StyledPrefix>{prefix}</StyledPrefix> : null;
     const suffixElem = suffix ? <StyledSuffix>{suffix}</StyledSuffix> : null;
@@ -77,6 +106,22 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
         extraProps.list = suggestionsId;
     }
 
+    const floating = Boolean(label) && (pinnedLabel || focused || hasValue);
+    const showPlaceholder = !label || floating;
+    const effectivePlaceholder = showPlaceholder ? placeholder : undefined;
+
+    const labelElem = label
+        ? (
+            <StyledLabel
+                htmlFor={inputId}
+                floating={floating}
+                error={Boolean(error)}
+            >
+                {label}
+            </StyledLabel>
+        )
+        : null;
+
     return (
         <StyledWrapper
             className={className}
@@ -86,17 +131,22 @@ const InputInner = <T extends string>({ // eslint-disable-line max-lines-per-fun
             error={Boolean(error)}
         >
             {prefixElem}
-            <StyledInput
-                ref={ref}
-                {...props}
-                {...extraProps}
-                onChange={handleChange}
-                onKeyDown={handleKeyDown}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
-                data-error={Boolean(error)}
-            />
-            <Suggestions id={suggestionsId} suggestions={suggestions} />
+            <StyledInputContainer>
+                {labelElem}
+                <StyledInput
+                    ref={ref}
+                    {...props}
+                    {...extraProps}
+                    id={inputId}
+                    placeholder={effectivePlaceholder}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    data-error={Boolean(error)}
+                />
+                <Suggestions id={suggestionsId} suggestions={suggestions} />
+            </StyledInputContainer>
             {suffixElem}
         </StyledWrapper>
     );
@@ -110,12 +160,16 @@ const Input = InputRef as <T extends string>(
     props: Props<T> & React.RefAttributes<HTMLInputElement>,
 ) => React.ReactElement;
 
+const InputContainerSelector = StyledInputContainer.toString();
+const InputLabelSelector = StyledLabel.toString();
 const InputInputSelector = StyledInput.toString();
 const InputPrefixSelector = StyledPrefix.toString();
 const InputSuffixSelector = StyledSuffix.toString();
 
 export {
     Input,
+    InputContainerSelector,
+    InputLabelSelector,
     InputInputSelector,
     InputPrefixSelector,
     InputSuffixSelector,

package/src/components/form/textarea/TextArea.stories.tsx

@@ -1,5 +1,8 @@
+import React from "react";
+
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
+import { Gap } from "../../utils/Gap";
 import { TextArea } from "./TextArea";
 
 const meta: Meta = {
@@ -21,8 +24,29 @@ const Primary: Story = {
     },
 };
 
+const WithLabel: Story = {
+    args: {
+        label: "Description",
+        placeholder: "Type something here",
+    },
+};
+
+const FloatingLabel: Story = {
+    render: () => (
+        <Gap>
+            <TextArea label={"Pinned label (default)"} placeholder={"Placeholder visible"} />
+            <TextArea label={"Floating label"} pinnedLabel={false} placeholder={"Visible on focus"} />
+            <TextArea label={"Only label, no placeholder"} pinnedLabel={false} />
+            <TextArea label={"Prefilled"} pinnedLabel={false} defaultValue={"Some value"} />
+            <TextArea label={"Error state"} pinnedLabel={false} error={true} />
+            <TextArea label={"Disabled"} pinnedLabel={false} disabled={true} />
+            <TextArea label={"Read only"} pinnedLabel={false} readOnly={true} defaultValue={"Read-only value"} />
+        </Gap>
+    ),
+};
+
 export {
-    Primary,
+    Primary, WithLabel, FloatingLabel,
 };
 
 export default meta;

package/src/components/form/textarea/TextArea.styled.ts

@@ -1,18 +1,32 @@
 import { miuiScrollbars } from "../../../scrollbars.css";
-import { dimensionsPxToRem, styled } from "../../../theme";
-import { input, wrapper } from "../input/Input.css";
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";
+import { input, label as inputLabel, wrapper } from "../input/Input.css";
+
+const StyledTextAreaWrapper = styled("div", {
+    ...wrapper,
+    display: "block",
+    padding: 0,
+});
 
 const StyledTextArea = styled("textarea", {
     ...miuiScrollbars,
     ...input,
-    ...wrapper,
 
+    backgroundColor: "transparent",
     padding: `1.2em ${dimensionsPxToRem(36)}`,
     height: "unset",
     resize: "vertical",
     minHeight: dimensionsPxToRem(103),
 });
 
+const StyledLabel = styled("label", inputLabel, {
+    top: `calc(${fontPxToRem(25)} * 1.7)`,
+    left: dimensionsPxToRem(36),
+    transform: "translateY(-50%)",
+});
+
 export {
+    StyledTextAreaWrapper,
     StyledTextArea,
+    StyledLabel,
 };

package/src/components/form/textarea/TextArea.tsx

@@ -1,20 +1,42 @@
-import React, { forwardRef, useCallback, useState } from "react";
+import React, { forwardRef, useCallback, useId, useState } from "react";
 
-import { StyledTextArea } from "./TextArea.styled";
+import { StyledLabel, StyledTextArea, StyledTextAreaWrapper } from "./TextArea.styled";
 
 interface Props {
     children?: never;
     error?: boolean;
+    label?: string;
+    /**
+     * When `true` (default), the label stays anchored to the top of the textarea.
+     * When `false`, the label sits inside the textarea like a placeholder and floats up
+     * on focus or when the textarea has a value.
+     */
+    pinnedLabel?: boolean;
 }
 
 type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & Props;
 
+// eslint-disable-next-line max-lines-per-function
 const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({
     children,
-    onFocus, onBlur,
+    className,
+    onFocus, onBlur, onChange,
+    error,
+    label,
+    pinnedLabel = true,
+    placeholder,
+    id,
     ...props
 }, ref) => {
     const [focused, setFocused] = useState(false);
+    const [internalHasValue, setInternalHasValue] = useState(() => {
+        return Boolean(props.value ?? props.defaultValue);
+    });
+    const isControlled = props.value !== undefined;
+    const hasValue = isControlled ? Boolean(props.value) : internalHasValue;
+
+    const generatedInputId = useId();
+    const inputId = id ?? (label ? generatedInputId : undefined);
 
     const handleFocus = useCallback((e: React.FocusEvent<HTMLTextAreaElement>) => {
         setFocused(true);
@@ -26,21 +48,63 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({
         onBlur?.(e);
     }, [onBlur]);
 
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        if (!isControlled) {
+            setInternalHasValue(Boolean(e.currentTarget.value));
+        }
+        onChange?.(e);
+    }, [isControlled, onChange]);
+
+    const floating = Boolean(label) && (pinnedLabel || focused || hasValue);
+    const showPlaceholder = !label || floating;
+    const effectivePlaceholder = showPlaceholder ? placeholder : undefined;
+
+    const labelElem = label
+        ? (
+            <StyledLabel
+                htmlFor={inputId}
+                floating={floating}
+                error={Boolean(error)}
+            >
+                {label}
+            </StyledLabel>
+        )
+        : null;
+
     return (
-        <StyledTextArea
-            {...props}
-            ref={ref}
+        <StyledTextAreaWrapper
+            className={className}
+            focused={focused}
             disabled={Boolean(props.disabled)}
             readOnly={Boolean(props.readOnly)}
-            focused={focused}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-        />
+            error={Boolean(error)}
+        >
+            {labelElem}
+            <StyledTextArea
+                {...props}
+                ref={ref}
+                id={inputId}
+                placeholder={effectivePlaceholder}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                onChange={handleChange}
+                data-error={Boolean(error)}
+            />
+        </StyledTextAreaWrapper>
     );
 });
 
 TextArea.displayName = "TextArea";
-TextArea.toString = () => StyledTextArea.toString();
+TextArea.toString = () => StyledTextAreaWrapper.toString();
+
+const TextAreaWrapperSelector = StyledTextAreaWrapper.toString();
+const TextAreaTextAreaSelector = StyledTextArea.toString();
+const TextAreaLabelSelector = StyledLabel.toString();
 
-export { TextArea };
+export {
+    TextArea,
+    TextAreaWrapperSelector,
+    TextAreaTextAreaSelector,
+    TextAreaLabelSelector,
+};
 export type { TextAreaProps };

package/src/components/ui/loader/CoveringLoader.tsx

@@ -40,8 +40,6 @@ const CoveringLoader = forwardRef<HTMLElement, Props>(({ // eslint-disable-line
     const id = "miui-" + useId().replace(/:/gu, "-");
     const stylesheet = useRef<HTMLStyleElement>();
 
-    const currentRef = innerRef.current;
-
     useEffect(() => {
         const styleEl = document.createElement("style");
         document.head.appendChild(styleEl);
@@ -54,7 +52,7 @@ const CoveringLoader = forwardRef<HTMLElement, Props>(({ // eslint-disable-line
 
     // eslint-disable-next-line max-lines-per-function,max-statements
     const effect = () => {
-        const current = currentRef as HTMLElement | null;
+        const current = innerRef.current as HTMLElement | null;
         if (current !== null && !(current instanceof HTMLElement)) {
             throw new Error(
                 "CoveringLoader child ref is not an HTMLElement, got: (" + typeof current + ") " + String(current),
@@ -141,7 +139,8 @@ ${inertCss}`;
         };
     };
 
-    useEffect(effect, [currentRef, spinnerBg, show, color, size, speed, mode, inertMode, id]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- innerRef.current must be read inside effect, not at render time
+    useEffect(effect, [innerRef.current, spinnerBg, show, color, size, speed, mode, inertMode, id]);
 
     return cloneElement(Children.only(children), {
         ref: innerRef,

package/src/components/ui/modal/Modal.tsx

@@ -137,7 +137,6 @@ const ModalBase = forwardRef<HTMLDivElement, Props>(({
                     css.marginBottom = NEGATIVE_PADDING;
                 }
 
-                // @ts-expect-error TODO handle types correctly
                 return React.cloneElement(child, { css });
             }
             return child;

package/src/components/ui/modal/ModalButtons.stories.tsx

@@ -16,16 +16,16 @@ type Story = StoryObj<typeof ModalButtons>;
 const Primary: Story = {
     args: {},
     render: () => (
-        <Modal onClose={() => null} isOpen={true} title={"System message"}>
+        <Modal onClose={() => {}} isOpen={true} title={"System message"}>
             <div>
                 Check out these pretty buttons. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
                 consectetur, diam eget aliquam tincidunt, diam nisl ultrices velit, nec aliquet nunc diam eget.
             </div>
             <ModalButtons>
-                <ModalButtons.Button onClick={() => null}>
+                <ModalButtons.Button onClick={() => {}}>
                     Cancel
                 </ModalButtons.Button>
-                <ModalButtons.Button variant={"main"} onClick={() => null}>
+                <ModalButtons.Button variant={"main"} onClick={() => {}}>
                     Ok
                 </ModalButtons.Button>
             </ModalButtons>