reshaped 3.8.0-canary.0 → 3.8.0-canary.10

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

@@ -4,6 +4,8 @@ import DropdownMenu from "../index.js";
 import View from "../../View/index.js";
 import { useTheme } from "../../Theme/useTheme.js";
 import IconCheckmark from "../../../icons/Checkmark.js";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import { sleep } from "../../../utilities/helpers.js";
 export default {
     title: "Components/DropdownMenu",
     component: DropdownMenu,
@@ -13,125 +15,227 @@ export default {
         },
     },
 };
-export const position = () => (<Example>
-		<Example.Item title="position: default">
-			<DropdownMenu>
-				<DropdownMenu.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
-					<DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
-					<DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
-				</DropdownMenu.Content>
-			</DropdownMenu>
-		</Example.Item>
+export const position = {
+    name: "position",
+    render: () => (<Example>
+			<Example.Item title="position: default">
+				<DropdownMenu>
+					<DropdownMenu.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open</Button>}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
+						<DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu>
+			</Example.Item>
 
-		<Example.Item title="position: end">
-			<DropdownMenu position="end">
-				<DropdownMenu.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
-					<DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
-					<DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
-				</DropdownMenu.Content>
-			</DropdownMenu>
-		</Example.Item>
+			<Example.Item title="position: end">
+				<DropdownMenu position="end">
+					<DropdownMenu.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open</Button>}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
+						<DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu>
+			</Example.Item>
 
-		<Example.Item title={["position: top-start", "should change to top-start to fit viewport"]}>
-			<DropdownMenu position="top-end">
-				<DropdownMenu.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
-					<DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
-					<DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
-				</DropdownMenu.Content>
-			</DropdownMenu>
-		</Example.Item>
-		<div style={{ height: 2000 }}/>
-	</Example>);
-export const sections = () => (<Example>
-		<Example.Item title="2 sections">
-			<DropdownMenu>
-				<DropdownMenu.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
-					<DropdownMenu.Section>
-						<DropdownMenu.Item>Item 1</DropdownMenu.Item>
-						<DropdownMenu.Item>Item 2</DropdownMenu.Item>
-					</DropdownMenu.Section>
+			<Example.Item title={["position: top-start", "should change to top-start to fit viewport"]}>
+				<DropdownMenu position="top-end">
+					<DropdownMenu.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open</Button>}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
+						<DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu>
+			</Example.Item>
+			<div style={{ height: 2000 }}/>
+		</Example>),
+};
+export const sections = {
+    name: "sections",
+    render: () => (<Example>
+			<Example.Item title="2 sections">
+				<DropdownMenu>
+					<DropdownMenu.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open</Button>}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.Section>
+							<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+						</DropdownMenu.Section>
 
-					<DropdownMenu.Section>
-						<DropdownMenu.Item>Item 3</DropdownMenu.Item>
-						<DropdownMenu.Item>Item 4</DropdownMenu.Item>
-					</DropdownMenu.Section>
-				</DropdownMenu.Content>
-			</DropdownMenu>
-		</Example.Item>
-	</Example>);
-export const submenu = () => (<Example>
-		<Example.Item title="submenu">
-			<DropdownMenu>
-				<DropdownMenu.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
-					<DropdownMenu.Item onClick={() => { }}>Item 1</DropdownMenu.Item>
-					<DropdownMenu.SubMenu>
-						<DropdownMenu.SubTrigger>Item 2</DropdownMenu.SubTrigger>
-						<DropdownMenu.Content>
-							<DropdownMenu.Item onClick={() => { }}>SubItem 1</DropdownMenu.Item>
-							<DropdownMenu.Item onClick={() => { }}>SubItem 2</DropdownMenu.Item>
-						</DropdownMenu.Content>
-					</DropdownMenu.SubMenu>
-					<DropdownMenu.SubMenu>
-						<DropdownMenu.SubTrigger>Item 3</DropdownMenu.SubTrigger>
-						<DropdownMenu.Content>
-							<DropdownMenu.Item onClick={() => { }}>SubItem 2-1</DropdownMenu.Item>
-							<DropdownMenu.Item onClick={() => { }}>SubItem 2-2</DropdownMenu.Item>
-						</DropdownMenu.Content>
-					</DropdownMenu.SubMenu>
+						<DropdownMenu.Section>
+							<DropdownMenu.Item>Item 3</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 4</DropdownMenu.Item>
+						</DropdownMenu.Section>
+					</DropdownMenu.Content>
+				</DropdownMenu>
+			</Example.Item>
+		</Example>),
+};
+export const submenu = {
+    name: "submenu",
+    render: () => (<Example>
+			<Example.Item title="submenu">
+				<DropdownMenu>
+					<DropdownMenu.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open</Button>}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.Item onClick={() => { }}>Item 1</DropdownMenu.Item>
+						<DropdownMenu.SubMenu>
+							<DropdownMenu.SubTrigger>Item 2</DropdownMenu.SubTrigger>
+							<DropdownMenu.Content>
+								<DropdownMenu.Item onClick={() => { }}>SubItem 1</DropdownMenu.Item>
+								<DropdownMenu.Item onClick={() => { }}>SubItem 2</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.SubMenu>
+						<DropdownMenu.SubMenu>
+							<DropdownMenu.SubTrigger>Item 3</DropdownMenu.SubTrigger>
+							<DropdownMenu.Content>
+								<DropdownMenu.Item onClick={() => { }}>SubItem 2-1</DropdownMenu.Item>
+								<DropdownMenu.Item onClick={() => { }}>SubItem 2-2</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.SubMenu>
 
-					<DropdownMenu.SubMenu>
-						<DropdownMenu.SubTrigger disabled>Item 4, disabled</DropdownMenu.SubTrigger>
-						<DropdownMenu.Content>
-							<DropdownMenu.Item onClick={() => { }}>SubItem 3-1</DropdownMenu.Item>
-							<DropdownMenu.Item onClick={() => { }}>SubItem 3-2</DropdownMenu.Item>
-						</DropdownMenu.Content>
-					</DropdownMenu.SubMenu>
-				</DropdownMenu.Content>
-			</DropdownMenu>
-		</Example.Item>
-	</Example>);
-export const state = () => (<Example>
-		<Example.Item title="defaultActive">
-			<DropdownMenu defaultActive>
-				<DropdownMenu.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
-					<DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
-					<DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
-				</DropdownMenu.Content>
-			</DropdownMenu>
-		</Example.Item>
-	</Example>);
-export const testScroll = () => (<Example>
-		<Example.Item title="Scrolls on page mount to the dropdown">
-			<div style={{ height: 1000 }}/>
-			<DropdownMenu position="end" key="scroll" defaultActive>
+						<DropdownMenu.SubMenu>
+							<DropdownMenu.SubTrigger disabled>Item 4, disabled</DropdownMenu.SubTrigger>
+							<DropdownMenu.Content>
+								<DropdownMenu.Item onClick={() => { }}>SubItem 3-1</DropdownMenu.Item>
+								<DropdownMenu.Item onClick={() => { }}>SubItem 3-2</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.SubMenu>
+					</DropdownMenu.Content>
+				</DropdownMenu>
+			</Example.Item>
+		</Example>),
+};
+export const defaultActive = {
+    name: "defaultActive, uncontrolled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
+			<DropdownMenu.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content>
+				<DropdownMenu.Item>Item</DropdownMenu.Item>
+			</DropdownMenu.Content>
+		</DropdownMenu>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        let item = canvas.getByText("Item");
+        await sleep(500);
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+            expect(item).not.toBeInTheDocument();
+        });
+        await userEvent.click(trigger);
+        item = canvas.getByText("Item");
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+            expect(item).toBeInTheDocument();
+        });
+    },
+};
+export const active = {
+    name: "active, controlled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} active>
+			<DropdownMenu.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content>
+				<DropdownMenu.Item>Item</DropdownMenu.Item>
+			</DropdownMenu.Content>
+		</DropdownMenu>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const item = canvas.getByText("Item");
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+        });
+        expect(item).toBeInTheDocument();
+    },
+};
+export const activeFalse = {
+    name: "active false, controlled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
+			<DropdownMenu.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content>
+				<DropdownMenu.Item>Item</DropdownMenu.Item>
+			</DropdownMenu.Content>
+		</DropdownMenu>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        const item = canvas.queryByText("Item");
+        expect(item).not.toBeInTheDocument();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<DropdownMenu active>
 				<DropdownMenu.Trigger>
 					{(attributes) => <Button attributes={attributes}>Open</Button>}
 				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
-					<DropdownMenu.Item>Item 1</DropdownMenu.Item>
-					<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+				<DropdownMenu.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
+					<DropdownMenu.Item>Item</DropdownMenu.Item>
 				</DropdownMenu.Content>
 			</DropdownMenu>
-		</Example.Item>
-	</Example>);
+		</div>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const menu = await canvas.findByTestId("test-id");
+        expect(menu).toHaveClass("test-classname");
+    },
+};
+export const testScroll = {
+    name: "test: scroll",
+    render: () => (<Example>
+			<Example.Item title="Scrolls on page mount to the dropdown">
+				<div style={{ height: 1000 }}/>
+				<DropdownMenu position="end" key="scroll" defaultActive>
+					<DropdownMenu.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open</Button>}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+						<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu>
+			</Example.Item>
+		</Example>),
+};
 const ThemeSwitching = () => {
     const { invertColorMode } = useTheme();
     return (<View gap={3} direction="row">
@@ -147,8 +251,11 @@ const ThemeSwitching = () => {
 			<Button onClick={() => invertColorMode()}>Switch color mode</Button>
 		</View>);
 };
-export const testThemeSwitching = () => (<Example>
-		<Example.Item title="Switch color mode while dropdown is active and check that it still works">
-			<ThemeSwitching />
-		</Example.Item>
-	</Example>);
+export const testThemeSwitching = {
+    name: "test: theme switching",
+    render: () => (<Example>
+			<Example.Item title="Switch color mode while dropdown is active and check that it still works">
+				<ThemeSwitching />
+			</Example.Item>
+		</Example>),
+};

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

@@ -1,5 +1,3 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").DropdownMenuProps> & {
@@ -21,16 +19,3 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const defaultActive: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const active: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const activeFalse: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;

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

@@ -1,7 +1,4 @@
-import { expect, fn, userEvent, waitFor, within } from "storybook/test";
-import Button from "../../Button/index.js";
 import DropdownMenu from "../index.js";
-import { sleep } from "../../../utilities/helpers.js";
 export default {
     title: "Components/DropdownMenu/tests",
     component: DropdownMenu,
@@ -12,106 +9,3 @@ export default {
         chromatic: { disableSnapshot: true },
     },
 };
-export const defaultActive = {
-    name: "defaultActive, uncontrolled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
-			<DropdownMenu.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Content>
-				<DropdownMenu.Item>Item</DropdownMenu.Item>
-			</DropdownMenu.Content>
-		</DropdownMenu>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        let item = canvas.getByText("Item");
-        await sleep(500);
-        await userEvent.click(document.body);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-            expect(item).not.toBeInTheDocument();
-        });
-        await userEvent.click(trigger);
-        item = canvas.getByText("Item");
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-            expect(item).toBeInTheDocument();
-        });
-    },
-};
-export const active = {
-    name: "active, controlled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} active>
-			<DropdownMenu.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Content>
-				<DropdownMenu.Item>Item</DropdownMenu.Item>
-			</DropdownMenu.Content>
-		</DropdownMenu>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const item = canvas.getByText("Item");
-        await userEvent.click(document.body);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-        });
-        expect(item).toBeInTheDocument();
-    },
-};
-export const activeFalse = {
-    name: "active false, controlled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
-			<DropdownMenu.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Content>
-				<DropdownMenu.Item>Item</DropdownMenu.Item>
-			</DropdownMenu.Content>
-		</DropdownMenu>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        await userEvent.click(trigger);
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-        });
-        const item = canvas.queryByText("Item");
-        expect(item).not.toBeInTheDocument();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<DropdownMenu active>
-				<DropdownMenu.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
-					<DropdownMenu.Item>Item</DropdownMenu.Item>
-				</DropdownMenu.Content>
-			</DropdownMenu>
-		</div>),
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const menu = await canvas.findByTestId("test-id");
-        expect(menu).toHaveClass("test-classname");
-    },
-};

