reshaped 3.8.8 → 3.9.0-canary.1

package/dist/hooks/tests/useKeyboardMode.stories.js

@@ -1,42 +0,0 @@
-import { expect, userEvent } from "storybook/test";
-import Button from "../../components/Button/index.js";
-import View from "../../components/View/index.js";
-import useKeyboardMode from "../useKeyboardMode.js";
-export default {
-    title: "Hooks/useKeyboardMode",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const Component = () => {
-    const { activate, deactivate, disable, enable } = useKeyboardMode();
-    return (<View direction="row" gap={2}>
-			<Button onClick={activate}>Activate</Button>
-			<Button onClick={deactivate}>Deactivate</Button>
-			<Button onClick={disable}>Disable</Button>
-			<Button onClick={enable}>Enable</Button>
-		</View>);
-};
-export const base = {
-    name: "base",
-    render: () => <Component />,
-    play: async ({ canvas }) => {
-        const attribute = "data-rs-keyboard";
-        const root = document.documentElement;
-        const activateTrigger = canvas.getAllByRole("button")[0];
-        const deactivateTrigger = canvas.getAllByRole("button")[1];
-        const disableTrigger = canvas.getAllByRole("button")[2];
-        const enableTrigger = canvas.getAllByRole("button")[3];
-        expect(root).not.toHaveAttribute(attribute);
-        await userEvent.click(activateTrigger);
-        expect(root).toHaveAttribute(attribute);
-        await userEvent.click(deactivateTrigger);
-        expect(root).not.toHaveAttribute(attribute);
-        await userEvent.click(disableTrigger);
-        await userEvent.click(activateTrigger);
-        expect(root).not.toHaveAttribute(attribute);
-        await userEvent.click(enableTrigger);
-        await userEvent.click(activateTrigger);
-        expect(root).toHaveAttribute(attribute);
-    },
-};

package/dist/hooks/tests/useOnClickOutside.stories.d.ts

@@ -1,23 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { type Mock } from "storybook/test";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj<{
-    handleOutsideClick: Mock;
-}>;
-export declare const refs: StoryObj<{
-    handleOutsideClick: Mock;
-}>;
-export declare const disabled: StoryObj<{
-    handleOutsideClick: Mock;
-}>;
-export declare const deps: StoryObj<{
-    handleOutsideClick: Mock;
-}>;

package/dist/hooks/tests/useOnClickOutside.stories.js

@@ -1,111 +0,0 @@
-import React from "react";
-import { expect, fn, userEvent } from "storybook/test";
-import Button from "../../components/Button/index.js";
-import useOnClickOutside from "../useOnClickOutside.js";
-import View from "../../components/View/index.js";
-export default {
-    title: "Hooks/useOnClickOutside",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const base = {
-    name: "base",
-    args: {
-        handleOutsideClick: fn(),
-    },
-    render: (args) => {
-        const ref = React.useRef(null);
-        const [target, setTarget] = React.useState(null);
-        useOnClickOutside([ref], () => {
-            args.handleOutsideClick();
-            setTarget("outside");
-        });
-        return (<View gap={4} align="start">
-				<Button attributes={{ ref }} onClick={() => setTarget("inside")}>
-					Trigger
-				</Button>
-				{target && `Clicked ${target}`}
-			</View>);
-    },
-    play: async ({ canvas, args }) => {
-        const button = canvas.getAllByRole("button")[0];
-        await userEvent.click(button);
-        expect(args.handleOutsideClick).not.toHaveBeenCalled();
-        await userEvent.click(document.body);
-        expect(args.handleOutsideClick).toHaveBeenCalledTimes(1);
-        expect(args.handleOutsideClick).toHaveBeenCalledWith();
-    },
-};
-export const refs = {
-    name: "multiple refs",
-    args: {
-        handleOutsideClick: fn(),
-    },
-    render: (args) => {
-        const ref = React.useRef(null);
-        const ref2 = React.useRef(null);
-        useOnClickOutside([ref, ref2], () => {
-            args.handleOutsideClick();
-        });
-        return (<View gap={4} align="start">
-				<Button attributes={{ ref }}>Trigger</Button>
-				<Button attributes={{ ref: ref2 }}>Trigger 2</Button>
-			</View>);
-    },
-    play: async ({ canvas, args }) => {
-        const [button, button2] = canvas.getAllByRole("button");
-        await userEvent.click(button);
-        expect(args.handleOutsideClick).not.toHaveBeenCalled();
-        await userEvent.click(button2);
-        expect(args.handleOutsideClick).not.toHaveBeenCalled();
-        await userEvent.click(document.body);
-        expect(args.handleOutsideClick).toHaveBeenCalledTimes(1);
-        expect(args.handleOutsideClick).toHaveBeenCalledWith();
-    },
-};
-export const disabled = {
-    name: "disabled",
-    args: {
-        handleOutsideClick: fn(),
-    },
-    render: (args) => {
-        const ref = React.useRef(null);
-        useOnClickOutside([ref], () => {
-            args.handleOutsideClick();
-        }, {
-            disabled: true,
-        });
-        return (<View gap={4} align="start">
-				<Button attributes={{ ref }}>Trigger</Button>
-			</View>);
-    },
-    play: async ({ args }) => {
-        await userEvent.click(document.body);
-        expect(args.handleOutsideClick).not.toHaveBeenCalled();
-    },
-};
-export const deps = {
-    name: "test: handler uses latest state",
-    args: {
-        handleOutsideClick: fn(),
-    },
-    render: (args) => {
-        const ref = React.useRef(null);
-        const [count, setCount] = React.useState(0);
-        useOnClickOutside([ref], () => {
-            args.handleOutsideClick({ count });
-        });
-        return (<Button attributes={{ ref }} onClick={() => setCount((prev) => prev + 1)}>
-				Trigger
-			</Button>);
-    },
-    play: async ({ canvas, args }) => {
-        const button = canvas.getAllByRole("button")[0];
-        await userEvent.click(document.body);
-        expect(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 0 });
-        await userEvent.click(button);
-        await userEvent.click(document.body);
-        expect(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 1 });
-    },
-};

