@fluentui/react-positioning 9.0.0-alpha.9 → 9.0.0-beta.4

package/dist/react-positioning.d.ts

@@ -1,10 +1,56 @@
+import type { MakeStylesStyleRule } from '@fluentui/make-styles';
 import * as PopperJs from '@popperjs/core';
-import * as React from 'react';
+import * as React_2 from 'react';
+import type { Theme } from '@fluentui/react-theme';
 
 export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
 
+export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
+
 export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
 
+/**
+ * Helper that creates a makeStyles rule for an arrow element.
+ * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
+ *
+ * ```ts
+ *   makeStyles({
+ *     arrowWithSize: createArrowStyles(5),
+ *
+ *     arrowWithoutSize: createArrowStyles(),
+ *     mediumArrow: { aspectRatio: 1, width: '4px' }
+ *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *   })
+ *   ...
+ *
+ *   state.arrowWithSize.clasName = styles.arrowWithSize
+ *   state.arrowWithoutSize.className = mergeClases(
+ *     styles.arrowWithoutSize,
+ *     state.smallArrow && styles.smallArrow,
+ *     state.mediumArrow && styles.mediumArrow,
+ *   )
+ * ```
+ *
+ * @param size - dimensions of the square arrow element in pixels.
+ */
+export declare function createArrowStyles(size?: number): MakeStylesStyleRule<Theme>;
+
+/**
+ * Creates a virtual element based on the position of a click event
+ * Can be used as a target for popper in scenarios such as context menus
+ */
+export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement;
+
+/**
+ * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
+ * height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset
+ *
+ * @param userOffset - The offset provided by the user
+ * @param arrowHeight - The height of the arrow in px
+ * @returns User offset augmented with arrow height
+ */
+export declare function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset;
+
 export declare type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];
 
 export declare type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];
@@ -15,36 +61,42 @@ export declare type OffsetFunctionParam = {
     placement: PopperJs.Placement;
 };
 
