reshaped 3.8.0-canary.1 → 3.8.0-canary.11

package/dist/components/Timeline/tests/Timeline.test.stories.js

@@ -1,4 +1,3 @@
-import { expect } from "storybook/test";
 import Timeline from "../index.js";
 export default {
     title: "Components/Timeline/tests",
@@ -10,23 +9,3 @@ export default {
         chromatic: { disableSnapshot: true },
     },
 };
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Timeline className="test-classname" attributes={{ id: "test-id" }}>
-				<Timeline.Item className="test-item-classname" attributes={{ id: "test-item-id" }}>
-					Content
-				</Timeline.Item>
-				<Timeline.Item>Content</Timeline.Item>
-			</Timeline>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const items = canvas.getAllByRole("listitem");
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(items).toHaveLength(2);
-        expect(items[0]).toHaveClass("test-item-classname");
-        expect(items[0]).toHaveAttribute("id", "test-item-id");
-    },
-};

package/dist/components/Toast/ToastContainer.js

@@ -89,6 +89,7 @@ const ToastContainer = (props) => {
             // Height + padding + borders
             height: status === "entered" ? `calc(${toastHeight}px + var(--rs-unit-x2) + 2px)` : 0,
             // Disable transition when height of the toast can change
+            // eslint-disable-next-line react-hooks/refs
             transitionDuration: resizingRef.current ? "0s" : undefined,
         }, onTransitionEnd: handleTransitionEnd, onFocus: stopTimer, onBlur: startTimer, children: _jsx("span", { className: s.wrapper, children: _jsx(Toast, { ...toastProps, collapsed: index > 0 && !inspected, attributes: { ...toastProps.attributes, ref: wrapperRef } }) }) }));
 };

package/dist/components/Toast/ToastRegion.js