package/dist/hooks/tests/useRTL.stories.d.ts

@@ -1,11 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const setRTL: StoryObj;

package/dist/hooks/tests/useRTL.stories.js

@@ -1,23 +0,0 @@
-import React from "react";
-import { expect } from "storybook/test";
-import useRTL from "../useRTL.js";
-export default {
-    title: "Hooks/useRTL",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const Component = () => {
-    const [rtl, setRTL] = useRTL();
-    React.useEffect(() => {
-        setRTL(true);
-    }, [setRTL]);
-    return <div>{rtl ? "RTL" : "LTR"}</div>;
-};
-export const setRTL = {
-    name: "setRTL",
-    render: () => <Component />,
-    play: async () => {
-        expect(document.documentElement).toHaveAttribute("dir", "rtl");
-    },
-};

package/dist/hooks/tests/useResponsiveClientValue.stories.d.ts

@@ -1,18 +0,0 @@
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const boolean: {
-    name: string;
-    describe: string;
-    render: () => import("react").JSX.Element;
-};

package/dist/hooks/tests/useResponsiveClientValue.stories.js

@@ -1,30 +0,0 @@
-import useResponsiveClientValue from "../useResponsiveClientValue.js";
-import View from "../../components/View/index.js";
-export default {
-    title: "Hooks/useResponsiveClientValue",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => {
-        const value = useResponsiveClientValue({
-            s: "neutral",
-            m: "critical",
-            l: "positive",
-        });
-        return <View width={25} height={25} backgroundColor={value}/>;
-    },
-};
-export const boolean = {
-    name: "boolean",
-    describe: "works with boolean properties",
-    render: () => {
-        const value = useResponsiveClientValue({
-            s: true,
-            l: false,
-        });
-        return <div>{value?.toString()}</div>;
-    },
-};

package/dist/hooks/tests/useScrollLock.stories.d.ts

@@ -1,14 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj;
-export declare const origin: StoryObj;
-export declare const container: StoryObj;
-export declare const testContainerAsync: StoryObj;

package/dist/hooks/tests/useScrollLock.stories.js

@@ -1,97 +0,0 @@
-import React from "react";
-import { expect, userEvent } from "storybook/test";
-import { Example } from "../../utilities/storybook/index.js";
-import Button from "../../components/Button/index.js";
-import useScrollLock from "../useScrollLock.js";
-import View from "../../components/View/index.js";
-export default {
-    title: "Hooks/useScrollLock",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => {
-        const { lockScroll, unlockScroll, scrollLocked } = useScrollLock();
-        return (<React.Fragment>
-				<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>
-				<div style={{ height: "150vh" }}/>
-			</React.Fragment>);
-    },
-    play: async ({ canvas }) => {
-        const button = canvas.getAllByRole("button")[0];
-        await userEvent.click(button);
-        expect(document.body).toHaveStyle("overflow: hidden");
-        await userEvent.click(button);
-        expect(document.body).not.toHaveStyle("overflow: hidden");
-    },
-};
-export const origin = {
-    name: "originRef",
-    render: () => {
-        const originRef = React.useRef(null);
-        const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ originRef });
-        return (<View overflow="auto" height={25} attributes={{ ref: originRef, "data-testid": "root" }}>
-				<View height={50} padding={4} backgroundColor="neutral-faded" borderRadius="medium">
-					<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>
-				</View>
-			</View>);
-    },
-    play: async ({ canvas }) => {
-        const button = canvas.getAllByRole("button")[0];
-        const root = canvas.getByTestId("root");
-        await userEvent.click(button);
-        expect(document.body).not.toHaveStyle("overflow: hidden");
-        expect(root).toHaveStyle("overflow: hidden");
-        await userEvent.click(button);
-        expect(root).not.toHaveStyle("overflow: hidden");
-    },
-};
-export const container = {
-    name: "containerRef",
-    render: () => {
-        const containerRef = React.useRef(null);
-        const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ containerRef });
-        return (<View height={25} attributes={{ ref: containerRef, "data-testid": "root" }}>
-				<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>
-			</View>);
-    },
-    play: async ({ canvas }) => {
-        const button = canvas.getAllByRole("button")[0];
-        const root = canvas.getByTestId("root");
-        await userEvent.click(button);
-        expect(document.body).not.toHaveStyle("overflow: hidden");
-        expect(root).toHaveStyle("overflow: hidden");
-        await userEvent.click(button);
-        expect(root).not.toHaveStyle("overflow: hidden");
-    },
-};
-export const testContainerAsync = {
-    name: "test: containerRef locked count",
-    render: () => {
-        const containerRef = React.useRef(null);
-        const globalLock = useScrollLock();
-        const scopedLock = useScrollLock({ containerRef });
-        return (<Example>
-				<Example.Item title="calling regular lock and lock with a container only requires a single unlock to remove overflow">
-					<View attributes={{ ref: containerRef }} gap={4} direction="row">
-						<Button onClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}>
-							Toggle
-						</Button>
-						<Button onClick={scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll}>
-							Toggle
-						</Button>
-					</View>
-				</Example.Item>
-			</Example>);
-    },
-    play: async ({ canvas }) => {
-        const [buttonGlobal, buttonScoped] = canvas.getAllByRole("button");
-        await userEvent.click(buttonGlobal);
-        expect(document.body).toHaveStyle("overflow: hidden");
-        await userEvent.click(buttonScoped);
-        await userEvent.click(buttonGlobal);
-        expect(document.body).not.toHaveStyle("overflow: hidden");
-    },
-};

