reshaped 3.8.0-canary.2 → 3.8.0-canary.21

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

@@ -17,7 +17,7 @@ const Content = (props) => (<div style={{
         background: "var(--rs-color-background-elevation-overlay)",
         padding: "var(--rs-unit-x4)",
         height: props.height === false ? undefined : props.height || 150,
-        minWidth: props.width === false ? undefined : props.width || 160,
+        width: props.width === false ? undefined : props.width || 160,
         borderRadius: "var(--rs-radius-medium)",
         border: "1px solid var(--rs-color-border-neutral-faded)",
         boxSizing: "border-box",
@@ -30,10 +30,18 @@ const Demo = (props) => {
 			<Flyout.Trigger>
 				{(attributes) => <Button attributes={attributes}>{text || position}</Button>}
 			</Flyout.Trigger>
-			<Flyout.Content>
-				<Content height={contentHeight} width={contentWidth}>
-					{children}
-				</Content>
+			<Flyout.Content attributes={{
+            style: {
+                background: "var(--rs-color-background-elevation-overlay)",
+                padding: "var(--rs-unit-x4)",
+                height: contentHeight === false ? undefined : contentHeight || 150,
+                width: contentWidth === false ? undefined : contentWidth || 160,
+                borderRadius: "var(--rs-radius-medium)",
+                border: "1px solid var(--rs-color-border-neutral-faded)",
+                boxSizing: "border-box",
+            },
+        }}>
+				{children || "Content"}
 			</Flyout.Content>
 		</Flyout>);
 };
@@ -222,42 +230,58 @@ export const positionFallbacks = {
 			</Example>);
     },
 };