-export declare interface PopperOptions extends PositioningProps {
+declare interface PopperOptions extends PositioningProps {
     /**
      * If false, delays Popper's creation.
      * @default true
      */
     enabled?: boolean;
+    onStateUpdate?: (state: Partial<PopperJs.State>) => void;
     /**
-     * Array of conditions to be met in order to trigger a subsequent render to reposition the elements.
+     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
+     * @default false
      */
-    positioningDependencies?: React.DependencyList;
-    onStateUpdate?: (state: Partial<PopperJs.State>) => void;
+    positionFixed?: boolean;
+    /**
+     * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
+     * "all" enables this behavior for all axis.
+     */
+    unstable_disableTether?: boolean | 'all';
 }
 
 export declare type PopperRefHandle = {
     updatePosition: () => void;
 };
 
+export declare type PopperVirtualElement = PopperJs.VirtualElement;
+
 export declare type Position = 'above' | 'below' | 'before' | 'after';
 
 export declare interface PositioningProps {
-    /**
-     * Alignment for the component.
-     */
+    /** Alignment for the component. Only has an effect if used with the @see position option */
     align?: Alignment;
     /** The element which will define the boundaries of the popper position for the flip behavior. */
     flipBoundary?: Boundary;
     /** The element which will define the boundaries of the popper position for the overflow behavior. */
     overflowBoundary?: Boundary;
     /** An imperative handle to Popper methods. */
-    containerRef?: React.Ref<PopperRefHandle>;
+    popperRef?: React_2.Ref<PopperRefHandle>;
     /**
      * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
      * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
@@ -52,11 +104,6 @@ export declare interface PositioningProps {
      * then provided value for 'align' will be ignored and 'center' will be used instead.
      */
     position?: Position;
-    /**
-     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
-     * @default false
-     */
-    positionFixed?: boolean;
     /**
      * Lets you displace a popper element from its reference element.
      * This can be useful if you need to apply some margin between them or if you need to fine tune the
@@ -69,23 +116,34 @@ export declare interface PositioningProps {
      */
     arrowPadding?: number;
     /**
-     * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
-     * "all" enables this behavior for all axis.
+     * Applies max-height and max-width on popper to fit it within the available space in viewport.
+     * true enables this for both width and height when overflow happens.
+     * 'always' applies `max-height`/`max-width` regardless of overflow.
+     * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
+     * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
      */
-    unstable_disableTether?: boolean | 'all';
+    autoSize?: AutoSize;
     /**
-     * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
-     * `position` props, regardless of the size of the component, the reference element or the viewport.
+     * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
      */
-    unstable_pinned?: boolean;
+    target?: HTMLElement | PopperVirtualElement | null;
     /**
-     * Applies max-height and max-width on popper to fit it within the available space in viewport.
-     * true enables this for both width and height.
-     * 'height' applies only `max-height` and 'width' for `max-width`
+     * Modifies position and alignment to cover the target
+     */
+    coverTarget?: boolean;
+    /**
+     * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
+     * `position` props, regardless of the size of the component, the reference element or the viewport.
      */
-    autoSize?: 'height' | 'width' | boolean;
+    pinned?: boolean;
 }
 
+export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
+
+export declare type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
+
+export declare function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;
+
 /**
  * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
  * package:
@@ -95,9 +153,19 @@ export declare interface PositioningProps {
  *   to avoid focus jumps
  */
 export declare function usePopper(options?: PopperOptions): {
-    targetRef: React.MutableRefObject<any>;
-    containerRef: React.MutableRefObject<any>;
-    arrowRef: React.MutableRefObject<any>;
+    targetRef: React_2.MutableRefObject<any>;
+    containerRef: React_2.MutableRefObject<any>;
+    arrowRef: React_2.MutableRefObject<any>;
 };
 
+/**
+ * A state hook that manages a popper virtual element from mouseevents.
+ * Useful for scenarios where a component needs to be positioned by mouse click (e.g. contextmenu)
+ * React synthetic events are not persisted by this hook
+ *
+ * @param initialState - initializes a user provided state similare to useState
+ * @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events
+ */
+export declare const usePopperMouseTarget: (initialState?: PopperJs.VirtualElement | (() => PopperJs.VirtualElement) | undefined) => readonly [PopperJs.VirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
+
 export { }

package/lib/createArrowStyles.d.ts

@@ -0,0 +1,27 @@
+import type { MakeStylesStyleRule } from '@fluentui/make-styles';
+import type { Theme } from '@fluentui/react-theme';
+/**
+ * Helper that creates a makeStyles rule for an arrow element.
+ * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
+ *
+ * ```ts
+ *   makeStyles({
+ *     arrowWithSize: createArrowStyles(5),
+ *
+ *     arrowWithoutSize: createArrowStyles(),
+ *     mediumArrow: { aspectRatio: 1, width: '4px' }
+ *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *   })
+ *   ...
+ *
+ *   state.arrowWithSize.clasName = styles.arrowWithSize
+ *   state.arrowWithoutSize.className = mergeClases(
+ *     styles.arrowWithoutSize,
+ *     state.smallArrow && styles.smallArrow,
+ *     state.mediumArrow && styles.mediumArrow,
+ *   )
+ * ```
+ *
+ * @param size - dimensions of the square arrow element in pixels.
+ */
+export declare function createArrowStyles(size?: number): MakeStylesStyleRule<Theme>;

package/lib/createArrowStyles.js

@@ -0,0 +1,75 @@
+/**
+ * Helper that creates a makeStyles rule for an arrow element.
+ * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
+ *
+ * ```ts
+ *   makeStyles({
+ *     arrowWithSize: createArrowStyles(5),
+ *
+ *     arrowWithoutSize: createArrowStyles(),
+ *     mediumArrow: { aspectRatio: 1, width: '4px' }
+ *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *   })
+ *   ...
+ *
+ *   state.arrowWithSize.clasName = styles.arrowWithSize
+ *   state.arrowWithoutSize.className = mergeClases(
+ *     styles.arrowWithoutSize,
+ *     state.smallArrow && styles.smallArrow,
+ *     state.mediumArrow && styles.mediumArrow,
+ *   )
+ * ```
+ *
+ * @param size - dimensions of the square arrow element in pixels.
+ */
+export function createArrowStyles(size) {
+  return theme => {
+    const arrowHCBorderStyle = `1px solid transparent`;
+    const arrowHCBorder = {
+      borderRight: arrowHCBorderStyle,
+      borderBottom: arrowHCBorderStyle
+    };
+    return {
+      position: 'absolute',
+      background: 'inherit',
+      visibility: 'hidden',
+      zIndex: -1,
+      ...(size && {
+        aspectRatio: 1,
+        width: `${size}px`
+      }),
+      ':before': {
+        content: '""',
+        borderRadius: '4px',
+        position: 'absolute',
+        width: 'inherit',
+        height: 'inherit',
+        background: 'inherit',
+        visibility: 'visible',
+        borderBottomRightRadius: theme.borderRadiusSmall,
+        transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
+      },
+      ':global([data-popper-placement])': {
+        ':before': arrowHCBorder
+      },
+      // Popper sets data-popper-placement on the root element, which is used to align the arrow
+      ':global([data-popper-placement^="top"])': {
+        bottom: 0,
+        '--angle': '0'
+      },
+      ':global([data-popper-placement^="right"])': {
+        left: 0,
+        '--angle': '90deg'
+      },
+      ':global([data-popper-placement^="bottom"])': {
+        top: 0,
+        '--angle': '180deg'
+      },
+      ':global([data-popper-placement^="left"])': {
+        right: 0,
+        '--angle': '270deg'
+      }
+    };
+  };
+}
+//# sourceMappingURL=createArrowStyles.js.map

package/lib/createArrowStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/createArrowStyles.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH,OAAM,SAAU,iBAAV,CAA4B,IAA5B,EAAyC;AAC7C,SAAO,KAAK,IAAG;AACb,UAAM,kBAAkB,GAAG,uBAA3B;AACA,UAAM,aAAa,GAAG;AACpB,MAAA,WAAW,EAAE,kBADO;AAEpB,MAAA,YAAY,EAAE;AAFM,KAAtB;AAKA,WAAO;AACL,MAAA,QAAQ,EAAE,UADL;AAEL,MAAA,UAAU,EAAE,SAFP;AAGL,MAAA,UAAU,EAAE,QAHP;AAIL,MAAA,MAAM,EAAE,CAAC,CAJJ;AAML,UAAI,IAAI,IAAI;AACV,QAAA,WAAW,EAAE,CADH;AAEV,QAAA,KAAK,EAAE,GAAG,IAAI;AAFJ,OAAZ,CANK;AAWL,iBAAW;AACT,QAAA,OAAO,EAAE,IADA;AAET,QAAA,YAAY,EAAE,KAFL;AAGT,QAAA,QAAQ,EAAE,UAHD;AAIT,QAAA,KAAK,EAAE,SAJE;AAKT,QAAA,MAAM,EAAE,SALC;AAMT,QAAA,UAAU,EAAE,SANH;AAOT,QAAA,UAAU,EAAE,SAPH;AAQT,QAAA,uBAAuB,EAAE,KAAK,CAAC,iBARtB;AAST,QAAA,SAAS,EAAE;AATF,OAXN;AAuBL,0CAAoC;AAClC,mBAAW;AADuB,OAvB/B;AA2BL;AACA,iDAA2C;AACzC,QAAA,MAAM,EAAE,CADiC;AAEzC,mBAAW;AAF8B,OA5BtC;AAiCL,mDAA6C;AAC3C,QAAA,IAAI,EAAE,CADqC;AAE3C,mBAAW;AAFgC,OAjCxC;AAqCL,oDAA8C;AAC5C,QAAA,GAAG,EAAE,CADuC;AAE5C,mBAAW;AAFiC,OArCzC;AAyCL,kDAA4C;AAC1C,QAAA,KAAK,EAAE,CADmC;AAE1C,mBAAW;AAF+B;AAzCvC,KAAP;AA8CD,GArDD;AAsDD","sourceRoot":""}

package/lib/createVirtualElementFromClick.d.ts

@@ -0,0 +1,6 @@
+import type { PopperVirtualElement } from './types';
+/**
+ * Creates a virtual element based on the position of a click event
+ * Can be used as a target for popper in scenarios such as context menus
+ */
+export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement;

package/lib/createVirtualElementFromClick.js

@@ -0,0 +1,26 @@
+/**
+ * Creates a virtual element based on the position of a click event
+ * Can be used as a target for popper in scenarios such as context menus
+ */
+export function createVirtualElementFromClick(nativeEvent) {
+  const left = nativeEvent.clientX;
+  const top = nativeEvent.clientY;
+  const right = left + 1;
+  const bottom = top + 1;
+
+  function getBoundingClientRect() {
+    return {
+      left,
+      top,
+      right,
+      bottom,
+      height: 1,
+      width: 1
+    };
+  }
+
+  return {
+    getBoundingClientRect
+  };
+}
+//# sourceMappingURL=createVirtualElementFromClick.js.map

package/lib/createVirtualElementFromClick.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;AAGG;AACH,OAAM,SAAU,6BAAV,CAAwC,WAAxC,EAA+D;AACnE,QAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;AACA,QAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;AACA,QAAM,KAAK,GAAG,IAAI,GAAG,CAArB;AACA,QAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;AAEA,WAAS,qBAAT,GAA8B;AAC5B,WAAO;AACL,MAAA,IADK;AAEL,MAAA,GAFK;AAGL,MAAA,KAHK;AAIL,MAAA,MAJK;AAML,MAAA,MAAM,EAAE,CANH;AAOL,MAAA,KAAK,EAAE;AAPF,KAAP;AASD;;AAED,SAAO;AACL,IAAA;AADK,GAAP;AAGD","sourceRoot":""}

package/lib/index.d.ts

@@ -1,2 +1,6 @@
+export * from './createVirtualElementFromClick';
+export * from './createArrowStyles';
 export * from './usePopper';
+export * from './usePopperMouseTarget';
+export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
 export * from './types';

package/lib/index.js

@@ -1,2 +1,7 @@
+export * from './createVirtualElementFromClick';
+export * from './createArrowStyles';
 export * from './usePopper';
+export * from './usePopperMouseTarget';
+export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
+export * from './types';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC","sourcesContent":["export * from './usePopper';\nexport * from './types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9E,cAAc,SAAS,CAAC"}

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.7.1"
+      "packageVersion": "7.18.1"
     }
   ]
 }

