reshaped 3.8.0-canary.2 → 3.8.0-canary.20

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

@@ -1,9 +1,13 @@
 import type { ButtonProps } from "../Button";
-type BaseProps = Omit<ButtonProps, "variant" | "higlighted"> & {
+type BaseProps = Omit<ButtonProps, "variant" | "highlighted"> & {
     /** Component render variant
      * @default "outline"
      */
     variant?: ButtonProps["variant"];
+    /** Component color scheme when selected
+     * @default "neutral"
+     */
+    selectedColor?: ButtonProps["color"];
     /** Value of the toggle button, enables controlled mode for the ToggleButtonGroup */
     value?: string;
     /** Callback when the toggle button value changes */

package/dist/components/ToggleButton/ToggleButtonControlled.js

@@ -3,9 +3,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Button from "../Button/index.js";
 import { useToggleButtonGroup } from "../ToggleButtonGroup/index.js";
 const ToggleButtonControlled = (props) => {
-    const { variant = "outline", value, onChange, onClick, ...buttonProps } = props;
+    const { variant = "outline", selectedColor, value, onChange, onClick, color: buttonColor, ...buttonProps } = props;
     const toggleButtonGroup = useToggleButtonGroup();
     const checked = (value ? toggleButtonGroup?.value?.includes(value) : undefined) ?? props.checked;
+    const color = (checked && (selectedColor || toggleButtonGroup?.selectedColor)) ||
+        buttonColor ||
+        toggleButtonGroup?.color;
     const handleClick = (event) => {
         const changeArgs = { checked: !checked, value: value ?? "", event };
         onClick?.(event);
@@ -16,7 +19,11 @@ const ToggleButtonControlled = (props) => {
             onChange?.(changeArgs);
         }
     };
-    return (_jsx(Button, { ...buttonProps, variant: variant, onClick: handleClick, highlighted: checked, attributes: { ...buttonProps.attributes, "aria-pressed": checked } }));
+    return (_jsx(Button, { ...buttonProps, color: color, variant: variant, onClick: handleClick, highlighted: checked, attributes: {
+            ...buttonProps.attributes,
+            "aria-pressed": checked,
+            tabIndex: toggleButtonGroup?.value?.length ? (checked ? 0 : -1) : undefined,
+        } }));
 };
 ToggleButtonControlled.displayName = "ToggleButtonControlled";
 export default ToggleButtonControlled;

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

@@ -14,6 +14,10 @@ export declare const variant: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const selectedColor: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
 export declare const onChange: StoryObj<{
     handleUncontrolledChange: Mock;
     handleControlledChange: Mock;

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

@@ -21,6 +21,16 @@ export const variant = {
 			</Example.Item>
 		</Example>),
 };
+export const selectedColor = {
+    name: "selectedColor",
+    render: () => (<Example>
+			<Example.Item title="selectedColor: primary">
+				<ToggleButton selectedColor="primary" defaultChecked>
+					Button
+				</ToggleButton>
+			</Example.Item>
+		</Example>),
+};
 export const onChange = {
     name: "checked, defaultChecked, onChange",
     args: {

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

@@ -6,6 +6,14 @@ type BaseProps = {
      * @default "single"
      */
     selectionMode?: "single" | "multiple";
+    /** Component color scheme applied to each button
+     * @default "neutral"
+     */
+    color?: ToggleButtonProps["color"];
+    /** Component color scheme for the selected button
+     * @default "neutral"
+     */
+    selectedColor?: ToggleButtonProps["selectedColor"];
     /** Callback when the toggle button group value changes */
     onChange?: (args: {
         value: string[];
@@ -27,6 +35,8 @@ export type UncontrolledProps = BaseProps & {
 export type Props = ControlledProps | UncontrolledProps;
 export type Context = {
     onChange: ToggleButtonProps["onChange"];
+    selectedColor?: ToggleButtonProps["selectedColor"];
+    color?: ToggleButtonProps["color"];
     value?: string[];
 };
 export {};

package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js

@@ -2,33 +2,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import Button from "../Button/index.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
 import Context from "./ToggleButtonGroup.context.js";
-import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, } from "../../utilities/a11y/index.js";
-import ToggleButton from "../ToggleButton/index.js";
-const ToggleButtonGroupItem = (props) => {
-    const { focusable, onFocus, ...buttonProps } = props;
-    return (_jsx(ToggleButton, { ...buttonProps, attributes: {
-            ...buttonProps.attributes,
-            tabIndex: focusable ? 0 : -1,
-            onFocus,
-        } }));
-};
+import useKeyboardArrowNavigation from "../../hooks/useKeyboardArrowNavigation.js";
 const ToggleButtonGroupControlled = (props) => {
-    const { onChange, value, selectionMode = "single", children, ...buttonGroupProps } = props;
-    const focusableIndexRef = React.useRef(0);
-    let toggleButtonIndex = 0;
-    const renderedChildren = React.Children.map(children, (child) => {
-        if (!React.isValidElement(child) || child.type !== ToggleButton || !child.props) {
-            return child;
-        }
-        const boundIndex = toggleButtonIndex;
-        toggleButtonIndex += 1;
-        const focusable = focusableIndexRef.current === boundIndex;
-        return (_jsx(ToggleButtonGroupItem, { ...child.props, focusable: focusable, onFocus: () => {
-                focusableIndexRef.current = boundIndex;
-            } }));
-    });
+    const { onChange, value, selectionMode = "single", children, color, selectedColor, ...buttonGroupProps } = props;
+    const rootRef = React.useRef(null);
     const handleChange = (args) => {
         const { event, value: itemValue, checked } = args;
         if (!itemValue)
@@ -45,23 +23,10 @@ const ToggleButtonGroupControlled = (props) => {
         if (onChange)
             onChange({ value: nextValue, event });
     };
-    const { ref: hotkeysRef } = useHotkeys({
-        "ArrowLeft, ArrowUp": () => {
-            focusPreviousElement(hotkeysRef.current);
-        },
-        "ArrowRight, ArrowDown": () => {
-            focusNextElement(hotkeysRef.current);
-        },
-        Home: () => {
-            focusFirstElement(hotkeysRef.current);
-        },
-        End: () => {
-            focusLastElement(hotkeysRef.current);
-        },
-    }, [], {
-        preventDefault: true,
+    useKeyboardArrowNavigation({
+        ref: rootRef,
     });
-    return (_jsx(Context.Provider, { value: { onChange: handleChange, value }, children: _jsx(Button.Group, { ...buttonGroupProps, attributes: { ref: hotkeysRef, ...buttonGroupProps?.attributes }, children: renderedChildren }) }));
+    return (_jsx(Context.Provider, { value: { onChange: handleChange, value, selectedColor, color }, children: _jsx(Button.Group, { ...buttonGroupProps, attributes: { ref: rootRef, ...buttonGroupProps?.attributes }, children: children }) }));
 };
 ToggleButtonGroupControlled.displayName = "ToggleButtonGroupControlled";
 export default ToggleButtonGroupControlled;

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

@@ -19,4 +19,5 @@ export declare const multiple: StoryObj<{
     handleUncontrolledChange: Mock;
     handleControlledChange: Mock;
 }>;
+export declare const selectedColor: StoryObj;
 export declare const className: StoryObj;

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

@@ -113,6 +113,23 @@ export const multiple = {
         });
     },
 };
+export const selectedColor = {
+    name: "color,selectedColor",
+    render: () => (<Example>
+			<Example.Item title="selectedColor: primary">
+				<ToggleButtonGroup selectedColor="primary" defaultValue={["2"]}>
+					<ToggleButton value="1">Button</ToggleButton>
+					<ToggleButton value="2">Button</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+			<Example.Item title="color: primary, selectedColor: critical">
+				<ToggleButtonGroup color="primary" selectedColor="critical" defaultValue={["2"]}>
+					<ToggleButton value="1">Button</ToggleButton>
+					<ToggleButton value="2">Button</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+		</Example>),
+};
 export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">

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