react-miui 0.32.1 → 0.32.3

package/src/components/icons/Dots.tsx

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 interface Props {
     className?: string;
 }
 
-const Dots: React.FC<Props> = (props) => {
+const Dots = forwardRef<SVGSVGElement, Props>((props, ref) => {
     return (
         <svg
+            ref={ref}
             width={"16"}
             height={"16"}
             viewBox={"0 0 16 72"}
@@ -16,6 +17,8 @@ const Dots: React.FC<Props> = (props) => {
             <path fill={"currentColor"} d={"M13.65 13.65Q16 11.3 16 8q0-3.3-2.35-5.65Q11.3 0 8 0 4.7 0 2.35 2.35 0 4.7 0 8q0 3.3 2.35 5.65Q4.7 16 8 16q3.3 0 5.65-2.35M8 44q3.3 0 5.65-2.35Q16 39.3 16 36q0-3.3-2.35-5.65Q11.3 28 8 28q-3.3 0-5.65 2.35Q0 32.7 0 36q0 3.3 2.35 5.65Q4.7 44 8 44M8 72q3.3 0 5.65-2.35Q16 67.3 16 64q0-3.3-2.35-5.65Q11.3 56 8 56q-3.3 0-5.65 2.35Q0 60.7 0 64q0 3.3 2.35 5.65Q4.7 72 8 72"} />
         </svg>
     );
-};
+});
+
+Dots.displayName = "Dots";
 
 export { Dots };

package/src/components/icons/Forward.tsx

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 interface Props {
     className?: string;
 }
 
-const Forward: React.FC<Props> = (props) => {
+const Forward = forwardRef<SVGSVGElement, Props>((props, ref) => {
     return (
         <svg
+            ref={ref}
             width={"16"}
             height={"16"}
             viewBox={"0 0 9 16"}
@@ -16,6 +17,8 @@ const Forward: React.FC<Props> = (props) => {
             <path fill={"currentColor"} d={"M.95.15Q.8 0 .55 0t-.4.15Q0 .3 0 .55t.15.4L7.35 8l-7.2 7.05Q0 15.2 0 15.4q0 .25.2.4.15.2.4.2.2 0 .35-.15L9 8 1 .2Q1 .15.95.15"} />
         </svg>
     );
-};
+});
+
+Forward.displayName = "Forward";
 
 export { Forward };

package/src/components/icons/Heart.tsx

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 interface Props {
     className?: string;
 }
 
-const Heart: React.FC<Props> = (props) => {
+const Heart = forwardRef<SVGSVGElement, Props>((props, ref) => {
     return (
         <svg
+            ref={ref}
             width={"16"}
             height={"16"}
             viewBox={"0 0 55 46"}
@@ -16,6 +17,8 @@ const Heart: React.FC<Props> = (props) => {
             <path fill={"currentColor"} d={"M54 8.5q-1.1-2.35-2.15-3.35Q50.9 4.2 49.4 3 47.75 1.65 44.9.75h-.05q-2.7-.85-5.55-.7-.05 0-.1.05-2.9.35-5.3 1.7-.8.35-1.9 1.15l.05-.05q-1.15.7-2.1 1.55-.75.55-1.55 1-.45.2-.9.15-.15-.05-.25-.05-.35-.05-.75-.35-.1-.05-.15-.1-.7-.4-1.35-.95l-.05-.05q-.85-.75-1.75-1.25-2.15-1.6-4.65-2.25Q15.9-.1 13.2.05q-.05 0-.15.05Q9.9.6 7 2.4h-.05q-2.7 1.75-4.5 4.45v.05Q.7 9.6.15 12.85q-.05.05-.05.1-.4 3.3 1.1 6.75v.1q1.25 2.45 3.2 4.6 1.6 2.05 3.55 4l3.8 3.8q0 .05.05.05 1.9 1.8 3.7 3.65v.05q3.9 3.75 6.05 5.8l.05.05q2.25 2.25 3.1 2.75l-.05-.05 1 .75q.85.75 2.05.75.3 0 .55-.1 1-.4 2-1.3.75-.75 2.1-1.85h.05q1.35-1.25 3-2.75h.05q1.6-1.55 3.35-3.2 1.75-1.65 3.7-3.7v.05l4.1-4 .05-.05q2.15-2.2 4-4.55v-.05q1.9-2.55 3.1-5.1h-.05q1.3-2.7 1.3-5.65 0-3-1-5.25m-4.25-1.25q.75.8 1.5 2.5t.75 4q0 2.25-1 4.35v.05q-1.05 2.25-2.7 4.55h-.05Q46.5 24.9 44.5 27l-4.1 4q-1.95 1.9-3.65 3.6-1.75 1.6-3.35 3.2-.05 0-.05.05-1.6 1.45-2.9 2.6-1.45 1.2-2.25 1.95-.35.3-.7.55-.5-.45-1.25-.95-.7-.45-2.6-2.35-2.15-2.1-6.05-5.9-1.8-1.8-3.75-3.7v.05l-3.8-3.8h.05q-1.85-1.9-3.4-3.85-.05-.1-.1-.1-1.65-1.8-2.7-3.9-1.1-2.6-.8-5.1.4-2.65 1.85-4.8 1.5-2.2 3.65-3.65 2.3-1.4 4.8-1.85 2.2-.15 4.35.45h.05q2 .55 3.7 1.8l.1.1q.7.45 1.45 1.05.85.65 1.65 1.15 1.25.95 2.4.95 1.4.25 2.75-.5l-.05.05q1.05-.6 2.1-1.35 0-.05.05-.05.75-.7 1.7-1.25 0-.05.05-.05.85-.6 1.45-.85.05-.05.15-.1 1.95-1.1 4.3-1.4h-.1q2.25-.15 4.45.55 2.3.75 3.6 1.75 1.35 1.05 2.2 1.9"} />
         </svg>
     );
-};
+});
+
+Heart.displayName = "Heart";
 
 export { Heart };

package/src/components/icons/Icon.stories.tsx

@@ -3,8 +3,7 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { List } from "../layout/list/List";
-
-import { Icon, ICON } from "./Icon";
+import { ICON, Icon } from "./Icon";
 
 const meta: Meta<typeof Icon> = {
     title: "Icons/Icon",

package/src/components/icons/Icon.tsx

@@ -1,16 +1,14 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
-import type { AnyComponent } from "../../types";
-
-import { Checkmark } from "./Checkmark";
 import { Back } from "./Back";
-import { Forward } from "./Forward";
-import { Search } from "./Search";
 import { Battery } from "./Battery";
-import { Heart } from "./Heart";
-import { Trash } from "./Trash";
+import { Checkmark } from "./Checkmark";
 import { Config } from "./Config";
 import { Dots } from "./Dots";
+import { Forward } from "./Forward";
+import { Heart } from "./Heart";
+import { Search } from "./Search";
+import { Trash } from "./Trash";
 
 enum ICON {
     checkmark = "checkmark",
@@ -29,7 +27,9 @@ interface Props {
     className?: string;
 }
 
-const iconsMap = new Map<ICON, AnyComponent<{ className?: string }>>([
+type IconComponent = React.ForwardRefExoticComponent<{ className?: string } & React.RefAttributes<SVGSVGElement>>;
+
+const iconsMap = new Map<ICON, IconComponent>([
     [ICON.checkmark, Checkmark],
     [ICON.back, Back],
     [ICON.forward, Forward],
@@ -41,13 +41,17 @@ const iconsMap = new Map<ICON, AnyComponent<{ className?: string }>>([
     [ICON.dots, Dots],
 ]);
 
-const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {
+const Icon = forwardRef<SVGSVGElement, Props>(({ name: iconName, ...props }, ref) => {
     const C = iconsMap.get(iconName);
     if (!C) {
         throw new TypeError("Unknown icon: " + iconName);
     }
-    return <C {...props} />;
-};
+    // this is not a new component creation!
+    // eslint-disable-next-line react-hooks/static-components
+    return <C ref={ref} {...props} />;
+});
+
+Icon.displayName = "Icon";
 
 export { Icon, ICON };
 

package/src/components/icons/Search.tsx

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 interface Props {
     className?: string;
 }
 
-const Search: React.FC<Props> = (props) => {
+const Search = forwardRef<SVGSVGElement, Props>((props, ref) => {
     return (
         <svg
+            ref={ref}
             width={"16"}
             height={"16"}
             viewBox={"0 0 16 16"}
@@ -24,6 +25,8 @@ const Search: React.FC<Props> = (props) => {
         </svg>
 
     );
-};
+});
+
+Search.displayName = "Search";
 
 export { Search };

package/src/components/icons/Trash.tsx

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 interface Props {
     className?: string;
 }
 
-const Trash: React.FC<Props> = (props) => {
+const Trash = forwardRef<SVGSVGElement, Props>((props, ref) => {
     return (
         <svg
+            ref={ref}
             width={"16"}
             height={"16"}
             viewBox={"0 0 41 37"}
@@ -16,6 +17,8 @@ const Trash: React.FC<Props> = (props) => {
             <path fill={"currentColor"} d={"M35.7 9.25h3.95q1.4-.4 1.35-1.6-.1-1.2-1.35-1.45H25.6V1.25Q25.6 0 24.4 0h-8.7q-1.1-.05-1.2 1.25V6.2H1.35Q-.1 6.6 0 7.75.1 9 1.35 9.25H5.4v26.5q.15 1.2 1.25 1.25H34.5q1.1-.1 1.2-1.25V9.25M22.6 6.2h-5.05V3.1h5.05v3.1M8.45 33.9V9.25H32.7V33.9H8.45"} />
         </svg>
     );
-};
+});
+
+Trash.displayName = "Trash";
 
 export { Trash };

package/src/components/layout/card/Card.stories.tsx

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

package/src/components/layout/header/Header.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 { ICON } from "../../icons/Icon";
-
 import { Header } from "./Header";
 import { HeaderIconAction } from "./HeaderIconAction";
 

package/src/components/layout/header/Header.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef } from "react";
+
 import type { ReactNode } from "react";
 
 import { Action } from "../../ui/action/Action";
 import { EqualActions } from "../../ui/action/EqualActions";
-
 import { After, Before, Contents, StyledHeader } from "./Header.styled";
 
 interface Props {

package/src/components/layout/header/HeaderIconAction.stories.tsx

@@ -1,7 +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 { Header } from "./Header";
 import { HeaderIconAction } from "./HeaderIconAction";
 
@@ -18,7 +19,7 @@ const meta: Meta = {
     },
 };
 
-type Story = StoryObj<typeof Header>;
+type Story = StoryObj<typeof HeaderIconAction>;
 
 const Primary: Story = {};
 
@@ -39,9 +40,55 @@ const MultipleIcons: Story = {
     },
 };
 
+const HeaderWithCustomIcon = styled(Header, {
+    [`& ${HeaderIconAction.toString()}`]: {
+        color: "red",
+    },
+});
+
+const DeepSelector: Story = {
+    render: ({ onClick: _onClick, ...args }) => {
+        const after = (
+            <>
+                <div>some text</div>
+                <HeaderIconAction
+                    to={"/"}
+                    Link={({ children }) => (
+                        <a
+                            href={"/"}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                alert("custom link clicked");
+                            }}
+                        >{children}
+                        </a>
+                    )}
+                    {...args}
+                    icon={<>i</>}
+                />
+                <HeaderIconAction
+                    href={"/"}
+                    {...args}
+                    icon={<>i</>}
+                />
+                <HeaderIconAction
+                    {...args}
+                    icon={<>i</>}
+                />
+            </>
+        );
+        return (
+            <HeaderWithCustomIcon after={after}>
+                On the left you can see the icon
+            </HeaderWithCustomIcon>
+        );
+    },
+};
+
 export {
     Primary,
     MultipleIcons,
+    DeepSelector,
 };
 
 export default meta;

package/src/components/layout/header/HeaderIconAction.styled.ts

@@ -1,9 +1,7 @@
-import type { ThemeCSS } from "../../../theme";
-
-import { borderPxToRem, pxToRem, styled } from "../../../theme";
+import { borderPxToRem, css, pxToRem, styled } from "../../../theme";
 import { Icon } from "../../icons/Icon";
 
-const sharedStyles: ThemeCSS = {
+const sharedStyles = css({
     "width": pxToRem(30),
     "height": pxToRem(30),
     "background": "none",
@@ -21,7 +19,7 @@ const sharedStyles: ThemeCSS = {
         background: "#00000011",
         color: "currentColor",
     },
-};
+});
 
 const Btn = styled("button", sharedStyles);
 const A = styled("a", sharedStyles);
@@ -37,4 +35,5 @@ export {
     Btn,
     A,
     StyledIcon,
+    sharedStyles,
 };

package/src/components/layout/header/HeaderIconAction.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import type { ReactNode } from "react";
+import React, { forwardRef } from "react";
 
+import type { ReactNode } from "react";
 import type { ICON } from "../../icons/Icon";
 
-import { A, Btn, StyledIcon } from "./HeaderIconAction.styled";
+import { A, Btn, sharedStyles, StyledIcon } from "./HeaderIconAction.styled";
 
 interface LinkProps { // @TODO extract? - same on list item
     href: string;
@@ -41,12 +41,11 @@ interface Props {
  * Use this component if you need a clickable icon that stylistically fits the header.
  * It can be a simple link, a button or a custom link component.
  */
-const HeaderIconAction: React.FC<Props> = (props) => {
+const HeaderIconAction = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => {
     const { icon, href, to, Link, className, ...restProps } = props;
 
     let content: ReactNode = icon;
     if (typeof icon === "string") {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
         content = <StyledIcon name={icon as ICON} />;
     }
 
@@ -55,18 +54,32 @@ const HeaderIconAction: React.FC<Props> = (props) => {
             throw new TypeError("`to` prop given without `Link` component");
         }
 
-        return <Link href={to} {...restProps}><A className={props.className}>{content}</A></Link>;
+        return (
+            <Link href={to} {...restProps}>
+                <A ref={ref as React.Ref<HTMLAnchorElement>} className={props.className}>{content}</A>
+            </Link>
+        );
     }
 
     if (href) {
-        return <A href={href} className={props.className} {...restProps}>{content}</A>;
+        return (
+            <A ref={ref as React.Ref<HTMLAnchorElement>} href={href} className={props.className} {...restProps}>
+                {content}
+            </A>
+        );
     }
 
     return (
-        <Btn className={props.className} onClick={props.onClick}>
+
+        <Btn ref={ref as React.Ref<HTMLButtonElement>} className={props.className} onClick={props.onClick}>
             {content}
         </Btn>
     );
-};
+});
+
+HeaderIconAction.displayName = "HeaderIconAction";
+HeaderIconAction.toString = () => sharedStyles.selector;
+
+const HeaderIconActionIconSelector = StyledIcon.toString();
 
-export { HeaderIconAction };
+export { HeaderIconAction, HeaderIconActionIconSelector };

package/src/components/layout/header/StickyHeader.stories.tsx

@@ -2,10 +2,10 @@ import React, { useEffect } from "react";
 
 import { useForceUpdate } from "@ezez/hooks";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { StickyHeader } from "./StickyHeader";
 import { Header } from "./Header";
+import { StickyHeader } from "./StickyHeader";
 
 const meta: Meta = {
     title: "Components/Layout/Header/StickyHeader",
@@ -59,7 +59,7 @@ const RefsDemo: Story = {
 
         useEffect(() => {
             handleForceUpdate();
-        }, []);
+        }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
         console.info("RefsDemo", {
             ref: ref.current, refContent: refContent.current,

package/src/components/layout/header/StickyHeader.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from "react";
 
 import { fnWithProps } from "../../../types/fnWithProps";
-
 import { Header } from "./Header";
 import { Content, StyledStickyHeader } from "./StickyHeader.styled";
 
@@ -49,9 +48,8 @@ const StickyHeader = fnWithProps(forwardRef<HTMLDivElement, Props>((props, ref)
         throw err;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
     header = header as never; // @TODO find a better way to silence TS on cloneElement
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+
     content = content as never;
 
     return (
@@ -62,7 +60,7 @@ const StickyHeader = fnWithProps(forwardRef<HTMLDivElement, Props>((props, ref)
     );
 }), {
     displayName: "StickyHeader",
-    Content: Content, // @TODO remove "position" from this component props
+    Content, // @TODO remove "position" from this component props
     /**
      * @deprecated use StickyHeader.toString() instead
      */

package/src/components/layout/list/Header.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 { Header } from "./Header";
 import { List } from "./List";

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

@@ -1,10 +1,9 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import type { VariantProps } from "@stitches/react";
 
 import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";
-
-import { Item, ItemInnerContainerClassName } from "./Item";
+import { Item, ListItemInnerContainerClassNameSelector } from "./Item";
 
 const StyledContent = styled("div", {
     flex: 1,
@@ -20,7 +19,7 @@ const StyledHeader = styled(Item, {
     color: "$sub",
     textTransform: "uppercase",
 
-    [`& ${ItemInnerContainerClassName}`]: {
+    [`& ${ListItemInnerContainerClassNameSelector}`]: {
         minHeight: 0,
     },
 
@@ -41,12 +40,17 @@ type Variants = VariantProps<typeof StyledHeader>;
  * Use this to render a header within a `List`.
  * Use `as` prop to define which tag to use.
  */
-const Header: React.FC<StyledHeaderProps & Variants & { as?: string }> = ({ as, ...props }) => {
+const Header = forwardRef<HTMLLIElement, StyledHeaderProps & Variants & { as?: string }>(({ as, ...props }, ref) => {
     return (
-        <StyledHeader {...props}>
+        <StyledHeader {...props} ref={ref}>
             <StyledContent {...(as ? { as } : undefined)}>{props.children}</StyledContent>
         </StyledHeader>
     );
-};
+});
+
+Header.displayName = "List.Header";
+Header.toString = () => StyledHeader.toString();
+
+const ListHeaderContentSelector = StyledContent.toString();
 
-export { Header };
+export { Header, ListHeaderContentSelector };

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

@@ -2,11 +2,11 @@ import React from "react";
 
 import { omit } from "@ezez/utils";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Item } from "./Item";
-import { List } from "./List";
 import { Label } from "./Label";
+import { List } from "./List";
 import { Value } from "./Value";
 
 const demoControl = {

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

@@ -1,29 +1,29 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
+import { fnWithProps } from "../../../types/fnWithProps";
 import { ICON } from "../../icons/Icon";
-
-import { Value } from "./Value";
-import { Label } from "./Label";
 import { StyledIcon, StyledInnerContainer, StyledItem, StyledNoIcon } from "./Item.styled";
+import { Label } from "./Label";
+import { Value } from "./Value";
 
 interface LinkProps {
     href: string;
     children: React.ReactNode;
 }
 
-type Ratio = `${number}` | ``;
+type Ratio = `${number}` | "";
 
-type SlashSeparatedNumbers =
-    | Ratio
-    | `${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`;
+type SlashSeparatedNumbers
+    = | Ratio
+        | `${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`;
 
 interface Props {
     href?: string;
@@ -41,7 +41,7 @@ interface SubComponents {
 const icon = <StyledIcon name={ICON.forward} />;
 const noIcon = <StyledNoIcon />;
 
-const ItemInnerContainerClassName = StyledInnerContainer.toString();
+const ListItemInnerContainerClassNameSelector = StyledInnerContainer.toString();
 type StyledItemProps = React.ComponentProps<typeof StyledItem>;
 
 /**
@@ -66,7 +66,9 @@ type StyledItemProps = React.ComponentProps<typeof StyledItem>;
  * - `to`: if given it will render an anchor tag wrapped in a link using the given `Link` component
  * - `onClick`: if given it will render a button tag with the given onClick handler (it can be passed with `href` too)
  */
-const Item: React.FC<StyledItemProps & Props> & SubComponents = ({ href, to, onClick, Link, ratio, ...props }) => {
+const ItemBase = forwardRef<
+    HTMLLIElement, StyledItemProps & Props
+>(({ href, to, onClick, Link, ratio, ...props }, ref) => {
     const r = ratio ? ratio.split("/") : [];
 
     const pre = typeof props.selected === "boolean"
@@ -96,7 +98,7 @@ const Item: React.FC<StyledItemProps & Props> & SubComponents = ({ href, to, onC
         }
 
         return (
-            <StyledItem {...props}>
+            <StyledItem {...props} ref={ref}>
                 <Link href={to}><StyledInnerContainer as={"a"} href={to}>{pre}{ren}</StyledInnerContainer></Link>
             </StyledItem>
         );
@@ -104,7 +106,7 @@ const Item: React.FC<StyledItemProps & Props> & SubComponents = ({ href, to, onC
 
     if (href) {
         return (
-            <StyledItem {...props}>
+            <StyledItem {...props} ref={ref}>
                 <StyledInnerContainer as={"a"} href={href} onClick={onClick}>{pre}{ren}</StyledInnerContainer>
             </StyledItem>
         );
@@ -112,19 +114,24 @@ const Item: React.FC<StyledItemProps & Props> & SubComponents = ({ href, to, onC
 
     if (onClick) {
         return (
-            <StyledItem {...props}>
+            <StyledItem {...props} ref={ref}>
                 <StyledInnerContainer as={"button"} onClick={onClick}>{pre}{ren}</StyledInnerContainer>
             </StyledItem>
         );
     }
 
-    return <StyledItem {...props}><StyledInnerContainer>{pre}{ren}</StyledInnerContainer></StyledItem>;
-};
+    return <StyledItem {...props} ref={ref}><StyledInnerContainer>{pre}{ren}</StyledInnerContainer></StyledItem>;
+});
+
+ItemBase.displayName = "List.Item";
 
-Item.Label = Label;
-Item.Value = Value;
+const Item = fnWithProps(ItemBase, {
+    Label,
+    Value,
+});
+Item.toString = () => StyledItem.toString();
 
-export { Item, ItemInnerContainerClassName };
+export { Item, ListItemInnerContainerClassNameSelector };
 
 export type {
     Props as ItemProps,

package/src/components/layout/list/Label.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 { Item } from "./Item";
 import { Label } from "./Label";
 import { List } from "./List";
-import { Item } from "./Item";
 
 const meta: Meta = {
     title: "Components/Layout/List/Label",

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

@@ -1,4 +1,5 @@
 import React from "react";
+
 import type { ReactNode } from "react";
 
 import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";

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

@@ -1,9 +1,8 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
-
-import { Icon, ICON } from "../../icons/Icon";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
+import { ICON, Icon } from "../../icons/Icon";
 import { List } from "./List";
 
 const meta: Meta = {