Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update to upstream @floating-ui/[email protected] #10

Merged
merged 3 commits into from
Apr 30, 2024

Conversation

github-actions[bot]
Copy link
Contributor

Release
@floating-ui/[email protected]

Diff for packages/dom

Diff
diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md
index f1f00bfb..70cfffb4 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @floating-ui/dom
 
+## 1.6.4
+
+### Patch Changes
+
+- fix: avoid spreading rects to support `DOMRect` types
+- fix(types): use DOM Derivable type
+- perf(autoUpdate): reduce layoutShift update checks while reference is clipped from view
+
 ## 1.6.3
 
 ### Patch Changes
diff --git a/packages/dom/package.json b/packages/dom/package.json
index cd17c720..31c52c97 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@floating-ui/dom",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Floating UI for the web",
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,8 @@
     "dist"
   ],
   "scripts": {
-    "lint": "biome lint .",
+    "lint": "eslint .",
+    "format": "prettier --write .",
     "clean": "rimraf dist out-tsc test-results",
     "dev": "vite",
     "build": "rollup -c",
diff --git a/packages/dom/src/autoUpdate.ts b/packages/dom/src/autoUpdate.ts
index d01ae295..8d04015d 100644
--- a/packages/dom/src/autoUpdate.ts
+++ b/packages/dom/src/autoUpdate.ts
@@ -89,9 +89,11 @@ function observeMove(element: Element, onMove: () => void) {
         }
 
         if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
           timeoutId = setTimeout(() => {
             refresh(false, 1e-7);
-          }, 100);
+          }, 1000);
         } else {
           refresh(false, ratio);
         }
diff --git a/packages/dom/src/middleware.ts b/packages/dom/src/middleware.ts
index 90112003..5965da8a 100644
--- a/packages/dom/src/middleware.ts
+++ b/packages/dom/src/middleware.ts
@@ -1,16 +1,18 @@
 import type {
   Coords,
-  Derivable,
   InlineOptions,
   LimitShiftOptions,
+  SideObject,
 } from '@floating-ui/core';
 import {
   arrow as arrowCore,
   autoPlacement as autoPlacementCore,
+  detectOverflow as detectOverflowCore,
   flip as flipCore,
   hide as hideCore,
   inline as inlineCore,
   limitShift as limitShiftCore,
+  offset as offsetCore,
   shift as shiftCore,
   size as sizeCore,
 } from '@floating-ui/core';
