reshaped 3.8.0-canary.1 → 3.8.0-canary.10

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

@@ -1,3 +1,5 @@
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").CheckboxGroupProps>;
@@ -8,5 +10,10 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const selection: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;

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

@@ -1,7 +1,7 @@
-import { Example } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import CheckboxGroup from "../index.js";
 import Checkbox from "../../Checkbox/index.js";
+import { expect, fn, userEvent } from "storybook/test";
 export default {
     title: "Components/CheckboxGroup",
     component: CheckboxGroup,
@@ -11,41 +11,73 @@ export default {
         },
     },
 };
-export const selection = () => (<Example>
-		<Example.Item title="unselected">
-			<CheckboxGroup name="animal">
-				<View gap={3}>
-					<Checkbox value="dog">Checkbox 1</Checkbox>
-					<Checkbox value="cat">Checkbox 2</Checkbox>
-				</View>
-			</CheckboxGroup>
-		</Example.Item>
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<View gap={2}>
+			<CheckboxGroup name="test-name" value={["1"]} onChange={args.handleChange}>
+				{/* checked should be ignored */}
+				<Checkbox value="1" checked={false}>
+					Content
+				</Checkbox>
 
-		<Example.Item title="checked, uncontrolled">
-			<CheckboxGroup name="animal" defaultValue={["dog"]}>
-				<View gap={3}>
-					<Checkbox value="dog">Checkbox 1</Checkbox>
-					<Checkbox value="cat">Checkbox 2</Checkbox>
-				</View>
+				<Checkbox value="2">Content 2</Checkbox>
 			</CheckboxGroup>
-		</Example.Item>
+		</View>),
+    play: async ({ canvas, args }) => {
+        const inputs = canvas.getAllByRole("checkbox");
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: ["1", "2"],
+            event: expect.objectContaining({ target: inputs[1] }),
+        });
+        // Still checked because it's controlled
+        expect(inputs[0]).toBeChecked();
+        expect(inputs[1]).not.toBeChecked();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<View gap={2}>
+			<CheckboxGroup name="test-name" defaultValue={["1"]} onChange={args.handleChange}>
+				{/* checked should be ignored */}
+				<Checkbox value="1" checked={false}>
+					Content
+				</Checkbox>
 
-		<Example.Item title="checked, controlled">
-			<CheckboxGroup name="animal" value={["dog"]}>
-				<View gap={3}>
-					<Checkbox value="dog">Checkbox 1</Checkbox>
-					<Checkbox value="cat">Checkbox 2</Checkbox>
-				</View>
+				<Checkbox value="2">Content 2</Checkbox>
 			</CheckboxGroup>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled">
-			<CheckboxGroup name="animal" disabled>
-				<View gap={3}>
-					<Checkbox value="dog">Dog</Checkbox>
-					<Checkbox value="cat">Cat</Checkbox>
-				</View>
-			</CheckboxGroup>
-		</Example.Item>
-	</Example>);
+		</View>),
+    play: async ({ canvas, args }) => {
+        const inputs = canvas.getAllByRole("checkbox");
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: ["1", "2"],
+            event: expect.objectContaining({ target: inputs[1] }),
+        });
+        expect(inputs[0]).toBeChecked();
+        expect(inputs[1]).toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<CheckboxGroup name="test-name" disabled>
+			<Checkbox value="test-value">Item 1</Checkbox>
+			<Checkbox value="test-value-2">Item 2</Checkbox>
+		</CheckboxGroup>),
+    play: async ({ canvas }) => {
+        const [input] = canvas.getAllByRole("checkbox");
+        expect(input).toBeDisabled();
+    },
+};

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").ContainerProps>;
@@ -20,3 +21,4 @@ export declare const flex: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const className: StoryObj;

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

@@ -1,5 +1,6 @@
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Container from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Utility components/Container",
     component: Container,