package/lib/types.d.ts

@@ -9,21 +9,21 @@ export declare type OffsetFunction = (param: OffsetFunctionParam) => [number | n
 export declare type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];
 export declare type Position = 'above' | 'below' | 'before' | 'after';
 export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
+export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
 export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
 export declare type PopperRefHandle = {
     updatePosition: () => void;
 };
+export declare type PopperVirtualElement = PopperJs.VirtualElement;
 export interface PositioningProps {
-    /**
-     * Alignment for the component.
-     */
+    /** Alignment for the component. Only has an effect if used with the @see position option */
     align?: Alignment;
     /** The element which will define the boundaries of the popper position for the flip behavior. */
     flipBoundary?: Boundary;
     /** The element which will define the boundaries of the popper position for the overflow behavior. */
     overflowBoundary?: Boundary;
     /** An imperative handle to Popper methods. */
-    containerRef?: React.Ref<PopperRefHandle>;
+    popperRef?: React.Ref<PopperRefHandle>;
     /**
      * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
      * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
@@ -31,11 +31,6 @@ export interface PositioningProps {
      * then provided value for 'align' will be ignored and 'center' will be used instead.
      */
     position?: Position;
-    /**
-     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
-     * @default false
-     */
-    positionFixed?: boolean;
     /**
      * Lets you displace a popper element from its reference element.
      * This can be useful if you need to apply some margin between them or if you need to fine tune the
@@ -48,31 +43,26 @@ export interface PositioningProps {
      */
     arrowPadding?: number;
     /**
-     * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
-     * "all" enables this behavior for all axis.
-     */
-    unstable_disableTether?: boolean | 'all';
-    /**
-     * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
-     * `position` props, regardless of the size of the component, the reference element or the viewport.
+     * Applies max-height and max-width on popper to fit it within the available space in viewport.
+     * true enables this for both width and height when overflow happens.
+     * 'always' applies `max-height`/`max-width` regardless of overflow.
+     * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
+     * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
      */
-    unstable_pinned?: boolean;
+    autoSize?: AutoSize;
     /**
-     * Applies max-height and max-width on popper to fit it within the available space in viewport.
-     * true enables this for both width and height.
-     * 'height' applies only `max-height` and 'width' for `max-width`
+     * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
      */
-    autoSize?: 'height' | 'width' | boolean;
-}
-export interface PopperOptions extends PositioningProps {
+    target?: HTMLElement | PopperVirtualElement | null;
     /**
-     * If false, delays Popper's creation.
-     * @default true
+     * Modifies position and alignment to cover the target
      */
-    enabled?: boolean;
+    coverTarget?: boolean;
     /**
-     * Array of conditions to be met in order to trigger a subsequent render to reposition the elements.
+     * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
+     * `position` props, regardless of the size of the component, the reference element or the viewport.
      */
-    positioningDependencies?: React.DependencyList;
-    onStateUpdate?: (state: Partial<PopperJs.State>) => void;
+    pinned?: boolean;
 }
