reshaped 3.9.0-canary.9 → 3.9.1-canary.2

package/dist/core/Actionable/Actionable.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as keys from "../../constants/keys.js";
+import { classNames } from "../../utilities/props.js";
+const Actionable = forwardRef((props, ref) => {
+    const { children, render, href, onClick, type, disabled, as, stopPropagation, className, attributes, } = props;
+    const rootAttributes = { ...attributes };
+    const hasClickHandler = onClick || attributes?.onClick;
+    const hasFocusHandler = attributes?.onFocus || attributes?.onBlur;
+    const isLink = Boolean(href || attributes?.href);
+    // Including attributes ref for the cases when event listeners are added through it
+    // To make sure it doesn't render a span
+    const isButton = Boolean(hasClickHandler || hasFocusHandler || type || attributes?.ref);
+    const renderedAsButton = !isLink && isButton && (!as || as === "button");
+    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let TagName;
+    if (isLink) {
+        TagName = "a";
+        rootAttributes.href = disabled ? undefined : href || attributes?.href;
+    }
+    else if (renderedAsButton) {
+        TagName = "button";
+        rootAttributes.type = type || attributes?.type || "button";
+        rootAttributes.disabled = disabled || attributes?.disabled;
+    }
+    else if (isButton) {
+        const isFocusable = as === "label";
+        const simulateButton = !isFocusable || hasClickHandler || hasFocusHandler;
+        TagName = as || "span";
+        rootAttributes.role = simulateButton ? "button" : undefined;
+        rootAttributes.tabIndex = simulateButton ? 0 : undefined;
+    }
+    else {
+        TagName = as || "span";
+    }
+    const handlePress = (event) => {
+        if (disabled)
+            return;
+        if (stopPropagation)
+            event.stopPropagation();
+        onClick?.(event);
+        attributes?.onClick?.(event);
+    };
+    const handleKeyDown = (event) => {
+        const isSpace = event.key === keys.SPACE;
+        const isEnter = event.key === keys.ENTER;
+        if (!isSpace && !isEnter)
+            return;
+        if (rootAttributes.role !== "button")
+            return;
+        if (stopPropagation)
+            event.stopPropagation();
+        event.preventDefault();
+        handlePress(event);
+    };
+    const tagAttributes = {
+        ref: ref,
+        // rootAttributes can receive ref from Flyout
+        ...rootAttributes,
+        className: classNames(className),
+        onClick: handlePress,
+        onKeyDown: handleKeyDown,
+        "aria-disabled": disabled ? true : undefined,
+        children: children,
+    };
+    if (render)
+        return render(tagAttributes);
+    return _jsx(TagName, { ...tagAttributes });
+});
+Actionable.displayName = "Actionable";
+export default Actionable;

package/dist/core/Actionable/Actionable.types.d.ts

@@ -0,0 +1,34 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type AttributesRef = React.RefObject<HTMLButtonElement | null>;
+type Attributes = G.Attributes<"button"> & Omit<React.JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
+    ref?: AttributesRef;
+};
+export type RenderAttributes = G.Attributes<"a"> & {
+    ref: React.RefObject<HTMLAnchorElement | null>;
+    children: React.ReactNode;
+};
+export type Props = {
+    /** Node for inserting the content */
+    children?: React.ReactNode;
+    /** Render a custom root element, useful for integrating with routers */
+    render?: (attributes: RenderAttributes) => React.ReactNode;
+    /** Callback when clicked, renders it as a button tag if href is not provided */
+    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    /** URL, renders it as an anchor tag */
+    href?: string;
+    /** Type attribute, renders it as a button tag */
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    /** Disable from user interaction */
+    disabled?: boolean;
+    /** Prevent the event from bubbling up to the parent */
+    stopPropagation?: boolean;
+    /** Render as a different element */
+    as?: keyof React.JSX.IntrinsicElements;
+    /** Additional classname for the root element */
+    className?: G.ClassName;
+    /** Additional attributes for the root element */
+    attributes?: Attributes;
+};
+export type Ref = HTMLButtonElement | HTMLAnchorElement;
+export {};

package/dist/core/Actionable/Actionable.types.js

@@ -0,0 +1 @@
+export {};

package/dist/core/Actionable/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Actionable";
+export type { Props as ActionableProps, Ref as ActionableRef } from "./Actionable.types";

package/dist/core/Actionable/index.js

@@ -0,0 +1 @@
+export { default } from "./Actionable.js";

package/dist/hooks/_private/useDrag.js

