reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -3,7 +3,7 @@ import React from "react";
 import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.FC<import("../../../components/Expandable").ExpandableProps>;
+    component: React.FC<import("../../../components/Expandable/index.js").ExpandableProps>;
 };
 export default _default;
 export declare const base: StoryObj;

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

@@ -1,82 +1,76 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.onAfterClose = exports.base = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Expandable_1 = __importDefault(require("../../../components/Expandable"));
-const View_1 = __importDefault(require("../../../components/View"));
-const animation_1 = require("../../../utilities/animation");
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import React from "react";
+import { expect, fn, userEvent, waitFor } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import Expandable from "../../../components/Expandable/index.js";
+import View from "../../../components/View/index.js";
+import { checkTransitions } from "../../../utilities/animation.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+export default {
     title: "Utility components/Expandable",
-    component: Expandable_1.default,
+    component: Expandable,
 };
-exports.base = {
+export const base = {
     name: "orientation",
     render: () => {
-        const [active, setActive] = react_1.default.useState(false);
-        const [activeHorizontal, setActiveHorizontal] = react_1.default.useState(false);
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="orientation: vertical">
-					<View_1.default align="start">
-						<Button_1.default onClick={() => setActive((prev) => !prev)}>Toggle</Button_1.default>
-					</View_1.default>
-					<Expandable_1.default active={active} attributes={{ "aria-label": "Content" }}>
-						<View_1.default paddingTop={2}>
-							<storybook_1.Placeholder />
-						</View_1.default>
-					</Expandable_1.default>
-				</storybook_1.Example.Item>
+        const [active, setActive] = React.useState(false);
+        const [activeHorizontal, setActiveHorizontal] = React.useState(false);
+        return (<Example>
+				<Example.Item title="orientation: vertical">
+					<View align="start">
+						<Button onClick={() => setActive((prev) => !prev)}>Toggle</Button>
+					</View>
+					<Expandable active={active} attributes={{ "aria-label": "Content" }}>
+						<View paddingTop={2}>
+							<Placeholder />
+						</View>
+					</Expandable>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="orientation: horizontal">
-					<View_1.default gap={2} align="start">
-						<Button_1.default onClick={() => setActiveHorizontal((prev) => !prev)}>Toggle</Button_1.default>
-						<View_1.default direction="row" gap={0} align="center">
-							<Expandable_1.default active={activeHorizontal} orientation="horizontal" attributes={{ "aria-label": "Content" }}>
-								<View_1.default width="200px" paddingEnd={2}>
-									<storybook_1.Placeholder>Horizontal</storybook_1.Placeholder>
-								</View_1.default>
-							</Expandable_1.default>
-							<storybook_1.Placeholder>Sibling</storybook_1.Placeholder>
-						</View_1.default>
-					</View_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+				<Example.Item title="orientation: horizontal">
+					<View gap={2} align="start">
+						<Button onClick={() => setActiveHorizontal((prev) => !prev)}>Toggle</Button>
+						<View direction="row" gap={0} align="center">
+							<Expandable active={activeHorizontal} orientation="horizontal" attributes={{ "aria-label": "Content" }}>
+								<View width="200px" paddingEnd={2}>
+									<Placeholder>Horizontal</Placeholder>
+								</View>
+							</Expandable>
+							<Placeholder>Sibling</Placeholder>
+						</View>
+					</View>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.onAfterClose = {
+export const onAfterClose = {
     name: "onAfterClose",
     args: {
-        handleAfterClose: (0, test_1.fn)(),
+        handleAfterClose: fn(),
     },
     render: (args) => {
-        const [active, setActive] = react_1.default.useState(true);
-        return (<View_1.default gap={2} align="start">
-				<Button_1.default onClick={() => setActive((prev) => !prev)}>Toggle</Button_1.default>
-				<Expandable_1.default active={active} onAfterClose={args.handleAfterClose} attributes={{ "aria-label": "Content" }}>
-					<storybook_1.Placeholder />
-				</Expandable_1.default>
-			</View_1.default>);
+        const [active, setActive] = React.useState(true);
+        return (<View gap={2} align="start">
+				<Button onClick={() => setActive((prev) => !prev)}>Toggle</Button>
+				<Expandable active={active} onAfterClose={args.handleAfterClose} attributes={{ "aria-label": "Content" }}>
+					<Placeholder />
+				</Expandable>
+			</View>);
     },
     play: async ({ canvas, args }) => {
         const { handleAfterClose } = args;
         const trigger = canvas.getByRole("button", { name: "Toggle" });
         const content = canvas.getByRole("region", { hidden: true });
         // Transitions are locked for a frame while the color mode is applied
-        await (0, test_1.waitFor)(() => (0, test_1.expect)((0, animation_1.checkTransitions)()).toBe(true));
-        (0, test_1.expect)(handleAfterClose).not.toBeCalled();
-        await test_1.userEvent.click(trigger);
+        await waitFor(() => expect(checkTransitions()).toBe(true));
+        expect(handleAfterClose).not.toBeCalled();
+        await userEvent.click(trigger);
         // Resolves only once the closing transition is over, not when active changes
-        (0, test_1.expect)(handleAfterClose).not.toBeCalled();
-        (0, test_1.expect)(content).toBeVisible();
-        await (0, test_1.waitFor)(() => (0, test_1.expect)(handleAfterClose).toBeCalledTimes(1));
-        (0, test_1.expect)(content).not.toBeVisible();
-        await test_1.userEvent.click(trigger);
-        await (0, test_1.waitFor)(() => (0, test_1.expect)(content).toBeVisible());
-        (0, test_1.expect)(handleAfterClose).toBeCalledTimes(1);
+        expect(handleAfterClose).not.toBeCalled();
+        expect(content).toBeVisible();
+        await waitFor(() => expect(handleAfterClose).toBeCalledTimes(1));
+        expect(content).not.toBeVisible();
+        await userEvent.click(trigger);
+        await waitFor(() => expect(content).toBeVisible());
+        expect(handleAfterClose).toBeCalledTimes(1);
     },
 };

package/dist/components/FileUpload/FileUpload.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as T from "./FileUpload.types";
+import type * as T from "./FileUpload.types.js";
 export declare const FileUploadTrigger: React.FC<T.TriggerProps>;
 declare const FileUpload: React.FC<T.Props>;
 export default FileUpload;

package/dist/components/FileUpload/FileUpload.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import HiddenVisually from "../../components/HiddenVisually";
-import View from "../../components/View";
-import useToggle from "../../hooks/useToggle";
+import HiddenVisually from "../../components/HiddenVisually/index.js";
+import View from "../../components/View/index.js";
+import useToggle from "../../hooks/useToggle.js";
 import s from "./FileUpload.module.css";
 export const FileUploadTrigger = (props) => {
     const { children } = props;

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

@@ -1,8 +1,8 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { ViewProps } from "../../components/View";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type { ViewProps } from "../../components/View/index.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 export type Props = {
     /** Name of the input element */
     name: string;

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

@@ -1,6 +1,6 @@
-import FileUpload, { FileUploadTrigger } from "./FileUpload";
+import FileUpload, { FileUploadTrigger } from "./FileUpload.js";
 declare const FileUploadRoot: typeof FileUpload & {
     Trigger: typeof FileUploadTrigger;
 };
 export default FileUploadRoot;
-export type { Props as FileUploadProps } from "./FileUpload.types";
+export type { Props as FileUploadProps } from "./FileUpload.types.js";

package/dist/components/FileUpload/index.js

@@ -1,4 +1,4 @@
-import FileUpload, { FileUploadTrigger } from "./FileUpload";
+import FileUpload, { FileUploadTrigger } from "./FileUpload.js";
 const FileUploadRoot = FileUpload;
 FileUploadRoot.Trigger = FileUploadTrigger;
 export default FileUploadRoot;

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

@@ -3,8 +3,8 @@ import React from "react";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.FC<import("../../../components/FileUpload").FileUploadProps> & {
-        Trigger: typeof import("../FileUpload").FileUploadTrigger;
+    component: React.FC<import("../../../components/FileUpload/index.js").FileUploadProps> & {
+        Trigger: typeof import("../FileUpload.js").FileUploadTrigger;
     };
     parameters: {
         iframe: {

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

@@ -1,22 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.testWithButton = exports.className = exports.disabled = exports.onChange = exports.height = exports.inline = exports.base = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const FileUpload_1 = __importDefault(require("../../../components/FileUpload"));
-const Icon_1 = __importDefault(require("../../../components/Icon"));
-const Image_1 = __importDefault(require("../../../components/Image"));
-const Link_1 = __importDefault(require("../../../components/Link"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-const Mic_1 = __importDefault(require("../../../icons/Mic"));
-exports.default = {
+import React from "react";
+import { expect, fn, userEvent } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import FileUpload from "../../../components/FileUpload/index.js";
+import Icon from "../../../components/Icon/index.js";
+import Image from "../../../components/Image/index.js";
+import Link from "../../../components/Link/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+import IconMic from "../../../icons/Mic.js";
+export default {
     title: "Components/FileUpload",
-    component: FileUpload_1.default,
+    component: FileUpload,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/file-upload",
@@ -24,146 +18,146 @@ exports.default = {
     },
 };
 const Demo = () => {
-    const [files, setFiles] = react_1.default.useState([]);
-    return (<View_1.default gap={2}>
-			<FileUpload_1.default name="file" onChange={(args) => setFiles((prev) => [...prev, ...args.value])}>
-				<View_1.default gap={3}>
-					<Icon_1.default svg={Mic_1.default} size={5}/>
+    const [files, setFiles] = React.useState([]);
+    return (<View gap={2}>
+			<FileUpload name="file" onChange={(args) => setFiles((prev) => [...prev, ...args.value])}>
+				<View gap={3}>
+					<Icon svg={IconMic} size={5}/>
 					Drop files to attach
-				</View_1.default>
-			</FileUpload_1.default>
-			<View_1.default paddingBottom={20}>
-				<View_1.default gap={2} direction="row" position="absolute">
+				</View>
+			</FileUpload>
+			<View paddingBottom={20}>
+				<View gap={2} direction="row" position="absolute">
 					{files &&
             Array.from(files).map((file) => {
-                return (<Image_1.default key={file.name} src={URL.createObjectURL(file)} width="60px" height="60px" borderRadius="small"/>);
+                return (<Image key={file.name} src={URL.createObjectURL(file)} width="60px" height="60px" borderRadius="small"/>);
             })}
-				</View_1.default>
-			</View_1.default>
-		</View_1.default>);
+				</View>
+			</View>
+		</View>);
 };
-exports.base = {
+export const base = {
     name: "base",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="Base upload with previews">
+    render: () => (<Example>
+			<Example.Item title="Base upload with previews">
 				<Demo />
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="With trigger">
-				<FileUpload_1.default name="file">
+			</Example.Item>
+			<Example.Item title="With trigger">
+				<FileUpload name="file">
 					<div>
 						Drop files to attach, or{" "}
-						<FileUpload_1.default.Trigger>
-							<Link_1.default variant="plain">browse</Link_1.default>
-						</FileUpload_1.default.Trigger>
+						<FileUpload.Trigger>
+							<Link variant="plain">browse</Link>
+						</FileUpload.Trigger>
 					</div>
-				</FileUpload_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</FileUpload>
+			</Example.Item>
+		</Example>),
 };
-exports.inline = {
+export const inline = {
     name: "inline, variant, render props",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="inline">
-					<FileUpload_1.default name="file" inline onChange={console.log}>
-						<View_1.default padding={2} paddingInline={3}>
+        return (<Example>
+				<Example.Item title="inline">
+					<FileUpload name="file" inline onChange={console.log}>
+						<View padding={2} paddingInline={3}>
 							Upload
-						</View_1.default>
-					</FileUpload_1.default>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="variant headless">
-					<FileUpload_1.default name="file2" variant="headless" onChange={console.log}>
-						<Button_1.default variant="outline" fullWidth>
+						</View>
+					</FileUpload>
+				</Example.Item>
+				<Example.Item title="variant headless">
+					<FileUpload name="file2" variant="headless" onChange={console.log}>
+						<Button variant="outline" fullWidth>
 							Upload
-						</Button_1.default>
-					</FileUpload_1.default>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="variant headless, inline">
-					<FileUpload_1.default name="file2" variant="headless" inline onChange={console.log}>
-						<Button_1.default>Upload</Button_1.default>
-					</FileUpload_1.default>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="inline, render props">
-					<FileUpload_1.default name="file3" variant="headless" inline onChange={console.log}>
-						{(props) => <Button_1.default highlighted={props.highlighted}>Upload</Button_1.default>}
-					</FileUpload_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+						</Button>
+					</FileUpload>
+				</Example.Item>
+				<Example.Item title="variant headless, inline">
+					<FileUpload name="file2" variant="headless" inline onChange={console.log}>
+						<Button>Upload</Button>
+					</FileUpload>
+				</Example.Item>
+				<Example.Item title="inline, render props">
+					<FileUpload name="file3" variant="headless" inline onChange={console.log}>
+						{(props) => <Button highlighted={props.highlighted}>Upload</Button>}
+					</FileUpload>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.height = {
+export const height = {
     name: "height",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="Custom height">
-				<FileUpload_1.default name="file" height="300px">
-					<View_1.default gap={3}>
-						<Icon_1.default svg={Mic_1.default} size={8}/>
+    render: () => (<Example>
+			<Example.Item title="Custom height">
+				<FileUpload name="file" height="300px">
+					<View gap={3}>
+						<Icon svg={IconMic} size={8}/>
 						Drop files to attach
-					</View_1.default>
-				</FileUpload_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</View>
+				</FileUpload>
+			</Example.Item>
+		</Example>),
 };
-exports.onChange = {
+export const onChange = {
     name: "name, onChange",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
     render: (args) => (<div data-testid="root">
-			<FileUpload_1.default name="test-name" onChange={args.handleChange}>
+			<FileUpload name="test-name" onChange={args.handleChange}>
 				Content
-			</FileUpload_1.default>
+			</FileUpload>
 		</div>),
     play: async ({ canvas, args }) => {
         const file = new File(["hello"], "hello.png", { type: "image/png" });
         const input = canvas.getByTestId("root").querySelector("input");
-        await test_1.userEvent.upload(input, file);
-        (0, test_1.expect)(input).toHaveAttribute("name", "test-name");
-        (0, test_1.expect)(input.files?.[0]).toBe(file);
-        (0, test_1.expect)(input.files).toHaveLength(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        await userEvent.upload(input, file);
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input.files?.[0]).toBe(file);
+        expect(input.files).toHaveLength(1);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "test-name",
             value: [file],
-            event: test_1.expect.objectContaining({ target: input }),
+            event: expect.objectContaining({ target: input }),
         });
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
     render: () => (<div data-testid="root">
-			<FileUpload_1.default name="test-name" disabled>
+			<FileUpload name="test-name" disabled>
 				Content
-			</FileUpload_1.default>
+			</FileUpload>
 		</div>),
     play: async ({ canvas }) => {
         const input = canvas.getByTestId("root").querySelector("input");
-        (0, test_1.expect)(input).toBeDisabled();
+        expect(input).toBeDisabled();
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<FileUpload_1.default name="name" className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ id: "test-input-id" }}>
+			<FileUpload name="name" className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ id: "test-input-id" }}>
 				Content
-			</FileUpload_1.default>
+			</FileUpload>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
         const input = canvas.getByTestId("root").querySelector("input");
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
-        (0, test_1.expect)(input).toHaveAttribute("id", "test-input-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
     },
 };
-exports.testWithButton = {
+export const testWithButton = {
     name: "test: with button",
-    render: () => (<FileUpload_1.default name="file">
-			<View_1.default gap={2} direction="row">
-				<FileUpload_1.default.Trigger>
-					<Button_1.default>Upload</Button_1.default>
-				</FileUpload_1.default.Trigger>
-				<Button_1.default onClick={console.log}>Another button</Button_1.default>
-			</View_1.default>
-		</FileUpload_1.default>),
+    render: () => (<FileUpload name="file">
+			<View gap={2} direction="row">
+				<FileUpload.Trigger>
+					<Button>Upload</Button>
+				</FileUpload.Trigger>
+				<Button onClick={console.log}>Another button</Button>
+			</View>
+		</FileUpload>),
 };

package/dist/components/Flyout/Flyout.constants.d.ts

@@ -1,4 +1 @@
 export declare const mouseEnter = 600;
-export declare const mouseLeave = 150;
-export declare const defaultStyles: React.CSSProperties;
-export declare const resetStyles: React.CSSProperties;

package/dist/components/Flyout/Flyout.constants.js

@@ -1,18 +1 @@
 export const mouseEnter = 600;
-export const mouseLeave = 150;
-export const defaultStyles = {
-    left: 0,
-    top: 0,
-    width: "auto",
-    height: "auto",
-    zIndex: "var(--rs-z-index-absolute)",
-};
-export const resetStyles = {
-    left: 0,
-    top: 0,
-    position: "absolute",
-    visibility: "hidden",
-    animation: "none",
-    transition: "none",
-    zIndex: "var(--rs-z-index-absolute)",
-};

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as T from "./Flyout.types";
+import type * as T from "./Flyout.types.js";
 declare const FlyoutContext: React.Context<T.ContextProps>;
 declare const useFlyoutContext: () => T.ContextProps;
 declare const useFlyoutTriggerContext: () => T.TriggerContextProps | null;

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

@@ -1,3 +1,3 @@
-import type * as T from "./Flyout.types";
+import type * as T from "./Flyout.types.js";
 declare const Flyout: React.FC<T.Props>;
 export default Flyout;

package/dist/components/Flyout/Flyout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import FlyoutControlled from "./FlyoutControlled";
-import FlyoutUncontrolled from "./FlyoutUncontrolled";
+import FlyoutControlled from "./FlyoutControlled.js";
+import FlyoutUncontrolled from "./FlyoutUncontrolled.js";
 const Flyout = (props) => {
     const { active } = props;
     if (typeof active === "boolean")

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

@@ -1 +1 @@
-.positioner{--rs-flyout-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-z-index:var(--rs-z-index-absolute);--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;position:absolute;isolation:isolate;z-index:var(--rs-flyout-z-index);display:flex;flex-direction:column;pointer-events:none}.positioner.--hover{pointer-events:all}.positioner.--hover-disabled,.positioner.--hover-disabled .content{pointer-events:none}.content{pointer-events:all;opacity:0;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);outline:none;height:100%;max-width:var(--rs-flyout-max-w);max-height:var(--rs-flyout-max-h);backface-visibility:hidden;flex-grow:1;display:flex;flex-direction:column;transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .content:focus{box-shadow:var(--rs-outline-shadow)}.positioner.--width-trigger .content{transform:scale(1) translateY(var(--rs-unit-x2))}.positioner.--position-top,.positioner.--position-top-end,.positioner.--position-top-start{--rs-flyout-origin-y:100%}.positioner.--position-bottom,.positioner.--position-bottom-end,.positioner.--position-bottom-start{--rs-flyout-origin-y:0%}.positioner.--position-bottom-start,.positioner.--position-top-start{--rs-flyout-origin-x:0%}.positioner.--position-bottom-end,.positioner.--position-start,.positioner.--position-start-bottom,.positioner.--position-start-top,.positioner.--position-top-end{--rs-flyout-origin-x:100%}.positioner.--position-end,.positioner.--position-end-bottom,.positioner.--position-end-top{--rs-flyout-origin-x:0%}.positioner.--position-end-top,.positioner.--position-start-top{--rs-flyout-origin-y:0%}.positioner.--position-end-bottom,.positioner.--position-start-bottom{--rs-flyout-origin-y:100%}.positioner.--visible .content{opacity:1;transform:scale(1) translateY(0)}.positioner.--animated .content{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.positioner.--animated.--visible .content{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}
+.positioner{--rs-flyout-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-z-index:var(--rs-z-index-absolute);--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;position:absolute;isolation:isolate;z-index:var(--rs-flyout-z-index);display:flex;flex-direction:column;pointer-events:none}.positioner.--hover{pointer-events:all}.positioner.--hover-disabled,.positioner.--hover-disabled .content{pointer-events:none}.content{pointer-events:all;opacity:0;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);outline:none;height:100%;max-width:var(--rs-flyout-max-w);max-height:var(--rs-flyout-max-h);backface-visibility:hidden;flex-grow:1;display:flex;flex-direction:column;transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .content:focus{box-shadow:var(--rs-outline-shadow)}.positioner.--width-trigger .content{transform:scale(1) translateY(var(--rs-unit-x2))}.positioner.--position-top,.positioner.--position-top-end,.positioner.--position-top-start{--rs-flyout-origin-y:100%}.positioner.--position-bottom,.positioner.--position-bottom-end,.positioner.--position-bottom-start{--rs-flyout-origin-y:0%}.positioner.--position-bottom-start,.positioner.--position-top-start{--rs-flyout-origin-x:0%}.positioner.--position-bottom-end,.positioner.--position-start,.positioner.--position-start-bottom,.positioner.--position-start-top,.positioner.--position-top-end{--rs-flyout-origin-x:100%}.positioner.--position-end,.positioner.--position-end-bottom,.positioner.--position-end-top{--rs-flyout-origin-x:0%}.positioner.--position-end-top,.positioner.--position-start-top{--rs-flyout-origin-y:0%}.positioner.--position-end-bottom,.positioner.--position-start-bottom{--rs-flyout-origin-y:100%}.positioner.--visible .content{opacity:1;transform:scale(1) translateY(0);pointer-events:all}.positioner.--animated .content{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.positioner.--animated.--visible .content{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}

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

@@ -1,8 +1,8 @@
 import React from "react";
 import type { ClassName } from "@reshaped/utilities";
 import type { Coordinates, TrapMode } from "@reshaped/utilities/internal";
-import type * as G from "../../types/global";
-import { ThemeProps } from "../Theme";
+import type * as G from "../../types/global.js";
+import { ThemeProps } from "../Theme/index.js";
 /**
  * Utility
  */
@@ -106,6 +106,8 @@ type BaseProps = {
     disableContentHover?: boolean;
     /** Disable the flyout content close on outside click */
     disableCloseOnOutsideClick?: boolean;
+    /** Ignore touch interactions with the trigger when triggerType is hover, the content still opens with keyboard focus */
+    disableTouchTrigger?: boolean;
     /** Automatically focus the first focusable element in the content, when false the content container will be focused instead
      * @default true
      */
@@ -180,6 +182,7 @@ export type ContentProps = {
 };
 export type ContextProps = {
     id: string;
+    active: boolean;
     flyout: UseFlyoutData;
     width?: Width;
     triggerElRef?: React.RefObject<HTMLButtonElement | null>;

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Flyout.types";
+import type * as T from "./Flyout.types.js";
 declare const FlyoutContent: React.FC<T.ContentProps>;
 export default FlyoutContent;