@@ -59,3 +60,16 @@ export const flex = {
 			</Example.Item>
 		</Example>),
 };
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Container className="test-classname" attributes={{ id: "test-id" }}>
+				<Placeholder />
+			</Container>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

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

@@ -1,3 +1,5 @@
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").ContextMenuProps> & {
@@ -14,4 +16,11 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
+export declare const base: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const handlers: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;

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

@@ -1,6 +1,8 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import ContextMenu from "../index.js";
 import View from "../../View/index.js";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import { sleep } from "../../../utilities/helpers.js";
 export default {
     title: "Components/ContextMenu",
     component: ContextMenu,
@@ -10,17 +12,59 @@ export default {
         },
     },
 };
-export const base = () => (<Example>
-		<Example.Item title="base">
-			<div style={{ height: 200, overflow: "auto" }}>
-				<ContextMenu>
-					<View height="400px" backgroundColor="neutral-faded" borderRadius="medium"/>
+export const base = {
+    name: "base",
+    render: () => (<Example>
+			<Example.Item title="base">
+				<div style={{ height: 200, overflow: "auto" }}>
+					<ContextMenu>
+						<View height="400px" backgroundColor="neutral-faded" borderRadius="medium"/>
 
-					<ContextMenu.Content>
-						<ContextMenu.Item>Item 1</ContextMenu.Item>
-						<ContextMenu.Item>Item 2</ContextMenu.Item>
-					</ContextMenu.Content>
-				</ContextMenu>
-			</div>
-		</Example.Item>
-	</Example>);
+						<ContextMenu.Content>
+							<ContextMenu.Item>Item 1</ContextMenu.Item>
+							<ContextMenu.Item>Item 2</ContextMenu.Item>
+						</ContextMenu.Content>
+					</ContextMenu>
+				</div>
+			</Example.Item>
+		</Example>),
+};
+export const handlers = {
+    name: "handleOpen, handleClose",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<div style={{ height: 200, overflow: "auto" }} data-testid="scroll">
+			<ContextMenu onOpen={args.handleOpen} onClose={args.handleClose}>
+				<View height="400px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ "data-testid": "root" }}/>
+
+				<ContextMenu.Content>
+					<ContextMenu.Item>Item</ContextMenu.Item>
+				</ContextMenu.Content>
+			</ContextMenu>
+		</div>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByTestId("root");
+        const scroll = canvas.getByTestId("scroll");
+        await userEvent.pointer({ keys: "[MouseRight>]", target: root });
+        expect(args.handleOpen).toHaveBeenCalledTimes(1);
+        expect(args.handleOpen).toHaveBeenCalledWith();
+        const item = canvas.getByText("Item");
+        expect(item).toBeInTheDocument();
+        // Context menu locks the scroll of the closest scrollable parent
+        expect(scroll).toHaveStyle("overflow: hidden");
+        // Wait for the open animation to finish
+        await sleep(500);
+        await userEvent.click(root);
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+        await waitFor(() => {
+            expect(item).not.toBeInTheDocument();
+            expect(scroll).not.toHaveStyle("overflow: hidden");
+        }, {
+            timeout: 1000,
+        });
+    },
+};

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

@@ -1,4 +1,5 @@
 import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     components: import("react").FC<import("./..").DismissibleProps>;
@@ -18,3 +19,7 @@ export declare const align: {
     render: () => import("react").JSX.Element;
 };
 export declare const hideCloseButton: StoryObj;
+export declare const closeAriaLabel: StoryObj<{
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -1,4 +1,4 @@
-import { within, expect } from "storybook/test";
+import { within, expect, userEvent, fn } from "storybook/test";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Dismissible from "../index.js";
 import Image from "../../Image/index.js";
@@ -66,3 +66,32 @@ export const hideCloseButton = {
         expect(button).not.toBeInTheDocument();
     },
 };
