Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,17 @@
'use client';
import * as React from 'react';
// ---
const DEFAULT_CONFIGURATION = ({ options })=>{
return options;
};
// ---
const PositioningConfigurationContext = React.createContext(undefined);
/**
* A context provider for the positioning configuration.
*
* Accepts a function that takes the positioning options and returns them modified.
*/ export const PositioningConfigurationProvider = PositioningConfigurationContext.Provider;
export const usePositioningConfiguration = ()=>{
var _React_useContext;
return (_React_useContext = React.useContext(PositioningConfigurationContext)) !== null && _React_useContext !== void 0 ? _React_useContext : DEFAULT_CONFIGURATION;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/PositioningConfigurationContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { PositioningConfigurationFn } from './types';\n\n// ---\n\nconst DEFAULT_CONFIGURATION: PositioningConfigurationFn = ({ options }) => {\n return options;\n};\n\n// ---\n\nconst PositioningConfigurationContext = React.createContext<PositioningConfigurationFn | undefined>(undefined);\n\n/**\n * A context provider for the positioning configuration.\n *\n * Accepts a function that takes the positioning options and returns them modified.\n */\nexport const PositioningConfigurationProvider = PositioningConfigurationContext.Provider;\n\nexport const usePositioningConfiguration = (): PositioningConfigurationFn => {\n return React.useContext(PositioningConfigurationContext) ?? DEFAULT_CONFIGURATION;\n};\n"],"names":["React","DEFAULT_CONFIGURATION","options","PositioningConfigurationContext","createContext","undefined","PositioningConfigurationProvider","Provider","usePositioningConfiguration","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAM;AAEN,MAAMC,wBAAoD,CAAC,EAAEC,OAAO,EAAE;IACpE,OAAOA;AACT;AAEA,MAAM;AAEN,MAAMC,kCAAkCH,MAAMI,aAAa,CAAyCC;AAEpG;;;;CAIC,GACD,OAAO,MAAMC,mCAAmCH,gCAAgCI,QAAQ,CAAC;AAEzF,OAAO,MAAMC,8BAA8B;QAClCR;IAAP,OAAOA,CAAAA,oBAAAA,MAAMS,UAAU,CAACN,8CAAjBH,+BAAAA,oBAAqDC;AAC9D,EAAE"}

View File

@@ -0,0 +1,11 @@
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';
/**
* CSS custom properties used to encode the slide direction for positioning-aware enter animations.
* Set at runtime by `usePositioningSlideDirection` and registered via the CSS
* `registerProperty()` API so browsers can interpolate them as `<length>` values.
*/ export const POSITIONING_SLIDE_DIRECTION_VAR_X = '--fui-positioning-slide-direction-x';
export const POSITIONING_SLIDE_DIRECTION_VAR_Y = '--fui-positioning-slide-direction-y';

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\n/**\n * CSS custom properties used to encode the slide direction for positioning-aware enter animations.\n * Set at runtime by `usePositioningSlideDirection` and registered via the CSS\n * `registerProperty()` API so browsers can interpolate them as `<length>` values.\n */\nexport const POSITIONING_SLIDE_DIRECTION_VAR_X = '--fui-positioning-slide-direction-x';\nexport const POSITIONING_SLIDE_DIRECTION_VAR_Y = '--fui-positioning-slide-direction-y';\n"],"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT","POSITIONING_END_EVENT","POSITIONING_SLIDE_DIRECTION_VAR_X","POSITIONING_SLIDE_DIRECTION_VAR_Y"],"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;AAE1D;;;;CAIC,GACD,OAAO,MAAMC,oCAAoC,sCAAsC;AACvF,OAAO,MAAMC,oCAAoC,sCAAsC"}

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

View File

@@ -0,0 +1,139 @@
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, {
detail: {
// Cast from Floating UI's Placement to the Fluent-owned PositioningPlacement.
// These are equivalent string unions; the cast avoids leaking @floating-ui/dom
// types into the public API surface.
placement: computedPlacement
}
}));
}).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

View File

@@ -0,0 +1,66 @@
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
*
* @deprecated The popover-related components now use the Slide motion component,
* which they inject using the `surfaceMotion` slot.
*/ export function createSlideStyles(mainAxis) {
// With 'accumulate' animation composition, these opacity keyframes are added onto the default opacity of 1.
const fadeIn = {
from: {
opacity: -1
},
to: {
opacity: 0
}
};
const slideDistanceVarX = '--fui-positioning-slide-distance-x';
const slideDistanceVarY = '--fui-positioning-slide-distance-y';
return {
// NOTE: there was a previous attempt to give fadeIn a separate composition mode:
// animationComposition: 'replace, accumulate',
// but somehow this was linked to a performance regression observed in Teams (bug #4255933)
animationComposition: '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}]`]: {
animationDuration: '1ms',
animationName: fadeIn
}
},
// Tested in Firefox 79
'@supports not (animation-composition: accumulate)': {
[`&[${DATA_POSITIONING_PLACEMENT}]`]: {
animationName: fadeIn
}
}
};
}

View File

@@ -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 *\n * @deprecated The popover-related components now use the Slide motion component,\n * which they inject using the `surfaceMotion` slot.\n */\nexport function createSlideStyles(mainAxis: number): GriffelStyle {\n // With 'accumulate' animation composition, these opacity keyframes are added onto the default opacity of 1.\n const fadeIn = {\n from: {\n opacity: -1, // becomes opacity: 0\n },\n to: {\n opacity: 0, // becomes 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 // NOTE: there was a previous attempt to give fadeIn a separate composition mode:\n // animationComposition: 'replace, accumulate',\n // but somehow this was linked to a performance regression observed in Teams (bug #4255933)\n animationComposition: '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 animationDuration: '1ms',\n animationName: fadeIn,\n },\n },\n\n // Tested in Firefox 79\n '@supports not (animation-composition: accumulate)': {\n [`&[${DATA_POSITIONING_PLACEMENT}]`]: {\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"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,0BAA0B,QAAQ,cAAc;AAEzD;;;;;;;CAOC,GACD,OAAO,SAASC,kBAAkBC,QAAgB;IAChD,4GAA4G;IAC5G,MAAMC,SAAS;QACbC,MAAM;YACJC,SAAS,CAAC;QACZ;QACAC,IAAI;YACFD,SAAS;QACX;IACF;IAEA,MAAME,oBAAoB;IAC1B,MAAMC,oBAAoB;IAE1B,OAAO;QACL,iFAAiF;QACjF,iDAAiD;QACjD,2FAA2F;QAC3FC,sBAAsB;QACtBC,mBAAmBX,OAAOY,cAAc;QACxCC,yBAAyBb,OAAOc,kBAAkB;QAClD,CAACN,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,GAAGN,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,GAAGL,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;gBACpCU,mBAAmB;gBACnBI,eAAeX;YACjB;QACF;QAEA,uBAAuB;QACvB,qDAAqD;YACnD,CAAC,CAAC,EAAE,EAAEH,2BAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCc,eAAeX;YACjB;QACF;IACF;AACF"}

View File

@@ -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
};
}

View File

@@ -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"],"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"}

View File