-const FallbackAdjustLayoutControls = ({ containerRef, }) => (<>
-		{/* Left side */}
-		<View position="absolute" insetStart={4} insetTop={10} gap={2}>
-			<Demo contentHeight="200px" position="end" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
-			<Demo contentHeight="200px" position="end-bottom" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
-		</View>
+const FallbackAdjustLayoutControls = ({ containerRef, large, }) => {
+    const contentHeight = large ? "2000px" : "200px";
+    const contentWidth = large ? "2000px" : "300px";
+    return (<>
+			{/* Left side */}
+			<View position="absolute" insetStart={4} insetTop={10} gap={2}>
+				<Demo contentHeight={contentHeight} position="end" fallbackAdjustLayout fallbackPositions={false} containerRef={containerRef}/>
+				<Demo contentHeight={contentHeight} position="end-bottom" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+			</View>
 
-		<View position="absolute" insetStart={4} insetTop={80} gap={2}>
-			<Demo position="bottom-end" fallbackPositions={false} fallbackAdjustLayout contentWidth={300} containerRef={containerRef}/>
-			<Demo position="bottom" fallbackPositions={false} fallbackAdjustLayout contentWidth={300} containerRef={containerRef}/>
-		</View>
+			<View position="absolute" insetStart={4} insetTop={80} gap={2}>
+				<Demo position="top" fallbackPositions={false} fallbackAdjustLayout contentWidth={contentWidth} containerRef={containerRef}/>
+				<Demo position="top-end" fallbackPositions={false} fallbackAdjustLayout contentWidth={contentWidth} containerRef={containerRef}/>
+				<Demo position="bottom-end" fallbackPositions={false} fallbackAdjustLayout contentWidth={contentWidth} containerRef={containerRef}/>
+				<Demo position="bottom" fallbackPositions={false} fallbackAdjustLayout contentWidth={contentWidth} containerRef={containerRef}/>
+			</View>
 
-		<View position="absolute" insetBottom={4} insetStart={4} gap={2}>
-			<Demo contentHeight="200px" position="end-top" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
-			<Demo contentHeight="200px" position="end" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
-		</View>
+			<View position="absolute" insetBottom={4} insetStart={4} gap={2}>
+				<Demo contentHeight={contentHeight} position="end-top" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+				<Demo contentHeight={contentHeight} position="end" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+			</View>
 
-		{/* Right side */}
+			{/* Right side */}
 
-		<View position="absolute" insetTop={10} insetEnd={4} gap={2}>
-			<Demo contentHeight="200px" position="start" fallbackPositions={false} fallbackAdjustLayout/>
-			<Demo contentHeight="200px" position="start-bottom" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
-		</View>
+			<View position="absolute" insetTop={10} insetEnd={4} gap={2}>
+				<Demo contentHeight={contentHeight} position="start" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+				<Demo contentHeight={contentHeight} position="start-bottom" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+			</View>
 
-		<View position="absolute" insetEnd={4} insetTop={80} gap={2}>
-			<Demo position="top-start" fallbackPositions={false} fallbackAdjustLayout contentWidth={300} containerRef={containerRef}/>
-			<Demo position="top" fallbackPositions={false} fallbackAdjustLayout contentWidth={300} containerRef={containerRef}/>
-		</View>
+			<View position="absolute" insetEnd={4} insetTop={80} gap={2}>
+				<Demo position="top-start" fallbackPositions={false} fallbackAdjustLayout contentWidth={contentWidth} containerRef={containerRef}/>
+				<Demo position="top" fallbackPositions={false} fallbackAdjustLayout contentWidth={contentWidth} containerRef={containerRef}/>
+				<Demo position="bottom-start" fallbackPositions={false} fallbackAdjustLayout contentWidth={contentWidth} containerRef={containerRef}/>
+				<Demo position="bottom" fallbackPositions={false} fallbackAdjustLayout contentWidth={contentWidth} containerRef={containerRef}/>
+			</View>
 
-		<View position="absolute" insetBottom={4} insetEnd={4} gap={2}>
-			<Demo contentHeight="200px" position="start-top" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
-			<Demo contentHeight="200px" position="start" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
-		</View>
-	</>);
+			<View position="absolute" insetBottom={4} insetEnd={4} gap={2}>
+				<Demo contentHeight={contentHeight} position="start-top" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+				<Demo contentHeight={contentHeight} position="start" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+			</View>
+		</>);
+};
 export const fallbackAdjustLayout = {
     name: "fallbackAdjustLayout",
+    render: () => {
+        return (<Demo contentHeight={false} position="bottom-start" width="200px" fallbackAdjustLayout defaultActive>
+				<div style={{ height: "600px" }}>Content</div>
+			</Demo>);
+    },
+};
+export const fallbackAdjustLayoutShift = {
+    name: "fallbackAdjustLayout, shift",
     render: () => {
         const containerRef = React.useRef(null);
         return (<View gap={10}>
@@ -280,6 +304,30 @@ export const fallbackAdjustLayout = {
 			</View>);
     },
 };
+export const fallbackAdjustLayoutSize = {
+    name: "fallbackAdjustLayout, size",
+    render: () => {
+        const containerRef = React.useRef(null);
+        return (<View gap={10}>
+				<View height="95vh" width="100%" align="center" justify="center">
+					<View backgroundColor="neutral-faded" borderRadius="medium" height="1000px" width="600px" padding={4} paddingBlock={15} overflow="auto">
+						<FallbackAdjustLayoutControls large/>
+						<View height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
+					</View>
+				</View>
+
+				<View height="95vh" width="100%" align="center" justify="center">
+					<View backgroundColor="neutral-faded" borderRadius="medium" height="1000px" width="600px" attributes={{ ref: containerRef }} padding={4} paddingBlock={15} overflow="auto">
+						<FallbackAdjustLayoutControls containerRef={containerRef} large/>
+						<View height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
+					</View>
+				</View>
+
+				<FallbackAdjustLayoutControls large/>
+				<div style={{ height: "100vh", width: "250%" }}/>
+			</View>);
+    },
+};
 export const originCoordinates = {
     name: "originCoordinates",
     render: () => {

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

@@ -1,14 +1,8 @@
 import React from "react";
 import type * as G from "../../types/global";
 import type * as T from "./Flyout.types";
-type UseFlyout = (args: {
-    width?: T.Width;
-    position?: T.Position;
-    defaultActive?: boolean;
+type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "contentGap" | "contentShift"> & {
     fallbackPositions?: T.Position[];
-    fallbackAdjustLayout?: boolean;
-    contentGap?: number;
-    contentShift?: number;
     container?: HTMLElement | null;
     triggerElRef: React.RefObject<HTMLElement | null>;
     flyoutElRef: React.RefObject<HTMLElement | null>;

package/dist/components/Flyout/useFlyout.js

@@ -38,7 +38,7 @@ const flyoutReducer = (state, action) => {
 };
 const useFlyout = (args) => {
     const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
-    const { position: defaultPosition = "bottom", fallbackPositions, width, container, fallbackAdjustLayout, } = options;
+    const { position: defaultPosition = "bottom", fallbackPositions, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, width, container, } = options;
     const lastUsedPositionRef = React.useRef(defaultPosition);
     // Memo the array internally to avoid new arrays triggering useCallback
     const cachedFallbackPositions = React.useMemo(() => fallbackPositions, 
@@ -77,6 +77,8 @@ const useFlyout = (args) => {
             position: changePositon ? defaultPosition : lastUsedPositionRef.current,
             fallbackPositions: changePositon ? cachedFallbackPositions : [],
             fallbackAdjustLayout,
+            fallbackMinWidth,
+            fallbackMinHeight,
             lastUsedPosition: lastUsedPositionRef.current,
             onPositionChoose: handlePosition,
             rtl: isRTL,
@@ -103,6 +105,8 @@ const useFlyout = (args) => {
         contentGap,
         contentShift,
         handlePosition,
+        fallbackMinWidth,
+        fallbackMinHeight,
     ]);
     React.useEffect(() => {
         if (state.status === "rendered")

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

@@ -10,15 +10,16 @@ declare const calculatePosition: (args: {
     };
     passedContainer?: HTMLElement | null;
     containerBounds: DOMRect;
-} & Pick<T.Options, "position" | "rtl" | "width" | "contentGap" | "contentShift" | "fallbackAdjustLayout">) => {
+} & Pick<T.Options, "position" | "rtl" | "width" | "contentGap" | "contentShift" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight">) => {
     position: T.Position;
     styles: {
-        width: string | number | undefined;
         left: number | undefined;
         right: number | undefined;
         top: number | undefined;
         bottom: number | undefined;
         transform: string;
+        height: number | undefined;
+        width: string | number | undefined;
     };
     boundaries: {
         left: number;

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

@@ -4,12 +4,14 @@ const SCREEN_OFFSET = 8;
  * Calculate styles for the current position
  */
 const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, } = args;
-    const isFullWidth = width === "full" || width === "100%";
+    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, } = args;
+    const isFullWidth = passedWidth === "full" || passedWidth === "100%";
     let left = 0;
     let top = 0;
     let bottom = null;
     let right = null;
+    let height = undefined;
+    let width = undefined;
     let position = passedPosition;
     if (rtl)
         position = getRTLPosition(position);
@@ -96,57 +98,80 @@ const calculatePosition = (args) => {
             break;
     }
     if (fallbackAdjustLayout) {
-        const topOverflowSize = -top + scrollY + SCREEN_OFFSET;
-        const bottomOverflowSize = top + flyoutHeight + SCREEN_OFFSET - scrollY - renderContainerHeight;
-        const leftOverflowSize = -left + scrollX + SCREEN_OFFSET;
-        const rightOverflowSize = left + flyoutWidth + SCREEN_OFFSET - scrollX - renderContainerWidth;
+        const getOverflow = () => {
+            return {
+                top: -top + scrollY + SCREEN_OFFSET,
+                bottom: top + flyoutHeight + SCREEN_OFFSET - scrollY - renderContainerHeight,
+                left: -left + scrollX + SCREEN_OFFSET,
+                right: left + flyoutWidth + SCREEN_OFFSET - scrollX - renderContainerWidth,
+            };
+        };
+        const overflow = getOverflow();
         if (isHorizontalPosition) {
-            if (topOverflowSize > 0) {
+            if (overflow.top > 0) {
                 top = SCREEN_OFFSET + scrollY;
                 if (bottom !== null)
-                    bottom = bottom - topOverflowSize;
+                    bottom = bottom - overflow.top;
             }
-            else if (bottomOverflowSize > 0) {
-                console.log({ bottomOverflowSize, renderContainerHeight });
-                top = top - bottomOverflowSize;
+            else if (overflow.bottom > 0) {
+                top = top - overflow.bottom;
             }
         }
         else {
-            if (leftOverflowSize > 0) {
+            if (overflow.left > 0) {
                 left = SCREEN_OFFSET + scrollX;
                 if (right !== null)
-                    right = right - leftOverflowSize;
+                    right = right - overflow.left;
             }
-            else if (rightOverflowSize > 0) {
-                left = left - rightOverflowSize;
+            else if (overflow.right > 0) {
+                left = left - overflow.right;
             }
         }
+        const updatedOverflow = getOverflow();
+        if (updatedOverflow.top > 0) {
+            height = Math.max(fallbackMinHeight ? parseInt(fallbackMinHeight) : 0, flyoutHeight - updatedOverflow.top);
+            top = top + (flyoutHeight - height);
+        }
+        else if (updatedOverflow.bottom > 0) {
+            height = Math.max(fallbackMinHeight ? parseInt(fallbackMinHeight) : 0, flyoutHeight - updatedOverflow.bottom);
+            if (bottom !== null)
+                bottom = bottom + (flyoutHeight - height);
+        }
+        if (updatedOverflow.left > 0) {
+            width = Math.max(fallbackMinWidth ? parseInt(fallbackMinWidth) : 0, flyoutWidth - updatedOverflow.left);
+            left = left + (flyoutWidth - width);
+        }
+        else if (updatedOverflow.right > 0) {
+            width = Math.max(fallbackMinWidth ? parseInt(fallbackMinWidth) : 0, flyoutWidth - updatedOverflow.right);
+            if (right !== null)
+                right = right + (flyoutWidth - width);
+        }
     }
-    let widthStyle;
     if (isFullWidth) {
         left = SCREEN_OFFSET;
-        widthStyle = window.innerWidth - SCREEN_OFFSET * 2;
+        width = window.innerWidth - SCREEN_OFFSET * 2;
     }
-    else if (width === "trigger") {
-        widthStyle = triggerBounds.width;
+    else if (passedWidth === "trigger") {
+        width = triggerBounds.width;
     }
     const translateX = right !== null ? -right : left;
     const translateY = bottom !== null ? -bottom : top;
     return {
         position,
         styles: {
-            width: widthStyle ?? width,
             left: right === null ? 0 : undefined,
             right: right === null ? undefined : 0,
             top: bottom === null ? 0 : undefined,
             bottom: bottom === null ? undefined : 0,
             transform: `translate(${translateX}px, ${translateY}px)`,
+            height,
+            width: width ?? passedWidth,
         },
         boundaries: {
             left,
             top,
-            height: Math.ceil(flyoutHeight),
-            width: widthStyle ?? Math.ceil(flyoutWidth),
+            height: height ?? Math.ceil(flyoutHeight),
+            width: width ?? Math.ceil(flyoutWidth),
         },
     };
 };

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

@@ -7,7 +7,7 @@ import { resetStyles } from "../Flyout.constants.js";
  * Set position of the target element to fit on the screen
  */
 const flyout = (args) => {
-    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, position, fallbackPositions, fallbackAdjustLayout, width, container: passedContainer, lastUsedPosition, onPositionChoose, rtl, } = args;
+    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, position, fallbackPositions, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, width, container: passedContainer, lastUsedPosition, onPositionChoose, rtl, } = args;
     const targetClone = flyoutEl.cloneNode(true);
     const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
     const unitModifier = baseUnit ? parseInt(baseUnit) : 4;
@@ -55,6 +55,8 @@ const flyout = (args) => {
             passedContainer: passedContainer ||
                 (closestFixedContainer !== document.body ? closestFixedContainer : undefined),
             fallbackAdjustLayout,
+            fallbackMinWidth,
+            fallbackMinHeight,
         });
     };
     const testVisibility = (calculated) => {
@@ -62,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/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;

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Hidden from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Utility components/Hidden",
     component: Hidden,
@@ -37,3 +38,11 @@ export const visibility = {
 			</Example.Item>
 		</Example>),
 };
+export const as = {
+    name: "as",
+    render: () => <Hidden as="span">Content</Hidden>,
+    play: ({ canvas }) => {
+        const el = canvas.getByText("Content");
+        expect(el.tagName).toEqual("SPAN");
+    },
+};

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

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

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import HiddenVisually from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Utility components/HiddenVisually",
     component: HiddenVisually,
@@ -17,3 +18,11 @@ export const visibility = {
 			</Example.Item>
 		</Example>),
 };
+export const children = {
+    name: "children",
+    render: () => <HiddenVisually>Content</HiddenVisually>,
+    play: ({ canvas }) => {
+        const el = canvas.getByText("Content");
+        expect(el).toBeInTheDocument();
+    },
+};

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("..").HotkeyProps>;
@@ -9,3 +10,4 @@ declare const _default: {
 };
 export default _default;
 export declare const base: () => import("react").JSX.Element;
+export declare const className: StoryObj;

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

@@ -3,6 +3,7 @@ import useHotkeys from "../../../hooks/useHotkeys.js";
 import View from "../../View/index.js";
 import TextField from "../../TextField/index.js";
 import Hotkey from "../Hotkey.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Hotkey",
     component: Hotkey,
@@ -36,3 +37,17 @@ export const base = () => (<Example>
 			</View>
 		</Example.Item>
 	</Example>);
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Hotkey className="test-classname" attributes={{ id: "test-id" }}>
+				⌘K
+			</Hotkey>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(root?.tagName).toBe("KBD");
+    },
+};

package/dist/components/Icon/Icon.js

@@ -7,11 +7,11 @@ const Icon = (props) => {
     const { svg: Component, className, color, size = "1em", autoWidth, attributes } = props;
     const mixinStyles = resolveMixin({ height: size });
     const rootClassName = classNames(s.root, className, mixinStyles.classNames, color && s[`--color-${color}`], autoWidth && s["--auto"]);
-    const icon = React.isValidElement(Component) ? Component : _jsx(Component, {});
+    const icon = React.isValidElement(Component) || Component === null ? Component : _jsx(Component, {});
     const style = { ...attributes?.style, ...mixinStyles.variables };
     return (
     // All icons are decorative, a11y attributes should be set for buttons wrapping them
-    _jsx("span", { ...attributes, "aria-hidden": "true", className: rootClassName, style: style, children: React.cloneElement(icon, { focusable: false }) }));
+    _jsx("span", { ...attributes, "aria-hidden": "true", className: rootClassName, style: style, children: icon && React.cloneElement(icon, { focusable: false }) }));
 };
 Icon.displayName = "Icon";
 export default Icon;

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

@@ -2,7 +2,7 @@ import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** Icon svg component or node */
-    svg: React.ReactElement | React.ComponentType;
+    svg: React.ReactElement | React.ComponentType | null;
     /** Icon size, literal css value or unit token multiplier */
     size?: G.Responsive<number | string>;
     /** Icon color, based on the color tokens */

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").IconProps>;
@@ -20,3 +21,5 @@ export declare const autoWidth: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const className: StoryObj;
+export declare const render: StoryObj;