From feb9ec6c32c22665851d6e470aa38637b0d3b32e Mon Sep 17 00:00:00 2001
From: Mikkel Laursen <mlaursen03@gmail.com>
Date: Mon, 11 Dec 2023 10:10:35 -0500
Subject: [PATCH] fix(select): port fixed positioning fixes back from v6.0.0

This fixes an issue where the bottom of the listbox is below the
viewport bottom. Also added the `positionOptions` prop to the Select to
further customize the positioning.

Closes #1461
---
 .../__snapshots__/AutoComplete.tsx.snap       |   8 +-
 .../__snapshots__/FixedDialog.tsx.snap        |   1 +
 .../__snapshots__/MenuItemFileInput.tsx.snap  |   4 +-
 .../__snapshots__/MenuItemTextField.tsx.snap  |   2 +-
 packages/form/src/select/Select.tsx           |  22 +-
 .../__tests__/__snapshots__/MenuBar.tsx.snap  |  24 +-
 .../useFixedPositioning.tsx.snap              |  12 +-
 .../__tests__/createHorizonalPosition.ts      |  39 +-
 .../__tests__/createVerticalPosition.ts       | 541 +++++++++++++++---
 .../src/positioning/__tests__/getCoord.ts     |   8 +-
 .../positioning/createHorizontalPosition.ts   |  85 +--
 .../src/positioning/createVerticalPosition.ts |  54 +-
 packages/utils/src/positioning/getCoord.ts    |  18 +-
 .../utils/src/positioning/getFixedPosition.ts |  81 +--
 .../src/positioning/getTransformOrigin.ts     |  48 +-
 packages/utils/src/positioning/types.ts       |   2 +
 16 files changed, 704 insertions(+), 245 deletions(-)

