react-miui 0.32.1 → 0.32.3

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

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

@@ -1,26 +1,84 @@
-import React, { forwardRef, useCallback, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useState } from "react";
+
+import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
 
 import type { Value } from "../../../types/form";
 
 import { toObjectValue } from "../../../utils";
-
 import { Item } from "./Item";
-import { Root } from "./Selector.styled";
+import { Arrow, Root, Wrapper } from "./Selector.styled";
 
 type SelectorProps = {
-    values: Value<string>[];
+    values: Array<Value<string>>;
     value?: string;
     onChange?: (value: string) => void;
+    multiLine?: boolean;
     className?: string;
 };
 
+const FADE_SIZE = "62px";
+const fadeRight = `linear-gradient(to right, black calc(100% - ${FADE_SIZE}), transparent)`;
+const fadeLeft = `linear-gradient(to left, black calc(100% - ${FADE_SIZE}), transparent)`;
+const fadeBoth = [
+    `linear-gradient(to right, transparent, black ${FADE_SIZE}, black calc(100% - ${FADE_SIZE}), transparent)`,
+].join("");
+
+const useScrollIndicators = (
+    ref: React.MutableRefObject<HTMLDivElement>,
+    enabled: boolean,
+) => {
+    const [showRight, setShowRight] = useState(false);
+    const [showLeft, setShowLeft] = useState(false);
+
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+
+        const el = ref.current;
+
+        const update = () => {
+            const canScroll = el.scrollWidth > el.clientWidth;
+            const atStart = el.scrollLeft <= 1;
+            const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+            const right = canScroll && !atEnd;
+            const left = canScroll && !atStart;
+            setShowRight(right);
+            setShowLeft(left);
+
+            let mask = "";
+            if (left && right) { mask = fadeBoth; }
+            else if (right) { mask = fadeRight; }
+            else if (left) { mask = fadeLeft; }
+            el.style.maskImage = mask;
+        };
+
+        update();
+        el.addEventListener("scroll", update, { passive: true });
+
+        const ro = new ResizeObserver(update);
+        ro.observe(el);
+
+        return () => {
+            el.removeEventListener("scroll", update);
+            ro.disconnect();
+        };
+    }, [ref, enabled]);
+
+    return { showRight, showLeft };
+};
+
 const Selector = forwardRef<HTMLDivElement, SelectorProps>((props, ref) => {
+    const innerRef = useForwardedRef(ref);
     const [current, setCurrent] = useState(props.value);
+    const { showRight, showLeft } = useScrollIndicators(innerRef, props.multiLine === false);
+
+    const { onChange } = props;
 
     const handleCurrent = useCallback((value: string) => {
         setCurrent(value);
-        props.onChange?.(value);
-    }, [props.onChange]);
+        onChange?.(value);
+    }, [onChange]);
 
     const crr = props.value ?? current;
 
@@ -28,7 +86,24 @@ const Selector = forwardRef<HTMLDivElement, SelectorProps>((props, ref) => {
         const ov = toObjectValue(v);
         return <Item key={ov.value} value={ov} onClick={handleCurrent} active={crr === ov.value} />;
     });
-    return <Root ref={ref} className={props.className}>{vals}</Root>;
+
+    const multiLineVariant = props.multiLine != null ? { multiLine: props.multiLine } : {};
+
+    const root = (
+        <Root ref={innerRef} className={props.className} {...multiLineVariant}>{vals}</Root>
+    );
+
+    if (props.multiLine === false) {
+        return (
+            <Wrapper>
+                <Arrow side={"left"} visible={showLeft}>{"‹"}</Arrow>
+                {root}
+                <Arrow side={"right"} visible={showRight}>{"›"}</Arrow>
+            </Wrapper>
+        );
+    }
+
+    return root;
 });
 
 Selector.displayName = "Selector";

package/src/components/ui/toaster/Notification.tsx

@@ -12,9 +12,13 @@ interface Props {
 // eslint-disable-next-line @typescript-eslint/no-shadow
 const Notification: React.FC<Props> = (props) => {
     const [forceHide, setForceHide] = useState(false);
+
+    const toastId = props.toast.id;
+    const { onRemove } = props;
+
     const handleRemove = useCallback(() => {
-        props.onRemove(props.toast.id);
-    }, [props.toast.id]);
+        onRemove(toastId);
+    }, [toastId, onRemove]);
 
     const handleForceHide = useCallback(() => {
         setForceHide(true);

package/src/components/ui/toaster/Toaster.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 { Div } from "../../native";
 import { Button } from "../button/Button";
-
 import { useToaster } from "./Toaster";
 
 const meta: Meta = {

package/src/components/utils/HandleEsc.tsx

@@ -1,20 +1,21 @@
 import { useEffect } from "react";
+
 import type React from "react";
 
-import { useKeyPress } from "../../utils/index";
+import { useKeyPress } from "../../utils";
 
 interface Props {
     onPress: () => void;
 }
 
-const HandleEsc: React.FC<Props> = (props) => {
+const HandleEsc: React.FC<Props> = ({ onPress }) => {
     const pressed = useKeyPress("Escape");
 
     useEffect(() => {
         if (pressed) {
-            props.onPress();
+            onPress();
         }
-    }, [pressed]);
+    }, [pressed, onPress]);
 
     return null;
 };

package/src/utils/useTailSpin.ts

@@ -30,7 +30,7 @@ const useTailSpin = ({ size = DEFAULT_SIZE, color = DEFAULT_COLOR, speed = DEFAU
         const encoded = encodeURIComponent(svg).replace(/'/gu, "%27")
             .replace(/"/gu, "%22");
         return `data:image/svg+xml,${encoded}`;
-    }, [size, color, speed]);
+    }, [size, color, speed, id]);
 };
 
 export {