react-miui 0.32.0 → 0.32.2

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: {

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

@@ -1,9 +1,11 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
+
 import type { ThemeCSS } from "../../../theme";
 
+import { fnWithProps } from "../../../types/fnWithProps";
 import { ContainerStyled, NEGATIVE_PADDING, OverlayStyled, RemovePadding, TitleStyled } from "./Modal.styled";
 
 type OverlayProps = React.ComponentProps<typeof OverlayStyled>;
@@ -23,14 +25,10 @@ interface Props {
     full?: ContainerProps["full"];
 }
 
-interface SubComponents {
-    RemovePadding: typeof RemovePadding;
-}
-
 // @TODO proper docs + buttons
 
 // eslint-disable-next-line max-lines-per-function,max-statements
-const Modal: React.FC<Props> & SubComponents = ({
+const ModalBase = forwardRef<HTMLDivElement, Props>(({
     children,
     onClose,
     isOpen,
@@ -41,11 +39,11 @@ const Modal: React.FC<Props> & SubComponents = ({
     portal = true,
     position,
     full,
-}) => {
+}, ref) => {
     const [isClosing, setIsClosing] = useState(false);
     const [isRendered, setIsRendered] = useState(false);
     const overlayRef = useRef<HTMLDivElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
+    const containerRef = useForwardedRef(ref);
 
     useEffect(() => {
         if (!isOpen || !closeOnEsc) {
@@ -61,10 +59,11 @@ const Modal: React.FC<Props> & SubComponents = ({
         return () => {
             document.removeEventListener("keydown", onKeyDown);
         };
-    }, [isOpen, closeOnEsc]);
+    }, [isOpen, closeOnEsc, onClose]);
 
     useEffect(() => {
         if (!isOpen) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setIsClosing(true);
             return;
         }
@@ -77,6 +76,7 @@ const Modal: React.FC<Props> & SubComponents = ({
             return;
         }
 
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (!overlayRef.current || !containerRef.current) {
             return;
         }
@@ -87,7 +87,7 @@ const Modal: React.FC<Props> & SubComponents = ({
         overlayRef.current.offsetHeight; // force sync document reflow
         overlayRef.current.style.removeProperty("animation");
         containerRef.current.style.removeProperty("animation");
-    }, [isClosing]);
+    }, [isClosing, containerRef]);
 
     const titleElem = title ? <TitleStyled>{title}</TitleStyled> : null;
 
@@ -165,7 +165,17 @@ const Modal: React.FC<Props> & SubComponents = ({
     }
 
     return tree;
-};
-Modal.RemovePadding = RemovePadding;
+});
+
+ModalBase.displayName = "Modal";
+
+const Modal = fnWithProps(ModalBase, {
+    RemovePadding,
+});
+Modal.toString = () => OverlayStyled.toString();
+
+const ModalContainerSelector = ContainerStyled.toString();
+const ModalTitleSelector = TitleStyled.toString();
+const ModalRemovePaddingSelector = RemovePadding.toString();
 
-export { Modal };
+export { Modal, ModalContainerSelector, ModalTitleSelector, ModalRemovePaddingSelector };

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

@@ -1,9 +1,9 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { ModalButtons } from "./ModalButtons";
 import { Modal } from "./Modal";
+import { ModalButtons } from "./ModalButtons";
 
 const meta: Meta = {
     title: "Components/UI/ModalButtons",

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

@@ -1,6 +1,5 @@
 import { dimensionsPxToRem, styled } from "../../../theme";
 import { fnWithProps } from "../../../types/fnWithProps";
-
 import { NEGATIVE_PADDING } from "./Modal.styled";
 
 const Container = styled("div", {

package/src/components/ui/pop/OnButtonClick.tsx

@@ -8,6 +8,8 @@ interface Props {
 const OnButtonClick: React.FC<Props> = (props) => {
     const theRef = useRef<HTMLDivElement>(null);
 
+    const { onClick } = props;
+
     useEffect(() => {
         const div = theRef.current;
         if (!div) {
@@ -17,14 +19,14 @@ const OnButtonClick: React.FC<Props> = (props) => {
         const cb = (e: MouseEvent) => {
             if (e.target instanceof HTMLElement && e.target.nodeName.toLowerCase() === "button") {
                 setTimeout(() => {
-                    props.onClick();
+                    onClick();
                 }, 0);
             }
         };
 
         div.addEventListener("click", cb);
         return () => { div.removeEventListener("click", cb); };
-    }, [theRef]);
+    }, [onClick]);
 
     return <div ref={theRef}>{props.children}</div>;
 };

package/src/components/ui/pop/Pop.stories.tsx

@@ -4,12 +4,11 @@ import { SunOne } from "@icon-park/react";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
+import { ICON, Icon } from "../../icons/Icon";
+import { Header } from "../../layout/header/Header";
 import { HeaderIconAction } from "../../layout/header/HeaderIconAction";
-import { Icon, ICON } from "../../icons/Icon";
 import { StickyHeader } from "../../layout/header/StickyHeader";
-import { Header } from "../../layout/header/Header";
 import { Section } from "../../layout/section/Section";
-
 import { Pop } from "./Pop";
 
 const meta: Meta = {
@@ -32,7 +31,6 @@ const handleClick = () => {
 
 const Primary: Story = {
     render: (args) => {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
         const [open, setOpen] = useState(false);
         const [leftOpen, setLeftOpen] = useState(false);
 

package/src/components/ui/pop/Pop.tsx

@@ -3,10 +3,9 @@ import React, { Component, createRef } from "react";
 import type { ThemeCSS } from "../../../theme";
 
 import { HandleEsc } from "../../utils/HandleEsc";
-
 import { OnButtonClick } from "./OnButtonClick";
-import { PopOption } from "./PopOption";
 import { List, Overlay } from "./Pop.styled";
+import { PopOption } from "./PopOption";
 
 interface Props {
     open: boolean;
@@ -169,4 +168,9 @@ class Pop extends Component<Props, State> {
     }
 }
 
-export { Pop };
+Pop.toString = () => Overlay.toString();
+
+const PopOverlaySelector = Overlay.toString();
+const PopListSelector = List.toString();
+
+export { Pop, PopOverlaySelector, PopListSelector };

package/src/components/ui/pop/PopOption.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { Button, FakeIcon, Icon, ListItem } from "./Pop.styled";
 
@@ -10,16 +10,22 @@ interface Props {
     children: React.ReactNode;
 }
 
-const PopOption: React.FC<Props> = (props) => {
+const PopOption = forwardRef<HTMLLIElement, Props>((props, ref) => {
     const ic = props.icon
         ? <Icon>{props.icon}</Icon>
         : ((props.forceEmptyIcon ?? true) ? <FakeIcon /> : null);
 
     return (
-        <ListItem className={props.className}>
+        <ListItem ref={ref} className={props.className}>
             <Button onClick={props.onClick}>{ic}{props.children}</Button>
         </ListItem>
     );
-};
+});
 
-export { PopOption };
+PopOption.displayName = "PopOption";
+PopOption.toString = () => ListItem.toString();
+
+const PopOptionButtonSelector = Button.toString();
+const PopOptionIconSelector = Icon.toString();
+
+export { PopOption, PopOptionButtonSelector, PopOptionIconSelector };

package/src/components/ui/progress/Progress.stories.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
-
 import { Progress } from "./Progress";
 
 const meta: Meta = {
@@ -34,7 +33,7 @@ const CustomProgress = styled(Progress, {
 const CustomizedColors: Story = {
     render: (args) => {
         return (
-            // @ts-ignore :shrug:
+            // @ts-expect-error bad types from storybook
             <CustomProgress {...args} />
         );
     },

package/src/components/ui/progress/Progress.styled.ts

@@ -23,7 +23,7 @@ const Container = styled("div", {
 const sharedValueStyles = css({
     position: "absolute",
     top: 0,
-    height: `100%`,
+    height: "100%",
     borderRadius: "9999px",
     border: `${borderPxToRem(1)} solid $border`,
     background: "$background",

package/src/components/ui/progress/Progress.tsx

@@ -5,7 +5,6 @@ import { cap, scale } from "@ezez/utils";
 import type { ThemeCSS } from "../../../theme";
 
 import { fnWithProps } from "../../../types/fnWithProps";
-
 import { Background, Container, Value } from "./Progress.styled";
 
 type ProgressProps = React.ComponentProps<typeof Container> & {

package/src/components/ui/stats/Stats.stories.tsx

@@ -4,13 +4,12 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
 import { Div } from "../../native";
-
 import {
     Stats,
-    StatsLabelSelector,
-    StatsValueSelector,
     StatsItemSelector,
+    StatsLabelSelector,
     StatsSeparatorSelector,
+    StatsValueSelector,
 } from "./Stats";
 
 const meta: Meta<typeof Stats> = {

package/src/components/ui/stats/Stats.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 
 import type { ComponentProps } from "@stitches/react";
 
-import { StyledStats, Item, Separator, Label, Value } from "./Stats.styled";
+import { Item, Label, Separator, StyledStats, Value } from "./Stats.styled";
 
 type Stat = {
     label: string;

package/src/components/ui/tabs/Item.styled.ts

@@ -8,6 +8,8 @@ export const StyledItem = styled("button", {
     fontSize: fontPxToRem(29),
     color: "var(--selector-text)",
     background: "none",
+    whiteSpace: "nowrap",
+    flexShrink: 0,
 
     variants: {
         active: {

package/src/components/ui/tabs/Item.tsx

@@ -11,9 +11,11 @@ type ItemProps = {
 };
 
 const Item = (props: ItemProps): React.ReactElement => {
+    const { onClick, value } = props;
+
     const handleClick = useCallback(() => {
-        props.onClick(props.value.value);
-    }, [props.onClick, props.value.value]);
+        onClick(value.value);
+    }, [onClick, value.value]);
 
     return (
         <StyledItem onClick={handleClick} active={props.active} type={"button"} data-active={props.active}>

package/src/components/ui/tabs/Selector.stories.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Header } from "../../layout/header/Header";
 import { styled } from "../../../theme";
-
+import { Header, HeaderContentsSelector } from "../../layout/header/Header";
 import { Selector, SelectorItemSelector } from "./Selector";
 
 const meta: Meta = {
@@ -99,10 +98,71 @@ const CustomStyled: Story = {
     },
 };
 
+const manyValues = [
+    "First element",
+    "Apple",
+    "Pie",
+    "Dogs and cats",
+    "Flying vehicles",
+    "Random text that is very long",
+    "Computer",
+    "Leaflet",
+    "Jar of nuts",
+    "POE Network Switch",
+];
+
+const MultiLine: Story = {
+    render: (args) => {
+        const [current, setCurrent] = useState(args.value ?? "");
+
+        return (
+            <Header>
+                <Selector
+                    {...args}
+                    multiLine={true}
+                    value={current}
+                    values={manyValues}
+                    onChange={(value: string) => {
+                        setCurrent(value);
+                        if (args.onChange) {
+                            args.onChange(value);
+                        }
+                    }}
+                />
+            </Header>
+        );
+    },
+};
+
+const Lengthy: Story = {
+    render: (args) => {
+        const [current, setCurrent] = useState(args.value ?? "");
+
+        return (
+            <Header css={{ [`& ${HeaderContentsSelector}`]: { overflow: "hidden" } }}>
+                <Selector
+                    {...args}
+                    values={manyValues}
+                    multiLine={false}
+                    value={current}
+                    onChange={(value: string) => {
+                        setCurrent(value);
+                        if (args.onChange) {
+                            args.onChange(value);
+                        }
+                    }}
+                />
+            </Header>
+        );
+    },
+};
+
 export {
     Primary,
     WithinHeader,
     CustomStyled,
+    Lengthy,
+    MultiLine,
 };
 
 export default meta;

package/src/components/ui/tabs/Selector.styled.ts

@@ -1,8 +1,18 @@
-import { styled } from "@stitches/react";
+import { keyframes, styled } from "@stitches/react";
 
-import { dimensionsPxToRem } from "../../../theme";
+import { dimensionsPxToRem, fontPxToRem } from "../../../theme";
 
-export const Root = styled("div", {
+const nudgeRight = keyframes({
+    "0%, 100%": { transform: "translateX(0)" },
+    "50%": { transform: "translateX(3px)" },
+});
+
+const nudgeLeft = keyframes({
+    "0%, 100%": { transform: "translateX(0)" },
+    "50%": { transform: "translateX(-3px)" },
+});
+
+const Root = styled("div", {
     "--selector-text": "$colors$selectorText",
     "--selector-active": "$colors$selectorActive",
 
@@ -10,4 +20,65 @@ export const Root = styled("div", {
     "flex": 1,
     "justifyContent": "center",
     "gap": dimensionsPxToRem(114),
+
+    "variants": {
+        multiLine: {
+            true: {
+                flexWrap: "wrap",
+                rowGap: dimensionsPxToRem(60),
+            },
+            false: {
+                "flexWrap": "nowrap",
+                "overflowX": "auto",
+                "scrollbarWidth": "none",
+                "justifyContent": "flex-start",
+                "paddingRight": dimensionsPxToRem(60),
+                "&::-webkit-scrollbar": {
+                    display: "none",
+                },
+            },
+        },
+    },
 });
+
+const Wrapper = styled("div", {
+    position: "relative",
+    display: "flex",
+    flex: 1,
+    overflow: "hidden",
+});
+
+const Arrow = styled("div", {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    display: "flex",
+    alignItems: "center",
+    pointerEvents: "none",
+    fontSize: fontPxToRem(29),
+    color: "var(--selector-text)",
+    opacity: 0,
+    transition: "opacity 0.2s ease",
+
+    variants: {
+        side: {
+            right: {
+                right: 0,
+                paddingRight: dimensionsPxToRem(12),
+                animation: `${String(nudgeRight)} 1.5s ease-in-out 0.5s 2`,
+            },
+            left: {
+                left: 0,
+                paddingLeft: dimensionsPxToRem(12),
+                animation: `${String(nudgeLeft)} 1.5s ease-in-out 0.5s 2`,
+            },
+        },
+        visible: {
+            true: {
+                opacity: 0.65,
+            },
+        },
+    },
+});
+
+export { Arrow, Root, Wrapper };