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

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

@@ -29,6 +29,18 @@ export declare const positionFallbacks: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const fallbackAdjustLayout: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const fallbackAdjustLayoutShift: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const fallbackAdjustLayoutSize: {
+    name: string;
+    render: () => React.JSX.Element;
+};
 export declare const originCoordinates: {
     name: string;
     render: () => React.JSX.Element;

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,17 +30,25 @@ 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>);
 };
 export const position = {
     name: "position",
     render: () => {
-        return (<View gap={4} padding={50} align="center" justify="center" height="120vh" width="120%">
+        return (<View gap={4} padding={50} align="center" justify="center" height="100vh" width="120%">
 				<View gap={4} direction="row">
 					<Demo position="top-start" defaultActive/>
 					<Demo position="top"/>
@@ -222,6 +230,104 @@ export const positionFallbacks = {
 			</Example>);
     },
 };
+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="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={contentHeight} position="end-top" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+				<Demo contentHeight={contentHeight} position="end" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}/>
+			</View>
+
+			{/* Right side */}
+
+			<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={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={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}>
+				<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 />
+						<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}/>
+						<View height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
+					</View>
+				</View>
+
+				<FallbackAdjustLayoutControls />
+				<div style={{ height: "100vh", width: "250%" }}/>
+			</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,13 +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[];
-    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 } = 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, 
@@ -76,6 +76,9 @@ const useFlyout = (args) => {
             width,
             position: changePositon ? defaultPosition : lastUsedPositionRef.current,
             fallbackPositions: changePositon ? cachedFallbackPositions : [],
+            fallbackAdjustLayout,
+            fallbackMinWidth,
+            fallbackMinHeight,
             lastUsedPosition: lastUsedPositionRef.current,
             onPositionChoose: handlePosition,
             rtl: isRTL,
@@ -93,6 +96,7 @@ const useFlyout = (args) => {
         container,
         defaultPosition,
         cachedFallbackPositions,
+        fallbackAdjustLayout,
         isRTL,
         flyoutElRef,
         triggerElRef,
@@ -101,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">) => {
+} & 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

@@ -1,27 +1,17 @@
-const SCREEN_OFFSET = 16;
-const getRTLPosition = (position) => {
-    if (position.includes("start"))
-        return position.replace("start", "end");
-    if (position.includes("end"))
-        return position.replace("end", "start");
-    return position;
-};
-/**
- * Get a position value which centers 2 elements vertically or horizontally
- */
-const centerBySize = (originSize, targetSize) => {
-    return Math.floor(originSize / 2 - targetSize / 2);
-};
+import { getRTLPosition, centerBySize } from "./helpers.js";
+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, } = 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);
@@ -29,25 +19,34 @@ const calculatePosition = (args) => {
         position = position.includes("top") ? "top" : "bottom";
     }
     const isHorizontalPosition = !!position.match(/^(start|end)/);
-    const isVerticalPosition = !!position.match(/^(top|bottom)/);
     // contentGap adds padding to the flyout to make sure it doesn't disapper while moving the mouse to the content
     // So its width/height is bigger than the visible part of the content
     const flyoutWidth = flyoutBounds.width + (isHorizontalPosition ? contentGap : 0);
-    const flyoutHeight = flyoutBounds.height + (isVerticalPosition ? contentGap : 0);
-    const triggerHeight = triggerBounds.height;
+    const flyoutHeight = flyoutBounds.height + (!isHorizontalPosition ? contentGap : 0);
     const triggerWidth = triggerBounds.width;