package/dist/components/FileUpload/FileUpload.module.css

@@ -1 +1 @@
-.root{--rs-file-upload-radius:var(--rs-radius-medium);display:block}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-focus-shadow)}.--inline{--rs-file-upload-radius:var(--rs-radius-small)}.--inline,.--inline .triggerLayer{display:inline-block;vertical-align:top}[data-rs-keyboard] .--inline:focus-within{box-shadow:none}[data-rs-keyboard] .--inline:focus-within .triggerLayer>*{box-shadow:var(--rs-focus-shadow)}.--variant-outline .triggerLayer{border:1px dashed var(--rs-color-border-neutral);border-radius:var(--rs-file-upload-radius)}.--highlighted.--variant-outline .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),.08);border-color:var(--rs-color-border-primary)}@media (hover:hover) and (pointer:fine){.--variant-outline .triggerLayer:hover:not(:has(.trigger)){background:rgba(var(--rs-color-rgb-background-neutral),.16)}}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger{pointer-events:all}.trigger{display:contents}
+.root{--rs-file-upload-radius:var(--rs-radius-medium);display:block}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-shadow-focus)}.--inline{--rs-file-upload-radius:var(--rs-radius-small)}.--inline,.--inline .triggerLayer{display:inline-block;vertical-align:top}[data-rs-keyboard] .--inline:focus-within{box-shadow:none}[data-rs-keyboard] .--inline:focus-within .triggerLayer>*{box-shadow:var(--rs-shadow-focus)}.--variant-outline .triggerLayer{border:1px dashed var(--rs-color-border-neutral);border-radius:var(--rs-file-upload-radius)}.--highlighted.--variant-outline .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),.08);border-color:var(--rs-color-border-primary)}@media (hover:hover) and (pointer:fine){.--variant-outline .triggerLayer:hover:not(:has(.trigger)){background:rgba(var(--rs-color-rgb-background-neutral),.16)}}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger{pointer-events:all}.trigger{display:contents}

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