@@ -0,0 +1,157 @@
'use client';
import { mergeClasses } from '@griffel/react';
import { useId } from '@fluentui/react-utilities';
import * as React from 'react';
import { useSyncExternalStore } from 'use-sync-external-store/shim';
import { getRectCorners } from './getRectCorners';
import { getMouseAnchor } from './getMouseAnchor';
import { pointsToSvgPath } from './pointsToSvgPath';
import { useStyles } from './SafeZoneArea.styles';
import { computeOutsideClipPath } from './computeOutsideClipPath';
// ---
const EMPTY_RECT = {
top: 0,
right: 0,
bottom: 0,
left: 0,
width: 0,
height: 0,
x: 0,
y: 0,
toJSON () {
return '';
}
};
export function isSameRect(a, b) {
return a.top === b.top && a.right === b.right && a.bottom === b.bottom && a.left === b.left && a.width === b.width && a.height === b.height;
}
export function isSameCoordinates(a, b) {
return a[0] === b[0] && a[1] === b[1];
}
// ---
/**
* A component that renders a safe zone area with SVG shapes. Uses `useSyncExternalStore` to manage its active state
* to avoid causing re-renders in `useSafeZoneArea()` as the hook might be used in host components like `Menu`.
*
* Draws two shapes:
* - a triangle that points to the target element which is an actual safe zone
* - a rectangle for a clip path that clips out the target element
*
* @internal
*/ export const SafeZoneArea = /*#__PURE__*/ React.memo((props)=>{
const { debug, onMouseEnter, onMouseMove, onMouseLeave, stateStore } = props;
const clipPathId = useId();
const styles = useStyles();
const active = useSyncExternalStore(stateStore.subscribe, stateStore.isActive);
const svgRef = React.useRef(null);
const [state, setState] = React.useState(()=>({
containerRect: EMPTY_RECT,
targetRect: EMPTY_RECT,
mouseCoordinates: [
0,
0
]
}));
React.useImperativeHandle(props.imperativeRef, ()=>({
updateSVG (newState) {
setState((prevState)=>{
// Heads up!
// A small optimization to avoid unnecessary re-renders
if (isSameRect(prevState.containerRect, newState.containerRect) && isSameRect(prevState.targetRect, newState.targetRect) && isSameCoordinates(prevState.mouseCoordinates, newState.mouseCoordinates)) {
return prevState;
}
return newState;
});
}
}), []);
const { containerRect, targetRect, mouseCoordinates } = state;
const topOffset = Math.min(targetRect.top, containerRect.top);
const leftOffset = Math.min(targetRect.left, containerRect.left);
const bottomOffset = Math.max(targetRect.bottom, containerRect.bottom);
const rightOffset = Math.max(targetRect.right, containerRect.right);
// ---
const containerCorners = getRectCorners(containerRect, [
leftOffset,
topOffset
]);
const targetCorners = getRectCorners(targetRect, [
leftOffset,
topOffset
]);
// Heads up!
// The SVG coordinate system starts at the top-left corner of the SVG element,
// so we need to adjust the mouse coordinates relative to the SVG's top-left corner.
const relativeMouseCoordinates = [
mouseCoordinates[0] - leftOffset,
mouseCoordinates[1] - topOffset
];
const mouseAnchor = getMouseAnchor(containerCorners.topLeft, containerCorners.bottomRight, relativeMouseCoordinates);
const triangleA = [
mouseAnchor,
containerCorners.topLeft,
containerCorners.topRight
];
const triangleB = [
mouseAnchor,
containerCorners.topRight,
containerCorners.bottomRight
];
const triangleC = [
mouseAnchor,
containerCorners.bottomRight,
containerCorners.bottomLeft
];
const triangleD = [
mouseAnchor,
containerCorners.bottomLeft,
containerCorners.topLeft
];
const svgWidth = rightOffset - leftOffset;
const svgHeight = bottomOffset - topOffset;
const clipPath = computeOutsideClipPath(svgWidth, svgHeight, {
x: targetCorners.topLeft[0],
y: targetCorners.topLeft[1],
width: targetRect.width,
height: targetRect.height
}, {
x: containerCorners.topLeft[0],
y: containerCorners.topLeft[1],
width: containerRect.width,
height: containerRect.height
});
return /*#__PURE__*/ React.createElement("div", {
className: mergeClasses(styles.wrapper, active && styles.wrapperActive),
"data-safe-zone": ""
}, active ? /*#__PURE__*/ React.createElement("svg", {
"aria-hidden": true,
className: styles.svg,
xmlns: "http://www.w3.org/2000/svg",
ref: svgRef,
style: {
width: `${svgWidth}px`,
height: `${svgHeight}px`,
transform: `translate(${leftOffset}px, ${topOffset}px)`
}
}, /*#__PURE__*/ React.createElement("g", {
className: mergeClasses(styles.triangle, debug && styles.triangleDebug),
clipPath: `url(#${clipPathId})`,
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave
}, /*#__PURE__*/ React.createElement("path", {
d: pointsToSvgPath(triangleA)
}), /*#__PURE__*/ React.createElement("path", {
d: pointsToSvgPath(triangleB)
}), /*#__PURE__*/ React.createElement("path", {
d: pointsToSvgPath(triangleC)
}), /*#__PURE__*/ React.createElement("path", {
d: pointsToSvgPath(triangleD)
})), /*#__PURE__*/ React.createElement("clipPath", {
id: clipPathId
}, /*#__PURE__*/ React.createElement("path", {
d: clipPath
})), debug && /*#__PURE__*/ React.createElement("path", {
className: styles.rectDebug,
d: clipPath
})) : null);
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,34 @@
'use client';
import { __styles } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const useStyles = /*#__PURE__*/__styles({
wrapper: {
mc9l5x: "fjseox",
Bqenvij: "fniina8",
a9b677: "f3tsq5r",
Bkecrkj: "f1aehjj5"
},
wrapperActive: {
mc9l5x: "ftgm304"
},
svg: {
Bkfmm31: "f1au8mb3",
Bkecrkj: "f1aehjj5",
qhf8xq: "f19dog8a",
Bhzewxz: "f15twtuk",
oyh7mz: ["f1vgc2s3", "f1e31b4d"]
},
triangle: {
Bkecrkj: "f1cguypg"
},
triangleDebug: {
Bceei9c: "f7116n6",
Bkfmm31: "f1xab38x"
},
rectDebug: {
Bkfmm31: "fyegryc"
}
}, {
d: [".fjseox{display:none;}", ".fniina8{height:0;}", ".f3tsq5r{width:0;}", ".f1aehjj5{pointer-events:none;}", ".ftgm304{display:block;}", ".f1au8mb3{fill:transparent;}", ".f19dog8a{position:fixed;}", ".f15twtuk{top:0;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1cguypg{pointer-events:auto;}", ".f7116n6{cursor:crosshair;}", ".f1xab38x{fill:color-mix(in srgb, var(--colorPaletteGreenBackground3) 20%, transparent);}", ".fyegryc{fill:color-mix(in srgb, var(--colorPaletteRedBackground3) 20%, transparent);}"]
});

View File

@@ -0,0 +1 @@
{"version":3,"names":["__styles","tokens","useStyles","wrapper","mc9l5x","Bqenvij","a9b677","Bkecrkj","wrapperActive","svg","Bkfmm31","qhf8xq","Bhzewxz","oyh7mz","triangle","triangleDebug","Bceei9c","rectDebug","d"],"sources":["SafeZoneArea.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const useStyles = makeStyles({\n wrapper: {\n display: 'none',\n height: 0,\n width: 0,\n pointerEvents: 'none'\n },\n wrapperActive: {\n display: 'block'\n },\n svg: {\n fill: 'transparent',\n pointerEvents: 'none',\n position: 'fixed',\n top: 0,\n left: 0\n },\n triangle: {\n pointerEvents: 'auto'\n },\n triangleDebug: {\n cursor: 'crosshair',\n fill: `color-mix(in srgb, ${tokens.colorPaletteGreenBackground3} 20%, transparent)`\n },\n rectDebug: {\n fill: `color-mix(in srgb, ${tokens.colorPaletteRedBackground3} 20%, transparent)`\n }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,QAA2B,gBAAgB;AAC3C,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,SAAS,gBAAGF,QAAA;EAAAG,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,aAAA;IAAAJ,MAAA;EAAA;EAAAK,GAAA;IAAAC,OAAA;IAAAH,OAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAP,OAAA;EAAA;EAAAQ,aAAA;IAAAC,OAAA;IAAAN,OAAA;EAAA;EAAAO,SAAA;IAAAP,OAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CA2BxB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,31 @@
'use client';
import { makeStyles } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const useStyles = makeStyles({
wrapper: {
display: 'none',
height: 0,
width: 0,
pointerEvents: 'none'
},
wrapperActive: {
display: 'block'
},
svg: {
fill: 'transparent',
pointerEvents: 'none',
position: 'fixed',
top: 0,
left: 0
},
triangle: {
pointerEvents: 'auto'
},
triangleDebug: {
cursor: 'crosshair',
fill: `color-mix(in srgb, ${tokens.colorPaletteGreenBackground3} 20%, transparent)`
},
rectDebug: {
fill: `color-mix(in srgb, ${tokens.colorPaletteRedBackground3} 20%, transparent)`
}
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useSafeZoneArea/SafeZoneArea.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const useStyles = makeStyles({\n wrapper: {\n display: 'none',\n height: 0,\n width: 0,\n pointerEvents: 'none',\n },\n wrapperActive: {\n display: 'block',\n },\n svg: {\n fill: 'transparent',\n pointerEvents: 'none',\n position: 'fixed',\n top: 0,\n left: 0,\n },\n triangle: {\n pointerEvents: 'auto',\n },\n triangleDebug: {\n cursor: 'crosshair',\n fill: `color-mix(in srgb, ${tokens.colorPaletteGreenBackground3} 20%, transparent)`,\n },\n rectDebug: {\n fill: `color-mix(in srgb, ${tokens.colorPaletteRedBackground3} 20%, transparent)`,\n },\n});\n"],"names":["makeStyles","tokens","useStyles","wrapper","display","height","width","pointerEvents","wrapperActive","svg","fill","position","top","left","triangle","triangleDebug","cursor","colorPaletteGreenBackground3","rectDebug","colorPaletteRedBackground3"],"mappings":"AAAA;AAEA,SAASA,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,YAAYF,WAAW;IAClCG,SAAS;QACPC,SAAS;QACTC,QAAQ;QACRC,OAAO;QACPC,eAAe;IACjB;IACAC,eAAe;QACbJ,SAAS;IACX;IACAK,KAAK;QACHC,MAAM;QACNH,eAAe;QACfI,UAAU;QACVC,KAAK;QACLC,MAAM;IACR;IACAC,UAAU;QACRP,eAAe;IACjB;IACAQ,eAAe;QACbC,QAAQ;QACRN,MAAM,CAAC,mBAAmB,EAAET,OAAOgB,4BAA4B,CAAC,kBAAkB,CAAC;IACrF;IACAC,WAAW;QACTR,MAAM,CAAC,mBAAmB,EAAET,OAAOkB,0BAA0B,CAAC,kBAAkB,CAAC;IACnF;AACF,GAAG"}

View File

@@ -0,0 +1,27 @@
function drawRectangle(rect) {
if (rect.width <= 0 || rect.height <= 0) {
return '';
}
let pathData = '';
// Creates a subpath moving in counterclockwise direction to create a hole
pathData += `M ${rect.x},${rect.y} `;
pathData += `V ${rect.y + rect.height} `; // Down to bottom-left
pathData += `H ${rect.x + rect.width} `; // Right to bottom-right
pathData += `V ${rect.y} `; // Up to top-right
pathData += `H ${rect.x} `; // Left to top-left (closing)
pathData += `Z `; // Close path
return pathData;
}
/**
* Computes a clip path that covers the area outside multiple rectangles.
*
* @internal
*/ export function computeOutsideClipPath(svgWidth, svgHeight, targetRect, containerRect) {
let pathData = `M 0,0 H ${svgWidth} V ${svgHeight} H 0 Z `;
// For each rectangle, add a subpath that "cuts out" the rectangle
// The trick is to draw each rectangle in the counterclockwise direction
// which creates a "hole" in the main path
pathData += drawRectangle(targetRect);
pathData += drawRectangle(containerRect);
return pathData;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useSafeZoneArea/computeOutsideClipPath.ts"],"sourcesContent":["function drawRectangle(rect: { x: number; y: number; width: number; height: number }): string {\n if (rect.width <= 0 || rect.height <= 0) {\n return '';\n }\n\n let pathData = '';\n\n // Creates a subpath moving in counterclockwise direction to create a hole\n\n pathData += `M ${rect.x},${rect.y} `;\n pathData += `V ${rect.y + rect.height} `; // Down to bottom-left\n pathData += `H ${rect.x + rect.width} `; // Right to bottom-right\n pathData += `V ${rect.y} `; // Up to top-right\n pathData += `H ${rect.x} `; // Left to top-left (closing)\n pathData += `Z `; // Close path\n\n return pathData;\n}\n\n/**\n * Computes a clip path that covers the area outside multiple rectangles.\n *\n * @internal\n */\nexport function computeOutsideClipPath(\n svgWidth: number,\n svgHeight: number,\n targetRect: { x: number; y: number; width: number; height: number },\n containerRect: { x: number; y: number; width: number; height: number },\n): string {\n let pathData = `M 0,0 H ${svgWidth} V ${svgHeight} H 0 Z `;\n\n // For each rectangle, add a subpath that \"cuts out\" the rectangle\n // The trick is to draw each rectangle in the counterclockwise direction\n // which creates a \"hole\" in the main path\n\n pathData += drawRectangle(targetRect);\n pathData += drawRectangle(containerRect);\n\n return pathData;\n}\n"],"names":["drawRectangle","rect","width","height","pathData","x","y","computeOutsideClipPath","svgWidth","svgHeight","targetRect","containerRect"],"mappings":"AAAA,SAASA,cAAcC,IAA6D;IAClF,IAAIA,KAAKC,KAAK,IAAI,KAAKD,KAAKE,MAAM,IAAI,GAAG;QACvC,OAAO;IACT;IAEA,IAAIC,WAAW;IAEf,0EAA0E;IAE1EA,YAAY,CAAC,EAAE,EAAEH,KAAKI,CAAC,CAAC,CAAC,EAAEJ,KAAKK,CAAC,CAAC,CAAC,CAAC;IACpCF,YAAY,CAAC,EAAE,EAAEH,KAAKK,CAAC,GAAGL,KAAKE,MAAM,CAAC,CAAC,CAAC,EAAE,sBAAsB;IAChEC,YAAY,CAAC,EAAE,EAAEH,KAAKI,CAAC,GAAGJ,KAAKC,KAAK,CAAC,CAAC,CAAC,EAAE,wBAAwB;IACjEE,YAAY,CAAC,EAAE,EAAEH,KAAKK,CAAC,CAAC,CAAC,CAAC,EAAE,kBAAkB;IAC9CF,YAAY,CAAC,EAAE,EAAEH,KAAKI,CAAC,CAAC,CAAC,CAAC,EAAE,6BAA6B;IACzDD,YAAY,CAAC,EAAE,CAAC,EAAE,aAAa;IAE/B,OAAOA;AACT;AAEA;;;;CAIC,GACD,OAAO,SAASG,uBACdC,QAAgB,EAChBC,SAAiB,EACjBC,UAAmE,EACnEC,aAAsE;IAEtE,IAAIP,WAAW,CAAC,QAAQ,EAAEI,SAAS,GAAG,EAAEC,UAAU,OAAO,CAAC;IAE1D,kEAAkE;IAClE,wEAAwE;IACxE,0CAA0C;IAE1CL,YAAYJ,cAAcU;IAC1BN,YAAYJ,cAAcW;IAE1B,OAAOP;AACT"}

View File

@@ -0,0 +1,25 @@
export function createSafeZoneAreaStateStore() {
let isActive = false;
const listeners = [];
return {
isActive () {
return isActive;
},
toggleActive (newIsActive) {
if (isActive === newIsActive) {
return;
}
isActive = newIsActive;
listeners.forEach((listener)=>listener(isActive));
},
subscribe (listener) {
listeners.push(listener);
return ()=>{
const index = listeners.indexOf(listener);
if (index > -1) {
listeners.splice(index, 1);
}
};
}
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useSafeZoneArea/createSafeZoneAreaStateStore.ts"],"sourcesContent":["export function createSafeZoneAreaStateStore(): {\n isActive: () => boolean;\n toggleActive: (newIsActive: boolean) => void;\n subscribe: (listener: (value: boolean) => void) => () => void;\n} {\n let isActive = false;\n const listeners: ((value: boolean) => void)[] = [];\n\n return {\n isActive() {\n return isActive;\n },\n toggleActive(newIsActive: boolean) {\n if (isActive === newIsActive) {\n return;\n }\n\n isActive = newIsActive;\n listeners.forEach(listener => listener(isActive));\n },\n\n subscribe(listener: (value: boolean) => void) {\n listeners.push(listener);\n\n return () => {\n const index = listeners.indexOf(listener);\n\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n },\n };\n}\n"],"names":["createSafeZoneAreaStateStore","isActive","listeners","toggleActive","newIsActive","forEach","listener","subscribe","push","index","indexOf","splice"],"mappings":"AAAA,OAAO,SAASA;IAKd,IAAIC,WAAW;IACf,MAAMC,YAA0C,EAAE;IAElD,OAAO;QACLD;YACE,OAAOA;QACT;QACAE,cAAaC,WAAoB;YAC/B,IAAIH,aAAaG,aAAa;gBAC5B;YACF;YAEAH,WAAWG;YACXF,UAAUG,OAAO,CAACC,CAAAA,WAAYA,SAASL;QACzC;QAEAM,WAAUD,QAAkC;YAC1CJ,UAAUM,IAAI,CAACF;YAEf,OAAO;gBACL,MAAMG,QAAQP,UAAUQ,OAAO,CAACJ;gBAEhC,IAAIG,QAAQ,CAAC,GAAG;oBACdP,UAAUS,MAAM,CAACF,OAAO;gBAC1B;YACF;QACF;IACF;AACF"}

View File

@@ -0,0 +1,51 @@
const OFFSET_DISTANCE = 20;
/**
* Measures the distance between two points in a 2D space.
*/ export function measureDistance(a, b) {
return Math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2);
}
/**
* Returns a unit vector pointing from point `b` to point `a`.
* If the distance is zero, returns a zero vector.
*/ export function getUnitVector(a, b) {
const distance = measureDistance(a, b);
if (distance === 0) {
return [
0,
0
];
}
return [
(a[0] - b[0]) / distance,
(a[1] - b[1]) / distance
];
}
/**
* Calculates the anchor point for a mouse position within a container defined by its top-left and bottom-right corners.
* The anchor point is calculated as an offset from the center of the container in the direction of the mouse position.
*
* @internal
*/ export function getMouseAnchor(topLeftCorner, bottomRightCorner, mouseCoordinates) {
const containerCenter = [
(topLeftCorner[0] + bottomRightCorner[0]) / 2,
(topLeftCorner[1] + bottomRightCorner[1]) / 2
];
const unitVector = getUnitVector([
mouseCoordinates[0],
mouseCoordinates[1]
], [
containerCenter[0],
containerCenter[1]
]);
const distance = measureDistance([
containerCenter[0],
containerCenter[1]
], [
mouseCoordinates[0],
mouseCoordinates[1]
]);
return [
containerCenter[0] + unitVector[0] * (distance + OFFSET_DISTANCE),
containerCenter[1] + unitVector[1] * (distance + OFFSET_DISTANCE)
];
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useSafeZoneArea/getMouseAnchor.ts"],"sourcesContent":["import type { Point } from './types';\n\nconst OFFSET_DISTANCE = 20;\n\n/**\n * Measures the distance between two points in a 2D space.\n */\nexport function measureDistance(a: Point, b: Point): number {\n return Math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2);\n}\n\n/**\n * Returns a unit vector pointing from point `b` to point `a`.\n * If the distance is zero, returns a zero vector.\n */\nexport function getUnitVector(a: Point, b: Point): Point {\n const distance = measureDistance(a, b);\n\n if (distance === 0) {\n return [0, 0];\n }\n\n return [(a[0] - b[0]) / distance, (a[1] - b[1]) / distance];\n}\n\n/**\n * Calculates the anchor point for a mouse position within a container defined by its top-left and bottom-right corners.\n * The anchor point is calculated as an offset from the center of the container in the direction of the mouse position.\n *\n * @internal\n */\nexport function getMouseAnchor(topLeftCorner: Point, bottomRightCorner: Point, mouseCoordinates: Point): Point {\n const containerCenter: Point = [\n (topLeftCorner[0] + bottomRightCorner[0]) / 2,\n (topLeftCorner[1] + bottomRightCorner[1]) / 2,\n ];\n\n const unitVector = getUnitVector(\n [mouseCoordinates[0], mouseCoordinates[1]],\n [containerCenter[0], containerCenter[1]],\n );\n const distance = measureDistance(\n [containerCenter[0], containerCenter[1]],\n [mouseCoordinates[0], mouseCoordinates[1]],\n );\n\n return [\n containerCenter[0] + unitVector[0] * (distance + OFFSET_DISTANCE),\n containerCenter[1] + unitVector[1] * (distance + OFFSET_DISTANCE),\n ];\n}\n"],"names":["OFFSET_DISTANCE","measureDistance","a","b","Math","sqrt","getUnitVector","distance","getMouseAnchor","topLeftCorner","bottomRightCorner","mouseCoordinates","containerCenter","unitVector"],"mappings":"AAEA,MAAMA,kBAAkB;AAExB;;CAEC,GACD,OAAO,SAASC,gBAAgBC,CAAQ,EAAEC,CAAQ;IAChD,OAAOC,KAAKC,IAAI,CAAC,AAACH,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAE,AAAD,KAAM,IAAI,AAACD,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAE,AAAD,KAAM;AACzD;AAEA;;;CAGC,GACD,OAAO,SAASG,cAAcJ,CAAQ,EAAEC,CAAQ;IAC9C,MAAMI,WAAWN,gBAAgBC,GAAGC;IAEpC,IAAII,aAAa,GAAG;QAClB,OAAO;YAAC;YAAG;SAAE;IACf;IAEA,OAAO;QAAEL,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAE,AAAD,IAAKI;QAAWL,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAE,AAAD,IAAKI;KAAS;AAC7D;AAEA;;;;;CAKC,GACD,OAAO,SAASC,eAAeC,aAAoB,EAAEC,iBAAwB,EAAEC,gBAAuB;IACpG,MAAMC,kBAAyB;QAC5BH,CAAAA,aAAa,CAAC,EAAE,GAAGC,iBAAiB,CAAC,EAAE,AAAD,IAAK;QAC3CD,CAAAA,aAAa,CAAC,EAAE,GAAGC,iBAAiB,CAAC,EAAE,AAAD,IAAK;KAC7C;IAED,MAAMG,aAAaP,cACjB;QAACK,gBAAgB,CAAC,EAAE;QAAEA,gBAAgB,CAAC,EAAE;KAAC,EAC1C;QAACC,eAAe,CAAC,EAAE;QAAEA,eAAe,CAAC,EAAE;KAAC;IAE1C,MAAML,WAAWN,gBACf;QAACW,eAAe,CAAC,EAAE;QAAEA,eAAe,CAAC,EAAE;KAAC,EACxC;QAACD,gBAAgB,CAAC,EAAE;QAAEA,gBAAgB,CAAC,EAAE;KAAC;IAG5C,OAAO;QACLC,eAAe,CAAC,EAAE,GAAGC,UAAU,CAAC,EAAE,GAAIN,CAAAA,WAAWP,eAAc;QAC/DY,eAAe,CAAC,EAAE,GAAGC,UAAU,CAAC,EAAE,GAAIN,CAAAA,WAAWP,eAAc;KAChE;AACH"}

View File

@@ -0,0 +1,24 @@
/**
* Calculates the corners of a rectangle based on its DOMRect and an offset.
*
* @internal
*/ export function getRectCorners(rect, offset) {
return {
topLeft: [
rect.left - offset[0],
rect.top - offset[1]
],
topRight: [
rect.right - offset[0],
rect.top - offset[1]
],
bottomRight: [
rect.right - offset[0],
rect.bottom - offset[1]
],
bottomLeft: [
rect.left - offset[0],
rect.bottom - offset[1]
]
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useSafeZoneArea/getRectCorners.ts"],"sourcesContent":["import type { Point } from './types';\n\n/**\n * Calculates the corners of a rectangle based on its DOMRect and an offset.\n *\n * @internal\n */\nexport function getRectCorners(\n rect: DOMRect,\n offset: Point,\n): Record<'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft', Point> {\n return {\n topLeft: [rect.left - offset[0], rect.top - offset[1]],\n topRight: [rect.right - offset[0], rect.top - offset[1]],\n bottomRight: [rect.right - offset[0], rect.bottom - offset[1]],\n bottomLeft: [rect.left - offset[0], rect.bottom - offset[1]],\n };\n}\n"],"names":["getRectCorners","rect","offset","topLeft","left","top","topRight","right","bottomRight","bottom","bottomLeft"],"mappings":"AAEA;;;;CAIC,GACD,OAAO,SAASA,eACdC,IAAa,EACbC,MAAa;IAEb,OAAO;QACLC,SAAS;YAACF,KAAKG,IAAI,GAAGF,MAAM,CAAC,EAAE;YAAED,KAAKI,GAAG,GAAGH,MAAM,CAAC,EAAE;SAAC;QACtDI,UAAU;YAACL,KAAKM,KAAK,GAAGL,MAAM,CAAC,EAAE;YAAED,KAAKI,GAAG,GAAGH,MAAM,CAAC,EAAE;SAAC;QACxDM,aAAa;YAACP,KAAKM,KAAK,GAAGL,MAAM,CAAC,EAAE;YAAED,KAAKQ,MAAM,GAAGP,MAAM,CAAC,EAAE;SAAC;QAC9DQ,YAAY;YAACT,KAAKG,IAAI,GAAGF,MAAM,CAAC,EAAE;YAAED,KAAKQ,MAAM,GAAGP,MAAM,CAAC,EAAE;SAAC;IAC9D;AACF"}

View File

@@ -0,0 +1,7 @@
/**
* Calculates the corners of a rectangle based on its DOMRect and an offset.
*
* @internal
*/ export function pointsToSvgPath(points) {
return `M ${points} z`;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useSafeZoneArea/pointsToSvgPath.ts"],"sourcesContent":["import type { Point } from './types';\n\n/**\n * Calculates the corners of a rectangle based on its DOMRect and an offset.\n *\n * @internal\n */\nexport function pointsToSvgPath(points: Point[]): string {\n return `M ${points} z`;\n}\n"],"names":["pointsToSvgPath","points"],"mappings":"AAEA;;;;CAIC,GACD,OAAO,SAASA,gBAAgBC,MAAe;IAC7C,OAAO,CAAC,EAAE,EAAEA,OAAO,EAAE,CAAC;AACxB"}

View File

@@ -0,0 +1,5 @@
/**
* A type representing a point in a 2D space as an array of two numbers (x & y coordinates).
*
* @internal
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useSafeZoneArea/types.ts"],"sourcesContent":["/**\n * A type representing a point in a 2D space as an array of two numbers (x & y coordinates).\n *\n * @internal\n */\nexport type Point = [number, number];\n"],"names":[],"mappings":"AAAA;;;;CAIC,GACD,WAAqC"}

View File

@@ -0,0 +1,146 @@
'use client';
import { useAnimationFrame, useEventCallback, useMergedRefs, useTimeout } from '@fluentui/react-utilities';
import * as React from 'react';
import { createSafeZoneAreaStateStore } from './createSafeZoneAreaStateStore';
import { SafeZoneArea } from './SafeZoneArea';
/**
* Time in milliseconds after which the safe zone area will be cleared if no mouse movement is detected.
*
* Only affects the target element, not the safe zone area itself.
*/ const MOUSE_MOVE_TARGET_POLLING_TIMEOUT = 2000;
// ---
export function useSafeZoneArea({ debug = false, disabled = false, onSafeZoneEnter, onSafeZoneMove, onSafeZoneLeave, onSafeZoneTimeout, timeout = 1500 } = {}) {
const [stateStore] = React.useState(createSafeZoneAreaStateStore);
const safeZoneAreaRef = React.useRef(null);
const containerRef = React.useRef(null);
const targetRef = React.useRef(null);
const [setSafeZoneCloseTimeout, clearSafeZoneCloseTimeout] = useTimeout();
const [requestUpdateFrame, clearUpdateFrame] = useAnimationFrame();
const mouseCoordinatesRef = React.useRef({
x: 0,
y: 0
});
const containerListenerRef = React.useMemo(()=>{
if (disabled) {
return ()=>{
// do nothing
};
}
let containerEl = null;
function onContainerMouseEnter() {
clearSafeZoneCloseTimeout();
stateStore.toggleActive(false);
}
return (el)=>{
if (el === null) {
containerEl === null || containerEl === void 0 ? void 0 : containerEl.removeEventListener('mouseenter', onContainerMouseEnter);
}
containerEl = el;
el === null || el === void 0 ? void 0 : el.addEventListener('mouseenter', onContainerMouseEnter);
};
}, [
clearSafeZoneCloseTimeout,
disabled,
stateStore
]);
const targetListenerRef = React.useMemo(()=>{
if (disabled) {
return ()=>{
// do nothing
};
}
let targetEl = null;
function onTargetMouseMove(e) {
mouseCoordinatesRef.current = {
x: e.clientX,
y: e.clientY
};
if (!stateStore.isActive()) {
stateStore.toggleActive(true);
}
setSafeZoneCloseTimeout(()=>{
stateStore.toggleActive(false);
}, MOUSE_MOVE_TARGET_POLLING_TIMEOUT);
}
return (el)=>{
if (el === null) {
clearUpdateFrame();
clearSafeZoneCloseTimeout();
targetEl === null || targetEl === void 0 ? void 0 : targetEl.removeEventListener('mousemove', onTargetMouseMove);
}
targetEl = el;
el === null || el === void 0 ? void 0 : el.addEventListener('mousemove', onTargetMouseMove);
};
}, [
clearUpdateFrame,
clearSafeZoneCloseTimeout,
disabled,
stateStore,
setSafeZoneCloseTimeout
]);
const onSvgMouseEnter = useEventCallback((e)=>{
onSafeZoneEnter === null || onSafeZoneEnter === void 0 ? void 0 : onSafeZoneEnter(e);
setSafeZoneCloseTimeout(()=>{
stateStore.toggleActive(false);
onSafeZoneTimeout === null || onSafeZoneTimeout === void 0 ? void 0 : onSafeZoneTimeout();
}, timeout);
});
const onSvgMouseMove = useEventCallback((e)=>{
setSafeZoneCloseTimeout(()=>{
stateStore.toggleActive(false);
onSafeZoneTimeout === null || onSafeZoneTimeout === void 0 ? void 0 : onSafeZoneTimeout();
}, timeout);
onSafeZoneMove === null || onSafeZoneMove === void 0 ? void 0 : onSafeZoneMove(e);
});
const onSvgMouseLeave = useEventCallback((e)=>{
onSafeZoneLeave === null || onSafeZoneLeave === void 0 ? void 0 : onSafeZoneLeave(e);
});
React.useEffect(()=>{
return stateStore.subscribe((isActive)=>{
if (isActive) {
function updateSVGs() {
const containerEl = containerRef.current;
const targetEl = targetRef.current;
if (containerEl && targetEl) {
var _safeZoneAreaRef_current;
(_safeZoneAreaRef_current = safeZoneAreaRef.current) === null || _safeZoneAreaRef_current === void 0 ? void 0 : _safeZoneAreaRef_current.updateSVG({
containerRect: containerEl.getBoundingClientRect(),
mouseCoordinates: [
mouseCoordinatesRef.current.x,
mouseCoordinatesRef.current.y
],
targetRect: targetEl.getBoundingClientRect()
});
}
requestUpdateFrame(updateSVGs);
}
updateSVGs();
return;
}
clearUpdateFrame();
});
}, [
clearUpdateFrame,
requestUpdateFrame,
stateStore
]);
return {
containerRef: useMergedRefs(containerRef, containerListenerRef),
targetRef: useMergedRefs(targetRef, targetListenerRef),
elementToRender: React.useMemo(()=>disabled ? null : /*#__PURE__*/ React.createElement(SafeZoneArea, {
debug: debug,
onMouseEnter: onSvgMouseEnter,
onMouseMove: onSvgMouseMove,
onMouseLeave: onSvgMouseLeave,
imperativeRef: safeZoneAreaRef,
stateStore: stateStore
}), [
disabled,
debug,
onSvgMouseEnter,
onSvgMouseMove,
onSvgMouseLeave,
stateStore
])
};
}

File diff suppressed because one or more lines are too long

11
node_modules/@fluentui/react-positioning/lib/index.js generated vendored Normal file
View File

@@ -0,0 +1,11 @@
export { createVirtualElementFromClick } from './createVirtualElementFromClick';
export { usePositioningSlideDirection } from './usePositioningSlideDirection';
export { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';
export { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';
// eslint-disable-next-line @typescript-eslint/no-deprecated
export { createSlideStyles } from './createSlideStyles';
export { PositioningConfigurationProvider } from './PositioningConfigurationContext';
export { usePositioning } from './usePositioning';
export { usePositioningMouseTarget } from './usePositioningMouseTarget';
export { useSafeZoneArea } from './hooks/useSafeZoneArea/useSafeZoneArea';
export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { usePositioningSlideDirection } from './usePositioningSlideDirection';\nexport { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { createSlideStyles } from './createSlideStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\n\nexport { PositioningConfigurationProvider } from './PositioningConfigurationContext';\n\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { useSafeZoneArea } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport type { UseSafeZoneOptions } from './hooks/useSafeZoneArea/useSafeZoneArea';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\n\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 PositioningConfigurationFn,\n PositioningConfigurationFnOptions,\n} from './types';\n"],"names":["createVirtualElementFromClick","usePositioningSlideDirection","POSITIONING_SLIDE_DIRECTION_VAR_X","POSITIONING_SLIDE_DIRECTION_VAR_Y","createArrowHeightStyles","createArrowStyles","createSlideStyles","PositioningConfigurationProvider","usePositioning","usePositioningMouseTarget","useSafeZoneArea","resolvePositioningShorthand","mergeArrowOffset"],"mappings":"AAAA,SAASA,6BAA6B,QAAQ,kCAAkC;AAChF,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,iCAAiC,EAAEC,iCAAiC,QAAQ,cAAc;AACnG,SAASC,uBAAuB,EAAEC,iBAAiB,QAAQ,sBAAsB;AACjF,4DAA4D;AAC5D,SAASC,iBAAiB,QAAQ,sBAAsB;AAGxD,SAASC,gCAAgC,QAAQ,oCAAoC;AAErF,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,eAAe,QAAQ,0CAA0C;AAE1E,SAASC,2BAA2B,EAAEC,gBAAgB,QAAQ,gBAAgB"}

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;
}
};
}

View File

@@ -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"],"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"}

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
}
});
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/flip.ts"],"sourcesContent":["import { flip as baseFlip, Placement, Middleware } 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): Middleware {\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"],"mappings":"AAAA,SAASA,QAAQC,QAAQ,QAA+B,mBAAmB;AAE3E,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"}

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';

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"],"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"}

View File

@@ -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
}
};
}
};
}

View File

@@ -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"],"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"}

View File

@@ -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
}
};
}
};
}