package/dist/hooks/tests/useToggle.stories.d.ts

@@ -1,13 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const toggle: StoryObj;
-export declare const activate: StoryObj;
-export declare const deactivate: StoryObj;

package/dist/hooks/tests/useToggle.stories.js

@@ -1,59 +0,0 @@
-import React from "react";
-import { expect, userEvent } from "storybook/test";
-import Button from "../../components/Button/index.js";
-import useToggle from "../useToggle.js";
-export default {
-    title: "Hooks/useToggle",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const toggle = {
-    name: "toggle",
-    render: () => {
-        const { toggle, active } = useToggle();
-        return (<Button onClick={() => toggle()} attributes={{ "data-active": active }}>
-				{active ? "Deactivate" : "Activate"}
-			</Button>);
-    },
-    play: async ({ canvas }) => {
-        const button = canvas.getAllByRole("button")[0];
-        expect(button.getAttribute("data-active")).toBe("false");
-        await userEvent.click(button);
-        expect(button.getAttribute("data-active")).toBe("true");
-        await userEvent.click(button);
-        expect(button.getAttribute("data-active")).toBe("false");
-    },
-};
-export const activate = {
-    name: "activate",
-    render: () => {
-        const { activate, active } = useToggle();
-        return (<React.Fragment>
-				<Button onClick={activate} attributes={{ "data-active": active }}>
-					Activate
-				</Button>
-			</React.Fragment>);
-    },
-    play: async ({ canvas }) => {
-        const button = canvas.getAllByRole("button")[0];
-        expect(button.getAttribute("data-active")).toBe("false");
-        await userEvent.click(button);
-        expect(button.getAttribute("data-active")).toBe("true");
-    },
-};
-export const deactivate = {
-    name: "deactivate",
-    render: () => {
-        const { deactivate, active } = useToggle(true);
-        return (<Button onClick={deactivate} attributes={{ "data-active": active }}>
-				Deactivate
-			</Button>);
-    },
-    play: async ({ canvas }) => {
-        const button = canvas.getAllByRole("button")[0];
-        expect(button.getAttribute("data-active")).toBe("true");
-        await userEvent.click(button);
-        expect(button.getAttribute("data-active")).toBe("false");
-    },
-};

package/dist/tests/ShadowDOM.stories.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const behavior: () => React.JSX.Element;

package/dist/tests/ShadowDOM.stories.js

@@ -1,110 +0,0 @@
-import React, { useEffect, useState, useRef, forwardRef } from "react";
-import root from "react-shadow";
-import { Example } from "../utilities/storybook/index.js";
-import Autocomplete from "../components/Autocomplete/index.js";
-import View from "../components/View/index.js";
-import DropdownMenu from "../components/DropdownMenu/index.js";
-import Reshaped from "../components/Reshaped/index.js";
-import Select from "../components/Select/index.js";
-import Button from "../components/Button/index.js";
-import Tooltip from "../components/Tooltip/index.js";
-export default {
-    title: "Internal/ShadowDOM",
-};
-const getStylesData = () => {
-    const sourceStylesContainer = document.head;
-    return Array.from(sourceStylesContainer.children).filter((x) => x instanceof HTMLStyleElement);
-};
-// Create a component to render inside the Shadow DOM
-const ShadowDiv = forwardRef((props, ref) => {
-    const shadowRef = useRef(null);
-    // Load styles
-    useEffect(() => {
-        if (!shadowRef?.current)
-            return;
-        // Add styles to the shadow DOM
-        // const shadowEl = shadowRef?.current.shadowRoot;
-        const shadowEl = shadowRef?.current.shadowRoot;
-        if (!shadowEl)
-            return;
-        const sourceStylesContainer = document.head;
-        const observer = new MutationObserver(getStylesData);
-        observer.observe(sourceStylesContainer, {
-            characterData: true,
-            childList: true,
-            subtree: true,
-        });
-        let styleBlock = shadowEl.getElementById("custom-outer-style");
-        if (!styleBlock) {
-            styleBlock = document.createElement("span");
-            styleBlock.id = "custom-outer-style";
-            shadowEl.appendChild(styleBlock);
-        }
-        else {
-            styleBlock.innerHTML = "";
-        }
-        styleBlock.append(...getStylesData() // finds all <style> tags containing your web component ID
-            .map((x) => x.cloneNode(true)) // copies styles into the current instance of your web component. You might need to have multiple instances, so all of them need to track the styles.
-        );
-        return () => observer.disconnect();
-    }, []);
-    return (<Reshaped>
-			<root.div className="quote" ref={shadowRef}>
-				<div ref={ref}>
-					{/*
-            Adding padding here since otherwise mouseenter won't trigger on contents
-            when mouse is switching from outside the shadow dom
-        */}
-					<View padding={4}>{props.children}</View>
-				</div>
-			</root.div>
-		</Reshaped>);
-});
-// Main Component
-const Component = () => {
-    const [valueAutoShadow, setValueAutoShadow] = useState("");
-    const [valueDropdownShadow, setValueDropdownShadow] = useState("");
-    const optionsAuto = ["Pizza", "Pie", "Ice-cream"];
-    const optionsDropdown = ["Turtle", "Cat", "Long-necked giraffe"];
-    const handleChangeAutoShadow = (args) => {
-        console.log("Autocomlete shadow value=", args);
-        setValueAutoShadow(args.value);
-    };
-    const handleChangeDropdownShadow = (val) => {
-        console.log("Dropdown shadow value=", val);
-        setValueDropdownShadow(val);
-    };
-    return (<View paddingBottom={50}>
-			<ShadowDiv>
-				<View gap={4} direction="row" wrap={false}>
-					<Autocomplete name="fruit-shadow" placeholder="Pick your food" value={valueAutoShadow} onChange={handleChangeAutoShadow} inputAttributes={{ "aria-label": "Label" }}>
-						{optionsAuto.map((option) => (<Autocomplete.Item key={option} value={option} onClick={() => handleChangeAutoShadow({ value: option, name: "fruit-auto" })}>
-								{option}
-							</Autocomplete.Item>))}
-					</Autocomplete>
-
-					<DropdownMenu>
-						<DropdownMenu.Trigger>
-							{(attributes) => (<Select placeholder="Pick your animal" name="font" inputAttributes={attributes}>
-									{valueDropdownShadow}
-								</Select>)}
-						</DropdownMenu.Trigger>
-						<DropdownMenu.Content>
-							{optionsDropdown.map((option) => (<DropdownMenu.Item onClick={() => handleChangeDropdownShadow(option)} key={option}>
-									{option}
-								</DropdownMenu.Item>))}
-						</DropdownMenu.Content>
-					</DropdownMenu>
-
-					<Tooltip text="Tooltip for button">
-						{(attributes) => <Button attributes={attributes}>Hover me</Button>}
-					</Tooltip>
-				</View>
-			</ShadowDiv>
-		</View>);
-};
-export const behavior = () => (<Example>
-		<Example.Item title="base">
-			<Component />
-		</Example.Item>
-	</Example>);

package/dist/tests/themes.stories.d.ts

@@ -1,16 +0,0 @@
-declare const _default: {
-    title: string;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        a11y: {
-            disable: boolean;
-        };
-    };
-};
-export default _default;
-export declare const test: () => import("react").JSX.Element;
-export declare const base: () => import("react").JSX.Element;
-export declare const generation: () => import("react").JSX.Element;
-export declare const onColors: () => import("react").JSX.Element;