reshaped 3.3.12 → 3.4.0-rc.0

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/Table/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./Table";
-export type { Props as TableProps } from "./Table.types";
+export type { Props as TableProps, HeadProps as TableHeadProps, BodyProps as TableBodyProps, RowProps as TableRowProps, CellProps as TableCellProps, HeadingProps as TableHeadingProps, } from "./Table.types";

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

@@ -3,11 +3,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").TableProps): React.JSX.Element;
-        Cell: (props: import("../Table.types").CellProps) => React.JSX.Element;
-        Heading: (props: import("../Table.types").HeadingProps) => React.JSX.Element;
-        Row: (props: import("../Table.types").RowProps) => React.JSX.Element;
-        Body: (props: import("../Table.types").BodyProps) => React.JSX.Element;
-        Head: (props: import("../Table.types").HeadProps) => React.JSX.Element;
+        Cell: (props: import("./..").TableCellProps) => React.JSX.Element;
+        Heading: (props: import("./..").TableHeadingProps) => React.JSX.Element;
+        Row: (props: import("./..").TableRowProps) => React.JSX.Element;
+        Body: (props: import("./..").TableBodyProps) => React.JSX.Element;
+        Head: (props: import("./..").TableHeadProps) => React.JSX.Element;
     };
     parameters: {
         iframe: {

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

@@ -3,11 +3,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").TableProps): import("react").JSX.Element;
-        Cell: (props: import("../Table.types").CellProps) => import("react").JSX.Element;
-        Heading: (props: import("../Table.types").HeadingProps) => import("react").JSX.Element;
-        Row: (props: import("../Table.types").RowProps) => import("react").JSX.Element;
-        Body: (props: import("../Table.types").BodyProps) => import("react").JSX.Element;
-        Head: (props: import("../Table.types").HeadProps) => import("react").JSX.Element;
+        Cell: (props: import("./..").TableCellProps) => import("react").JSX.Element;
+        Heading: (props: import("./..").TableHeadingProps) => import("react").JSX.Element;
+        Row: (props: import("./..").TableRowProps) => import("react").JSX.Element;
+        Body: (props: import("./..").TableBodyProps) => import("react").JSX.Element;
+        Head: (props: import("./..").TableHeadProps) => import("react").JSX.Element;
     };
     parameters: {
         iframe: {

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();
         });
     },

package/dist/components/_private/Flyout/Flyout.module.css