View File

@@ -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"],"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,GAAGc,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"}

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

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 transform offset value.
*/ export function offset(offsetValue) {
const floatingUIOffset = getFloatingUIOffset(offsetValue);
return baseOffset(floatingUIOffset);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/offset.ts"],"sourcesContent":["import { offset as baseOffset, Middleware } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getFloatingUIOffset } from '../utils/getFloatingUIOffset';\n\n/**\n * Wraps floating UI offset middleware to transform offset value.\n */\nexport function offset(offsetValue: PositioningOptions['offset']): Middleware {\n const floatingUIOffset = getFloatingUIOffset(offsetValue);\n return baseOffset(floatingUIOffset);\n}\n"],"names":["offset","baseOffset","getFloatingUIOffset","offsetValue","floatingUIOffset"],"mappings":"AAAA,SAASA,UAAUC,UAAU,QAAoB,mBAAmB;AAEpE,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE;;CAEC,GACD,OAAO,SAASF,OAAOG,WAAyC;IAC9D,MAAMC,mBAAmBF,oBAAoBC;IAC7C,OAAOF,WAAWG;AACpB"}

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)
}
});
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/middleware/shift.ts"],"sourcesContent":["import { shift as baseShift, limitShift, Middleware } 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): Middleware {\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"],"mappings":"AAAA,SAASA,SAASC,SAAS,EAAEC,UAAU,QAAoB,mBAAmB;AAE9E,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"}

View File

@@ -0,0 +1 @@
import * as React from 'react';

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,143 @@
'use client';
import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
import { POSITIONING_END_EVENT } from './constants';
import { createPositionManager } from './createPositionManager';
import { usePositioningOptions } from './usePositioningOptions';
import { useCallbackRef, hasAutofocusFilter } from './utils';
/**
* @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('usePositioning():', node);
// eslint-disable-next-line no-console
console.warn([
'usePositioning(): ^ 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((e)=>{
var _options_onPositioningEnd;
return (_options_onPositioningEnd = options.onPositioningEnd) === null || _options_onPositioningEnd === void 0 ? void 0 : _options_onPositioningEnd.call(options, e);
});
const setContainer = useCallbackRef(null, (container)=>{
if (containerRef.current !== container) {
var // Cast because CustomEvent<OnPositioningEndEventDetail> is not assignable to EventListener
_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
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,36 @@
'use client';
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
];
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/usePositioningMouseTarget.ts"],"sourcesContent":["'use client';\n\nimport * 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): readonly [PositioningVirtualElement | undefined, SetVirtualMouseTarget] => {\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"],"mappings":"AAAA;AAEA,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"}

View File

@@ -0,0 +1,132 @@
'use client';
import { devtools } from '@floating-ui/devtools';
import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import * as React from 'react';
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 { toFloatingUIPlacement, hasScrollParent, normalizeAutoSize } from './utils';
import { devtoolsCallback } from './utils/devtools';
import { usePositioningConfiguration } from './PositioningConfigurationContext';
/**
* @internal
*
* This is redundant and exists only to manage React dependencies properly & avoid leaking individual options to the
* scope of `usePositioningOptions`.
*/ function usePositioningConfigFn(configFn, options) {
const { align, arrowPadding, autoSize, coverTarget, disableUpdateOnResize, flipBoundary, offset, overflowBoundary, pinned, position, // eslint-disable-next-line @typescript-eslint/naming-convention
unstable_disableTether, strategy, overflowBoundaryPadding, fallbackPositions, useTransform, matchTargetSize, shiftToCoverTarget } = options;
return React.useCallback((container, arrow)=>{
return configFn({
container,
arrow,
options: {
autoSize,
disableUpdateOnResize,
matchTargetSize,
offset,
strategy,
coverTarget,
flipBoundary,
overflowBoundary,
useTransform,
overflowBoundaryPadding,
pinned,
arrowPadding,
align,
fallbackPositions,
shiftToCoverTarget,
position,
// eslint-disable-next-line @typescript-eslint/naming-convention
unstable_disableTether
}
});
}, [
autoSize,
disableUpdateOnResize,
matchTargetSize,
offset,
strategy,
coverTarget,
flipBoundary,
overflowBoundary,
useTransform,
overflowBoundaryPadding,
pinned,
arrowPadding,
align,
fallbackPositions,
shiftToCoverTarget,
position,
unstable_disableTether,
configFn
]);
}
/**
* @internal
*/ export function usePositioningOptions(options) {
const { dir, targetDocument } = useFluent();
const isRtl = dir === 'rtl';
const configFn = usePositioningConfigFn(usePositioningConfiguration(), options);
const { // eslint-disable-next-line @typescript-eslint/no-deprecated
positionFixed } = options;
return React.useCallback((container, arrow)=>{
const hasScrollableElement = hasScrollParent(container);
const optionsAfterEnhancement = configFn(container, arrow);
const { autoSize, disableUpdateOnResize, matchTargetSize, offset, coverTarget, flipBoundary, overflowBoundary, useTransform, overflowBoundaryPadding, pinned, position, arrowPadding, strategy, align, fallbackPositions, shiftToCoverTarget, // eslint-disable-next-line @typescript-eslint/naming-convention
unstable_disableTether } = optionsAfterEnhancement;
const normalizedAutoSize = normalizeAutoSize(autoSize);
const middleware = [
normalizedAutoSize && resetMaxSizeMiddleware(normalizedAutoSize),
matchTargetSize && matchTargetSizeMiddleware(),
offset && offsetMiddleware(offset),
coverTarget && coverTargetMiddleware(),
!pinned && flipMiddleware({
container,
flipBoundary,
hasScrollableElement,
isRtl,
fallbackPositions
}),
shiftMiddleware({
container,
hasScrollableElement,
overflowBoundary,
disableTether: unstable_disableTether,
overflowBoundaryPadding,
isRtl,
shiftToCoverTarget
}),
normalizedAutoSize && maxSizeMiddleware(normalizedAutoSize, {
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(optionsAfterEnhancement))
].filter(Boolean);
const placement = toFloatingUIPlacement(align, position, isRtl);
return {
placement,
middleware,
strategy: (strategy !== null && strategy !== void 0 ? strategy : positionFixed) ? 'fixed' : 'absolute',
disableUpdateOnResize,
useTransform
};
}, [
configFn,
isRtl,
targetDocument,
positionFixed
]);
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,78 @@
'use client';
import * as React from 'react';
import { useEventCallback, isHTMLElement } from '@fluentui/react-utilities';
import { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';
/**
* Returns the slide direction unit vectors for a given Floating UI placement.
* Values are -1, 0, or 1, representing the direction the element slides in from.
*/ export function getPlacementSlideDirections(placement) {
const side = placement.split('-')[0];
// Default to sliding down from the top side
let x = 0;
let y = 1;
if (side === 'right') {
x = -1;
y = 0;
} else if (side === 'bottom') {
x = 0;
y = -1;
} else if (side === 'left') {
x = 1;
y = 0;
}
return {
x,
y
};
}
/**
* A hook that manages CSS custom properties for slide direction based on positioning placement.
*
* It wraps the `onPositioningEnd` callback to set `--fui-positioning-slide-direction-x` and
* `--fui-positioning-slide-direction-y` CSS custom properties on the positioned element,
* and registers them via `CSS.registerProperty` to avoid properties propagation down to a DOM tree.
*
* @returns The wrapped `onPositioningEnd` handler to pass to the positioning config.
*/ export function usePositioningSlideDirection(options) {
const { targetDocument, onPositioningEnd } = options;
const handlePositionEnd = useEventCallback((e)=>{
onPositioningEnd === null || onPositioningEnd === void 0 ? void 0 : onPositioningEnd(e);
const element = e.target;
const placement = e.detail.placement;
if (!isHTMLElement(element)) {
return;
}
const { x, y } = getPlacementSlideDirections(placement);
element.style.setProperty(POSITIONING_SLIDE_DIRECTION_VAR_X, `${x}px`);
element.style.setProperty(POSITIONING_SLIDE_DIRECTION_VAR_Y, `${y}px`);
});
// Register the CSS custom properties so they can be interpolated during animations.
// CSS.registerProperty is idempotent — the try/catch handles the case where
// properties are already registered.
React.useEffect(()=>{
var _targetDocument_defaultView_CSS, _targetDocument_defaultView;
var _targetDocument_defaultView_CSS_registerProperty;
const registerProperty = (_targetDocument_defaultView_CSS_registerProperty = targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : (_targetDocument_defaultView_CSS = _targetDocument_defaultView.CSS) === null || _targetDocument_defaultView_CSS === void 0 ? void 0 : _targetDocument_defaultView_CSS.registerProperty) !== null && _targetDocument_defaultView_CSS_registerProperty !== void 0 ? _targetDocument_defaultView_CSS_registerProperty : ()=>{
// No-op if registerProperty is not supported
};
try {
registerProperty({
name: POSITIONING_SLIDE_DIRECTION_VAR_X,
syntax: '<length>',
inherits: false,
initialValue: '0px'
});
registerProperty({
name: POSITIONING_SLIDE_DIRECTION_VAR_Y,
syntax: '<length>',
inherits: false,
initialValue: '0px'
});
} catch (e) {
// Ignore errors from registerProperty, which can occur if the properties are already registered
}
}, [
targetDocument
]);
return handlePositionEnd;
}

File diff suppressed because one or more lines are too long

View File

@@ -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);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/createResizeObserver.ts"],"sourcesContent":["export function createResizeObserver(\n targetWindow: Window & typeof globalThis,\n callback: ResizeObserverCallback,\n): ResizeObserver {\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"],"mappings":"AAAA,OAAO,SAASA,qBACdC,YAAwC,EACxCC,QAAgC;IAEhC,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"}

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;
};
}

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"],"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"}

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)
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/devtools.ts"],"sourcesContent":["import type { MiddlewareState } from '@floating-ui/dom';\nimport type { PositioningOptions, Position, Alignment } from '../types';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport { listScrollParents } from './listScrollParents';\nimport { fromFloatingUIPlacement } from './fromFloatingUIPlacement';\n\nexport const devtoolsCallback =\n (options: Pick<PositioningOptions, 'flipBoundary' | 'overflowBoundary'>) =>\n (\n middlewareState: MiddlewareState,\n ): {\n type: 'FluentUIMiddleware';\n middlewareState: MiddlewareState;\n options: Pick<PositioningOptions, 'flipBoundary' | 'overflowBoundary'>;\n initialPlacement: { position: Position; alignment?: Alignment };\n placement: { position: Position; alignment?: Alignment };\n flipBoundaries: HTMLElement[];\n overflowBoundaries: HTMLElement[];\n scrollParents: HTMLElement[];\n } => {\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"],"mappings":"AAEA,SAASA,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE,OAAO,MAAMC,mBACX,CAACC,UACD,CACEC;QAWA,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"}

View File

@@ -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
};
};