+export declare type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
+export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;

package/lib/types.js

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as PopperJs from '@popperjs/core';\nimport * as React from 'react';\n\nexport type OffsetFunctionParam = {\n  popper: PopperJs.Rect;\n  reference: PopperJs.Rect;\n  placement: PopperJs.Placement;\n};\n\nexport type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];\n\nexport type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];\n\nexport type Position = 'above' | 'below' | 'before' | 'after';\nexport type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';\n\nexport type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';\n\nexport type PopperRefHandle = { updatePosition: () => void };\n\nexport interface PositioningProps {\n  /**\n   * Alignment for the component.\n   */\n  align?: Alignment;\n\n  /** The element which will define the boundaries of the popper position for the flip behavior. */\n  flipBoundary?: Boundary;\n\n  /** The element which will define the boundaries of the popper position for the overflow behavior. */\n  overflowBoundary?: Boundary;\n\n  /** An imperative handle to Popper methods. */\n  containerRef?: React.Ref<PopperRefHandle>;\n\n  /**\n   * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')\n   * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'\n   * and 'start' | 'end' respectively),\n   * then provided value for 'align' will be ignored and 'center' will be used instead.\n   */\n  position?: Position;\n\n  /**\n   * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')\n   * @default false\n   */\n  positionFixed?: boolean;\n\n  /**\n   * Lets you displace a popper element from its reference element.\n   * This can be useful if you need to apply some margin between them or if you need to fine tune the\n   * position according to some custom logic.\n   */\n  offset?: Offset;\n\n  /**\n   * Defines padding between the corner of the popup element and the arrow.\n   * Use to prevent the arrow from overlapping a rounded corner, for example.\n   */\n  arrowPadding?: number;\n\n  /**\n   * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.\n   * \"all\" enables this behavior for all axis.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_disableTether?: boolean | 'all';\n\n  /**\n   * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and\n   * `position` props, regardless of the size of the component, the reference element or the viewport.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_pinned?: boolean;\n\n  /**\n   * Applies max-height and max-width on popper to fit it within the available space in viewport.\n   * true enables this for both width and height.\n   * 'height' applies only `max-height` and 'width' for `max-width`\n   */\n  autoSize?: 'height' | 'width' | boolean;\n}\n\nexport interface PopperOptions extends PositioningProps {\n  /**\n   * If false, delays Popper's creation.\n   * @default true\n   */\n  enabled?: boolean;\n\n  /**\n   * Array of conditions to be met in order to trigger a subsequent render to reposition the elements.\n   */\n  positioningDependencies?: React.DependencyList;\n\n  onStateUpdate?: (state: Partial<PopperJs.State>) => void;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/lib/usePopper.d.ts

@@ -1,5 +1,24 @@
+import * as PopperJs from '@popperjs/core';
 import * as React from 'react';
-import { PopperOptions } from './types';
+import type { PositioningProps } from './types';
+interface PopperOptions extends PositioningProps {
+    /**
+     * If false, delays Popper's creation.
+     * @default true
+     */
+    enabled?: boolean;
+    onStateUpdate?: (state: Partial<PopperJs.State>) => void;
+    /**
+     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
+     * @default false
+     */
+    positionFixed?: boolean;
+    /**
+     * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
+     * "all" enables this behavior for all axis.
+     */
+    unstable_disableTether?: boolean | 'all';
+}
 /**
  * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
  * package:
@@ -13,3 +32,4 @@ export declare function usePopper(options?: PopperOptions): {
     containerRef: React.MutableRefObject<any>;
     arrowRef: React.MutableRefObject<any>;
 };
+export {};