refactor: improve types and internal codebase consistency (#2948)

Author: atomiks

.changeset/angry-monkeys-juggle.md

@@ -0,0 +1,5 @@
+---
+"@floating-ui/react": patch
+---
+
+fix(useInteractions): split prop getter dependencies so that only the relevant element changes when necessary. Previously `reference` and `floating` prop getters had dependencies grouped.

.changeset/brown-ducks-melt.md

@@ -0,0 +1,5 @@
+---
+"@floating-ui/react": patch
+---
+
+fix(useFocus): prevent SyntheticEvent warning on React <17

.changeset/calm-carpets-tap.md

@@ -0,0 +1,5 @@
+---
+"@floating-ui/react": patch
+---
+
+fix(inner): allow to make Derivable

.changeset/weak-apples-cover.md

@@ -0,0 +1,9 @@
+---
+'@floating-ui/react-dom': patch
+'@floating-ui/react': patch
+'@floating-ui/utils': patch
+'@floating-ui/core': patch
+'@floating-ui/dom': patch
+---
+
+refactor: improve types and internal codebase consistency. All documented types are now exported.

packages/core/src/computePosition.ts

@@ -1,10 +1,5 @@
 import {computeCoordsFromPlacement} from './computeCoordsFromPlacement';
-import type {
-  ComputePosition,
-  ComputePositionReturn,
-  Middleware,
-  MiddlewareData,
-} from './types';
+import type {ComputePosition, Middleware, MiddlewareData} from './types';
 
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
@@ -17,7 +12,7 @@ export const computePosition: ComputePosition = async (
   reference,
   floating,
   config,
-): Promise<ComputePositionReturn> => {
+) => {
   const {
     placement = 'bottom',
     strategy = 'absolute',

packages/core/src/detectOverflow.ts

@@ -9,38 +9,34 @@ import type {
   RootBoundary,
 } from './types';
 
-export type DetectOverflowOptions = Partial<{
+export interface DetectOverflowOptions {
   /**
    * The clipping element(s) or area in which overflow will be checked.
    * @default 'clippingAncestors'
    */
-  boundary: Boundary;
-
+  boundary?: Boundary;
   /**
    * The root clipping area in which overflow will be checked.
    * @default 'viewport'
    */
-  rootBoundary: RootBoundary;
-
+  rootBoundary?: RootBoundary;
   /**
    * The element in which overflow is being checked relative to a boundary.
    * @default 'floating'
    */
-  elementContext: ElementContext;
-
+  elementContext?: ElementContext;
   /**
    * Whether to check for overflow using the alternate element's boundary
    * (`clippingAncestors` boundary only).
    * @default false
    */
-  altBoundary: boolean;
-
+  altBoundary?: boolean;
   /**
    * Virtual padding for the resolved overflow detection offsets.
    * @default 0
    */
-  padding: Padding;
-}>;
+  padding?: Padding;
+}
 
 /**
  * Resolves with an object of overflow side offsets that determine how much the

packages/core/src/index.ts

@@ -52,4 +52,6 @@ export type {
   Strategy,
   VirtualElement,
 } from '@floating-ui/utils';
+// This export exists only for backwards compatibility. It will be removed in
+// the next major version.
 export {rectToClientRect} from '@floating-ui/utils';

packages/core/src/middleware/arrow.ts

@@ -17,7 +17,6 @@ export interface ArrowOptions {
    * @default undefined
    */
   element: any;
-
   /**
    * The padding between the arrow element and the floating element edges.
    * Useful when the floating element has rounded corners.

packages/core/src/middleware/autoPlacement.ts

@@ -42,36 +42,31 @@ export function getPlacementList(
   });
 }
 
-export type AutoPlacementOptions = Partial<
-  DetectOverflowOptions & {
-    /**
-     * The axis that runs along the alignment of the floating element. Determines
-     * whether to check for most space along this axis.
-     * @default false
-     */
-    crossAxis: boolean;
-
-    /**
-     * Choose placements with a particular alignment.
-     * @default undefined
-     */
-    alignment: Alignment | null;
-
-    /**
-     * Whether to choose placements with the opposite alignment if the preferred
-     * alignment does not fit.
-     * @default true
-     */
-    autoAlignment: boolean;
-
-    /**
-     * Which placements are allowed to be chosen. Placements must be within the
-     * `alignment` option if explicitly set.
-     * @default allPlacements (variable)
-     */
-    allowedPlacements: Array<Placement>;
-  }
->;
+export interface AutoPlacementOptions extends DetectOverflowOptions {
+  /**
+   * The axis that runs along the alignment of the floating element. Determines
+   * whether to check for most space along this axis.
+   * @default false
+   */
+  crossAxis?: boolean;
+  /**
+   * Choose placements with a particular alignment.
+   * @default undefined
+   */
+  alignment?: Alignment | null;
+  /**
+   * Whether to choose placements with the opposite alignment if the preferred
+   * alignment does not fit.
+   * @default true
+   */
+  autoAlignment?: boolean;
+  /**
+   * Which placements are allowed to be chosen. Placements must be within the
+   * `alignment` option if explicitly set.
+   * @default allPlacements (variable)
+   */
+  allowedPlacements?: Array<Placement>;
+}
 
 /**
  * Optimizes the visibility of the floating element by choosing the placement

packages/core/src/middleware/flip.ts

@@ -13,49 +13,42 @@ import type {DetectOverflowOptions} from '../detectOverflow';
 import {detectOverflow} from '../detectOverflow';
 import type {Derivable, Middleware} from '../types';
 
-export type FlipOptions = Partial<
-  DetectOverflowOptions & {
-    /**
-     * The axis that runs along the side of the floating element. Determines
-     * whether overflow along this axis is checked to perform a flip.
-     * @default true
-     */
-    mainAxis: boolean;
-
-    /**
-     * The axis that runs along the alignment of the floating element. Determines
-     * whether overflow along this axis is checked to perform a flip.
-     * @default true
-     */
-    crossAxis: boolean;
-
-    /**
-     * Placements to try sequentially if the preferred `placement` does not fit.
-     * @default [oppositePlacement] (computed)
-     */
-    fallbackPlacements: Array<Placement>;
-
-    /**
-     * What strategy to use when no placements fit.
-     * @default 'bestFit'
-     */
-    fallbackStrategy: 'bestFit' | 'initialPlacement';
-
-    /**
-     * Whether to allow fallback to the perpendicular axis of the preferred
-     * placement, and if so, which side direction along the axis to prefer.
-     * @default 'none' (disallow fallback)
-     */
-    fallbackAxisSideDirection: 'none' | 'start' | 'end';
-
-    /**
-     * Whether to flip to placements with the opposite alignment if they fit
-     * better.
-     * @default true
-     */
-    flipAlignment: boolean;
-  }
->;
+export interface FlipOptions extends DetectOverflowOptions {
+  /**
+   * The axis that runs along the side of the floating element. Determines
+   * whether overflow along this axis is checked to perform a flip.
+   * @default true
+   */
+  mainAxis?: boolean;
+  /**
+   * The axis that runs along the alignment of the floating element. Determines
+   * whether overflow along this axis is checked to perform a flip.
+   * @default true
+   */
+  crossAxis?: boolean;
+  /**
+   * Placements to try sequentially if the preferred `placement` does not fit.
+   * @default [oppositePlacement] (computed)
+   */
+  fallbackPlacements?: Array<Placement>;
+  /**
+   * What strategy to use when no placements fit.
+   * @default 'bestFit'
+   */
+  fallbackStrategy?: 'bestFit' | 'initialPlacement';
+  /**
+   * Whether to allow fallback to the perpendicular axis of the preferred
+   * placement, and if so, which side direction along the axis to prefer.
+   * @default 'none' (disallow fallback)
+   */
+  fallbackAxisSideDirection?: 'none' | 'start' | 'end';
+  /**
+   * Whether to flip to placements with the opposite alignment if they fit
+   * better.
+   * @default true
+   */
+  flipAlignment?: boolean;
+}
 
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`