View File

@@ -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"],"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"}

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;
}

View File

@@ -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"],"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"}

View File

@@ -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
});
};
}

View File

@@ -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"],"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"}

View File

@@ -0,0 +1,42 @@
import * as React from 'react';
var WorkTag = /*#__PURE__*/ 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";
return 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

View File

@@ -0,0 +1,55 @@
/**
* Returns the parent node or the host of the node argument.
* @param node - DOM node.
* @returns - parent DOM node.
*/ 'use client';
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.
*/ export const getStyleComputedProperty = (node)=>{
var _node_ownerDocument;
if (node.nodeType !== 1) {
return {};
}
const targetWindow = (_node_ownerDocument = node.ownerDocument) === null || _node_ownerDocument === void 0 ? void 0 : _node_ownerDocument.defaultView;
if (targetWindow) {
return targetWindow.getComputedStyle(node, null);
}
return {};
};
/**
* 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;
};

View File

@@ -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 */\n\n'use client';\n\nexport const getParentNode = (node: HTMLElement): HTMLElement => {\n if (node.nodeName === 'HTML') {\n return node;\n }\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 */\nexport const getStyleComputedProperty = (node: HTMLElement): Partial<CSSStyleDeclaration> => {\n if (node.nodeType !== 1) {\n return {};\n }\n\n const targetWindow = node.ownerDocument?.defaultView;\n\n if (targetWindow) {\n return targetWindow.getComputedStyle(node, null);\n }\n\n return {};\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\n return scrollParentElement ? scrollParentElement !== scrollParentElement.ownerDocument?.body : false;\n};\n"],"names":["getParentNode","node","nodeName","parentNode","host","getStyleComputedProperty","nodeType","targetWindow","ownerDocument","defaultView","getComputedStyle","getScrollParent","document","body","overflow","overflowX","overflowY","test","hasScrollParent","scrollParentElement"],"mappings":"AAAA;;;;CAIC,GAED;AAEA,OAAO,MAAMA,gBAAgB,CAACC;IAC5B,IAAIA,KAAKC,QAAQ,KAAK,QAAQ;QAC5B,OAAOD;IACT;IAEA,8DAA8D;IAC9D,OAAOA,KAAKE,UAAU,IAAI,AAACF,KAAaG,IAAI;AAC9C,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CAACJ;QAKlBA;IAJrB,IAAIA,KAAKK,QAAQ,KAAK,GAAG;QACvB,OAAO,CAAC;IACV;IAEA,MAAMC,gBAAeN,sBAAAA,KAAKO,aAAa,cAAlBP,0CAAAA,oBAAoBQ,WAAW;IAEpD,IAAIF,cAAc;QAChB,OAAOA,aAAaG,gBAAgB,CAACT,MAAM;IAC7C;IAEA,OAAO,CAAC;AACV,EAAE;AAEF;;;;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;QAGuBkB;IAFrD,MAAMA,sBAAmCR,gBAAgBV;IAEzD,OAAOkB,sBAAsBA,0BAAwBA,qCAAAA,oBAAoBX,aAAa,cAAjCW,yDAAAA,mCAAmCN,IAAI,IAAG;AACjG,EAAE"}

View File

@@ -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;
}