@@ -18,6 +20,8 @@ import {
 import type {
   ArrowOptions,
   AutoPlacementOptions,
+  Derivable,
+  DetectOverflowOptions,
   FlipOptions,
   HideOptions,
   Middleware,
@@ -26,7 +30,60 @@ import type {
   SizeOptions,
 } from './types';
 
-export {detectOverflow, offset} from '@floating-ui/core';
+// `OffsetOptions` in the core library were originally already `Derivable`. For
+// backwards-compatibility, re-define it here to use the DOM Derivable type.
+type OffsetOptions =
+  | number
+  | Partial<{
+      /**
+       * The axis that runs along the side of the floating element. Represents
+       * the distance (gutter or margin) between the reference and floating
+       * element.
+       * @default 0
+       */
+      mainAxis: number;
+      /**
+       * The axis that runs along the alignment of the floating element.
+       * Represents the skidding between the reference and floating element.
+       * @default 0
+       */
+      crossAxis: number;
+      /**
+       * The same axis as `crossAxis` but applies only to aligned placements
+       * and inverts the `end` alignment. When set to a number, it overrides the
+       * `crossAxis` value.
+       *
+       * A positive number will move the floating element in the direction of
+       * the opposite edge to the one that is aligned, while a negative number
+       * the reverse.
+       * @default null
+       */
+      alignmentAxis: number | null;
+    }>;
+
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+export const detectOverflow: (
+  state: MiddlewareState,
+  options?: DetectOverflowOptions | Derivable<DetectOverflowOptions>,
+) => Promise<SideObject> = detectOverflowCore;
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+export const offset: (
+  options?: OffsetOptions | Derivable<OffsetOptions>,
+) => Middleware = offsetCore;
 
 /**
  * Optimizes the visibility of the floating element by choosing the placement
diff --git a/packages/dom/src/platform/getElementRects.ts b/packages/dom/src/platform/getElementRects.ts
index d7ebdf70..2b46c321 100644
--- a/packages/dom/src/platform/getElementRects.ts
+++ b/packages/dom/src/platform/getElementRects.ts
@@ -8,12 +8,19 @@ export const getElementRects: Platform['getElementRects'] = async function (
 ) {
   const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
   const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
+
   return {
     reference: getRectRelativeToOffsetParent(
       data.reference,
       await getOffsetParentFn(data.floating),
       data.strategy,
     ),
-    floating: {x: 0, y: 0, ...(await getDimensionsFn(data.floating))},
+    floating: {
+      x: 0,
+      y: 0,
+      width: floatingDimensions.width,
+      height: floatingDimensions.height,
+    },
   };
 };
diff --git a/packages/dom/test/visual/spec/ContainingBlock.tsx b/packages/dom/test/visual/spec/ContainingBlock.tsx
index 8ab27414..039dcf20 100644
--- a/packages/dom/test/visual/spec/ContainingBlock.tsx
+++ b/packages/dom/test/visual/spec/ContainingBlock.tsx
@@ -16,7 +16,6 @@ export function ContainingBlock() {
     whileElementsMounted: autoUpdate,
   });
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: testing
   useLayoutEffect(update, [update, willChange, contain, containerType]);
 
   return (
diff --git a/packages/dom/test/visual/spec/DecimalSize.tsx b/packages/dom/test/visual/spec/DecimalSize.tsx
index 77b1dcf7..a9b658af 100644
--- a/packages/dom/test/visual/spec/DecimalSize.tsx
+++ b/packages/dom/test/visual/spec/DecimalSize.tsx
@@ -27,7 +27,6 @@ export function DecimalSize() {
     ],
   });
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: testing
   useLayoutEffect(update, [size, truncate, update]);
 
   return (
diff --git a/packages/dom/test/visual/spec/Hide.tsx b/packages/dom/test/visual/spec/Hide.tsx
index b4a7bc33..9834cb85 100644
--- a/packages/dom/test/visual/spec/Hide.tsx
+++ b/packages/dom/test/visual/spec/Hide.tsx
@@ -51,7 +51,6 @@ export function Hide() {
 
   const {scrollRef, indicator} = useScroll({refs, update});
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: testing
   useLayoutEffect(update, [update, hierarchy]);
 
   let referenceJsx = (
diff --git a/packages/dom/test/visual/spec/Scroll.tsx b/packages/dom/test/visual/spec/Scroll.tsx
index fef488d4..a3914630 100644
--- a/packages/dom/test/visual/spec/Scroll.tsx
+++ b/packages/dom/test/visual/spec/Scroll.tsx
@@ -26,7 +26,6 @@ export function Scroll() {
   });
   const {scrollRef, indicator} = useScroll({refs, update});
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: testing
   useLayoutEffect(update, [update, node]);
 
   const referenceJsx = (
diff --git a/packages/dom/test/visual/spec/Scrollbars.tsx b/packages/dom/test/visual/spec/Scrollbars.tsx
index 4671e40f..f092a143 100644
--- a/packages/dom/test/visual/spec/Scrollbars.tsx
+++ b/packages/dom/test/visual/spec/Scrollbars.tsx
@@ -9,7 +9,7 @@ import {useSize} from '../utils/useSize';
 export function Scrollbars() {
   const [rtl, setRtl] = useState(false);
   const [placement, setPlacement] = useState<Placement>('bottom');
-  const {x, y, refs, strategy, update} = useFloating({
+  const {x, y, refs, strategy} = useFloating({
     placement,
     whileElementsMounted: autoUpdate,
     middleware: [shift({crossAxis: true, altBoundary: true})],
diff --git a/packages/dom/test/visual/spec/Table.tsx b/packages/dom/test/visual/spec/Table.tsx
index 4777a556..3b02f22a 100644
--- a/packages/dom/test/visual/spec/Table.tsx
+++ b/packages/dom/test/visual/spec/Table.tsx
@@ -12,7 +12,6 @@ export function Table() {
   const [node, setNode] = useState<Node>('td');
   const {x, y, refs, strategy, update} = useFloating();
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: testing
   useLayoutEffect(update, [update, node, sameParent]);
 
   const floatingJsx = (
diff --git a/packages/dom/test/visual/utils/Container.tsx b/packages/dom/test/visual/utils/Container.tsx
index 27f95f5d..082bbbd1 100644
--- a/packages/dom/test/visual/utils/Container.tsx
+++ b/packages/dom/test/visual/utils/Container.tsx
@@ -33,7 +33,6 @@ const getStyleForPosition = (position: string) => {
 
 export function Container({children, update}: Props) {
   const [position, setPosition] = useState<string>('center');
-  // biome-ignore lint/correctness/useExhaustiveDependencies: testing
   useLayoutEffect(update, [update, position]);
 
   return (
diff --git a/packages/dom/test/visual/utils/New.tsx b/packages/dom/test/visual/utils/New.tsx
index bda5e4b8..1a833e83 100644
--- a/packages/dom/test/visual/utils/New.tsx
+++ b/packages/dom/test/visual/utils/New.tsx
@@ -9,7 +9,7 @@ import {useSize} from './useSize';
 export function New() {
   const [placement, setPlacement] = useState<Placement>('bottom');
   const arrowRef = useRef<HTMLDivElement | null>(null);
-  const {refs, floatingStyles, update} = useFloating({
+  const {refs, floatingStyles} = useFloating({
     placement,
     whileElementsMounted: autoUpdate,
     middleware: [arrow({element: arrowRef})],
diff --git a/packages/dom/test/visual/utils/shadowDOM.ts b/packages/dom/test/visual/utils/shadowDOM.ts
index 9ba25a53..ab8c1766 100644
--- a/packages/dom/test/visual/utils/shadowDOM.ts
+++ b/packages/dom/test/visual/utils/shadowDOM.ts
@@ -14,6 +14,7 @@ interface FloatingUICustomElement {
 type CustomElement<T> = Partial<T & HTMLAttributes<T> & {children: any}>;
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
       ['direct-host-child']: CustomElement<FloatingUICustomElement>;

Full diff
1.6.3...1.6.4.

@DanielleHuisman DanielleHuisman marked this pull request as ready for review April 30, 2024 06:05
@DanielleHuisman DanielleHuisman merged commit ae51785 into main Apr 30, 2024
2 checks passed
@DanielleHuisman DanielleHuisman deleted the upstream/dom-1.6.4 branch April 30, 2024 06:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant