reshaped 3.7.4 → 3.8.0-canary.1

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

@@ -1,20 +1,30 @@
 import type React from "react";
 import type * as G from "../../types/global";
 type WithClose = {
+    /** Hide the close button */
     hideCloseButton: true;
+    /** aria-label attribute for the close button */
     closeAriaLabel?: string;
 };
 type WithoutClose = {
+    /** Show the close button */
     hideCloseButton?: false;
+    /** aria-label attribute for the close button */
     closeAriaLabel: string;
 };
 export type CloseProps = WithClose | WithoutClose;
 export type Props = CloseProps & {
+    /** Component render variant */
     variant?: "media";
+    /** Close button alignment */
     align?: "top" | "center";
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Callback when the component is dismissed */
     onClose?: () => void;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export {};

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

@@ -1,10 +1,16 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Change component to take no space, useful for using it as a border in components like Tabs */
     blank?: boolean;
+    /** Change component to render vertically */
     vertical?: G.Responsive<boolean>;
+    /** Position for rendering children */
     contentPosition?: "start" | "center" | "end";
+    /** Node for inserting text labels or custom components as a part of divider */
     children?: React.ReactNode;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"hr">;
 };

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

@@ -3,15 +3,18 @@ import type { PopoverProps, PopoverInstance } from "../Popover";
 import type { MenuItemProps } from "../MenuItem";
 import type { FlyoutContentProps } from "../Flyout";
 export type Instance = PopoverInstance;
-export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "originCoordinates"> & {
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "originCoordinates"> & {
+    /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu"> | false;
 };
 export type ContentProps = Pick<FlyoutContentProps, "attributes" | "children" | "className">;
 export type ItemProps = Omit<MenuItemProps, "roundedCorners">;
 export type SectionProps = {
+    /** Node for inserting children */
     children: React.ReactNode;
 };
 export type SubMenuProps = {
+    /** Node for inserting children */
     children: React.ReactNode;
 };
 export type SubTriggerProps = Omit<MenuItemProps, "endSlot" | "roundedCorners">;

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

@@ -2,18 +2,28 @@ import type React from "react";
 import type { ViewProps } from "../View";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Name of the input element */
     name: string;
+    /** Node for inserting children, can be a render function that receives component state */
     children?: React.ReactNode | ((props: {
         highlighted?: boolean;
     }) => React.ReactNode);
+    /** Callback when the component value is changed */
     onChange?: G.ChangeHandler<File[], React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>>;
+    /** Component height, literal css value or unit token multiplier */
     height?: ViewProps["height"];
+    /** Component variant, headless variant is useful for rendering custom triggers like a Button */
     variant?: "outline" | "headless";
+    /** Change component to render inline making it more compact */
     inline?: boolean;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
+    /** Additional attributes for the input element */
     inputAttributes?: G.Attributes<"input">;
 };
 export type TriggerProps = {
+    /** Node for inserting children */
     children: React.ReactNode;
 };

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