@@ -4,7 +4,6 @@ import * as keys from "../../constants/keys.js";
 import useHandlerRef from "../useHandlerRef.js";
 import useHotkeys from "../useHotkeys.js";
 import useToggle from "../useToggle.js";
-import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
 import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 const useDrag = (cb, options) => {
     const { disabled, containerRef: passedContainerRef, orientation = "all" } = options || {};
@@ -76,7 +75,6 @@ const useDrag = (cb, options) => {
         const handleDragEnd = () => {
             triggerCompensationRef.current = { x: 0, y: 0 };
             toggle.deactivate();
-            enableUserSelect();
             enableScroll();
         };
         document.addEventListener("touchmove", handleDrag, { passive: true });
@@ -103,7 +101,6 @@ const useDrag = (cb, options) => {
                 y: resolvedEvent.clientY - triggerRect.y,
             };
             toggle.activate();
-            disableUserSelect();
             disableScroll();
         };
         triggerEl.addEventListener("touchstart", handleStart, { passive: true });

package/dist/hooks/_private/usePrevious.js

@@ -12,7 +12,6 @@ const usePrevious = (value, clean = false) => {
     React.useEffect(() => {
         ref.current = clean ? copy(value) : value;
     }, [value, clean]);
-    // eslint-disable-next-line react-hooks/refs
     return ref.current;
 };
 export default usePrevious;

package/dist/hooks/useOnClickOutside.js

@@ -1,4 +1,5 @@
 import React from "react";
+import * as keys from "../constants/keys.js";
 import useHandlerRef from "./useHandlerRef.js";
 const useOnClickOutside = (refs, handler, options) => {
     const { disabled } = options || {};
@@ -25,11 +26,18 @@ const useOnClickOutside = (refs, handler, options) => {
                 }
             });
         };
+        const handleKeyDown = (event) => {
+            if (![keys.ENTER, keys.SPACE].includes(event.key))
+                return;
+            handleMouseDown(event);
+        };
         document.addEventListener("mousedown", handleMouseDown, { passive: true });
         document.addEventListener("touchstart", handleMouseDown, { passive: true });
+        document.addEventListener("keydown", handleKeyDown, { passive: true });
         return () => {
             document.removeEventListener("mousedown", handleMouseDown);
             document.removeEventListener("touchstart", handleMouseDown);
+            document.removeEventListener("keydown", handleKeyDown);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [...refs]);

package/dist/index.d.ts

@@ -110,6 +110,8 @@ export { default as Grid } from "./components/Grid";
 export type { GridProps, GridItemProps } from "./components/Grid";
 export { default as Hidden } from "./components/Hidden";
 export type { HiddenProps } from "./components/Hidden";
+export { default as HiddenInput } from "./components/HiddenInput";
+export type { HiddenInputProps } from "./components/HiddenInput";
 export { default as HiddenVisually } from "./components/HiddenVisually";
 export type { HiddenVisuallyProps } from "./components/HiddenVisually";
 export { default as Icon } from "./components/Icon";

package/dist/index.js

@@ -57,6 +57,7 @@ export { default as Flyout } from "./components/Flyout/index.js";
 export { default as FormControl } from "./components/FormControl/index.js";
 export { default as Grid } from "./components/Grid/index.js";
 export { default as Hidden } from "./components/Hidden/index.js";
+export { default as HiddenInput } from "./components/HiddenInput/index.js";
 export { default as HiddenVisually } from "./components/HiddenVisually/index.js";
 export { default as Icon } from "./components/Icon/index.js";
 export { default as Image } from "./components/Image/index.js";

package/dist/types/global.d.ts

@@ -7,7 +7,7 @@ export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
 export type CSSVariable = `--${string}`;
 export type StyleAttribute = React.CSSProperties | (React.CSSProperties & Record<CSSVariable, string | number | undefined>);
 type DataAttributes = object | Record<`data-${string}`, string | boolean>;