-    const containerY = passedContainer?.scrollTop || 0;
-    const containerX = passedContainer?.scrollLeft || 0;
-    const relativeLeft = triggerBounds.left - containerBounds.left + containerX;
-    const relativeTop = triggerBounds.top - containerBounds.top + containerY;
-    const relativeRight = containerBounds.right - triggerBounds.right - containerX;
-    const relativeBottom = containerBounds.bottom - triggerBounds.bottom - containerY;
+    const triggerHeight = triggerBounds.height;
+    // Detect passed container scroll to sync the flyout position with it
+    const containerX = passedContainer?.scrollLeft;
+    const containerY = passedContainer?.scrollTop;
+    const scrollX = containerX ?? window.scrollX;
+    const scrollY = containerY ?? window.scrollY;
+    const renderContainerHeight = passedContainer?.clientHeight ?? window.innerHeight;
+    const renderContainerWidth = passedContainer?.clientWidth ?? window.innerWidth;
+    // When rendering in the body, bottom bounds will be larrger than the viewport so we calculate it manually
+    const containerBoundsBottom = passedContainer
+        ? containerBounds.bottom
+        : window.innerHeight - scrollY;
+    // When inside a container, adjut position based on the container scroll since flyout is rendered outside the scroll area
+    const relativeLeft = triggerBounds.left - containerBounds.left + (containerX || 0);
+    const relativeRight = containerBounds.right - triggerBounds.right - (containerX || 0);
+    const relativeTop = triggerBounds.top - containerBounds.top + (containerY || 0);
+    const relativeBottom = containerBoundsBottom - triggerBounds.bottom - (containerY || 0);
     switch (position) {
         case "start":
         case "start-top":
         case "start-bottom":
-            right = relativeRight + triggerWidth;
             left = relativeLeft - flyoutWidth;
+            right = relativeRight + triggerWidth;
             break;
         case "end":
         case "end-top":
@@ -64,8 +63,8 @@ const calculatePosition = (args) => {
             break;
         case "top-end":
         case "bottom-end":
-            right = relativeRight - contentShift;
             left = relativeLeft + triggerWidth - flyoutWidth + contentShift;
+            right = relativeRight - contentShift;
             break;
         default:
             break;
@@ -74,8 +73,8 @@ const calculatePosition = (args) => {
         case "top":
         case "top-start":
         case "top-end":
-            bottom = relativeBottom + triggerHeight;
             top = relativeTop - flyoutHeight;
+            bottom = relativeBottom + triggerHeight;
             break;
         case "bottom":
         case "bottom-start":
@@ -92,37 +91,87 @@ const calculatePosition = (args) => {
             break;
         case "start-bottom":
         case "end-bottom":
-            bottom = relativeBottom - contentShift;
             top = relativeTop + triggerHeight - flyoutHeight + contentShift;
+            bottom = relativeBottom - contentShift;
             break;
         default:
             break;
     }
-    let widthStyle;
+    if (fallbackAdjustLayout) {
+        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 (overflow.top > 0) {
+                top = SCREEN_OFFSET + scrollY;
+                if (bottom !== null)
+                    bottom = bottom - overflow.top;
+            }
+            else if (overflow.bottom > 0) {
+                top = top - overflow.bottom;
+            }
+        }
+        else {
+            if (overflow.left > 0) {
+                left = SCREEN_OFFSET + scrollX;
+                if (right !== null)
+                    right = right - overflow.left;
+            }
+            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);
+        }
+    }
     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, 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;
@@ -42,37 +42,42 @@ const flyout = (args) => {
         document.body;
     const renderContainerBounds = container.getBoundingClientRect();
     const visualContainerBounds = (passedContainer || document.body).getBoundingClientRect();
-    let calculated = null;
-    const testOrder = getPositionFallbacks(position, fallbackPositions);
-    testOrder.some((currentPosition) => {
-        const tested = calculatePosition({
+    const applyPosition = (position) => {
+        return calculatePosition({
             triggerBounds: resolvedTriggerBounds,
             flyoutBounds,
             containerBounds: renderContainerBounds,
-            position: currentPosition,
+            position,
             contentGap: contentGap * unitModifier,
             contentShift: contentShift * unitModifier,
             rtl,
             width,
-            passedContainer,
+            passedContainer: passedContainer ||
+                (closestFixedContainer !== document.body ? closestFixedContainer : undefined),
+            fallbackAdjustLayout,
+            fallbackMinWidth,
+            fallbackMinHeight,
         });
-        const visible = isFullyVisible({
-            flyoutBounds: tested.boundaries,
+    };
+    const testVisibility = (calculated) => {
+        return isFullyVisible({
+            flyoutBounds: calculated.boundaries,
             visualContainerBounds,
             renderContainerBounds,
-            container,
         });
-        const validPosition = visible || fallbackPositions?.length === 0;
-        // Saving first try in case none of the options work
-        if (validPosition || lastUsedPosition === currentPosition) {
+    };
+    let calculated = null;
+    const testOrder = getPositionFallbacks(position, fallbackPositions);
+    testOrder.some((currentPosition) => {
+        const tested = applyPosition(currentPosition);
+        const visible = testVisibility(tested);
+        if (visible)
             calculated = tested;
-            onPositionChoose(currentPosition);
-        }
-        return validPosition;
+        return visible;
     });
-    if (!calculated) {
-        throw new Error(`[Reshaped] Can't calculate styles for the ${position} position`);
-    }
+    if (!calculated)
+        calculated = applyPosition(lastUsedPosition);
+    onPositionChoose(calculated.position);
     targetClone.parentNode?.removeChild(targetClone);
     return calculated;
 };

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/helpers.d.ts

@@ -0,0 +1,7 @@
+import type * as T from "../Flyout.types";
+/** Mirror the position for RTL */
+export declare const getRTLPosition: (position: T.Position) => T.Position;
+/**
+ * Get a position value which centers 2 elements vertically or horizontally
+ */
+export declare const centerBySize: (originSize: number, targetSize: number) => number;

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

@@ -0,0 +1,14 @@
+/** Mirror the position for RTL */
+export const getRTLPosition = (position) => {
+    if (position.includes("start"))
+        return position.replace("start", "end");
+    if (position.includes("end"))
+        return position.replace("end", "start");
+    return position;
+};
+/**
+ * Get a position value which centers 2 elements vertically or horizontally
+ */
+export const centerBySize = (originSize, targetSize) => {
+    return Math.floor(originSize / 2 - targetSize / 2);
+};

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

@@ -1,10 +1,12 @@
 /**
- * Check if element visually fits on the screen
+ * Check if element visually fits within its render container
  */
 declare const isFullyVisible: (args: {
+    /** Bounds of the flyout content */
     flyoutBounds: Pick<DOMRect, "left" | "top" | "width" | "height">;
+    /** Bounds of the container where the flyout content should fit */
     visualContainerBounds: DOMRect;
+    /** Bounds of the container where flyout content is rendered */
     renderContainerBounds: DOMRect;
-    container: HTMLElement;
 }) => boolean;
 export default isFullyVisible;

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

@@ -1,21 +1,19 @@
 /**
- * Check if element visually fits on the screen
+ * 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();
+    },
+};