@@ -21,6 +21,7 @@ export type Options = {
     container?: HTMLElement | null;
     rtl: boolean;
     fallbackPositions?: Position[];
+    fallbackAdjustLayout?: boolean;
     lastUsedPosition: Position;
     onPositionChoose: (position: Position) => void;
     contentGap?: number;
@@ -50,16 +51,23 @@ export type UseFlyoutData = Pick<State, "styles" | "position" | "status"> & {
  * Component
  */
 export type Instance = {
+    /** Open the flyout content */
     open: () => void;
+    /** Close the flyout content */
     close: () => void;
+    /** Sync the flyout content position with the trigger element position */
     updatePosition: () => void;
 } | null;
 type WithUncontrolled = {
+    /** Control the content visibility, enables controlled mode */
     active?: never;
+    /** Control the content default visibility, enables uncontrolled mode */
     defaultActive?: boolean;
 };
 type WithControlled = {
+    /** Control the content visibility, enables controlled mode */
     active: boolean;
+    /** Control the content default visibility, enables uncontrolled mode */
     defaultActive?: never;
 };
 export type TriggerAttributes = {
@@ -78,34 +86,63 @@ export type TriggerAttributes = {
     "aria-controls"?: string;
 };
 type BaseProps = {
+    /** Unique id for the flyout content and trigger */
     id?: string;
+    /** Event used for displaying the content */
     triggerType?: "hover" | "click" | "focus";
+    /** Removes the content display delay if another flyout is already active */
     groupTimeouts?: boolean;
+    /** Content position relative to the trigger element */
     position?: Position;
     /**
      * @deprecated Use fallbackPosition={false} instead, will be removed in v4
      */
     forcePosition?: boolean;
+    /** Fallback positions for the content when it doesn't fit into the viewport or container */
     fallbackPositions?: Position[] | false;
+    /** Adjust the content size and shift its position to fit into the container when none of the fallback positions work */
+    fallbackAdjustLayout?: boolean;
+    /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: TrapMode | false;
+    /** Disable the flyout content interactivity */
     disabled?: boolean;
+    /** Disable the flyout content hide animation */
     disableHideAnimation?: boolean;
+    /** Ignore the content hover events and hide it if the triggerType is hover */
     disableContentHover?: boolean;
+    /** Disable the flyout content close on outside click */
     disableCloseOnOutsideClick?: boolean;
+    /** Automatically focus the first focusable element in the content, when false the content container will be focused instead
+     * @default true
+     */
     autoFocus?: boolean;
+    /** Origin coordinates for the content when there is no trigger element */
     originCoordinates?: G.Coordinates;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Callback when the content is opened */
     onOpen?: () => void;
+    /** Callback when the content is closed */
     onClose?: (args: {
         reason?: CloseReason;
     }) => void;
+    /** Content width, literal css value or unit token multiplier */
     width?: Width;
+    /** Gap between the content and the trigger element */
     contentGap?: number;
+    /** Shift the content on the secondary axis, relative to its original position */
     contentShift?: number;
+    /** Additional classname for the content element */
     contentClassName?: string;
+    /** Additional attributes for the content element */
     contentAttributes?: G.Attributes<"div">;
+    /** Ref accessor for the flyout methods */
     instanceRef?: React.Ref<Instance>;
+    /** Container to render the content in using a portal, position is calculated based on the container bounds
+     * @default document.body
+     */
     containerRef?: React.RefObject<HTMLElement | null>;
+    /** Element to focus when the content is opened */
     initialFocusRef?: React.RefObject<HTMLElement | null>;
 };
 export type DefaultProps = Required<{
@@ -116,11 +153,15 @@ export type UncontrolledProps = BaseProps & WithUncontrolled;
 export type ControlledProps = BaseProps & WithControlled;
 export type Props = ControlledProps | UncontrolledProps;
 export type TriggerProps = {
+    /** Node for inserting children, provides attributes for the trigger element */
     children: (attributes: TriggerAttributes) => React.ReactNode;
 };
 export type ContentProps = {
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Additional classname for the content element */
     className?: G.ClassName;
+    /** Additional attributes for the content element */
     attributes?: G.Attributes<"div">;
 };
 export type ContextProps = {

package/dist/components/Flyout/FlyoutContent.js

@@ -94,7 +94,7 @@ const FlyoutContent = (props) => {
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: rootClassNames, style: {
                 ...styles,
                 "--rs-flyout-gap": contentGap,
-            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: contentAttributes?.style, className: innerClassNames, children: children }) }) }));
+            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...attributes?.style, ...contentAttributes?.style }, className: innerClassNames, children: children }) }) }));
     return _jsx(Portal, { targetRef: containerRef, children: content });
 };
 FlyoutContent.displayName = "Flyout.Content";

package/dist/components/Flyout/FlyoutControlled.js

@@ -15,7 +15,7 @@ import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -62,6 +62,7 @@ const FlyoutControlled = (props) => {
         defaultActive: resolvedActive,
         container: containerRef?.current,
         fallbackPositions,
+        fallbackAdjustLayout,
         contentGap,
         contentShift,
     });

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

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

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

