reshaped 3.8.0-canary.6 → 3.8.0-canary.8

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{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-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/utilities/flyout.js

@@ -64,7 +64,6 @@ const flyout = (args) => {
             flyoutBounds: calculated.boundaries,
             visualContainerBounds,
             renderContainerBounds,
-            container,
         });
     };
     let calculated = null;

package/dist/components/Flyout/utilities/getPositionFallbacks.js

@@ -14,7 +14,7 @@ const fallbackOrder = {
 };
 // Get an order of positions to try to fit flyout on the screen based on its starting position
 const getPositionFallbacks = (position, availableFallbacks) => {
-    const result = [position];
+    const result = new Set([position]);
     const chunks = position.split("-");
     const [firstChunk] = chunks;
     const passedPositionOrder = positions[firstChunk];
@@ -31,9 +31,9 @@ const getPositionFallbacks = (position, availableFallbacks) => {
             const position = fallbackOrder[index];
             if (availableFallbacks?.indexOf(position) === -1)
                 return;
-            result.push(position);
+            result.add(position);
         });
     });
-    return result;
+    return Array.from(result);
 };
 export default getPositionFallbacks;

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

@@ -8,7 +8,5 @@ declare const isFullyVisible: (args: {
     visualContainerBounds: DOMRect;
     /** Bounds of the container where flyout content is rendered */
     renderContainerBounds: DOMRect;
-    /** Container where the flyout content is rendered */
-    container: HTMLElement;
 }) => boolean;
 export default isFullyVisible;

package/dist/components/Flyout/utilities/isFullyVisible.js

@@ -2,20 +2,18 @@
  * Check if element visually fits within its render container
  */
 const isFullyVisible = (args) => {
-    const { flyoutBounds, visualContainerBounds, renderContainerBounds, container } = args;
-    const scrollX = container === document.body ? window.scrollX : container.scrollLeft;
-    const scrollY = container === document.body ? window.scrollY : container.scrollTop;
-    if (renderContainerBounds.left + flyoutBounds.left - scrollX < visualContainerBounds.left) {
+    const { flyoutBounds, visualContainerBounds, renderContainerBounds } = args;
+    if (renderContainerBounds.left + flyoutBounds.left < visualContainerBounds.left) {
         return false;
     }
-    if (renderContainerBounds.top + flyoutBounds.top - scrollY < visualContainerBounds.top) {
+    if (renderContainerBounds.top + flyoutBounds.top < visualContainerBounds.top) {
         return false;
     }
-    if (renderContainerBounds.left + flyoutBounds.left + flyoutBounds.width - scrollX >
+    if (renderContainerBounds.left + flyoutBounds.left + flyoutBounds.width >
         visualContainerBounds.right) {
         return false;
     }
-    if (renderContainerBounds.top + flyoutBounds.top + flyoutBounds.height - scrollY >
+    if (renderContainerBounds.top + flyoutBounds.top + flyoutBounds.height >
         visualContainerBounds.bottom) {
         return false;
     }

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

@@ -27,3 +27,5 @@ export declare const composition: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const className: StoryObj;
+export declare const group: StoryObj;

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

@@ -3,6 +3,8 @@ import { Example } from "../../../utilities/storybook/index.js";
 import FormControl from "../index.js";
 import TextField from "../../TextField/index.js";
 import View from "../../View/index.js";
+import RadioGroup from "../../RadioGroup/index.js";
+import Radio from "../../Radio/index.js";
 export default {
     title: "Utility components/FormControl",
     component: FormControl,
@@ -106,3 +108,36 @@ export const composition = {
 			</Example.Item>
 		</Example>),
 };
+export const className = {
+    name: "className, attributes",
+    render: () => (<FormControl id="test-id" hasError>
+			<FormControl.Label>Label</FormControl.Label>
+			<TextField name="name"/>
+			<FormControl.Helper>Caption</FormControl.Helper>
+			<FormControl.Error>Error</FormControl.Error>
+		</FormControl>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        const label = canvas.getByText("Label");
+        expect(input).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("aria-describedby", `test-id-caption test-id-error`);
+        expect(label).toHaveAttribute("for", "test-id");
+        expect(label).toHaveAttribute("id", `test-id-label`);
+    },
+};
+export const group = {
+    name: "group",
+    render: () => (<FormControl group>
+			<FormControl.Label>Label</FormControl.Label>
+			<RadioGroup name="name">
+				<View gap={2}>
+					<Radio value="1">One</Radio>
+					<Radio value="2">Two</Radio>
+				</View>
+			</RadioGroup>
+		</FormControl>),
+    play: async ({ canvas }) => {
+        const group = canvas.getByRole("group");
+        expect(group).toBeInTheDocument();
+    },
+};