Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
File diff suppressed because it is too large Load Diff
+15
View File
@@ -0,0 +1,15 @@
@fluentui/react-positioning
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
+23
View File
@@ -0,0 +1,23 @@
# @fluentui/react-positioning
A react hook wrapper around [Popper.js](https://popper.js.org/) for Fluent UI.
## Usage
```tsx
import React from 'react';
import { usePopper } from '@fluentui/react-positioning';
function PopupExample: React.FC = ({ children }) => {
const {targetRef, containerRef} = usePopper();
const [open, setOpen] = React.useState(false);
const onClick = () => setOpen(s => !s);
return (
<>
<button ref={targetRef} onClick={onClick}> Toggle popup </button>
{ open && <div ref={containerRef}>{children}</div> }
</>
)
}
```
+310
View File
@@ -0,0 +1,310 @@
import type { GriffelStyle } from '@griffel/react';
import * as React_2 from 'react';
export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
/**
* @deprecated use PositioningBoundary instead
*/
export declare type Boundary = PositioningBoundary;
/**
* @internal
* Creates CSS styles to size the arrow created by createArrowStyles to the given height.
*
* Use this when you need to create classes for several different arrow sizes. If you only need a
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
*/
export declare function createArrowHeightStyles(arrowHeight: number): GriffelStyle;
/**
* @internal
* 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({ arrowHeight: 6 }),
*
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
* mediumArrow: createArrowHeightStyles(4),
* smallArrow: createArrowHeightStyles(2),
* })
* ...
*
* state.arrowWithSize.className = styles.arrowWithSize;
* state.arrowWithoutSize.className = mergeClasses(
* styles.arrowWithoutSize,
* state.smallArrow && styles.smallArrow,
* state.mediumArrow && styles.mediumArrow,
* )
* ```
*/
export declare function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle;
/**
* @internal
* Options parameter for the createArrowStyles function
*/
export declare type CreateArrowStylesOptions = {
/**
* The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.
*
* This can be undefined to leave out the arrow size styles. You must then add styles created by
* createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.
*/
arrowHeight: number | undefined;
/**
* The borderWidth of the arrow. Should be the same borderWidth as the parent element.
*
* @defaultvalue 1px
*/
borderWidth?: GriffelStyle['borderBottomWidth'];
/**
* The borderStyle for the arrow. Should be the same borderStyle as the parent element.
*
* @defaultvalue solid
*/
borderStyle?: GriffelStyle['borderBottomStyle'];
/**
* The borderColor of the arrow. Should be the same borderColor as the parent element.
*
* @defaultvalue tokens.colorTransparentStroke
*/
borderColor?: GriffelStyle['borderBottomColor'];
};
/**
* Creates animation styles so that positioned elements slide in from the main axis
* @param mainAxis - distance than the element sides for
* @returns Griffel styles to spread to a slot
*/
export declare function createSlideStyles(mainAxis: number): GriffelStyle;
/**
* 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): PositioningVirtualElement;
/**
* 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
*
* @internal
* @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 | OffsetObject | OffsetShorthand;
export declare type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;
export declare type OffsetFunctionParam = {
positionedRect: PositioningRect;
targetRect: PositioningRect;
position: Position;
alignment?: Alignment;
};
export declare type OffsetObject = {
crossAxis?: number;
mainAxis: number;
};
export declare type OffsetShorthand = number;
export declare type Position = 'above' | 'below' | 'before' | 'after';
export declare type PositioningBoundary = PositioningRect | HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';
export declare type PositioningImperativeRef = {
/**
* Updates the position imperatively.
* Useful when the position of the target changes from other factors than scrolling of window resize.
*/
updatePosition: () => void;
/**
* Sets the target and updates positioning imperatively.
* Useful for avoiding double renders with the target option.
*/
setTarget: (target: TargetElement | null) => void;
};
/**
* Internal options for positioning
*/
declare interface PositioningOptions {
/** 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 positioned element for the flip behavior. */
flipBoundary?: PositioningBoundary | null;
/** The element which will define the boundaries of the positioned element for the overflow behavior. */
overflowBoundary?: PositioningBoundary | null;
/**
* Applies a padding to the overflow bounadry, so that overflow is detected earlier before the
* positioned surface hits the overflow boundary.
*/
overflowBoundaryPadding?: number | Partial<{
top: number;
end: number;
bottom: number;
start: number;
}>;
/**
* 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'
* and 'start' | 'end' respectively),
* then provided value for 'align' will be ignored and 'center' will be used instead.
*/
position?: Position;
/**
* Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')
* @default false
* @deprecated use `strategy` instead
*/
positionFixed?: boolean;
/**
* Specifies the type of CSS position property to use.
* @default absolute
*/
strategy?: 'absolute' | 'fixed';
/**
* Lets you displace a positioned 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
* position according to some custom logic.
*/
offset?: Offset;
/**
* Defines padding between the corner of the popup element and the arrow.
* Use to prevent the arrow from overlapping a rounded corner, for example.
*/
arrowPadding?: number;
/**
* Applies styles on the positioned element to fit it within the available space in viewport.
* - true: set styles for max height/width.
* - 'height': set styles for max height.
* - 'width'': set styles for max width.
* Note that options 'always'/'height-always'/'width-always' are now obsolete, and equivalent to true/'height'/'width'.
*/
autoSize?: AutoSize;
/**
* 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.
*/
pinned?: boolean;
/**
* When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.
* "all" enables this behavior for all axis.
*/
unstable_disableTether?: boolean | 'all';
/**
* If flip fails to stop the positioned element from overflowing
* its boundaries, use a specified fallback positions.
*/
fallbackPositions?: PositioningShorthandValue[];
/**
* Modifies whether popover is positioned using transform.
* @default true
*/
useTransform?: boolean;
/**
* If false, does not position anything
*/
enabled?: boolean;
/**
* When set, the positioned element matches the chosen dimension(s) of the target element
*/
matchTargetSize?: 'width';
/**
* Called when a position update has finished. Multiple position updates can happen in a single render,
* since positioning happens outside of the React lifecycle.
*
* It's also possible to listen to the custom DOM event `fui-positioningend`
*/
onPositioningEnd?: () => void;
/**
* Disables the resize observer that updates position on target or dimension change
*/
disableUpdateOnResize?: boolean;
/**
* When true, the positioned element will shift to cover the target element when there's not enough space.
* @default false
*/
shiftToCoverTarget?: boolean;
}
/**
* Public api that allows components using react-positioning to specify positioning options
*/
export declare interface PositioningProps extends Pick<PositioningOptions, 'align' | 'arrowPadding' | 'autoSize' | 'coverTarget' | 'fallbackPositions' | 'flipBoundary' | 'offset' | 'overflowBoundary' | 'overflowBoundaryPadding' | 'pinned' | 'position' | 'strategy' | 'useTransform' | 'matchTargetSize' | 'onPositioningEnd' | 'disableUpdateOnResize' | 'shiftToCoverTarget'> {
/** An imperative handle to Popper methods. */
positioningRef?: React_2.Ref<PositioningImperativeRef>;
/**
* Manual override for the target element. Useful for scenarios where a component accepts user prop to override target
*/
target?: TargetElement | null;
}
export declare type PositioningRect = {
width: number;
height: number;
x: number;
y: number;
};
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 type PositioningVirtualElement = {
getBoundingClientRect: () => {
x: number;
y: number;
top: number;
left: number;
bottom: number;
right: number;
width: number;
height: number;
};
contextElement?: Element;
};
export declare function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;
export declare type SetVirtualMouseTarget = (event: React_2.MouseEvent | MouseEvent | undefined | null) => void;
declare type TargetElement = HTMLElement | PositioningVirtualElement;
/**
* @internal
*/
export declare function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn;
/**
* @internal
* 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 usePositioningMouseTarget: (initialState?: PositioningVirtualElement | (() => PositioningVirtualElement)) => readonly [PositioningVirtualElement | undefined, SetVirtualMouseTarget];
declare interface UsePositioningReturn {
targetRef: React_2.MutableRefObject<any>;
containerRef: React_2.MutableRefObject<any>;
arrowRef: React_2.MutableRefObject<any>;
}
export { }
+32
View File
@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DATA_POSITIONING_ESCAPED: function() {
return DATA_POSITIONING_ESCAPED;
},
DATA_POSITIONING_HIDDEN: function() {
return DATA_POSITIONING_HIDDEN;
},
DATA_POSITIONING_INTERSECTING: function() {
return DATA_POSITIONING_INTERSECTING;
},
DATA_POSITIONING_PLACEMENT: function() {
return DATA_POSITIONING_PLACEMENT;
},
POSITIONING_END_EVENT: function() {
return POSITIONING_END_EVENT;
}
});
const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';
const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';
const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';
const POSITIONING_END_EVENT = 'fui-positioningend';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\nexport const POSITIONING_END_EVENT = 'fui-positioningend';\n"],"names":["DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_PLACEMENT","POSITIONING_END_EVENT"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,wBAAwB;eAAxBA;;IACAC,uBAAuB;eAAvBA;;IAFAC,6BAA6B;eAA7BA;;IAGAC,0BAA0B;eAA1BA;;IACAC,qBAAqB;eAArBA;;;AAJN,MAAMF,gCAAgC;AACtC,MAAMF,2BAA2B;AACjC,MAAMC,0BAA0B;AAChC,MAAME,6BAA6B;AACnC,MAAMC,wBAAwB"}
@@ -0,0 +1,71 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
createArrowHeightStyles: function() {
return createArrowHeightStyles;
},
createArrowStyles: function() {
return createArrowStyles;
}
});
const _reacttheme = require("@fluentui/react-theme");
function createArrowStyles(options) {
const { arrowHeight, borderWidth = '1px', borderStyle = 'solid', borderColor = _reacttheme.tokens.colorTransparentStroke } = options;
return {
boxSizing: 'border-box',
position: 'absolute',
zIndex: -1,
...arrowHeight && createArrowHeightStyles(arrowHeight),
backgroundColor: 'inherit',
backgroundClip: 'content-box',
borderBottomLeftRadius: `${_reacttheme.tokens.borderRadiusSmall} /* @noflip */`,
transform: 'rotate(var(--fui-positioning-arrow-angle)) /* @noflip */',
height: 'var(--fui-positioning-arrow-height)',
width: 'var(--fui-positioning-arrow-height)',
'::before': {
content: '""',
display: 'block',
backgroundColor: 'inherit',
margin: `-${borderWidth}`,
width: '100%',
height: '100%',
border: `${borderWidth} ${borderStyle} ${borderColor}`,
borderBottomLeftRadius: `${_reacttheme.tokens.borderRadiusSmall} /* @noflip */`,
clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)'
},
// Popper sets data-popper-placement on the root element, which is used to align the arrow
':global([data-popper-placement^="top"])': {
bottom: 'var(--fui-positioning-arrow-offset)',
'--fui-positioning-arrow-angle': '-45deg'
},
':global([data-popper-placement^="right"])': {
left: `var(--fui-positioning-arrow-offset) /* @noflip */`,
'--fui-positioning-arrow-angle': '45deg'
},
':global([data-popper-placement^="bottom"])': {
top: 'var(--fui-positioning-arrow-offset)',
'--fui-positioning-arrow-angle': '135deg'
},
':global([data-popper-placement^="left"])': {
right: `var(--fui-positioning-arrow-offset) /* @noflip */`,
'--fui-positioning-arrow-angle': '225deg'
}
};
}
function createArrowHeightStyles(arrowHeight) {
// The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
// Multiply the triangle's height by sqrt(2) to get length of its edges.
const edgeLength = 1.414 * arrowHeight;
return {
'--fui-positioning-arrow-height': `${edgeLength}px`,
'--fui-positioning-arrow-offset': `${edgeLength / 2 * -1}px`
};
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,139 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createPositionManager", {
enumerable: true,
get: function() {
return createPositionManager;
}
});
const _dom = require("@floating-ui/dom");
const _reactutilities = require("@fluentui/react-utilities");
const _utils = require("./utils");
const _listScrollParents = require("./utils/listScrollParents");
const _constants = require("./constants");
const _createResizeObserver = require("./utils/createResizeObserver");
function createPositionManager(options) {
let isDestroyed = false;
const { container, target, arrow, strategy, middleware, placement, useTransform = true, disableUpdateOnResize = false } = options;
const targetWindow = container.ownerDocument.defaultView;
if (!target || !container || !targetWindow) {
return {
updatePosition: ()=>undefined,
dispose: ()=>undefined
};
}
// When the dimensions of the target or the container change - trigger a position update
const resizeObserver = disableUpdateOnResize ? null : (0, _createResizeObserver.createResizeObserver)(targetWindow, (entries)=>{
// If content rect dimensions to go 0 -> very likely that `display: none` is being used to hide the element
// In this case don't update and let users update imperatively
const shouldUpdateOnResize = entries.every((entry)=>{
return entry.contentRect.width > 0 && entry.contentRect.height > 0;
});
if (shouldUpdateOnResize) {
updatePosition();
}
});
let isFirstUpdate = true;
const scrollParents = new Set();
// When the container is first resolved, set position `fixed` to avoid scroll jumps.
// Without this scroll jumps can occur when the element is rendered initially and receives focus
Object.assign(container.style, {
position: 'fixed',
left: 0,
top: 0,
margin: 0
});
const forceUpdate = ()=>{
// debounced update can still occur afterwards
// early return to avoid memory leaks
if (isDestroyed) {
return;
}
if (isFirstUpdate) {
(0, _listScrollParents.listScrollParents)(container).forEach((scrollParent)=>scrollParents.add(scrollParent));
if ((0, _reactutilities.isHTMLElement)(target)) {
(0, _listScrollParents.listScrollParents)(target).forEach((scrollParent)=>scrollParents.add(scrollParent));
}
scrollParents.forEach((scrollParent)=>{
scrollParent.addEventListener('scroll', updatePosition, {
passive: true
});
});
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(container);
if ((0, _reactutilities.isHTMLElement)(target)) {
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(target);
}
isFirstUpdate = false;
}
Object.assign(container.style, {
position: strategy
});
(0, _dom.computePosition)(target, container, {
placement,
middleware,
strategy
}).then(({ x, y, middlewareData, placement: computedPlacement })=>{
// Promise can still resolve after destruction
// early return to avoid applying outdated position
if (isDestroyed) {
return;
}
(0, _utils.writeArrowUpdates)({
arrow,
middlewareData
});
(0, _utils.writeContainerUpdates)({
container,
middlewareData,
placement: computedPlacement,
coordinates: {
x,
y
},
lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,
strategy,
useTransform
});
container.dispatchEvent(new CustomEvent(_constants.POSITIONING_END_EVENT));
}).catch((err)=>{
// https://github.com/floating-ui/floating-ui/issues/1845
// FIXME for node > 14
// node 15 introduces promise rejection which means that any components
// tests need to be `it('', async () => {})` otherwise there can be race conditions with
// JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
// Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
// will actually be counter productive
if (process.env.NODE_ENV === 'development') {
// eslint-disable-next-line no-console
console.error('[usePositioning]: Failed to calculate position', err);
}
});
};
const updatePosition = (0, _utils.debounce)(()=>forceUpdate());
const dispose = ()=>{
isDestroyed = true;
if (targetWindow) {
targetWindow.removeEventListener('scroll', updatePosition);
targetWindow.removeEventListener('resize', updatePosition);
}
scrollParents.forEach((scrollParent)=>{
scrollParent.removeEventListener('scroll', updatePosition);
});
scrollParents.clear();
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
};
if (targetWindow) {
targetWindow.addEventListener('scroll', updatePosition, {
passive: true
});
targetWindow.addEventListener('resize', updatePosition);
}
// Update the position on initialization
updatePosition();
return {
updatePosition,
dispose
};
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,68 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createSlideStyles", {
enumerable: true,
get: function() {
return createSlideStyles;
}
});
const _reacttheme = require("@fluentui/react-theme");
const _constants = require("./constants");
function createSlideStyles(mainAxis) {
const fadeIn = {
from: {
opacity: 0
},
to: {
opacity: 1
}
};
const slideDistanceVarX = '--fui-positioning-slide-distance-x';
const slideDistanceVarY = '--fui-positioning-slide-distance-y';
return {
// The fade has absolute values, whereas the slide amount is relative.
animationComposition: 'replace, accumulate',
animationDuration: _reacttheme.tokens.durationSlower,
animationTimingFunction: _reacttheme.tokens.curveDecelerateMid,
[slideDistanceVarX]: `0px`,
[slideDistanceVarY]: `${mainAxis}px`,
[`&[${_constants.DATA_POSITIONING_PLACEMENT}^=right]`]: {
[slideDistanceVarX]: `-${mainAxis}px`,
[slideDistanceVarY]: '0px'
},
[`&[${_constants.DATA_POSITIONING_PLACEMENT}^=bottom]`]: {
[slideDistanceVarX]: '0px',
[slideDistanceVarY]: `-${mainAxis}px`
},
[`&[${_constants.DATA_POSITIONING_PLACEMENT}^=left]`]: {
[slideDistanceVarX]: `${mainAxis}px`,
[slideDistanceVarY]: '0px'
},
animationName: [
fadeIn,
{
from: {
transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`
},
to: {}
}
],
// Note: at-rules have more specificity in Griffel
'@media(prefers-reduced-motion)': {
[`&[${_constants.DATA_POSITIONING_PLACEMENT}]`]: {
animationComposition: 'replace',
animationDuration: '1ms',
animationName: fadeIn
}
},
// Tested in Firefox 79
'@supports not (animation-composition: accumulate)': {
[`&[${_constants.DATA_POSITIONING_PLACEMENT}]`]: {
animationComposition: 'replace',
animationName: fadeIn
}
}
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/createSlideStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\nimport { DATA_POSITIONING_PLACEMENT } from './constants';\n\n/**\n * Creates animation styles so that positioned elements slide in from the main axis\n * @param mainAxis - distance than the element sides for\n * @returns Griffel styles to spread to a slot\n */\nexport function createSlideStyles(mainAxis: number): GriffelStyle {\n const fadeIn = {\n from: {\n opacity: 0,\n },\n to: {\n opacity: 1,\n },\n };\n\n const slideDistanceVarX = '--fui-positioning-slide-distance-x';\n const slideDistanceVarY = '--fui-positioning-slide-distance-y';\n\n return {\n // The fade has absolute values, whereas the slide amount is relative.\n animationComposition: 'replace, accumulate',\n animationDuration: tokens.durationSlower,\n animationTimingFunction: tokens.curveDecelerateMid,\n [slideDistanceVarX]: `0px`,\n [slideDistanceVarY]: `${mainAxis}px`,\n [`&[${DATA_POSITIONING_PLACEMENT}^=right]`]: {\n [slideDistanceVarX]: `-${mainAxis}px`,\n [slideDistanceVarY]: '0px',\n },\n\n [`&[${DATA_POSITIONING_PLACEMENT}^=bottom]`]: {\n [slideDistanceVarX]: '0px',\n [slideDistanceVarY]: `-${mainAxis}px`,\n },\n\n [`&[${DATA_POSITIONING_PLACEMENT}^=left]`]: {\n [slideDistanceVarX]: `${mainAxis}px`,\n [slideDistanceVarY]: '0px',\n },\n\n animationName: [\n fadeIn,\n {\n from: {\n transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`,\n },\n to: {},\n },\n ],\n\n // Note: at-rules have more specificity in Griffel\n '@media(prefers-reduced-motion)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationComposition: 'replace',\n animationDuration: '1ms',\n animationName: fadeIn,\n },\n },\n\n // Tested in Firefox 79\n '@supports not (animation-composition: accumulate)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationComposition: 'replace',\n animationName: fadeIn,\n },\n },\n };\n}\n"],"names":["createSlideStyles","mainAxis","fadeIn","from","opacity","to","slideDistanceVarX","slideDistanceVarY","animationComposition","animationDuration","tokens","durationSlower","animationTimingFunction","curveDecelerateMid","DATA_POSITIONING_PLACEMENT","animationName","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASgBA;;;eAAAA;;;4BATO;2BAEoB;AAOpC,SAASA,kBAAkBC,QAAgB;IAChD,MAAMC,SAAS;QACbC,MAAM;YACJC,SAAS;QACX;QACAC,IAAI;YACFD,SAAS;QACX;IACF;IAEA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAE1B,OAAO;QACL,sEAAsE;QACtEC,sBAAsB;QACtBC,mBAAmBC,kBAAM,CAACC,cAAc;QACxCC,yBAAyBF,kBAAM,CAACG,kBAAkB;QAClD,CAACP,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,CAAC,EAAEN,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,EAAE,EAAEa,qCAA0B,CAAC,QAAQ,CAAC,CAAC,EAAE;YAC3C,CAACR,kBAAkB,EAAE,CAAC,CAAC,EAAEL,SAAS,EAAE,CAAC;YACrC,CAACM,kBAAkB,EAAE;QACvB;QAEA,CAAC,CAAC,EAAE,EAAEO,qCAA0B,CAAC,SAAS,CAAC,CAAC,EAAE;YAC5C,CAACR,kBAAkB,EAAE;YACrB,CAACC,kBAAkB,EAAE,CAAC,CAAC,EAAEN,SAAS,EAAE,CAAC;QACvC;QAEA,CAAC,CAAC,EAAE,EAAEa,qCAA0B,CAAC,OAAO,CAAC,CAAC,EAAE;YAC1C,CAACR,kBAAkB,EAAE,CAAC,EAAEL,SAAS,EAAE,CAAC;YACpC,CAACM,kBAAkB,EAAE;QACvB;QAEAQ,eAAe;YACbb;YACA;gBACEC,MAAM;oBACJa,WAAW,CAAC,cAAc,EAAEV,kBAAkB,OAAO,EAAEC,kBAAkB,EAAE,CAAC;gBAC9E;gBACAF,IAAI,CAAC;YACP;SACD;QAED,kDAAkD;QAClD,kCAAkC;YAChC,CAAC,CAAC,EAAE,EAAES,qCAA0B,CAAC,CAAC,CAAC,CAAC,EAAE;gBACpCN,sBAAsB;gBACtBC,mBAAmB;gBACnBM,eAAeb;YACjB;QACF;QAEA,uBAAuB;QACvB,qDAAqD;YACnD,CAAC,CAAC,EAAE,EAAEY,qCAA0B,CAAC,CAAC,CAAC,CAAC,EAAE;gBACpCN,sBAAsB;gBACtBO,eAAeb;YACjB;QACF;IACF;AACF"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createVirtualElementFromClick", {
enumerable: true,
get: function() {
return createVirtualElementFromClick;
}
});
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,
x: left,
y: top,
height: 1,
width: 1
};
}
return {
getBoundingClientRect
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/createVirtualElementFromClick.ts"],"sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect() {\n return {\n left,\n top,\n right,\n bottom,\n x: left,\n y: top,\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"],"names":["createVirtualElementFromClick","nativeEvent","left","clientX","top","clientY","right","bottom","getBoundingClientRect","x","y","height","width"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMgBA;;;eAAAA;;;AAAT,SAASA,8BAA8BC,WAAuB;IACnE,MAAMC,OAAOD,YAAYE,OAAO;IAChC,MAAMC,MAAMH,YAAYI,OAAO;IAC/B,MAAMC,QAAQJ,OAAO;IACrB,MAAMK,SAASH,MAAM;IAErB,SAASI;QACP,OAAO;YACLN;YACAE;YACAE;YACAC;YACAE,GAAGP;YACHQ,GAAGN;YACHO,QAAQ;YACRC,OAAO;QACT;IACF;IAEA,OAAO;QACLJ;IACF;AACF"}
+42
View File
@@ -0,0 +1,42 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
createArrowHeightStyles: function() {
return _createArrowStyles.createArrowHeightStyles;
},
createArrowStyles: function() {
return _createArrowStyles.createArrowStyles;
},
createSlideStyles: function() {
return _createSlideStyles.createSlideStyles;
},
createVirtualElementFromClick: function() {
return _createVirtualElementFromClick.createVirtualElementFromClick;
},
mergeArrowOffset: function() {
return _index.mergeArrowOffset;
},
resolvePositioningShorthand: function() {
return _index.resolvePositioningShorthand;
},
usePositioning: function() {
return _usePositioning.usePositioning;
},
usePositioningMouseTarget: function() {
return _usePositioningMouseTarget.usePositioningMouseTarget;
}
});
const _createVirtualElementFromClick = require("./createVirtualElementFromClick");
const _createArrowStyles = require("./createArrowStyles");
const _createSlideStyles = require("./createSlideStyles");
const _usePositioning = require("./usePositioning");
const _usePositioningMouseTarget = require("./usePositioningMouseTarget");
const _index = require("./utils/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport { createSlideStyles } from './createSlideStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningBoundary,\n PositioningImperativeRef,\n PositioningProps,\n PositioningRect,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n SetVirtualMouseTarget,\n} from './types';\n"],"names":["createArrowHeightStyles","createArrowStyles","createSlideStyles","createVirtualElementFromClick","mergeArrowOffset","resolvePositioningShorthand","usePositioning","usePositioningMouseTarget"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,uBAAuB;eAAvBA,0CAAuB;;IAAEC,iBAAiB;eAAjBA,oCAAiB;;IAC1CC,iBAAiB;eAAjBA,oCAAiB;;IAFjBC,6BAA6B;eAA7BA,4DAA6B;;IAMAC,gBAAgB;eAAhBA,uBAAgB;;IAA7CC,2BAA2B;eAA3BA,kCAA2B;;IAF3BC,cAAc;eAAdA,8BAAc;;IACdC,yBAAyB;eAAzBA,oDAAyB;;;+CALY;mCACa;mCACzB;gCAEH;2CACW;uBACoB"}
@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "coverTarget", {
enumerable: true,
get: function() {
return coverTarget;
}
});
const _index = require("../utils/index");
function coverTarget() {
return {
name: 'coverTarget',
fn: (middlewareArguments)=>{
const { placement, rects, x, y } = middlewareArguments;
const basePlacement = (0, _index.parseFloatingUIPlacement)(placement).side;
const newCoords = {
x,
y
};
switch(basePlacement){
case 'bottom':
newCoords.y -= rects.reference.height;
break;
case 'top':
newCoords.y += rects.reference.height;
break;
case 'left':
newCoords.x += rects.reference.width;
break;
case 'right':
newCoords.x -= rects.reference.width;
break;
}
return newCoords;
}
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/coverTarget.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { parseFloatingUIPlacement } from '../utils/index';\n\nexport function coverTarget(): Middleware {\n return {\n name: 'coverTarget',\n fn: middlewareArguments => {\n const { placement, rects, x, y } = middlewareArguments;\n const basePlacement = parseFloatingUIPlacement(placement).side;\n const newCoords = { x, y };\n\n switch (basePlacement) {\n case 'bottom':\n newCoords.y -= rects.reference.height;\n break;\n case 'top':\n newCoords.y += rects.reference.height;\n break;\n case 'left':\n newCoords.x += rects.reference.width;\n break;\n case 'right':\n newCoords.x -= rects.reference.width;\n break;\n }\n\n return newCoords;\n },\n };\n}\n"],"names":["coverTarget","name","fn","middlewareArguments","placement","rects","x","y","basePlacement","parseFloatingUIPlacement","side","newCoords","reference","height","width"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;uBAFyB;AAElC,SAASA;IACd,OAAO;QACLC,MAAM;QACNC,IAAIC,CAAAA;YACF,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAGJ;YACnC,MAAMK,gBAAgBC,IAAAA,+BAAwB,EAACL,WAAWM,IAAI;YAC9D,MAAMC,YAAY;gBAAEL;gBAAGC;YAAE;YAEzB,OAAQC;gBACN,KAAK;oBACHG,UAAUJ,CAAC,IAAIF,MAAMO,SAAS,CAACC,MAAM;oBACrC;gBACF,KAAK;oBACHF,UAAUJ,CAAC,IAAIF,MAAMO,SAAS,CAACC,MAAM;oBACrC;gBACF,KAAK;oBACHF,UAAUL,CAAC,IAAID,MAAMO,SAAS,CAACE,KAAK;oBACpC;gBACF,KAAK;oBACHH,UAAUL,CAAC,IAAID,MAAMO,SAAS,CAACE,KAAK;oBACpC;YACJ;YAEA,OAAOH;QACT;IACF;AACF"}
@@ -0,0 +1,36 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "flip", {
enumerable: true,
get: function() {
return flip;
}
});
const _dom = require("@floating-ui/dom");
const _index = require("../utils/index");
function flip(options) {
const { hasScrollableElement, flipBoundary, container, fallbackPositions = [], isRtl } = options;
const fallbackPlacements = fallbackPositions.reduce((acc, shorthand)=>{
const { position, align } = (0, _index.resolvePositioningShorthand)(shorthand);
const placement = (0, _index.toFloatingUIPlacement)(align, position, isRtl);
if (placement) {
acc.push(placement);
}
return acc;
}, []);
return (0, _dom.flip)({
...hasScrollableElement && {
boundary: 'clippingAncestors'
},
...flipBoundary && {
altBoundary: true,
boundary: (0, _index.getBoundary)(container, flipBoundary)
},
fallbackStrategy: 'bestFit',
...fallbackPlacements.length && {
fallbackPlacements
}
});
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/flip.ts"],"sourcesContent":["import { flip as baseFlip, Placement } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, resolvePositioningShorthand, toFloatingUIPlacement } from '../utils/index';\n\nexport interface FlipMiddlewareOptions extends Pick<PositioningOptions, 'flipBoundary' | 'fallbackPositions'> {\n hasScrollableElement?: boolean;\n container: HTMLElement | null;\n isRtl?: boolean;\n}\n\nexport function flip(options: FlipMiddlewareOptions) {\n const { hasScrollableElement, flipBoundary, container, fallbackPositions = [], isRtl } = options;\n\n const fallbackPlacements = fallbackPositions.reduce<Placement[]>((acc, shorthand) => {\n const { position, align } = resolvePositioningShorthand(shorthand);\n const placement = toFloatingUIPlacement(align, position, isRtl);\n if (placement) {\n acc.push(placement);\n }\n return acc;\n }, []);\n\n return baseFlip({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(flipBoundary && { altBoundary: true, boundary: getBoundary(container, flipBoundary) }),\n fallbackStrategy: 'bestFit',\n ...(fallbackPlacements.length && { fallbackPlacements }),\n });\n}\n"],"names":["flip","options","hasScrollableElement","flipBoundary","container","fallbackPositions","isRtl","fallbackPlacements","reduce","acc","shorthand","position","align","resolvePositioningShorthand","placement","toFloatingUIPlacement","push","baseFlip","boundary","altBoundary","getBoundary","fallbackStrategy","length"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUgBA;;;eAAAA;;;qBAV4B;uBAEoC;AAQzE,SAASA,KAAKC,OAA8B;IACjD,MAAM,EAAEC,oBAAoB,EAAEC,YAAY,EAAEC,SAAS,EAAEC,oBAAoB,EAAE,EAAEC,KAAK,EAAE,GAAGL;IAEzF,MAAMM,qBAAqBF,kBAAkBG,MAAM,CAAc,CAACC,KAAKC;QACrE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGC,IAAAA,kCAA2B,EAACH;QACxD,MAAMI,YAAYC,IAAAA,4BAAqB,EAACH,OAAOD,UAAUL;QACzD,IAAIQ,WAAW;YACbL,IAAIO,IAAI,CAACF;QACX;QACA,OAAOL;IACT,GAAG,EAAE;IAEL,OAAOQ,IAAAA,SAAQ,EAAC;QACd,GAAIf,wBAAwB;YAAEgB,UAAU;QAAoB,CAAC;QAC7D,GAAIf,gBAAgB;YAAEgB,aAAa;YAAMD,UAAUE,IAAAA,kBAAW,EAAChB,WAAWD;QAAc,CAAC;QACzFkB,kBAAkB;QAClB,GAAId,mBAAmBe,MAAM,IAAI;YAAEf;QAAmB,CAAC;IACzD;AACF"}
@@ -0,0 +1,46 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
coverTarget: function() {
return _coverTarget.coverTarget;
},
flip: function() {
return _flip.flip;
},
intersecting: function() {
return _intersecting.intersecting;
},
matchTargetSize: function() {
return _matchTargetSize.matchTargetSize;
},
matchTargetSizeCssVar: function() {
return _matchTargetSize.matchTargetSizeCssVar;
},
maxSize: function() {
return _maxSize.maxSize;
},
offset: function() {
return _offset.offset;
},
resetMaxSize: function() {
return _maxSize.resetMaxSize;
},
shift: function() {
return _shift.shift;
}
});
const _coverTarget = require("./coverTarget");
const _flip = require("./flip");
const _intersecting = require("./intersecting");
const _maxSize = require("./maxSize");
const _offset = require("./offset");
const _shift = require("./shift");
const _matchTargetSize = require("./matchTargetSize");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/index.ts"],"sourcesContent":["export { coverTarget } from './coverTarget';\nexport type { FlipMiddlewareOptions } from './flip';\nexport { flip } from './flip';\nexport { intersecting } from './intersecting';\nexport type { MaxSizeMiddlewareOptions } from './maxSize';\nexport { maxSize, resetMaxSize } from './maxSize';\nexport { offset } from './offset';\nexport type { ShiftMiddlewareOptions } from './shift';\nexport { shift } from './shift';\nexport { matchTargetSize, matchTargetSizeCssVar } from './matchTargetSize';\n"],"names":["coverTarget","flip","intersecting","matchTargetSize","matchTargetSizeCssVar","maxSize","offset","resetMaxSize","shift"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,WAAW;eAAXA,wBAAW;;IAEXC,IAAI;eAAJA,UAAI;;IACJC,YAAY;eAAZA,0BAAY;;IAMZC,eAAe;eAAfA,gCAAe;;IAAEC,qBAAqB;eAArBA,sCAAqB;;IAJtCC,OAAO;eAAPA,gBAAO;;IACPC,MAAM;eAANA,cAAM;;IADGC,YAAY;eAAZA,qBAAY;;IAGrBC,KAAK;eAALA,YAAK;;;6BARc;sBAEP;8BACQ;yBAES;wBACf;uBAED;iCACiC"}
@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "intersecting", {
enumerable: true,
get: function() {
return intersecting;
}
});
const _dom = require("@floating-ui/dom");
function intersecting() {
return {
name: 'intersectionObserver',
fn: async (middlewareArguments)=>{
const floatingRect = middlewareArguments.rects.floating;
const altOverflow = await (0, _dom.detectOverflow)(middlewareArguments, {
altBoundary: true
});
const isIntersectingTop = altOverflow.top < floatingRect.height && altOverflow.top > 0;
const isIntersectingBottom = altOverflow.bottom < floatingRect.height && altOverflow.bottom > 0;
const isIntersecting = isIntersectingTop || isIntersectingBottom;
return {
data: {
intersecting: isIntersecting
}
};
}
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/intersecting.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { detectOverflow } from '@floating-ui/dom';\n\nexport function intersecting(): Middleware {\n return {\n name: 'intersectionObserver',\n fn: async middlewareArguments => {\n const floatingRect = middlewareArguments.rects.floating;\n const altOverflow = await detectOverflow(middlewareArguments, { altBoundary: true });\n\n const isIntersectingTop = altOverflow.top < floatingRect.height && altOverflow.top > 0;\n const isIntersectingBottom = altOverflow.bottom < floatingRect.height && altOverflow.bottom > 0;\n\n const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n return {\n data: {\n intersecting: isIntersecting,\n },\n };\n },\n };\n}\n"],"names":["intersecting","name","fn","middlewareArguments","floatingRect","rects","floating","altOverflow","detectOverflow","altBoundary","isIntersectingTop","top","height","isIntersectingBottom","bottom","isIntersecting","data"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;qBAFe;AAExB,SAASA;IACd,OAAO;QACLC,MAAM;QACNC,IAAI,OAAMC;YACR,MAAMC,eAAeD,oBAAoBE,KAAK,CAACC,QAAQ;YACvD,MAAMC,cAAc,MAAMC,IAAAA,mBAAc,EAACL,qBAAqB;gBAAEM,aAAa;YAAK;YAElF,MAAMC,oBAAoBH,YAAYI,GAAG,GAAGP,aAAaQ,MAAM,IAAIL,YAAYI,GAAG,GAAG;YACrF,MAAME,uBAAuBN,YAAYO,MAAM,GAAGV,aAAaQ,MAAM,IAAIL,YAAYO,MAAM,GAAG;YAE9F,MAAMC,iBAAiBL,qBAAqBG;YAE5C,OAAO;gBACLG,MAAM;oBACJhB,cAAce;gBAChB;YACF;QACF;IACF;AACF"}
@@ -0,0 +1,43 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
matchTargetSize: function() {
return matchTargetSize;
},
matchTargetSizeCssVar: function() {
return matchTargetSizeCssVar;
}
});
const matchTargetSizeCssVar = '--fui-match-target-size';
function matchTargetSize() {
return {
name: 'matchTargetSize',
fn: async (middlewareArguments)=>{
const { rects: { reference: referenceRect, floating: floatingRect }, elements: { floating: floatingElement }, middlewareData: { matchTargetSize: { matchTargetSizeAttempt = false } = {} } } = middlewareArguments;
if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {
return {};
}
const { width } = referenceRect;
floatingElement.style.setProperty(matchTargetSizeCssVar, `${width}px`);
if (!floatingElement.style.width) {
floatingElement.style.width = `var(${matchTargetSizeCssVar})`;
}
return {
data: {
matchTargetSizeAttempt: true
},
reset: {
rects: true
}
};
}
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/matchTargetSize.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\n\nexport const matchTargetSizeCssVar = '--fui-match-target-size';\n\nexport function matchTargetSize(): Middleware {\n return {\n name: 'matchTargetSize',\n fn: async middlewareArguments => {\n const {\n rects: { reference: referenceRect, floating: floatingRect },\n elements: { floating: floatingElement },\n middlewareData: { matchTargetSize: { matchTargetSizeAttempt = false } = {} },\n } = middlewareArguments;\n\n if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {\n return {};\n }\n\n const { width } = referenceRect;\n floatingElement.style.setProperty(matchTargetSizeCssVar, `${width}px`);\n if (!floatingElement.style.width) {\n floatingElement.style.width = `var(${matchTargetSizeCssVar})`;\n }\n\n return {\n data: { matchTargetSizeAttempt: true },\n reset: {\n rects: true,\n },\n };\n },\n };\n}\n"],"names":["matchTargetSize","matchTargetSizeCssVar","name","fn","middlewareArguments","rects","reference","referenceRect","floating","floatingRect","elements","floatingElement","middlewareData","matchTargetSizeAttempt","width","style","setProperty","data","reset"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIgBA,eAAe;eAAfA;;IAFHC,qBAAqB;eAArBA;;;AAAN,MAAMA,wBAAwB;AAE9B,SAASD;IACd,OAAO;QACLE,MAAM;QACNC,IAAI,OAAMC;YACR,MAAM,EACJC,OAAO,EAAEC,WAAWC,aAAa,EAAEC,UAAUC,YAAY,EAAE,EAC3DC,UAAU,EAAEF,UAAUG,eAAe,EAAE,EACvCC,gBAAgB,EAAEZ,iBAAiB,EAAEa,yBAAyB,KAAK,EAAE,GAAG,CAAC,CAAC,EAAE,EAC7E,GAAGT;YAEJ,IAAIG,cAAcO,KAAK,KAAKL,aAAaK,KAAK,IAAID,wBAAwB;gBACxE,OAAO,CAAC;YACV;YAEA,MAAM,EAAEC,KAAK,EAAE,GAAGP;YAClBI,gBAAgBI,KAAK,CAACC,WAAW,CAACf,uBAAuB,CAAC,EAAEa,MAAM,EAAE,CAAC;YACrE,IAAI,CAACH,gBAAgBI,KAAK,CAACD,KAAK,EAAE;gBAChCH,gBAAgBI,KAAK,CAACD,KAAK,GAAG,CAAC,IAAI,EAAEb,sBAAsB,CAAC,CAAC;YAC/D;YAEA,OAAO;gBACLgB,MAAM;oBAAEJ,wBAAwB;gBAAK;gBACrCK,OAAO;oBACLb,OAAO;gBACT;YACF;QACF;IACF;AACF"}
@@ -0,0 +1,80 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
maxSize: function() {
return maxSize;
},
resetMaxSize: function() {
return resetMaxSize;
}
});
const _dom = require("@floating-ui/dom");
const _getBoundary = require("../utils/getBoundary");
const _utils = require("../utils");
const resetMaxSize = (autoSize)=>({
name: 'resetMaxSize',
fn ({ middlewareData, elements }) {
var _middlewareData_resetMaxSize;
if ((_middlewareData_resetMaxSize = middlewareData.resetMaxSize) === null || _middlewareData_resetMaxSize === void 0 ? void 0 : _middlewareData_resetMaxSize.maxSizeAlreadyReset) {
return {};
}
const { applyMaxWidth, applyMaxHeight } = autoSize;
if (applyMaxWidth) {
elements.floating.style.removeProperty('box-sizing');
elements.floating.style.removeProperty('max-width');
elements.floating.style.removeProperty('width');
}
if (applyMaxHeight) {
elements.floating.style.removeProperty('box-sizing');
elements.floating.style.removeProperty('max-height');
elements.floating.style.removeProperty('height');
}
return {
data: {
maxSizeAlreadyReset: true
},
reset: {
rects: true
}
};
}
});
function maxSize(autoSize, options) {
const { container, overflowBoundary, overflowBoundaryPadding, isRtl } = options;
return (0, _dom.size)({
...overflowBoundaryPadding && {
padding: (0, _utils.toFloatingUIPadding)(overflowBoundaryPadding, isRtl)
},
...overflowBoundary && {
altBoundary: true,
boundary: (0, _getBoundary.getBoundary)(container, overflowBoundary)
},
apply ({ availableHeight, availableWidth, elements, rects }) {
const applyMaxSizeStyles = (apply, dimension, availableSize)=>{
if (!apply) {
return;
}
elements.floating.style.setProperty('box-sizing', 'border-box');
elements.floating.style.setProperty(`max-${dimension}`, `${availableSize}px`);
if (rects.floating[dimension] > availableSize) {
elements.floating.style.setProperty(dimension, `${availableSize}px`);
const axis = dimension === 'width' ? 'x' : 'y';
if (!elements.floating.style.getPropertyValue(`overflow-${axis}`)) {
elements.floating.style.setProperty(`overflow-${axis}`, 'auto');
}
}
};
const { applyMaxWidth, applyMaxHeight } = autoSize;
applyMaxSizeStyles(applyMaxWidth, 'width', availableWidth);
applyMaxSizeStyles(applyMaxHeight, 'height', availableHeight);
}
});
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "offset", {
enumerable: true,
get: function() {
return offset;
}
});
const _dom = require("@floating-ui/dom");
const _getFloatingUIOffset = require("../utils/getFloatingUIOffset");
function offset(offsetValue) {
const floatingUIOffset = (0, _getFloatingUIOffset.getFloatingUIOffset)(offsetValue);
return (0, _dom.offset)(floatingUIOffset);
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/offset.ts"],"sourcesContent":["import { offset as baseOffset } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getFloatingUIOffset } from '../utils/getFloatingUIOffset';\n\n/**\n * Wraps floating UI offset middleware to to transform offset value\n */\nexport function offset(offsetValue: PositioningOptions['offset']) {\n const floatingUIOffset = getFloatingUIOffset(offsetValue);\n return baseOffset(floatingUIOffset);\n}\n"],"names":["offset","offsetValue","floatingUIOffset","getFloatingUIOffset","baseOffset"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BAOgBA;;;eAAAA;;;qBAPqB;qCAED;AAK7B,SAASA,OAAOC,WAAyC;IAC9D,MAAMC,mBAAmBC,IAAAA,wCAAmB,EAACF;IAC7C,OAAOG,IAAAA,WAAU,EAACF;AACpB"}
@@ -0,0 +1,41 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "shift", {
enumerable: true,
get: function() {
return shift;
}
});
const _dom = require("@floating-ui/dom");
const _index = require("../utils/index");
function shift(options) {
const { hasScrollableElement, shiftToCoverTarget, disableTether, overflowBoundary, container, overflowBoundaryPadding, isRtl } = options;
return (0, _dom.shift)({
...hasScrollableElement && {
boundary: 'clippingAncestors'
},
...shiftToCoverTarget && {
crossAxis: true,
limiter: (0, _dom.limitShift)({
crossAxis: true,
mainAxis: false
})
},
...disableTether && {
crossAxis: disableTether === 'all',
limiter: (0, _dom.limitShift)({
crossAxis: disableTether !== 'all',
mainAxis: false
})
},
...overflowBoundaryPadding && {
padding: (0, _index.toFloatingUIPadding)(overflowBoundaryPadding, isRtl)
},
...overflowBoundary && {
altBoundary: true,
boundary: (0, _index.getBoundary)(container, overflowBoundary)
}
});
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/shift.ts"],"sourcesContent":["import { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, toFloatingUIPadding } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding' | 'shiftToCoverTarget'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions) {\n const {\n hasScrollableElement,\n shiftToCoverTarget,\n disableTether,\n overflowBoundary,\n container,\n overflowBoundaryPadding,\n isRtl,\n } = options;\n\n return baseShift({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(shiftToCoverTarget && {\n crossAxis: true,\n limiter: limitShift({ crossAxis: true, mainAxis: false }),\n }),\n ...(disableTether && {\n crossAxis: disableTether === 'all',\n limiter: limitShift({ crossAxis: disableTether !== 'all', mainAxis: false }),\n }),\n ...(overflowBoundaryPadding && { padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl) }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n });\n}\n"],"names":["shift","options","hasScrollableElement","shiftToCoverTarget","disableTether","overflowBoundary","container","overflowBoundaryPadding","isRtl","baseShift","boundary","crossAxis","limiter","limitShift","mainAxis","padding","toFloatingUIPadding","altBoundary","getBoundary"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAegBA;;;eAAAA;;;qBAf+B;uBAEE;AAa1C,SAASA,MAAMC,OAA+B;IACnD,MAAM,EACJC,oBAAoB,EACpBC,kBAAkB,EAClBC,aAAa,EACbC,gBAAgB,EAChBC,SAAS,EACTC,uBAAuB,EACvBC,KAAK,EACN,GAAGP;IAEJ,OAAOQ,IAAAA,UAAS,EAAC;QACf,GAAIP,wBAAwB;YAAEQ,UAAU;QAAoB,CAAC;QAC7D,GAAIP,sBAAsB;YACxBQ,WAAW;YACXC,SAASC,IAAAA,eAAU,EAAC;gBAAEF,WAAW;gBAAMG,UAAU;YAAM;QACzD,CAAC;QACD,GAAIV,iBAAiB;YACnBO,WAAWP,kBAAkB;YAC7BQ,SAASC,IAAAA,eAAU,EAAC;gBAAEF,WAAWP,kBAAkB;gBAAOU,UAAU;YAAM;QAC5E,CAAC;QACD,GAAIP,2BAA2B;YAAEQ,SAASC,IAAAA,0BAAmB,EAACT,yBAAyBC;QAAO,CAAC;QAC/F,GAAIH,oBAAoB;YAAEY,aAAa;YAAMP,UAAUQ,IAAAA,kBAAW,EAACZ,WAAWD;QAAkB,CAAC;IACnG;AACF"}
+6
View File
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
File diff suppressed because one or more lines are too long
+235
View File
@@ -0,0 +1,235 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "usePositioning", {
enumerable: true,
get: function() {
return usePositioning;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _dom = require("@floating-ui/dom");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _utils = require("./utils");
const _middleware = require("./middleware");
const _createPositionManager = require("./createPositionManager");
const _devtools = require("@floating-ui/devtools");
const _devtools1 = require("./utils/devtools");
const _constants = require("./constants");
function usePositioning(options) {
'use no memo';
const managerRef = _react.useRef(null);
const targetRef = _react.useRef(null);
const overrideTargetRef = _react.useRef(null);
const containerRef = _react.useRef(null);
const arrowRef = _react.useRef(null);
const { enabled = true } = options;
const resolvePositioningOptions = usePositioningOptions(options);
const updatePositionManager = _react.useCallback(()=>{
if (managerRef.current) {
managerRef.current.dispose();
}
managerRef.current = null;
var _overrideTargetRef_current;
const target = (_overrideTargetRef_current = overrideTargetRef.current) !== null && _overrideTargetRef_current !== void 0 ? _overrideTargetRef_current : targetRef.current;
if (enabled && (0, _reactutilities.canUseDOM)() && target && containerRef.current) {
managerRef.current = (0, _createPositionManager.createPositionManager)({
container: containerRef.current,
target,
arrow: arrowRef.current,
...resolvePositioningOptions(containerRef.current, arrowRef.current)
});
}
}, [
enabled,
resolvePositioningOptions
]);
const setOverrideTarget = (0, _reactutilities.useEventCallback)((target)=>{
overrideTargetRef.current = target;
updatePositionManager();
});
_react.useImperativeHandle(options.positioningRef, ()=>({
updatePosition: ()=>{
var _managerRef_current;
return (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.updatePosition();
},
setTarget: (target)=>{
if (options.target && process.env.NODE_ENV !== 'production') {
const err = new Error();
// eslint-disable-next-line no-console
console.warn('Imperative setTarget should not be used at the same time as target option');
// eslint-disable-next-line no-console
console.warn(err.stack);
}
setOverrideTarget(target);
}
}), [
options.target,
setOverrideTarget
]);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
var _options_target;
setOverrideTarget((_options_target = options.target) !== null && _options_target !== void 0 ? _options_target : null);
}, [
options.target,
setOverrideTarget
]);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
updatePositionManager();
}, [
updatePositionManager
]);
if (process.env.NODE_ENV !== 'production') {
// This checked should run only in development mode
// eslint-disable-next-line react-hooks/rules-of-hooks
_react.useEffect(()=>{
if (containerRef.current) {
var _contentNode_ownerDocument;
const contentNode = containerRef.current;
const treeWalker = (_contentNode_ownerDocument = contentNode.ownerDocument) === null || _contentNode_ownerDocument === void 0 ? void 0 : _contentNode_ownerDocument.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {
acceptNode: _utils.hasAutofocusFilter
});
while(treeWalker.nextNode()){
const node = treeWalker.currentNode;
// eslint-disable-next-line no-console
console.warn('<Popper>:', node);
// eslint-disable-next-line no-console
console.warn([
'<Popper>: ^ this node contains "autoFocus" prop on a React element. This can break the initial',
'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',
'"autoFocus" behavior to solve inconsistencies between different browsers:',
'https://github.com/facebook/react/issues/11851#issuecomment-351787078',
'\n',
'However, ".focus()" in this case occurs before any other React effects will be executed',
'(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',
'want to use "autoFocus" please add "position: fixed" to styles of the element that is wrapped by',
'"Popper".',
`In general, it's not recommended to use "autoFocus" as it may break accessibility aspects:`,
'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',
'\n',
'We suggest to use the "trapFocus" prop on Fluent components or a catch "ref" and then use',
'"ref.current.focus" in React.useEffect():',
'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element'
].join(' '));
}
}
// We run this check once, no need to add deps here
// TODO: Should be rework to handle options.enabled and contentRef updates
}, []);
}
const setTarget = (0, _utils.useCallbackRef)(null, (target)=>{
if (targetRef.current !== target) {
targetRef.current = target;
updatePositionManager();
}
});
const onPositioningEnd = (0, _reactutilities.useEventCallback)(()=>{
var _options_onPositioningEnd;
return (_options_onPositioningEnd = options.onPositioningEnd) === null || _options_onPositioningEnd === void 0 ? void 0 : _options_onPositioningEnd.call(options);
});
const setContainer = (0, _utils.useCallbackRef)(null, (container)=>{
if (containerRef.current !== container) {
var _containerRef_current;
(_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.removeEventListener(_constants.POSITIONING_END_EVENT, onPositioningEnd);
container === null || container === void 0 ? void 0 : container.addEventListener(_constants.POSITIONING_END_EVENT, onPositioningEnd);
containerRef.current = container;
updatePositionManager();
}
});
const setArrow = (0, _utils.useCallbackRef)(null, (arrow)=>{
if (arrowRef.current !== arrow) {
arrowRef.current = arrow;
updatePositionManager();
}
});
// Let users use callback refs so they feel like 'normal' DOM refs
return {
targetRef: setTarget,
containerRef: setContainer,
arrowRef: setArrow
};
}
function usePositioningOptions(options) {
'use no memo';
const { align, arrowPadding, autoSize: rawAutoSize, coverTarget, flipBoundary, offset, overflowBoundary, pinned, position, unstable_disableTether: disableTether, // eslint-disable-next-line @typescript-eslint/no-deprecated
positionFixed, strategy, overflowBoundaryPadding, fallbackPositions, useTransform, matchTargetSize, disableUpdateOnResize = false, shiftToCoverTarget } = options;
const { dir, targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const isRtl = dir === 'rtl';
const positionStrategy = (strategy !== null && strategy !== void 0 ? strategy : positionFixed) ? 'fixed' : 'absolute';
const autoSize = (0, _utils.normalizeAutoSize)(rawAutoSize);
return _react.useCallback((container, arrow)=>{
const hasScrollableElement = (0, _utils.hasScrollParent)(container);
const middleware = [
autoSize && (0, _middleware.resetMaxSize)(autoSize),
matchTargetSize && (0, _middleware.matchTargetSize)(),
offset && (0, _middleware.offset)(offset),
coverTarget && (0, _middleware.coverTarget)(),
!pinned && (0, _middleware.flip)({
container,
flipBoundary,
hasScrollableElement,
isRtl,
fallbackPositions
}),
(0, _middleware.shift)({
container,
hasScrollableElement,
overflowBoundary,
disableTether,
overflowBoundaryPadding,
isRtl,
shiftToCoverTarget
}),
autoSize && (0, _middleware.maxSize)(autoSize, {
container,
overflowBoundary,
overflowBoundaryPadding,
isRtl
}),
(0, _middleware.intersecting)(),
arrow && (0, _dom.arrow)({
element: arrow,
padding: arrowPadding
}),
(0, _dom.hide)({
strategy: 'referenceHidden'
}),
(0, _dom.hide)({
strategy: 'escaped'
}),
process.env.NODE_ENV !== 'production' && targetDocument && (0, _devtools.devtools)(targetDocument, (0, _devtools1.devtoolsCallback)(options))
].filter(Boolean);
const placement = (0, _utils.toFloatingUIPlacement)(align, position, isRtl);
return {
placement,
middleware,
strategy: positionStrategy,
useTransform,
disableUpdateOnResize
};
}, // Options is missing here, but it's not required
// eslint-disable-next-line react-hooks/exhaustive-deps
[
align,
arrowPadding,
autoSize,
coverTarget,
disableTether,
flipBoundary,
isRtl,
offset,
overflowBoundary,
pinned,
position,
positionStrategy,
overflowBoundaryPadding,
fallbackPositions,
useTransform,
matchTargetSize,
targetDocument,
disableUpdateOnResize
]);
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,38 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "usePositioningMouseTarget", {
enumerable: true,
get: function() {
return usePositioningMouseTarget;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _createVirtualElementFromClick = require("./createVirtualElementFromClick");
const usePositioningMouseTarget = (initialState)=>{
const [virtualElement, setVirtualElement] = _react.useState(initialState);
const setVirtualMouseTarget = (event)=>{
if (event === undefined || event === null) {
setVirtualElement(undefined);
return;
}
let mouseevent;
if (!(event instanceof MouseEvent)) {
mouseevent = event.nativeEvent;
} else {
mouseevent = event;
}
if (!(mouseevent instanceof MouseEvent) && process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.error('usePositioningMouseTarget should only be used with MouseEvent');
}
const contextTarget = (0, _createVirtualElementFromClick.createVirtualElementFromClick)(mouseevent);
setVirtualElement(contextTarget);
};
return [
virtualElement,
setVirtualMouseTarget
];
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/usePositioningMouseTarget.ts"],"sourcesContent":["import * as React from 'react';\nimport { createVirtualElementFromClick } from './createVirtualElementFromClick';\nimport { PositioningVirtualElement, SetVirtualMouseTarget } from './types';\n\n/**\n * @internal\n * A state hook that manages a popper virtual element from mouseevents.\n * Useful for scenarios where a component needs to be positioned by mouse click (e.g. contextmenu)\n * React synthetic events are not persisted by this hook\n *\n * @param initialState - initializes a user provided state similare to useState\n * @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events\n */\nexport const usePositioningMouseTarget = (\n initialState?: PositioningVirtualElement | (() => PositioningVirtualElement),\n) => {\n const [virtualElement, setVirtualElement] = React.useState<PositioningVirtualElement | undefined>(initialState);\n\n const setVirtualMouseTarget: SetVirtualMouseTarget = event => {\n if (event === undefined || event === null) {\n setVirtualElement(undefined);\n return;\n }\n\n let mouseevent: MouseEvent;\n if (!(event instanceof MouseEvent)) {\n mouseevent = event.nativeEvent;\n } else {\n mouseevent = event;\n }\n\n if (!(mouseevent instanceof MouseEvent) && process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('usePositioningMouseTarget should only be used with MouseEvent');\n }\n\n const contextTarget = createVirtualElementFromClick(mouseevent);\n setVirtualElement(contextTarget);\n };\n\n return [virtualElement, setVirtualMouseTarget] as const;\n};\n"],"names":["usePositioningMouseTarget","initialState","virtualElement","setVirtualElement","React","useState","setVirtualMouseTarget","event","undefined","mouseevent","MouseEvent","nativeEvent","process","env","NODE_ENV","console","error","contextTarget","createVirtualElementFromClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;+CACuB;AAYvC,MAAMA,4BAA4B,CACvCC;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,OAAMC,QAAQ,CAAwCJ;IAElG,MAAMK,wBAA+CC,CAAAA;QACnD,IAAIA,UAAUC,aAAaD,UAAU,MAAM;YACzCJ,kBAAkBK;YAClB;QACF;QAEA,IAAIC;QACJ,IAAI,CAAEF,CAAAA,iBAAiBG,UAAS,GAAI;YAClCD,aAAaF,MAAMI,WAAW;QAChC,OAAO;YACLF,aAAaF;QACf;QAEA,IAAI,CAAEE,CAAAA,sBAAsBC,UAAS,KAAME,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YAChF,sCAAsC;YACtCC,QAAQC,KAAK,CAAC;QAChB;QAEA,MAAMC,gBAAgBC,IAAAA,4DAA6B,EAACT;QACpDN,kBAAkBc;IACpB;IAEA,OAAO;QAACf;QAAgBI;KAAsB;AAChD"}
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createResizeObserver", {
enumerable: true,
get: function() {
return createResizeObserver;
}
});
function createResizeObserver(targetWindow, callback) {
// https://github.com/jsdom/jsdom/issues/3368
// Add the polyfill here so it is not needed for all unit tests that leverage positioning
if (process.env.NODE_ENV === 'test') {
targetWindow.ResizeObserver = class ResizeObserver {
observe() {
// do nothing
}
unobserve() {
// do nothing
}
disconnect() {
// do nothing
}
};
}
return new targetWindow.ResizeObserver(callback);
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/createResizeObserver.ts"],"sourcesContent":["export function createResizeObserver(targetWindow: Window & typeof globalThis, callback: ResizeObserverCallback) {\n // https://github.com/jsdom/jsdom/issues/3368\n // Add the polyfill here so it is not needed for all unit tests that leverage positioning\n if (process.env.NODE_ENV === 'test') {\n targetWindow.ResizeObserver = class ResizeObserver {\n public observe() {\n // do nothing\n }\n public unobserve() {\n // do nothing\n }\n public disconnect() {\n // do nothing\n }\n };\n }\n\n return new targetWindow.ResizeObserver(callback);\n}\n"],"names":["createResizeObserver","targetWindow","callback","process","env","NODE_ENV","ResizeObserver","observe","unobserve","disconnect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,qBAAqBC,YAAwC,EAAEC,QAAgC;IAC7G,6CAA6C;IAC7C,yFAAyF;IACzF,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,QAAQ;QACnCJ,aAAaK,cAAc,GAAG,MAAMA;YAC3BC,UAAU;YACf,aAAa;YACf;YACOC,YAAY;YACjB,aAAa;YACf;YACOC,aAAa;YAClB,aAAa;YACf;QACF;IACF;IAEA,OAAO,IAAIR,aAAaK,cAAc,CAACJ;AACzC"}
@@ -0,0 +1,29 @@
/**
* Promise microtask debouncer used by Popper.js v2
* This is no longer exported in Floating UI (Popper.js v3)
* https://github.com/floating-ui/floating-ui/blob/v2.x/src/utils/debounce.js
* @param fn function that will be debounced
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "debounce", {
enumerable: true,
get: function() {
return debounce;
}
});
function debounce(fn) {
let pending;
return ()=>{
if (!pending) {
pending = new Promise((resolve)=>{
Promise.resolve().then(()=>{
pending = undefined;
resolve(fn());
});
});
}
return pending;
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/debounce.ts"],"sourcesContent":["/**\n * Promise microtask debouncer used by Popper.js v2\n * This is no longer exported in Floating UI (Popper.js v3)\n * https://github.com/floating-ui/floating-ui/blob/v2.x/src/utils/debounce.js\n * @param fn function that will be debounced\n */\nexport function debounce<T>(fn: Function): () => Promise<T> {\n let pending: Promise<T> | undefined;\n return () => {\n if (!pending) {\n pending = new Promise<T>(resolve => {\n Promise.resolve().then(() => {\n pending = undefined;\n resolve(fn());\n });\n });\n }\n\n return pending;\n };\n}\n"],"names":["debounce","fn","pending","Promise","resolve","then","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;CAKC;;;;+BACeA;;;eAAAA;;;AAAT,SAASA,SAAYC,EAAY;IACtC,IAAIC;IACJ,OAAO;QACL,IAAI,CAACA,SAAS;YACZA,UAAU,IAAIC,QAAWC,CAAAA;gBACvBD,QAAQC,OAAO,GAAGC,IAAI,CAAC;oBACrBH,UAAUI;oBACVF,QAAQH;gBACV;YACF;QACF;QAEA,OAAOC;IACT;AACF"}
@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "devtoolsCallback", {
enumerable: true,
get: function() {
return devtoolsCallback;
}
});
const _reactutilities = require("@fluentui/react-utilities");
const _listScrollParents = require("./listScrollParents");
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement");
const devtoolsCallback = (options)=>(middlewareState)=>{
const { elements: { floating, reference } } = middlewareState;
const scrollParentsSet = new Set();
if ((0, _reactutilities.isHTMLElement)(reference)) {
(0, _listScrollParents.listScrollParents)(reference).forEach((scrollParent)=>scrollParentsSet.add(scrollParent));
}
(0, _listScrollParents.listScrollParents)(floating).forEach((scrollParent)=>scrollParentsSet.add(scrollParent));
const flipBoundaries = Array.isArray(options.flipBoundary) ? options.flipBoundary : (0, _reactutilities.isHTMLElement)(options.flipBoundary) ? [
options.flipBoundary
] : [];
const overflowBoundaries = Array.isArray(options.overflowBoundary) ? options.overflowBoundary : (0, _reactutilities.isHTMLElement)(options.overflowBoundary) ? [
options.overflowBoundary
] : [];
return {
type: 'FluentUIMiddleware',
middlewareState,
options,
initialPlacement: (0, _fromFloatingUIPlacement.fromFloatingUIPlacement)(middlewareState.initialPlacement),
placement: (0, _fromFloatingUIPlacement.fromFloatingUIPlacement)(middlewareState.placement),
flipBoundaries,
overflowBoundaries,
scrollParents: Array.from(scrollParentsSet)
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/devtools.ts"],"sourcesContent":["import type { MiddlewareState } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport { listScrollParents } from './listScrollParents';\nimport { fromFloatingUIPlacement } from './fromFloatingUIPlacement';\n\nexport const devtoolsCallback = (options: PositioningOptions) => (middlewareState: MiddlewareState) => {\n const {\n elements: { floating, reference },\n } = middlewareState;\n const scrollParentsSet = new Set<HTMLElement>();\n if (isHTMLElement(reference)) {\n listScrollParents(reference).forEach(scrollParent => scrollParentsSet.add(scrollParent));\n }\n listScrollParents(floating).forEach(scrollParent => scrollParentsSet.add(scrollParent));\n const flipBoundaries: HTMLElement[] = Array.isArray(options.flipBoundary)\n ? options.flipBoundary\n : isHTMLElement(options.flipBoundary)\n ? [options.flipBoundary]\n : [];\n const overflowBoundaries: HTMLElement[] = Array.isArray(options.overflowBoundary)\n ? options.overflowBoundary\n : isHTMLElement(options.overflowBoundary)\n ? [options.overflowBoundary]\n : [];\n return {\n type: 'FluentUIMiddleware',\n middlewareState,\n options,\n initialPlacement: fromFloatingUIPlacement(middlewareState.initialPlacement),\n placement: fromFloatingUIPlacement(middlewareState.placement),\n flipBoundaries,\n overflowBoundaries,\n scrollParents: Array.from(scrollParentsSet),\n } as const;\n};\n"],"names":["devtoolsCallback","options","middlewareState","elements","floating","reference","scrollParentsSet","Set","isHTMLElement","listScrollParents","forEach","scrollParent","add","flipBoundaries","Array","isArray","flipBoundary","overflowBoundaries","overflowBoundary","type","initialPlacement","fromFloatingUIPlacement","placement","scrollParents","from"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;gCAJiB;mCACI;yCACM;AAEjC,MAAMA,mBAAmB,CAACC,UAAgC,CAACC;QAChE,MAAM,EACJC,UAAU,EAAEC,QAAQ,EAAEC,SAAS,EAAE,EAClC,GAAGH;QACJ,MAAMI,mBAAmB,IAAIC;QAC7B,IAAIC,IAAAA,6BAAa,EAACH,YAAY;YAC5BI,IAAAA,oCAAiB,EAACJ,WAAWK,OAAO,CAACC,CAAAA,eAAgBL,iBAAiBM,GAAG,CAACD;QAC5E;QACAF,IAAAA,oCAAiB,EAACL,UAAUM,OAAO,CAACC,CAAAA,eAAgBL,iBAAiBM,GAAG,CAACD;QACzE,MAAME,iBAAgCC,MAAMC,OAAO,CAACd,QAAQe,YAAY,IACpEf,QAAQe,YAAY,GACpBR,IAAAA,6BAAa,EAACP,QAAQe,YAAY,IAClC;YAACf,QAAQe,YAAY;SAAC,GACtB,EAAE;QACN,MAAMC,qBAAoCH,MAAMC,OAAO,CAACd,QAAQiB,gBAAgB,IAC5EjB,QAAQiB,gBAAgB,GACxBV,IAAAA,6BAAa,EAACP,QAAQiB,gBAAgB,IACtC;YAACjB,QAAQiB,gBAAgB;SAAC,GAC1B,EAAE;QACN,OAAO;YACLC,MAAM;YACNjB;YACAD;YACAmB,kBAAkBC,IAAAA,gDAAuB,EAACnB,gBAAgBkB,gBAAgB;YAC1EE,WAAWD,IAAAA,gDAAuB,EAACnB,gBAAgBoB,SAAS;YAC5DT;YACAI;YACAM,eAAeT,MAAMU,IAAI,CAAClB;QAC5B;IACF"}
@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "fromFloatingUIPlacement", {
enumerable: true,
get: function() {
return fromFloatingUIPlacement;
}
});
const _parseFloatingUIPlacement = require("./parseFloatingUIPlacement");
const getPositionMap = ()=>({
top: 'above',
bottom: 'below',
right: 'after',
left: 'before'
});
// Floating UI automatically flips alignment
// https://github.com/floating-ui/floating-ui/issues/1563
const getAlignmentMap = (position)=>{
if (position === 'above' || position === 'below') {
return {
start: 'start',
end: 'end'
};
}
return {
start: 'top',
end: 'bottom'
};
};
const fromFloatingUIPlacement = (placement)=>{
const { side, alignment: floatingUIAlignment } = (0, _parseFloatingUIPlacement.parseFloatingUIPlacement)(placement);
const position = getPositionMap()[side];
const alignment = floatingUIAlignment && getAlignmentMap(position)[floatingUIAlignment];
return {
position,
alignment
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/fromFloatingUIPlacement.ts"],"sourcesContent":["import type { Side, Alignment as FloatingUIAlignment, Placement } from '@floating-ui/dom';\nimport type { Alignment, Position } from '../types';\nimport { parseFloatingUIPlacement } from './parseFloatingUIPlacement';\n\nconst getPositionMap = (): Record<Side, Position> => ({\n top: 'above',\n bottom: 'below',\n right: 'after',\n left: 'before',\n});\n\n// Floating UI automatically flips alignment\n// https://github.com/floating-ui/floating-ui/issues/1563\nconst getAlignmentMap = (position: Position): Record<FloatingUIAlignment, Alignment> => {\n if (position === 'above' || position === 'below') {\n return {\n start: 'start',\n end: 'end',\n };\n }\n\n return {\n start: 'top',\n end: 'bottom',\n };\n};\n\n/**\n * Maps Floating UI placement to positioning values\n * @see positioningHelper.test.ts for expected placement values\n */\nexport const fromFloatingUIPlacement = (placement: Placement): { position: Position; alignment?: Alignment } => {\n const { side, alignment: floatingUIAlignment } = parseFloatingUIPlacement(placement);\n const position = getPositionMap()[side];\n const alignment = floatingUIAlignment && getAlignmentMap(position)[floatingUIAlignment];\n\n return { position, alignment };\n};\n"],"names":["fromFloatingUIPlacement","getPositionMap","top","bottom","right","left","getAlignmentMap","position","start","end","placement","side","alignment","floatingUIAlignment","parseFloatingUIPlacement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA+BaA;;;eAAAA;;;0CA7B4B;AAEzC,MAAMC,iBAAiB,IAA+B,CAAA;QACpDC,KAAK;QACLC,QAAQ;QACRC,OAAO;QACPC,MAAM;IACR,CAAA;AAEA,4CAA4C;AAC5C,yDAAyD;AACzD,MAAMC,kBAAkB,CAACC;IACvB,IAAIA,aAAa,WAAWA,aAAa,SAAS;QAChD,OAAO;YACLC,OAAO;YACPC,KAAK;QACP;IACF;IAEA,OAAO;QACLD,OAAO;QACPC,KAAK;IACP;AACF;AAMO,MAAMT,0BAA0B,CAACU;IACtC,MAAM,EAAEC,IAAI,EAAEC,WAAWC,mBAAmB,EAAE,GAAGC,IAAAA,kDAAwB,EAACJ;IAC1E,MAAMH,WAAWN,gBAAgB,CAACU,KAAK;IACvC,MAAMC,YAAYC,uBAAuBP,gBAAgBC,SAAS,CAACM,oBAAoB;IAEvF,OAAO;QAAEN;QAAUK;IAAU;AAC/B"}
@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getBoundary", {
enumerable: true,
get: function() {
return getBoundary;
}
});
const _getScrollParent = require("./getScrollParent");
function getBoundary(element, boundary) {
if (boundary === 'window') {
return element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
}
if (boundary === 'clippingParents') {
return 'clippingAncestors';
}
if (boundary === 'scrollParent') {
let boundariesNode = (0, _getScrollParent.getScrollParent)(element);
if (boundariesNode.nodeName === 'BODY') {
boundariesNode = element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
}
return boundariesNode;
}
return boundary;
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/getBoundary.ts"],"sourcesContent":["import type { Boundary as FloatingUIBoundary } from '@floating-ui/dom';\n\nimport { getScrollParent } from './getScrollParent';\nimport type { PositioningBoundary } from '../types';\n\n/**\n * Allows to mimic a behavior from V1 of Popper and accept `window` and `scrollParent` as strings.\n */\nexport function getBoundary(\n element: HTMLElement | null,\n boundary?: PositioningBoundary,\n): FloatingUIBoundary | undefined {\n if (boundary === 'window') {\n return element?.ownerDocument!.documentElement;\n }\n\n if (boundary === 'clippingParents') {\n return 'clippingAncestors';\n }\n\n if (boundary === 'scrollParent') {\n let boundariesNode: HTMLElement | undefined = getScrollParent(element);\n\n if (boundariesNode.nodeName === 'BODY') {\n boundariesNode = element?.ownerDocument!.documentElement;\n }\n\n return boundariesNode;\n }\n\n return boundary;\n}\n"],"names":["getBoundary","element","boundary","ownerDocument","documentElement","boundariesNode","getScrollParent","nodeName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQgBA;;;eAAAA;;;iCANgB;AAMzB,SAASA,YACdC,OAA2B,EAC3BC,QAA8B;IAE9B,IAAIA,aAAa,UAAU;QACzB,OAAOD,oBAAAA,8BAAAA,QAASE,aAAa,CAAEC,eAAe;IAChD;IAEA,IAAIF,aAAa,mBAAmB;QAClC,OAAO;IACT;IAEA,IAAIA,aAAa,gBAAgB;QAC/B,IAAIG,iBAA0CC,IAAAA,gCAAe,EAACL;QAE9D,IAAII,eAAeE,QAAQ,KAAK,QAAQ;YACtCF,iBAAiBJ,oBAAAA,8BAAAA,QAASE,aAAa,CAAEC,eAAe;QAC1D;QAEA,OAAOC;IACT;IAEA,OAAOH;AACT"}
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getFloatingUIOffset", {
enumerable: true,
get: function() {
return getFloatingUIOffset;
}
});
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement");
function getFloatingUIOffset(rawOffset) {
if (!rawOffset) {
return rawOffset;
}
if (typeof rawOffset === 'number' || typeof rawOffset === 'object') {
return rawOffset;
}
return ({ rects: { floating, reference }, placement })=>{
const { position, alignment } = (0, _fromFloatingUIPlacement.fromFloatingUIPlacement)(placement);
return rawOffset({
positionedRect: floating,
targetRect: reference,
position,
alignment
});
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/getFloatingUIOffset.ts"],"sourcesContent":["import type { Offset } from '../types';\nimport type { MiddlewareState } from '@floating-ui/dom';\nimport { fromFloatingUIPlacement } from './fromFloatingUIPlacement';\n/**\n * Type taken from Floating UI since they are not exported\n */\nexport type FloatingUIOffsetValue =\n | number\n | {\n /**\n * The axis that runs along the side of the floating element.\n * @default 0\n */\n mainAxis?: number;\n /**\n * The axis that runs along the alignment of the floating element.\n * @default 0\n */\n crossAxis?: number;\n /**\n * When set to a number, overrides the `crossAxis` value for aligned\n * (non-centered/base) placements and works logically. A positive number\n * will move the floating element in the direction of the opposite edge\n * to the one that is aligned, while a negative number the reverse.\n * @default null\n */\n alignmentAxis?: number | null;\n };\n\n/**\n * Type taken from Floating UI since they are not exported\n */\nexport type FloatingUIOffsetFunction = (args: MiddlewareState) => FloatingUIOffsetValue;\n\n/**\n * Shim to transform offset values from this library to Floating UI\n * @param rawOffset Offset from this library\n * @returns An offset value compatible with Floating UI\n */\nexport function getFloatingUIOffset(\n rawOffset: Offset | undefined,\n): FloatingUIOffsetValue | FloatingUIOffsetFunction | undefined {\n if (!rawOffset) {\n return rawOffset;\n }\n\n if (typeof rawOffset === 'number' || typeof rawOffset === 'object') {\n return rawOffset;\n }\n\n return ({ rects: { floating, reference }, placement }) => {\n const { position, alignment } = fromFloatingUIPlacement(placement);\n return rawOffset({ positionedRect: floating, targetRect: reference, position, alignment });\n };\n}\n"],"names":["getFloatingUIOffset","rawOffset","rects","floating","reference","placement","position","alignment","fromFloatingUIPlacement","positionedRect","targetRect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAuCgBA;;;eAAAA;;;yCArCwB;AAqCjC,SAASA,oBACdC,SAA6B;IAE7B,IAAI,CAACA,WAAW;QACd,OAAOA;IACT;IAEA,IAAI,OAAOA,cAAc,YAAY,OAAOA,cAAc,UAAU;QAClE,OAAOA;IACT;IAEA,OAAO,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAE,EAAEC,SAAS,EAAE;QACnD,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,IAAAA,gDAAuB,EAACH;QACxD,OAAOJ,UAAU;YAAEQ,gBAAgBN;YAAUO,YAAYN;YAAWE;YAAUC;QAAU;IAC1F;AACF"}
@@ -0,0 +1,53 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getReactFiberFromNode", {
enumerable: true,
get: function() {
return getReactFiberFromNode;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var WorkTag;
(function(WorkTag) {
WorkTag[WorkTag["FunctionComponent"] = 0] = "FunctionComponent";
WorkTag[WorkTag["ClassComponent"] = 1] = "ClassComponent";
WorkTag[WorkTag["IndeterminateComponent"] = 2] = "IndeterminateComponent";
WorkTag[WorkTag["HostRoot"] = 3] = "HostRoot";
WorkTag[WorkTag["HostPortal"] = 4] = "HostPortal";
WorkTag[WorkTag["HostComponent"] = 5] = "HostComponent";
WorkTag[WorkTag["HostText"] = 6] = "HostText";
WorkTag[WorkTag["Fragment"] = 7] = "Fragment";
WorkTag[WorkTag["Mode"] = 8] = "Mode";
WorkTag[WorkTag["ContextConsumer"] = 9] = "ContextConsumer";
WorkTag[WorkTag["ContextProvider"] = 10] = "ContextProvider";
WorkTag[WorkTag["ForwardRef"] = 11] = "ForwardRef";
WorkTag[WorkTag["Profiler"] = 12] = "Profiler";
WorkTag[WorkTag["SuspenseComponent"] = 13] = "SuspenseComponent";
WorkTag[WorkTag["MemoComponent"] = 14] = "MemoComponent";
WorkTag[WorkTag["SimpleMemoComponent"] = 15] = "SimpleMemoComponent";
WorkTag[WorkTag["LazyComponent"] = 16] = "LazyComponent";
WorkTag[WorkTag["IncompleteClassComponent"] = 17] = "IncompleteClassComponent";
WorkTag[WorkTag["DehydratedFragment"] = 18] = "DehydratedFragment";
WorkTag[WorkTag["SuspenseListComponent"] = 19] = "SuspenseListComponent";
WorkTag[WorkTag["FundamentalComponent"] = 20] = "FundamentalComponent";
WorkTag[WorkTag["ScopeComponent"] = 21] = "ScopeComponent";
})(WorkTag || (WorkTag = {}));
function getReactFiberFromNode(elm) {
if (!elm) {
return null;
}
for(const k in elm){
// React 16 uses "__reactInternalInstance$" prefix
// React 17 uses "__reactFiber$" prefix
// https://github.com/facebook/react/pull/18377
if (k.indexOf('__reactInternalInstance$') === 0 || k.indexOf('__reactFiber$') === 0) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return elm[k];
}
}
throw new Error('getReactFiber(): Failed to find a React Fiber on a node');
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,68 @@
/**
* Returns the parent node or the host of the node argument.
* @param node - DOM node.
* @returns - parent DOM node.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
getParentNode: function() {
return getParentNode;
},
getScrollParent: function() {
return getScrollParent;
},
hasScrollParent: function() {
return hasScrollParent;
}
});
const getParentNode = (node)=>{
if (node.nodeName === 'HTML') {
return node;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return node.parentNode || node.host;
};
/**
* Returns CSS styles of the given node.
* @param node - DOM node.
* @returns - CSS styles.
*/ const getStyleComputedProperty = (node)=>{
var _node_ownerDocument;
if (node.nodeType !== 1) {
return {};
}
const window = (_node_ownerDocument = node.ownerDocument) === null || _node_ownerDocument === void 0 ? void 0 : _node_ownerDocument.defaultView;
return window.getComputedStyle(node, null);
};
const getScrollParent = (node)=>{
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
const parentNode = node && getParentNode(node);
// eslint-disable-next-line
if (!parentNode) return document.body;
switch(parentNode.nodeName){
case 'HTML':
case 'BODY':
return parentNode.ownerDocument.body;
case '#document':
return parentNode.body;
}
// If any of the overflow props is defined for the node then we return it as the parent
const { overflow, overflowX, overflowY } = getStyleComputedProperty(parentNode);
if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
return parentNode;
}
return getScrollParent(parentNode);
};
const hasScrollParent = (node)=>{
var _scrollParentElement_ownerDocument;
const scrollParentElement = getScrollParent(node);
return scrollParentElement ? scrollParentElement !== ((_scrollParentElement_ownerDocument = scrollParentElement.ownerDocument) === null || _scrollParentElement_ownerDocument === void 0 ? void 0 : _scrollParentElement_ownerDocument.body) : false;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/getScrollParent.ts"],"sourcesContent":["/**\n * Returns the parent node or the host of the node argument.\n * @param node - DOM node.\n * @returns - parent DOM node.\n */\nexport const getParentNode = (node: HTMLElement): HTMLElement => {\n if (node.nodeName === 'HTML') {\n return node;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return node.parentNode || (node as any).host;\n};\n\n/**\n * Returns CSS styles of the given node.\n * @param node - DOM node.\n * @returns - CSS styles.\n */\nconst getStyleComputedProperty = (node: HTMLElement): Partial<CSSStyleDeclaration> => {\n if (node.nodeType !== 1) {\n return {};\n }\n\n const window = node.ownerDocument?.defaultView;\n return window!.getComputedStyle(node, null);\n};\n\n/**\n * Returns the first scrollable parent of the given element.\n * @param node - DOM node.\n * @returns - the first scrollable parent.\n */\nexport const getScrollParent = (node: Document | HTMLElement | null): HTMLElement => {\n // Return body, `getScroll` will take care to get the correct `scrollTop` from it\n const parentNode = node && getParentNode(node as HTMLElement);\n // eslint-disable-next-line\n if (!parentNode) return document.body;\n\n switch (parentNode.nodeName) {\n case 'HTML':\n case 'BODY':\n return parentNode.ownerDocument!.body;\n case '#document':\n return (parentNode as unknown as Document).body;\n }\n\n // If any of the overflow props is defined for the node then we return it as the parent\n const { overflow, overflowX, overflowY } = getStyleComputedProperty(parentNode);\n if (/(auto|scroll|overlay)/.test(overflow! + overflowY! + overflowX)) {\n return parentNode;\n }\n\n return getScrollParent(parentNode);\n};\n\nexport const hasScrollParent = (node: Document | HTMLElement | null): boolean => {\n const scrollParentElement: HTMLElement = getScrollParent(node);\n return scrollParentElement ? scrollParentElement !== scrollParentElement.ownerDocument?.body : false;\n};\n"],"names":["getParentNode","getScrollParent","hasScrollParent","node","nodeName","parentNode","host","getStyleComputedProperty","nodeType","window","ownerDocument","defaultView","getComputedStyle","document","body","overflow","overflowX","overflowY","test","scrollParentElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;CAIC;;;;;;;;;;;IACYA,aAAa;eAAbA;;IA2BAC,eAAe;eAAfA;;IAuBAC,eAAe;eAAfA;;;AAlDN,MAAMF,gBAAgB,CAACG;IAC5B,IAAIA,KAAKC,QAAQ,KAAK,QAAQ;QAC5B,OAAOD;IACT;IACA,8DAA8D;IAC9D,OAAOA,KAAKE,UAAU,IAAI,AAACF,KAAaG,IAAI;AAC9C;AAEA;;;;CAIC,GACD,MAAMC,2BAA2B,CAACJ;QAKjBA;IAJf,IAAIA,KAAKK,QAAQ,KAAK,GAAG;QACvB,OAAO,CAAC;IACV;IAEA,MAAMC,UAASN,sBAAAA,KAAKO,aAAa,cAAlBP,0CAAAA,oBAAoBQ,WAAW;IAC9C,OAAOF,OAAQG,gBAAgB,CAACT,MAAM;AACxC;AAOO,MAAMF,kBAAkB,CAACE;IAC9B,iFAAiF;IACjF,MAAME,aAAaF,QAAQH,cAAcG;IACzC,2BAA2B;IAC3B,IAAI,CAACE,YAAY,OAAOQ,SAASC,IAAI;IAErC,OAAQT,WAAWD,QAAQ;QACzB,KAAK;QACL,KAAK;YACH,OAAOC,WAAWK,aAAa,CAAEI,IAAI;QACvC,KAAK;YACH,OAAO,AAACT,WAAmCS,IAAI;IACnD;IAEA,uFAAuF;IACvF,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGV,yBAAyBF;IACpE,IAAI,wBAAwBa,IAAI,CAACH,WAAYE,YAAaD,YAAY;QACpE,OAAOX;IACT;IAEA,OAAOJ,gBAAgBI;AACzB;AAEO,MAAMH,kBAAkB,CAACC;QAEuBgB;IADrD,MAAMA,sBAAmClB,gBAAgBE;IACzD,OAAOgB,sBAAsBA,0BAAwBA,qCAAAA,oBAAoBT,aAAa,cAAjCS,yDAAAA,mCAAmCL,IAAI,IAAG;AACjG"}
@@ -0,0 +1,31 @@
//
// Dev utils to detect if nodes have "autoFocus" props.
//
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "hasAutofocusFilter", {
enumerable: true,
get: function() {
return hasAutofocusFilter;
}
});
const _getReactFiberFromNode = require("./getReactFiberFromNode");
/**
* Detects if a passed HTML node has "autoFocus" prop on a React's fiber. Is needed as React handles autofocus behavior
* in React DOM and will not pass "autoFocus" to an actual HTML.
*
* @param node
*/ function hasAutofocusProp(node) {
// https://github.com/facebook/react/blob/848bb2426e44606e0a55dfe44c7b3ece33772485/packages/react-dom/src/client/ReactDOMHostConfig.js#L157-L166
const isAutoFocusableElement = node.nodeName === 'BUTTON' || node.nodeName === 'INPUT' || node.nodeName === 'SELECT' || node.nodeName === 'TEXTAREA';
if (isAutoFocusableElement) {
var _getReactFiberFromNode1;
return !!((_getReactFiberFromNode1 = (0, _getReactFiberFromNode.getReactFiberFromNode)(node)) === null || _getReactFiberFromNode1 === void 0 ? void 0 : _getReactFiberFromNode1.pendingProps.autoFocus);
}
return false;
}
function hasAutofocusFilter(node) {
return hasAutofocusProp(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/hasAutoFocusFilter.ts"],"sourcesContent":["//\n// Dev utils to detect if nodes have \"autoFocus\" props.\n//\n\nimport { getReactFiberFromNode } from './getReactFiberFromNode';\n\n/**\n * Detects if a passed HTML node has \"autoFocus\" prop on a React's fiber. Is needed as React handles autofocus behavior\n * in React DOM and will not pass \"autoFocus\" to an actual HTML.\n *\n * @param node\n */\nfunction hasAutofocusProp(node: Node): boolean {\n // https://github.com/facebook/react/blob/848bb2426e44606e0a55dfe44c7b3ece33772485/packages/react-dom/src/client/ReactDOMHostConfig.js#L157-L166\n const isAutoFocusableElement =\n node.nodeName === 'BUTTON' ||\n node.nodeName === 'INPUT' ||\n node.nodeName === 'SELECT' ||\n node.nodeName === 'TEXTAREA';\n\n if (isAutoFocusableElement) {\n return !!getReactFiberFromNode(node)?.pendingProps.autoFocus;\n }\n\n return false;\n}\n\nexport function hasAutofocusFilter(node: Node) {\n return hasAutofocusProp(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n}\n"],"names":["hasAutofocusFilter","hasAutofocusProp","node","isAutoFocusableElement","nodeName","getReactFiberFromNode","pendingProps","autoFocus","NodeFilter","FILTER_ACCEPT","FILTER_SKIP"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,EAAE;AACF,uDAAuD;AACvD,EAAE;;;;;+BAyBcA;;;eAAAA;;;uCAvBsB;AAEtC;;;;;CAKC,GACD,SAASC,iBAAiBC,IAAU;IAClC,gJAAgJ;IAChJ,MAAMC,yBACJD,KAAKE,QAAQ,KAAK,YAClBF,KAAKE,QAAQ,KAAK,WAClBF,KAAKE,QAAQ,KAAK,YAClBF,KAAKE,QAAQ,KAAK;IAEpB,IAAID,wBAAwB;YACjBE;QAAT,OAAO,CAAC,GAACA,0BAAAA,IAAAA,4CAAqB,EAACH,mBAAtBG,8CAAAA,wBAA6BC,YAAY,CAACC,SAAS;IAC9D;IAEA,OAAO;AACT;AAEO,SAASP,mBAAmBE,IAAU;IAC3C,OAAOD,iBAAiBC,QAAQM,WAAWC,aAAa,GAAGD,WAAWE,WAAW;AACnF"}
+82
View File
@@ -0,0 +1,82 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
debounce: function() {
return _debounce.debounce;
},
fromFloatingUIPlacement: function() {
return _fromFloatingUIPlacement.fromFloatingUIPlacement;
},
getBoundary: function() {
return _getBoundary.getBoundary;
},
getParentNode: function() {
return _getScrollParent.getParentNode;
},
getReactFiberFromNode: function() {
return _getReactFiberFromNode.getReactFiberFromNode;
},
getScrollParent: function() {
return _getScrollParent.getScrollParent;
},
hasAutofocusFilter: function() {
return _hasAutoFocusFilter.hasAutofocusFilter;
},
hasScrollParent: function() {
return _getScrollParent.hasScrollParent;
},
mergeArrowOffset: function() {
return _mergeArrowOffset.mergeArrowOffset;
},
normalizeAutoSize: function() {
return _normalizeAutoSize.normalizeAutoSize;
},
parseFloatingUIPlacement: function() {
return _parseFloatingUIPlacement.parseFloatingUIPlacement;
},
resolvePositioningShorthand: function() {
return _resolvePositioningShorthand.resolvePositioningShorthand;
},
toFloatingUIPadding: function() {
return _toFloatingUIPadding.toFloatingUIPadding;
},
toFloatingUIPlacement: function() {
return _toFloatingUIPlacement.toFloatingUIPlacement;
},
toggleScrollListener: function() {
return _toggleScrollListener.toggleScrollListener;
},
useCallbackRef: function() {
return _useCallbackRef.useCallbackRef;
},
writeArrowUpdates: function() {
return _writeArrowUpdates.writeArrowUpdates;
},
writeContainerUpdates: function() {
return _writeContainerupdates.writeContainerUpdates;
}
});
const _parseFloatingUIPlacement = require("./parseFloatingUIPlacement");
const _getBoundary = require("./getBoundary");
const _getReactFiberFromNode = require("./getReactFiberFromNode");
const _getScrollParent = require("./getScrollParent");
const _mergeArrowOffset = require("./mergeArrowOffset");
const _toFloatingUIPadding = require("./toFloatingUIPadding");
const _toFloatingUIPlacement = require("./toFloatingUIPlacement");
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement");
const _resolvePositioningShorthand = require("./resolvePositioningShorthand");
const _useCallbackRef = require("./useCallbackRef");
const _debounce = require("./debounce");
const _toggleScrollListener = require("./toggleScrollListener");
const _hasAutoFocusFilter = require("./hasAutoFocusFilter");
const _writeArrowUpdates = require("./writeArrowUpdates");
const _writeContainerupdates = require("./writeContainerupdates");
const _normalizeAutoSize = require("./normalizeAutoSize");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { parseFloatingUIPlacement } from './parseFloatingUIPlacement';\nexport { getBoundary } from './getBoundary';\nexport type { Fiber, HookType } from './getReactFiberFromNode';\nexport { getReactFiberFromNode } from './getReactFiberFromNode';\nexport { getParentNode, getScrollParent, hasScrollParent } from './getScrollParent';\nexport { mergeArrowOffset } from './mergeArrowOffset';\nexport { toFloatingUIPadding } from './toFloatingUIPadding';\nexport { toFloatingUIPlacement } from './toFloatingUIPlacement';\nexport { fromFloatingUIPlacement } from './fromFloatingUIPlacement';\nexport { resolvePositioningShorthand } from './resolvePositioningShorthand';\nexport { useCallbackRef } from './useCallbackRef';\nexport { debounce } from './debounce';\nexport { toggleScrollListener } from './toggleScrollListener';\nexport { hasAutofocusFilter } from './hasAutoFocusFilter';\nexport { writeArrowUpdates } from './writeArrowUpdates';\nexport { writeContainerUpdates } from './writeContainerupdates';\nexport { normalizeAutoSize } from './normalizeAutoSize';\n"],"names":["debounce","fromFloatingUIPlacement","getBoundary","getParentNode","getReactFiberFromNode","getScrollParent","hasAutofocusFilter","hasScrollParent","mergeArrowOffset","normalizeAutoSize","parseFloatingUIPlacement","resolvePositioningShorthand","toFloatingUIPadding","toFloatingUIPlacement","toggleScrollListener","useCallbackRef","writeArrowUpdates","writeContainerUpdates"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWSA,QAAQ;eAARA,kBAAQ;;IAHRC,uBAAuB;eAAvBA,gDAAuB;;IAPvBC,WAAW;eAAXA,wBAAW;;IAGXC,aAAa;eAAbA,8BAAa;;IADbC,qBAAqB;eAArBA,4CAAqB;;IACNC,eAAe;eAAfA,gCAAe;;IAS9BC,kBAAkB;eAAlBA,sCAAkB;;IATcC,eAAe;eAAfA,gCAAe;;IAC/CC,gBAAgB;eAAhBA,kCAAgB;;IAWhBC,iBAAiB;eAAjBA,oCAAiB;;IAhBjBC,wBAAwB;eAAxBA,kDAAwB;;IASxBC,2BAA2B;eAA3BA,wDAA2B;;IAH3BC,mBAAmB;eAAnBA,wCAAmB;;IACnBC,qBAAqB;eAArBA,4CAAqB;;IAKrBC,oBAAoB;eAApBA,0CAAoB;;IAFpBC,cAAc;eAAdA,8BAAc;;IAIdC,iBAAiB;eAAjBA,oCAAiB;;IACjBC,qBAAqB;eAArBA,4CAAqB;;;0CAfW;6BACb;uCAEU;iCAC0B;kCAC/B;qCACG;uCACE;yCACE;6CACI;gCACb;0BACN;sCACY;oCACF;mCACD;uCACI;mCACJ"}
@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "listScrollParents", {
enumerable: true,
get: function() {
return listScrollParents;
}
});
const _getScrollParent = require("./getScrollParent");
function listScrollParents(node) {
const scrollParents = [];
let cur = node;
while(cur){
const scrollParent = (0, _getScrollParent.getScrollParent)(cur);
if (node.ownerDocument.body === scrollParent) {
scrollParents.push(scrollParent);
break;
}
if (scrollParent.nodeName === 'BODY' && scrollParent !== node.ownerDocument.body) {
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.error('@fluentui/react-positioning: You are comparing two different documents! This is an unexpected error, please report this as a bug to the Fluent UI team ');
}
break;
}
scrollParents.push(scrollParent);
cur = scrollParent;
}
return scrollParents;
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/listScrollParents.ts"],"sourcesContent":["import { getScrollParent } from './getScrollParent';\n\nexport function listScrollParents(node: HTMLElement): HTMLElement[] {\n const scrollParents: HTMLElement[] = [];\n\n let cur: HTMLElement | null = node;\n while (cur) {\n const scrollParent = getScrollParent(cur);\n\n if (node.ownerDocument.body === scrollParent) {\n scrollParents.push(scrollParent);\n break;\n }\n\n if (scrollParent.nodeName === 'BODY' && scrollParent !== node.ownerDocument.body) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error(\n '@fluentui/react-positioning: You are comparing two different documents! This is an unexpected error, please report this as a bug to the Fluent UI team ',\n );\n }\n break;\n }\n\n scrollParents.push(scrollParent);\n cur = scrollParent;\n }\n\n return scrollParents;\n}\n"],"names":["listScrollParents","node","scrollParents","cur","scrollParent","getScrollParent","ownerDocument","body","push","nodeName","process","env","NODE_ENV","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;iCAFgB;AAEzB,SAASA,kBAAkBC,IAAiB;IACjD,MAAMC,gBAA+B,EAAE;IAEvC,IAAIC,MAA0BF;IAC9B,MAAOE,IAAK;QACV,MAAMC,eAAeC,IAAAA,gCAAe,EAACF;QAErC,IAAIF,KAAKK,aAAa,CAACC,IAAI,KAAKH,cAAc;YAC5CF,cAAcM,IAAI,CAACJ;YACnB;QACF;QAEA,IAAIA,aAAaK,QAAQ,KAAK,UAAUL,iBAAiBH,KAAKK,aAAa,CAACC,IAAI,EAAE;YAChF,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CACX;YAEJ;YACA;QACF;QAEAZ,cAAcM,IAAI,CAACJ;QACnBD,MAAMC;IACR;IAEA,OAAOF;AACT"}
@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "mergeArrowOffset", {
enumerable: true,
get: function() {
return mergeArrowOffset;
}
});
function mergeArrowOffset(userOffset, arrowHeight) {
if (typeof userOffset === 'number') {
return addArrowOffset(userOffset, arrowHeight);
}
if (typeof userOffset === 'object' && userOffset !== null) {
return addArrowOffset(userOffset, arrowHeight);
}
if (typeof userOffset === 'function') {
return (offsetParams)=>{
const offset = userOffset(offsetParams);
return addArrowOffset(offset, arrowHeight);
};
}
return {
mainAxis: arrowHeight
};
}
const addArrowOffset = (offset, arrowHeight)=>{
if (typeof offset === 'number') {
return {
mainAxis: offset + arrowHeight
};
}
var _offset_mainAxis;
return {
...offset,
mainAxis: ((_offset_mainAxis = offset.mainAxis) !== null && _offset_mainAxis !== void 0 ? _offset_mainAxis : 0) + arrowHeight
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/mergeArrowOffset.ts"],"sourcesContent":["import type { Offset, OffsetObject } from '../types';\n\n/**\n * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the\n * height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset\n *\n * @internal\n * @param userOffset - The offset provided by the user\n * @param arrowHeight - The height of the arrow in px\n * @returns User offset augmented with arrow height\n */\nexport function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset {\n if (typeof userOffset === 'number') {\n return addArrowOffset(userOffset, arrowHeight);\n }\n\n if (typeof userOffset === 'object' && userOffset !== null) {\n return addArrowOffset(userOffset, arrowHeight);\n }\n\n if (typeof userOffset === 'function') {\n return offsetParams => {\n const offset = userOffset(offsetParams);\n return addArrowOffset(offset, arrowHeight);\n };\n }\n\n return { mainAxis: arrowHeight };\n}\n\nconst addArrowOffset = (offset: OffsetObject | number, arrowHeight: number): OffsetObject => {\n if (typeof offset === 'number') {\n return { mainAxis: offset + arrowHeight };\n }\n\n return { ...offset, mainAxis: (offset.mainAxis ?? 0) + arrowHeight };\n};\n"],"names":["mergeArrowOffset","userOffset","arrowHeight","addArrowOffset","offsetParams","offset","mainAxis"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWgBA;;;eAAAA;;;AAAT,SAASA,iBAAiBC,UAAqC,EAAEC,WAAmB;IACzF,IAAI,OAAOD,eAAe,UAAU;QAClC,OAAOE,eAAeF,YAAYC;IACpC;IAEA,IAAI,OAAOD,eAAe,YAAYA,eAAe,MAAM;QACzD,OAAOE,eAAeF,YAAYC;IACpC;IAEA,IAAI,OAAOD,eAAe,YAAY;QACpC,OAAOG,CAAAA;YACL,MAAMC,SAASJ,WAAWG;YAC1B,OAAOD,eAAeE,QAAQH;QAChC;IACF;IAEA,OAAO;QAAEI,UAAUJ;IAAY;AACjC;AAEA,MAAMC,iBAAiB,CAACE,QAA+BH;IACrD,IAAI,OAAOG,WAAW,UAAU;QAC9B,OAAO;YAAEC,UAAUD,SAASH;QAAY;IAC1C;QAE+BG;IAA/B,OAAO;QAAE,GAAGA,MAAM;QAAEC,UAAU,AAACD,CAAAA,CAAAA,mBAAAA,OAAOC,QAAQ,cAAfD,8BAAAA,mBAAmB,CAAA,IAAKH;IAAY;AACrE"}
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "normalizeAutoSize", {
enumerable: true,
get: function() {
return normalizeAutoSize;
}
});
const normalizeAutoSize = (autoSize)=>{
switch(autoSize){
case 'always':
case true:
return {
applyMaxWidth: true,
applyMaxHeight: true
};
case 'width-always':
case 'width':
return {
applyMaxWidth: true,
applyMaxHeight: false
};
case 'height-always':
case 'height':
return {
applyMaxWidth: false,
applyMaxHeight: true
};
default:
return false;
}
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/normalizeAutoSize.ts"],"sourcesContent":["import type { NormalizedAutoSize, PositioningOptions } from '../types';\n\n/**\n * AutoSizes contains many options from historic implementation.\n * Now options 'always'/'height-always'/'width-always' are obsolete.\n * This function maps them to true/'height'/'width'\n */\nexport const normalizeAutoSize = (autoSize?: PositioningOptions['autoSize']): NormalizedAutoSize | false => {\n switch (autoSize) {\n case 'always':\n case true:\n return {\n applyMaxWidth: true,\n applyMaxHeight: true,\n };\n\n case 'width-always':\n case 'width':\n return {\n applyMaxWidth: true,\n applyMaxHeight: false,\n };\n\n case 'height-always':\n case 'height':\n return {\n applyMaxWidth: false,\n applyMaxHeight: true,\n };\n\n default:\n return false;\n }\n};\n"],"names":["normalizeAutoSize","autoSize","applyMaxWidth","applyMaxHeight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;AAAN,MAAMA,oBAAoB,CAACC;IAChC,OAAQA;QACN,KAAK;QACL,KAAK;YACH,OAAO;gBACLC,eAAe;gBACfC,gBAAgB;YAClB;QAEF,KAAK;QACL,KAAK;YACH,OAAO;gBACLD,eAAe;gBACfC,gBAAgB;YAClB;QAEF,KAAK;QACL,KAAK;YACH,OAAO;gBACLD,eAAe;gBACfC,gBAAgB;YAClB;QAEF;YACE,OAAO;IACX;AACF"}
@@ -0,0 +1,17 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "parseFloatingUIPlacement", {
enumerable: true,
get: function() {
return parseFloatingUIPlacement;
}
});
function parseFloatingUIPlacement(placement) {
const tokens = placement.split('-');
return {
side: tokens[0],
alignment: tokens[1]
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/parseFloatingUIPlacement.ts"],"sourcesContent":["import type { Side, Placement, Alignment } from '@floating-ui/dom';\n\n/**\n * Parses Floating UI placement and returns the different components\n * @param placement - the floating ui placement (i.e. bottom-start)\n *\n * @returns side and alignment components of the placement\n */\nexport function parseFloatingUIPlacement(placement: Placement): { side: Side; alignment: Alignment } {\n const tokens = placement.split('-');\n return {\n side: tokens[0] as Side,\n alignment: tokens[1] as Alignment,\n };\n}\n"],"names":["parseFloatingUIPlacement","placement","tokens","split","side","alignment"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BAQgBA;;;eAAAA;;;AAAT,SAASA,yBAAyBC,SAAoB;IAC3D,MAAMC,SAASD,UAAUE,KAAK,CAAC;IAC/B,OAAO;QACLC,MAAMF,MAAM,CAAC,EAAE;QACfG,WAAWH,MAAM,CAAC,EAAE;IACtB;AACF"}
@@ -0,0 +1,70 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "resolvePositioningShorthand", {
enumerable: true,
get: function() {
return resolvePositioningShorthand;
}
});
// Look up table for shorthand to avoid parsing strings
const shorthandLookup = {
above: {
position: 'above',
align: 'center'
},
'above-start': {
position: 'above',
align: 'start'
},
'above-end': {
position: 'above',
align: 'end'
},
below: {
position: 'below',
align: 'center'
},
'below-start': {
position: 'below',
align: 'start'
},
'below-end': {
position: 'below',
align: 'end'
},
before: {
position: 'before',
align: 'center'
},
'before-top': {
position: 'before',
align: 'top'
},
'before-bottom': {
position: 'before',
align: 'bottom'
},
after: {
position: 'after',
align: 'center'
},
'after-top': {
position: 'after',
align: 'top'
},
'after-bottom': {
position: 'after',
align: 'bottom'
}
};
function resolvePositioningShorthand(shorthand) {
if (shorthand === undefined || shorthand === null) {
return {};
}
if (typeof shorthand === 'string') {
return shorthandLookup[shorthand];
}
return shorthand;
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/resolvePositioningShorthand.ts"],"sourcesContent":["import type { PositioningShorthand, PositioningShorthandValue, PositioningProps } from '../types';\n\n// Look up table for shorthand to avoid parsing strings\nconst shorthandLookup: Record<PositioningShorthandValue, Pick<PositioningProps, 'position' | 'align'>> = {\n above: { position: 'above', align: 'center' },\n 'above-start': { position: 'above', align: 'start' },\n 'above-end': { position: 'above', align: 'end' },\n below: { position: 'below', align: 'center' },\n 'below-start': { position: 'below', align: 'start' },\n 'below-end': { position: 'below', align: 'end' },\n before: { position: 'before', align: 'center' },\n 'before-top': { position: 'before', align: 'top' },\n 'before-bottom': { position: 'before', align: 'bottom' },\n after: { position: 'after', align: 'center' },\n 'after-top': { position: 'after', align: 'top' },\n 'after-bottom': { position: 'after', align: 'bottom' },\n};\n\nexport function resolvePositioningShorthand(\n shorthand: PositioningShorthand | undefined | null,\n): Readonly<PositioningProps> {\n if (shorthand === undefined || shorthand === null) {\n return {};\n }\n\n if (typeof shorthand === 'string') {\n return shorthandLookup[shorthand];\n }\n\n return shorthand as Readonly<PositioningProps>;\n}\n"],"names":["resolvePositioningShorthand","shorthandLookup","above","position","align","below","before","after","shorthand","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBgBA;;;eAAAA;;;AAhBhB,uDAAuD;AACvD,MAAMC,kBAAmG;IACvGC,OAAO;QAAEC,UAAU;QAASC,OAAO;IAAS;IAC5C,eAAe;QAAED,UAAU;QAASC,OAAO;IAAQ;IACnD,aAAa;QAAED,UAAU;QAASC,OAAO;IAAM;IAC/CC,OAAO;QAAEF,UAAU;QAASC,OAAO;IAAS;IAC5C,eAAe;QAAED,UAAU;QAASC,OAAO;IAAQ;IACnD,aAAa;QAAED,UAAU;QAASC,OAAO;IAAM;IAC/CE,QAAQ;QAAEH,UAAU;QAAUC,OAAO;IAAS;IAC9C,cAAc;QAAED,UAAU;QAAUC,OAAO;IAAM;IACjD,iBAAiB;QAAED,UAAU;QAAUC,OAAO;IAAS;IACvDG,OAAO;QAAEJ,UAAU;QAASC,OAAO;IAAS;IAC5C,aAAa;QAAED,UAAU;QAASC,OAAO;IAAM;IAC/C,gBAAgB;QAAED,UAAU;QAASC,OAAO;IAAS;AACvD;AAEO,SAASJ,4BACdQ,SAAkD;IAElD,IAAIA,cAAcC,aAAaD,cAAc,MAAM;QACjD,OAAO,CAAC;IACV;IAEA,IAAI,OAAOA,cAAc,UAAU;QACjC,OAAOP,eAAe,CAACO,UAAU;IACnC;IAEA,OAAOA;AACT"}
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "toFloatingUIPadding", {
enumerable: true,
get: function() {
return toFloatingUIPadding;
}
});
function toFloatingUIPadding(padding, isRtl) {
if (typeof padding === 'number') {
return padding;
}
const { start, end, ...verticalPadding } = padding;
const paddingObject = verticalPadding;
const left = isRtl ? 'end' : 'start';
const right = isRtl ? 'start' : 'end';
// assign properties explicitly since undefined values are actually handled by floating UI
// TODO create floating UI issue
if (padding[left]) {
paddingObject.left = padding[left];
}
if (padding[right]) {
paddingObject.right = padding[right];
}
return paddingObject;
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/toFloatingUIPadding.ts"],"sourcesContent":["import type { SideObject } from '@floating-ui/dom';\nimport { PositioningOptions } from '../types';\n\nexport function toFloatingUIPadding(\n padding: NonNullable<PositioningOptions['overflowBoundaryPadding']>,\n isRtl: boolean,\n): number | Partial<SideObject> {\n if (typeof padding === 'number') {\n return padding;\n }\n\n const { start, end, ...verticalPadding } = padding;\n\n const paddingObject: Partial<SideObject> = verticalPadding;\n\n const left = isRtl ? 'end' : 'start';\n const right = isRtl ? 'start' : 'end';\n\n // assign properties explicitly since undefined values are actually handled by floating UI\n // TODO create floating UI issue\n if (padding[left]) {\n paddingObject.left = padding[left];\n }\n\n if (padding[right]) {\n paddingObject.right = padding[right];\n }\n\n return paddingObject;\n}\n"],"names":["toFloatingUIPadding","padding","isRtl","start","end","verticalPadding","paddingObject","left","right"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;AAAT,SAASA,oBACdC,OAAmE,EACnEC,KAAc;IAEd,IAAI,OAAOD,YAAY,UAAU;QAC/B,OAAOA;IACT;IAEA,MAAM,EAAEE,KAAK,EAAEC,GAAG,EAAE,GAAGC,iBAAiB,GAAGJ;IAE3C,MAAMK,gBAAqCD;IAE3C,MAAME,OAAOL,QAAQ,QAAQ;IAC7B,MAAMM,QAAQN,QAAQ,UAAU;IAEhC,0FAA0F;IAC1F,gCAAgC;IAChC,IAAID,OAAO,CAACM,KAAK,EAAE;QACjBD,cAAcC,IAAI,GAAGN,OAAO,CAACM,KAAK;IACpC;IAEA,IAAIN,OAAO,CAACO,MAAM,EAAE;QAClBF,cAAcE,KAAK,GAAGP,OAAO,CAACO,MAAM;IACtC;IAEA,OAAOF;AACT"}
@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "toFloatingUIPlacement", {
enumerable: true,
get: function() {
return toFloatingUIPlacement;
}
});
const getPositionMap = (rtl)=>({
above: 'top',
below: 'bottom',
before: rtl ? 'right' : 'left',
after: rtl ? 'left' : 'right'
});
// Floating UI automatically flips alignment
// https://github.com/floating-ui/floating-ui/issues/1563
const getAlignmentMap = ()=>({
start: 'start',
end: 'end',
top: 'start',
bottom: 'end',
center: undefined
});
const shouldAlignToCenter = (p, a)=>{
const positionedVertically = p === 'above' || p === 'below';
const alignedVertically = a === 'top' || a === 'bottom';
return positionedVertically && alignedVertically || !positionedVertically && !alignedVertically;
};
const toFloatingUIPlacement = (align, position, rtl)=>{
const alignment = shouldAlignToCenter(position, align) ? 'center' : align;
const computedPosition = position && getPositionMap(rtl)[position];
const computedAlignment = alignment && getAlignmentMap()[alignment];
if (computedPosition && computedAlignment) {
return `${computedPosition}-${computedAlignment}`;
}
return computedPosition;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/toFloatingUIPlacement.ts"],"sourcesContent":["import type { Placement, Side, Alignment as FloatingUIAlignment } from '@floating-ui/dom';\nimport type { Alignment, Position } from '../types';\n\ntype PlacementPosition = Side;\ntype PlacementAlign = FloatingUIAlignment;\n\nconst getPositionMap = (rtl?: boolean): Record<Position, PlacementPosition> => ({\n above: 'top',\n below: 'bottom',\n before: rtl ? 'right' : 'left',\n after: rtl ? 'left' : 'right',\n});\n\n// Floating UI automatically flips alignment\n// https://github.com/floating-ui/floating-ui/issues/1563\nconst getAlignmentMap = (): Record<Alignment, PlacementAlign | undefined> => ({\n start: 'start',\n end: 'end',\n top: 'start',\n bottom: 'end',\n center: undefined,\n});\n\nconst shouldAlignToCenter = (p?: Position, a?: Alignment): boolean => {\n const positionedVertically = p === 'above' || p === 'below';\n const alignedVertically = a === 'top' || a === 'bottom';\n\n return (positionedVertically && alignedVertically) || (!positionedVertically && !alignedVertically);\n};\n\n/**\n * Maps internal positioning values to Floating UI placement\n * @see positioningHelper.test.ts for expected placement values\n */\nexport const toFloatingUIPlacement = (align?: Alignment, position?: Position, rtl?: boolean): Placement | undefined => {\n const alignment = shouldAlignToCenter(position, align) ? 'center' : align;\n\n const computedPosition = position && getPositionMap(rtl)[position];\n const computedAlignment = alignment && getAlignmentMap()[alignment];\n\n if (computedPosition && computedAlignment) {\n return `${computedPosition}-${computedAlignment}` as Placement;\n }\n\n return computedPosition;\n};\n"],"names":["toFloatingUIPlacement","getPositionMap","rtl","above","below","before","after","getAlignmentMap","start","end","top","bottom","center","undefined","shouldAlignToCenter","p","a","positionedVertically","alignedVertically","align","position","alignment","computedPosition","computedAlignment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkCaA;;;eAAAA;;;AA5Bb,MAAMC,iBAAiB,CAACC,MAAwD,CAAA;QAC9EC,OAAO;QACPC,OAAO;QACPC,QAAQH,MAAM,UAAU;QACxBI,OAAOJ,MAAM,SAAS;IACxB,CAAA;AAEA,4CAA4C;AAC5C,yDAAyD;AACzD,MAAMK,kBAAkB,IAAsD,CAAA;QAC5EC,OAAO;QACPC,KAAK;QACLC,KAAK;QACLC,QAAQ;QACRC,QAAQC;IACV,CAAA;AAEA,MAAMC,sBAAsB,CAACC,GAAcC;IACzC,MAAMC,uBAAuBF,MAAM,WAAWA,MAAM;IACpD,MAAMG,oBAAoBF,MAAM,SAASA,MAAM;IAE/C,OAAO,AAACC,wBAAwBC,qBAAuB,CAACD,wBAAwB,CAACC;AACnF;AAMO,MAAMlB,wBAAwB,CAACmB,OAAmBC,UAAqBlB;IAC5E,MAAMmB,YAAYP,oBAAoBM,UAAUD,SAAS,WAAWA;IAEpE,MAAMG,mBAAmBF,YAAYnB,eAAeC,IAAI,CAACkB,SAAS;IAClE,MAAMG,oBAAoBF,aAAad,iBAAiB,CAACc,UAAU;IAEnE,IAAIC,oBAAoBC,mBAAmB;QACzC,OAAO,CAAC,EAAED,iBAAiB,CAAC,EAAEC,kBAAkB,CAAC;IACnD;IAEA,OAAOD;AACT"}
@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "toggleScrollListener", {
enumerable: true,
get: function() {
return toggleScrollListener;
}
});
const _reactutilities = require("@fluentui/react-utilities");
const _getScrollParent = require("./getScrollParent");
function toggleScrollListener(next, prev, handler) {
if (next === prev) {
return;
}
if ((0, _reactutilities.isHTMLElement)(prev)) {
const prevScrollParent = (0, _getScrollParent.getScrollParent)(prev);
prevScrollParent.removeEventListener('scroll', handler);
}
if ((0, _reactutilities.isHTMLElement)(next)) {
const scrollParent = (0, _getScrollParent.getScrollParent)(next);
scrollParent.addEventListener('scroll', handler);
}
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/toggleScrollListener.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport type { PositioningVirtualElement } from '../types';\nimport { getScrollParent } from './getScrollParent';\n\n/**\n * Toggles event listeners for scroll parent.\n * Cleans up the event listeners for the previous element and adds them for the new scroll parent.\n * @param next Next element\n * @param prev Previous element\n */\nexport function toggleScrollListener(\n next: HTMLElement | PositioningVirtualElement | null,\n prev: HTMLElement | PositioningVirtualElement | null,\n handler: EventListener,\n) {\n if (next === prev) {\n return;\n }\n\n if (isHTMLElement(prev)) {\n const prevScrollParent = getScrollParent(prev);\n prevScrollParent.removeEventListener('scroll', handler);\n }\n if (isHTMLElement(next)) {\n const scrollParent = getScrollParent(next);\n scrollParent.addEventListener('scroll', handler);\n }\n}\n"],"names":["toggleScrollListener","next","prev","handler","isHTMLElement","prevScrollParent","getScrollParent","removeEventListener","scrollParent","addEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUgBA;;;eAAAA;;;gCAVc;iCAEE;AAQzB,SAASA,qBACdC,IAAoD,EACpDC,IAAoD,EACpDC,OAAsB;IAEtB,IAAIF,SAASC,MAAM;QACjB;IACF;IAEA,IAAIE,IAAAA,6BAAa,EAACF,OAAO;QACvB,MAAMG,mBAAmBC,IAAAA,gCAAe,EAACJ;QACzCG,iBAAiBE,mBAAmB,CAAC,UAAUJ;IACjD;IACA,IAAIC,IAAAA,6BAAa,EAACH,OAAO;QACvB,MAAMO,eAAeF,IAAAA,gCAAe,EAACL;QACrCO,aAAaC,gBAAgB,CAAC,UAAUN;IAC1C;AACF"}
@@ -0,0 +1,44 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCallbackRef", {
enumerable: true,
get: function() {
return useCallbackRef;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
function useCallbackRef(initialValue, callback, skipInitialResolve) {
const isFirst = _react.useRef(true);
const [ref] = _react.useState(()=>({
// value
value: initialValue,
// last callback
callback,
// "memoized" public interface
facade: {
get current () {
return ref.value;
},
set current (value){
const last = ref.value;
if (last !== value) {
ref.value = value;
if (skipInitialResolve && isFirst.current) {
return;
}
ref.callback(value, last);
}
}
}
}));
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
isFirst.current = false;
}, []);
// update callback
ref.callback = callback;
return ref.facade;
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/useCallbackRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content\n * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via\n * React.useState(), but it will cause re-renders always.\n *\n * https://reactjs.org/docs/hooks-reference.html#useref\n * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref\n *\n * @param initialValue - initial ref value\n * @param callback - a callback to run when value changes\n * @param skipInitialResolve - a flag to skip an initial ref report\n *\n * @example\n * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);\n * ref.current = 1;\n * // prints 0 -> 1\n */\nexport function useCallbackRef<T>(\n initialValue: T | null,\n callback: (newValue: T | null, lastValue: T | null) => void,\n skipInitialResolve?: boolean,\n): React.MutableRefObject<T | null> {\n const isFirst = React.useRef(true);\n const [ref] = React.useState(() => ({\n // value\n value: initialValue,\n // last callback\n callback,\n // \"memoized\" public interface\n facade: {\n get current() {\n return ref.value;\n },\n set current(value) {\n const last = ref.value;\n\n if (last !== value) {\n ref.value = value;\n\n if (skipInitialResolve && isFirst.current) {\n return;\n }\n\n ref.callback(value, last);\n }\n },\n },\n }));\n\n useIsomorphicLayoutEffect(() => {\n isFirst.current = false;\n }, []);\n\n // update callback\n ref.callback = callback;\n\n return ref.facade;\n}\n"],"names":["useCallbackRef","initialValue","callback","skipInitialResolve","isFirst","React","useRef","ref","useState","value","facade","current","last","useIsomorphicLayoutEffect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBgBA;;;eAAAA;;;;iEApBO;gCACmB;AAmBnC,SAASA,eACdC,YAAsB,EACtBC,QAA2D,EAC3DC,kBAA4B;IAE5B,MAAMC,UAAUC,OAAMC,MAAM,CAAC;IAC7B,MAAM,CAACC,IAAI,GAAGF,OAAMG,QAAQ,CAAC,IAAO,CAAA;YAClC,QAAQ;YACRC,OAAOR;YACP,gBAAgB;YAChBC;YACA,8BAA8B;YAC9BQ,QAAQ;gBACN,IAAIC,WAAU;oBACZ,OAAOJ,IAAIE,KAAK;gBAClB;gBACA,IAAIE,SAAQF,MAAO;oBACjB,MAAMG,OAAOL,IAAIE,KAAK;oBAEtB,IAAIG,SAASH,OAAO;wBAClBF,IAAIE,KAAK,GAAGA;wBAEZ,IAAIN,sBAAsBC,QAAQO,OAAO,EAAE;4BACzC;wBACF;wBAEAJ,IAAIL,QAAQ,CAACO,OAAOG;oBACtB;gBACF;YACF;QACF,CAAA;IAEAC,IAAAA,yCAAyB,EAAC;QACxBT,QAAQO,OAAO,GAAG;IACpB,GAAG,EAAE;IAEL,kBAAkB;IAClBJ,IAAIL,QAAQ,GAAGA;IAEf,OAAOK,IAAIG,MAAM;AACnB"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "writeArrowUpdates", {
enumerable: true,
get: function() {
return writeArrowUpdates;
}
});
function writeArrowUpdates(options) {
const { arrow, middlewareData } = options;
if (!middlewareData.arrow || !arrow) {
return;
}
const { x: arrowX, y: arrowY } = middlewareData.arrow;
Object.assign(arrow.style, {
left: arrowX !== null && arrowX !== undefined ? `${arrowX}px` : '',
top: arrowY !== null && arrowY !== undefined ? `${arrowY}px` : ''
});
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/writeArrowUpdates.ts"],"sourcesContent":["import { MiddlewareData } from '@floating-ui/dom';\n\n/**\n * Writes all DOM element updates after position is computed\n */\nexport function writeArrowUpdates(options: { arrow: HTMLElement | null; middlewareData: MiddlewareData }) {\n const { arrow, middlewareData } = options;\n if (!middlewareData.arrow || !arrow) {\n return;\n }\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n Object.assign(arrow.style, {\n left: arrowX !== null && arrowX !== undefined ? `${arrowX}px` : '',\n top: arrowY !== null && arrowY !== undefined ? `${arrowY}px` : '',\n });\n}\n"],"names":["writeArrowUpdates","options","arrow","middlewareData","x","arrowX","y","arrowY","Object","assign","style","left","undefined","top"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;AAAT,SAASA,kBAAkBC,OAAsE;IACtG,MAAM,EAAEC,KAAK,EAAEC,cAAc,EAAE,GAAGF;IAClC,IAAI,CAACE,eAAeD,KAAK,IAAI,CAACA,OAAO;QACnC;IACF;IAEA,MAAM,EAAEE,GAAGC,MAAM,EAAEC,GAAGC,MAAM,EAAE,GAAGJ,eAAeD,KAAK;IAErDM,OAAOC,MAAM,CAACP,MAAMQ,KAAK,EAAE;QACzBC,MAAMN,WAAW,QAAQA,WAAWO,YAAY,CAAC,EAAEP,OAAO,EAAE,CAAC,GAAG;QAChEQ,KAAKN,WAAW,QAAQA,WAAWK,YAAY,CAAC,EAAEL,OAAO,EAAE,CAAC,GAAG;IACjE;AACF"}
@@ -0,0 +1,51 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "writeContainerUpdates", {
enumerable: true,
get: function() {
return writeContainerUpdates;
}
});
const _constants = require("../constants");
function writeContainerUpdates(options) {
var _middlewareData_hide, _middlewareData_hide1, _container_ownerDocument_defaultView;
const { container, placement, middlewareData, strategy, lowPPI, coordinates, useTransform = true } = options;
if (!container) {
return;
}
container.setAttribute(_constants.DATA_POSITIONING_PLACEMENT, placement);
container.removeAttribute(_constants.DATA_POSITIONING_INTERSECTING);
if (middlewareData.intersectionObserver.intersecting) {
container.setAttribute(_constants.DATA_POSITIONING_INTERSECTING, '');
}
container.removeAttribute(_constants.DATA_POSITIONING_ESCAPED);
if ((_middlewareData_hide = middlewareData.hide) === null || _middlewareData_hide === void 0 ? void 0 : _middlewareData_hide.escaped) {
container.setAttribute(_constants.DATA_POSITIONING_ESCAPED, '');
}
container.removeAttribute(_constants.DATA_POSITIONING_HIDDEN);
if ((_middlewareData_hide1 = middlewareData.hide) === null || _middlewareData_hide1 === void 0 ? void 0 : _middlewareData_hide1.referenceHidden) {
container.setAttribute(_constants.DATA_POSITIONING_HIDDEN, '');
}
// Round so that the coordinates land on device pixels.
// This prevents blurriness in cases where the browser doesn't apply pixel snapping, such as when other effects like
// `backdrop-filter: blur()` are applied to the container, and the browser is zoomed in.
// See https://github.com/microsoft/fluentui/issues/26764 for more info.
const devicePixelRatio = ((_container_ownerDocument_defaultView = container.ownerDocument.defaultView) === null || _container_ownerDocument_defaultView === void 0 ? void 0 : _container_ownerDocument_defaultView.devicePixelRatio) || 1;
const x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;
const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;
Object.assign(container.style, {
position: strategy
});
if (useTransform) {
Object.assign(container.style, {
transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`
});
return;
}
Object.assign(container.style, {
left: `${x}px`,
top: `${y}px`
});
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/writeContainerupdates.ts"],"sourcesContent":["import type { Placement, MiddlewareData, Strategy, Coords } from '@floating-ui/dom';\nimport {\n DATA_POSITIONING_ESCAPED,\n DATA_POSITIONING_HIDDEN,\n DATA_POSITIONING_INTERSECTING,\n DATA_POSITIONING_PLACEMENT,\n} from '../constants';\n\n/**\n * Writes all container element position updates after the position is computed\n */\nexport function writeContainerUpdates(options: {\n container: HTMLElement | null;\n placement: Placement;\n middlewareData: MiddlewareData;\n /**\n * Layer acceleration can disable subpixel rendering which causes slightly\n * blurry text on low PPI displays, so we want to use 2D transforms\n * instead\n */\n lowPPI: boolean;\n strategy: Strategy;\n coordinates: Coords;\n useTransform?: boolean;\n}) {\n const { container, placement, middlewareData, strategy, lowPPI, coordinates, useTransform = true } = options;\n if (!container) {\n return;\n }\n container.setAttribute(DATA_POSITIONING_PLACEMENT, placement);\n container.removeAttribute(DATA_POSITIONING_INTERSECTING);\n if (middlewareData.intersectionObserver.intersecting) {\n container.setAttribute(DATA_POSITIONING_INTERSECTING, '');\n }\n\n container.removeAttribute(DATA_POSITIONING_ESCAPED);\n if (middlewareData.hide?.escaped) {\n container.setAttribute(DATA_POSITIONING_ESCAPED, '');\n }\n\n container.removeAttribute(DATA_POSITIONING_HIDDEN);\n if (middlewareData.hide?.referenceHidden) {\n container.setAttribute(DATA_POSITIONING_HIDDEN, '');\n }\n\n // Round so that the coordinates land on device pixels.\n // This prevents blurriness in cases where the browser doesn't apply pixel snapping, such as when other effects like\n // `backdrop-filter: blur()` are applied to the container, and the browser is zoomed in.\n // See https://github.com/microsoft/fluentui/issues/26764 for more info.\n const devicePixelRatio = container.ownerDocument.defaultView?.devicePixelRatio || 1;\n const x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;\n const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;\n\n Object.assign(container.style, {\n position: strategy,\n });\n\n if (useTransform) {\n Object.assign(container.style, {\n transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,\n });\n return;\n }\n\n Object.assign(container.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n}\n"],"names":["writeContainerUpdates","options","middlewareData","container","placement","strategy","lowPPI","coordinates","useTransform","setAttribute","DATA_POSITIONING_PLACEMENT","removeAttribute","DATA_POSITIONING_INTERSECTING","intersectionObserver","intersecting","DATA_POSITIONING_ESCAPED","hide","escaped","DATA_POSITIONING_HIDDEN","referenceHidden","devicePixelRatio","ownerDocument","defaultView","x","Math","round","y","Object","assign","style","position","transform","left","top"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWgBA;;;eAAAA;;;2BALT;AAKA,SAASA,sBAAsBC,OAarC;QAYKC,sBAKAA,uBAQqBC;IAxBzB,MAAM,EAAEA,SAAS,EAAEC,SAAS,EAAEF,cAAc,EAAEG,QAAQ,EAAEC,MAAM,EAAEC,WAAW,EAAEC,eAAe,IAAI,EAAE,GAAGP;IACrG,IAAI,CAACE,WAAW;QACd;IACF;IACAA,UAAUM,YAAY,CAACC,qCAA0B,EAAEN;IACnDD,UAAUQ,eAAe,CAACC,wCAA6B;IACvD,IAAIV,eAAeW,oBAAoB,CAACC,YAAY,EAAE;QACpDX,UAAUM,YAAY,CAACG,wCAA6B,EAAE;IACxD;IAEAT,UAAUQ,eAAe,CAACI,mCAAwB;IAClD,KAAIb,uBAAAA,eAAec,IAAI,cAAnBd,2CAAAA,qBAAqBe,OAAO,EAAE;QAChCd,UAAUM,YAAY,CAACM,mCAAwB,EAAE;IACnD;IAEAZ,UAAUQ,eAAe,CAACO,kCAAuB;IACjD,KAAIhB,wBAAAA,eAAec,IAAI,cAAnBd,4CAAAA,sBAAqBiB,eAAe,EAAE;QACxChB,UAAUM,YAAY,CAACS,kCAAuB,EAAE;IAClD;IAEA,uDAAuD;IACvD,oHAAoH;IACpH,wFAAwF;IACxF,wEAAwE;IACxE,MAAME,mBAAmBjB,EAAAA,uCAAAA,UAAUkB,aAAa,CAACC,WAAW,cAAnCnB,2DAAAA,qCAAqCiB,gBAAgB,KAAI;IAClF,MAAMG,IAAIC,KAAKC,KAAK,CAAClB,YAAYgB,CAAC,GAAGH,oBAAoBA;IACzD,MAAMM,IAAIF,KAAKC,KAAK,CAAClB,YAAYmB,CAAC,GAAGN,oBAAoBA;IAEzDO,OAAOC,MAAM,CAACzB,UAAU0B,KAAK,EAAE;QAC7BC,UAAUzB;IACZ;IAEA,IAAIG,cAAc;QAChBmB,OAAOC,MAAM,CAACzB,UAAU0B,KAAK,EAAE;YAC7BE,WAAWzB,SAAS,CAAC,UAAU,EAAEiB,EAAE,IAAI,EAAEG,EAAE,GAAG,CAAC,GAAG,CAAC,YAAY,EAAEH,EAAE,IAAI,EAAEG,EAAE,MAAM,CAAC;QACpF;QACA;IACF;IAEAC,OAAOC,MAAM,CAACzB,UAAU0B,KAAK,EAAE;QAC7BG,MAAM,CAAC,EAAET,EAAE,EAAE,CAAC;QACdU,KAAK,CAAC,EAAEP,EAAE,EAAE,CAAC;IACf;AACF"}
+5
View File
@@ -0,0 +1,5 @@
export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';
export const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
export const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';
export const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';
export const POSITIONING_END_EVENT = 'fui-positioningend';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\nexport const POSITIONING_END_EVENT = 'fui-positioningend';\n"],"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT","POSITIONING_END_EVENT"],"rangeMappings":";;;;","mappings":"AAAA,OAAO,MAAMA,gCAAgC,8BAA8B;AAC3E,OAAO,MAAMC,2BAA2B,sBAAsB;AAC9D,OAAO,MAAMC,0BAA0B,+BAA+B;AACtE,OAAO,MAAMC,6BAA6B,wBAAwB;AAClE,OAAO,MAAMC,wBAAwB,qBAAqB"}
+81
View File
@@ -0,0 +1,81 @@
import { tokens } from '@fluentui/react-theme';
/**
* @internal
* 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({ arrowHeight: 6 }),
*
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
* mediumArrow: createArrowHeightStyles(4),
* smallArrow: createArrowHeightStyles(2),
* })
* ...
*
* state.arrowWithSize.className = styles.arrowWithSize;
* state.arrowWithoutSize.className = mergeClasses(
* styles.arrowWithoutSize,
* state.smallArrow && styles.smallArrow,
* state.mediumArrow && styles.mediumArrow,
* )
* ```
*/ export function createArrowStyles(options) {
const { arrowHeight, borderWidth = '1px', borderStyle = 'solid', borderColor = tokens.colorTransparentStroke } = options;
return {
boxSizing: 'border-box',
position: 'absolute',
zIndex: -1,
...arrowHeight && createArrowHeightStyles(arrowHeight),
backgroundColor: 'inherit',
backgroundClip: 'content-box',
borderBottomLeftRadius: `${tokens.borderRadiusSmall} /* @noflip */`,
transform: 'rotate(var(--fui-positioning-arrow-angle)) /* @noflip */',
height: 'var(--fui-positioning-arrow-height)',
width: 'var(--fui-positioning-arrow-height)',
'::before': {
content: '""',
display: 'block',
backgroundColor: 'inherit',
margin: `-${borderWidth}`,
width: '100%',
height: '100%',
border: `${borderWidth} ${borderStyle} ${borderColor}`,
borderBottomLeftRadius: `${tokens.borderRadiusSmall} /* @noflip */`,
clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)'
},
// Popper sets data-popper-placement on the root element, which is used to align the arrow
':global([data-popper-placement^="top"])': {
bottom: 'var(--fui-positioning-arrow-offset)',
'--fui-positioning-arrow-angle': '-45deg'
},
':global([data-popper-placement^="right"])': {
left: `var(--fui-positioning-arrow-offset) /* @noflip */`,
'--fui-positioning-arrow-angle': '45deg'
},
':global([data-popper-placement^="bottom"])': {
top: 'var(--fui-positioning-arrow-offset)',
'--fui-positioning-arrow-angle': '135deg'
},
':global([data-popper-placement^="left"])': {
right: `var(--fui-positioning-arrow-offset) /* @noflip */`,
'--fui-positioning-arrow-angle': '225deg'
}
};
}
/**
* @internal
* Creates CSS styles to size the arrow created by createArrowStyles to the given height.
*
* Use this when you need to create classes for several different arrow sizes. If you only need a
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
*/ export function createArrowHeightStyles(arrowHeight) {
// The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
// Multiply the triangle's height by sqrt(2) to get length of its edges.
const edgeLength = 1.414 * arrowHeight;
return {
'--fui-positioning-arrow-height': `${edgeLength}px`,
'--fui-positioning-arrow-offset': `${edgeLength / 2 * -1}px`
};
}
File diff suppressed because one or more lines are too long
+132
View File
@@ -0,0 +1,132 @@
import { computePosition } from '@floating-ui/dom';
import { isHTMLElement } from '@fluentui/react-utilities';
import { debounce, writeArrowUpdates, writeContainerUpdates } from './utils';
import { listScrollParents } from './utils/listScrollParents';
import { POSITIONING_END_EVENT } from './constants';
import { createResizeObserver } from './utils/createResizeObserver';
/**
* @internal
* @returns manager that handles positioning out of the react lifecycle
*/ export function createPositionManager(options) {
let isDestroyed = false;
const { container, target, arrow, strategy, middleware, placement, useTransform = true, disableUpdateOnResize = false } = options;
const targetWindow = container.ownerDocument.defaultView;
if (!target || !container || !targetWindow) {
return {
updatePosition: ()=>undefined,
dispose: ()=>undefined
};
}
// When the dimensions of the target or the container change - trigger a position update
const resizeObserver = disableUpdateOnResize ? null : createResizeObserver(targetWindow, (entries)=>{
// If content rect dimensions to go 0 -> very likely that `display: none` is being used to hide the element
// In this case don't update and let users update imperatively
const shouldUpdateOnResize = entries.every((entry)=>{
return entry.contentRect.width > 0 && entry.contentRect.height > 0;
});
if (shouldUpdateOnResize) {
updatePosition();
}
});
let isFirstUpdate = true;
const scrollParents = new Set();
// When the container is first resolved, set position `fixed` to avoid scroll jumps.
// Without this scroll jumps can occur when the element is rendered initially and receives focus
Object.assign(container.style, {
position: 'fixed',
left: 0,
top: 0,
margin: 0
});
const forceUpdate = ()=>{
// debounced update can still occur afterwards
// early return to avoid memory leaks
if (isDestroyed) {
return;
}
if (isFirstUpdate) {
listScrollParents(container).forEach((scrollParent)=>scrollParents.add(scrollParent));
if (isHTMLElement(target)) {
listScrollParents(target).forEach((scrollParent)=>scrollParents.add(scrollParent));
}
scrollParents.forEach((scrollParent)=>{
scrollParent.addEventListener('scroll', updatePosition, {
passive: true
});
});
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(container);
if (isHTMLElement(target)) {
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(target);
}
isFirstUpdate = false;
}
Object.assign(container.style, {
position: strategy
});
computePosition(target, container, {
placement,
middleware,
strategy
}).then(({ x, y, middlewareData, placement: computedPlacement })=>{
// Promise can still resolve after destruction
// early return to avoid applying outdated position
if (isDestroyed) {
return;
}
writeArrowUpdates({
arrow,
middlewareData
});
writeContainerUpdates({
container,
middlewareData,
placement: computedPlacement,
coordinates: {
x,
y
},
lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,
strategy,
useTransform
});
container.dispatchEvent(new CustomEvent(POSITIONING_END_EVENT));
}).catch((err)=>{
// https://github.com/floating-ui/floating-ui/issues/1845
// FIXME for node > 14
// node 15 introduces promise rejection which means that any components
// tests need to be `it('', async () => {})` otherwise there can be race conditions with
// JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
// Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
// will actually be counter productive
if (process.env.NODE_ENV === 'development') {
// eslint-disable-next-line no-console
console.error('[usePositioning]: Failed to calculate position', err);
}
});
};
const updatePosition = debounce(()=>forceUpdate());
const dispose = ()=>{
isDestroyed = true;
if (targetWindow) {
targetWindow.removeEventListener('scroll', updatePosition);
targetWindow.removeEventListener('resize', updatePosition);
}
scrollParents.forEach((scrollParent)=>{
scrollParent.removeEventListener('scroll', updatePosition);
});
scrollParents.clear();
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
};
if (targetWindow) {
targetWindow.addEventListener('scroll', updatePosition, {
passive: true
});
targetWindow.addEventListener('resize', updatePosition);
}
// Update the position on initialization
updatePosition();
return {
updatePosition,
dispose
};
}
File diff suppressed because one or more lines are too long
+62
View File
@@ -0,0 +1,62 @@
import { tokens } from '@fluentui/react-theme';
import { DATA_POSITIONING_PLACEMENT } from './constants';
/**
* Creates animation styles so that positioned elements slide in from the main axis
* @param mainAxis - distance than the element sides for
* @returns Griffel styles to spread to a slot
*/ export function createSlideStyles(mainAxis) {
const fadeIn = {
from: {
opacity: 0
},
to: {
opacity: 1
}
};
const slideDistanceVarX = '--fui-positioning-slide-distance-x';
const slideDistanceVarY = '--fui-positioning-slide-distance-y';
return {
// The fade has absolute values, whereas the slide amount is relative.
animationComposition: 'replace, accumulate',
animationDuration: tokens.durationSlower,
animationTimingFunction: tokens.curveDecelerateMid,
[slideDistanceVarX]: `0px`,
[slideDistanceVarY]: `${mainAxis}px`,
[`&[${DATA_POSITIONING_PLACEMENT}^=right]`]: {
[slideDistanceVarX]: `-${mainAxis}px`,
[slideDistanceVarY]: '0px'
},
[`&[${DATA_POSITIONING_PLACEMENT}^=bottom]`]: {
[slideDistanceVarX]: '0px',
[slideDistanceVarY]: `-${mainAxis}px`
},
[`&[${DATA_POSITIONING_PLACEMENT}^=left]`]: {
[slideDistanceVarX]: `${mainAxis}px`,
[slideDistanceVarY]: '0px'
},
animationName: [
fadeIn,
{
from: {
transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`
},
to: {}
}
],
// Note: at-rules have more specificity in Griffel
'@media(prefers-reduced-motion)': {
[`&[${DATA_POSITIONING_PLACEMENT}]`]: {
animationComposition: 'replace',
animationDuration: '1ms',
animationName: fadeIn
}
},
// Tested in Firefox 79
'@supports not (animation-composition: accumulate)': {
[`&[${DATA_POSITIONING_PLACEMENT}]`]: {
animationComposition: 'replace',
animationName: fadeIn
}
}
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/createSlideStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\nimport { DATA_POSITIONING_PLACEMENT } from './constants';\n\n/**\n * Creates animation styles so that positioned elements slide in from the main axis\n * @param mainAxis - distance than the element sides for\n * @returns Griffel styles to spread to a slot\n */\nexport function createSlideStyles(mainAxis: number): GriffelStyle {\n const fadeIn = {\n from: {\n opacity: 0,\n },\n to: {\n opacity: 1,\n },\n };\n\n const slideDistanceVarX = '--fui-positioning-slide-distance-x';\n const slideDistanceVarY = '--fui-positioning-slide-distance-y';\n\n return {\n // The fade has absolute values, whereas the slide amount is relative.\n animationComposition: 'replace, accumulate',\n animationDuration: tokens.durationSlower,\n animationTimingFunction: tokens.curveDecelerateMid,\n [slideDistanceVarX]: `0px`,\n [slideDistanceVarY]: `${mainAxis}px`,\n [`&[${DATA_POSITIONING_PLACEMENT}^=right]`]: {\n [slideDistanceVarX]: `-${mainAxis}px`,\n [slideDistanceVarY]: '0px',\n },\n\n [`&[${DATA_POSITIONING_PLACEMENT}^=bottom]`]: {\n [slideDistanceVarX]: '0px',\n [slideDistanceVarY]: `-${mainAxis}px`,\n },\n\n [`&[${DATA_POSITIONING_PLACEMENT}^=left]`]: {\n [slideDistanceVarX]: `${mainAxis}px`,\n [slideDistanceVarY]: '0px',\n },\n\n animationName: [\n fadeIn,\n {\n from: {\n transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`,\n },\n to: {},\n },\n ],\n\n // Note: at-rules have more specificity in Griffel\n '@media(prefers-reduced-motion)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationComposition: 'replace',\n animationDuration: '1ms',\n animationName: fadeIn,\n },\n },\n\n // Tested in Firefox 79\n '@supports not (animation-composition: accumulate)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\n animationComposition: 'replace',\n animationName: fadeIn,\n },\n },\n };\n}\n"],"names":["tokens","DATA_POSITIONING_PLACEMENT","createSlideStyles","mainAxis","fadeIn","from","opacity","to","slideDistanceVarX","slideDistanceVarY","animationComposition","animationDuration","durationSlower","animationTimingFunction","curveDecelerateMid","animationName","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,0BAA0B,QAAQ,cAAc;AAEzD;;;;CAIC,GACD,OAAO,SAASC,kBAAkBC,QAAgB;IAChD,MAAMC,SAAS;QACbC,MAAM;YACJC,SAAS;QACX;QACAC,IAAI;YACFD,SAAS;QACX;IACF;IAEA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAE1B,OAAO;QACL,sEAAsE;QACtEC,sBAAsB;QACtBC,mBAAmBX,OAAOY,cAAc;QACxCC,yBAAyBb,OAAOc,kBAAkB;QAClD,CAACN,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,CAAC,EAAEN,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,EAAE,EAAEF,2BAA2B,QAAQ,CAAC,CAAC,EAAE;YAC3C,CAACO,kBAAkB,EAAE,CAAC,CAAC,EAAEL,SAAS,EAAE,CAAC;YACrC,CAACM,kBAAkB,EAAE;QACvB;QAEA,CAAC,CAAC,EAAE,EAAER,2BAA2B,SAAS,CAAC,CAAC,EAAE;YAC5C,CAACO,kBAAkB,EAAE;YACrB,CAACC,kBAAkB,EAAE,CAAC,CAAC,EAAEN,SAAS,EAAE,CAAC;QACvC;QAEA,CAAC,CAAC,EAAE,EAAEF,2BAA2B,OAAO,CAAC,CAAC,EAAE;YAC1C,CAACO,kBAAkB,EAAE,CAAC,EAAEL,SAAS,EAAE,CAAC;YACpC,CAACM,kBAAkB,EAAE;QACvB;QAEAM,eAAe;YACbX;YACA;gBACEC,MAAM;oBACJW,WAAW,CAAC,cAAc,EAAER,kBAAkB,OAAO,EAAEC,kBAAkB,EAAE,CAAC;gBAC9E;gBACAF,IAAI,CAAC;YACP;SACD;QAED,kDAAkD;QAClD,kCAAkC;YAChC,CAAC,CAAC,EAAE,EAAEN,2BAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCS,sBAAsB;gBACtBC,mBAAmB;gBACnBI,eAAeX;YACjB;QACF;QAEA,uBAAuB;QACvB,qDAAqD;YACnD,CAAC,CAAC,EAAE,EAAEH,2BAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCS,sBAAsB;gBACtBK,eAAeX;YACjB;QACF;IACF;AACF"}
@@ -0,0 +1,24 @@
/**
* 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,
x: left,
y: top,
height: 1,
width: 1
};
}
return {
getBoundingClientRect
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/createVirtualElementFromClick.ts"],"sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect() {\n return {\n left,\n top,\n right,\n bottom,\n x: left,\n y: top,\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"],"names":["createVirtualElementFromClick","nativeEvent","left","clientX","top","clientY","right","bottom","getBoundingClientRect","x","y","height","width"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA;;;CAGC,GACD,OAAO,SAASA,8BAA8BC,WAAuB;IACnE,MAAMC,OAAOD,YAAYE,OAAO;IAChC,MAAMC,MAAMH,YAAYI,OAAO;IAC/B,MAAMC,QAAQJ,OAAO;IACrB,MAAMK,SAASH,MAAM;IAErB,SAASI;QACP,OAAO;YACLN;YACAE;YACAE;YACAC;YACAE,GAAGP;YACHQ,GAAGN;YACHO,QAAQ;YACRC,OAAO;QACT;IACF;IAEA,OAAO;QACLJ;IACF;AACF"}
+6
View File
@@ -0,0 +1,6 @@
export { createVirtualElementFromClick } from './createVirtualElementFromClick';
export { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';
export { createSlideStyles } from './createSlideStyles';
export { usePositioning } from './usePositioning';
export { usePositioningMouseTarget } from './usePositioningMouseTarget';
export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport { createSlideStyles } from './createSlideStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningBoundary,\n PositioningImperativeRef,\n PositioningProps,\n PositioningRect,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n SetVirtualMouseTarget,\n} from './types';\n"],"names":["createVirtualElementFromClick","createArrowHeightStyles","createArrowStyles","createSlideStyles","usePositioning","usePositioningMouseTarget","resolvePositioningShorthand","mergeArrowOffset"],"rangeMappings":";;;;;","mappings":"AAAA,SAASA,6BAA6B,QAAQ,kCAAkC;AAChF,SAASC,uBAAuB,EAAEC,iBAAiB,QAAQ,sBAAsB;AACjF,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,2BAA2B,EAAEC,gBAAgB,QAAQ,gBAAgB"}
+29
View File
@@ -0,0 +1,29 @@
import { parseFloatingUIPlacement } from '../utils/index';
export function coverTarget() {
return {
name: 'coverTarget',
fn: (middlewareArguments)=>{
const { placement, rects, x, y } = middlewareArguments;
const basePlacement = parseFloatingUIPlacement(placement).side;
const newCoords = {
x,
y
};
switch(basePlacement){
case 'bottom':
newCoords.y -= rects.reference.height;
break;
case 'top':
newCoords.y += rects.reference.height;
break;
case 'left':
newCoords.x += rects.reference.width;
break;
case 'right':
newCoords.x -= rects.reference.width;
break;
}
return newCoords;
}
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/coverTarget.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { parseFloatingUIPlacement } from '../utils/index';\n\nexport function coverTarget(): Middleware {\n return {\n name: 'coverTarget',\n fn: middlewareArguments => {\n const { placement, rects, x, y } = middlewareArguments;\n const basePlacement = parseFloatingUIPlacement(placement).side;\n const newCoords = { x, y };\n\n switch (basePlacement) {\n case 'bottom':\n newCoords.y -= rects.reference.height;\n break;\n case 'top':\n newCoords.y += rects.reference.height;\n break;\n case 'left':\n newCoords.x += rects.reference.width;\n break;\n case 'right':\n newCoords.x -= rects.reference.width;\n break;\n }\n\n return newCoords;\n },\n };\n}\n"],"names":["parseFloatingUIPlacement","coverTarget","name","fn","middlewareArguments","placement","rects","x","y","basePlacement","side","newCoords","reference","height","width"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,wBAAwB,QAAQ,iBAAiB;AAE1D,OAAO,SAASC;IACd,OAAO;QACLC,MAAM;QACNC,IAAIC,CAAAA;YACF,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAGJ;YACnC,MAAMK,gBAAgBT,yBAAyBK,WAAWK,IAAI;YAC9D,MAAMC,YAAY;gBAAEJ;gBAAGC;YAAE;YAEzB,OAAQC;gBACN,KAAK;oBACHE,UAAUH,CAAC,IAAIF,MAAMM,SAAS,CAACC,MAAM;oBACrC;gBACF,KAAK;oBACHF,UAAUH,CAAC,IAAIF,MAAMM,SAAS,CAACC,MAAM;oBACrC;gBACF,KAAK;oBACHF,UAAUJ,CAAC,IAAID,MAAMM,SAAS,CAACE,KAAK;oBACpC;gBACF,KAAK;oBACHH,UAAUJ,CAAC,IAAID,MAAMM,SAAS,CAACE,KAAK;oBACpC;YACJ;YAEA,OAAOH;QACT;IACF;AACF"}
+26
View File
@@ -0,0 +1,26 @@
import { flip as baseFlip } from '@floating-ui/dom';
import { getBoundary, resolvePositioningShorthand, toFloatingUIPlacement } from '../utils/index';
export function flip(options) {
const { hasScrollableElement, flipBoundary, container, fallbackPositions = [], isRtl } = options;
const fallbackPlacements = fallbackPositions.reduce((acc, shorthand)=>{
const { position, align } = resolvePositioningShorthand(shorthand);
const placement = toFloatingUIPlacement(align, position, isRtl);
if (placement) {
acc.push(placement);
}
return acc;
}, []);
return baseFlip({
...hasScrollableElement && {
boundary: 'clippingAncestors'
},
...flipBoundary && {
altBoundary: true,
boundary: getBoundary(container, flipBoundary)
},
fallbackStrategy: 'bestFit',
...fallbackPlacements.length && {
fallbackPlacements
}
});
}
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/flip.ts"],"sourcesContent":["import { flip as baseFlip, Placement } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, resolvePositioningShorthand, toFloatingUIPlacement } from '../utils/index';\n\nexport interface FlipMiddlewareOptions extends Pick<PositioningOptions, 'flipBoundary' | 'fallbackPositions'> {\n hasScrollableElement?: boolean;\n container: HTMLElement | null;\n isRtl?: boolean;\n}\n\nexport function flip(options: FlipMiddlewareOptions) {\n const { hasScrollableElement, flipBoundary, container, fallbackPositions = [], isRtl } = options;\n\n const fallbackPlacements = fallbackPositions.reduce<Placement[]>((acc, shorthand) => {\n const { position, align } = resolvePositioningShorthand(shorthand);\n const placement = toFloatingUIPlacement(align, position, isRtl);\n if (placement) {\n acc.push(placement);\n }\n return acc;\n }, []);\n\n return baseFlip({\n ...(hasScrollableElement && { boundary: 'clippingAncestors' }),\n ...(flipBoundary && { altBoundary: true, boundary: getBoundary(container, flipBoundary) }),\n fallbackStrategy: 'bestFit',\n ...(fallbackPlacements.length && { fallbackPlacements }),\n });\n}\n"],"names":["flip","baseFlip","getBoundary","resolvePositioningShorthand","toFloatingUIPlacement","options","hasScrollableElement","flipBoundary","container","fallbackPositions","isRtl","fallbackPlacements","reduce","acc","shorthand","position","align","placement","push","boundary","altBoundary","fallbackStrategy","length"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,QAAQC,QAAQ,QAAmB,mBAAmB;AAE/D,SAASC,WAAW,EAAEC,2BAA2B,EAAEC,qBAAqB,QAAQ,iBAAiB;AAQjG,OAAO,SAASJ,KAAKK,OAA8B;IACjD,MAAM,EAAEC,oBAAoB,EAAEC,YAAY,EAAEC,SAAS,EAAEC,oBAAoB,EAAE,EAAEC,KAAK,EAAE,GAAGL;IAEzF,MAAMM,qBAAqBF,kBAAkBG,MAAM,CAAc,CAACC,KAAKC;QACrE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGb,4BAA4BW;QACxD,MAAMG,YAAYb,sBAAsBY,OAAOD,UAAUL;QACzD,IAAIO,WAAW;YACbJ,IAAIK,IAAI,CAACD;QACX;QACA,OAAOJ;IACT,GAAG,EAAE;IAEL,OAAOZ,SAAS;QACd,GAAIK,wBAAwB;YAAEa,UAAU;QAAoB,CAAC;QAC7D,GAAIZ,gBAAgB;YAAEa,aAAa;YAAMD,UAAUjB,YAAYM,WAAWD;QAAc,CAAC;QACzFc,kBAAkB;QAClB,GAAIV,mBAAmBW,MAAM,IAAI;YAAEX;QAAmB,CAAC;IACzD;AACF"}
+7
View File
@@ -0,0 +1,7 @@
export { coverTarget } from './coverTarget';
export { flip } from './flip';
export { intersecting } from './intersecting';
export { maxSize, resetMaxSize } from './maxSize';
export { offset } from './offset';
export { shift } from './shift';
export { matchTargetSize, matchTargetSizeCssVar } from './matchTargetSize';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/index.ts"],"sourcesContent":["export { coverTarget } from './coverTarget';\nexport type { FlipMiddlewareOptions } from './flip';\nexport { flip } from './flip';\nexport { intersecting } from './intersecting';\nexport type { MaxSizeMiddlewareOptions } from './maxSize';\nexport { maxSize, resetMaxSize } from './maxSize';\nexport { offset } from './offset';\nexport type { ShiftMiddlewareOptions } from './shift';\nexport { shift } from './shift';\nexport { matchTargetSize, matchTargetSizeCssVar } from './matchTargetSize';\n"],"names":["coverTarget","flip","intersecting","maxSize","resetMaxSize","offset","shift","matchTargetSize","matchTargetSizeCssVar"],"rangeMappings":";;;;;;","mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,OAAO,EAAEC,YAAY,QAAQ,YAAY;AAClD,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,eAAe,EAAEC,qBAAqB,QAAQ,oBAAoB"}
@@ -0,0 +1,20 @@
import { detectOverflow } from '@floating-ui/dom';
export function intersecting() {
return {
name: 'intersectionObserver',
fn: async (middlewareArguments)=>{
const floatingRect = middlewareArguments.rects.floating;
const altOverflow = await detectOverflow(middlewareArguments, {
altBoundary: true
});
const isIntersectingTop = altOverflow.top < floatingRect.height && altOverflow.top > 0;
const isIntersectingBottom = altOverflow.bottom < floatingRect.height && altOverflow.bottom > 0;
const isIntersecting = isIntersectingTop || isIntersectingBottom;
return {
data: {
intersecting: isIntersecting
}
};
}
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/intersecting.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { detectOverflow } from '@floating-ui/dom';\n\nexport function intersecting(): Middleware {\n return {\n name: 'intersectionObserver',\n fn: async middlewareArguments => {\n const floatingRect = middlewareArguments.rects.floating;\n const altOverflow = await detectOverflow(middlewareArguments, { altBoundary: true });\n\n const isIntersectingTop = altOverflow.top < floatingRect.height && altOverflow.top > 0;\n const isIntersectingBottom = altOverflow.bottom < floatingRect.height && altOverflow.bottom > 0;\n\n const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n return {\n data: {\n intersecting: isIntersecting,\n },\n };\n },\n };\n}\n"],"names":["detectOverflow","intersecting","name","fn","middlewareArguments","floatingRect","rects","floating","altOverflow","altBoundary","isIntersectingTop","top","height","isIntersectingBottom","bottom","isIntersecting","data"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,OAAO,SAASC;IACd,OAAO;QACLC,MAAM;QACNC,IAAI,OAAMC;YACR,MAAMC,eAAeD,oBAAoBE,KAAK,CAACC,QAAQ;YACvD,MAAMC,cAAc,MAAMR,eAAeI,qBAAqB;gBAAEK,aAAa;YAAK;YAElF,MAAMC,oBAAoBF,YAAYG,GAAG,GAAGN,aAAaO,MAAM,IAAIJ,YAAYG,GAAG,GAAG;YACrF,MAAME,uBAAuBL,YAAYM,MAAM,GAAGT,aAAaO,MAAM,IAAIJ,YAAYM,MAAM,GAAG;YAE9F,MAAMC,iBAAiBL,qBAAqBG;YAE5C,OAAO;gBACLG,MAAM;oBACJf,cAAcc;gBAChB;YACF;QACF;IACF;AACF"}

Some files were not shown because too many files have changed in this diff Show More