reshaped 3.8.0-canary.7 → 3.8.0-canary.9

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/FlyoutContent.js

@@ -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

@@ -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,13 +55,16 @@ 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,

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

@@ -71,7 +71,6 @@ const flyout = (args) => {
     testOrder.some((currentPosition) => {
         const tested = applyPosition(currentPosition);
         const visible = testVisibility(tested);
-        console.log(currentPosition, tested, visible ? "yes" : "no");
         if (visible)
             calculated = tested;
         return visible;

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

@@ -51,7 +51,7 @@ export declare const useFormControl: () => {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;

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

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").HiddenProps>;
@@ -12,3 +13,4 @@ export declare const visibility: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const as: StoryObj;