View File

@@ -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): number {\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"],"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"}

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';

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"],"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"}

View File

@@ -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;
}

View File

@@ -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"],"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"}

View File

@@ -0,0 +1,38 @@
'use client';
/**
* 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
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/mergeArrowOffset.ts"],"sourcesContent":["'use client';\n\nimport 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"],"mappings":"AAAA;AAIA;;;;;;;;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"}

View File

@@ -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;
}
};

View File

@@ -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"],"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"}

View File

@@ -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]
};
}

View File

@@ -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"],"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"}

View File

@@ -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;
}

View File

@@ -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"],"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"}

View File

@@ -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;
}

View File

@@ -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"],"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"}

View File

@@ -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;
};

View File

@@ -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"],"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,GAAGD,iBAAiB,CAAC,EAAEC,mBAAmB;IACnD;IAEA,OAAOD;AACT,EAAE"}

View File

@@ -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);
}
}

View File

@@ -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): void {\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"],"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"}

View File

@@ -0,0 +1,50 @@
'use client';
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;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/useCallbackRef.ts"],"sourcesContent":["'use client';\n\nimport * 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 // eslint-disable-next-line @typescript-eslint/no-deprecated\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"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,SAASC,eACdC,YAAsB,EACtBC,QAA2D,EAC3DC,kBAA4B;IAG5B,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"}

View File

@@ -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` : ''
});
}

View File

@@ -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 }): void {\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"],"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,GAAGP,OAAO,EAAE,CAAC,GAAG;QAChEQ,KAAKN,WAAW,QAAQA,WAAWK,YAAY,GAAGL,OAAO,EAAE,CAAC,GAAG;IACjE;AACF"}

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