@@ -56,6 +56,7 @@ const ToastRegion = (props) => {
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
     _jsx("ul", { role: "region", "aria-live": "polite", className: regionClassNames, ref: rootRef, onTouchStart: handleTouchStart, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { width }, children: queue.map((data, index) => {
             const visibleIndex = filteredLength - index + hiddenCount - 1;
+            // eslint-disable-next-line react-hooks/immutability
             if (data.status !== "entered")
                 hiddenCount += 1;
             return (_jsx(ToastContainer, { ...data, index: visibleIndex, inspected: inspecting || !!expanded }, data.id));

package/dist/components/Toast/tests/Toast.stories.d.ts

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     parameters: {
@@ -7,11 +8,34 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const size: () => import("react").JSX.Element;
-export declare const position: () => import("react").JSX.Element;
-export declare const color: () => import("react").JSX.Element;
-export declare const timeout: () => import("react").JSX.Element;
-export declare const regionOptions: () => import("react").JSX.Element;
-export declare const slots: () => import("react").JSX.Element;
-export declare const edgeCases: () => import("react").JSX.Element;
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const position: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const color: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const timeout: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const regionOptions: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const slots: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const base: StoryObj;
+export declare const nested: StoryObj;
+export declare const className: StoryObj;
+export declare const edgeCases: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

package/dist/components/Toast/tests/Toast.stories.js

@@ -6,6 +6,8 @@ import Image from "../../Image/index.js";
 import Text from "../../Text/index.js";
 import Dismissible from "../../Dismissible/index.js";
 import IconZap from "../../../icons/Zap.js";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { sleep } from "../../../utilities/helpers.js";
 export default {
     title: "Components/Toast",
     parameters: {
@@ -14,27 +16,6 @@ export default {
         },
     },
 };
-const Base = () => {
-    const toast = useToast();
-    return (<Button onClick={() => {
-            const id = toast.show({
-                icon: IconZap,
-                title: "Hey!",
-                text: "Event completed",
-                actionsSlot: [
-                    <Button onClick={() => toast.hide(id)}>Undo</Button>,
-                    <Button onClick={() => toast.hide(id)}>Show</Button>,
-                ],
-            });
-        }}>
-			Show toast
-		</Button>);
-};
-export const base = () => (<Example>
-		<Example.Item title="title, children, icon, actions">
-			<Base />
-		</Example.Item>
-	</Example>);
 const Size = () => {
     const toast = useToast();
     const props = {
@@ -67,7 +48,7 @@ const Size = () => {
 			</Example.Item>
 		</Example>);
 };
-export const size = () => <Size />;
+export const size = { name: "size", render: () => <Size /> };
 const Position = () => {
     const toast = useToast();
     return (<Example>
@@ -134,7 +115,7 @@ const Position = () => {
 			</Example.Item>
 		</Example>);
 };
-export const position = () => <Position />;
+export const position = { name: "position", render: () => <Position /> };
 const Color = () => {
     const toast = useToast();
     return (<Example>
@@ -236,7 +217,7 @@ const Color = () => {
 			</Example.Item>
 		</Example>);
 };
-export const color = () => <Color />;
+export const color = { name: "color", render: () => <Color /> };
 const Timeout = () => {
     const toast = useToast();
     return (<Example>
@@ -272,7 +253,7 @@ const Timeout = () => {
 			</Example.Item>
 		</Example>);
 };
-export const timeout = () => <Timeout />;
+export const timeout = { name: "timeout", render: () => <Timeout /> };
 const Expanded = () => {
     const toast = useToast();
     return (<Example>
@@ -288,7 +269,7 @@ const Expanded = () => {
 			</Example.Item>
 		</Example>);
 };
-export const regionOptions = () => <Expanded />;
+export const regionOptions = { name: "expanded", render: () => <Expanded /> };
 const Slots = () => {
     const toast = useToast();
     return (<Example>
@@ -323,7 +304,97 @@ const Slots = () => {
 			</Example.Item>
 		</Example>);
 };
-export const slots = () => <Slots />;
+export const slots = { name: "slots", render: () => <Slots /> };
+export const base = {
+    name: "base",
+    render: () => {
+        const toast = useToast();
+        return (<Button onClick={() => {
+                const id = toast.show({
+                    title: "Title",
+                    text: "Text",
+                    children: "Children",
+                    startSlot: "Slot",
+                    actionsSlot: (<Button attributes={{ "data-testid": "trigger-id" }} onClick={() => toast.hide(id)}>
+								Trigger
+							</Button>),
+                });
+            }}>
+				Show toast
+			</Button>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        const title = canvas.getByText("Title");
+        const text = canvas.getByText("Text");
+        const children = canvas.getByText("Children");
+        const slot = canvas.getByText("Slot");
+        const action = canvas.getByTestId("trigger-id");
+        expect(title).toBeInTheDocument();
+        expect(text).toBeInTheDocument();
+        expect(children).toBeInTheDocument();
+        expect(slot).toBeInTheDocument();
+        expect(action).toBeInTheDocument();
+        await userEvent.click(action);
+        await sleep(600);
+        await waitFor(() => {
+            expect(title).not.toBeInTheDocument();
+        });
+    },
+};
+const NestedDemo = () => {
+    const toast = useToast();
+    return (<Button onClick={() => {
+            toast.show({
+                text: "Content",
+            });
+        }}>
+			Show toast
+		</Button>);
+};
+export const nested = {
+    name: "ToastProvider",
+    render: () => {
+        return (<div data-testid="test-container-id">
+				<ToastProvider>
+					<NestedDemo />
+				</ToastProvider>
+			</div>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        const container = canvas.getByTestId("test-container-id");
+        const toast = within(container).getByText("Content");
+        expect(toast).toBeInTheDocument();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => {
+        const toast = useToast();
+        return (<Button onClick={() => {
+                const id = toast.show({
+                    text: "Content",
+                    attributes: { "data-testid": "test-id" },
+                    className: "test-classname",
+                });
+            }}>
+				Show toast
+			</Button>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        const toast = canvas.getByTestId("test-id");
+        expect(toast).toBeInTheDocument();
+        expect(toast).toHaveClass("test-classname");
+    },
+};
 const Multiline = () => {
     const toast = useToast();
     return (<Button onClick={() => {
@@ -346,13 +417,16 @@ const Nested = () => {
 			</Button>
 		</View>);
 };
-export const edgeCases = () => (<Example>
-		<Example.Item title="Multiline, should support dynamic height">
-			<Multiline />
-		</Example.Item>
-		<Example.Item title="Nested ToastProvider">
-			<ToastProvider>
-				<Nested />
-			</ToastProvider>
-		</Example.Item>
-	</Example>);
+export const edgeCases = {
+    name: "test: edge cases",
+    render: () => (<Example>
+			<Example.Item title="Multiline, should support dynamic height">
+				<Multiline />
+			</Example.Item>
+			<Example.Item title="Nested ToastProvider">
+				<ToastProvider>
+					<Nested />
+				</ToastProvider>
+			</Example.Item>
+		</Example>),
+};

package/dist/components/ToggleButton/ToggleButton.types.d.ts

@@ -3,7 +3,7 @@ type BaseProps = Omit<ButtonProps, "variant" | "higlighted"> & {
     /** Component render variant
      * @default "outline"
      */
-    variant?: Extract<ButtonProps["variant"], "outline" | "ghost">;
+    variant?: ButtonProps["variant"];
     /** Value of the toggle button, enables controlled mode for the ToggleButtonGroup */
     value?: string;
     /** Callback when the toggle button value changes */

package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js

@@ -23,6 +23,7 @@ const ToggleButtonGroupControlled = (props) => {
             return child;
         }
         const boundIndex = toggleButtonIndex;
+        // eslint-disable-next-line react-hooks/immutability
         toggleButtonIndex += 1;
         const focusable = focusableIndexRef.current === boundIndex;
         return (_jsx(ToggleButtonGroupItem, { ...child.props, focusable: focusable, onFocus: () => {

package/dist/components/Tooltip/Tooltip.js

@@ -7,7 +7,7 @@ import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
     const { text, children, position = "bottom", color = "inverted", ...flyoutProps } = props;
     if (!text)
-        return children({});
+        return children({ ref: null });
     return (_jsxs(Flyout, { ...flyoutProps, position: position, triggerType: "hover", groupTimeouts: true, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
 };
 Tooltip.displayName = "Tooltip";

package/dist/components/Tooltip/Tooltip.types.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import type { FlyoutProps, FlyoutTriggerProps } from "../Flyout";
+import type { FlyoutProps, FlyoutTriggerAttributes } from "../Flyout";
 export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
     /** Node for inserting children */
-    children: (attributes: Parameters<FlyoutTriggerProps["children"]>[0] | {}) => React.ReactNode;
+    children: (attributes: FlyoutTriggerAttributes) => React.ReactNode;
     /** Text content for the tooltip */
     text?: React.ReactNode;
     /** Color of the tooltip

package/dist/components/Tooltip/tests/Tooltip.stories.d.ts

@@ -1,3 +1,5 @@
+import { fn } from "storybook/test";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").TooltipProps>;
@@ -8,7 +10,19 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const position: () => import("react").JSX.Element;
-export declare const color: () => import("react").JSX.Element;
-export declare const controlled: () => import("react").JSX.Element;
-export declare const edgeCases: () => import("react").JSX.Element;
+export declare const position: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const color: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const defaultActive: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const edgeCases: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

package/dist/components/Tooltip/tests/Tooltip.stories.js

@@ -4,6 +4,7 @@ import Popover from "../../Popover/index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";
 import useResponsiveClientValue from "../../../hooks/useResponsiveClientValue.js";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 export default {
     title: "Components/Tooltip",
     component: Tooltip,
@@ -29,122 +30,153 @@ const DemoResponsive = (props) => {
 			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
 		</Tooltip>);
 };
-export const position = () => (<Example>
-		<Example.Item title="position: bottom-start">
-			<View direction="row" gap={2}>
-				<Demo position="bottom-start" text="Tooltip 1"/>
-				<Demo position="bottom-start" text="Tooltip 2"/>
-				<Demo position="bottom-start" text="Tooltip 3"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="position: bottom">
-			<Demo position="bottom"/>
-		</Example.Item>
-		<Example.Item title="position: bottom-end">
-			<Demo position="bottom-end"/>
-		</Example.Item>
-		<Example.Item title="position: top-start">
-			<Demo position="top-start"/>
-		</Example.Item>
-		<Example.Item title="position: top">
-			<Demo position="top"/>
-		</Example.Item>
-		<Example.Item title="position: top-end">
-			<Demo position="top-end"/>
-		</Example.Item>
+export const position = {
+    name: "position",
+    render: () => (<Example>
+			<Example.Item title="position: bottom-start">
+				<View direction="row" gap={2}>
+					<Demo position="bottom-start" text="Tooltip 1"/>
+					<Demo position="bottom-start" text="Tooltip 2"/>
+					<Demo position="bottom-start" text="Tooltip 3"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="position: bottom">
+				<Demo position="bottom"/>
+			</Example.Item>
+			<Example.Item title="position: bottom-end">
+				<Demo position="bottom-end"/>
+			</Example.Item>
+			<Example.Item title="position: top-start">
+				<Demo position="top-start"/>
+			</Example.Item>
+			<Example.Item title="position: top">
+				<Demo position="top"/>
+			</Example.Item>
+			<Example.Item title="position: top-end">
+				<Demo position="top-end"/>
+			</Example.Item>
 
-		<Example.Item title="position: start">
-			<View align="end">
-				<Demo position="start"/>
-			</View>
-		</Example.Item>
+			<Example.Item title="position: start">
+				<View align="end">
+					<Demo position="start"/>
+				</View>
+			</Example.Item>
 
-		<Example.Item title="position: start-top">
-			<View align="end">
-				<Demo position="start-top"/>
-			</View>
-		</Example.Item>
+			<Example.Item title="position: start-top">
+				<View align="end">
+					<Demo position="start-top"/>
+				</View>
+			</Example.Item>
 
-		<Example.Item title="position: start-bottom">
-			<View align="end">
-				<Demo position="start-bottom"/>
-			</View>
-		</Example.Item>
+			<Example.Item title="position: start-bottom">
+				<View align="end">
+					<Demo position="start-bottom"/>
+				</View>
+			</Example.Item>
 
-		<Example.Item title="position: end">
-			<Demo position="end"/>
-		</Example.Item>
+			<Example.Item title="position: end">
+				<Demo position="end"/>
+			</Example.Item>
 
-		<Example.Item title="position: end-top">
-			<Demo position="end-top"/>
-		</Example.Item>
+			<Example.Item title="position: end-top">
+				<Demo position="end-top"/>
+			</Example.Item>
 
-		<Example.Item title="position: end-bottom">
-			<Demo position="end-bottom"/>
-		</Example.Item>
-	</Example>);
-export const color = () => (<Example>
-		<Example.Item title="color: inverted">
-			<Demo color="inverted" position="bottom"/>
-		</Example.Item>
-		<Example.Item title="color: dark">
-			<Demo color="dark" position="bottom"/>
-		</Example.Item>
-	</Example>);
-export const controlled = () => (<Example>
-		<Example.Item title="active, controlled, position: bottom">
-			<Demo position="bottom" active/>
-		</Example.Item>
-	</Example>);
-export const edgeCases = () => (<Example>
-		<Example.Item title="responsive visibility">
-			<DemoResponsive text="Responsive"/>
-		</Example.Item>
-
-		<Example.Item title="without text">
-			<Tooltip>{() => <Button>Button</Button>}</Tooltip>
-		</Example.Item>
+			<Example.Item title="position: end-bottom">
+				<Demo position="end-bottom"/>
+			</Example.Item>
+		</Example>),
+};
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: inverted">
+				<Demo color="inverted" position="bottom"/>
+			</Example.Item>
+			<Example.Item title="color: dark">
+				<Demo color="dark" position="bottom"/>
+			</Example.Item>
+		</Example>),
+};
+export const defaultActive = {
+    name: "uncontrolled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Tooltip text="Content" onOpen={args.handleOpen} onClose={args.handleClose}>
+			{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+		</Tooltip>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.hover(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        const item = canvas.getByText("Content");
+        expect(item).toBeInTheDocument();
+        await userEvent.unhover(trigger);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({});
+            expect(item).not.toBeInTheDocument();
+        });
+    },
+};
+export const edgeCases = {
+    name: "test: edge cases",
+    render: () => (<Example>
+			<Example.Item title="responsive visibility">
+				<DemoResponsive text="Responsive"/>
+			</Example.Item>
 
-		<Example.Item title="tooltip with popover">
-			<Tooltip text="Tooltip" position="top">
-				{(attributes) => (<Popover position="bottom">
-						<Popover.Trigger>
-							{(popoverAttributes) => (<Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>)}
-						</Popover.Trigger>
-						<Popover.Content>Popover</Popover.Content>
-					</Popover>)}
-			</Tooltip>
-		</Example.Item>
+			<Example.Item title="without text">
+				<Tooltip>{() => <Button>Button</Button>}</Tooltip>
+			</Example.Item>
 
-		<Example.Item title="nested popovers inside a tooltip">
-			<View direction="row" gap={2}>
-				<Tooltip position="top" text="Hello">
-					{(tooltipAttributes) => (<Popover position="bottom" width="300px">
+			<Example.Item title="tooltip with popover">
+				<Tooltip text="Tooltip" position="top">
+					{(attributes) => (<Popover position="bottom">
 							<Popover.Trigger>
-								{(attributes) => (<Button attributes={{ ...tooltipAttributes, ...attributes }}>
-										Tooltip with popover
-									</Button>)}
+								{(popoverAttributes) => (<Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>)}
 							</Popover.Trigger>
-							<Popover.Content>
-								<View gap={2} align="center" direction="row" justify="space-between">
-									Popover content
-									<Popover position="bottom" width="300px">
-										<Popover.Trigger>
-											{(attributes) => <Button attributes={attributes}>Open</Button>}
-										</Popover.Trigger>
-										<Popover.Content>
-											<Popover.Dismissible align="center" closeAriaLabel="Close">
-												Another popover content
-											</Popover.Dismissible>
-										</Popover.Content>
-									</Popover>
-								</View>
-							</Popover.Content>
+							<Popover.Content>Popover</Popover.Content>
 						</Popover>)}
 				</Tooltip>
-				<Tooltip position="top" text="Hello">
-					{(tooltipAttributes) => <Button attributes={tooltipAttributes}>Just a tooltip</Button>}
-				</Tooltip>
-			</View>
-		</Example.Item>
-	</Example>);
+			</Example.Item>
+
+			<Example.Item title="nested popovers inside a tooltip">
+				<View direction="row" gap={2}>
+					<Tooltip position="top" text="Hello">
+						{(tooltipAttributes) => (<Popover position="bottom" width="300px">
+								<Popover.Trigger>
+									{(attributes) => (<Button attributes={{ ...tooltipAttributes, ...attributes }}>
+											Tooltip with popover
+										</Button>)}
+								</Popover.Trigger>
+								<Popover.Content>
+									<View gap={2} align="center" direction="row" justify="space-between">
+										Popover content
+										<Popover position="bottom" width="300px">
+											<Popover.Trigger>
+												{(attributes) => <Button attributes={attributes}>Open</Button>}
+											</Popover.Trigger>
+											<Popover.Content>
+												<Popover.Dismissible align="center" closeAriaLabel="Close">
+													Another popover content
+												</Popover.Dismissible>
+											</Popover.Content>
+										</Popover>
+									</View>
+								</Popover.Content>
+							</Popover>)}
+					</Tooltip>
+					<Tooltip position="top" text="Hello">
+						{(tooltipAttributes) => <Button attributes={tooltipAttributes}>Just a tooltip</Button>}
+					</Tooltip>
+				</View>
+			</Example.Item>
+		</Example>),
+};

package/dist/components/Tooltip/tests/Tooltip.test.stories.d.ts

@@ -1,5 +1,3 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").TooltipProps>;
@@ -13,7 +11,3 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const defaultActive: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;