react-miui 0.32.1 → 0.32.3

package/src/components/layout/list/List.tsx

@@ -1,14 +1,9 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { pxToRem, styled } from "../../../theme";
-
+import { fnWithProps } from "../../../types/fnWithProps";
 import { Header } from "./Header";
-import { Item } from "./Item";
-
-interface SubComponents {
-    Header: typeof Header;
-    Item: typeof Item;
-}
+import { Item, ListItemInnerContainerClassNameSelector } from "./Item";
 
 const StyledList = styled("ul", {
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
@@ -38,7 +33,7 @@ type StyledListProps = React.ComponentProps<typeof StyledList>;
  *
  * See `Item` and `Header` for more information about their usage.
  */
-const List: React.FC<StyledListProps> & SubComponents = (props) => {
+const ListBase = forwardRef<HTMLUListElement, StyledListProps>((props, ref) => {
     const chld = React.Children.map(props.children, (child) => {
         if (child && typeof child === "object" && "type" in child && (child.type === Item || child.type === Header)) {
             return React.cloneElement(child, {
@@ -49,10 +44,15 @@ const List: React.FC<StyledListProps> & SubComponents = (props) => {
     });
 
     return (
-        <StyledList {...props}>{chld}</StyledList>
+        <StyledList {...props} ref={ref}>{chld}</StyledList>
     );
-};
-List.Header = Header;
-List.Item = Item;
+});
+ListBase.displayName = "List";
+
+const List = fnWithProps(ListBase, { // it will keep displayName
+    Header,
+    Item,
+});
+List.toString = () => StyledList.toString();
 
-export { List };
+export { List, ListItemInnerContainerClassNameSelector };

package/src/components/layout/list/Value.stories.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Value } from "./Value";
-import { List } from "./List";
 import { Item } from "./Item";
+import { List } from "./List";
+import { Value } from "./Value";
 
 const meta: Meta = {
     title: "Components/Layout/List/Value",

package/src/components/layout/section/Section.stories.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { List } from "../list/List";
 import { Item } from "../list/Item";
-
+import { List } from "../list/List";
 import { Section } from "./Section";
 
 const meta: Meta = {

package/src/components/layout/section/Section.tsx

@@ -1,6 +1,5 @@
 import { pxToRem, styled } from "../../../theme";
 import { fnWithProps } from "../../../types/fnWithProps";
-
 import { SectionContainer } from "./SectionContainer";
 
 const SectionCmp = styled("div", {

package/src/components/layout/table/Table.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Table } from "./Table";
 

package/src/components/ui/action/Action.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Action } from "./Action";
 

package/src/components/ui/action/Action.tsx

@@ -1,13 +1,12 @@
-import React from "react";
-import type { ReactNode } from "react";
+import React, { forwardRef } from "react";
 
 import { omit } from "@ezez/utils";
 
-import type { ICON } from "../../icons/Icon";
+import type { ReactNode } from "react";
 import type { ThemeCSS } from "../../../theme";
+import type { ICON } from "../../icons/Icon";
 
 import { Icon } from "../../icons/Icon";
-
 import { Anchor, Badge, Button, StyledAction } from "./Action.styled";
 
 interface LinkProps { // @TODO extract? - same on list item
@@ -73,7 +72,7 @@ type Props = (NativeLinkProps | RouterLinkProps | ButtonProps) & CommonProps;
  *
  * Its label is displayed below the circular shape.
  */
-const Action: React.FC<Props> = (props) => {
+const Action = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => { // eslint-disable-line max-lines-per-function
     const { icon, label, css, ..._restProps } = props;
     const restProps = omit(
         _restProps as Record<string, unknown>, ["to", "Link", "href", "type"],
@@ -82,7 +81,7 @@ const Action: React.FC<Props> = (props) => {
 
     let iconElem: ReactNode = icon;
     if (typeof icon === "string") {
-        iconElem = <Icon name={icon as ICON} />; // eslint-disable-line @typescript-eslint/no-unsafe-type-assertion
+        iconElem = <Icon name={icon as ICON} />;
     }
 
     const labelElem = label ? <div>{label}</div> : null;
@@ -101,22 +100,47 @@ const Action: React.FC<Props> = (props) => {
 
         return (
             <props.Link href={props.to} {...restProps}>
-                <Anchor className={props.className} {...maybeCss}>{content}</Anchor>
+                <Anchor ref={ref as React.Ref<HTMLAnchorElement>} className={props.className} {...maybeCss}>
+                    {content}
+                </Anchor>
             </props.Link>
         );
     }
 
     if ("href" in props) {
-        return <Anchor href={props.href} className={props.className} {...restProps} {...maybeCss}>{content}</Anchor>;
+        return (
+            <Anchor
+                ref={ref as React.Ref<HTMLAnchorElement>}
+                href={props.href}
+                className={props.className}
+                {...restProps}
+                {...maybeCss}
+            >
+                {content}
+            </Anchor>
+        );
     }
 
     return (
-        <Button onClick={props.onClick} className={props.className} {...maybeCss} type={props.type ?? "button"}>
+
+        <Button
+            ref={ref as React.Ref<HTMLButtonElement>}
+            onClick={props.onClick}
+            className={props.className}
+            {...maybeCss}
+            type={props.type ?? "button"}
+        >
             {content}
         </Button>
     );
-};
+});
+
+Action.displayName = "Action";
+Action.toString = () => Button.toString();
+
+const ActionCircleSelector = StyledAction.toString();
+const ActionBadgeSelector = Badge.toString();
 
-export { Action };
+export { Action, ActionCircleSelector, ActionBadgeSelector };
 
 export type { Props as ActionProps };

package/src/components/ui/action/EqualActions.stories.tsx

@@ -3,9 +3,8 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { ICON } from "../../icons/Icon";
-
-import { EqualActions } from "./EqualActions";
 import { Action } from "./Action";
+import { EqualActions } from "./EqualActions";
 
 const meta: Meta<typeof EqualActions> = {
     title: "Components/UI/EqualActions",

package/src/components/ui/button/Button.stories.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback } from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
-
 import { Button } from "./Button";
 
 // TODO better docs

package/src/components/ui/directionPad/Pad.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useCallback, useState } from "react";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 

package/src/components/ui/directionPad/Pad.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 
 import { PadButton as Button, PadButtonDotSelector } from "./Button";
 import { PadMiddle as Middle } from "./Middle";
-import { StyledPad, StyledLine } from "./Pad.styled";
+import { StyledLine, StyledPad } from "./Pad.styled";
 
 type DirectionPadProps = {
     onUpPress?: () => void;

package/src/components/ui/drawer/Drawer.stories.tsx

@@ -1,11 +1,10 @@
-import React, { useState, useCallback } from "react";
+import React, { useCallback, useState } from "react";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
 import { Section } from "../../layout/section/Section";
 import { Button } from "../button/Button";
-
 import { Drawer } from "./Drawer";
 
 const meta: Meta<typeof Drawer> = {
@@ -56,7 +55,6 @@ const Default: Story = {
  */
 const NoEscClose: Story = {
     render: () => {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
         const [open, setOpen] = useState(false);
 
         const handleToggleOpen = useCallback(() => {
@@ -106,8 +104,8 @@ const WithLongContent: Story = {
                     <div style={{ padding: "20px" }}>
                         <h2>Drawer with Long Content</h2>
                         <p>This drawer has enough content to demonstrate scrolling behavior.</p>
-                        {Array(20).fill(0).map((_, i) => (
-                            <Section key={String(`${i}`)} vertical={true} horizontal={true}>
+                        {Array(20).fill(0).map((_: number, i) => (
+                            <Section key={i} vertical={true} horizontal={true}> {/* eslint-disable-line react/no-array-index-key */}
                                 <h3>Section {i + 1}</h3>
                                 <p>This is content section {i + 1} in the scrollable drawer.</p>
                             </Section>

package/src/components/ui/drawer/Drawer.tsx

@@ -3,8 +3,7 @@ import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { Timeout } from "oop-timers";
 
 import { HandleEsc } from "../../utils/HandleEsc";
-
-import { StyledDrawer, Content } from "./Drawer.styled";
+import { Content, StyledDrawer } from "./Drawer.styled";
 
 const RENDER_TIMEOUT = 500;
 
@@ -34,6 +33,7 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
     useEffect(() => {
         if (props.isOpen) {
             timeoutRef.current?.stop();
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setShouldRenderWhenClosed(true);
         }
         else {

package/src/components/ui/keyValue/KeyValue.stories.tsx

@@ -5,9 +5,8 @@ import { omit } from "@ezez/utils";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
-import { Icon, ICON } from "../../icons/Icon";
-
-import { KeyValue, KeyValueKeySelector, KeyValueValueSelector, KeyValueIconSelector } from "./KeyValue";
+import { ICON, Icon } from "../../icons/Icon";
+import { KeyValue, KeyValueIconSelector, KeyValueKeySelector, KeyValueValueSelector } from "./KeyValue";
 
 const meta: Meta<typeof KeyValue> = {
     title: "UI/KeyValue",
@@ -92,7 +91,7 @@ const items = [
  */
 const Default: Story = {
     args: {
-        items: items,
+        items,
         valueFirst: true,
         cols: 3,
     },
@@ -103,7 +102,7 @@ const Default: Story = {
  */
 const TwoColumn: Story = {
     args: {
-        items: items,
+        items,
         valueFirst: false,
         cols: 2,
     },
@@ -114,7 +113,7 @@ const TwoColumn: Story = {
  */
 const SingleColumn: Story = {
     args: {
-        items: items,
+        items,
         valueFirst: false,
         cols: 1,
     },

package/src/components/ui/keyValue/KeyValue.tsx

@@ -1,17 +1,18 @@
-import type { ReactElement } from "react";
 import React, { forwardRef } from "react";
 
+import type { ReactElement } from "react";
+
 import {
     Container,
+    Icon,
     Item,
     Key,
     KeyValuePair,
     Value,
-    Icon,
 } from "./KeyValue.styled";
 
 type KeyValueProps = {
-    items: { key?: React.ReactNode; value?: React.ReactNode; icon?: React.ReactNode; onClick?: () => void }[];
+    items: Array<{ key?: React.ReactNode; value?: React.ReactNode; icon?: React.ReactNode; onClick?: () => void }>;
     cols?: number;
     valueFirst?: boolean;
     className?: string;
@@ -43,8 +44,8 @@ const KeyValue = forwardRef<HTMLDivElement, KeyValueProps>((props, ref) => {
         const component = value.onClick ? "button" : "div";
         return React.createElement(Item, {
             // eslint-disable-next-line react/no-array-index-key
-            key: key,
-            style: style,
+            key,
+            style,
             // @ts-expect-error idk why ts can't figure it out, but it works
             as: component,
             notFirstRow: !isFirstRow,

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

@@ -139,7 +139,8 @@ ${inertCss}`;
         };
     };
 
-    useEffect(effect, [innerRef.current, spinnerBg, show, color, size, speed, mode, inertMode]);
+    // 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/loader/FullLoader.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { FullLoader } from "./FullLoader";
 

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import type { LoaderProps } from "./Loader";
 
@@ -16,8 +16,11 @@ const Container = styled("div", {
 /**
  * A loader that renders in the middle of available space
  */
-const FullLoader: React.FC<LoaderProps> = (props) => {
-    return <Container><Loader {...props} /></Container>;
-};
+const FullLoader = forwardRef<HTMLDivElement, LoaderProps>(({ className, ...props }, ref) => {
+    return <Container ref={ref} className={className}><Loader {...props} /></Container>;
+});
+
+FullLoader.displayName = "FullLoader";
+FullLoader.toString = () => Container.toString();
 
 export { FullLoader };

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { useTailSpin } from "../../../utils";
 import { Div } from "../../native";
@@ -20,6 +20,7 @@ interface Props {
      * Whether to show the spinner or not
      */
     show?: boolean | undefined | null;
+    className?: string;
 }
 
 const DEFAULT_SPEED = 400;
@@ -31,20 +32,28 @@ const DEFAULT_SIZE = "2rem";
  * Based on MIT licensed code by Sam Herbert
  * https://github.com/SamHerbert/SVG-Loaders/blob/master/svg-loaders/tail-spin.svg
  */
-const Loader: React.FC<Props> = ({
+const Loader = forwardRef<HTMLDivElement, Props>(({
     color = "currentColor", speed = DEFAULT_SPEED, size = DEFAULT_SIZE,
+    className, show,
     ...props
-}) => {
+}, ref) => {
     const spinnerBg = useTailSpin({ size, color, speed });
 
-    if (props.show === false) {
+    if (show === false) {
         return null;
     }
 
     return (
-        <Div css={{ width: size, height: size, backgroundImage: `url('${spinnerBg}')` }} />
+        <Div
+            ref={ref}
+            className={className}
+            css={{ width: size, height: size, backgroundImage: `url('${spinnerBg}')` }}
+        />
     );
-};
+});
+
+Loader.displayName = "Loader";
+Loader.toString = () => Div.toString();
 
 export { Loader };
 export type { Props as LoaderProps };

package/src/components/ui/loader/Loading.stories.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
-
 import { Loading } from "./Loading";
 
 const meta: Meta = {

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

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { PopLoader } from "./PopLoader";
 import { FullLoader } from "./FullLoader";
+import { PopLoader } from "./PopLoader";
 
 interface Props {
     data?: unknown;
@@ -26,4 +26,6 @@ const Loading: React.FC<Props> = (props) => {
     return (<>{l}{props.children}</>);
 };
 
+Loading.displayName = "Loading";
+
 export { Loading };

package/src/components/ui/loader/PopLoader.stories.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
-
 import { PopLoader } from "./PopLoader";
 
 const meta: Meta = {

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

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { forwardRef } from "react";
+
+import type { LoaderProps } from "./Loader";
 
 import { styled } from "../../../theme";
 import { Loader } from "./Loader";
 
-type Props = React.ComponentProps<typeof Loader>;
-
 const Container = styled("div", {
     position: "absolute",
     right: 20,
@@ -25,8 +25,11 @@ const BlockLoader = styled(Loader, {
  *
  * Requires a parent with `position: relative`.
  */
-const PopLoader: React.FC<Props> = ({ ...props }) => {
-    return <Container><BlockLoader size={"1rem"} {...props} /></Container>;
-};
+const PopLoader = forwardRef<HTMLDivElement, LoaderProps>(({ className, ...props }, ref) => {
+    return <Container ref={ref} className={className}><BlockLoader size={"1rem"} {...props} /></Container>;
+});
+
+PopLoader.displayName = "PopLoader";
+PopLoader.toString = () => Container.toString();
 
 export { PopLoader };

package/src/components/ui/message/Message.stories.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
-
 import { Message } from "./Message";
 
 const meta: Meta<typeof Message> = {

package/src/components/ui/message/Message.tsx

@@ -1,5 +1,4 @@
 import type React from "react";
-
 import type { ComponentProps } from "@stitches/react";
 import type { OverwriteProps } from "../../../theme";
 
@@ -30,6 +29,6 @@ interface Props extends StitchesProps {
 /**
  * A component that usually displays result of some action or a tip for the user.
  */
-const Message = StyledMessage as unknown as OverwriteProps<typeof StyledMessage, Props>; // eslint-disable-line @typescript-eslint/no-unsafe-type-assertion
+const Message = StyledMessage as unknown as OverwriteProps<typeof StyledMessage, Props>;
 
 export { Message };

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

@@ -1,16 +1,15 @@
 import React, { useCallback, useState } from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Button } from "../button/Button";
-import { Label } from "../../form/Label";
-import { Input } from "../../form/input/Input";
 import { Checkbox } from "../../form/Checkbox";
+import { Input } from "../../form/input/Input";
+import { Label } from "../../form/Label";
 import { List } from "../../layout/list/List";
-
+import { Button } from "../button/Button";
 import { Modal } from "./Modal";
-import { ModalButtons } from "./ModalButtons";
 import { RemovePadding } from "./Modal.styled";
+import { ModalButtons } from "./ModalButtons";
 
 const meta: Meta = {
     title: "Components/UI/Modal",
@@ -25,7 +24,6 @@ const handleNoop = () => undefined;
 const Primary: Story = {
     args: {},
     render: () => {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
         const [open, setIsOpen] = useState(false);
 
         const handleClose = useCallback(() => {
@@ -65,7 +63,6 @@ const Primary: Story = {
 const WithRemovedPaddingSections: Story = {
     args: {},
     render: () => {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
         const [open, setIsOpen] = useState(false);
 
         const handleClose = useCallback(() => {
@@ -105,7 +102,6 @@ const WithRemovedPaddingSections: Story = {
 const WithList: Story = {
     args: {},
     render: () => {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
         const [open, setIsOpen] = useState(false);
 
         const handleClose = useCallback(() => {

package/src/components/ui/modal/Modal.styled.ts

@@ -24,6 +24,7 @@ const OverlayStyled = styled("div", {
     justifyContent: "center",
     animation: `${overlay.toString()} 300ms`,
     animationFillMode: "forwards",
+    backdropFilter: "blur(5px)",
 
     variants: {
         position: {