reshaped 1.0.1 → 2.2.0

package/components/_private/Flyout/Flyout.context.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type * as T from "./Flyout.types";
+declare const FlyoutContext: React.Context<T.ContextProps>;
+export declare const useFlyoutContext: () => T.ContextProps;
+export declare const Provider: React.Provider<T.ContextProps>;
+export default FlyoutContext;

package/components/_private/Flyout/Flyout.context.js

@@ -0,0 +1,6 @@
+"use client";
+import React from "react";
+const FlyoutContext = React.createContext({});
+export const useFlyoutContext = () => React.useContext(FlyoutContext);
+export const Provider = FlyoutContext.Provider;
+export default FlyoutContext;

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

@@ -0,0 +1,8 @@
+import React from "react";
+import type * as T from "./Flyout.types";
+declare const Flyout: {
+    (props: T.Props): React.JSX.Element;
+    Trigger: (props: T.TriggerProps) => React.JSX.Element;
+    Content: (props: T.ContentProps) => React.JSX.Element | null;
+};
+export default Flyout;

package/components/_private/Flyout/Flyout.js

@@ -0,0 +1,14 @@
+import React from "react";
+import FlyoutUncontrolled from "./FlyoutUncontrolled.js";
+import FlyoutControlled from "./FlyoutControlled.js";
+import FlyoutTrigger from "./FlyoutTrigger.js";
+import FlyoutContent from "./FlyoutContent.js";
+const Flyout = (props) => {
+    const { active } = props;
+    if (typeof active === "boolean")
+        return React.createElement(FlyoutControlled, Object.assign({}, props));
+    return React.createElement(FlyoutUncontrolled, Object.assign({}, props));
+};
+Flyout.Trigger = FlyoutTrigger;
+Flyout.Content = FlyoutContent;
+export default Flyout;

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

