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
+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"}
@@ -0,0 +1,25 @@
export const matchTargetSizeCssVar = '--fui-match-target-size';
export 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":["matchTargetSizeCssVar","matchTargetSize","name","fn","middlewareArguments","rects","reference","referenceRect","floating","floatingRect","elements","floatingElement","middlewareData","matchTargetSizeAttempt","width","style","setProperty","data","reset"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,OAAO,MAAMA,wBAAwB,0BAA0B;AAE/D,OAAO,SAASC;IACd,OAAO;QACLC,MAAM;QACNC,IAAI,OAAMC;YACR,MAAM,EACJC,OAAO,EAAEC,WAAWC,aAAa,EAAEC,UAAUC,YAAY,EAAE,EAC3DC,UAAU,EAAEF,UAAUG,eAAe,EAAE,EACvCC,gBAAgB,EAAEX,iBAAiB,EAAEY,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,CAAChB,uBAAuB,CAAC,EAAEc,MAAM,EAAE,CAAC;YACrE,IAAI,CAACH,gBAAgBI,KAAK,CAACD,KAAK,EAAE;gBAChCH,gBAAgBI,KAAK,CAACD,KAAK,GAAG,CAAC,IAAI,EAAEd,sBAAsB,CAAC,CAAC;YAC/D;YAEA,OAAO;gBACLiB,MAAM;oBAAEJ,wBAAwB;gBAAK;gBACrCK,OAAO;oBACLb,OAAO;gBACT;YACF;QACF;IACF;AACF"}
+66
View File
@@ -0,0 +1,66 @@
import { size } from '@floating-ui/dom';
import { getBoundary } from '../utils/getBoundary';
import { toFloatingUIPadding } from '../utils';
/**
* floating-ui `size` middleware uses floating element's height/width to calculate available height/width.
* This middleware only runs once per lifecycle, resetting styles applied by maxSize from previous lifecycle.
* Then floating element's original size is restored and `size` middleware can calculate available height/width correctly.
*/ export 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
}
};
}
});
export function maxSize(autoSize, options) {
const { container, overflowBoundary, overflowBoundaryPadding, isRtl } = options;
return size({
...overflowBoundaryPadding && {
padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl)
},
...overflowBoundary && {
altBoundary: true,
boundary: 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
+8
View File
@@ -0,0 +1,8 @@
import { offset as baseOffset } from '@floating-ui/dom';
import { getFloatingUIOffset } from '../utils/getFloatingUIOffset';
/**
* Wraps floating UI offset middleware to to transform offset value
*/ export function offset(offsetValue) {
const floatingUIOffset = getFloatingUIOffset(offsetValue);
return baseOffset(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","baseOffset","getFloatingUIOffset","offsetValue","floatingUIOffset"],"rangeMappings":";;;;;;;","mappings":"AAAA,SAASA,UAAUC,UAAU,QAAQ,mBAAmB;AAExD,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE;;CAEC,GACD,OAAO,SAASF,OAAOG,WAAyC;IAC9D,MAAMC,mBAAmBF,oBAAoBC;IAC7C,OAAOF,WAAWG;AACpB"}
+33
View File
@@ -0,0 +1,33 @@
import { shift as baseShift, limitShift } from '@floating-ui/dom';
import { getBoundary, toFloatingUIPadding } from '../utils/index';
/**
* Wraps the floating UI shift middleware for easier usage of our options
*/ export function shift(options) {
const { hasScrollableElement, shiftToCoverTarget, disableTether, overflowBoundary, container, overflowBoundaryPadding, isRtl } = options;
return baseShift({
...hasScrollableElement && {
boundary: 'clippingAncestors'
},
...shiftToCoverTarget && {
crossAxis: true,
limiter: limitShift({
crossAxis: true,
mainAxis: false
})
},
...disableTether && {
crossAxis: disableTether === 'all',
limiter: limitShift({
crossAxis: disableTether !== 'all',
mainAxis: false
})
},
...overflowBoundaryPadding && {
padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl)
},
...overflowBoundary && {
altBoundary: true,
boundary: getBoundary(container, overflowBoundary)
}
});
}
+1
View File
@@ -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","baseShift","limitShift","getBoundary","toFloatingUIPadding","options","hasScrollableElement","shiftToCoverTarget","disableTether","overflowBoundary","container","overflowBoundaryPadding","isRtl","boundary","crossAxis","limiter","mainAxis","padding","altBoundary"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,SAASC,SAAS,EAAEC,UAAU,QAAQ,mBAAmB;AAElE,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,iBAAiB;AAUlE;;CAEC,GACD,OAAO,SAASJ,MAAMK,OAA+B;IACnD,MAAM,EACJC,oBAAoB,EACpBC,kBAAkB,EAClBC,aAAa,EACbC,gBAAgB,EAChBC,SAAS,EACTC,uBAAuB,EACvBC,KAAK,EACN,GAAGP;IAEJ,OAAOJ,UAAU;QACf,GAAIK,wBAAwB;YAAEO,UAAU;QAAoB,CAAC;QAC7D,GAAIN,sBAAsB;YACxBO,WAAW;YACXC,SAASb,WAAW;gBAAEY,WAAW;gBAAME,UAAU;YAAM;QACzD,CAAC;QACD,GAAIR,iBAAiB;YACnBM,WAAWN,kBAAkB;YAC7BO,SAASb,WAAW;gBAAEY,WAAWN,kBAAkB;gBAAOQ,UAAU;YAAM;QAC5E,CAAC;QACD,GAAIL,2BAA2B;YAAEM,SAASb,oBAAoBO,yBAAyBC;QAAO,CAAC;QAC/F,GAAIH,oBAAoB;YAAES,aAAa;YAAML,UAAUV,YAAYO,WAAWD;QAAkB,CAAC;IACnG;AACF"}
+1
View File
@@ -0,0 +1 @@
import * as React from 'react';
File diff suppressed because one or more lines are too long
+226
View File
@@ -0,0 +1,226 @@
import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
import { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent, normalizeAutoSize } from './utils';
import { shift as shiftMiddleware, flip as flipMiddleware, coverTarget as coverTargetMiddleware, maxSize as maxSizeMiddleware, resetMaxSize as resetMaxSizeMiddleware, offset as offsetMiddleware, intersecting as intersectingMiddleware, matchTargetSize as matchTargetSizeMiddleware } from './middleware';
import { createPositionManager } from './createPositionManager';
import { devtools } from '@floating-ui/devtools';
import { devtoolsCallback } from './utils/devtools';
import { POSITIONING_END_EVENT } from './constants';
/**
* @internal
*/ export 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 && canUseDOM() && target && containerRef.current) {
managerRef.current = createPositionManager({
container: containerRef.current,
target,
arrow: arrowRef.current,
...resolvePositioningOptions(containerRef.current, arrowRef.current)
});
}
}, [
enabled,
resolvePositioningOptions
]);
const setOverrideTarget = 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
]);
useIsomorphicLayoutEffect(()=>{
var _options_target;
setOverrideTarget((_options_target = options.target) !== null && _options_target !== void 0 ? _options_target : null);
}, [
options.target,
setOverrideTarget
]);
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: 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 = useCallbackRef(null, (target)=>{
if (targetRef.current !== target) {
targetRef.current = target;
updatePositionManager();
}
});
const onPositioningEnd = useEventCallback(()=>{
var _options_onPositioningEnd;
return (_options_onPositioningEnd = options.onPositioningEnd) === null || _options_onPositioningEnd === void 0 ? void 0 : _options_onPositioningEnd.call(options);
});
const setContainer = useCallbackRef(null, (container)=>{
if (containerRef.current !== container) {
var _containerRef_current;
(_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.removeEventListener(POSITIONING_END_EVENT, onPositioningEnd);
container === null || container === void 0 ? void 0 : container.addEventListener(POSITIONING_END_EVENT, onPositioningEnd);
containerRef.current = container;
updatePositionManager();
}
});
const setArrow = 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 } = useFluent();
const isRtl = dir === 'rtl';
const positionStrategy = (strategy !== null && strategy !== void 0 ? strategy : positionFixed) ? 'fixed' : 'absolute';
const autoSize = normalizeAutoSize(rawAutoSize);
return React.useCallback((container, arrow)=>{
const hasScrollableElement = hasScrollParent(container);
const middleware = [
autoSize && resetMaxSizeMiddleware(autoSize),
matchTargetSize && matchTargetSizeMiddleware(),
offset && offsetMiddleware(offset),
coverTarget && coverTargetMiddleware(),
!pinned && flipMiddleware({
container,
flipBoundary,
hasScrollableElement,
isRtl,
fallbackPositions
}),
shiftMiddleware({
container,
hasScrollableElement,
overflowBoundary,
disableTether,
overflowBoundaryPadding,
isRtl,
shiftToCoverTarget
}),
autoSize && maxSizeMiddleware(autoSize, {
container,
overflowBoundary,
overflowBoundaryPadding,
isRtl
}),
intersectingMiddleware(),
arrow && arrowMiddleware({
element: arrow,
padding: arrowPadding
}),
hideMiddleware({
strategy: 'referenceHidden'
}),
hideMiddleware({
strategy: 'escaped'
}),
process.env.NODE_ENV !== 'production' && targetDocument && devtools(targetDocument, devtoolsCallback(options))
].filter(Boolean);
const placement = 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,35 @@
import * as React from 'react';
import { createVirtualElementFromClick } from './createVirtualElementFromClick';
/**
* @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 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 = 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":["React","createVirtualElementFromClick","usePositioningMouseTarget","initialState","virtualElement","setVirtualElement","useState","setVirtualMouseTarget","event","undefined","mouseevent","MouseEvent","nativeEvent","process","env","NODE_ENV","console","error","contextTarget"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,kCAAkC;AAGhF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGL,MAAMM,QAAQ,CAAwCH;IAElG,MAAMI,wBAA+CC,CAAAA;QACnD,IAAIA,UAAUC,aAAaD,UAAU,MAAM;YACzCH,kBAAkBI;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,gBAAgBjB,8BAA8BS;QACpDL,kBAAkBa;IACpB;IAEA,OAAO;QAACd;QAAgBG;KAAsB;AAChD,EAAE"}
@@ -0,0 +1,18 @@
export 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":"AAAA,OAAO,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"}
+19
View File
@@ -0,0 +1,19 @@
/**
* 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
*/ export function debounce(fn) {
let pending;
return ()=>{
if (!pending) {
pending = new Promise((resolve)=>{
Promise.resolve().then(()=>{
pending = undefined;
resolve(fn());
});
});
}
return pending;
};
}
+1
View File
@@ -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,GACD,OAAO,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"}
+27
View File
@@ -0,0 +1,27 @@
import { isHTMLElement } from '@fluentui/react-utilities';
import { listScrollParents } from './listScrollParents';
import { fromFloatingUIPlacement } from './fromFloatingUIPlacement';
export const devtoolsCallback = (options)=>(middlewareState)=>{
const { elements: { floating, reference } } = middlewareState;
const scrollParentsSet = new Set();
if (isHTMLElement(reference)) {
listScrollParents(reference).forEach((scrollParent)=>scrollParentsSet.add(scrollParent));
}
listScrollParents(floating).forEach((scrollParent)=>scrollParentsSet.add(scrollParent));
const flipBoundaries = Array.isArray(options.flipBoundary) ? options.flipBoundary : isHTMLElement(options.flipBoundary) ? [
options.flipBoundary
] : [];
const overflowBoundaries = Array.isArray(options.overflowBoundary) ? options.overflowBoundary : isHTMLElement(options.overflowBoundary) ? [
options.overflowBoundary
] : [];
return {
type: 'FluentUIMiddleware',
middlewareState,
options,
initialPlacement: fromFloatingUIPlacement(middlewareState.initialPlacement),
placement: fromFloatingUIPlacement(middlewareState.placement),
flipBoundaries,
overflowBoundaries,
scrollParents: Array.from(scrollParentsSet)
};
};
+1
View File
@@ -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":["isHTMLElement","listScrollParents","fromFloatingUIPlacement","devtoolsCallback","options","middlewareState","elements","floating","reference","scrollParentsSet","Set","forEach","scrollParent","add","flipBoundaries","Array","isArray","flipBoundary","overflowBoundaries","overflowBoundary","type","initialPlacement","placement","scrollParents","from"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE,OAAO,MAAMC,mBAAmB,CAACC,UAAgC,CAACC;QAChE,MAAM,EACJC,UAAU,EAAEC,QAAQ,EAAEC,SAAS,EAAE,EAClC,GAAGH;QACJ,MAAMI,mBAAmB,IAAIC;QAC7B,IAAIV,cAAcQ,YAAY;YAC5BP,kBAAkBO,WAAWG,OAAO,CAACC,CAAAA,eAAgBH,iBAAiBI,GAAG,CAACD;QAC5E;QACAX,kBAAkBM,UAAUI,OAAO,CAACC,CAAAA,eAAgBH,iBAAiBI,GAAG,CAACD;QACzE,MAAME,iBAAgCC,MAAMC,OAAO,CAACZ,QAAQa,YAAY,IACpEb,QAAQa,YAAY,GACpBjB,cAAcI,QAAQa,YAAY,IAClC;YAACb,QAAQa,YAAY;SAAC,GACtB,EAAE;QACN,MAAMC,qBAAoCH,MAAMC,OAAO,CAACZ,QAAQe,gBAAgB,IAC5Ef,QAAQe,gBAAgB,GACxBnB,cAAcI,QAAQe,gBAAgB,IACtC;YAACf,QAAQe,gBAAgB;SAAC,GAC1B,EAAE;QACN,OAAO;YACLC,MAAM;YACNf;YACAD;YACAiB,kBAAkBnB,wBAAwBG,gBAAgBgB,gBAAgB;YAC1EC,WAAWpB,wBAAwBG,gBAAgBiB,SAAS;YAC5DR;YACAI;YACAK,eAAeR,MAAMS,IAAI,CAACf;QAC5B;IACF,EAAE"}
@@ -0,0 +1,33 @@
import { parseFloatingUIPlacement } from './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'
};
};
/**
* Maps Floating UI placement to positioning values
* @see positioningHelper.test.ts for expected placement values
*/ export const fromFloatingUIPlacement = (placement)=>{
const { side, alignment: floatingUIAlignment } = 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":["parseFloatingUIPlacement","getPositionMap","top","bottom","right","left","getAlignmentMap","position","start","end","fromFloatingUIPlacement","placement","side","alignment","floatingUIAlignment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,wBAAwB,QAAQ,6BAA6B;AAEtE,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;AAEA;;;CAGC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC,MAAM,EAAEC,IAAI,EAAEC,WAAWC,mBAAmB,EAAE,GAAGd,yBAAyBW;IAC1E,MAAMJ,WAAWN,gBAAgB,CAACW,KAAK;IACvC,MAAMC,YAAYC,uBAAuBR,gBAAgBC,SAAS,CAACO,oBAAoB;IAEvF,OAAO;QAAEP;QAAUM;IAAU;AAC/B,EAAE"}
+19
View File
@@ -0,0 +1,19 @@
import { getScrollParent } from './getScrollParent';
/**
* Allows to mimic a behavior from V1 of Popper and accept `window` and `scrollParent` as strings.
*/ export 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 = 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":["getScrollParent","getBoundary","element","boundary","ownerDocument","documentElement","boundariesNode","nodeName"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,eAAe,QAAQ,oBAAoB;AAGpD;;CAEC,GACD,OAAO,SAASC,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,iBAA0CN,gBAAgBE;QAE9D,IAAII,eAAeC,QAAQ,KAAK,QAAQ;YACtCD,iBAAiBJ,oBAAAA,8BAAAA,QAASE,aAAa,CAAEC,eAAe;QAC1D;QAEA,OAAOC;IACT;IAEA,OAAOH;AACT"}
@@ -0,0 +1,22 @@
import { fromFloatingUIPlacement } from './fromFloatingUIPlacement';
/**
* Shim to transform offset values from this library to Floating UI
* @param rawOffset Offset from this library
* @returns An offset value compatible with Floating UI
*/ export function getFloatingUIOffset(rawOffset) {
if (!rawOffset) {
return rawOffset;
}
if (typeof rawOffset === 'number' || typeof rawOffset === 'object') {
return rawOffset;
}
return ({ rects: { floating, reference }, placement })=>{
const { position, alignment } = 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":["fromFloatingUIPlacement","getFloatingUIOffset","rawOffset","rects","floating","reference","placement","position","alignment","positionedRect","targetRect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,uBAAuB,QAAQ,4BAA4B;AAgCpE;;;;CAIC,GACD,OAAO,SAASC,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,GAAGR,wBAAwBM;QACxD,OAAOJ,UAAU;YAAEO,gBAAgBL;YAAUM,YAAYL;YAAWE;YAAUC;QAAU;IAC1F;AACF"}
@@ -0,0 +1,42 @@
import * as React from '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 = {}));
export 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
+51
View File
@@ -0,0 +1,51 @@
/**
* Returns the parent node or the host of the node argument.
* @param node - DOM node.
* @returns - parent DOM node.
*/ export 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);
};
/**
* Returns the first scrollable parent of the given element.
* @param node - DOM node.
* @returns - the first scrollable parent.
*/ export 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);
};
export 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","node","nodeName","parentNode","host","getStyleComputedProperty","nodeType","window","ownerDocument","defaultView","getComputedStyle","getScrollParent","document","body","overflow","overflowX","overflowY","test","hasScrollParent","scrollParentElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;CAIC,GACD,OAAO,MAAMA,gBAAgB,CAACC;IAC5B,IAAIA,KAAKC,QAAQ,KAAK,QAAQ;QAC5B,OAAOD;IACT;IACA,8DAA8D;IAC9D,OAAOA,KAAKE,UAAU,IAAI,AAACF,KAAaG,IAAI;AAC9C,EAAE;AAEF;;;;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;AAEA;;;;CAIC,GACD,OAAO,MAAMU,kBAAkB,CAACV;IAC9B,iFAAiF;IACjF,MAAME,aAAaF,QAAQD,cAAcC;IACzC,2BAA2B;IAC3B,IAAI,CAACE,YAAY,OAAOS,SAASC,IAAI;IAErC,OAAQV,WAAWD,QAAQ;QACzB,KAAK;QACL,KAAK;YACH,OAAOC,WAAWK,aAAa,CAAEK,IAAI;QACvC,KAAK;YACH,OAAO,AAACV,WAAmCU,IAAI;IACnD;IAEA,uFAAuF;IACvF,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGX,yBAAyBF;IACpE,IAAI,wBAAwBc,IAAI,CAACH,WAAYE,YAAaD,YAAY;QACpE,OAAOZ;IACT;IAEA,OAAOQ,gBAAgBR;AACzB,EAAE;AAEF,OAAO,MAAMe,kBAAkB,CAACjB;QAEuBkB;IADrD,MAAMA,sBAAmCR,gBAAgBV;IACzD,OAAOkB,sBAAsBA,0BAAwBA,qCAAAA,oBAAoBX,aAAa,cAAjCW,yDAAAA,mCAAmCN,IAAI,IAAG;AACjG,EAAE"}
@@ -0,0 +1,21 @@
//
// Dev utils to detect if nodes have "autoFocus" props.
//
import { getReactFiberFromNode } from './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 _getReactFiberFromNode;
return !!((_getReactFiberFromNode = getReactFiberFromNode(node)) === null || _getReactFiberFromNode === void 0 ? void 0 : _getReactFiberFromNode.pendingProps.autoFocus);
}
return false;
}
export 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":["getReactFiberFromNode","hasAutofocusProp","node","isAutoFocusableElement","nodeName","pendingProps","autoFocus","hasAutofocusFilter","NodeFilter","FILTER_ACCEPT","FILTER_SKIP"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,EAAE;AACF,uDAAuD;AACvD,EAAE;AAEF,SAASA,qBAAqB,QAAQ,0BAA0B;AAEhE;;;;;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;YACjBH;QAAT,OAAO,CAAC,GAACA,yBAAAA,sBAAsBE,mBAAtBF,6CAAAA,uBAA6BK,YAAY,CAACC,SAAS;IAC9D;IAEA,OAAO;AACT;AAEA,OAAO,SAASC,mBAAmBL,IAAU;IAC3C,OAAOD,iBAAiBC,QAAQM,WAAWC,aAAa,GAAGD,WAAWE,WAAW;AACnF"}
+16
View File
@@ -0,0 +1,16 @@
export { parseFloatingUIPlacement } from './parseFloatingUIPlacement';
export { getBoundary } from './getBoundary';
export { getReactFiberFromNode } from './getReactFiberFromNode';
export { getParentNode, getScrollParent, hasScrollParent } from './getScrollParent';
export { mergeArrowOffset } from './mergeArrowOffset';
export { toFloatingUIPadding } from './toFloatingUIPadding';
export { toFloatingUIPlacement } from './toFloatingUIPlacement';
export { fromFloatingUIPlacement } from './fromFloatingUIPlacement';
export { resolvePositioningShorthand } from './resolvePositioningShorthand';
export { useCallbackRef } from './useCallbackRef';
export { debounce } from './debounce';
export { toggleScrollListener } from './toggleScrollListener';
export { hasAutofocusFilter } from './hasAutoFocusFilter';
export { writeArrowUpdates } from './writeArrowUpdates';
export { writeContainerUpdates } from './writeContainerupdates';
export { normalizeAutoSize } from './normalizeAutoSize';
+1
View File
@@ -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":["parseFloatingUIPlacement","getBoundary","getReactFiberFromNode","getParentNode","getScrollParent","hasScrollParent","mergeArrowOffset","toFloatingUIPadding","toFloatingUIPlacement","fromFloatingUIPlacement","resolvePositioningShorthand","useCallbackRef","debounce","toggleScrollListener","hasAutofocusFilter","writeArrowUpdates","writeContainerUpdates","normalizeAutoSize"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,aAAa,EAAEC,eAAe,EAAEC,eAAe,QAAQ,oBAAoB;AACpF,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,iBAAiB,QAAQ,sBAAsB"}
@@ -0,0 +1,22 @@
import { getScrollParent } from './getScrollParent';
export function listScrollParents(node) {
const scrollParents = [];
let cur = node;
while(cur){
const scrollParent = 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":["getScrollParent","listScrollParents","node","scrollParents","cur","scrollParent","ownerDocument","body","push","nodeName","process","env","NODE_ENV","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,OAAO,SAASC,kBAAkBC,IAAiB;IACjD,MAAMC,gBAA+B,EAAE;IAEvC,IAAIC,MAA0BF;IAC9B,MAAOE,IAAK;QACV,MAAMC,eAAeL,gBAAgBI;QAErC,IAAIF,KAAKI,aAAa,CAACC,IAAI,KAAKF,cAAc;YAC5CF,cAAcK,IAAI,CAACH;YACnB;QACF;QAEA,IAAIA,aAAaI,QAAQ,KAAK,UAAUJ,iBAAiBH,KAAKI,aAAa,CAACC,IAAI,EAAE;YAChF,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQC,KAAK,CACX;YAEJ;YACA;QACF;QAEAX,cAAcK,IAAI,CAACH;QACnBD,MAAMC;IACR;IAEA,OAAOF;AACT"}
+37
View File
@@ -0,0 +1,37 @@
/**
* 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 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":"AAEA;;;;;;;;CAQC,GACD,OAAO,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,28 @@
/**
* AutoSizes contains many options from historic implementation.
* Now options 'always'/'height-always'/'width-always' are obsolete.
* This function maps them to true/'height'/'width'
*/ export 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":"AAEA;;;;CAIC,GACD,OAAO,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,EAAE"}
@@ -0,0 +1,12 @@
/**
* Parses Floating UI placement and returns the different components
* @param placement - the floating ui placement (i.e. bottom-start)
*
* @returns side and alignment components of the placement
*/ export 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":"AAEA;;;;;CAKC,GACD,OAAO,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,60 @@
// 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'
}
};
export 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":["shorthandLookup","above","position","align","below","before","after","resolvePositioningShorthand","shorthand","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,uDAAuD;AACvD,MAAMA,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;AAEA,OAAO,SAASI,4BACdC,SAAkD;IAElD,IAAIA,cAAcC,aAAaD,cAAc,MAAM;QACjD,OAAO,CAAC;IACV;IAEA,IAAI,OAAOA,cAAc,UAAU;QACjC,OAAOR,eAAe,CAACQ,UAAU;IACnC;IAEA,OAAOA;AACT"}
@@ -0,0 +1,18 @@
export 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":"AAGA,OAAO,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,32 @@
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;
};
/**
* Maps internal positioning values to Floating UI placement
* @see positioningHelper.test.ts for expected placement values
*/ export 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":["getPositionMap","rtl","above","below","before","after","getAlignmentMap","start","end","top","bottom","center","undefined","shouldAlignToCenter","p","a","positionedVertically","alignedVertically","toFloatingUIPlacement","align","position","alignment","computedPosition","computedAlignment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAMA,MAAMA,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;AAEA;;;CAGC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAmBC,UAAqBnB;IAC5E,MAAMoB,YAAYR,oBAAoBO,UAAUD,SAAS,WAAWA;IAEpE,MAAMG,mBAAmBF,YAAYpB,eAAeC,IAAI,CAACmB,SAAS;IAClE,MAAMG,oBAAoBF,aAAaf,iBAAiB,CAACe,UAAU;IAEnE,IAAIC,oBAAoBC,mBAAmB;QACzC,OAAO,CAAC,EAAED,iBAAiB,CAAC,EAAEC,kBAAkB,CAAC;IACnD;IAEA,OAAOD;AACT,EAAE"}
@@ -0,0 +1,20 @@
import { isHTMLElement } from '@fluentui/react-utilities';
import { getScrollParent } from './getScrollParent';
/**
* Toggles event listeners for scroll parent.
* Cleans up the event listeners for the previous element and adds them for the new scroll parent.
* @param next Next element
* @param prev Previous element
*/ export function toggleScrollListener(next, prev, handler) {
if (next === prev) {
return;
}
if (isHTMLElement(prev)) {
const prevScrollParent = getScrollParent(prev);
prevScrollParent.removeEventListener('scroll', handler);
}
if (isHTMLElement(next)) {
const scrollParent = 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":["isHTMLElement","getScrollParent","toggleScrollListener","next","prev","handler","prevScrollParent","removeEventListener","scrollParent","addEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;;;;CAKC,GACD,OAAO,SAASC,qBACdC,IAAoD,EACpDC,IAAoD,EACpDC,OAAsB;IAEtB,IAAIF,SAASC,MAAM;QACjB;IACF;IAEA,IAAIJ,cAAcI,OAAO;QACvB,MAAME,mBAAmBL,gBAAgBG;QACzCE,iBAAiBC,mBAAmB,CAAC,UAAUF;IACjD;IACA,IAAIL,cAAcG,OAAO;QACvB,MAAMK,eAAeP,gBAAgBE;QACrCK,aAAaC,gBAAgB,CAAC,UAAUJ;IAC1C;AACF"}
+49
View File
@@ -0,0 +1,49 @@
import * as React from 'react';
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
/**
* Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content
* changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via
* React.useState(), but it will cause re-renders always.
*
* https://reactjs.org/docs/hooks-reference.html#useref
* https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
*
* @param initialValue - initial ref value
* @param callback - a callback to run when value changes
* @param skipInitialResolve - a flag to skip an initial ref report
*
* @example
* const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
* ref.current = 1;
* // prints 0 -> 1
*/ export 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);
}
}
}
}));
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":["React","useIsomorphicLayoutEffect","useCallbackRef","initialValue","callback","skipInitialResolve","isFirst","useRef","ref","useState","value","facade","current","last"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,SAASC,eACdC,YAAsB,EACtBC,QAA2D,EAC3DC,kBAA4B;IAE5B,MAAMC,UAAUN,MAAMO,MAAM,CAAC;IAC7B,MAAM,CAACC,IAAI,GAAGR,MAAMS,QAAQ,CAAC,IAAO,CAAA;YAClC,QAAQ;YACRC,OAAOP;YACP,gBAAgB;YAChBC;YACA,8BAA8B;YAC9BO,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,IAAIL,sBAAsBC,QAAQM,OAAO,EAAE;4BACzC;wBACF;wBAEAJ,IAAIJ,QAAQ,CAACM,OAAOG;oBACtB;gBACF;YACF;QACF,CAAA;IAEAZ,0BAA0B;QACxBK,QAAQM,OAAO,GAAG;IACpB,GAAG,EAAE;IAEL,kBAAkB;IAClBJ,IAAIJ,QAAQ,GAAGA;IAEf,OAAOI,IAAIG,MAAM;AACnB"}
@@ -0,0 +1,13 @@
/**
* Writes all DOM element updates after position is computed
*/ export 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":"AAEA;;CAEC,GACD,OAAO,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,43 @@
import { DATA_POSITIONING_ESCAPED, DATA_POSITIONING_HIDDEN, DATA_POSITIONING_INTERSECTING, DATA_POSITIONING_PLACEMENT } from '../constants';
/**
* Writes all container element position updates after the position is computed
*/ export 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(DATA_POSITIONING_PLACEMENT, placement);
container.removeAttribute(DATA_POSITIONING_INTERSECTING);
if (middlewareData.intersectionObserver.intersecting) {
container.setAttribute(DATA_POSITIONING_INTERSECTING, '');
}
container.removeAttribute(DATA_POSITIONING_ESCAPED);
if ((_middlewareData_hide = middlewareData.hide) === null || _middlewareData_hide === void 0 ? void 0 : _middlewareData_hide.escaped) {
container.setAttribute(DATA_POSITIONING_ESCAPED, '');
}
container.removeAttribute(DATA_POSITIONING_HIDDEN);
if ((_middlewareData_hide1 = middlewareData.hide) === null || _middlewareData_hide1 === void 0 ? void 0 : _middlewareData_hide1.referenceHidden) {
container.setAttribute(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":["DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_PLACEMENT","writeContainerUpdates","options","middlewareData","container","placement","strategy","lowPPI","coordinates","useTransform","setAttribute","removeAttribute","intersectionObserver","intersecting","hide","escaped","referenceHidden","devicePixelRatio","ownerDocument","defaultView","x","Math","round","y","Object","assign","style","position","transform","left","top"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SACEA,wBAAwB,EACxBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,eAAe;AAEtB;;CAEC,GACD,OAAO,SAASC,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,CAACV,4BAA4BK;IACnDD,UAAUO,eAAe,CAACZ;IAC1B,IAAII,eAAeS,oBAAoB,CAACC,YAAY,EAAE;QACpDT,UAAUM,YAAY,CAACX,+BAA+B;IACxD;IAEAK,UAAUO,eAAe,CAACd;IAC1B,KAAIM,uBAAAA,eAAeW,IAAI,cAAnBX,2CAAAA,qBAAqBY,OAAO,EAAE;QAChCX,UAAUM,YAAY,CAACb,0BAA0B;IACnD;IAEAO,UAAUO,eAAe,CAACb;IAC1B,KAAIK,wBAAAA,eAAeW,IAAI,cAAnBX,4CAAAA,sBAAqBa,eAAe,EAAE;QACxCZ,UAAUM,YAAY,CAACZ,yBAAyB;IAClD;IAEA,uDAAuD;IACvD,oHAAoH;IACpH,wFAAwF;IACxF,wEAAwE;IACxE,MAAMmB,mBAAmBb,EAAAA,uCAAAA,UAAUc,aAAa,CAACC,WAAW,cAAnCf,2DAAAA,qCAAqCa,gBAAgB,KAAI;IAClF,MAAMG,IAAIC,KAAKC,KAAK,CAACd,YAAYY,CAAC,GAAGH,oBAAoBA;IACzD,MAAMM,IAAIF,KAAKC,KAAK,CAACd,YAAYe,CAAC,GAAGN,oBAAoBA;IAEzDO,OAAOC,MAAM,CAACrB,UAAUsB,KAAK,EAAE;QAC7BC,UAAUrB;IACZ;IAEA,IAAIG,cAAc;QAChBe,OAAOC,MAAM,CAACrB,UAAUsB,KAAK,EAAE;YAC7BE,WAAWrB,SAAS,CAAC,UAAU,EAAEa,EAAE,IAAI,EAAEG,EAAE,GAAG,CAAC,GAAG,CAAC,YAAY,EAAEH,EAAE,IAAI,EAAEG,EAAE,MAAM,CAAC;QACpF;QACA;IACF;IAEAC,OAAOC,MAAM,CAACrB,UAAUsB,KAAK,EAAE;QAC7BG,MAAM,CAAC,EAAET,EAAE,EAAE,CAAC;QACdU,KAAK,CAAC,EAAEP,EAAE,EAAE,CAAC;IACf;AACF"}