reshaped 3.3.13 → 3.4.0

package/dist/components/Autocomplete/Autocomplete.js

@@ -9,22 +9,47 @@ import useHotkeys from "../../hooks/useHotkeys.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {
-    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, ...textFieldProps } = props;
+    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, active, onOpen, onClose, ...textFieldProps } = props;
     const onBackspaceRef = useHandlerRef(onBackspace);
     const internalInputRef = React.useRef(null);
     const inputAttributesRef = textFieldProps.inputAttributes?.ref;
     const inputRef = inputAttributesRef && typeof inputAttributesRef !== "string" && "current" in inputAttributesRef
         ? inputAttributesRef
         : internalInputRef;
-    const [active, setActive] = React.useState(false);
+    const [internalActive, setInternalActive] = React.useState(false);
     const hasChildren = !!React.Children.toArray(children).filter(Boolean).length;
     const lockedRef = React.useRef(false);
+    const onOpenRef = useHandlerRef(onOpen);
+    const onCloseRef = useHandlerRef(onClose);
+    const isDropdownActive = hasChildren && (active ?? internalActive);
     const handleOpen = React.useCallback(() => {
         if (lockedRef.current)
             return;
-        setActive(true);
-    }, []);
-    const handleClose = () => setActive(false);
+        setInternalActive(true);
+        onOpenRef.current?.();
+    }, [onOpenRef]);
+    const handleClose = (args) => {
+        setInternalActive(false);
+        onCloseRef.current?.(args);
+    };
+    const handleItemClick = (args) => {
+        onChange?.({ value: args.value, name });
+        onItemSelect?.(args);
+        // Prevent dropdown from re-opening when clicked on item with mouse
+        // and focus moves to the item and back to the input
+        lockedRef.current = true;
+        setTimeout(() => {
+            lockedRef.current = false;
+        }, 100);
+    };
+    const handleChange = (args) => {
+        onChange?.(args);
+        handleOpen();
+    };
+    const handleInput = (e) => {
+        onInput?.({ value: e.currentTarget.value, name, event: e });
+        textFieldProps.inputAttributes?.onInput?.(e);
+    };
     useHotkeys({
         [keys.BACKSPACE]: () => {
             onBackspaceRef.current?.();
@@ -42,26 +67,9 @@ const Autocomplete = (props) => {
             el?.click();
         },
     }, [handleOpen], { ref: inputRef, preventDefault: true });
-    const handleChange = (args) => {
-        onChange?.(args);
-        handleOpen();
-    };
-    const handleItemClick = (args) => {
-        onChange?.({ value: args.value, name });
-        onItemSelect?.(args);
-        // Prevent dropdown from re-opening when clicked on item with mouse
-        // and focus moves to the item and back to the input
-        lockedRef.current = true;
-        setTimeout(() => (lockedRef.current = false), 100);
-    };
-    const handleInput = (e) => {
-        onInput?.({ value: e.currentTarget.value, name, event: e });
-        textFieldProps.inputAttributes?.onInput?.(e);
-    };
-    return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: hasChildren && active, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: hasChildren && active, 
-                        // Ignoring the type check since TS can't infer the correct html element type
-                        attributes: {
+    return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
                             ...textFieldProps.attributes,
+                            // Ignoring the type check since TS can't infer the correct html element type
                             ref: ref,
                             onClick: attributes.onFocus,
                         }, inputAttributes: {
@@ -70,6 +78,8 @@ const Autocomplete = (props) => {
                             onFocus: (e) => {
                                 attributes.onFocus?.();
                                 textFieldProps.onFocus?.(e);
+                                if (!lockedRef.current)
+                                    inputRef.current?.select();
                             },
                             onInput: handleInput,
                             onClick: attributes.onFocus,

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

@@ -5,7 +5,7 @@ type SelectArgs = {
     value: string;
     data?: unknown;
 };
-export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef"> & {
+export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef" | "active" | "onOpen" | "onClose"> & {
     onInput?: TextFieldProps["onChange"];
     onItemSelect?: (args: SelectArgs) => void;
     onBackspace?: () => void;

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

@@ -44,6 +44,7 @@ export const multiselect = {
     name: "multiselect",
     render: () => {
         const inputRef = React.useRef(null);
+        const [active, setActive] = React.useState(false);
         const [values, setValues] = React.useState(["foo", "bar"]);
         const [query, setQuery] = React.useState("");
         const [customValueQuery, setCustomValueQuery] = React.useState("");
@@ -70,7 +71,13 @@ export const multiselect = {
 				<Autocomplete name="fruit" value={query} placeholder="Pick your food" startSlot={valuesNode} inputAttributes={{ ref: inputRef }} onBackspace={() => {
                 if (!query.length)
                     handleDismiss(values[values.length - 1]);
-            }} multiline onChange={(args) => setQuery(args.value)} onItemSelect={(args) => {
+            }} onOpen={() => {
+                setActive(true);
+            }} onClose={(args) => {
+                if (args.reason === "item-selection")
+                    return;
+                setActive(false);
+            }} active={active} multiline onChange={(args) => setQuery(args.value)} onItemSelect={(args) => {
                 setCustomValueQuery(query);
                 setQuery("");
                 if (args.value === "_custom") {

package/dist/components/Carousel/Carousel.js

@@ -9,7 +9,7 @@ import CarouselControl from "./CarouselControl.js";
 import * as T from "./Carousel.types.js";
 import s from "./Carousel.module.css";
 const Carousel = (props) => {
-    const { children, gap = 3, visibleItems, bleed, navigationDisplay, onChange, instanceRef, className, attributes, } = props;
+    const { children, gap = 3, visibleItems, bleed, navigationDisplay, onChange, onScroll, instanceRef, className, attributes, } = props;
     const currentIndexRef = React.useRef(0);
     const itemRefs = React.useRef([]);
     const [mounted, setMounted] = React.useState(false);
@@ -34,6 +34,7 @@ const Carousel = (props) => {
         const el = event.target;
         const firstVisibleIndex = getFirstVisibleIndex();
         setScrollPosition(el.scrollLeft);
+        onScroll?.(event);
         if (currentIndexRef.current !== firstVisibleIndex)
             onChange?.({ index: firstVisibleIndex });
         currentIndexRef.current = firstVisibleIndex;

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

@@ -27,6 +27,7 @@ export type Props = {
     onChange?: (args: {
         index: number;
     }) => void;
+    onScroll?: (e: React.UIEvent<HTMLUListElement>) => void;
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };

package/dist/components/ContextMenu/ContextMenu.js

@@ -27,10 +27,10 @@ const ContextMenu = (props) => {
     React.useEffect(() => {
         return () => unlockScroll();
     }, [unlockScroll]);
-    return (_jsx("div", { className: s.root, ref: originRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, position: position, originCoordinates: coordinates, active: !!coordinates, onClose: () => {
+    return (_jsx("div", { className: s.root, ref: originRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, position: position, originCoordinates: coordinates, active: !!coordinates, onClose: (args) => {
                 setCoordinates(undefined);
                 unlockScroll();
-                onClose?.();
+                onClose?.(args);
             } }) }));
 };
 ContextMenu.Content = DropdownMenu.Content;

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

@@ -42,7 +42,7 @@ export const handlers = {
         await sleep(500);
         await userEvent.click(root);
         expect(args.handleClose).toHaveBeenCalledTimes(1);
-        expect(args.handleClose).toHaveBeenCalledWith();
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
         await waitFor(() => {
             expect(item).not.toBeInTheDocument();
             expect(scroll).not.toHaveStyle("overflow: hidden");

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -40,8 +40,13 @@ const DropdownMenuItem = (props) => {
     const { onClick } = props;
     const { handleClose } = useFlyoutContext();
     const handleClick = (e) => {
+        /**
+         * Stop event propagation to make sure outside click doesn't get triggered
+         * after the content is closed
+         */
+        e.stopPropagation();
         if (handleClose)
-            handleClose({ closeParents: true });
+            handleClose({ closeParents: true, reason: "item-selection" });
         if (onClick)
             onClick(e);
     };

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

@@ -34,7 +34,7 @@ export const defaultActive = {
         await userEvent.click(document.body);
         await waitFor(() => {
             expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
             expect(item).not.toBeInTheDocument();
         });
         await userEvent.click(trigger);
@@ -66,7 +66,7 @@ export const active = {
         await userEvent.click(document.body);
         await waitFor(() => {
             expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
         });
         expect(item).toBeInTheDocument();
     },

package/dist/components/Popover/Popover.js

@@ -14,7 +14,7 @@ const Popover = (props) => {
 };
 const PopoverDismissible = (props) => {
     const { handleClose } = useFlyoutContext();
-    return _jsx(Dismissible, { ...props, onClose: handleClose });
+    return _jsx(Dismissible, { ...props, onClose: () => handleClose({}) });
 };
 Popover.Dismissible = PopoverDismissible;
 Popover.Trigger = Flyout.Trigger;

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

@@ -33,7 +33,7 @@ export const defaultActive = {
         await userEvent.click(document.body);
         await waitFor(() => {
             expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
             expect(item).not.toBeInTheDocument();
         });
         await userEvent.click(trigger);
@@ -63,7 +63,7 @@ export const active = {
         await userEvent.click(document.body);
         await waitFor(() => {
             expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
         });
         expect(item).toBeInTheDocument();
     },
@@ -116,7 +116,7 @@ export const dismissible = {
         await userEvent.click(closeButton);
         await waitFor(() => {
             expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(args.handleClose).toHaveBeenCalledWith({});
         });
     },
 };
@@ -143,7 +143,7 @@ export const triggerType = {
         await userEvent.unhover(trigger);
         await waitFor(() => {
             expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(args.handleClose).toHaveBeenCalledWith({});
         });
     },
 };

package/dist/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./ProgressIndicator.types";
+declare const ProgressIndicator: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+export default ProgressIndicator;

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import usePrevious from "../../hooks/_private/usePrevious.js";
+import s from "./ProgressIndicator.module.css";
+const MAX_RENDERED_ITEMS = 7;
+const BOUNDARY = (MAX_RENDERED_ITEMS - 1) / 2;
+const ProgressIndicator = (props) => {
+    const { total, activeIndex = 0, color = "primary", ariaLabel, className, attributes } = props;
+    const allItemsVisible = total < MAX_RENDERED_ITEMS;
+    const firstRenderedIndex = React.useMemo(() => {
+        if (allItemsVisible)
+            return 0;
+        if (activeIndex <= BOUNDARY)
+            return 0;
+        if (activeIndex >= total - 1 - BOUNDARY)
+            return total - MAX_RENDERED_ITEMS;
+        return activeIndex - BOUNDARY;
+    }, [activeIndex, allItemsVisible, total]);
+    const [startIndex, setStartIndex] = React.useState(firstRenderedIndex);
+    const previousActiveIndex = usePrevious(activeIndex);
+    const [shift, setShift] = React.useState(null);
+    const [animated, setAnimatedState] = React.useState(true);
+    const animatedRef = React.useRef(true);
+    const rootClassName = classNames(s.root, className, shift && s[`--shift-${shift}`], color && s[`--color-${color}`], animated && s["--animated"]);
+    const barAttributes = ariaLabel
+        ? {
+            "aria-label": ariaLabel,
+            role: "progressbar",
+            "aria-valuenow": activeIndex,
+            "aria-valuemin": 0,
+            "aria-valuemax": total - 1,
+        }
+        : {};
+    const setAnimated = (animated) => {
+        setAnimatedState(animated);
+        animatedRef.current = animated;
+    };
+    /**
+     * After the shift transition, disable the animation and reset the items position
+     */
+    const handleTransitionEnd = (event) => {
+        if (event.target !== event.currentTarget || event.pseudoElement)
+            return;
+        setAnimated(false);
+    };
+    React.useEffect(() => {
+        if (animated)
+            return;
+        setShift(null);
+    }, [animated]);
+    React.useEffect(() => {
+        if (shift)
+            return;
+        onNextFrame(() => setAnimated(true));
+    }, [shift, firstRenderedIndex]);
+    React.useEffect(() => {
+        if (previousActiveIndex === activeIndex)
+            return;
+        const direction = previousActiveIndex && activeIndex < previousActiveIndex ? "start" : "end";
+        const lastIndex = total - 1;
+        const endThreshold = lastIndex - BOUNDARY;
+        const isAtStartEdge = activeIndex < BOUNDARY || (direction === "end" && activeIndex === BOUNDARY);
+        const isAtEndEdge = activeIndex > endThreshold || (direction === "start" && activeIndex === endThreshold);
+        const isAtEdge = isAtStartEdge || isAtEndEdge;
+        if (allItemsVisible || isAtEdge || !animatedRef.current) {
+            setStartIndex(firstRenderedIndex);
+            return;
+        }
+        setStartIndex(firstRenderedIndex);
+        setShift(direction);
+    }, [activeIndex, firstRenderedIndex, allItemsVisible, previousActiveIndex, total]);
+    const renderItems = () => {
+        let selectionDelta = 0;
+        if (shift === "start")
+            selectionDelta = -1;
+        if (shift === "end")
+            selectionDelta = 1;
+        const itemAmount = Math.min(MAX_RENDERED_ITEMS, total);
+        const items = [];
+        const lastIndex = total - 1;
+        const activeVisibleIndex = activeIndex - startIndex + selectionDelta;
+        const rightExtra = Math.max(BOUNDARY - activeIndex, 0);
+        const leftExtra = Math.max(BOUNDARY - (lastIndex - activeIndex), 0);
+        const rightModifierIndex = activeVisibleIndex + rightExtra + 1;
+        const leftModifierIndex = activeVisibleIndex - leftExtra - 1;
+        for (let i = 0; i < itemAmount; i += 1) {
+            const isActive = i === activeVisibleIndex;
+            const isSmall = i === rightModifierIndex + 1 || i === leftModifierIndex - 1;
+            const isSmaller = i === rightModifierIndex + 2 || i === leftModifierIndex - 2;
+            const isHidden = i > rightModifierIndex + 2 || i < leftModifierIndex - 2;
+            const itemClassName = classNames(s.item, isActive && s["item--active"], !allItemsVisible && isSmall && s["item--variant-secondary"], !allItemsVisible && isSmaller && s["item--variant-tertiary"], !allItemsVisible && isHidden && s["item--variant-hidden"]);
+            items.push(_jsx("div", { className: itemClassName }, i));
+        }
+        return items;
+    };
+    return (_jsx("div", { ...attributes, className: rootClassName, children: _jsx("div", { ...barAttributes, className: s.container, onTransitionEnd: handleTransitionEnd, children: renderItems() }) }));
+};
+export default ProgressIndicator;

package/dist/components/ProgressIndicator/ProgressIndicator.module.css

@@ -0,0 +1 @@
+.root{line-height:0}.container{display:inline-flex;position:relative;vertical-align:top}.container:after,.container:before{content:"";inset-inline-start:calc(var(--rs-unit-x4) * -1);opacity:0;position:absolute}.container:after,.container:before,.item{background:var(--rs-color-background-neutral);border-radius:999px;height:var(--rs-unit-x2);width:var(--rs-unit-x2)}.item{margin-inline-start:var(--rs-unit-x2)}.item:first-child{margin-inline-start:0}.item.item--active{background:var(--rs-color-background-primary);transform:scale(1.2)}.item.item--variant-secondary{opacity:.6}.item.item--variant-tertiary{opacity:.3}.item.item--variant-hidden{opacity:0}.--color-media .container:after,.--color-media .container:before,.--color-media .item{background:var(--rs-color-white)}.--color-media .item{opacity:.6}.--color-media .item.item--active{opacity:1}.--color-media .item.item--variant-secondary{opacity:.3}.--color-media .item.item--variant-tertiary{opacity:.1}.--color-media .item.item--variant-hidden{opacity:0}.--shift-start .container,[dir=rtl] .--shift-end .container{transform:translateX(var(--rs-unit-x4))}.--shift-end .container,[dir=rtl] .--shift-start .container{transform:translateX(calc(var(--rs-unit-x4) * -1))}.--shift-end .container:after,.--shift-start .container:before{opacity:.3}.--shift-end.--color-media .container:after,.--shift-start.--color-media .container:before{opacity:.1}.--shift-start .container:before{inset-inline-end:auto;inset-inline-start:calc(var(--rs-unit-x4) * -1)}.--shift-end .container:after{inset-inline-end:calc(var(--rs-unit-x4) * -1);inset-inline-start:auto}.--animated .container,.--animated .container:after,.--animated .container:before,.--animated .item{transition:var(--rs-duration-slow) var(--rs-easing-decelerate);transition-property:transform,opacity,background-color}

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

@@ -0,0 +1,9 @@
+import type * as G from "../../types/global";
+export type Props = {
+    total: number;
+    activeIndex?: number;
+    color?: "primary" | "media";
+    ariaLabel?: string;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};

package/dist/components/ProgressIndicator/ProgressIndicator.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ProgressIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ProgressIndicator";
+export type { Props as ProgressIndicatorProps } from "./ProgressIndicator.types";

package/dist/components/ProgressIndicator/index.js

@@ -0,0 +1 @@
+export { default } from "./ProgressIndicator.js";

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").ProgressIndicatorProps) => React.JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const base: StoryObj;
+export declare const color: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const ariaLabel: StoryObj;
+export declare const className: StoryObj;

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

@@ -0,0 +1,85 @@
+import React from "react";
+import { expect } from "@storybook/test";
+import { Example } from "../../../utilities/storybook/index.js";
+import ProgressIndicator from "../index.js";
+import View from "../../View/index.js";
+import Button from "../../Button/index.js";
+import Text from "../../Text/index.js";
+import Scrim from "../../Scrim/index.js";
+export default {
+    title: "Components/ProgressIndicator",
+    component: ProgressIndicator,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/progress-indicator",
+        },
+    },
+};
+export const base = {
+    name: "base",
+    render: () => {
+        const [activeIndex, setActiveIndex] = React.useState(0);
+        const total = 10;
+        return (<Example>
+				<Example.Item title="base">
+					<View gap={4}>
+						<View direction="row" gap={2} align="center">
+							<Button onClick={() => {
+                setActiveIndex((prev) => Math.max(0, prev - 1));
+            }}>
+								Previous
+							</Button>
+							<Button onClick={() => {
+                setActiveIndex((prev) => Math.min(total - 1, prev + 1));
+            }}>
+								Next
+							</Button>
+							<Text weight="medium">Index: {activeIndex}</Text>
+						</View>
+						<ProgressIndicator total={total} activeIndex={activeIndex}/>
+					</View>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const color = {
+    name: "color",
+    render: () => {
+        return (<Example>
+				<Example.Item title="color: primary">
+					<ProgressIndicator total={10} activeIndex={5} color="primary"/>
+				</Example.Item>
+				<Example.Item title="color: media">
+					<View borderRadius="medium" overflow="hidden" width="300px">
+						<Scrim position="bottom" backgroundSlot={<View aspectRatio={16 / 9} backgroundColor="neutral-faded"/>}>
+							<View align="center">
+								<ProgressIndicator total={10} activeIndex={5} color="media"/>
+							</View>
+						</Scrim>
+					</View>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const ariaLabel = {
+    name: "ariaLabel",
+    render: () => <ProgressIndicator total={10} className="test-classname" ariaLabel="Progress"/>,
+    play: async ({ canvas }) => {
+        const progress = canvas.getByRole("progressbar");
+        expect(progress).toHaveAttribute("aria-valuenow", "0");
+        expect(progress).toHaveAttribute("aria-valuemin", "0");
+        expect(progress).toHaveAttribute("aria-valuemax", "9");
+        expect(progress).toHaveAccessibleName("Progress");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<ProgressIndicator total={10} 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/Reshaped/Reshaped.js

@@ -5,16 +5,15 @@ import { classNames } from "../../utilities/helpers.js";
 import { GlobalColorMode, PrivateTheme } from "../Theme/index.js";
 import { ToastProvider } from "../Toast/index.js";
 import { useGlobalColorMode } from "../Theme/useTheme.js";
-import useSingletonKeyboardMode from "../../hooks/_private/useSingletonKeyboardMode.js";
-import { SingletonEnvironmentContext, useSingletonRTL, } from "../../hooks/_private/useSingletonEnvironment.js";
+import { SingletonEnvironmentContext, useSingletonEnvironment, } from "../../hooks/_private/useSingletonEnvironment.js";
+import { SingletonKeyboardModeProvider } from "../../hooks/_private/useSingletonKeyboardMode.js";
 import { SingletonHotkeysProvider } from "../../hooks/_private/useSingletonHotkeys.js";
 import "./Reshaped.css";
 import s from "./Reshaped.module.css";
 const ReshapedInner = (props) => {
     const { children, defaultRTL, defaultViewport = "s", toastOptions } = props;
-    const rtlState = useSingletonRTL(defaultRTL);
-    useSingletonKeyboardMode();
-    return (_jsx(SingletonEnvironmentContext.Provider, { value: { rtl: rtlState, defaultViewport }, children: _jsx(SingletonHotkeysProvider, { children: _jsx(ToastProvider, { options: toastOptions, children: children }) }) }));
+    const rtlState = useSingletonEnvironment(defaultRTL);
+    return (_jsx(SingletonKeyboardModeProvider, { children: _jsx(SingletonEnvironmentContext.Provider, { value: { rtl: rtlState, defaultViewport }, children: _jsx(SingletonHotkeysProvider, { children: _jsx(ToastProvider, { options: toastOptions, children: children }) }) }) }));
 };
 const Reshaped = (props) => {
     const { theme, defaultTheme = "reshaped", defaultColorMode, scoped, className } = props;

package/dist/components/TextField/TextField.module.css

@@ -1 +1 @@
-.root{--rs-p-h:var(--rs-text-field-gap);align-items:center;background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;gap:var(--rs-text-field-gap);padding:calc(var(--rs-unit-x1) - 1px) calc(var(--rs-text-field-gap) - 1px);position:relative;row-gap:var(--rs-unit-x1);z-index:0}.root:has(label:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus)):focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:999px}.root.--rounded .affix:first-child,.root.--rounded .icon:first-child{padding-inline-start:var(--rs-unit-x1)}.root.--rounded .input:first-child{padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:calc(var(--rs-unit-x1) * -1) calc(var(--rs-text-field-gap) * -1);outline:none;padding-inline:var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x1) * 2);position:relative;z-index:5}.slot--position-end:last-child{margin-inline-end:calc(var(--rs-unit-x1) * -1)}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium .input{padding-block:var(--rs-unit-x2)}.--size-medium .affix,.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large .input{padding-block:var(--rs-unit-x3)}.--size-large .affix,.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{padding-block:var(--rs-unit-x4)}.--size-xlarge .affix,.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--m .input{padding-block:var(--rs-unit-x2)}.--size-medium--m .affix,.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--m .input{padding-block:var(--rs-unit-x3)}.--size-large--m .affix,.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--m .affix,.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--l .input{padding-block:var(--rs-unit-x2)}.--size-medium--l .affix,.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--l .input{padding-block:var(--rs-unit-x3)}.--size-large--l .affix,.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--l .affix,.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{padding-block:var(--rs-unit-x2)}.--size-medium--xl .affix,.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{padding-block:var(--rs-unit-x3)}.--size-large--xl .affix,.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--xl .affix,.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
+.root{--rs-p-h:var(--rs-text-field-gap);align-items:center;background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;gap:var(--rs-text-field-gap);padding:calc(var(--rs-unit-x1) - 1px) calc(var(--rs-text-field-gap) - 1px);position:relative;row-gap:var(--rs-unit-x1);z-index:0}.root.--focused,.root:has(label:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus)):focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:999px}.root.--rounded .affix:first-child,.root.--rounded .icon:first-child{padding-inline-start:var(--rs-unit-x1)}.root.--rounded .input:first-child{padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:calc(var(--rs-unit-x1) * -1) calc(var(--rs-text-field-gap) * -1);outline:none;padding-inline:var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x1) * 2);position:relative;z-index:5}.slot--position-end:last-child{margin-inline-end:calc(var(--rs-unit-x1) * -1)}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium .input{padding-block:var(--rs-unit-x2)}.--size-medium .affix,.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large .input{padding-block:var(--rs-unit-x3)}.--size-large .affix,.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{padding-block:var(--rs-unit-x4)}.--size-xlarge .affix,.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded.--focused,.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error.--focused,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error.--focused,.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--m .input{padding-block:var(--rs-unit-x2)}.--size-medium--m .affix,.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--m .input{padding-block:var(--rs-unit-x3)}.--size-large--m .affix,.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--m .affix,.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--l .input{padding-block:var(--rs-unit-x2)}.--size-medium--l .affix,.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--l .input{padding-block:var(--rs-unit-x3)}.--size-large--l .affix,.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--l .affix,.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{padding-block:var(--rs-unit-x2)}.--size-medium--xl .affix,.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{padding-block:var(--rs-unit-x3)}.--size-large--xl .affix,.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--xl .affix,.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}

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

@@ -145,7 +145,10 @@ const Color = () => {
                 color: "inverted",
                 title: "Hey!",
                 icon: IconZap,
-                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+                actionsSlot: [
+                    <Button onClick={() => toast.hide(id)}>Undo</Button>,
+                    <Button onClick={() => toast.hide(id)}>Hide</Button>,
+                ],
             });
         }}>
 					Show toast
@@ -158,7 +161,10 @@ const Color = () => {
                 color: "neutral",
                 title: "Hey!",
                 icon: IconZap,
-                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+                actionsSlot: [
+                    <Button onClick={() => toast.hide(id)}>Undo</Button>,
+                    <Button onClick={() => toast.hide(id)}>Hide</Button>,
+                ],
             });
         }}>
 					Show toast
@@ -171,7 +177,10 @@ const Color = () => {
                 color: "primary",
                 title: "Hey!",
                 icon: IconZap,
-                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+                actionsSlot: [
+                    <Button onClick={() => toast.hide(id)}>Undo</Button>,
+                    <Button onClick={() => toast.hide(id)}>Hide</Button>,
+                ],
             });
         }}>
 					Show toast
@@ -184,7 +193,10 @@ const Color = () => {
                 color: "positive",
                 title: "Hey!",
                 icon: IconZap,
-                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+                actionsSlot: [
+                    <Button onClick={() => toast.hide(id)}>Undo</Button>,
+                    <Button onClick={() => toast.hide(id)}>Hide</Button>,
+                ],
             });
         }}>
 					Show toast
@@ -197,7 +209,10 @@ const Color = () => {
                 color: "critical",
                 title: "Hey!",
                 icon: IconZap,
-                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+                actionsSlot: [
+                    <Button onClick={() => toast.hide(id)}>Undo</Button>,
+                    <Button onClick={() => toast.hide(id)}>Hide</Button>,
+                ],
             });
         }}>
 					Show toast
@@ -211,8 +226,8 @@ const Color = () => {
                 title: "Hey!",
                 icon: IconZap,
                 actionsSlot: [
-                    <Button onClick={() => toast.hide(id)}>Close</Button>,
-                    <Button onClick={() => toast.hide(id)}>Close</Button>,
+                    <Button onClick={() => toast.hide(id)}>Undo</Button>,
+                    <Button onClick={() => toast.hide(id)}>Hide</Button>,
                 ],
             });
         }}>

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

@@ -33,7 +33,7 @@ export const defaultActive = {
         await userEvent.unhover(trigger);
         await waitFor(() => {
             expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(args.handleClose).toHaveBeenCalledWith({});
             expect(item).not.toBeInTheDocument();
         });
     },