reshaped 3.8.0-canary.5 → 3.8.0-canary.7

package/dist/components/Autocomplete/Autocomplete.js

@@ -11,7 +11,7 @@ import useElementId from "../../hooks/useElementId.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {
-    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, ...textFieldProps } = props;
+    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, ...textFieldProps } = props;
     const [highlightedId, setHighlightedId] = React.useState();
     const onBackspaceRef = useHandlerRef(onBackspace);
     const contentRef = React.useRef(null);
@@ -120,7 +120,7 @@ const Autocomplete = (props) => {
         highlightedId,
         setHighlightedId,
     }), [highlightedId, handleItemClick]);
-    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
+    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, fallbackAdjustLayout: fallbackAdjustLayout, fallbackMinWidth: fallbackMinWidth, fallbackMinHeight: fallbackMinHeight, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
                             ...textFieldProps.attributes,
                             // Ignoring the type check since TS can't infer the correct html element type
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -7,7 +7,7 @@ type SelectArgs = {
     /** Additional data that will be passed to the onItemSelect callback */
     data?: unknown;
 };
-export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef" | "active" | "onOpen" | "onClose"> & {
+export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef" | "active" | "onOpen" | "onClose" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight"> & {
     /** Callback for when value changes from user input */
     onInput?: TextFieldProps["onChange"];
     /** Callback for when an item is selected in the dropdown */

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -14,8 +14,8 @@ import s from "./DropdownMenu.module.css";
 const DropdownMenuSubContext = React.createContext(null);
 const DropdownMenuSubTriggerContext = React.createContext(false);
 const DropdownMenu = (props) => {
-    const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", ...popoverProps } = props;
-    return (_jsx(Popover, { ...popoverProps, position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, children: children }));
+    const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", borderRadius = "small", ...popoverProps } = props;
+    return (_jsx(Popover, { ...popoverProps, position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, borderRadius: borderRadius, disableHideAnimation: true, children: children }));
 };
 const DropdownMenuContent = (props) => {
     const { children, attributes, className } = props;
@@ -62,9 +62,9 @@ const DropdownMenuItem = (props) => {
     return (_jsx(MenuItem, { ...props, roundedCorners: true, className: [s.item, props.className], attributes: { role: "menuitem", ...props.attributes }, onClick: handleClick }));
 };
 const DropdownMenuSubMenu = (props) => {
-    const { children } = props;
+    const { children, position = "end-top", contentGap = 0.5, ...dropdownMenuProps } = props;
     const dropdownMenuRef = React.useRef(null);
-    return (_jsx(DropdownMenuSubContext.Provider, { value: dropdownMenuRef, children: _jsx(DropdownMenu, { triggerType: "hover", position: "end-top", contentGap: 0.5, instanceRef: dropdownMenuRef, children: children }) }));
+    return (_jsx(DropdownMenuSubContext.Provider, { value: dropdownMenuRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, triggerType: "hover", position: position, contentGap: contentGap, instanceRef: dropdownMenuRef, children: children }) }));
 };
 const DropdownMenuSubTriggerItem = (props) => {
     const { children, attributes, ...menuItemProps } = props;

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

@@ -3,7 +3,7 @@ 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" | "fallbackAdjustLayout" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "originCoordinates"> & {
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu"> | false;
 };
@@ -16,5 +16,5 @@ export type SectionProps = {
 export type SubMenuProps = {
     /** Node for inserting children */
     children: React.ReactNode;
-};
+} & Pick<PopoverProps, "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "contentGap" | "contentShift" | "width" | "containerRef">;
 export type SubTriggerProps = Omit<MenuItemProps, "endSlot" | "roundedCorners">;

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{opacity:0;outline:none;pointer-events:all;transform:scale(.9) 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-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)}

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

@@ -15,17 +15,13 @@ export type CloseReason = "escape-key" | "outside-click"
  | "item-selection" | "close-button";
 export type Position = `${YSide}` | `${YSide}-${XSide}` | `${XSide}` | `${XSide}-${YSide}`;
 export type Width = "trigger" | string;
-export type Options = {
-    width?: Width;
+export type Options = Pick<BaseProps, "width" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "contentGap" | "contentShift"> & {
     position: Position;
+    fallbackPositions?: Position[];
     container?: HTMLElement | null;
     rtl: boolean;
-    fallbackPositions?: Position[];
-    fallbackAdjustLayout?: boolean;
     lastUsedPosition: Position;
     onPositionChoose: (position: Position) => void;
-    contentGap?: number;
-    contentShift?: number;
 };
 export type Styles = React.CSSProperties;
 export type State = {
@@ -102,6 +98,10 @@ type BaseProps = {
     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;
+    /** Minimum width for the content when fallbackAdjustLayout is true */
+    fallbackMinWidth?: string;
+    /** Minimum height for the content when fallbackAdjustLayout is true */
+    fallbackMinHeight?: string;
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: TrapMode | false;
     /** Disable the flyout content interactivity */
@@ -187,7 +187,7 @@ export type ContextProps = {
     handleContentMouseDown: () => void;
     handleContentMouseUp: () => void;
     isSubmenu: boolean;
-} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "trapFocusMode" | "contentGap" | "contentShift" | "containerRef" | "disableContentHover" | "autoFocus">;
+} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
 export type TriggerContextProps = {
     elRef?: ContextProps["triggerElRef"];
 };

package/dist/components/Flyout/FlyoutContent.js

@@ -11,7 +11,7 @@ import { useFlyoutContext, ContentProvider } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
     const { styles, status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     const closestFixedContainer = React.useMemo(() => {

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, 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 { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, 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);
@@ -63,6 +63,8 @@ const FlyoutControlled = (props) => {
         container: containerRef?.current,
         fallbackPositions,
         fallbackAdjustLayout,
+        fallbackMinWidth,
+        fallbackMinHeight,
         contentGap,
         contentShift,
     });
@@ -322,9 +324,9 @@ const FlyoutControlled = (props) => {
             handleContentMouseUp,
             triggerType,
             trapFocusMode,
-            contentGap,
             contentClassName,
             contentAttributes,
+            contentGap,
             containerRef,
             disableContentHover,
             autoFocus,

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

@@ -33,6 +33,14 @@ 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,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;
@@ -70,6 +71,7 @@ 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/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/Hidden/Hidden.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
+import { classNames, responsiveClassNames, setComponentChildId } from "../../utilities/props.js";
 import s from "./Hidden.module.css";
 const Hidden = (props) => {
     const { as: TagName = "div", children, visibility, hide } = props;
@@ -7,4 +7,5 @@ const Hidden = (props) => {
     return _jsx(TagName, { className: rootClassNames, children: children });
 };
 Hidden.displayName = "Hidden";
+setComponentChildId(Hidden, "Hidden");
 export default Hidden;