@@ -0,0 +1 @@
+.content{--rs-flyout-gap:2}.content .inner{opacity:0}.content.--position-top,.content.--position-top-end,.content.--position-top-start{padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-bottom .inner,.content.--position-start-bottom .inner,.content.--position-top .inner,.content.--position-top-end .inner,.content.--position-top-start .inner{transform:translateY(calc(var(--rs-unit-x2) * -1))}.content.--position-bottom .inner,.content.--position-bottom-end .inner,.content.--position-bottom-start .inner,.content.--position-end-top .inner,.content.--position-start-top .inner{transform:translateY(var(--rs-unit-x2))}.content.--position-start .inner{transform:translate(calc(var(--rs-unit-x2) * -1))}.content.--position-end .inner{transform:translate(var(--rs-unit-x2))}.content.--visible .inner{opacity:1;transform:translate(0)}.content.--animated .inner{transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-timing-function:var(--rs-easing-decelerate)}

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

@@ -0,0 +1,77 @@
+import React from "react";
+import type * as G from "../../../types/global";
+import type { TrapMode } from "../../../utilities/a11y";
+import useFlyout, { FlyoutPosition, FlyoutWidth } from "../../../hooks/_private/useFlyout";
+export type InstanceRef = {
+    open: () => void;
+    close: () => void;
+} | undefined;
+type WithUncontrolled = {
+    active?: never;
+    defaultActive?: boolean;
+};
+type WithControlled = {
+    active: boolean;
+    defaultActive?: never;
+};
+export type TriggerAttributes = {
+    ref: React.RefObject<HTMLButtonElement>;
+    onBlur?: (e: React.FocusEvent) => void;
+    onFocus?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onClick?: () => void;
+    "aria-describedby"?: string;
+    "aria-haspopup"?: "dialog" | "menu" | "listbox";
+    "aria-autocomplete"?: "list";
+    "aria-expanded"?: boolean;
+    "aria-controls"?: string;
+};
+type BaseProps = {
+    id?: string;
+    triggerType?: "hover" | "click" | "focus";
+    position?: FlyoutPosition;
+    forcePosition?: boolean;
+    trapFocusMode?: TrapMode;
+    disableHideAnimation?: boolean;
+    children?: React.ReactNode;
+    onOpen?: () => void;
+    onClose?: () => void;
+    width?: FlyoutWidth;
+    contentGap?: number;
+    contentClassName?: string;
+    contentAttributes?: G.Attributes<"div">;
+    instanceRef?: React.Ref<InstanceRef>;
+};
+export type DefaultProps = Required<{
+    position: BaseProps["position"];
+    trigger: BaseProps["triggerType"];
+}>;
+export type UncontrolledProps = BaseProps & WithUncontrolled;
+export type ControlledProps = BaseProps & WithControlled;
+export type Props = ControlledProps | UncontrolledProps;
+export type TriggerProps = {
+    children: (attributes: TriggerAttributes) => React.ReactNode;
+};
+export type ContentProps = {
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
+export type ContextProps = {
+    id: string;
+    flyout: ReturnType<typeof useFlyout>;
+    triggerElRef: React.RefObject<HTMLButtonElement>;
+    flyoutElRef: React.RefObject<HTMLDivElement>;
+    handleClose: (options?: {
+        closeParents?: boolean;
+    }) => void;
+    handleOpen: () => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    handleTransitionEnd: (e: React.TransitionEvent) => void;
+    handleClick: () => void;
+    handleBlur: (e: React.FocusEvent) => void;
+    handleFocus: () => void;
+} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "trapFocusMode" | "contentGap">;
+export {};

package/components/_private/Flyout/Flyout.types.js

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

package/components/_private/Flyout/FlyoutContent.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Flyout.types";
+declare const FlyoutContent: (props: T.ContentProps) => React.JSX.Element | null;
+export default FlyoutContent;

package/components/_private/Flyout/FlyoutContent.js

@@ -0,0 +1,40 @@
+"use client";
+import React from "react";
+import { classNames } from "../../../utilities/helpers.js";
+import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
+import Portal from "../Portal/index.js";
+import { useFlyoutContext } from "./Flyout.context.js";
+import s from "./Flyout.module.css";
+const FlyoutContent = (props) => {
+    const { children, className, attributes } = props;
+    const { flyout, id, flyoutElRef, handleTransitionEnd, triggerType, handleMouseEnter, handleMouseLeave, contentGap, contentClassName, contentAttributes, trapFocusMode, } = useFlyoutContext();
+    const { styles, status, position } = flyout;
+    const [mounted, setMounted] = React.useState(false);
+    useIsomorphicLayoutEffect(() => {
+        setMounted(true);
+    }, []);
+    if (status === "idle" || !mounted)
+        return null;
+    const contentClassNames = classNames(s.content, status === "visible" && s["--visible"], 
+    // Animate after correct position has been assigned
+    ["visible", "hidden"].includes(status) && s["--animated"], position && s[`--position-${position}`]);
+    // className is applied to inner element because it has the transform and is treated like a real root element
+    const innerClassNames = classNames(s.inner, className, contentClassName);
+    let role;
+    if (triggerType === "hover") {
+        role = "tooltip";
+    }
+    else if (trapFocusMode === "dialog") {
+        role = "dialog";
+    }
+    else if (trapFocusMode === "selection-menu") {
+        role = "listbox";
+    }
+    else if (trapFocusMode === "action-menu") {
+        role = "menu";
+    }
+    const content = (React.createElement("div", { className: contentClassNames, style: Object.assign(Object.assign({}, styles), { "--rs-flyout-gap": contentGap }), ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined },
+        React.createElement("div", Object.assign({ role: role }, attributes, { id: id, "aria-modal": triggerType === "click", style: contentAttributes === null || contentAttributes === void 0 ? void 0 : contentAttributes.style, className: innerClassNames }), children)));
+    return React.createElement(Portal, null, content);
+};
+export default FlyoutContent;

package/components/_private/Flyout/FlyoutControlled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Flyout.types";
+declare const FlyoutRoot: (props: T.ControlledProps & T.DefaultProps) => React.JSX.Element;
+export default FlyoutRoot;

package/components/_private/Flyout/FlyoutControlled.js

@@ -0,0 +1,214 @@
+"use client";
+import React from "react";
+import { debounce } from "../../../utilities/helpers.js";
+import { trapFocus } from "../../../utilities/a11y.js";
+import * as timeouts from "../../../constants/timeouts.js";
+import useIsDismissible from "../../../hooks/_private/useIsDismissible.js";
+import useElementId from "../../../hooks/useElementId.js";
+import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
+import useHotkeys from "../../../hooks/useHotkeys.js";
+import useFlyout from "../../../hooks/_private/useFlyout.js";
+import useOnClickOutside from "../../../hooks/_private/useOnClickOutside.js";
+import useRTL from "../../../hooks/useRTL.js";
+import { checkTransitions } from "../../../utilities/animation.js";
+import { Provider, useFlyoutContext } from "./Flyout.context.js";
+const FlyoutRoot = (props) => {
+    const { triggerType = "click", onOpen, onClose, children, forcePosition, trapFocusMode, width, disableHideAnimation, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, } = props;
+    const [isRTL] = useRTL();
+    const triggerElRef = React.useRef(null);
+    const flyoutElRef = React.useRef(null);
+    const id = useElementId(passedId);
+    const timerRef = React.useRef();
+    const releaseFocusRef = React.useRef(null);
+    const lockedRef = React.useRef(false);
+    const shouldReturnFocusRef = React.useRef(true);
+    const flyout = useFlyout(triggerElRef, flyoutElRef, {
+        width,
+        position: passedPosition,
+        defaultActive: passedActive,
+        forcePosition,
+    });
+    const parentFlyoutContext = useFlyoutContext();
+    const { status, updatePosition, render, hide, remove } = flyout;
+    // Don't create dismissible queue for hover flyout because they close all together on mouseout
+    const isDismissible = useIsDismissible(triggerType !== "hover" && status !== "idle", flyoutElRef, triggerElRef);
+    const clearTimer = React.useCallback(() => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+    }, [timerRef]);
+    /**
+     * Component open/close handlers
+     * Called from the internal actions
+     */
+    const handleOpen = React.useCallback(() => {
+        const canOpen = !lockedRef.current && status === "idle";
+        if (!canOpen)
+            return;
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [status]);
+    const handleClose = React.useCallback((options) => {
+        var _a;
+        const isLocked = triggerType === "click" && !isDismissible();
+        const canClose = !isLocked && status !== "idle";
+        if (!canClose)
+            return;
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        if (options === null || options === void 0 ? void 0 : options.closeParents) {
+            (_a = parentFlyoutContext === null || parentFlyoutContext === void 0 ? void 0 : parentFlyoutContext.handleClose) === null || _a === void 0 ? void 0 : _a.call(parentFlyoutContext);
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [status, isDismissible, triggerType]);
+    /**
+     * Trigger event handlers
+     */
+    const handleBlur = React.useCallback((e) => {
+        var _a;
+        const focusedContent = (_a = flyoutElRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget);
+        if (
+        // Empty flyouts don't move the focus so they have to be closed on blur
+        focusedContent ||
+            // Content menu keeps the focus on the original trigger so moving the focus away from it shouldn't close it
+            (triggerType === "hover" && trapFocusMode === "content-menu")) {
+            return;
+        }
+        handleClose();
+    }, [handleClose, triggerType, trapFocusMode]);
+    const handleFocus = React.useCallback(() => {
+        handleOpen();
+    }, [handleOpen]);
+    const handleMouseEnter = React.useCallback(() => {
+        clearTimer();
+        timerRef.current = setTimeout(handleOpen, timeouts.mouseEnter);
+    }, [clearTimer, timerRef, handleOpen]);
+    const handleMouseLeave = React.useCallback(() => {
+        clearTimer();
+        timerRef.current = setTimeout(() => handleClose(), timeouts.mouseLeave);
+    }, [clearTimer, timerRef, handleClose]);
+    const handleTriggerClick = React.useCallback(() => {
+        if (status === "idle") {
+            handleOpen();
+        }
+        else {
+            handleClose();
+        }
+    }, [status, handleOpen, handleClose]);
+    /**
+     * Control the display based on the props
+     */
+    useIsomorphicLayoutEffect(() => {
+        if (passedActive) {
+            render();
+            return;
+        }
+        if (checkTransitions() && !disableHideAnimation) {
+            hide();
+            // In case transitions are disabled globally - remove from the DOM immediately
+        }
+        else {
+            remove();
+        }
+    }, [passedActive, render, hide, disableHideAnimation]);
+    const handleTransitionEnd = React.useCallback((e) => {
+        if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
+            return;
+        if (status === "hidden")
+            remove();
+    }, [remove, status]);
+    /**
+     * Handle focus trap
+     *
+     * We release focus on visible change to not wait till animation ends
+     * so if we click outside the flyout, it won't focus the trigger
+     * after the animation and open it again
+     *
+     * Trap focus on visible to avoid scroll jumping, position is defined only when flyout is visible
+     */
+    useIsomorphicLayoutEffect(() => {
+        if (status !== "visible" || !flyoutElRef.current)
+            return;
+        releaseFocusRef.current = trapFocus(flyoutElRef.current, {
+            mode: trapFocusMode,
+            includeTrigger: triggerType === "hover" && trapFocusMode === "content-menu",
+            onNavigateOutside: () => {
+                releaseFocusRef.current = null;
+                handleClose();
+            },
+        });
+    }, [status, triggerType, handleClose, trapFocusMode]);
+    React.useEffect(() => {
+        if (!disableHideAnimation && status !== "hidden")
+            return;
+        if (disableHideAnimation && status !== "idle")
+            return;
+        if (releaseFocusRef.current) {
+            /* Locking the popover to not open it again on trigger focus */
+            if (triggerType === "hover") {
+                lockedRef.current = true;
+                setTimeout(() => {
+                    lockedRef.current = false;
+                }, 100);
+            }
+            releaseFocusRef.current({
+                withoutFocusReturn: !shouldReturnFocusRef.current,
+            });
+            releaseFocusRef.current = null;
+            shouldReturnFocusRef.current = true;
+        }
+    }, [status, triggerType, disableHideAnimation]);
+    /**
+     * Release focus trapping on unmount
+     */
+    React.useEffect(() => {
+        return () => {
+            if (releaseFocusRef.current)
+                releaseFocusRef.current();
+            releaseFocusRef.current = null;
+        };
+    }, []);
+    /**
+     * Update position on resize or RTL
+     */
+    React.useEffect(() => {
+        const update = debounce(updatePosition, 10);
+        window.addEventListener("resize", update);
+        return () => window.removeEventListener("resize", update);
+    }, [updatePosition]);
+    React.useEffect(() => {
+        updatePosition();
+    }, [isRTL, updatePosition]);
+    /**
+     * Imperative methods for controlling Flyout
+     */
+    React.useImperativeHandle(instanceRef, () => ({
+        open: handleOpen,
+        close: handleClose,
+    }), [handleOpen, handleClose]);
+    useHotkeys({ Escape: () => handleClose() }, [handleClose]);
+    useOnClickOutside([flyoutElRef, triggerElRef], () => {
+        // Clicking outside changes focused element so we don't need to set it back ourselves
+        shouldReturnFocusRef.current = false;
+        handleClose();
+    });
+    return (React.createElement(Provider, { value: {
+            id,
+            flyout,
+            triggerElRef,
+            flyoutElRef,
+            handleClose,
+            handleOpen,
+            handleFocus,
+            handleBlur,
+            handleMouseEnter,
+            handleMouseLeave,
+            handleTransitionEnd,
+            handleClick: handleTriggerClick,
+            triggerType,
+            trapFocusMode,
+            contentGap,
+            contentClassName,
+            contentAttributes,
+        } }, children));
+};
+export default FlyoutRoot;

package/components/_private/Flyout/FlyoutTrigger.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Flyout.types";
+declare const FlyoutTrigger: (props: T.TriggerProps) => React.JSX.Element;
+export default FlyoutTrigger;

package/components/_private/Flyout/FlyoutTrigger.js

@@ -0,0 +1,47 @@
+"use client";
+import React from "react";
+import useHotkeys from "../../../hooks/useHotkeys.js";
+import * as keys from "../../../constants/keys.js";
+import { useFlyoutContext } from "./Flyout.context.js";
+const FlyoutTrigger = (props) => {
+    const { children } = props;
+    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleClick, handleOpen, trapFocusMode, } = useFlyoutContext();
+    useHotkeys({
+        [`${keys.UP},${keys.DOWN}`]: () => {
+            if (flyout.status !== "idle")
+                return;
+            handleOpen();
+        },
+    }, [handleOpen, flyout.status], { ref: triggerElRef });
+    let childrenAttributes = {
+        onBlur: handleBlur,
+        ref: triggerElRef,
+    };
+    if (triggerType === "click") {
+        childrenAttributes.onClick = handleClick;
+    }
+    if (triggerType === "hover") {
+        childrenAttributes.onMouseEnter = handleMouseEnter;
+        childrenAttributes.onMouseLeave = handleMouseLeave;
+    }
+    if ((triggerType === "hover" && trapFocusMode !== "action-menu") || triggerType === "focus") {
+        childrenAttributes.onFocus = handleFocus;
+        childrenAttributes["aria-describedby"] = id;
+    }
+    if (triggerType === "click" || triggerType === "focus" || trapFocusMode === "action-menu") {
+        if (trapFocusMode === "dialog") {
+            childrenAttributes["aria-haspopup"] = "dialog";
+        }
+        else if (trapFocusMode === "selection-menu") {
+            childrenAttributes["aria-haspopup"] = "listbox";
+            childrenAttributes["aria-autocomplete"] = "list";
+        }
+        else {
+            childrenAttributes["aria-haspopup"] = "menu";
+        }
+        childrenAttributes["aria-expanded"] = flyout.status !== "idle";
+        childrenAttributes["aria-controls"] = flyout.status !== "idle" ? id : undefined;
+    }
+    return React.createElement(React.Fragment, null, children(childrenAttributes));
+};
+export default FlyoutTrigger;

package/components/_private/Flyout/FlyoutUncontrolled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Flyout.types";
+declare const FlyoutUncontrolled: (props: T.UncontrolledProps & T.DefaultProps) => React.JSX.Element;
+export default FlyoutUncontrolled;

package/components/_private/Flyout/FlyoutUncontrolled.js

@@ -0,0 +1,19 @@
+"use client";
+import React from "react";
+import FlyoutControlled from "./FlyoutControlled.js";
+const FlyoutUncontrolled = (props) => {
+    const { defaultActive, onClose, onOpen } = props;
+    const [active, setActive] = React.useState(defaultActive || false);
+    const handleClose = () => {
+        setActive(false);
+        if (onClose)
+            onClose();
+    };
+    const handleOpen = () => {
+        setActive(true);
+        if (onOpen)
+            onOpen();
+    };
+    return (React.createElement(FlyoutControlled, Object.assign({}, props, { defaultActive: undefined, active: active, onClose: handleClose, onOpen: handleOpen })));
+};
+export default FlyoutUncontrolled;

package/components/_private/Flyout/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Flyout";
+export { useFlyoutContext } from "./Flyout.context";
+export type { Props as FlyoutProps, InstanceRef as FlyoutInstanceRef, TriggerProps as FlyoutTriggerProps, ContentProps as FlyoutContentProps, } from "./Flyout.types";

package/components/_private/Flyout/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Flyout.js";
+export { useFlyoutContext } from "./Flyout.context.js";

package/components/_private/Flyout/tests/Flyout.stories.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const positions: () => React.JSX.Element;
+export declare const dynamicPosition: () => React.JSX.Element;
+export declare const modeDialogClick: () => React.JSX.Element;
+export declare const modeActionMenuClick: () => React.JSX.Element;
+export declare const modeContentMenuClick: () => React.JSX.Element;
+export declare const modeDialogHover: () => React.JSX.Element;
+export declare const modeActionMenuHover: () => React.JSX.Element;
+export declare const modeContentMenuHover: () => React.JSX.Element;
+export declare const testWidthOverflowOnMobile: () => React.JSX.Element;
+export declare const widthTrigger: () => React.JSX.Element;
+export declare const scopedTheming: () => React.JSX.Element;

package/components/_private/Flyout/tests/Flyout.stories.js

@@ -0,0 +1,133 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import View from "../../../View/index.js";
+import Theme from "../../../Theme/index.js";
+import Button from "../../../Button/index.js";
+import Flyout from "../index.js";
+export default { title: "Utilities/Internal/Flyout" };
+const Demo = (props) => {
+    const { position = "bottom-start", children } = props, rest = __rest(props, ["position", "children"]);
+    return (<Flyout triggerType="click" position={position} {...rest}>
+			<Flyout.Trigger>{(attributes) => <button {...attributes}>{position}</button>}</Flyout.Trigger>
+			<Flyout.Content>
+				<div style={{
+            background: "var(--rs-color-background-elevation-overlay)",
+            padding: "var(--rs-unit-x4)",
+            height: 100,
+            width: 160,
+            borderRadius: "var(--rs-unit-radius-medium)",
+            border: "1px solid var(--rs-color-border-neutral-faded)",
+            boxSizing: "border-box",
+        }}>
+					{children || "Content"}
+				</div>
+			</Flyout.Content>
+		</Flyout>);
+};
+export const positions = () => (<div style={{ paddingTop: 200 }}>
+		<View gap={3} direction="row">
+			<Demo position="bottom-start"/>
+			<Demo position="bottom-end"/>
+			<Demo position="bottom"/>
+
+			<Demo position="top-start"/>
+			<Demo position="top-end"/>
+			<Demo position="top"/>
+
+			<Demo position="end"/>
+			<Demo position="end-top"/>
+			<Demo position="end-bottom"/>
+
+			<Demo position="start"/>
+			<Demo position="start-top"/>
+			<Demo position="start-bottom"/>
+		</View>
+	</div>);
+export const dynamicPosition = () => (<div style={{ position: "absolute", top: 0, left: "50%" }}>
+		<Demo position="top"/>
+	</div>);
+export const modeDialogClick = () => (<Demo position="bottom-start" trapFocusMode="dialog">
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+export const modeActionMenuClick = () => (<Demo position="bottom-start" trapFocusMode="action-menu">
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+export const modeContentMenuClick = () => (<Demo position="bottom-start" trapFocusMode="content-menu">
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+export const modeDialogHover = () => (<Demo position="bottom-start" trapFocusMode="dialog" triggerType="hover">
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+export const modeActionMenuHover = () => (<Demo position="bottom-start" trapFocusMode="action-menu" triggerType="hover">
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+export const modeContentMenuHover = () => (<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+export const testWidthOverflowOnMobile = () => (<Demo position="bottom-start" width={600}>
+		Should work on mobile
+		<button type="button">Item 1</button>
+		<button type="button">Item 2</button>
+		<button type="button">Close</button>
+	</Demo>);
+export const widthTrigger = () => (<Flyout triggerType="click" width="trigger" position="bottom">
+		<Flyout.Trigger>
+			{(attributes) => <button {...attributes}>Trigger with long text</button>}
+		</Flyout.Trigger>
+		<Flyout.Content>
+			<div style={{
+        background: "var(--rs-color-background-elevation-overlay)",
+        padding: "var(--rs-unit-x4)",
+        borderRadius: "var(--rs-unit-radius-medium)",
+        border: "1px solid var(--rs-color-border-neutral-faded)",
+        boxSizing: "border-box",
+    }}></div>
+		</Flyout.Content>
+	</Flyout>);
+export const scopedTheming = () => (<View gap={3} align="start">
+		<Button color="primary">Reshaped button</Button>
+		<Theme name="twitter">
+			<Flyout triggerType="click" active position="bottom-start">
+				<Flyout.Trigger>
+					{(attributes) => (<Button color="primary" attributes={attributes}>
+							Twitter button
+						</Button>)}
+				</Flyout.Trigger>
+				<Flyout.Content>
+					<div style={{
+        background: "var(--rs-color-background-elevation-overlay)",
+        padding: 8,
+        border: "1px solid var(--rs-color-border-neutral-faded)",
+        boxSizing: "border-box",
+    }}>
+						<View gap={1}>
+							<View.Item>Portal content, rendered in body</View.Item>
+							<Button color="primary">Twitter button</Button>
+						</View>
+					</div>
+				</Flyout.Content>
+			</Flyout>
+		</Theme>
+	</View>);

package/components/_private/HiddenInput/HiddenInput.d.ts

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

package/components/_private/HiddenInput/HiddenInput.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { classNames } from "../../../utilities/helpers.js";
+import s from "./HiddenInput.module.css";
+const HiddenInput = (props) => {
+    const { name, value, type, onChange, onFocus, onBlur, checked, defaultChecked, disabled, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className);
+    return (React.createElement("input", Object.assign({}, attributes, { className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, onFocus: onFocus || (attributes === null || attributes === void 0 ? void 0 : attributes.onFocus), onBlur: onBlur || (attributes === null || attributes === void 0 ? void 0 : attributes.onBlur) })));
+};
+export default HiddenInput;

package/components/_private/HiddenInput/HiddenInput.module.css

@@ -0,0 +1 @@
+.root{border:0;height:1px;left:0;opacity:0;position:absolute;top:0;width:1px}