@@ -1 +1 @@
-.content{--rs-flyout-gap:0;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;pointer-events:none;position:absolute}.content.--hover,.inner{pointer-events:all}.inner{opacity:0;transform:scale(.9) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}.content.--hover-disabled{pointer-events:none}
+.content{--rs-flyout-gap:0;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{opacity:0;pointer-events:all;transform:scale(.9) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}

package/dist/components/_private/Flyout/Flyout.types.d.ts

@@ -7,6 +7,12 @@ import type { TrapMode } from "../../../utilities/a11y";
 type XSide = "start" | "end";
 type YSide = "top" | "bottom";
 export type Side = XSide | YSide;
+export type CloseReason = "escape-key" | "outside-click"
+/**
+ * Keeping the item selection type here since DropdownMenu items use Flyout context
+ * and not a separate DropdownMenu context
+ */
+ | "item-selection" | "close-button";
 export type Position = `${YSide}` | `${YSide}-${XSide}` | `${XSide}` | `${XSide}-${YSide}`;
 export type Width = "trigger" | string;
 export type Options = {
@@ -31,7 +37,9 @@ export type FlyoutData = {
     position: Position;
 };
 export type UseFlyoutData = Pick<State, "styles" | "position" | "status"> & {
-    updatePosition: () => void;
+    updatePosition: (args?: {
+        sync?: boolean;
+    }) => void;
     render: () => void;
     hide: () => void;
     remove: () => void;
@@ -86,7 +94,9 @@ type BaseProps = {
     originCoordinates?: G.Coordinates;
     children?: React.ReactNode;
     onOpen?: () => void;
-    onClose?: () => void;
+    onClose?: (args: {
+        reason?: CloseReason;
+    }) => void;
     width?: Width;
     contentGap?: number;
     contentShift?: number;
@@ -117,8 +127,9 @@ export type ContextProps = {
     width?: Width;
     triggerElRef?: React.RefObject<HTMLButtonElement | null>;
     flyoutElRef: React.RefObject<HTMLDivElement | null>;
-    handleClose: (options?: {
+    handleClose: (options: {
         closeParents?: boolean;
+        reason?: CloseReason;
     }) => void;
     handleOpen: () => void;
     handleMouseEnter: () => void;

package/dist/components/_private/Flyout/FlyoutContent.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../../utilities/helpers.js";
+import { classNames, throttleHandler } from "../../../utilities/helpers.js";
 import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import Portal from "../Portal/index.js";
 import { findClosestRenderContainer } from "../../../utilities/dom/index.js";
@@ -10,9 +10,21 @@ import { useFlyoutContext, ContentProvider } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, disableContentHover, width, containerRef, isSubmenu, } = useFlyoutContext();
-    const { styles, status, position } = flyout;
+    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, disableContentHover, width, containerRef, isSubmenu, } = useFlyoutContext();
+    const { styles, status, position, updatePosition } = flyout;
     const [mounted, setMounted] = React.useState(false);
+    const closestContainer = React.useMemo(() => {
+        if (!mounted)
+            return;
+        if (!triggerElRef)
+            return;
+        return findClosestRenderContainer({ el: triggerElRef.current });
+    }, [mounted, triggerElRef]);
+    const scrollableRef = (mounted && closestContainer?.el === document.body) ||
+        !closestContainer?.el ||
+        closestContainer.scrollable
+        ? undefined
+        : { current: closestContainer.el };
     useIsomorphicLayoutEffect(() => {
         setMounted(true);
     }, []);
@@ -26,6 +38,28 @@ const FlyoutContent = (props) => {
         el.addEventListener("transitionstart", handleTransitionStart);
         return () => el.removeEventListener("transitionstart", handleTransitionStart);
     }, [handleTransitionStart, flyoutElRef, status]);
+    React.useEffect(() => {
+        if (!closestContainer?.scrollable)
+            return;
+        const triggerEl = triggerElRef?.current;
+        const containerEl = closestContainer.el;
+        const handleScroll = throttleHandler(() => {
+            const triggerBounds = triggerEl?.getBoundingClientRect();
+            const containerBounds = containerEl.getBoundingClientRect();
+            if (triggerBounds &&
+                (triggerBounds.bottom < containerBounds.top ||
+                    triggerBounds.right < containerBounds.left ||
+                    triggerBounds.left > containerBounds.right ||
+                    triggerBounds.top > containerBounds.bottom)) {
+                handleClose({});
+            }
+            else {
+                flyout.updatePosition({ sync: true });
+            }
+        }, 16);
+        closestContainer.el.addEventListener("scroll", handleScroll, { passive: true });
+        return () => closestContainer.el.removeEventListener("scroll", handleScroll);
+    }, [closestContainer, flyout, handleClose, triggerElRef]);
     if (status === "idle" || !mounted)
         return null;
     const contentClassNames = classNames(s.content, triggerType === "hover" && s["--hover"], status === "visible" && s["--visible"], 
@@ -52,10 +86,6 @@ const FlyoutContent = (props) => {
                 ...styles,
                 "--rs-flyout-gap": contentGap,
             }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, "aria-modal": role === "dialog" ? true : undefined, style: contentAttributes?.style, className: innerClassNames, children: children }) }) }));
-    const closestScrollable = triggerElRef && findClosestRenderContainer({ el: triggerElRef.current });
-    const scrollableRef = closestScrollable === document.body || !closestScrollable
-        ? undefined
-        : { current: closestScrollable };
     return _jsx(Portal, { targetRef: containerRef || scrollableRef, children: content });
 };
 export default FlyoutContent;