@@ -1 +1 @@
-.content{--rs-flyout-gap:0;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{opacity:0;outline:none;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)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-focus-shadow)}.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{--rs-flyout-gap:0;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;height:100%;max-height:100%;max-width:100%;opacity:0;outline:none;overflow:auto;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-shadow-focus)}.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/Flyout/Flyout.types.d.ts

@@ -15,16 +15,13 @@ export type CloseReason = "escape-key" | "outside-click"
  | "item-selection" | "close-button";
 export type Position = `${YSide}` | `${YSide}-${XSide}` | `${XSide}` | `${XSide}-${YSide}`;
 export type Width = "trigger" | string;
-export type Options = {
-    width?: Width;
+export type Options = Pick<BaseProps, "width" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "contentGap" | "contentShift"> & {
     position: Position;
+    fallbackPositions?: Position[];
     container?: HTMLElement | null;
     rtl: boolean;
-    fallbackPositions?: Position[];
     lastUsedPosition: Position;
     onPositionChoose: (position: Position) => void;
-    contentGap?: number;
-    contentShift?: number;
 };
 export type Styles = React.CSSProperties;
 export type State = {
@@ -99,6 +96,12 @@ type BaseProps = {
     forcePosition?: boolean;
     /** Fallback positions for the content when it doesn't fit into the viewport or container */
     fallbackPositions?: Position[] | false;
+    /** Adjust the content size and shift its position to fit into the container when none of the fallback positions work */
+    fallbackAdjustLayout?: boolean;
+    /** Minimum width for the content when fallbackAdjustLayout is true */
+    fallbackMinWidth?: string;
+    /** Minimum height for the content when fallbackAdjustLayout is true */
+    fallbackMinHeight?: string;
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: TrapMode | false;
     /** Disable the flyout content interactivity */
@@ -184,7 +187,7 @@ export type ContextProps = {
     handleContentMouseDown: () => void;
     handleContentMouseUp: () => void;
     isSubmenu: boolean;
-} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "trapFocusMode" | "contentGap" | "contentShift" | "containerRef" | "disableContentHover" | "autoFocus">;
+} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
 export type TriggerContextProps = {
     elRef?: ContextProps["triggerElRef"];
 };

package/dist/components/Flyout/FlyoutContent.js

@@ -11,7 +11,7 @@ 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, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
     const { styles, status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     const closestFixedContainer = React.useMemo(() => {
@@ -19,13 +19,16 @@ const FlyoutContent = (props) => {
             return null;
         if (!triggerElRef)
             return null;
+        // eslint-disable-next-line react-hooks/refs
         return findClosestPositionContainer({ el: triggerElRef.current });
     }, [mounted, triggerElRef]);
     const closestScrollableContainer = React.useMemo(() => {
         if (!mounted)
             return;
+        // eslint-disable-next-line react-hooks/refs
         if (!triggerElRef?.current)
             return;
+        // eslint-disable-next-line react-hooks/refs
         return findClosestScrollableContainer({ el: triggerElRef.current });
     }, [mounted, triggerElRef]);
     const containerRef = passedContainerRef || { current: closestFixedContainer };

package/dist/components/Flyout/FlyoutControlled.js

@@ -15,7 +15,7 @@ import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -34,7 +34,9 @@ const FlyoutControlled = (props) => {
      * Resolving the same inside another Flyout.Content should reset the inheritance
      * For example, if you have a tooltip -> popover inside another popover.content, tooltip shouldn't use its parent context anymore
      */
-    const isParentTriggerInsideFlyout = !!parentTriggerRef?.current && parentContentRef?.current?.contains(parentTriggerRef.current);
+    const isParentTriggerInsideFlyout = 
+    // eslint-disable-next-line react-hooks/refs
+    !!parentTriggerRef?.current && parentContentRef?.current?.contains(parentTriggerRef.current);
     const tryParentTrigger = !parentContentRef || isParentTriggerInsideFlyout;
     const triggerElRef = (tryParentTrigger && parentTriggerRef) || internalTriggerElRef;
     const triggerBoundsRef = React.useRef(null);
@@ -53,15 +55,21 @@ const FlyoutControlled = (props) => {
     // Touch devices trigger onMouseEnter but we don't need to apply regular hover timeouts
     // So we're saving a flag on touch start and then change the mouse enter behavior
     const hoverTriggeredWithTouchEventRef = React.useRef(false);
+    // eslint-disable-next-line react-hooks/refs
     const flyout = useFlyout({
         triggerElRef,
         flyoutElRef,
+        // eslint-disable-next-line react-hooks/refs
         triggerBounds: originCoordinates ?? triggerBoundsRef.current,
         width,
         position: passedPosition,
         defaultActive: resolvedActive,
+        // eslint-disable-next-line react-hooks/refs
         container: containerRef?.current,
         fallbackPositions,
+        fallbackAdjustLayout,
+        fallbackMinWidth,
+        fallbackMinHeight,
         contentGap,
         contentShift,
     });
@@ -321,9 +329,9 @@ const FlyoutControlled = (props) => {
             handleContentMouseUp,
             triggerType,
             trapFocusMode,
-            contentGap,
             contentClassName,
             contentAttributes,
+            contentGap,
             containerRef,
             disableContentHover,
             autoFocus,

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

@@ -1,3 +1,3 @@
 export { default } from "./Flyout";
 export { useFlyoutContext } from "./Flyout.context";
-export type { Props as FlyoutProps, Instance as FlyoutInstance, TriggerProps as FlyoutTriggerProps, ContentProps as FlyoutContentProps, CloseReason as FlyoutCloseReason, } from "./Flyout.types";
+export type { Props as FlyoutProps, Instance as FlyoutInstance, TriggerProps as FlyoutTriggerProps, ContentProps as FlyoutContentProps, CloseReason as FlyoutCloseReason, TriggerAttributes as FlyoutTriggerAttributes, } from "./Flyout.types";