react-miui 0.32.3 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.32.3",
+  "version": "0.34.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "exports": {
@@ -16,37 +16,39 @@
   "dependencies": {
     "@bedrock-layout/use-forwarded-ref": "^2.0.17",
     "@ezez/utils": "^3.0.0",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@stitches/react": "^1.2.8",
     "classnames": "^2.5.1",
-    "oop-timers": "^5.1.0",
-    "patch-package": "^8.0.1"
+    "oop-timers": "^5.2.1",
+    "sonner": "^2.0.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
-    "@babel/preset-typescript": "^7.26.0",
-    "@ezez/eslint": "^9.39.3",
-    "@ezez/hooks": "^2.2.0",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@ezez/eslint": "^9.39.4",
+    "@ezez/hooks": "^2.3.1",
     "@icon-park/react": "^1.4.2",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-onboarding": "^9.1.10",
-    "@storybook/react-vite": "^9.1.10",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/addon-onboarding": "^10.4.0",
+    "@storybook/react-vite": "^10.4.0",
     "@types/jest": "^29.5.14",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
     "babel-plugin-module-extension": "^0.1.3",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "eslint-plugin-storybook": "^10.2.8",
-    "jest": "^30.2.0",
+    "babel-plugin-module-resolver": "^5.0.3",
+    "eslint-plugin-storybook": "^10.4.0",
+    "jest": "^30.4.2",
     "must": "^0.13.4",
-    "prettier": "^3.4.2",
+    "prettier": "^3.8.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-use": "^17.5.1",
+    "react-use": "^17.6.0",
     "resolve-tspaths": "^0.8.23",
-    "storybook": "^9.1.10",
+    "storybook": "^10.4.0",
     "typedoc": "0.27.6",
-    "typescript": "^5.7.3"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.2"
   },
   "peerDependencies": {
     "react": "^18.2.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/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  esbuild: false
+  unrs-resolver: false

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