-export type Attributes<TagName extends keyof React.JSX.IntrinsicElements = "div"> = React.JSX.IntrinsicElements[TagName] & DataAttributes & {
+export type Attributes<TagName extends keyof React.JSX.IntrinsicElements | void = void> = (TagName extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[TagName] : React.HTMLAttributes<HTMLElement>) & DataAttributes & {
     style?: StyleAttribute;
 };
 export type Viewport = "s" | "m" | "l" | "xl";

package/dist/utilities/a11y/TrapFocus.js

@@ -80,6 +80,10 @@ class TrapFocus {
         const el = shadowRoot ?? document;
         el.removeEventListener("keydown", this.#handleKeyDown);
     };
+    #isLast = () => {
+        const tailItem = _a.chain.tailId && _a.chain.get(_a.chain.tailId);
+        return tailItem && tailItem.data.#root === this.#root;
+    };
     /**
      * Trap the focus, add observer and keyboard event listeners
      * and create a chain item
@@ -98,6 +102,8 @@ class TrapFocus {
         this.#mutationObserver = new MutationObserver(() => {
             if (!this.#root)
                 return;
+            if (!this.#isLast())
+                return;
             const currentActiveElement = getActiveElement(this.#root);
             // Focus stayed inside the wrapper, no need to refocus
             if (this.#root.contains(currentActiveElement))
@@ -117,10 +123,10 @@ class TrapFocus {
         this.#addListeners();
         if (mode === "dialog")
             this.#screenReaderTrap.trap();
-        // Don't add back to the chain if we're traversing back
-        const tailItem = _a.chain.tailId && _a.chain.get(_a.chain.tailId);
         const currentActiveElement = getActiveElement(this.#root);
-        if (!tailItem || this.#root !== tailItem.data.#root) {
+        const isLastInChain = this.#isLast();
+        // Don't add back to the chain if we're traversing back
+        if (!isLastInChain) {
             this.#chainId = _a.chain.add(this);
             // If the focus was moved manually (e.g. with autoFocus) - keep it there
             if (!this.#root.contains(currentActiveElement)) {

package/dist/utilities/dom/index.d.ts

@@ -1,5 +1,3 @@
-export { getRectFromCoordinates } from "./flyout";
 export { getShadowRoot } from "./shadowDom";
-export { enableUserSelect, disableUserSelect } from "./userSelect";
 export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find";
 export { triggerChangeEvent } from "./event";

package/dist/utilities/dom/index.js

@@ -1,5 +1,3 @@
-export { getRectFromCoordinates } from "./flyout.js";
 export { getShadowRoot } from "./shadowDom.js";
-export { enableUserSelect, disableUserSelect } from "./userSelect.js";
 export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find.js";
 export { triggerChangeEvent } from "./event.js";

package/dist/utilities/scroll/disable.js

@@ -4,10 +4,12 @@ export const preventDefault = (e) => e.preventDefault();
  * without locking the page with overflow
  */
 export const disableScroll = () => {
-    window.addEventListener("wheel", preventDefault);
-    window.addEventListener("touchmove", preventDefault);
+    window.addEventListener("wheel", preventDefault, { passive: false });
+    window.addEventListener("touchmove", preventDefault, { passive: false });
+    document.body.style.userSelect = "none";
 };
 export const enableScroll = () => {
     window.removeEventListener("wheel", preventDefault);
     window.removeEventListener("touchmove", preventDefault);
+    document.body.style.userSelect = "";
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reshaped",
   "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-  "version": "3.9.0-canary.9",
+  "version": "3.9.1-canary.2",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",
@@ -20,7 +20,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/reshaped-ui/reshaped.git"
+    "url": "https://github.com/reshaped-ui/reshaped.git",
+    "directory": "packages/reshaped"
   },
   "bugs": {
     "url": "https://github.com/reshaped-ui/reshaped/issues"
@@ -77,107 +78,24 @@
   "browserslist": [
     "defaults and not IE 11"
   ],
-  "devDependencies": {
-    "@changesets/cli": "2.29.7",
-    "@commitlint/cli": "20.1.0",
-    "@commitlint/config-conventional": "20.0.0",
-    "@commitlint/types": "20.0.0",
-    "@eslint/js": "9.38.0",
-    "@size-limit/preset-big-lib": "11.2.0",
-    "@storybook/addon-a11y": "10.0.0",
-    "@storybook/addon-docs": "10.0.0",
-    "@storybook/addon-vitest": "10.0.0",
-    "@storybook/react": "10.0.0",
-    "@storybook/react-vite": "10.0.0",
-    "@testing-library/user-event": "14.6.1",
-    "@types/culori": "4.0.1",
-    "@types/events": "3.0.3",
-    "@types/node": "24.9.2",
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.2",
-    "@vitejs/plugin-react": "5.1.0",
-    "@vitest/browser": "4.0.4",
-    "@vitest/browser-playwright": "4.0.4",
-    "@vitest/coverage-istanbul": "4.0.4",
-    "@vitest/coverage-v8": "4.0.4",
-    "chromatic": "13.3.2",
-    "eslint": "9.38.0",
-    "eslint-config-prettier": "10.1.8",
-    "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-prettier": "5.5.4",
-    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "7.0.1",
-    "lefthook": "2.0.1",
-    "playwright": "1.56.1",
-    "postcss": "8.5.6",
-    "postcss-cli": "11.0.1",
-    "postcss-each": "1.1.0",
-    "postcss-nested": "7.0.2",
-    "prettier": "3.6.2",
-    "react": "18",
-    "react-dom": "18",
-    "react-shadow": "20.6.0",
-    "resolve-tspaths": "0.8.23",
-    "size-limit": "11.2.0",
-    "storybook": "10.0.0",
-    "stylelint": "16.25.0",
-    "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-standard": "39.0.1",
-    "ts-node": "10.9.2",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.46.2",
-    "vite": "7.1.12",
-    "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.4",
-    "vitest-browser-react": "2.0.2"
-  },
   "peerDependencies": {
     "postcss": "^8",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@changesets/changelog-github": "0.5.1",
     "@csstools/postcss-global-data": "3.1.0",
     "chalk": "4.1.2",
     "commander": "14.0.2",
     "cssnano": "7.1.1",
     "csstype": "3.1.3",
     "culori": "4.0.2",
-    "postcss-custom-media": "11.0.6"
-  },
-  "size-limit": [
-    {
-      "name": "Library / JS",
-      "path": "dist/bundle.js",
-      "webpack": false
-    },
-    {
-      "name": "Library / CSS",
-      "path": "dist/bundle.css",
-      "webpack": false
-    },
-    {
-      "name": "Theming / JS",
-      "path": "dist/tests/themingWithoutDefinition.js",
-      "webpack": true
-    },
-    {
-      "name": "Theming with a default theme definition / JS",
-      "path": "dist/tests/themingWithDefinition.js",
-      "webpack": true
-    }
-  ],
-  "engines": {
-    "node": ">=22"
+    "postcss-custom-media": "11.0.6",
+    "@reshaped/utilities": "3.9.1-canary.2"
   },
   "scripts": {
-    "dev": "storybook dev -p 3001 --disable-telemetry",
     "clean": "sh ./bin/clean.sh",
-    "commit": "git-cz",
-    "changeset": "changeset",
+    "dev": "storybook dev -p 3001 -c ../../.storybook --disable-telemetry",
     "build": "pnpm clean && pnpm build:esm && pnpm build:css && pnpm build:bundle",
     "build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes",
     "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
@@ -185,19 +103,9 @@
     "build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
     "build:bundle": "vite build && cp dist/index.d.ts dist/bundle.d.ts",
     "build:size": "pnpm clean && pnpm build:esm && pnpm build:bundle",
-    "build:storybook": "storybook build -o dist/app --disable-telemetry",
-    "build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
-    "release": "sh ./bin/release.sh",
-    "release:canary": "sh ./bin/release-canary.sh",
     "release:local": "pnpm build && pnpm pack --out reshaped-local.tgz",
-    "chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
-    "test:vrt": "pnpm chromatic",
-    "test:vrt:turbo": "pnpm chromatic --only-changed",
     "test:browser": "vitest run --project=storybook",
     "test:unit": "vitest run --project=unit",
-    "test:size": "size-limit",
-    "lint": "pnpm lint:js && pnpm lint:css",
-    "lint:js": "eslint './src/**/*.{ts,tsx}' --fix",
-    "lint:css": "stylelint 'src/**/*.css'"
+    "test:size": "size-limit"
   }
 }

package/README.md

@@ -1,24 +0,0 @@
-# Reshaped
-
-<img width="2400" height="1260" alt="3 0 (1)" src="https://github.com/user-attachments/assets/ef632fe9-9446-430f-b87d-bebebe6fb595" />
-<br /><br />
-
-Reshaped is a library with professionally crafted React & Figma components for building beautiful products or starting your own design system.
-
-<br />
-
-## Documentation
-
-To get started, check out the [Reshaped documentation](https://reshaped.so/docs/getting-started/overview).
-
-## Contributing
-
-Read our [contribution guide](CONTRIBUTING.md) to learn about our principles, development process and testing.
-
-## Maintainers
-
-- Dmitry Belyaev, [@blvdmitry](https://x.com/blvdmitry)
-
-## License
-
-This project is licensed under the terms of the MIT license.

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

@@ -1,31 +0,0 @@
-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" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight">) => {
-    position: T.Position;
-    styles: {
-        left: string | null;
-        right: string | null;
-        top: string | null;
-        bottom: string | null;
-        transform: string;
-        height: string | null;
-        width: string | null;
-    };
-    boundaries: {
-        left: number;
-        top: number;
-        height: number;
-        width: number;
-    };
-};
-export default calculatePosition;

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

@@ -1,178 +0,0 @@
-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: 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);
-    if (isFullWidth || width === "trigger") {
-        position = position.includes("top") ? "top" : "bottom";
-    }
-    const isHorizontalPosition = !!position.match(/^(start|end)/);
-    // 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 + (!isHorizontalPosition ? contentGap : 0);
-    const triggerWidth = triggerBounds.width;
-    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":
-            left = relativeLeft - flyoutWidth;
-            right = relativeRight + triggerWidth;
-            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":
-            left = relativeLeft + triggerWidth - flyoutWidth + contentShift;
-            right = relativeRight - contentShift;
-            break;
-        default:
-            break;
-    }
-    switch (position) {
-        case "top":
-        case "top-start":
-        case "top-end":
-            top = relativeTop - flyoutHeight;
-            bottom = relativeBottom + triggerHeight;
-            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":
-            top = relativeTop + triggerHeight - flyoutHeight + contentShift;
-            bottom = relativeBottom - contentShift;
-            break;
-        default:
-            break;
-    }
-    if (fallbackAdjustLayout) {
-        const getOverflow = () => {
-            return {
-                top: -top + scrollY + SCREEN_OFFSET,
-                bottom: top + flyoutHeight + SCREEN_OFFSET - scrollY - renderContainerHeight,
-                left: -left + scrollX + SCREEN_OFFSET,
-                right: left + flyoutWidth + SCREEN_OFFSET - scrollX - renderContainerWidth,
-            };
-        };
-        const overflow = getOverflow();
-        if (isHorizontalPosition) {
-            if (overflow.top > 0) {
-                top = SCREEN_OFFSET + scrollY;
-                if (bottom !== null)
-                    bottom = bottom - overflow.top;
-            }
-            else if (overflow.bottom > 0) {
-                top = top - overflow.bottom;
-            }
-        }
-        else {
-            if (overflow.left > 0) {
-                left = SCREEN_OFFSET + scrollX;
-                if (right !== null)
-                    right = right - overflow.left;
-            }
-            else if (overflow.right > 0) {
-                left = left - overflow.right;
-            }
-        }
-        const updatedOverflow = getOverflow();
-        if (updatedOverflow.top > 0) {
-            height = Math.max(fallbackMinHeight ? parseInt(fallbackMinHeight) : 0, flyoutHeight - updatedOverflow.top);
-            top = top + (flyoutHeight - height);
-        }
-        else if (updatedOverflow.bottom > 0) {
-            height = Math.max(fallbackMinHeight ? parseInt(fallbackMinHeight) : 0, flyoutHeight - updatedOverflow.bottom);
-            if (bottom !== null)
-                bottom = bottom + (flyoutHeight - height);
-        }
-        if (updatedOverflow.left > 0) {
-            width = Math.max(fallbackMinWidth ? parseInt(fallbackMinWidth) : 0, flyoutWidth - updatedOverflow.left);
-            left = left + (flyoutWidth - width);
-        }
-        else if (updatedOverflow.right > 0) {
-            width = Math.max(fallbackMinWidth ? parseInt(fallbackMinWidth) : 0, flyoutWidth - updatedOverflow.right);
-            if (right !== null)
-                right = right + (flyoutWidth - width);
-        }
-    }
-    if (isFullWidth) {
-        left = SCREEN_OFFSET;
-        width = window.innerWidth - SCREEN_OFFSET * 2;
-    }
-    else if (passedWidth === "trigger") {
-        width = triggerBounds.width;
-    }
-    const translateX = right !== null ? -right : left;
-    const translateY = bottom !== null ? -bottom : top;
-    return {
-        position,
-        styles: {
-            left: right === null ? "0px" : null,
-            right: right === null ? null : "0px",
-            top: bottom === null ? "0px" : null,
-            bottom: bottom === null ? null : "0px",
-            transform: `translate(${translateX}px, ${translateY}px)`,
-            height: height !== undefined ? `${height}px` : null,
-            width: width !== undefined ? `${width}px` : (passedWidth ?? null),
-        },
-        boundaries: {
-            left,
-            top,
-            height: height ?? Math.ceil(flyoutHeight),
-            width: width ?? Math.ceil(flyoutWidth),
-        },
-    };
-};
-export default calculatePosition;