reshaped 3.5.3 → 3.6.0-canary.0

package/dist/components/{_private/Flyout → Flyout}/tests/Flyout.stories.js

@@ -1,20 +1,21 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { userEvent, waitFor, within, expect, fn } from "@storybook/test";
-import { Example } from "../../../../utilities/storybook/index.js";
-import Reshaped from "../../../Reshaped/index.js";
-import View from "../../../View/index.js";
-import Theme from "../../../Theme/index.js";
-import Button from "../../../Button/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+import Reshaped from "../../Reshaped/index.js";
+import View from "../../View/index.js";
+import Theme from "../../Theme/index.js";
+import Button from "../../Button/index.js";
 import Flyout from "../index.js";
-import TextField from "../../../TextField/index.js";
-import MenuItem from "../../../MenuItem/index.js";
-import { sleep } from "../../../../utilities/helpers.js";
-export default { title: "Internal/Flyout" };
+import TextField from "../../TextField/index.js";
+import Select from "../../Select/index.js";
+import Switch from "../../Switch/index.js";
+import { sleep } from "../../../utilities/helpers.js";
+export default { title: "Utility components/Flyout" };
 const Content = (props) => (<div style={{
         background: "var(--rs-color-background-elevation-overlay)",
         padding: "var(--rs-unit-x4)",
-        height: props.height ?? 150,
+        height: props.height === false ? undefined : props.height || 150,
         minWidth: props.width === false ? undefined : props.width || 160,
         borderRadius: "var(--rs-radius-medium)",
         border: "1px solid var(--rs-color-border-neutral-faded)",
@@ -23,10 +24,10 @@ const Content = (props) => (<div style={{
 		{props.children || "Content"}
 	</div>);
 const Demo = (props) => {
-    const { position = "bottom-start", children, contentHeight, contentWidth, ...rest } = props;
+    const { position = "bottom-start", children, text, contentHeight, contentWidth, ...rest } = props;
     return (<Flyout position={position} {...rest}>
 			<Flyout.Trigger>
-				{(attributes) => <Button attributes={attributes}>{position}</Button>}
+				{(attributes) => <Button attributes={attributes}>{text || position}</Button>}
 			</Flyout.Trigger>
 			<Flyout.Content>
 				<Content height={contentHeight} width={contentWidth}>
@@ -38,9 +39,9 @@ const Demo = (props) => {
 export const position = {
     name: "position",
     render: () => {
-        return (<View gap={4} padding={50} align="center" justify="center">
+        return (<View gap={4} padding={50} align="center" justify="center" height="120vh" width="120%">
 				<View gap={4} direction="row">
-					<Demo position="top-start"/>
+					<Demo position="top-start" defaultActive/>
 					<Demo position="top"/>
 					<Demo position="top-end"/>
 				</View>
@@ -60,7 +61,7 @@ export const position = {
 				<View gap={4} direction="row">
 					<Demo position="bottom-start"/>
 					<Demo position="bottom"/>
-					<Demo position="bottom-end" defaultActive/>
+					<Demo position="bottom-end"/>
 				</View>
 			</View>);
     },
@@ -150,103 +151,47 @@ export const activeFalse = {
         expect(item).not.toBeInTheDocument();
     },
 };
+const modeContent = (<View direction="row" gap={2}>
+		<Button onClick={() => { }}>Action 1</Button>
+		<Button onClick={() => { }}>Action 2</Button>
+		<Button onClick={() => { }}>Action 3</Button>
+	</View>);
 export const modes = {
     name: "triggerType, trapFocusMode",
     render: () => {
         return (<Example>
-				<Example.Item title={[
-                "triggerType: click, trapFocusMode: dialog",
-                "tab navigation, completely traps the focus inside",
-            ]}>
-					<Demo position="bottom-start" trapFocusMode="dialog">
-						<View direction="row" gap={2}>
-							<Button onClick={() => { }}>Action 1</Button>
-							<Button onClick={() => { }}>Action 2</Button>
-							<Button onClick={() => { }}>Action 3</Button>
-						</View>
-					</Demo>
-				</Example.Item>
-
-				<Example.Item title={[
-                "triggerType: click, trapFocusMode: action-menu",
-                "arrow navigation, tab closes the content",
-            ]}>
-					<Demo position="bottom-start" trapFocusMode="action-menu">
-						<View direction="row" gap={2}>
-							<Button onClick={() => { }}>Action 1</Button>
-							<Button onClick={() => { }}>Action 2</Button>
-							<Button onClick={() => { }}>Action 3</Button>
-						</View>
-					</Demo>
-				</Example.Item>
-
-				<Example.Item title={[
-                "triggerType: click, trapFocusMode: content-menu",
-                "tab navigation, simulates natural focus order for navigation menus",
-            ]}>
-					<Demo position="bottom-start" trapFocusMode="content-menu">
-						<View direction="row" gap={2}>
-							<Button onClick={() => { }}>Action 1</Button>
-							<Button onClick={() => { }}>Action 2</Button>
-							<Button onClick={() => { }}>Action 3</Button>
-						</View>
-					</Demo>
-				</Example.Item>
-
-				<Example.Item title="triggerType: hover, trapFocusMode: dialog">
-					<Demo position="bottom-start" trapFocusMode="dialog" triggerType="hover">
-						<View direction="row" gap={2}>
-							<Button onClick={() => { }}>Action 1</Button>
-							<Button onClick={() => { }}>Action 2</Button>
-							<Button onClick={() => { }}>Action 3</Button>
-						</View>
-					</Demo>
-				</Example.Item>
-
-				<Example.Item title="triggerType: hover, trapFocusMode: action-menu">
-					<Demo position="bottom-start" trapFocusMode="action-menu" triggerType="hover">
-						<View direction="row" gap={2}>
-							<Button onClick={() => { }}>Action 1</Button>
-							<Button onClick={() => { }}>Action 2</Button>
-							<Button onClick={() => { }}>Action 3</Button>
-						</View>
-					</Demo>
-				</Example.Item>
-
-				<Example.Item title="triggerType: hover, trapFocusMode: content-menu">
-					<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
-						<View direction="row" gap={2}>
-							<Button onClick={() => { }}>Action 1</Button>
-							<Button onClick={() => { }}>Action 2</Button>
-							<Button onClick={() => { }}>Action 3</Button>
-						</View>
-					</Demo>
-				</Example.Item>
-
-				<Example.Item title={[
-                "triggerType: hover, trapFocusMode: content-menu, no focusable elements inside",
-                "keeps the focus on trigger",
-            ]}>
-					<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover"/>
+				<Example.Item title="triggerType: click">
+					<View direction="row" gap={4}>
+						<Demo position="bottom-start" trapFocusMode="dialog" text="dialog">
+							{modeContent}
+						</Demo>
+						<Demo position="bottom-start" trapFocusMode="action-menu" text="action-menu">
+							{modeContent}
+						</Demo>
+						<Demo position="bottom-start" trapFocusMode="action-bar" text="action-bar">
+							{modeContent}
+						</Demo>
+						<Demo position="bottom-start" trapFocusMode="content-menu" text="content-menu">
+							{modeContent}
+						</Demo>
+					</View>
 				</Example.Item>
 
-				<Example.Item title={[
-                "triggerType: focus, trapFocusMode: selection-menu",
-                "keeps real focus on trigger and simulates arrow key item selection focus on the content",
-            ]}>
-					<Demo position="bottom-start" trapFocusMode="selection-menu" triggerType="focus">
-						<View gap={1}>
-							<MenuItem onClick={() => { }} roundedCorners>
-								Action 1
-							</MenuItem>
-							<MenuItem onClick={() => { }} roundedCorners>
-								Action 2
-							</MenuItem>
-							<MenuItem onClick={() => { }} roundedCorners>
-								Action 3
-							</MenuItem>
-						</View>
-					</Demo>
+				<Example.Item title="triggerType: hover">
+					<View direction="row" gap={4}>
+						<Demo position="bottom-start" trapFocusMode="dialog" triggerType="hover" text="dialog">
+							{modeContent}
+						</Demo>
+						<Demo position="bottom-start" trapFocusMode="action-menu" triggerType="hover" text="action-menu">
+							{modeContent}
+						</Demo>
+						<Demo position="bottom-start" trapFocusMode="action-bar" triggerType="hover" text="action-bar">
+							{modeContent}
+						</Demo>
+						<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover" text="content-menu">
+							{modeContent}
+						</Demo>
+					</View>
 				</Example.Item>
 			</Example>);
     },
@@ -255,7 +200,7 @@ export const positionFallbacks = {
     name: "fallbackPositions",
     render: () => {
         return (<Example>
-				<Example.Item title="position: top, no fallbacks passed">
+				<Example.Item title="position: top, default fallbacks">
 					<View justify="center" align="center">
 						<Demo position="top"/>
 					</View>
@@ -304,6 +249,7 @@ export const contentShift = {
 export const disableContentHover = {
     name: "disableContentHover",
     render: () => <Demo triggerType="hover" disableContentHover/>,
+    // Can't trigger real mouse move from trigger to content in play function, so testing it manually
 };
 export const disableCloseOnOutsideClick = {
     name: "disableCloseOnOutsideClick",
@@ -350,14 +296,26 @@ export const containerRef = {
     name: "containerRef",
     render: () => {
         const portalRef = React.useRef(null);
-        return (<View backgroundColor="neutral-faded" borderRadius="small" height={80} attributes={{ ref: portalRef, "data-testid": "container" }} justify="end" align="start" padding={4}>
-				<Demo containerRef={portalRef} defaultActive position="bottom-start"/>
+        const portalRef2 = React.useRef(null);
+        const portalRef3 = React.useRef(null);
+        return (<View gap={4} direction="row">
+				<View grow backgroundColor="neutral-faded" borderRadius="small" height={80} attributes={{ ref: portalRef, "data-testid": "container" }} justify="end" align="start" padding={4}>
+					<Demo containerRef={portalRef} position="bottom-start" defaultActive/>
+				</View>
+				<View grow backgroundColor="neutral-faded" borderRadius="small" height={80} attributes={{ ref: portalRef2 }} justify="start" align="end" padding={4}>
+					<Demo containerRef={portalRef2} position="top-end"/>
+				</View>
+				<View width={50} backgroundColor="neutral-faded" borderRadius="small" height={80} attributes={{ ref: portalRef3 }} padding={4} overflow="auto">
+					<View height={120} width="120%" justify="center" align="center">
+						<Demo containerRef={portalRef3} position="bottom-end"/>
+					</View>
+				</View>
 			</View>);
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement.ownerDocument.body);
         const containerEl = canvas.getByTestId("container");
-        const contentEl = canvas.getByText("Content");
+        const contentEl = canvas.getAllByText("Content")[0];
         expect(containerEl).toContainElement(contentEl);
     },
 };
@@ -419,7 +377,7 @@ export const contentAttributes = {
     render: () => {
         return (<Flyout position="bottom" defaultActive>
 				<Flyout.Trigger>
-					{(attributes) => <Button attributes={attributes}>`Trigger</Button>}
+					{(attributes) => <Button attributes={attributes}>Trigger</Button>}
 				</Flyout.Trigger>
 				<Flyout.Content attributes={{ "data-testid": "test-id" }} className="test-classname">
 					<Content />
@@ -462,8 +420,8 @@ export const testShadowDom = {
 export const testInsideFixed = {
     name: "test: inside position fixed",
     render: () => (<React.Fragment>
-			<View position="fixed" insetTop={2} insetStart={2} insetEnd={2} backgroundColor="elevation-overlay" borderColor="neutral-faded" borderRadius="small" padding={4} zIndex={10} attributes={{ "data-testid": "container" }}>
-				<Demo defaultActive/>
+			<View position="fixed" insetBottom={2} insetStart={2} insetEnd={2} backgroundColor="elevation-overlay" borderColor="neutral-faded" borderRadius="small" padding={4} zIndex={10} attributes={{ "data-testid": "container" }}>
+				<Demo defaultActive position="top-start"/>
 			</View>
 			<View paddingTop={18} gap={4}>
 				<View height={200} backgroundColor="neutral-faded" borderRadius="small"/>
@@ -532,7 +490,7 @@ export const testDynamicBounds = {
 					<Button onClick={() => setSize("medium")}>Small button</Button>
 				</View>
 				<View height={100}>
-					<Flyout position="bottom" instanceRef={flyoutRef} disableCloseOnOutsideClick>
+					<Flyout position="bottom" instanceRef={flyoutRef} disableCloseOnOutsideClick defaultActive>
 						<Flyout.Trigger>
 							{(attributes) => (<div style={{ position: "absolute", left: `${left}%`, top: `${top}%` }}>
 									<Button color="primary" attributes={attributes} size={size}>
@@ -551,19 +509,19 @@ export const testDynamicBounds = {
 export const testScopedTheming = {
     name: "test: content uses scope theme",
     render: () => (<View gap={3} align="start">
-			<Button color="primary">Reshaped button</Button>
-			<Theme name="slate">
+			<Button color="primary">Slate button</Button>
+			<Theme name="reshaped">
 				<Flyout triggerType="click" active position="bottom-start">
 					<Flyout.Trigger>
 						{(attributes) => (<Button color="primary" attributes={attributes}>
-								Slate button
+								Reshaped button
 							</Button>)}
 					</Flyout.Trigger>
 					<Flyout.Content>
 						<Content>
 							<View gap={1}>
 								<View.Item>Portal content, rendered in body</View.Item>
-								<Button color="primary">Slate button</Button>
+								<Button color="primary">Reshaped button</Button>
 							</View>
 						</Content>
 					</Flyout.Content>
@@ -571,3 +529,55 @@ export const testScopedTheming = {
 			</Theme>
 		</View>),
 };
+export const testWithoutFocusable = {
+    name: "test: without focusable content",
+    render: () => <Demo position="bottom-start"/>,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            const content = canvas.getByText("Content");
+            expect(content).toBeVisible();
+        });
+        expect(document.activeElement).toBe(trigger);
+    },
+};
+export const testChangeSize = {
+    name: "test: size updates",
+    render: () => {
+        const [position, setPosition] = React.useState("bottom-start");
+        const [updatedHeight, setUpdatedHeight] = React.useState(false);
+        return (<>
+				<View direction="row" gap={4} align="center">
+					<Select name="position" options={[
+                "bottom-start",
+                "bottom",
+                "bottom-end",
+                "top-start",
+                "top",
+                "top-end",
+                "start-top",
+                "start",
+                "start-bottom",
+                "end-top",
+                "end",
+                "end-bottom",
+            ].map((p) => ({ label: p, value: p }))} onChange={(args) => setPosition(args.value)} value={position}/>
+					<Switch name="height" onChange={(args) => setUpdatedHeight(args.checked)}>
+						Change height
+					</Switch>
+				</View>
+				<div style={{
+                position: "fixed",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+            }}>
+					<Demo position={position} disableCloseOnOutsideClick active contentHeight={false}>
+						<View backgroundColor="neutral-faded" borderRadius="small" height={updatedHeight ? 50 : 25} attributes={{ style: { transition: "0.2s ease-in-out" } }}/>
+					</Demo>
+				</div>
+			</>);
+    },
+};

package/dist/components/{_private/Flyout → Flyout}/useFlyout.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as G from "../../../types/global";
+import type * as G from "../../types/global";
 import type * as T from "./Flyout.types";
 type UseFlyout = (args: {
     width?: T.Width;

package/dist/components/Flyout/useFlyout.js

@@ -0,0 +1,116 @@
+import React from "react";
+import useRTL from "../../hooks/useRTL.js";
+import flyout from "./utilities/flyout.js";
+import { defaultStyles, resetStyles } from "./Flyout.constants.js";
+const flyoutReducer = (state, action) => {
+    switch (action.type) {
+        case "render":
+            if (state.status !== "idle")
+                return state;
+            // Disable events before it's positioned to avoid mouseleave getting triggered
+            return { ...state, status: "rendered", styles: { pointerEvents: "none", ...resetStyles } };
+        case "position":
+            if (!action.payload.sync && state.status !== "rendered")
+                return state;
+            if (action.payload.sync && state.status !== "visible")
+                return state;
+            return {
+                ...state,
+                status: action.payload.sync ? "visible" : "positioned",
+                position: action.payload.position,
+                styles: { ...defaultStyles, ...action.payload.styles },
+            };
+        case "show":
+            if (state.status !== "positioned")
+                return state;
+            return { ...state, status: "visible" };
+        case "hide":
+            if (state.status !== "visible")
+                return state;
+            return { ...state, status: "hidden" };
+        case "remove":
+            if (state.status !== "hidden" && state.status !== "visible")
+                return state;
+            return { ...state, status: "idle", styles: resetStyles };
+        default:
+            throw new Error("[Reshaped] Invalid flyout reducer type");
+    }
+};
+const useFlyout = (args) => {
+    const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
+    const { position: defaultPosition = "bottom", fallbackPositions, width, container } = options;
+    const lastUsedFallbackRef = React.useRef(defaultPosition);
+    // Memo the array internally to avoid new arrays triggering useCallback
+    const cachedFallbackPositions = React.useMemo(() => fallbackPositions, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fallbackPositions?.join(" ")]);
+    const [isRTL] = useRTL();
+    const [state, dispatch] = React.useReducer(flyoutReducer, {
+        position: defaultPosition,
+        styles: defaultStyles,
+        status: "idle",
+    });
+    const render = React.useCallback(() => {
+        dispatch({ type: "render" });
+    }, []);
+    const show = React.useCallback(() => {
+        dispatch({ type: "show" });
+    }, []);
+    const hide = React.useCallback(() => {
+        dispatch({ type: "hide" });
+    }, []);
+    const remove = React.useCallback(() => {
+        dispatch({ type: "remove" });
+    }, []);
+    const handleFallback = React.useCallback((position) => {
+        lastUsedFallbackRef.current = position;
+    }, []);
+    const updatePosition = React.useCallback((options) => {
+        if (!flyoutElRef.current)
+            return;
+        const nextFlyoutData = flyout({
+            triggerEl: triggerElRef.current,
+            flyoutEl: flyoutElRef.current,
+            triggerBounds,
+            width,
+            position: defaultPosition,
+            fallbackPositions: cachedFallbackPositions,
+            lastUsedFallback: lastUsedFallbackRef.current,
+            onFallback: handleFallback,
+            rtl: isRTL,
+            container,
+            contentGap,
+            contentShift,
+        });
+        if (nextFlyoutData) {
+            dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
+        }
+    }, [
+        container,
+        defaultPosition,
+        cachedFallbackPositions,
+        isRTL,
+        flyoutElRef,
+        triggerElRef,
+        triggerBounds,
+        width,
+        contentGap,
+        contentShift,
+        handleFallback,
+    ]);
+    React.useEffect(() => {
+        if (state.status === "rendered")
+            updatePosition();
+    }, [state.status, updatePosition]);
+    return React.useMemo(() => ({
+        position: state.position,
+        styles: state.styles,
+        status: state.status,
+        updatePosition,
+        render,
+        hide,
+        remove,
+        show,
+    }), [render, updatePosition, hide, remove, show, state.position, state.styles, state.status]);
+};
+export default useFlyout;

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

@@ -0,0 +1,30 @@
+import type * as T from "../Flyout.types";
+/**
+ * Calculate styles for the current position
+ */
+declare const calculatePosition: (args: {
+    triggerBounds: DOMRect;
+    flyoutBounds: {
+        width: number;
+        height: number;
+    };
+    passedContainer?: HTMLElement | null;
+    containerBounds: DOMRect;
+} & Pick<T.Options, "position" | "rtl" | "width" | "contentGap" | "contentShift">) => {
+    position: T.Position;
+    styles: {
+        width: number | undefined;
+        left: number | undefined;
+        right: number | undefined;
+        top: number | undefined;
+        bottom: number | undefined;
+        transform: string;
+    };
+    boundaries: {
+        left: number;
+        top: number;
+        height: number;
+        width: number;
+    };
+};
+export default calculatePosition;

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

@@ -0,0 +1,129 @@
+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);
+};
+/**
+ * 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%";
+    let left = 0;
+    let top = 0;
+    let bottom = null;
+    let right = null;
+    let position = passedPosition;
+    if (rtl)
+        position = getRTLPosition(position);
+    if (isFullWidth || width === "trigger") {
+        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 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;
+    switch (position) {
+        case "start":
+        case "start-top":
+        case "start-bottom":
+            right = relativeRight + triggerWidth;
+            left = relativeLeft - flyoutWidth;
+            break;
+        case "end":
+        case "end-top":
+        case "end-bottom":
+            left = relativeLeft + triggerWidth;
+            break;
+        case "bottom":
+        case "top":
+            left = relativeLeft + centerBySize(triggerWidth, flyoutWidth) + contentShift;
+            break;
+        case "top-start":
+        case "bottom-start":
+            left = relativeLeft + contentShift;
+            break;
+        case "top-end":
+        case "bottom-end":
+            right = relativeRight - contentShift;
+            left = relativeLeft + triggerWidth - flyoutWidth + contentShift;
+            break;
+        default:
+            break;
+    }
+    switch (position) {
+        case "top":
+        case "top-start":
+        case "top-end":
+            bottom = relativeBottom + triggerHeight;
+            top = relativeTop - flyoutHeight;
+            break;
+        case "bottom":
+        case "bottom-start":
+        case "bottom-end":
+            top = relativeTop + triggerHeight;
+            break;
+        case "start":
+        case "end":
+            top = relativeTop + centerBySize(triggerHeight, flyoutHeight) + contentShift;
+            break;
+        case "start-top":
+        case "end-top":
+            top = relativeTop + contentShift;
+            break;
+        case "start-bottom":
+        case "end-bottom":
+            bottom = relativeBottom - contentShift;
+            top = relativeTop + triggerHeight - flyoutHeight + contentShift;
+            break;
+        default:
+            break;
+    }
+    let widthStyle;
+    if (isFullWidth) {
+        left = SCREEN_OFFSET;
+        widthStyle = window.innerWidth - SCREEN_OFFSET * 2;
+    }
+    else if (width === "trigger") {
+        widthStyle = triggerBounds.width;
+    }
+    const translateX = right !== null ? -right : left;
+    const translateY = bottom !== null ? -bottom : top;
+    return {
+        position,
+        styles: {
+            width: widthStyle,
+            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)`,
+        },
+        boundaries: {
+            left,
+            top,
+            height: Math.ceil(flyoutHeight),
+            width: widthStyle ?? Math.ceil(flyoutWidth),
+        },
+    };
+};
+export default calculatePosition;

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

@@ -0,0 +1,11 @@
+import type * as G from "../../../types/global";
+import type * as T from "../Flyout.types";
+/**
+ * Set position of the target element to fit on the screen
+ */
+declare const flyout: (args: T.Options & {
+    flyoutEl: HTMLElement;
+    triggerEl: HTMLElement | null;
+    triggerBounds?: DOMRect | G.Coordinates | null;
+}) => T.FlyoutData | undefined;
+export default flyout;