react-miui 0.32.0 → 0.32.2

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 {