+export const closeAriaLabel = {
+    args: {
+        handleClose: fn(),
+    },
+    name: "onClose, closeAriaLabel",
+    render: (args) => (<Dismissible closeAriaLabel="Close" onClose={args.handleClose}>
+			<Placeholder />
+		</Dismissible>),
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(button).toHaveAttribute("aria-label", "Close");
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+        expect(args.handleClose).toHaveBeenCalledWith();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Dismissible closeAriaLabel="Close" onClose={() => { }} className="test-classname" attributes={{ id: "test-id" }}>
+				<Placeholder />
+			</Dismissible>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").DividerProps>;
@@ -8,6 +9,10 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const rendering: () => import("react").JSX.Element;
-export declare const vertical: () => import("react").JSX.Element;
-export declare const label: () => import("react").JSX.Element;
+export declare const rendering: StoryObj;
+export declare const vertical: StoryObj;
+export declare const label: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const className: StoryObj;

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

@@ -1,6 +1,7 @@
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import Divider from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Divider",
     component: Divider,
@@ -10,55 +11,84 @@ export default {
         },
     },
 };
-export const rendering = () => (<Example>
-		<Example.Item title="default rendering">
-			<Divider />
-		</Example.Item>
-
-		<Example.Item title={["blank rendering", "box should overlap with divider"]}>
-			<View width="40px" height="10px" backgroundColor="primary"/>
-			<Divider blank/>
-		</Example.Item>
-	</Example>);
-export const vertical = () => (<Example>
-		<Example.Item title="vertical">
-			<View gap={3} direction="row" align="stretch">
-				<Placeholder />
-				<View.Item>
-					<Divider vertical/>
-				</View.Item>
-				<Placeholder />
-			</View>
-		</Example.Item>
+export const rendering = {
+    name: "base",
+    render: () => (<Example>
+			<Example.Item title="default rendering">
+				<Divider />
+			</Example.Item>
 
-		<Example.Item title={["responsive vertical", "[s] true", "[m+]: false"]}>
-			<View gap={3} direction={{ s: "row", m: "column" }} align="stretch">
-				<Placeholder />
-				<View.Item>
-					<Divider vertical={{ s: true, m: false }}/>
-				</View.Item>
-				<Placeholder />
-			</View>
-		</Example.Item>
-	</Example>);
-export const label = () => {
-    return (<Example>
-			<Example.Item title="alignment">
-				<View gap={4}>
-					<Divider>Centered label</Divider>
-					<Divider contentPosition="start">Start label</Divider>
-					<Divider contentPosition="end">End label</Divider>
+			<Example.Item title={["blank rendering", "box should overlap with divider"]}>
+				<View width="40px" height="10px" backgroundColor="primary"/>
+				<Divider blank/>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const [el] = canvas.getAllByRole("separator");
+        expect(el).toHaveAttribute("aria-orientation", "horizontal");
+    },
+};
+export const vertical = {
+    name: "vertical",
+    render: () => (<Example>
+			<Example.Item title="vertical">
+				<View gap={3} direction="row" align="stretch">
+					<Placeholder />
+					<View.Item>
+						<Divider vertical/>
+					</View.Item>
+					<Placeholder />
 				</View>
 			</Example.Item>
 
-			<Example.Item title="responsive">
-				<View gap={3} direction={{ s: "column", m: "row" }} align="stretch">
+			<Example.Item title={["responsive vertical", "[s] true", "[m+]: false"]}>
+				<View gap={3} direction={{ s: "row", m: "column" }} align="stretch">
 					<Placeholder />
 					<View.Item>
-						<Divider vertical={{ s: false, m: true }}>or pick second option</Divider>
+						<Divider vertical={{ s: true, m: false }}/>
 					</View.Item>
 					<Placeholder />
 				</View>
 			</Example.Item>
-		</Example>);
+		</Example>),
+    play: async ({ canvas }) => {
+        const [el, elResponsive] = canvas.getAllByRole("separator");
+        expect(el).toHaveAttribute("aria-orientation", "vertical");
+        expect(elResponsive).not.toHaveAttribute("aria-orientation");
+    },
+};
+export const label = {
+    name: "children, contentPosition",
+    render: () => {
+        return (<Example>
+				<Example.Item title="alignment">
+					<View gap={4}>
+						<Divider>Centered label</Divider>
+						<Divider contentPosition="start">Start label</Divider>
+						<Divider contentPosition="end">End label</Divider>
+					</View>
+				</Example.Item>
+
+				<Example.Item title="responsive">
+					<View gap={3} direction={{ s: "column", m: "row" }} align="stretch">
+						<Placeholder />
+						<View.Item>
+							<Divider vertical={{ s: false, m: true }}>or pick second option</Divider>
+						</View.Item>
+						<Placeholder />
+					</View>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Divider className="test-classname" attributes={{ id: "test-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
 };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -14,8 +14,8 @@ import s from "./DropdownMenu.module.css";
 const DropdownMenuSubContext = React.createContext(null);
 const DropdownMenuSubTriggerContext = React.createContext(false);
 const DropdownMenu = (props) => {
-    const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", ...popoverProps } = props;
-    return (_jsx(Popover, { ...popoverProps, position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, children: children }));
+    const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", borderRadius = "small", ...popoverProps } = props;
+    return (_jsx(Popover, { ...popoverProps, position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, borderRadius: borderRadius, disableHideAnimation: true, children: children }));
 };
 const DropdownMenuContent = (props) => {
     const { children, attributes, className } = props;
@@ -62,9 +62,9 @@ const DropdownMenuItem = (props) => {
     return (_jsx(MenuItem, { ...props, roundedCorners: true, className: [s.item, props.className], attributes: { role: "menuitem", ...props.attributes }, onClick: handleClick }));
 };
 const DropdownMenuSubMenu = (props) => {
-    const { children } = props;
+    const { children, position = "end-top", contentGap = 0.5, ...dropdownMenuProps } = props;
     const dropdownMenuRef = React.useRef(null);
-    return (_jsx(DropdownMenuSubContext.Provider, { value: dropdownMenuRef, children: _jsx(DropdownMenu, { triggerType: "hover", position: "end-top", contentGap: 0.5, instanceRef: dropdownMenuRef, children: children }) }));
+    return (_jsx(DropdownMenuSubContext.Provider, { value: dropdownMenuRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, triggerType: "hover", position: position, contentGap: contentGap, instanceRef: dropdownMenuRef, children: children }) }));
 };
 const DropdownMenuSubTriggerItem = (props) => {
     const { children, attributes, ...menuItemProps } = props;

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

@@ -3,7 +3,7 @@ import type { PopoverProps, PopoverInstance } from "../Popover";
 import type { MenuItemProps } from "../MenuItem";
 import type { FlyoutContentProps } from "../Flyout";
 export type Instance = PopoverInstance;
-export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "originCoordinates"> & {
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu"> | false;
 };
@@ -16,5 +16,5 @@ export type SectionProps = {
 export type SubMenuProps = {
     /** Node for inserting children */
     children: React.ReactNode;
-};
+} & Pick<PopoverProps, "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "contentGap" | "contentShift" | "width" | "containerRef">;
 export type SubTriggerProps = Omit<MenuItemProps, "endSlot" | "roundedCorners">;

package/dist/components/DropdownMenu/tests/DropdownMenu.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("./..").DropdownMenuProps> & {
@@ -16,9 +18,36 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const position: () => import("react").JSX.Element;
-export declare const sections: () => import("react").JSX.Element;
-export declare const submenu: () => import("react").JSX.Element;
-export declare const state: () => import("react").JSX.Element;
-export declare const testScroll: () => import("react").JSX.Element;
-export declare const testThemeSwitching: () => import("react").JSX.Element;
+export declare const position: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const sections: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const submenu: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const defaultActive: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const active: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const activeFalse: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;
+export declare const testScroll: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const testThemeSwitching: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};