@@ -40,7 +40,7 @@ const Demo = (props) => {
 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 +222,64 @@ 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>
+
+		<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" 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>
+
+		{/* 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" 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" 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>
+	</>);
+export const fallbackAdjustLayout = {
+    name: "fallbackAdjustLayout",
+    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 originCoordinates = {
     name: "originCoordinates",
     render: () => {

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

@@ -6,6 +6,7 @@ type UseFlyout = (args: {
     position?: T.Position;
     defaultActive?: boolean;
     fallbackPositions?: T.Position[];
+    fallbackAdjustLayout?: boolean;
     contentGap?: number;
     contentShift?: number;
     container?: 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, width, container, fallbackAdjustLayout, } = options;
     const lastUsedPositionRef = React.useRef(defaultPosition);
     // Memo the array internally to avoid new arrays triggering useCallback
     const cachedFallbackPositions = React.useMemo(() => fallbackPositions, 
@@ -76,6 +76,7 @@ const useFlyout = (args) => {
             width,
             position: changePositon ? defaultPosition : lastUsedPositionRef.current,
             fallbackPositions: changePositon ? cachedFallbackPositions : [],
+            fallbackAdjustLayout,
             lastUsedPosition: lastUsedPositionRef.current,
             onPositionChoose: handlePosition,
             rtl: isRTL,
@@ -93,6 +94,7 @@ const useFlyout = (args) => {
         container,
         defaultPosition,
         cachedFallbackPositions,
+        fallbackAdjustLayout,
         isRTL,
         flyoutElRef,
         triggerElRef,

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

@@ -10,7 +10,7 @@ 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">) => {
     position: T.Position;
     styles: {
         width: string | number | undefined;

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

@@ -1,22 +1,10 @@
-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 { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, } = args;
     const isFullWidth = width === "full" || width === "100%";
     let left = 0;
     let top = 0;
@@ -29,25 +17,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 +61,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 +71,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,12 +89,39 @@ const calculatePosition = (args) => {
             break;
         case "start-bottom":
         case "end-bottom":
-            bottom = relativeBottom - contentShift;
             top = relativeTop + triggerHeight - flyoutHeight + contentShift;
+            bottom = relativeBottom - contentShift;
             break;
         default:
             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;
+        if (isHorizontalPosition) {
+            if (topOverflowSize > 0) {
+                top = SCREEN_OFFSET + scrollY;
+                if (bottom !== null)
+                    bottom = bottom - topOverflowSize;
+            }
+            else if (bottomOverflowSize > 0) {
+                console.log({ bottomOverflowSize, renderContainerHeight });
+                top = top - bottomOverflowSize;
+            }
+        }
+        else {
+            if (leftOverflowSize > 0) {
+                left = SCREEN_OFFSET + scrollX;
+                if (right !== null)
+                    right = right - leftOverflowSize;
+            }
+            else if (rightOverflowSize > 0) {
+                left = left - rightOverflowSize;
+            }
+        }
+    }
     let widthStyle;
     if (isFullWidth) {
         left = SCREEN_OFFSET;

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, 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,41 @@ 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,
         });
-        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/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,14 @@
 /**
- * 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 where the flyout content is rendered */
     container: HTMLElement;
 }) => boolean;
 export default isFullyVisible;

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

@@ -1,5 +1,5 @@
 /**
- * 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;

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

@@ -1,17 +1,26 @@
 import type React from "react";
 export type Props = {
+    /** Node for inserting children */
     children: React.ReactNode;
+    /** Component size, to be used together with the other form component sizes */
     size?: "medium" | "large";
+    /** Change component to show an error state and display FormControl.Error */
     hasError?: boolean;
+    /** Change component to show a required indicator */
     required?: boolean;
+    /** Apply disabled styles */
     disabled?: boolean;
+    /** Apply semantic html markup when used for displaying multiple form fields together with a single label */
     group?: boolean;
+    /** Custom id for the form control */
     id?: string;
 };
 export type LabelProps = {
+    /** Node for inserting the label text */
     children: React.ReactNode;
 };
 export type CaptionProps = {
+    /** Node for inserting the caption text */
     children: React.ReactNode;
 };
 export type PrivateCaptionProps = CaptionProps & {