diff --git a/packages/autocomplete/src/__tests__/__snapshots__/AutoComplete.tsx.snap b/packages/autocomplete/src/__tests__/__snapshots__/AutoComplete.tsx.snap
index 17dea6cd3d..53815f20e8 100644
--- a/packages/autocomplete/src/__tests__/__snapshots__/AutoComplete.tsx.snap
+++ b/packages/autocomplete/src/__tests__/__snapshots__/AutoComplete.tsx.snap
@@ -5,7 +5,7 @@ exports[`AutoComplete should be able to render content before and after the matc
   class="rmd-list rmd-listbox rmd-listbox--temporary rmd-transition--scale-y-enter rmd-transition--scale-y-enter-active"
   id="autocomplete-listbox"
   role="listbox"
-  style="left: 0px; top: 0px; width: 0px; position: fixed; transform-origin: 50% 0;"
+  style="position: fixed; transform-origin: 50% 0; left: 0px; top: 0px; width: 0px;"
 >
   <div>
     Before Results
@@ -76,7 +76,7 @@ exports[`AutoComplete should be able to render content before and after the matc
   class="rmd-list rmd-listbox rmd-listbox--temporary rmd-transition--scale-y-enter rmd-transition--scale-y-enter-active"
   id="autocomplete-listbox"
   role="listbox"
-  style="left: 0px; top: 0px; width: 0px; position: fixed; transform-origin: 50% 0;"
+  style="position: fixed; transform-origin: 50% 0; left: 0px; top: 0px; width: 0px;"
 >
   <div>
     Before Results
@@ -147,7 +147,7 @@ exports[`AutoComplete should be able to render content before and after the matc
   class="rmd-list rmd-listbox rmd-listbox--temporary rmd-transition--scale-y-enter rmd-transition--scale-y-enter-active"
   id="autocomplete-listbox"
   role="listbox"
-  style="left: 0px; top: 0px; width: 0px; position: fixed; transform-origin: 50% 0;"
+  style="position: fixed; transform-origin: 50% 0; left: 0px; top: 0px; width: 0px;"
 >
   <div>
     Before Results
@@ -238,7 +238,7 @@ exports[`AutoComplete should handle a normal filter flow 1`] = `
     class="rmd-list rmd-listbox rmd-listbox--temporary rmd-transition--scale-y-enter rmd-transition--scale-y-enter-active"
     id="autocomplete-listbox"
     role="listbox"
-    style="left: 0px; top: 0px; width: 0px; position: fixed; transform-origin: 50% 0;"
+    style="position: fixed; transform-origin: 50% 0; left: 0px; top: 0px; width: 0px;"
   >
     <li
       class="rmd-list-item rmd-list-item--clickable rmd-option"
diff --git a/packages/dialog/src/__tests__/__snapshots__/FixedDialog.tsx.snap b/packages/dialog/src/__tests__/__snapshots__/FixedDialog.tsx.snap
index 2963465382..9f3e831c09 100644
--- a/packages/dialog/src/__tests__/__snapshots__/FixedDialog.tsx.snap
+++ b/packages/dialog/src/__tests__/__snapshots__/FixedDialog.tsx.snap
@@ -20,6 +20,7 @@ exports[`FixedDialog should disable the overlay and scroll lock behavior by defa
     class="rmd-dialog rmd-dialog--fixed"
     id="dialog"
     role="dialog"
+    style="position: fixed; transform-origin: 100% 0;"
     tabindex="-1"
   />
 </body>
diff --git a/packages/form/src/menu/__tests__/__snapshots__/MenuItemFileInput.tsx.snap b/packages/form/src/menu/__tests__/__snapshots__/MenuItemFileInput.tsx.snap
index 38b768dbd5..3501a09cfb 100644
--- a/packages/form/src/menu/__tests__/__snapshots__/MenuItemFileInput.tsx.snap
+++ b/packages/form/src/menu/__tests__/__snapshots__/MenuItemFileInput.tsx.snap
@@ -6,7 +6,7 @@ exports[`MenuItemFileInput should call the onClick handlers correctly 1`] = `
   class="rmd-menu rmd-menu--elevated"
   id="dropdown-menu-menu"
   role="menu"
-  style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+  style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
   tabindex="-1"
 >
   <ul
@@ -50,7 +50,7 @@ exports[`MenuItemFileInput should work correctly 1`] = `
   class="rmd-menu rmd-menu--elevated"
   id="dropdown-menu-menu"
   role="menu"
-  style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+  style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
   tabindex="-1"
 >
   <ul
diff --git a/packages/form/src/menu/__tests__/__snapshots__/MenuItemTextField.tsx.snap b/packages/form/src/menu/__tests__/__snapshots__/MenuItemTextField.tsx.snap
index e0cb1ab6df..4801d15efb 100644
--- a/packages/form/src/menu/__tests__/__snapshots__/MenuItemTextField.tsx.snap
+++ b/packages/form/src/menu/__tests__/__snapshots__/MenuItemTextField.tsx.snap
@@ -6,7 +6,7 @@ exports[`MenuItemTextField should not change the menu's keyboard focus behavior
   class="rmd-menu rmd-menu--elevated"
   id="dropdown-menu-menu"
   role="menu"
-  style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+  style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
   tabindex="-1"
 >
   <ul
diff --git a/packages/form/src/select/Select.tsx b/packages/form/src/select/Select.tsx
index 00eed0f7b9..28ba3fcc2a 100644
--- a/packages/form/src/select/Select.tsx
+++ b/packages/form/src/select/Select.tsx
@@ -4,7 +4,11 @@ import cn from "classnames";
 import { useIcon } from "@react-md/icon";
 import type { ListElement } from "@react-md/list";
 import { useFixedPositioning } from "@react-md/transition";
-import type { PositionAnchor, PositionWidth } from "@react-md/utils";
+import type {
+  CalculateFixedPositionOptions,
+  PositionAnchor,
+  PositionWidth,
+} from "@react-md/utils";
 import {
   BELOW_CENTER_ANCHOR,
   bem,
@@ -154,6 +158,20 @@ export interface SelectProps
    * `@react-md/icon` package.
    */
   rightChildren?: ReactNode;
+
+  /**
+   * Used to add any additional fixed positioning behavior.
+   * @example
+   * ```tsx
+   * positionOptions={{
+   *   preventOverlap: true,
+   *   disableSwapping: true,
+   * }}
+   * ```
+   *
+   * @remarks \@since 5.1.6
+   */
+  positionOptions?: CalculateFixedPositionOptions;
 }
 
 const block = bem("rmd-select");
@@ -196,6 +214,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
     isRightAddon = true,
     underlineDirection: propUnderlineDirection,
     listboxWidth = "equal",
+    positionOptions,
     portal = true,
     portalInto,
     portalIntoId,
@@ -293,6 +312,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
     onResize: closeOnResize ? hide : undefined,
     transformOrigin: true,
     width: listboxWidth,
+    ...positionOptions,
     onEntering() {
       // can't do onEnter since the positioning styles haven't been applied to the
       // dom node at this time. this means the list is the last element in the DOM
diff --git a/packages/menu/src/__tests__/__snapshots__/MenuBar.tsx.snap b/packages/menu/src/__tests__/__snapshots__/MenuBar.tsx.snap
index 96cf6760a5..34c410a484 100644
--- a/packages/menu/src/__tests__/__snapshots__/MenuBar.tsx.snap
+++ b/packages/menu/src/__tests__/__snapshots__/MenuBar.tsx.snap
@@ -112,7 +112,7 @@ exports[`MenuBar hover mode should allow for a click-first hover mode 1`] = `
     class="rmd-menu rmd-menu--elevated"
     id="menu-1-menu"
     role="menu"
-    style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+    style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
     tabindex="-1"
   >
     <ul
@@ -273,7 +273,7 @@ exports[`MenuBar hover mode should allow for a click-first hover mode 2`] = `
     class="rmd-menu rmd-menu--elevated"
     id="menu-1-menu"
     role="menu"
-    style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+    style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
     tabindex="-1"
   >
     <ul
@@ -434,7 +434,7 @@ exports[`MenuBar hover mode should allow for a click-first hover mode 3`] = `
     class="rmd-menu rmd-menu--elevated"
     id="menu-2-menu"
     role="menu"
-    style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+    style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
     tabindex="-1"
   >
     <ul
@@ -581,7 +581,7 @@ exports[`MenuBar hover mode should allow for a click-first hover mode 4`] = `
     class="rmd-menu rmd-menu--elevated"
     id="menu-2-menu"
     role="menu"
-    style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+    style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
     tabindex="-1"
   >
     <ul
@@ -728,7 +728,7 @@ exports[`MenuBar hover mode should allow for an immediate hover mode by setting
     class="rmd-menu rmd-menu--elevated rmd-transition--scale-y-enter rmd-transition--scale-y-enter-active"
     id="menu-1-menu"
     role="menu"
-    style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+    style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
     tabindex="-1"
   >
     <ul
@@ -889,7 +889,7 @@ exports[`MenuBar hover mode should allow for an immediate hover mode by setting
     class="rmd-menu rmd-menu--elevated"
     id="menu-1-menu"
     role="menu"
-    style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+    style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
     tabindex="-1"
   >
     <ul
@@ -1050,7 +1050,7 @@ exports[`MenuBar hover mode should allow for an immediate hover mode by setting
     class="rmd-menu rmd-menu--elevated"
     id="menu-4-menu"
     role="menu"
-    style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+    style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
     tabindex="-1"
   >
     <ul
@@ -1219,7 +1219,7 @@ exports[`MenuBar hover mode should allow for an immediate hover mode by setting
     class="rmd-menu rmd-menu--elevated"
     id="menu-4-menu"
     role="menu"
-    style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+    style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
     tabindex="-1"
   >
     <ul
@@ -1388,7 +1388,7 @@ exports[`MenuBar hover mode should allow for an immediate hover mode by setting
     class="rmd-menu rmd-menu--elevated"
     id="menu-4-menu"
     role="menu"
-    style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+    style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
     tabindex="-1"
   >
     <ul
@@ -1453,7 +1453,7 @@ exports[`MenuBar hover mode should allow for an immediate hover mode by setting
     class="rmd-menu rmd-menu--elevated"
     id="submenu-1-menu"
     role="menu"
-    style="left: 0px; top: 16px; position: fixed; transform-origin: 0 50%;"
+    style="position: fixed; transform-origin: 0 50%; left: 0px; top: 16px;"
     tabindex="-1"
   >
     <ul
@@ -1628,7 +1628,7 @@ exports[`MenuBar hover mode should allow for an immediate hover mode by setting
     class="rmd-menu rmd-menu--elevated"
     id="menu-4-menu"
     role="menu"
-    style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+    style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
     tabindex="-1"
   >
     <ul
@@ -1693,7 +1693,7 @@ exports[`MenuBar hover mode should allow for an immediate hover mode by setting
     class="rmd-menu rmd-menu--elevated"
     id="submenu-1-menu"
     role="menu"
-    style="left: 0px; top: 16px; position: fixed; transform-origin: 0 50%;"
+    style="position: fixed; transform-origin: 0 50%; left: 0px; top: 16px;"
     tabindex="-1"
   >
     <ul
diff --git a/packages/transition/src/__tests__/__snapshots__/useFixedPositioning.tsx.snap b/packages/transition/src/__tests__/__snapshots__/useFixedPositioning.tsx.snap
index 40c27dfbd9..814979fe2b 100644
--- a/packages/transition/src/__tests__/__snapshots__/useFixedPositioning.tsx.snap
+++ b/packages/transition/src/__tests__/__snapshots__/useFixedPositioning.tsx.snap
@@ -9,7 +9,7 @@ exports[`useFixedPositioning should allow for configuring the fixed position 1`]
   </button>
   <div
     data-testid="element"
-    style="left: 16px; top: 0px; position: fixed; transform-origin: 0 0;"
+    style="position: fixed; transform-origin: 0 0; left: 16px; top: 0px;"
   >
     Some content.
   </div>
@@ -36,7 +36,7 @@ exports[`useFixedPositioning should default to fixing itself with the BELOW_CENT
   <div
     class="rmd-transition--scale-enter rmd-transition--scale-enter-active"
     data-testid="element"
-    style="left: 16px; top: 0px; position: fixed;"
+    style="position: fixed; left: 16px; top: 0px;"
   >
     Some content.
   </div>
@@ -52,7 +52,7 @@ exports[`useFixedPositioning should default to fixing itself with the BELOW_CENT
   </button>
   <div
     data-testid="element"
-    style="left: 16px; top: 0px; position: fixed;"
+    style="position: fixed; left: 16px; top: 0px;"
   >
     Some content.
   </div>
@@ -69,7 +69,7 @@ exports[`useFixedPositioning should default to fixing itself with the BELOW_CENT
   <div
     class="rmd-transition--scale-exit rmd-transition--scale-exit-active"
     data-testid="element"
-    style="left: 16px; top: 0px; position: fixed;"
+    style="position: fixed; left: 16px; top: 0px;"
   >
     Some content.
   </div>
@@ -95,7 +95,7 @@ exports[`useFixedPositioning should update the style correctly based on the init
   </button>
   <div
     data-testid="element"
-    style="left: 16px; top: 0px; position: fixed;"
+    style="position: fixed; left: 16px; top: 0px;"
   >
     Some content.
   </div>
@@ -111,7 +111,7 @@ exports[`useFixedPositioning should update the style correctly based on the init
   </button>
   <div
     data-testid="element"
-    style="left: 30px; top: 40px; position: fixed;"
+    style="position: fixed; left: 30px; top: 40px;"
   >
     Some content.
   </div>
diff --git a/packages/utils/src/positioning/__tests__/createHorizonalPosition.ts b/packages/utils/src/positioning/__tests__/createHorizonalPosition.ts
index c5adfec447..16ac9ba716 100644
--- a/packages/utils/src/positioning/__tests__/createHorizonalPosition.ts
+++ b/packages/utils/src/positioning/__tests__/createHorizonalPosition.ts
@@ -1,4 +1,4 @@
-import type { FixConfig } from "../createHorizontalPosition";
+import type { EqualWidthOptions, FixConfig } from "../createHorizontalPosition";
 import {
   createAnchoredCenter,
   createAnchoredInnerLeft,
@@ -8,7 +8,6 @@ import {
   createEqualWidth,
   createHorizontalPosition,
 } from "../createHorizontalPosition";
-
 import {
   getCenterXCoord,
   getInnerLeftCoord,
@@ -570,9 +569,8 @@ describe("createAnchoredRight", () => {
 });
 
 describe("createEqualWidth", () => {
-  const options1 = {
+  const options1: EqualWidthOptions = {
     x: "center",
-    vw: 1000,
     vwMargin: 0,
     xMargin: 0,
     elWidth: 200,
@@ -587,11 +585,16 @@ describe("createEqualWidth", () => {
       y: 0,
       toJSON() {},
     },
+    screenRight: 1000,
     isMinWidth: false,
-  } as const;
-  const options2 = { ...options1, vwMargin: 16 };
-  const options3 = { ...options1, xMargin: 5 };
-  const options4 = { ...options2, xMargin: 5 };
+  };
+  const options2: EqualWidthOptions = {
+    ...options1,
+    screenRight: 984,
+    vwMargin: 16,
+  };
+  const options3: EqualWidthOptions = { ...options1, xMargin: 5 };
+  const options4: EqualWidthOptions = { ...options2, xMargin: 5 };
 
   it("should return the width of the container element along with the left value", () => {
     expect(createEqualWidth(options1)).toEqual({
@@ -650,26 +653,26 @@ describe("createEqualWidth", () => {
     const opt4 = { ...opt2, xMargin: 5 };
 
     expect(createEqualWidth(opt1)).toEqual({
-      left: 300,
-      minWidth: 400,
+      left: opt1.vwMargin,
+      minWidth: opt1.elWidth,
       right: 0,
       actualX: "center",
     });
     expect(createEqualWidth(opt2)).toEqual({
-      left: 300,
-      minWidth: 400,
+      left: opt2.vwMargin,
+      minWidth: opt1.elWidth,
       right: 16,
       actualX: "center",
     });
     expect(createEqualWidth(opt3)).toEqual({
-      left: 305,
-      minWidth: 390,
+      left: opt3.vwMargin,
+      minWidth: opt3.elWidth,
       right: 0,
       actualX: "center",
     });
     expect(createEqualWidth(opt4)).toEqual({
-      left: 305,
-      minWidth: 390,
+      left: opt4.vwMargin,
+      minWidth: opt4.elWidth,
       right: 16,
       actualX: "center",
     });
@@ -709,8 +712,8 @@ describe("createHorizontalPosition", () => {
       width: "min",
     } as const;
     expect(createHorizontalPosition(minWidthOptions)).toEqual({
-      left: containerRect1.left,
-      minWidth: containerRect1.width,
+      left: 90,
+      minWidth: 120,
       actualX: "inner-left",
     });
 
diff --git a/packages/utils/src/positioning/__tests__/createVerticalPosition.ts b/packages/utils/src/positioning/__tests__/createVerticalPosition.ts
index 8a44fe660b..875f4bf584 100644
--- a/packages/utils/src/positioning/__tests__/createVerticalPosition.ts
+++ b/packages/utils/src/positioning/__tests__/createVerticalPosition.ts
@@ -1,92 +1,463 @@
+import type {
+  CreateVerticalPositionOptions,
+  FixConfig,
+} from "../createVerticalPosition";
+import {
+  createAnchoredAbove,
+  createVerticalPosition,
+} from "../createVerticalPosition";
+
+const containerRect1: DOMRect = {
+  left: 100,
+  right: 50,
+  top: 400,
+  bottom: 75,
+  height: 200,
+  width: 100,
+  x: 100,
+  y: 25,
+  toJSON() {},
+};
+
+const containerRect2: DOMRect = {
+  left: 50,
+  right: 100,
+  top: 75,
+  bottom: 25,
+  height: 100,
+  width: 200,
+  x: 200,
+  y: 75,
+  toJSON() {},
+};
+const config1: FixConfig = {
+  yMargin: 0,
+  vhMargin: 0,
+  elHeight: 50,
+  screenBottom: 1000,
+  disableSwapping: false,
+  containerRect: containerRect1,
+  disableVHBounds: false,
+  preventOverlap: false,
+};
+
+const config2: FixConfig = { ...config1, yMargin: 8 };
+const config3: FixConfig = { ...config1, vhMargin: 8 };
+const config4: FixConfig = { ...config1, yMargin: 16, vhMargin: 8 };
+const outOfBoundsConfig: FixConfig = {
+  ...config1,
+  initialY: -400,
+};
+
+const vh = 500;
+const topBoundsConfig1: FixConfig = {
+  yMargin: 0,
+  vhMargin: 0,
+  elHeight: 100,
+  screenBottom: vh,
+  preventOverlap: false,
+  disableSwapping: false,
+  disableVHBounds: false,
+  // position this element as if it's near the right edge of the screen
+  containerRect: {
+    top: 0,
+    bottom: 40,
+    left: 0,
+    right: 0,
+    // pretending an icon button
+    height: 40,
+    width: 40,
+    x: 0,
+    y: 0,
+    toJSON() {},
+  },
+};
+const topBoundsConfig2: FixConfig = { ...topBoundsConfig1, vhMargin: 8 };
+// const bottomBoundsConfig1: FixConfig = {
+//   yMargin: 0,
+//   vhMargin: 0,
+//   elHeight: 100,
+//   screenBottom: vh,
+//   preventOverlap: false,
+//   disableSwapping: false,
+//   disableVHBounds: false,
+//   // position this element as if it's near the bottom edge of the screen
+//   containerRect: {
+//     top: vh - 40,
+//     bottom: vh,
+//     left: 0,
+//     right: 0,
+//     // pretending an icon button
+//     height: 40,
+//     width: 40,
+//     x: 0,
+//     y: 0,
+//     toJSON() {},
+//   },
+// };
+// const bottomBoundsConfig2: FixConfig = { ...bottomBoundsConfig1, vhMargin: 8 };
+const largerThanViewportOptions1: CreateVerticalPositionOptions = {
+  y: "above",
+  vh,
+  vhMargin: 16,
+  yMargin: 0,
+  elHeight: vh + 400,
+  containerRect: containerRect1,
+  disableSwapping: false,
+  preventOverlap: false,
+  disableVHBounds: false,
+};
+const largerThanViewportOptions22: CreateVerticalPositionOptions = {
+  ...largerThanViewportOptions1,
+  vhMargin: 0,
+};
+
 describe("createAnchoredAbove", () => {
-  it.todo(
-    "should return the calculated above coord and an actualY value of above when it fits within the viewport"
-  );
-  it.todo(
-    "should return the calculated above (greater than 0) coord and an actualY value of above if the vh bounds are disabled"
-  );
-  it.todo(
-    "should return the vhMargin value as the top value if swapping is disabled"
-  );
-  it.todo(
-    "should return the vhMargin value as the top value if swapping below will force it out of the viewport bottom"
-  );
-  it.todo(
-    "should return the bottom coord as the top value if the position can be swapped below"
-  );
-  it.todo(
-    "should set the bottom value to the container's top minus the yMargin if overlap is prevented and it's still positioned above and would overlap"
-  );
-});
+  it("should return the top value if it is within the viewport", () => {
+    expect(createAnchoredAbove(config1)).toEqual({
+      top: 350,
+      actualY: "above",
+    });
+    expect(createAnchoredAbove(config2)).toEqual({
+      top: 342,
+      actualY: "above",
+    });
+    expect(createAnchoredAbove(config3)).toEqual({
+      top: 350,
+      actualY: "above",
+    });
+    expect(createAnchoredAbove(config4)).toEqual({
+      top: 334,
+      actualY: "above",
+    });
+  });
 
-describe("createAnchoredTop", () => {
-  it.todo(
-    "should return the calculated top coord and an actualY value of top when it fits within the viewport"
-  );
-  it.todo(
-    "should return the calculated top coord and an actualY value of top when the vh bounds are disabled"
-  );
-  it.todo(
-    "should return the vhMargin as the top value if swapping is disabled"
-  );
-  it.todo(
-    "should return the vhMargin as the top value if swapping to the bottom causes top viewport issues"
-  );
-  it.todo(
-    "should return the bottom coord as the top value and an actualY of bottom if it can be swapped"
-  );
-});
+  it("should swap to the below position if the element would appear out of the viewport", () => {
+    expect(createAnchoredAbove(topBoundsConfig1)).toEqual({
+      top: 40,
+      actualY: "below",
+    });
+    expect(createAnchoredAbove(topBoundsConfig2)).toEqual({
+      top: 40,
+      actualY: "below",
+    });
+  });
 
-describe("createAnchoredCenter", () => {
-  it.todo(
-    "should return the calculated center coord and an actualY value of center when it fits within the viewport"
-  );
-  it.todo(
-    "should return the calculated top (greater than 0) coord and an actualY value of center if the vh bounds are disabled"
-  );
-  it.todo(
-    "should ensure the top value is >= vhMargin when near the top of the viewport"
-  );
-  it.todo(
-    "should return the top value as the screen bottom minus the element's height if it expands past the viewport bottom"
-  );
-});
+  describe("disableVHBounds option", () => {
+    it("should return a top value greater than or equal to zero since browsers won't scroll upwards past the normal page top", () => {
+      const updatedConfig1: FixConfig = { ...config1, disableVHBounds: true };
+      const updatedConfig2: FixConfig = { ...config2, disableVHBounds: true };
+      const updatedConfig3: FixConfig = { ...config3, disableVHBounds: true };
+      const updatedConfig4: FixConfig = { ...config4, disableVHBounds: true };
 
-describe("createAnchoredBottom", () => {
-  it.todo(
-    "should return the calculated bottom coord and an actualY value of bottom when it fits within the viewport"
-  );
-  it.todo(
-    "should return the calculated bottom coord and an actualY value of bottom when the vh bounds are disabled"
-  );
-  it.todo(
-    "should return the screen bottom minus the element height as the top value if swapping is disabled"
-  );
-  it.todo(
-    "should return the screen bottom minus the element height as the top value if swapping to the top causes top viewport issues"
-  );
-  it.todo(
-    "should return the top coord as the top value and an actualY of top if it can be swapped"
-  );
+      expect(createAnchoredAbove(updatedConfig1)).toEqual({
+        top: 350,
+        actualY: "above",
+      });
+      expect(createAnchoredAbove(updatedConfig2)).toEqual({
+        top: 342,
+        actualY: "above",
+      });
+      expect(createAnchoredAbove(updatedConfig3)).toEqual({
+        top: 350,
+        actualY: "above",
+      });
+      expect(createAnchoredAbove(updatedConfig4)).toEqual({
+        top: 334,
+        actualY: "above",
+      });
+      expect(
+        createAnchoredAbove({ ...outOfBoundsConfig, disableVHBounds: true })
+      ).toEqual({
+        top: 0,
+        actualY: "above",
+      });
+    });
+  });
 });
 
-describe("createAnchoredBelow", () => {
-  it.todo(
-    "should return the calculated below coord and an actualY value of below when it fits within the viewport"
-  );
-  it.todo(
-    "should return the calculated below coord and an actualY value of below if the vh bounds are disabled"
-  );
-  it.todo(
-    "should return the screen bottom minus the element's height as the top value if swapping is disabled"
-  );
-  it.todo(
-    "should return the vhMargin value as the top value if swapping below will force it out of the viewport bottom"
-  );
-  it.todo(
-    "should return the bottom coord as the top value if the position can be swapped below"
-  );
-  it.todo(
-    "should set the bottom value to the container's top minus the yMargin if overlap is prevented and it's still positioned above and would overlap"
-  );
+describe("createVerticalPosition", () => {
+  it("should force centered position for elements that cannot fit within the viewport when disableVHBounds is false and preventOverlap is false", () => {
+    expect(createVerticalPosition(largerThanViewportOptions1)).toEqual({
+      top: 16,
+      bottom: 16,
+      actualY: "center",
+      transformOriginY: containerRect1.top,
+    });
+    expect(createVerticalPosition(largerThanViewportOptions22)).toEqual({
+      top: 0,
+      bottom: 0,
+      actualY: "center",
+      transformOriginY: containerRect1.top,
+    });
+  });
+
+  it("should return the correct above position for elements that can fit within the viewport", () => {
+    const options1: CreateVerticalPositionOptions = {
+      y: "above",
+      vh,
+      vhMargin: 16,
+      yMargin: 0,
+      elHeight: 100,
+      containerRect: containerRect1,
+      disableSwapping: false,
+      preventOverlap: false,
+      disableVHBounds: false,
+    };
+    const options2: CreateVerticalPositionOptions = {
+      ...options1,
+      disableVHBounds: true,
+    };
+    const options3: CreateVerticalPositionOptions = {
+      ...options1,
+      preventOverlap: true,
+    };
+    const options4: CreateVerticalPositionOptions = {
+      ...options1,
+      disableSwapping: true,
+    };
+    const options5: CreateVerticalPositionOptions = {
+      ...options1,
+      preventOverlap: true,
+      disableVHBounds: true,
+      disableSwapping: true,
+    };
+
+    expect(createVerticalPosition(options1)).toEqual({
+      top: 300,
+      actualY: "above",
+    });
+    expect(createVerticalPosition(options2)).toEqual({
+      top: 300,
+      actualY: "above",
+    });
+    expect(createVerticalPosition(options3)).toEqual({
+      top: 300,
+      actualY: "above",
+    });
+    expect(createVerticalPosition(options4)).toEqual({
+      top: 300,
+      actualY: "above",
+    });
+    expect(createVerticalPosition(options5)).toEqual({
+      top: 300,
+      actualY: "above",
+    });
+  });
+
+  it("should return the correct top position for elements that can fit within the viewport", () => {
+    const options1: CreateVerticalPositionOptions = {
+      y: "top",
+      vh,
+      vhMargin: 16,
+      yMargin: 0,
+      elHeight: 100,
+      containerRect: containerRect2,
+      disableSwapping: false,
+      preventOverlap: false,
+      disableVHBounds: false,
+    };
+
+    expect(createVerticalPosition(options1)).toEqual({
+      top: 75,
+      actualY: "top",
+    });
+  });
+
+  it("should return the correct center position for elements that can fit within the viewport", () => {
+    const options1: CreateVerticalPositionOptions = {
+      y: "center",
+      vh,
+      vhMargin: 16,
+      yMargin: 0,
+      elHeight: 100,
+      containerRect: containerRect2,
+      disableSwapping: false,
+      preventOverlap: false,
+      disableVHBounds: false,
+    };
+
+    expect(createVerticalPosition(options1)).toEqual({
+      top: 75,
+      actualY: "center",
+    });
+  });
+
+  it("should return the correct bottom position for elements that can fit within the viewport", () => {
+    const options1: CreateVerticalPositionOptions = {
+      y: "bottom",
+      vh,
+      vhMargin: 16,
+      yMargin: 0,
+      elHeight: 100,
+      containerRect: containerRect2,
+      disableSwapping: false,
+      preventOverlap: false,
+      disableVHBounds: false,
+    };
+
+    expect(createVerticalPosition(options1)).toEqual({
+      top: 75,
+      actualY: "bottom",
+    });
+  });
+
+  it("should return the correct below position for elements that can fit within the viewport", () => {
+    const options1: CreateVerticalPositionOptions = {
+      y: "below",
+      vh,
+      vhMargin: 16,
+      yMargin: 0,
+      elHeight: 100,
+      containerRect: containerRect2,
+      disableSwapping: false,
+      preventOverlap: false,
+      disableVHBounds: false,
+    };
+
+    expect(createVerticalPosition(options1)).toEqual({
+      top: 175,
+      actualY: "below",
+    });
+  });
+
+  it("should position the element to the top of the container element with any additional spacing", () => {
+    const options1: CreateVerticalPositionOptions = {
+      y: "top",
+      vh,
+      yMargin: 0,
+      vhMargin: 16,
+      elHeight: 100,
+      containerRect: containerRect2,
+      disableSwapping: false,
+      disableVHBounds: false,
+      preventOverlap: false,
+    };
+
+    expect(createVerticalPosition(options1)).toEqual({
+      top: 75,
+      actualY: "top",
+    });
+
+    expect(createVerticalPosition({ ...options1, yMargin: 8 })).toEqual({
+      top: 83,
+      actualY: "top",
+    });
+  });
+
+  it("should position the element to the center of the container element", () => {
+    const options1: CreateVerticalPositionOptions = {
+      y: "center",
+      vh,
+      yMargin: 0,
+      vhMargin: 16,
+      elHeight: 120,
+      containerRect: containerRect2,
+      disableSwapping: false,
+      disableVHBounds: false,
+      preventOverlap: false,
+    };
+    const options2: CreateVerticalPositionOptions = {
+      ...options1,
+      yMargin: 20,
+    };
+
+    expect(createVerticalPosition(options1)).toEqual({
+      top: 65,
+      actualY: "center",
+    });
+    expect(createVerticalPosition(options2)).toEqual({
+      top: 85,
+      actualY: "center",
+    });
+  });
+
+  it("should never allow the element to be positioned outside of the viewport", () => {
+    const options1: CreateVerticalPositionOptions = {
+      y: "center",
+      vh,
+      yMargin: 0,
+      vhMargin: 16,
+      elHeight: 120,
+      containerRect: {
+        ...containerRect2,
+        top: 40,
+        height: 48,
+      },
+      disableSwapping: false,
+      disableVHBounds: false,
+      preventOverlap: false,
+    };
+    const options2: CreateVerticalPositionOptions = {
+      ...options1,
+      elHeight: vh - 40,
+      containerRect: containerRect1,
+    };
+
+    expect(createVerticalPosition(options1)).toEqual({
+      top: 16,
+      actualY: "center",
+    });
+
+    expect(createVerticalPosition(options2)).toEqual({
+      top: 24,
+      actualY: "center",
+    });
+  });
+
+  it("should position the element to the bottom of the container element with any additional spacing", () => {
+    const options1: CreateVerticalPositionOptions = {
+      y: "bottom",
+      vh,
+      yMargin: 0,
+      vhMargin: 16,
+      elHeight: 80,
+      containerRect: containerRect2,
+      disableSwapping: false,
+      disableVHBounds: false,
+      preventOverlap: false,
+    };
+    const options2: CreateVerticalPositionOptions = {
+      ...options1,
+      yMargin: 8,
+      containerRect: containerRect1,
+    };
+
+    expect(createVerticalPosition(options1)).toEqual({
+      top: 95,
+      actualY: "bottom",
+    });
+
+    expect(createVerticalPosition(options2)).toEqual({
+      top: 512,
+      actualY: "bottom",
+    });
+  });
+
+  it("should position the element below the container element with any additional spacing", () => {
+    const options1: CreateVerticalPositionOptions = {
+      y: "below",
+      vh,
+      yMargin: 0,
+      vhMargin: 16,
+      elHeight: 80,
+      containerRect: containerRect2,
+      disableSwapping: false,
+      disableVHBounds: false,
+      preventOverlap: false,
+    };
+    const options2: CreateVerticalPositionOptions = {
+      ...options1,
+      yMargin: 8,
+    };
+
+    expect(createVerticalPosition(options1)).toEqual({
+      top: 175,
+      actualY: "below",
+    });
+    expect(createVerticalPosition(options2)).toEqual({
+      top: 183,
+      actualY: "below",
+    });
+  });
 });
diff --git a/packages/utils/src/positioning/__tests__/getCoord.ts b/packages/utils/src/positioning/__tests__/getCoord.ts
index 3c49bed720..6fe667bcee 100644
--- a/packages/utils/src/positioning/__tests__/getCoord.ts
+++ b/packages/utils/src/positioning/__tests__/getCoord.ts
@@ -726,14 +726,14 @@ describe("getCenterYCoord", () => {
         elHeight: 100,
         containerRect: containerRect1,
       })
-    ).toBe(75);
+    ).toBe(83);
     expect(
       getCenterYCoord({
         yMargin: 8,
         elHeight: 50,
         containerRect: containerRect1,
       })
-    ).toBe(100);
+    ).toBe(108);
 
     expect(
       getCenterYCoord({
@@ -755,14 +755,14 @@ describe("getCenterYCoord", () => {
         elHeight: 100,
         containerRect: containerRect2,
       })
-    ).toBe(75);
+    ).toBe(83);
     expect(
       getCenterYCoord({
         yMargin: 8,
         elHeight: 50,
         containerRect: containerRect2,
       })
-    ).toBe(100);
+    ).toBe(108);
   });
 
   it("should use the initialY instead of any of the container element sizing when provided and ignoring margin", () => {
diff --git a/packages/utils/src/positioning/createHorizontalPosition.ts b/packages/utils/src/positioning/createHorizontalPosition.ts
index 1057e47b3b..aabccb9a97 100644
--- a/packages/utils/src/positioning/createHorizontalPosition.ts
+++ b/packages/utils/src/positioning/createHorizontalPosition.ts
@@ -31,7 +31,7 @@ export interface FixConfig extends XCoordConfig {
 /**
  * @internal
  */
-interface Options
+export interface CreateHorizontalPositionOptions
   extends Required<
     Pick<
       FixedPositionOptions,
@@ -199,44 +199,54 @@ export function createAnchoredRight(config: FixConfig): XPosition {
   return { actualX, left };
 }
 
-interface EqualWidthOptions
+export interface EqualWidthOptions
   extends Pick<
-    Options,
-    | "x"
-    | "vw"
-    | "elWidth"
-    | "xMargin"
-    | "vwMargin"
-    | "containerRect"
-    | "initialX"
+    CreateHorizontalPositionOptions,
+    "x" | "elWidth" | "xMargin" | "vwMargin" | "containerRect" | "initialX"
   > {
+  screenRight: number;
   isMinWidth: boolean;
 }
 
 /**
  * @internal
  */
-export function createEqualWidth({
-  x,
-  vw,
-  elWidth,
-  xMargin,
-  vwMargin,
-  initialX,
-  containerRect,
-  isMinWidth,
-}: EqualWidthOptions): XPosition {
-  const left = initialX ?? containerRect.left + xMargin;
+export function createEqualWidth(options: EqualWidthOptions): XPosition {
+  const {
+    x,
+    elWidth,
+    xMargin,
+    vwMargin,
+    initialX,
+    containerRect,
+    screenRight,
+    isMinWidth,
+  } = options;
+
+  let left = initialX ?? containerRect.left + xMargin;
 
   let width: number | undefined = containerRect.width - xMargin * 2;
   let minWidth: number | undefined;
   let right: number | undefined;
   if (isMinWidth) {
     minWidth = width;
+    // if the fixed element has a width greater than the element it is fixed to,
+    // update the width to be the fixed element's width. since the "min-width"
+    // option is only possible for horizontally centered elements, need to then
+    // update the `left` position again.
+    if (elWidth > width) {
+      left -= (elWidth - width) / 2;
+      minWidth = elWidth;
+    }
+
     width = undefined;
-    if (left + elWidth > vw - vwMargin) {
+    const elRight = left + elWidth;
+    if (elRight > screenRight) {
+      left -= elRight - screenRight;
       right = vwMargin;
     }
+
+    left = Math.max(vwMargin, left);
   }
 
   // going to assume that the container element is visible in the DOM and just
@@ -255,26 +265,31 @@ export function createEqualWidth({
  * options.
  * @internal
  */
-export function createHorizontalPosition({
-  x,
-  vw,
-  vwMargin,
-  xMargin,
-  width,
-  elWidth,
-  initialX,
-  containerRect,
-  disableSwapping,
-}: Options): XPosition {
+export function createHorizontalPosition(
+  options: CreateHorizontalPositionOptions
+): XPosition {
+  const {
+    x,
+    vw,
+    vwMargin,
+    xMargin,
+    width,
+    elWidth,
+    initialX,
+    containerRect,
+    disableSwapping,
+  } = options;
+
+  const screenRight = vw - vwMargin;
   if (width === "min" || width === "equal") {
     return createEqualWidth({
       x,
-      vw,
       vwMargin,
       xMargin,
       elWidth,
       initialX,
       containerRect,
+      screenRight,
       isMinWidth: width === "min",
     });
   }
@@ -295,7 +310,7 @@ export function createHorizontalPosition({
     xMargin,
     elWidth,
     initialX,
-    screenRight: vw - vwMargin,
+    screenRight,
     containerRect,
     disableSwapping,
   };
diff --git a/packages/utils/src/positioning/createVerticalPosition.ts b/packages/utils/src/positioning/createVerticalPosition.ts
index 96bb1a0d39..532276d81f 100644
--- a/packages/utils/src/positioning/createVerticalPosition.ts
+++ b/packages/utils/src/positioning/createVerticalPosition.ts
@@ -6,21 +6,18 @@ import {
   getCenterYCoord,
   getTopCoord,
 } from "./getCoord";
-import { getViewportSize } from "./getViewportSize";
 import type { FixedPositionOptions, VerticalPosition } from "./types";
 
-/**
- * @internal
- */
+/** @internal */
 interface YPosition {
   top: number;
   bottom?: number;
   actualY: VerticalPosition;
+  /** @remarks \@since 5.1.6 */
+  transformOriginY?: number;
 }
 
-/**
- * @internal
- */
+/** @internal */
 export interface FixConfig extends YCoordConfig {
   vhMargin: number;
   screenBottom: number;
@@ -29,10 +26,8 @@ export interface FixConfig extends YCoordConfig {
   disableVHBounds: boolean;
 }
 
-/**
- * @internal
- */
-interface Options
+/** @internal */
+export interface CreateVerticalPositionOptions
   extends Required<
     Pick<
       FixedPositionOptions,
@@ -76,7 +71,7 @@ export function createAnchoredAbove(config: FixConfig): YPosition {
 
   if (disableVHBounds) {
     // can't actually allow a top value as a negative number since browsers
-    // won't scroll upwards pas the normal page top
+    // won't scroll upwards past the normal page top
     return { actualY, top: Math.max(0, top) };
   }
 
@@ -102,7 +97,7 @@ export function createAnchoredAbove(config: FixConfig): YPosition {
     actualY === "above" &&
     top + elHeight > containerRect.top
   ) {
-    bottom = window.innerHeight - containerRect.top + yMargin;
+    bottom = screenBottom - containerRect.top + yMargin;
   }
 
   return { actualY, top, bottom };
@@ -235,13 +230,13 @@ export function createAnchoredBelow(config: FixConfig): YPosition {
       top: Math.max(vhMargin, availableTop - elHeight),
       // this makes it so that the bottom of the fixed element is the top of the container
       // element. this ensures that it won't ever overlap the container element
-      bottom: getViewportSize("height") - availableTop,
+      bottom: window.innerHeight - availableTop,
     };
   }
 
   const swappedTop = getAboveCoord(config);
   if (disableSwapping || swappedTop < vhMargin) {
-    top = Math.max(top, screenBottom - elHeight);
+    top = Math.min(top, screenBottom - elHeight);
   } else {
     actualY = "above";
     top = swappedTop;
@@ -255,18 +250,22 @@ export function createAnchoredBelow(config: FixConfig): YPosition {
  *
  * @internal
  */
-export function createVerticalPosition({
-  y,
-  vh,
-  vhMargin,
-  yMargin,
-  elHeight,
-  initialY,
-  containerRect,
-  disableSwapping,
-  preventOverlap,
-  disableVHBounds,
-}: Options): YPosition {
+export function createVerticalPosition(
+  options: CreateVerticalPositionOptions
+): YPosition {
+  const {
+    y,
+    vh,
+    vhMargin,
+    yMargin,
+    elHeight,
+    initialY,
+    containerRect,
+    disableSwapping,
+    preventOverlap,
+    disableVHBounds,
+  } = options;
+
   if (!disableVHBounds && !preventOverlap && elHeight > vh - vhMargin * 2) {
     // the element is too big to be displayed in the viewport, so just span the
     // full viewport excluding margins
@@ -274,6 +273,7 @@ export function createVerticalPosition({
       top: vhMargin,
       bottom: vhMargin,
       actualY: "center",
+      transformOriginY: containerRect.top,
     };
   }
 
diff --git a/packages/utils/src/positioning/getCoord.ts b/packages/utils/src/positioning/getCoord.ts
index ecb9a9afae..c24bca0e84 100644
--- a/packages/utils/src/positioning/getCoord.ts
+++ b/packages/utils/src/positioning/getCoord.ts
@@ -1,3 +1,4 @@
+/** @internal */
 export interface XCoordConfig {
   xMargin: number;
   elWidth: number;
@@ -5,6 +6,7 @@ export interface XCoordConfig {
   containerRect: DOMRect;
 }
 
+/** @internal */
 export interface YCoordConfig {
   yMargin: number;
   elHeight: number;
@@ -20,6 +22,7 @@ type Top = number;
  * (outer) left of the container element. So the right bounds of the fixed
  * element will be equal to the left bounds of the container element (before the
  * xMargin is applied).
+ *
  * @internal
  */
 export function getLeftCoord({
@@ -35,6 +38,7 @@ export function getLeftCoord({
  * Creates the `left` style value for an element that should be fixed to the
  * inner-left of the container element. So the left bounds of both the container
  * and fixed elements will overlap (before the xMargin is applied)
+ *
  * @internal
  */
 export function getInnerLeftCoord({
@@ -52,6 +56,7 @@ export function getInnerLeftCoord({
  *
  * Note: Unlike all the other horizontal positioning logic, the center position
  * does not use the xMargin.
+ *
  * @internal
  */
 export function getCenterXCoord({
@@ -68,6 +73,7 @@ export function getCenterXCoord({
  * Creates the `left` style value for an element that should be fixed to the
  * inner-right of the container element. So the right bounds for both the
  * container and fixed elements will overlap (before the xMargin is applied).
+ *
  * @internal
  */
 export function getInnerRightCoord({
@@ -86,6 +92,7 @@ export function getInnerRightCoord({
  * (outer) right of the container element. So the left bounds of the fixed
  * element will overlap with the right bounds of the container element (before
  * the xMargin is applied).
+ *
  * @internal
  */
 export function getRightCoord({
@@ -100,6 +107,7 @@ export function getRightCoord({
  * Creates the `top` style value for an element that should be fixed above the
  * container element. So the bottom bounds of the fixed element will overlap
  * with the top bounds of the container element (before the yMargin is applied).
+ *
  * @internal
  */
 export function getAboveCoord({
@@ -115,6 +123,7 @@ export function getAboveCoord({
  * Creates the `top` style value for an element that should be fixed to the top
  * of the container element. So the top bounds for both the container and fixed
  * elements will overlap (before the yMargin is applied).
+ *
  * @internal
  */
 export function getTopCoord({
@@ -133,15 +142,20 @@ export function getTopCoord({
  *
  * Note: Unlike all the other vertical positioning logic, the center position
  * does not use the yMargin.
+ *
+ * @internal
  */
 export function getCenterYCoord({
+  yMargin,
   elHeight,
   initialY,
   containerRect,
 }: YCoordConfig): Top {
   const containerCenter = containerRect.height / 2;
   const elementCenter = elHeight / 2;
-  return (initialY ?? containerRect.top + containerCenter) - elementCenter;
+  return (
+    (initialY ?? containerRect.top + containerCenter + yMargin) - elementCenter
+  );
 }
 
 /**
@@ -149,6 +163,7 @@ export function getCenterYCoord({
  * bottom of the container element. So the top bounds of the fixed element
  * should overlap the bottom bounds of the container element (before the yMargin
  * is applied).
+ *
  * @internal
  */
 export function getBottomCoord({
@@ -166,6 +181,7 @@ export function getBottomCoord({
  * Creates the `top` style value for an element that should be fixed to the
  * bottom of the container element. So the bottom bounds of both the container
  * and fixed elements should overlap (before the yMargin is applied).
+ *
  * @internal
  */
 export function getBelowCoord({
diff --git a/packages/utils/src/positioning/getFixedPosition.ts b/packages/utils/src/positioning/getFixedPosition.ts
index 0db8c3f464..69c698d633 100644
--- a/packages/utils/src/positioning/getFixedPosition.ts
+++ b/packages/utils/src/positioning/getFixedPosition.ts
@@ -1,10 +1,10 @@
+import { scrollbarSize } from "../layout/scrollbarSize";
 import { BELOW_CENTER_ANCHOR } from "./constants";
 import { createHorizontalPosition } from "./createHorizontalPosition";
 import { createVerticalPosition } from "./createVerticalPosition";
 import { findSizingContainer } from "./findSizingContainer";
 import { getElementRect } from "./getElementRect";
 import { getTransformOrigin } from "./getTransformOrigin";
-import { getViewportSize } from "./getViewportSize";
 import type { FixedPosition, FixedPositionOptions } from "./types";
 
 /**
@@ -56,35 +56,29 @@ const FALLBACK_DOM_RECT: DOMRect = {
  * next flow:
  *
  * First, check the horizontal sizes and make sure that the element is still
- * within the viewport with the provided viewwidth margin. If it isn't, first
+ * within the viewport with the provided view width margin. If it isn't, first
  * try to swap only to a `right` style instead of left to see if that fixes it,
  * otherwise keep both the `left` and `right` styles.
  */
-export function getFixedPosition({
-  container,
-  element,
-  anchor = BELOW_CENTER_ANCHOR,
-  initialX,
-  initialY,
-  vwMargin = 16,
-  vhMargin = 16,
-  xMargin = 0,
-  yMargin = 0,
-  width: widthType = "auto",
-  preventOverlap = false,
-  transformOrigin = false,
-  disableSwapping: propDisableSwapping = false,
-  disableVHBounds = false,
-}: FixedPositionOptions): FixedPosition {
-  container = findSizingContainer(container);
+export function getFixedPosition(options: FixedPositionOptions): FixedPosition {
+  const {
+    element,
+    anchor = BELOW_CENTER_ANCHOR,
+    initialX,
+    vwMargin = 16,
+    vhMargin = 16,
+    xMargin = 0,
+    yMargin = 0,
+    width: widthType = "auto",
+    preventOverlap = false,
+    transformOrigin = false,
+    disableSwapping = false,
+    disableVHBounds = false,
+  } = options;
+  let { initialY } = options;
+  const container = findSizingContainer(options.container);
 
   if (process.env.NODE_ENV !== "production") {
-    if (widthType !== "auto" && anchor.x !== "center") {
-      throw new Error(
-        'Unable to use a calculated width when the horizontal anchor is not `"center"`.'
-      );
-    }
-
     if (preventOverlap && anchor.y !== "above" && anchor.y !== "below") {
       throw new Error(
         'Unable to prevent overlap when the vertical anchor is not `"above"` or `"below"`'
@@ -96,14 +90,35 @@ export function getFixedPosition({
     return {
       actualX: anchor.x,
       actualY: anchor.y,
+      style: {
+        left: initialX,
+        top: initialY,
+        position: disableVHBounds ? "absolute" : "fixed",
+        transformOrigin: transformOrigin
+          ? getTransformOrigin({ x: anchor.x, y: anchor.y })
+          : undefined,
+      },
     };
   }
 
   const containerRect = container?.getBoundingClientRect() ?? FALLBACK_DOM_RECT;
-  const vh = getViewportSize("height");
-  const vw = getViewportSize("width");
+  const vh = window.innerHeight;
+  const vw = window.innerWidth;
 
-  const { height, width: elWidth } = getElementRect(element);
+  const { minWidth: elMinWidth } = element.style;
+  // Note: This makes it "min-content" or "min-container-width"
+  if (widthType === "min") {
+    element.style.overflow = "visible";
+    element.style.minWidth = "";
+  }
+  const elementRect = getElementRect(element);
+  const { height } = elementRect;
+  let elWidth = elementRect.width;
+  if (widthType === "min") {
+    elWidth += scrollbarSize();
+    element.style.overflow = "";
+    element.style.minWidth = elMinWidth;
+  }
   if (disableVHBounds) {
     const dialog = element.closest("[role='dialog']");
     if (!dialog) {
@@ -111,8 +126,6 @@ export function getFixedPosition({
     }
   }
 
-  const disableSwapping = propDisableSwapping || !container;
-
   const { left, right, width, minWidth, actualX } = createHorizontalPosition({
     x: anchor.x,
     vw,
@@ -124,7 +137,7 @@ export function getFixedPosition({
     containerRect,
     disableSwapping,
   });
-  const { top, bottom, actualY } = createVerticalPosition({
+  const { top, bottom, actualY, transformOriginY } = createVerticalPosition({
     y: anchor.y,
     vh,
     vhMargin,
@@ -149,7 +162,11 @@ export function getFixedPosition({
       minWidth,
       position: disableVHBounds ? "absolute" : "fixed",
       transformOrigin: transformOrigin
-        ? getTransformOrigin({ x: actualX, y: actualY })
+        ? getTransformOrigin({
+            x: actualX,
+            y: actualY,
+            transformOriginY,
+          })
         : undefined,
     },
   };
diff --git a/packages/utils/src/positioning/getTransformOrigin.ts b/packages/utils/src/positioning/getTransformOrigin.ts
index 905a32aa07..11260e6c25 100644
--- a/packages/utils/src/positioning/getTransformOrigin.ts
+++ b/packages/utils/src/positioning/getTransformOrigin.ts
@@ -1,18 +1,28 @@
 import type { PositionAnchor } from "./types";
 
+/**
+ * @remarks \@since 5.1.6
+ * @internal
+ */
+export interface TransformOriginOptions extends PositionAnchor {
+  transformOriginY?: number;
+}
+
 /**
  * This is a simple util that'll generate a css `transform-origin` string so
  * that the fixed element can animate from the correct point based on the
  * provided anchor.
  *
- * @param anchor - The anchor that should be used to create the transform origin
+ * @param options - The anchor that should be used to create the transform origin
  * for.
  * @returns the transform origin string
  * @internal
  */
-export function getTransformOrigin(anchor: PositionAnchor): string {
+export function getTransformOrigin(options: TransformOriginOptions): string {
+  const { transformOriginY: yPosition } = options;
+
   let x = "0";
-  switch (anchor.x) {
+  switch (options.x) {
     case "right":
     case "inner-left":
       x = "0";
@@ -29,20 +39,24 @@ export function getTransformOrigin(anchor: PositionAnchor): string {
   }
 
   let y = "0";
-  switch (anchor.y) {
-    case "above":
-    case "bottom":
-      y = "100%";
-      break;
-    case "center":
-      y = "50%";
-      break;
-    case "below":
-    case "top":
-      y = "0";
-      break;
-    default:
-      y = "0";
+  if (typeof yPosition === "number") {
+    y = `${yPosition}px`;
+  } else {
+    switch (options.y) {
+      case "above":
+      case "bottom":
+        y = "100%";
+        break;
+      case "center":
+        y = "50%";
+        break;
+      case "below":
+      case "top":
+        y = "0";
+        break;
+      default:
+        y = "0";
+    }
   }
 
   return `${x} ${y}`;
diff --git a/packages/utils/src/positioning/types.ts b/packages/utils/src/positioning/types.ts
index e94cf7fe05..0baf2cf73b 100644
--- a/packages/utils/src/positioning/types.ts
+++ b/packages/utils/src/positioning/types.ts
@@ -160,6 +160,8 @@ export interface CalculateFixedPositionOptions extends InitialCoords {
    * @defaultValue `false`
    * @remarks \@since 5.0.0 This will always be `true` if the
    * {@link FixedPositionOptions.container} is `null`.
+   * \@remarks \@since 5.1.6 Allow this to be `false` while the `container` is
+   * null. I can't figure out why I prevented that.
    */
   disableSwapping?: boolean;