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,32 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
PositioningConfigurationProvider: function() {
return PositioningConfigurationProvider;
},
usePositioningConfiguration: function() {
return usePositioningConfiguration;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
// ---
const DEFAULT_CONFIGURATION = ({ options })=>{
return options;
};
// ---
const PositioningConfigurationContext = /*#__PURE__*/ _react.createContext(undefined);
const PositioningConfigurationProvider = PositioningConfigurationContext.Provider;
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;;;;;;;;;;;;IAoBaM,gCAAAA;;;+BAEAE;;;;;iEApBU,QAAQ;AAG/B,MAAM;AAEN,MAAMP,wBAAoD,CAAC,EAAEC,OAAO,EAAE;IACpE,OAAOA;AACT;AAEA,MAAM;AAEN,MAAMC,gDAAkCH,OAAMI,aAAa,CAAyCC;AAO7F,yCAAyCF,gCAAgCI,QAAQ,CAAC;AAElF,MAAMC,8BAA8B;QAClCR;IAAP,OAAOA,CAAAA,oBAAAA,OAAMS,UAAU,CAACN,gCAAAA,MAAAA,QAAjBH,sBAAAA,KAAAA,IAAAA,oBAAqDC;AAC9D,EAAE"}

View File

@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DATA_POSITIONING_ESCAPED: function() {
return DATA_POSITIONING_ESCAPED;
},
DATA_POSITIONING_HIDDEN: function() {
return DATA_POSITIONING_HIDDEN;
},
DATA_POSITIONING_INTERSECTING: function() {
return DATA_POSITIONING_INTERSECTING;
},
DATA_POSITIONING_PLACEMENT: function() {
return DATA_POSITIONING_PLACEMENT;
},
POSITIONING_END_EVENT: function() {
return POSITIONING_END_EVENT;
},
POSITIONING_SLIDE_DIRECTION_VAR_X: function() {
return POSITIONING_SLIDE_DIRECTION_VAR_X;
},
POSITIONING_SLIDE_DIRECTION_VAR_Y: function() {
return POSITIONING_SLIDE_DIRECTION_VAR_Y;
}
});
const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';
const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';
const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';
const POSITIONING_END_EVENT = 'fui-positioningend';
const POSITIONING_SLIDE_DIRECTION_VAR_X = '--fui-positioning-slide-direction-x';
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":";;;;;;;;;;;IACaC,wBAAAA;;;2BACAC;;;iCAFAF;;;8BAGAG;;;yBACAC;;;qCAOAC;;;qCACAC;;;;AAZN,MAAMN,gCAAgC,8BAA8B;AACpE,iCAAiC,sBAAsB;AACvD,MAAME,0BAA0B,+BAA+B;AAC/D,MAAMC,6BAA6B,wBAAwB;AAC3D,MAAMC,wBAAwB,qBAAqB;AAOnD,MAAMC,oCAAoC,sCAAsC;AAChF,MAAMC,oCAAoC,sCAAsC"}

View File

@@ -0,0 +1,71 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
createArrowHeightStyles: function() {
return createArrowHeightStyles;
},
createArrowStyles: function() {
return createArrowStyles;
}
});
const _reacttheme = require("@fluentui/react-theme");
function createArrowStyles(options) {
const { arrowHeight, borderWidth = '1px', borderStyle = 'solid', borderColor = _reacttheme.tokens.colorTransparentStroke } = options;
return {
boxSizing: 'border-box',
position: 'absolute',
zIndex: -1,
...arrowHeight && createArrowHeightStyles(arrowHeight),
backgroundColor: 'inherit',
backgroundClip: 'content-box',
borderBottomLeftRadius: `${_reacttheme.tokens.borderRadiusSmall} /* @noflip */`,
transform: 'rotate(var(--fui-positioning-arrow-angle)) /* @noflip */',
height: 'var(--fui-positioning-arrow-height)',
width: 'var(--fui-positioning-arrow-height)',
'::before': {
content: '""',
display: 'block',
backgroundColor: 'inherit',
margin: `-${borderWidth}`,
width: '100%',
height: '100%',
border: `${borderWidth} ${borderStyle} ${borderColor}`,
borderBottomLeftRadius: `${_reacttheme.tokens.borderRadiusSmall} /* @noflip */`,
clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)'
},
// Popper sets data-popper-placement on the root element, which is used to align the arrow
':global([data-popper-placement^="top"])': {
bottom: 'var(--fui-positioning-arrow-offset)',
'--fui-positioning-arrow-angle': '-45deg'
},
':global([data-popper-placement^="right"])': {
left: `var(--fui-positioning-arrow-offset) /* @noflip */`,
'--fui-positioning-arrow-angle': '45deg'
},
':global([data-popper-placement^="bottom"])': {
top: 'var(--fui-positioning-arrow-offset)',
'--fui-positioning-arrow-angle': '135deg'
},
':global([data-popper-placement^="left"])': {
right: `var(--fui-positioning-arrow-offset) /* @noflip */`,
'--fui-positioning-arrow-angle': '225deg'
}
};
}
function createArrowHeightStyles(arrowHeight) {
// The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
// Multiply the triangle's height by sqrt(2) to get length of its edges.
const edgeLength = 1.414 * arrowHeight;
return {
'--fui-positioning-arrow-height': `${edgeLength}px`,
'--fui-positioning-arrow-offset': `${edgeLength / 2 * -1}px`
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,146 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createPositionManager", {
enumerable: true,
get: function() {
return createPositionManager;
}
});
const _dom = require("@floating-ui/dom");
const _reactutilities = require("@fluentui/react-utilities");
const _utils = require("./utils");
const _listScrollParents = require("./utils/listScrollParents");
const _constants = require("./constants");
const _createResizeObserver = require("./utils/createResizeObserver");
function createPositionManager(options) {
let isDestroyed = false;
const { container, target, arrow, strategy, middleware, placement, useTransform = true, disableUpdateOnResize = false } = options;
const targetWindow = container.ownerDocument.defaultView;
if (!target || !container || !targetWindow) {
return {
updatePosition: ()=>undefined,
dispose: ()=>undefined
};
}
// When the dimensions of the target or the container change - trigger a position update
const resizeObserver = disableUpdateOnResize ? null : (0, _createResizeObserver.createResizeObserver)(targetWindow, (entries)=>{
// If content rect dimensions to go 0 -> very likely that `display: none` is being used to hide the element
// In this case don't update and let users update imperatively
const shouldUpdateOnResize = entries.every((entry)=>{
return entry.contentRect.width > 0 && entry.contentRect.height > 0;
});
if (shouldUpdateOnResize) {
updatePosition();
}
});
let isFirstUpdate = true;
const scrollParents = new Set();
// When the container is first resolved, set position `fixed` to avoid scroll jumps.
// Without this scroll jumps can occur when the element is rendered initially and receives focus
Object.assign(container.style, {
position: 'fixed',
left: 0,
top: 0,
margin: 0
});
const forceUpdate = ()=>{
// debounced update can still occur afterwards
// early return to avoid memory leaks
if (isDestroyed) {
return;
}
if (isFirstUpdate) {
(0, _listScrollParents.listScrollParents)(container).forEach((scrollParent)=>scrollParents.add(scrollParent));
if ((0, _reactutilities.isHTMLElement)(target)) {
(0, _listScrollParents.listScrollParents)(target).forEach((scrollParent)=>scrollParents.add(scrollParent));
}
scrollParents.forEach((scrollParent)=>{
scrollParent.addEventListener('scroll', updatePosition, {
passive: true
});
});
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(container);
if ((0, _reactutilities.isHTMLElement)(target)) {
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(target);
}
isFirstUpdate = false;
}
Object.assign(container.style, {
position: strategy
});
(0, _dom.computePosition)(target, container, {
placement,
middleware,
strategy
}).then(({ x, y, middlewareData, placement: computedPlacement })=>{
// Promise can still resolve after destruction
// early return to avoid applying outdated position
if (isDestroyed) {
return;
}
(0, _utils.writeArrowUpdates)({
arrow,
middlewareData
});
(0, _utils.writeContainerUpdates)({
container,
middlewareData,
placement: computedPlacement,
coordinates: {
x,
y
},
lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,
strategy,
useTransform
});
container.dispatchEvent(new CustomEvent(_constants.POSITIONING_END_EVENT, {
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 = (0, _utils.debounce)(()=>forceUpdate());
const dispose = ()=>{
isDestroyed = true;
if (targetWindow) {
targetWindow.removeEventListener('scroll', updatePosition);
targetWindow.removeEventListener('resize', updatePosition);
}
scrollParents.forEach((scrollParent)=>{
scrollParent.removeEventListener('scroll', updatePosition);
});
scrollParents.clear();
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
};
if (targetWindow) {
targetWindow.addEventListener('scroll', updatePosition, {
passive: true
});
targetWindow.addEventListener('resize', updatePosition);
}
// Update the position on initialization
updatePosition();
return {
updatePosition,
dispose
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,69 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createSlideStyles", {
enumerable: true,
get: function() {
return createSlideStyles;
}
});
const _reacttheme = require("@fluentui/react-theme");
const _constants = require("./constants");
function createSlideStyles(mainAxis) {
// 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: _reacttheme.tokens.durationSlower,
animationTimingFunction: _reacttheme.tokens.curveDecelerateMid,
[slideDistanceVarX]: `0px`,
[slideDistanceVarY]: `${mainAxis}px`,
[`&[${_constants.DATA_POSITIONING_PLACEMENT}^=right]`]: {
[slideDistanceVarX]: `-${mainAxis}px`,
[slideDistanceVarY]: '0px'
},
[`&[${_constants.DATA_POSITIONING_PLACEMENT}^=bottom]`]: {
[slideDistanceVarX]: '0px',
[slideDistanceVarY]: `-${mainAxis}px`
},
[`&[${_constants.DATA_POSITIONING_PLACEMENT}^=left]`]: {
[slideDistanceVarX]: `${mainAxis}px`,
[slideDistanceVarY]: '0px'
},
animationName: [
fadeIn,
{
from: {
transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`
},
to: {}
}
],
// Note: at-rules have more specificity in Griffel
'@media(prefers-reduced-motion)': {
[`&[${_constants.DATA_POSITIONING_PLACEMENT}]`]: {
animationDuration: '1ms',
animationName: fadeIn
}
},
// Tested in Firefox 79
'@supports not (animation-composition: accumulate)': {
[`&[${_constants.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":";;;;+BAYgBE;;;;;;4BAZO,wBAAwB;2BAEJ,cAAc;AAUlD,2BAA2BC,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,kBAAAA,CAAOY,cAAc;QACxCC,yBAAyBb,kBAAAA,CAAOc,kBAAkB;QAClD,CAACN,kBAAkB,EAAE,CAAC,GAAG,CAAC;QAC1B,CAACC,kBAAkB,EAAE,GAAGN,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,EAAE,EAAEF,qCAAAA,CAA2B,QAAQ,CAAC,CAAC,EAAE;YAC3C,CAACO,kBAAkB,EAAE,CAAC,CAAC,EAAEL,SAAS,EAAE,CAAC;YACrC,CAACM,kBAAkB,EAAE;QACvB;QAEA,CAAC,CAAC,EAAE,EAAER,qCAAAA,CAA2B,SAAS,CAAC,CAAC,EAAE;YAC5C,CAACO,kBAAkB,EAAE;YACrB,CAACC,kBAAkB,EAAE,CAAC,CAAC,EAAEN,SAAS,EAAE,CAAC;QACvC;QAEA,CAAC,CAAC,EAAE,EAAEF,qCAAAA,CAA2B,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,qCAAAA,CAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCU,mBAAmB;gBACnBI,eAAeX;YACjB;QACF;QAEA,uBAAuB;QACvB,qDAAqD;YACnD,CAAC,CAAC,EAAE,EAAEH,qCAAAA,CAA2B,CAAC,CAAC,CAAC,EAAE;gBACpCc,eAAeX;YACjB;QACF;IACF;AACF"}

View File

@@ -0,0 +1,34 @@
/**
* 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
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createVirtualElementFromClick", {
enumerable: true,
get: function() {
return createVirtualElementFromClick;
}
});
function createVirtualElementFromClick(nativeEvent) {
const left = nativeEvent.clientX;
const top = nativeEvent.clientY;
const right = left + 1;
const bottom = top + 1;
function getBoundingClientRect() {
return {
left,
top,
right,
bottom,
x: left,
y: top,
height: 1,
width: 1
};
}
return {
getBoundingClientRect
};
}

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;;;;;;;;;;AAAO,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,169 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SafeZoneArea: function() {
return SafeZoneArea;
},
isSameCoordinates: function() {
return isSameCoordinates;
},
isSameRect: function() {
return isSameRect;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = require("@griffel/react");
const _reactutilities = require("@fluentui/react-utilities");
const _react1 = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _shim = require("use-sync-external-store/shim");
const _getRectCorners = require("./getRectCorners");
const _getMouseAnchor = require("./getMouseAnchor");
const _pointsToSvgPath = require("./pointsToSvgPath");
const _SafeZoneAreastyles = require("./SafeZoneArea.styles");
const _computeOutsideClipPath = require("./computeOutsideClipPath");
// ---
const EMPTY_RECT = {
top: 0,
right: 0,
bottom: 0,
left: 0,
width: 0,
height: 0,
x: 0,
y: 0,
toJSON () {
return '';
}
};
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;
}
function isSameCoordinates(a, b) {
return a[0] === b[0] && a[1] === b[1];
}
const SafeZoneArea = /*#__PURE__*/ _react1.memo((props)=>{
const { debug, onMouseEnter, onMouseMove, onMouseLeave, stateStore } = props;
const clipPathId = (0, _reactutilities.useId)();
const styles = (0, _SafeZoneAreastyles.useStyles)();
const active = (0, _shim.useSyncExternalStore)(stateStore.subscribe, stateStore.isActive);
const svgRef = _react1.useRef(null);
const [state, setState] = _react1.useState(()=>({
containerRect: EMPTY_RECT,
targetRect: EMPTY_RECT,
mouseCoordinates: [
0,
0
]
}));
_react1.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 = (0, _getRectCorners.getRectCorners)(containerRect, [
leftOffset,
topOffset
]);
const targetCorners = (0, _getRectCorners.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 = (0, _getMouseAnchor.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 = (0, _computeOutsideClipPath.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__*/ _react1.createElement("div", {
className: (0, _react.mergeClasses)(styles.wrapper, active && styles.wrapperActive),
"data-safe-zone": ""
}, active ? /*#__PURE__*/ _react1.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__*/ _react1.createElement("g", {
className: (0, _react.mergeClasses)(styles.triangle, debug && styles.triangleDebug),
clipPath: `url(#${clipPathId})`,
onMouseEnter: onMouseEnter,
onMouseMove: onMouseMove,
onMouseLeave: onMouseLeave
}, /*#__PURE__*/ _react1.createElement("path", {
d: (0, _pointsToSvgPath.pointsToSvgPath)(triangleA)
}), /*#__PURE__*/ _react1.createElement("path", {
d: (0, _pointsToSvgPath.pointsToSvgPath)(triangleB)
}), /*#__PURE__*/ _react1.createElement("path", {
d: (0, _pointsToSvgPath.pointsToSvgPath)(triangleC)
}), /*#__PURE__*/ _react1.createElement("path", {
d: (0, _pointsToSvgPath.pointsToSvgPath)(triangleD)
})), /*#__PURE__*/ _react1.createElement("clipPath", {
id: clipPathId
}, /*#__PURE__*/ _react1.createElement("path", {
d: clipPath
})), debug && /*#__PURE__*/ _react1.createElement("path", {
className: styles.rectDebug,
d: clipPath
})) : null);
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,60 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useStyles", {
enumerable: true,
get: function() {
return useStyles;
}
});
const _react = require("@griffel/react");
const useStyles = /*#__PURE__*/ (0, _react.__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,"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"],"names":["__styles","tokens","useStyles","wrapper","mc9l5x","Bqenvij","a9b677","Bkecrkj","wrapperActive","svg","Bkfmm31","qhf8xq","Bhzewxz","oyh7mz","triangle","triangleDebug","Bceei9c","rectDebug","d"],"mappings":"AAAA,YAAY;;;;;+BAGCE,SAAS;;;;;;uBAFK,gBAAgB;AAEpC,kBAAe,WAAA,OAAGF,eAAA,EAAA;IAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,GAAA,EAAA;QAAAC,OAAA,EAAA;QAAAH,OAAA,EAAA;QAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA,EAAA;QAAAP,OAAA,EAAA;IAAA;IAAAQ,aAAA,EAAA;QAAAC,OAAA,EAAA;QAAAN,OAAA,EAAA;IAAA;IAAAO,SAAA,EAAA;QAAAP,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAQ,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA2BxB,CAAC"}

View File

@@ -0,0 +1,41 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useStyles", {
enumerable: true,
get: function() {
return useStyles;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const useStyles = (0, _react.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, ${_reacttheme.tokens.colorPaletteGreenBackground3} 20%, transparent)`
},
rectDebug: {
fill: `color-mix(in srgb, ${_reacttheme.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;;;;;+BAKaE;;;;;;uBAHc,iBAAiB;4BACrB,wBAAwB;AAExC,sBAAkBF,iBAAAA,EAAW;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,kBAAAA,CAAOgB,4BAA4B,CAAC,kBAAkB,CAAC;IACrF;IACAC,WAAW;QACTR,MAAM,CAAC,mBAAmB,EAAET,kBAAAA,CAAOkB,0BAA0B,CAAC,kBAAkB,CAAC;IACnF;AACF,GAAG"}

View File

@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "computeOutsideClipPath", {
enumerable: true,
get: function() {
return computeOutsideClipPath;
}
});
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;
}
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":";;;;;;;eAwBgBO;;;AAxBhB,SAASP,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;AAOO,gCACLI,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,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createSafeZoneAreaStateStore", {
enumerable: true,
get: function() {
return createSafeZoneAreaStateStore;
}
});
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":";;;;+BAAgBA;;;;;;AAAT;IAKL,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,62 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
getMouseAnchor: function() {
return getMouseAnchor;
},
getUnitVector: function() {
return getUnitVector;
},
measureDistance: function() {
return measureDistance;
}
});
const OFFSET_DISTANCE = 20;
function measureDistance(a, b) {
return Math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2);
}
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
];
}
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":";;;;;;;;;;;IA+BgBQ,cAAAA;;;iBAhBAF;;;mBARAL;;;;AALhB,MAAMD,kBAAkB;AAKjB,SAASC,gBAAgBC,CAAQ,EAAEC,CAAQ;IAChD,OAAOC,KAAKC,IAAI,CAAEH,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAA,AAAC,KAAM,IAAKD,CAAAA,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAA,AAAC,KAAM;AACzD;AAMO,SAASG,cAAcJ,CAAQ,EAAEC,CAAQ;IAC9C,MAAMI,WAAWN,gBAAgBC,GAAGC;IAEpC,IAAII,aAAa,GAAG;QAClB,OAAO;YAAC;YAAG;SAAE;IACf;IAEA,OAAO;SAAEL,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAC,AAAD,IAAMI;SAAWL,CAAC,CAAC,EAAE,GAAGC,CAAC,CAAC,EAAA,AAAC,IAAKI;KAAS;AAC7D;AAQO,wBAAwBE,aAAoB,EAAEC,iBAAwB,EAAEC,gBAAuB;IACpG,MAAMC,kBAAyB;SAC5BH,aAAa,CAAC,EAAE,GAAGC,iBAAiB,CAAC,EAAA,AAAC,IAAK;SAC3CD,aAAa,CAAC,EAAE,GAAGC,iBAAiB,CAAC,EAAA,AAAC,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,eAAAA,CAAc;QAC/DY,eAAe,CAAC,EAAE,GAAGC,UAAU,CAAC,EAAE,GAAIN,CAAAA,WAAWP,eAAAA,CAAc;KAChE;AACH"}

View File

@@ -0,0 +1,34 @@
/**
* Calculates the corners of a rectangle based on its DOMRect and an offset.
*
* @internal
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getRectCorners", {
enumerable: true,
get: function() {
return getRectCorners;
}
});
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;;;;;;;;;;AAAO,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,17 @@
/**
* Calculates the corners of a rectangle based on its DOMRect and an offset.
*
* @internal
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "pointsToSvgPath", {
enumerable: true,
get: function() {
return pointsToSvgPath;
}
});
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;;;;;;;;;;AAAO,SAASA,gBAAgBC,MAAe;IAC7C,OAAO,CAAC,EAAE,EAAEA,OAAO,EAAE,CAAC;AACxB"}

View File

@@ -0,0 +1,8 @@
/**
* A type representing a point in a 2D space as an array of two numbers (x & y coordinates).
*
* @internal
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

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,156 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useSafeZoneArea", {
enumerable: true,
get: function() {
return useSafeZoneArea;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _createSafeZoneAreaStateStore = require("./createSafeZoneAreaStateStore");
const _SafeZoneArea = require("./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;
function useSafeZoneArea({ debug = false, disabled = false, onSafeZoneEnter, onSafeZoneMove, onSafeZoneLeave, onSafeZoneTimeout, timeout = 1500 } = {}) {
const [stateStore] = _react.useState(_createSafeZoneAreaStateStore.createSafeZoneAreaStateStore);
const safeZoneAreaRef = _react.useRef(null);
const containerRef = _react.useRef(null);
const targetRef = _react.useRef(null);
const [setSafeZoneCloseTimeout, clearSafeZoneCloseTimeout] = (0, _reactutilities.useTimeout)();
const [requestUpdateFrame, clearUpdateFrame] = (0, _reactutilities.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 = (0, _reactutilities.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 = (0, _reactutilities.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 = (0, _reactutilities.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: (0, _reactutilities.useMergedRefs)(containerRef, containerListenerRef),
targetRef: (0, _reactutilities.useMergedRefs)(targetRef, targetListenerRef),
elementToRender: _react.useMemo(()=>disabled ? null : /*#__PURE__*/ _react.createElement(_SafeZoneArea.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

View File

@@ -0,0 +1,61 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
POSITIONING_SLIDE_DIRECTION_VAR_X: function() {
return _constants.POSITIONING_SLIDE_DIRECTION_VAR_X;
},
POSITIONING_SLIDE_DIRECTION_VAR_Y: function() {
return _constants.POSITIONING_SLIDE_DIRECTION_VAR_Y;
},
PositioningConfigurationProvider: function() {
return _PositioningConfigurationContext.PositioningConfigurationProvider;
},
createArrowHeightStyles: function() {
return _createArrowStyles.createArrowHeightStyles;
},
createArrowStyles: function() {
return _createArrowStyles.createArrowStyles;
},
createSlideStyles: function() {
return _createSlideStyles.createSlideStyles;
},
createVirtualElementFromClick: function() {
return _createVirtualElementFromClick.createVirtualElementFromClick;
},
mergeArrowOffset: function() {
return _index.mergeArrowOffset;
},
resolvePositioningShorthand: function() {
return _index.resolvePositioningShorthand;
},
usePositioning: function() {
return _usePositioning.usePositioning;
},
usePositioningMouseTarget: function() {
return _usePositioningMouseTarget.usePositioningMouseTarget;
},
usePositioningSlideDirection: function() {
return _usePositioningSlideDirection.usePositioningSlideDirection;
},
useSafeZoneArea: function() {
return _useSafeZoneArea.useSafeZoneArea;
}
});
const _createVirtualElementFromClick = require("./createVirtualElementFromClick");
const _usePositioningSlideDirection = require("./usePositioningSlideDirection");
const _constants = require("./constants");
const _createArrowStyles = require("./createArrowStyles");
const _createSlideStyles = require("./createSlideStyles");
const _PositioningConfigurationContext = require("./PositioningConfigurationContext");
const _usePositioning = require("./usePositioning");
const _usePositioningMouseTarget = require("./usePositioningMouseTarget");
const _useSafeZoneArea = require("./hooks/useSafeZoneArea/useSafeZoneArea");
const _index = require("./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":";;;;;;;;;;;IAESE,iCAAiC;;;;eAAEC,4CAAiC;;;eAMpEI,iEAAgC;;IALhCH;yDAAuB;;;eAAEC,oCAAiB;;;eAE1CC,oCAAiB;;iCALY;eAA7BN;;;eAc6BY,uBAAgB;;+BAAlB;eAA3BD;;;eAJAH,8BAAc;;IACdC;mEAAyB;;;eAVzBR,0DAA4B;;;eAW5BS,gCAAe;;;+CAZsB,kCAAkC;8CACnC,iCAAiC;2BACO,cAAc;mCACxC,sBAAsB;mCAE/C,sBAAsB;iDAGP,oCAAoC;gCAEtD,mBAAmB;2CACR,8BAA8B;iCACxC,0CAA0C;uBAEZ,gBAAgB"}

View File

@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "coverTarget", {
enumerable: true,
get: function() {
return coverTarget;
}
});
const _index = require("../utils/index");
function coverTarget() {
return {
name: 'coverTarget',
fn: (middlewareArguments)=>{
const { placement, rects, x, y } = middlewareArguments;
const basePlacement = (0, _index.parseFloatingUIPlacement)(placement).side;
const newCoords = {
x,
y
};
switch(basePlacement){
case 'bottom':
newCoords.y -= rects.reference.height;
break;
case 'top':
newCoords.y += rects.reference.height;
break;
case 'left':
newCoords.x += rects.reference.width;
break;
case 'right':
newCoords.x -= rects.reference.width;
break;
}
return newCoords;
}
};
}

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":";;;;+BAGgBC;;;;;;uBAFyB,iBAAiB;AAEnD;IACL,OAAO;QACLC,MAAM;QACNC,IAAIC,CAAAA;YACF,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAGJ;YACnC,MAAMK,gBAAgBT,mCAAAA,EAAyBK,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,36 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "flip", {
enumerable: true,
get: function() {
return flip;
}
});
const _dom = require("@floating-ui/dom");
const _index = require("../utils/index");
function flip(options) {
const { hasScrollableElement, flipBoundary, container, fallbackPositions = [], isRtl } = options;
const fallbackPlacements = fallbackPositions.reduce((acc, shorthand)=>{
const { position, align } = (0, _index.resolvePositioningShorthand)(shorthand);
const placement = (0, _index.toFloatingUIPlacement)(align, position, isRtl);
if (placement) {
acc.push(placement);
}
return acc;
}, []);
return (0, _dom.flip)({
...hasScrollableElement && {
boundary: 'clippingAncestors'
},
...flipBoundary && {
altBoundary: true,
boundary: (0, _index.getBoundary)(container, flipBoundary)
},
fallbackStrategy: 'bestFit',
...fallbackPlacements.length && {
fallbackPlacements
}
});
}

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":";;;;+BAUgBA;;;;;;qBAVwC,mBAAmB;uBAEK,iBAAiB;AAQ1F,cAAcK,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,OAAGb,kCAAAA,EAA4BW;QACxD,MAAMG,gBAAYb,4BAAAA,EAAsBY,OAAOD,UAAUL;QACzD,IAAIO,WAAW;YACbJ,IAAIK,IAAI,CAACD;QACX;QACA,OAAOJ;IACT,GAAG,EAAE;IAEL,WAAOZ,SAAAA,EAAS;QACd,GAAIK,wBAAwB;YAAEa,UAAU;QAAoB,CAAC;QAC7D,GAAIZ,gBAAgB;YAAEa,aAAa;YAAMD,cAAUjB,kBAAAA,EAAYM,WAAWD;QAAc,CAAC;QACzFc,kBAAkB;QAClB,GAAIV,mBAAmBW,MAAM,IAAI;YAAEX;QAAmB,CAAC;IACzD;AACF"}

View File

@@ -0,0 +1,46 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
coverTarget: function() {
return _coverTarget.coverTarget;
},
flip: function() {
return _flip.flip;
},
intersecting: function() {
return _intersecting.intersecting;
},
matchTargetSize: function() {
return _matchTargetSize.matchTargetSize;
},
matchTargetSizeCssVar: function() {
return _matchTargetSize.matchTargetSizeCssVar;
},
maxSize: function() {
return _maxSize.maxSize;
},
offset: function() {
return _offset.offset;
},
resetMaxSize: function() {
return _maxSize.resetMaxSize;
},
shift: function() {
return _shift.shift;
}
});
const _coverTarget = require("./coverTarget");
const _flip = require("./flip");
const _intersecting = require("./intersecting");
const _maxSize = require("./maxSize");
const _offset = require("./offset");
const _shift = require("./shift");
const _matchTargetSize = require("./matchTargetSize");

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":";;;;;;;;;;;IAASA;uCAAW;;;eAEXC,UAAI;;;eACJC,0BAAY;;;eAMZK,gCAAe;;;eAAEC,sCAAqB;;;eAJtCL,gBAAO;;;eACPE,cAAM;;;eADGD,qBAAY;;;eAGrBE,YAAK;;;6BARc,gBAAgB;sBAEvB,SAAS;8BACD,iBAAiB;yBAER,YAAY;wBAC3B,WAAW;uBAEZ,UAAU;iCACuB,oBAAoB"}

View File

@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "intersecting", {
enumerable: true,
get: function() {
return intersecting;
}
});
const _dom = require("@floating-ui/dom");
function intersecting() {
return {
name: 'intersectionObserver',
fn: async (middlewareArguments)=>{
const floatingRect = middlewareArguments.rects.floating;
const altOverflow = await (0, _dom.detectOverflow)(middlewareArguments, {
altBoundary: true
});
const isIntersectingTop = altOverflow.top < floatingRect.height && altOverflow.top > 0;
const isIntersectingBottom = altOverflow.bottom < floatingRect.height && altOverflow.bottom > 0;
const isIntersecting = isIntersectingTop || isIntersectingBottom;
return {
data: {
intersecting: isIntersecting
}
};
}
};
}

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":";;;;+BAGgBC;;;;;;qBAFe,mBAAmB;AAE3C;IACL,OAAO;QACLC,MAAM;QACNC,IAAI,OAAMC;YACR,MAAMC,eAAeD,oBAAoBE,KAAK,CAACC,QAAQ;YACvD,MAAMC,cAAc,UAAMR,mBAAAA,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,43 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
matchTargetSize: function() {
return matchTargetSize;
},
matchTargetSizeCssVar: function() {
return matchTargetSizeCssVar;
}
});
const matchTargetSizeCssVar = '--fui-match-target-size';
function matchTargetSize() {
return {
name: 'matchTargetSize',
fn: async (middlewareArguments)=>{
const { rects: { reference: referenceRect, floating: floatingRect }, elements: { floating: floatingElement }, middlewareData: { matchTargetSize: { matchTargetSizeAttempt = false } = {} } } = middlewareArguments;
if (referenceRect.width === floatingRect.width || matchTargetSizeAttempt) {
return {};
}
const { width } = referenceRect;
floatingElement.style.setProperty(matchTargetSizeCssVar, `${width}px`);
if (!floatingElement.style.width) {
floatingElement.style.width = `var(${matchTargetSizeCssVar})`;
}
return {
data: {
matchTargetSizeAttempt: true
},
reset: {
rects: true
}
};
}
};
}

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":";;;;;;;;;;;IAIgBC,eAAAA;;;yBAFHD;;;;AAAN,MAAMA,wBAAwB,0BAA0B;AAExD;IACL,OAAO;QACLE,MAAM;QACNC,IAAI,OAAMC;YACR,MAAM,EACJC,OAAO,EAAEC,WAAWC,aAAa,EAAEC,UAAUC,YAAY,EAAE,EAC3DC,UAAU,EAAEF,UAAUG,eAAe,EAAE,EACvCC,gBAAgB,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,80 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
maxSize: function() {
return maxSize;
},
resetMaxSize: function() {
return resetMaxSize;
}
});
const _dom = require("@floating-ui/dom");
const _getBoundary = require("../utils/getBoundary");
const _utils = require("../utils");
const resetMaxSize = (autoSize)=>({
name: 'resetMaxSize',
fn ({ middlewareData, elements }) {
var _middlewareData_resetMaxSize;
if ((_middlewareData_resetMaxSize = middlewareData.resetMaxSize) === null || _middlewareData_resetMaxSize === void 0 ? void 0 : _middlewareData_resetMaxSize.maxSizeAlreadyReset) {
return {};
}
const { applyMaxWidth, applyMaxHeight } = autoSize;
if (applyMaxWidth) {
elements.floating.style.removeProperty('box-sizing');
elements.floating.style.removeProperty('max-width');
elements.floating.style.removeProperty('width');
}
if (applyMaxHeight) {
elements.floating.style.removeProperty('box-sizing');
elements.floating.style.removeProperty('max-height');
elements.floating.style.removeProperty('height');
}
return {
data: {
maxSizeAlreadyReset: true
},
reset: {
rects: true
}
};
}
});
function maxSize(autoSize, options) {
const { container, overflowBoundary, overflowBoundaryPadding, isRtl } = options;
return (0, _dom.size)({
...overflowBoundaryPadding && {
padding: (0, _utils.toFloatingUIPadding)(overflowBoundaryPadding, isRtl)
},
...overflowBoundary && {
altBoundary: true,
boundary: (0, _getBoundary.getBoundary)(container, overflowBoundary)
},
apply ({ availableHeight, availableWidth, elements, rects }) {
const applyMaxSizeStyles = (apply, dimension, availableSize)=>{
if (!apply) {
return;
}
elements.floating.style.setProperty('box-sizing', 'border-box');
elements.floating.style.setProperty(`max-${dimension}`, `${availableSize}px`);
if (rects.floating[dimension] > availableSize) {
elements.floating.style.setProperty(dimension, `${availableSize}px`);
const axis = dimension === 'width' ? 'x' : 'y';
if (!elements.floating.style.getPropertyValue(`overflow-${axis}`)) {
elements.floating.style.setProperty(`overflow-${axis}`, 'auto');
}
}
};
const { applyMaxWidth, applyMaxHeight } = autoSize;
applyMaxSizeStyles(applyMaxWidth, 'width', availableWidth);
applyMaxSizeStyles(applyMaxHeight, 'height', availableHeight);
}
});
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "offset", {
enumerable: true,
get: function() {
return offset;
}
});
const _dom = require("@floating-ui/dom");
const _getFloatingUIOffset = require("../utils/getFloatingUIOffset");
function offset(offsetValue) {
const floatingUIOffset = (0, _getFloatingUIOffset.getFloatingUIOffset)(offsetValue);
return (0, _dom.offset)(floatingUIOffset);
}

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":";;;;;;;;;;qBAAiD,mBAAmB;qCAEhC,+BAA+B;AAK5D,SAASA,OAAOG,WAAyC;IAC9D,MAAMC,uBAAmBF,wCAAAA,EAAoBC;IAC7C,WAAOF,WAAAA,EAAWG;AACpB"}

View File

@@ -0,0 +1,41 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "shift", {
enumerable: true,
get: function() {
return shift;
}
});
const _dom = require("@floating-ui/dom");
const _index = require("../utils/index");
function shift(options) {
const { hasScrollableElement, shiftToCoverTarget, disableTether, overflowBoundary, container, overflowBoundaryPadding, isRtl } = options;
return (0, _dom.shift)({
...hasScrollableElement && {
boundary: 'clippingAncestors'
},
...shiftToCoverTarget && {
crossAxis: true,
limiter: (0, _dom.limitShift)({
crossAxis: true,
mainAxis: false
})
},
...disableTether && {
crossAxis: disableTether === 'all',
limiter: (0, _dom.limitShift)({
crossAxis: disableTether !== 'all',
mainAxis: false
})
},
...overflowBoundaryPadding && {
padding: (0, _index.toFloatingUIPadding)(overflowBoundaryPadding, isRtl)
},
...overflowBoundary && {
altBoundary: true,
boundary: (0, _index.getBoundary)(container, overflowBoundary)
}
});
}

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":";;;;+BAegBA;;;;;;qBAf2C,mBAAmB;uBAE7B,iBAAiB;AAa3D,eAAeK,OAA+B;IACnD,MAAM,EACJC,oBAAoB,EACpBC,kBAAkB,EAClBC,aAAa,EACbC,gBAAgB,EAChBC,SAAS,EACTC,uBAAuB,EACvBC,KAAK,EACN,GAAGP;IAEJ,WAAOJ,UAAAA,EAAU;QACf,GAAIK,wBAAwB;YAAEO,UAAU;QAAoB,CAAC;QAC7D,GAAIN,sBAAsB;YACxBO,WAAW;YACXC,aAASb,eAAAA,EAAW;gBAAEY,WAAW;gBAAME,UAAU;YAAM;QACzD,CAAC;QACD,GAAIR,iBAAiB;YACnBM,WAAWN,kBAAkB;YAC7BO,aAASb,eAAAA,EAAW;gBAAEY,WAAWN,kBAAkB;gBAAOQ,UAAU;YAAM;QAC5E,CAAC;QACD,GAAIL,2BAA2B;YAAEM,aAASb,0BAAAA,EAAoBO,yBAAyBC;QAAO,CAAC;QAC/F,GAAIH,oBAAoB;YAAES,aAAa;YAAML,cAAUV,kBAAAA,EAAYO,WAAWD;QAAkB,CAAC;IACnG;AACF"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,151 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "usePositioning", {
enumerable: true,
get: function() {
return usePositioning;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _constants = require("./constants");
const _createPositionManager = require("./createPositionManager");
const _usePositioningOptions = require("./usePositioningOptions");
const _utils = require("./utils");
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 = (0, _usePositioningOptions.usePositioningOptions)(options);
const updatePositionManager = _react.useCallback(()=>{
if (managerRef.current) {
managerRef.current.dispose();
}
managerRef.current = null;
var _overrideTargetRef_current;
const target = (_overrideTargetRef_current = overrideTargetRef.current) !== null && _overrideTargetRef_current !== void 0 ? _overrideTargetRef_current : targetRef.current;
if (enabled && (0, _reactutilities.canUseDOM)() && target && containerRef.current) {
managerRef.current = (0, _createPositionManager.createPositionManager)({
container: containerRef.current,
target,
arrow: arrowRef.current,
...resolvePositioningOptions(containerRef.current, arrowRef.current)
});
}
}, [
enabled,
resolvePositioningOptions
]);
const setOverrideTarget = (0, _reactutilities.useEventCallback)((target)=>{
overrideTargetRef.current = target;
updatePositionManager();
});
_react.useImperativeHandle(options.positioningRef, ()=>({
updatePosition: ()=>{
var _managerRef_current;
return (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.updatePosition();
},
setTarget: (target)=>{
if (options.target && process.env.NODE_ENV !== 'production') {
const err = new Error();
// eslint-disable-next-line no-console
console.warn('Imperative setTarget should not be used at the same time as target option');
// eslint-disable-next-line no-console
console.warn(err.stack);
}
setOverrideTarget(target);
}
}), [
options.target,
setOverrideTarget
]);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
var _options_target;
setOverrideTarget((_options_target = options.target) !== null && _options_target !== void 0 ? _options_target : null);
}, [
options.target,
setOverrideTarget
]);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
updatePositionManager();
}, [
updatePositionManager
]);
if (process.env.NODE_ENV !== 'production') {
// This checked should run only in development mode
// eslint-disable-next-line react-hooks/rules-of-hooks
_react.useEffect(()=>{
if (containerRef.current) {
var _contentNode_ownerDocument;
const contentNode = containerRef.current;
const treeWalker = (_contentNode_ownerDocument = contentNode.ownerDocument) === null || _contentNode_ownerDocument === void 0 ? void 0 : _contentNode_ownerDocument.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {
acceptNode: _utils.hasAutofocusFilter
});
while(treeWalker.nextNode()){
const node = treeWalker.currentNode;
// eslint-disable-next-line no-console
console.warn('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 = (0, _utils.useCallbackRef)(null, (target)=>{
if (targetRef.current !== target) {
targetRef.current = target;
updatePositionManager();
}
});
const onPositioningEnd = (0, _reactutilities.useEventCallback)((e)=>{
var _options_onPositioningEnd;
return (_options_onPositioningEnd = options.onPositioningEnd) === null || _options_onPositioningEnd === void 0 ? void 0 : _options_onPositioningEnd.call(options, e);
});
const setContainer = (0, _utils.useCallbackRef)(null, (container)=>{
if (containerRef.current !== container) {
var _containerRef_current;
(_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.removeEventListener(_constants.POSITIONING_END_EVENT, onPositioningEnd);
container === null || container === void 0 ? void 0 : container.addEventListener(_constants.POSITIONING_END_EVENT, onPositioningEnd);
containerRef.current = container;
updatePositionManager();
}
});
const setArrow = (0, _utils.useCallbackRef)(null, (arrow)=>{
if (arrowRef.current !== arrow) {
arrowRef.current = arrow;
updatePositionManager();
}
});
// Let users use callback refs so they feel like 'normal' DOM refs
return {
targetRef: setTarget,
containerRef: setContainer,
arrowRef: setArrow
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,39 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "usePositioningMouseTarget", {
enumerable: true,
get: function() {
return usePositioningMouseTarget;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _createVirtualElementFromClick = require("./createVirtualElementFromClick");
const usePositioningMouseTarget = (initialState)=>{
const [virtualElement, setVirtualElement] = _react.useState(initialState);
const setVirtualMouseTarget = (event)=>{
if (event === undefined || event === null) {
setVirtualElement(undefined);
return;
}
let mouseevent;
if (!(event instanceof MouseEvent)) {
mouseevent = event.nativeEvent;
} else {
mouseevent = event;
}
if (!(mouseevent instanceof MouseEvent) && process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.error('usePositioningMouseTarget should only be used with MouseEvent');
}
const contextTarget = (0, _createVirtualElementFromClick.createVirtualElementFromClick)(mouseevent);
setVirtualElement(contextTarget);
};
return [
virtualElement,
setVirtualMouseTarget
];
};

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;;;;;+BAeaE;;;;;;;iEAbU,QAAQ;+CACe,kCAAkC;AAYzE,kCAAkC,CACvCC;IAEA,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGL,OAAMM,QAAQ,CAAwCH;IAElG,MAAMI,wBAA+CC,CAAAA;QACnD,IAAIA,UAAUC,aAAaD,UAAU,MAAM;YACzCH,kBAAkBI;YAClB;QACF;QAEA,IAAIC;QACJ,IAAI,CAAEF,CAAAA,iBAAiBG,UAAAA,CAAS,EAAI;YAClCD,aAAaF,MAAMI,WAAW;QAChC,OAAO;YACLF,aAAaF;QACf;QAEA,IAAI,CAAEE,CAAAA,sBAAsBC,UAAAA,CAAS,IAAME,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YAChF,sCAAsC;YACtCC,QAAQC,KAAK,CAAC;QAChB;QAEA,MAAMC,oBAAgBjB,4DAAAA,EAA8BS;QACpDL,kBAAkBa;IACpB;IAEA,OAAO;QAACd;QAAgBG;KAAsB;AAChD,EAAE"}

View File

@@ -0,0 +1,138 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "usePositioningOptions", {
enumerable: true,
get: function() {
return usePositioningOptions;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _devtools = require("@floating-ui/devtools");
const _dom = require("@floating-ui/dom");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _middleware = require("./middleware");
const _utils = require("./utils");
const _devtools1 = require("./utils/devtools");
const _PositioningConfigurationContext = require("./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, 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
]);
}
function usePositioningOptions(options) {
const { dir, targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const isRtl = dir === 'rtl';
const configFn = usePositioningConfigFn((0, _PositioningConfigurationContext.usePositioningConfiguration)(), options);
const { positionFixed } = options;
return _react.useCallback((container, arrow)=>{
const hasScrollableElement = (0, _utils.hasScrollParent)(container);
const optionsAfterEnhancement = configFn(container, arrow);
const { autoSize, disableUpdateOnResize, matchTargetSize, offset, coverTarget, flipBoundary, overflowBoundary, useTransform, overflowBoundaryPadding, pinned, position, arrowPadding, strategy, align, fallbackPositions, shiftToCoverTarget, unstable_disableTether } = optionsAfterEnhancement;
const normalizedAutoSize = (0, _utils.normalizeAutoSize)(autoSize);
const middleware = [
normalizedAutoSize && (0, _middleware.resetMaxSize)(normalizedAutoSize),
matchTargetSize && (0, _middleware.matchTargetSize)(),
offset && (0, _middleware.offset)(offset),
coverTarget && (0, _middleware.coverTarget)(),
!pinned && (0, _middleware.flip)({
container,
flipBoundary,
hasScrollableElement,
isRtl,
fallbackPositions
}),
(0, _middleware.shift)({
container,
hasScrollableElement,
overflowBoundary,
disableTether: unstable_disableTether,
overflowBoundaryPadding,
isRtl,
shiftToCoverTarget
}),
normalizedAutoSize && (0, _middleware.maxSize)(normalizedAutoSize, {
container,
overflowBoundary,
overflowBoundaryPadding,
isRtl
}),
(0, _middleware.intersecting)(),
arrow && (0, _dom.arrow)({
element: arrow,
padding: arrowPadding
}),
(0, _dom.hide)({
strategy: 'referenceHidden'
}),
(0, _dom.hide)({
strategy: 'escaped'
}),
process.env.NODE_ENV !== 'production' && targetDocument && (0, _devtools.devtools)(targetDocument, (0, _devtools1.devtoolsCallback)(optionsAfterEnhancement))
].filter(Boolean);
const placement = (0, _utils.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,86 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
getPlacementSlideDirections: function() {
return getPlacementSlideDirections;
},
usePositioningSlideDirection: function() {
return usePositioningSlideDirection;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _constants = require("./constants");
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
};
}
function usePositioningSlideDirection(options) {
const { targetDocument, onPositioningEnd } = options;
const handlePositionEnd = (0, _reactutilities.useEventCallback)((e)=>{
onPositioningEnd === null || onPositioningEnd === void 0 ? void 0 : onPositioningEnd(e);
const element = e.target;
const placement = e.detail.placement;
if (!(0, _reactutilities.isHTMLElement)(element)) {
return;
}
const { x, y } = getPlacementSlideDirections(placement);
element.style.setProperty(_constants.POSITIONING_SLIDE_DIRECTION_VAR_X, `${x}px`);
element.style.setProperty(_constants.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: _constants.POSITIONING_SLIDE_DIRECTION_VAR_X,
syntax: '<length>',
inherits: false,
initialValue: '0px'
});
registerProperty({
name: _constants.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,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createResizeObserver", {
enumerable: true,
get: function() {
return createResizeObserver;
}
});
function createResizeObserver(targetWindow, callback) {
// https://github.com/jsdom/jsdom/issues/3368
// Add the polyfill here so it is not needed for all unit tests that leverage positioning
if (process.env.NODE_ENV === 'test') {
targetWindow.ResizeObserver = class ResizeObserver {
observe() {
// do nothing
}
unobserve() {
// do nothing
}
disconnect() {
// do nothing
}
};
}
return new targetWindow.ResizeObserver(callback);
}

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":";;;;+BAAgBA;;;;;;AAAT,8BACLC,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,29 @@
/**
* Promise microtask debouncer used by Popper.js v2
* This is no longer exported in Floating UI (Popper.js v3)
* https://github.com/floating-ui/floating-ui/blob/v2.x/src/utils/debounce.js
* @param fn function that will be debounced
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "debounce", {
enumerable: true,
get: function() {
return debounce;
}
});
function debounce(fn) {
let pending;
return ()=>{
if (!pending) {
pending = new Promise((resolve)=>{
Promise.resolve().then(()=>{
pending = undefined;
resolve(fn());
});
});
}
return pending;
};
}

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;;;;;;;;;;AAAO,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,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "devtoolsCallback", {
enumerable: true,
get: function() {
return devtoolsCallback;
}
});
const _reactutilities = require("@fluentui/react-utilities");
const _listScrollParents = require("./listScrollParents");
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement");
const devtoolsCallback = (options)=>(middlewareState)=>{
const { elements: { floating, reference } } = middlewareState;
const scrollParentsSet = new Set();
if ((0, _reactutilities.isHTMLElement)(reference)) {
(0, _listScrollParents.listScrollParents)(reference).forEach((scrollParent)=>scrollParentsSet.add(scrollParent));
}
(0, _listScrollParents.listScrollParents)(floating).forEach((scrollParent)=>scrollParentsSet.add(scrollParent));
const flipBoundaries = Array.isArray(options.flipBoundary) ? options.flipBoundary : (0, _reactutilities.isHTMLElement)(options.flipBoundary) ? [
options.flipBoundary
] : [];
const overflowBoundaries = Array.isArray(options.overflowBoundary) ? options.overflowBoundary : (0, _reactutilities.isHTMLElement)(options.overflowBoundary) ? [
options.overflowBoundary
] : [];
return {
type: 'FluentUIMiddleware',
middlewareState,
options,
initialPlacement: (0, _fromFloatingUIPlacement.fromFloatingUIPlacement)(middlewareState.initialPlacement),
placement: (0, _fromFloatingUIPlacement.fromFloatingUIPlacement)(middlewareState.placement),
flipBoundaries,
overflowBoundaries,
scrollParents: Array.from(scrollParentsSet)
};
};

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":";;;;+BAMaG;;;;;;gCAJiB,4BAA4B;mCACxB,sBAAsB;yCAChB,4BAA4B;AAE7D,yBACL,CAACC,UACD,CACEC;QAWA,MAAM,EACJC,UAAU,EAAEC,QAAQ,EAAEC,SAAS,EAAE,EAClC,GAAGH;QACJ,MAAMI,mBAAmB,IAAIC;QAC7B,QAAIV,6BAAAA,EAAcQ,YAAY;gBAC5BP,oCAAAA,EAAkBO,WAAWG,OAAO,CAACC,CAAAA,eAAgBH,iBAAiBI,GAAG,CAACD;QAC5E;YACAX,oCAAAA,EAAkBM,UAAUI,OAAO,CAACC,CAAAA,eAAgBH,iBAAiBI,GAAG,CAACD;QACzE,MAAME,iBAAgCC,MAAMC,OAAO,CAACZ,QAAQa,YAAY,IACpEb,QAAQa,YAAY,OACpBjB,6BAAAA,EAAcI,QAAQa,YAAY,IAClC;YAACb,QAAQa,YAAY;SAAC,GACtB,EAAE;QACN,MAAMC,qBAAoCH,MAAMC,OAAO,CAACZ,QAAQe,gBAAgB,IAC5Ef,QAAQe,gBAAgB,OACxBnB,6BAAAA,EAAcI,QAAQe,gBAAgB,IACtC;YAACf,QAAQe,gBAAgB;SAAC,GAC1B,EAAE;QACN,OAAO;YACLC,MAAM;YACNf;YACAD;YACAiB,sBAAkBnB,gDAAAA,EAAwBG,gBAAgBgB,gBAAgB;YAC1EC,eAAWpB,gDAAAA,EAAwBG,gBAAgBiB,SAAS;YAC5DR;YACAI;YACAK,eAAeR,MAAMS,IAAI,CAACf;QAC5B;IACF,EAAE"}

View File

@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "fromFloatingUIPlacement", {
enumerable: true,
get: function() {
return fromFloatingUIPlacement;
}
});
const _parseFloatingUIPlacement = require("./parseFloatingUIPlacement");
const getPositionMap = ()=>({
top: 'above',
bottom: 'below',
right: 'after',
left: 'before'
});
// Floating UI automatically flips alignment
// https://github.com/floating-ui/floating-ui/issues/1563
const getAlignmentMap = (position)=>{
if (position === 'above' || position === 'below') {
return {
start: 'start',
end: 'end'
};
}
return {
start: 'top',
end: 'bottom'
};
};
const fromFloatingUIPlacement = (placement)=>{
const { side, alignment: floatingUIAlignment } = (0, _parseFloatingUIPlacement.parseFloatingUIPlacement)(placement);
const position = getPositionMap()[side];
const alignment = floatingUIAlignment && getAlignmentMap(position)[floatingUIAlignment];
return {
position,
alignment
};
};

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":";;;;;;;eA+BaU;;;0CA7B4B,6BAA6B;AAEtE,MAAMT,iBAAiB,IAA+B,CAAA;QACpDC,KAAK;QACLC,QAAQ;QACRC,OAAO;QACPC,MAAM;KACR,CAAA;AAEA,4CAA4C;AAC5C,yDAAyD;AACzD,MAAMC,kBAAkB,CAACC;IACvB,IAAIA,aAAa,WAAWA,aAAa,SAAS;QAChD,OAAO;YACLC,OAAO;YACPC,KAAK;QACP;IACF;IAEA,OAAO;QACLD,OAAO;QACPC,KAAK;IACP;AACF;AAMO,gCAAgC,CAACE;IACtC,MAAM,EAAEC,IAAI,EAAEC,WAAWC,mBAAmB,EAAE,OAAGd,kDAAAA,EAAyBW;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,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getBoundary", {
enumerable: true,
get: function() {
return getBoundary;
}
});
const _getScrollParent = require("./getScrollParent");
function getBoundary(element, boundary) {
if (boundary === 'window') {
return element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
}
if (boundary === 'clippingParents') {
return 'clippingAncestors';
}
if (boundary === 'scrollParent') {
let boundariesNode = (0, _getScrollParent.getScrollParent)(element);
if (boundariesNode.nodeName === 'BODY') {
boundariesNode = element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
}
return boundariesNode;
}
return boundary;
}

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":";;;;+BAQgBC;;;;;;iCANgB,oBAAoB;AAM7C,qBACLC,OAA2B,EAC3BC,QAA8B;IAE9B,IAAIA,aAAa,UAAU;QACzB,OAAOD,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASE,aAAa,CAAEC,eAAe;IAChD;IAEA,IAAIF,aAAa,mBAAmB;QAClC,OAAO;IACT;IAEA,IAAIA,aAAa,gBAAgB;QAC/B,IAAIG,qBAA0CN,gCAAAA,EAAgBE;QAE9D,IAAII,eAAeC,QAAQ,KAAK,QAAQ;YACtCD,iBAAiBJ,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASE,aAAa,CAAEC,eAAe;QAC1D;QAEA,OAAOC;IACT;IAEA,OAAOH;AACT"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getFloatingUIOffset", {
enumerable: true,
get: function() {
return getFloatingUIOffset;
}
});
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement");
function getFloatingUIOffset(rawOffset) {
if (!rawOffset) {
return rawOffset;
}
if (typeof rawOffset === 'number' || typeof rawOffset === 'object') {
return rawOffset;
}
return ({ rects: { floating, reference }, placement })=>{
const { position, alignment } = (0, _fromFloatingUIPlacement.fromFloatingUIPlacement)(placement);
return rawOffset({
positionedRect: floating,
targetRect: reference,
position,
alignment
});
};
}

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":";;;;+BAuCgBC;;;;;;yCArCwB,4BAA4B;AAqC7D,6BACLC,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,OAAGR,gDAAAA,EAAwBM;QACxD,OAAOJ,UAAU;YAAEO,gBAAgBL;YAAUM,YAAYL;YAAWE;YAAUC;QAAU;IAC1F;AACF"}

View File

@@ -0,0 +1,53 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getReactFiberFromNode", {
enumerable: true,
get: function() {
return getReactFiberFromNode;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var WorkTag = /*#__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 || {});
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,71 @@
/**
* Returns the parent node or the host of the node argument.
* @param node - DOM node.
* @returns - parent DOM node.
*/ 'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
getParentNode: function() {
return getParentNode;
},
getScrollParent: function() {
return getScrollParent;
},
getStyleComputedProperty: function() {
return getStyleComputedProperty;
},
hasScrollParent: function() {
return hasScrollParent;
}
});
const getParentNode = (node)=>{
if (node.nodeName === 'HTML') {
return node;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return node.parentNode || node.host;
};
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 {};
};
const getScrollParent = (node)=>{
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
const parentNode = node && getParentNode(node);
// eslint-disable-next-line
if (!parentNode) return document.body;
switch(parentNode.nodeName){
case 'HTML':
case 'BODY':
return parentNode.ownerDocument.body;
case '#document':
return parentNode.body;
}
// If any of the overflow props is defined for the node then we return it as the parent
const { overflow, overflowX, overflowY } = getStyleComputedProperty(parentNode);
if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
return parentNode;
}
return getScrollParent(parentNode);
};
const hasScrollParent = (node)=>{
var _scrollParentElement_ownerDocument;
const scrollParentElement = getScrollParent(node);
return scrollParentElement ? scrollParentElement !== ((_scrollParentElement_ownerDocument = scrollParentElement.ownerDocument) === null || _scrollParentElement_ownerDocument === void 0 ? void 0 : _scrollParentElement_ownerDocument.body) : false;
};

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;;;;;;;;;;;;iBAEaA;;;IAiCAW,eAAAA;;;IAnBAN,wBAAAA;;;IA0CAa,eAAAA;;;;AAxDN,MAAMlB,gBAAgB,CAACC;IAC5B,IAAIA,KAAKC,QAAQ,KAAK,QAAQ;QAC5B,OAAOD;IACT;IAEA,8DAA8D;IAC9D,OAAOA,KAAKE,UAAU,IAAKF,KAAaG,IAAI;AAC9C,EAAE;AAOK,iCAAiC,CAACH;QAKlBA;IAJrB,IAAIA,KAAKK,QAAQ,KAAK,GAAG;QACvB,OAAO,CAAC;IACV;IAEA,MAAMC,eAAAA,CAAeN,sBAAAA,KAAKO,aAAAA,AAAa,MAAA,QAAlBP,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBQ,WAAW;IAEpD,IAAIF,cAAc;QAChB,OAAOA,aAAaG,gBAAgB,CAACT,MAAM;IAC7C;IAEA,OAAO,CAAC;AACV,EAAE;AAOK,wBAAwB,CAACA;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,OAAQV,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;AAEK,wBAAwB,CAACF;QAGuBkB;IAFrD,MAAMA,sBAAmCR,gBAAgBV;IAEzD,OAAOkB,sBAAsBA,wBAAAA,CAAAA,CAAwBA,qCAAAA,oBAAoBX,aAAAA,AAAa,MAAA,QAAjCW,uCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mCAAmCN,IAAAA,AAAI,IAAG;AACjG,EAAE"}

View File

@@ -0,0 +1,31 @@
//
// Dev utils to detect if nodes have "autoFocus" props.
//
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "hasAutofocusFilter", {
enumerable: true,
get: function() {
return hasAutofocusFilter;
}
});
const _getReactFiberFromNode = require("./getReactFiberFromNode");
/**
* Detects if a passed HTML node has "autoFocus" prop on a React's fiber. Is needed as React handles autofocus behavior
* in React DOM and will not pass "autoFocus" to an actual HTML.
*
* @param node
*/ function hasAutofocusProp(node) {
// https://github.com/facebook/react/blob/848bb2426e44606e0a55dfe44c7b3ece33772485/packages/react-dom/src/client/ReactDOMHostConfig.js#L157-L166
const isAutoFocusableElement = node.nodeName === 'BUTTON' || node.nodeName === 'INPUT' || node.nodeName === 'SELECT' || node.nodeName === 'TEXTAREA';
if (isAutoFocusableElement) {
var _getReactFiberFromNode1;
return !!((_getReactFiberFromNode1 = (0, _getReactFiberFromNode.getReactFiberFromNode)(node)) === null || _getReactFiberFromNode1 === void 0 ? void 0 : _getReactFiberFromNode1.pendingProps.autoFocus);
}
return false;
}
function hasAutofocusFilter(node) {
return hasAutofocusProp(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}

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;;;;;;;;;;;uCAEoC,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,CAAA,CAAA,CAACA,8BAAAA,4CAAAA,EAAsBE,KAAAA,MAAAA,QAAtBF,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAA6BK,YAAY,CAACC,SAAAA,AAAS;IAC9D;IAEA,OAAO;AACT;AAEO,SAASC,mBAAmBL,IAAU;IAC3C,OAAOD,iBAAiBC,QAAQM,WAAWC,aAAa,GAAGD,WAAWE,WAAW;AACnF"}

View File

@@ -0,0 +1,82 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
debounce: function() {
return _debounce.debounce;
},
fromFloatingUIPlacement: function() {
return _fromFloatingUIPlacement.fromFloatingUIPlacement;
},
getBoundary: function() {
return _getBoundary.getBoundary;
},
getParentNode: function() {
return _getScrollParent.getParentNode;
},
getReactFiberFromNode: function() {
return _getReactFiberFromNode.getReactFiberFromNode;
},
getScrollParent: function() {
return _getScrollParent.getScrollParent;
},
hasAutofocusFilter: function() {
return _hasAutoFocusFilter.hasAutofocusFilter;
},
hasScrollParent: function() {
return _getScrollParent.hasScrollParent;
},
mergeArrowOffset: function() {
return _mergeArrowOffset.mergeArrowOffset;
},
normalizeAutoSize: function() {
return _normalizeAutoSize.normalizeAutoSize;
},
parseFloatingUIPlacement: function() {
return _parseFloatingUIPlacement.parseFloatingUIPlacement;
},
resolvePositioningShorthand: function() {
return _resolvePositioningShorthand.resolvePositioningShorthand;
},
toFloatingUIPadding: function() {
return _toFloatingUIPadding.toFloatingUIPadding;
},
toFloatingUIPlacement: function() {
return _toFloatingUIPlacement.toFloatingUIPlacement;
},
toggleScrollListener: function() {
return _toggleScrollListener.toggleScrollListener;
},
useCallbackRef: function() {
return _useCallbackRef.useCallbackRef;
},
writeArrowUpdates: function() {
return _writeArrowUpdates.writeArrowUpdates;
},
writeContainerUpdates: function() {
return _writeContainerupdates.writeContainerUpdates;
}
});
const _parseFloatingUIPlacement = require("./parseFloatingUIPlacement");
const _getBoundary = require("./getBoundary");
const _getReactFiberFromNode = require("./getReactFiberFromNode");
const _getScrollParent = require("./getScrollParent");
const _mergeArrowOffset = require("./mergeArrowOffset");
const _toFloatingUIPadding = require("./toFloatingUIPadding");
const _toFloatingUIPlacement = require("./toFloatingUIPlacement");
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement");
const _resolvePositioningShorthand = require("./resolvePositioningShorthand");
const _useCallbackRef = require("./useCallbackRef");
const _debounce = require("./debounce");
const _toggleScrollListener = require("./toggleScrollListener");
const _hasAutoFocusFilter = require("./hasAutoFocusFilter");
const _writeArrowUpdates = require("./writeArrowUpdates");
const _writeContainerupdates = require("./writeContainerupdates");
const _normalizeAutoSize = require("./normalizeAutoSize");

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":";;;;;;;;;;;IAWSY;iCAAQ;;2BAHe;eAAvBH;;;eAPAR,wBAAW;;;eAGXE,8BAAa;;;eADbD,4CAAqB;;mBACS;eAAfE;;IASfU;qDAAkB;;;eATcT,gCAAe;;IAC/CC;iDAAgB;;;eAWhBW,oCAAiB;;;eAhBjBjB,kDAAwB;;+BASG;eAA3BU;;;eAHAH,wCAAmB;;;eACnBC,4CAAqB;;;eAKrBK,0CAAoB;;;eAFpBF,8BAAc;;;eAIdI,oCAAiB;;;eACjBC,4CAAqB;;;0CAfW,6BAA6B;6BAC1C,gBAAgB;uCAEN,0BAA0B;iCACA,oBAAoB;kCACnD,qBAAqB;qCAClB,wBAAwB;uCACtB,0BAA0B;yCACxB,4BAA4B;6CACxB,gCAAgC;gCAC7C,mBAAmB;0BACzB,aAAa;sCACD,yBAAyB;oCAC3B,uBAAuB;mCACxB,sBAAsB;uCAClB,0BAA0B;mCAC9B,sBAAsB"}

View File

@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "listScrollParents", {
enumerable: true,
get: function() {
return listScrollParents;
}
});
const _getScrollParent = require("./getScrollParent");
function listScrollParents(node) {
const scrollParents = [];
let cur = node;
while(cur){
const scrollParent = (0, _getScrollParent.getScrollParent)(cur);
if (node.ownerDocument.body === scrollParent) {
scrollParents.push(scrollParent);
break;
}
if (scrollParent.nodeName === 'BODY' && scrollParent !== node.ownerDocument.body) {
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.error('@fluentui/react-positioning: You are comparing two different documents! This is an unexpected error, please report this as a bug to the Fluent UI team ');
}
break;
}
scrollParents.push(scrollParent);
cur = scrollParent;
}
return scrollParents;
}

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":";;;;+BAEgBC;;;;;;iCAFgB,oBAAoB;AAE7C,2BAA2BC,IAAiB;IACjD,MAAMC,gBAA+B,EAAE;IAEvC,IAAIC,MAA0BF;IAC9B,MAAOE,IAAK;QACV,MAAMC,mBAAeL,gCAAAA,EAAgBI;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,40 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "mergeArrowOffset", {
enumerable: true,
get: function() {
return mergeArrowOffset;
}
});
function mergeArrowOffset(userOffset, arrowHeight) {
if (typeof userOffset === 'number') {
return addArrowOffset(userOffset, arrowHeight);
}
if (typeof userOffset === 'object' && userOffset !== null) {
return addArrowOffset(userOffset, arrowHeight);
}
if (typeof userOffset === 'function') {
return (offsetParams)=>{
const offset = userOffset(offsetParams);
return addArrowOffset(offset, arrowHeight);
};
}
return {
mainAxis: arrowHeight
};
}
const addArrowOffset = (offset, arrowHeight)=>{
if (typeof offset === 'number') {
return {
mainAxis: offset + arrowHeight
};
}
var _offset_mainAxis;
return {
...offset,
mainAxis: ((_offset_mainAxis = offset.mainAxis) !== null && _offset_mainAxis !== void 0 ? _offset_mainAxis : 0) + arrowHeight
};
};

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;;;;;+BAagBA;;;;;;AAAT,0BAA0BC,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,UAAWD,CAAAA,CAAAA,mBAAAA,OAAOC,QAAAA,AAAQ,MAAA,QAAfD,qBAAAA,KAAAA,IAAAA,oBAAmB,CAAA,GAAKH;IAAY;AACrE"}

View File

@@ -0,0 +1,38 @@
/**
* AutoSizes contains many options from historic implementation.
* Now options 'always'/'height-always'/'width-always' are obsolete.
* This function maps them to true/'height'/'width'
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "normalizeAutoSize", {
enumerable: true,
get: function() {
return normalizeAutoSize;
}
});
const normalizeAutoSize = (autoSize)=>{
switch(autoSize){
case 'always':
case true:
return {
applyMaxWidth: true,
applyMaxHeight: true
};
case 'width-always':
case 'width':
return {
applyMaxWidth: true,
applyMaxHeight: false
};
case 'height-always':
case 'height':
return {
applyMaxWidth: false,
applyMaxHeight: true
};
default:
return false;
}
};

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;;;;;;;;;;AAAO,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,22 @@
/**
* 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
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "parseFloatingUIPlacement", {
enumerable: true,
get: function() {
return parseFloatingUIPlacement;
}
});
function parseFloatingUIPlacement(placement) {
const tokens = placement.split('-');
return {
side: tokens[0],
alignment: tokens[1]
};
}

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;;;;;;;;;;AAAO,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,70 @@
// Look up table for shorthand to avoid parsing strings
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "resolvePositioningShorthand", {
enumerable: true,
get: function() {
return resolvePositioningShorthand;
}
});
const shorthandLookup = {
above: {
position: 'above',
align: 'center'
},
'above-start': {
position: 'above',
align: 'start'
},
'above-end': {
position: 'above',
align: 'end'
},
below: {
position: 'below',
align: 'center'
},
'below-start': {
position: 'below',
align: 'start'
},
'below-end': {
position: 'below',
align: 'end'
},
before: {
position: 'before',
align: 'center'
},
'before-top': {
position: 'before',
align: 'top'
},
'before-bottom': {
position: 'before',
align: 'bottom'
},
after: {
position: 'after',
align: 'center'
},
'after-top': {
position: 'after',
align: 'top'
},
'after-bottom': {
position: 'after',
align: 'bottom'
}
};
function resolvePositioningShorthand(shorthand) {
if (shorthand === undefined || shorthand === null) {
return {};
}
if (typeof shorthand === 'string') {
return shorthandLookup[shorthand];
}
return shorthand;
}

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;AAEO,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,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "toFloatingUIPadding", {
enumerable: true,
get: function() {
return toFloatingUIPadding;
}
});
function toFloatingUIPadding(padding, isRtl) {
if (typeof padding === 'number') {
return padding;
}
const { start, end, ...verticalPadding } = padding;
const paddingObject = verticalPadding;
const left = isRtl ? 'end' : 'start';
const right = isRtl ? 'start' : 'end';
// assign properties explicitly since undefined values are actually handled by floating UI
// TODO create floating UI issue
if (padding[left]) {
paddingObject.left = padding[left];
}
if (padding[right]) {
paddingObject.right = padding[right];
}
return paddingObject;
}

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":";;;;+BAGgBA;;;;;;AAAT,6BACLC,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,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "toFloatingUIPlacement", {
enumerable: true,
get: function() {
return toFloatingUIPlacement;
}
});
const getPositionMap = (rtl)=>({
above: 'top',
below: 'bottom',
before: rtl ? 'right' : 'left',
after: rtl ? 'left' : 'right'
});
// Floating UI automatically flips alignment
// https://github.com/floating-ui/floating-ui/issues/1563
const getAlignmentMap = ()=>({
start: 'start',
end: 'end',
top: 'start',
bottom: 'end',
center: undefined
});
const shouldAlignToCenter = (p, a)=>{
const positionedVertically = p === 'above' || p === 'below';
const alignedVertically = a === 'top' || a === 'bottom';
return positionedVertically && alignedVertically || !positionedVertically && !alignedVertically;
};
const toFloatingUIPlacement = (align, position, rtl)=>{
const alignment = shouldAlignToCenter(position, align) ? 'center' : align;
const computedPosition = position && getPositionMap(rtl)[position];
const computedAlignment = alignment && getAlignmentMap()[alignment];
if (computedPosition && computedAlignment) {
return `${computedPosition}-${computedAlignment}`;
}
return computedPosition;
};

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":";;;;;;;eAkCakB;;;AA5Bb,MAAMlB,iBAAiB,CAACC,MAAwD,CAAA;QAC9EC,OAAO;QACPC,OAAO;QACPC,QAAQH,MAAM,UAAU;QACxBI,OAAOJ,MAAM,SAAS;KACxB,CAAA;AAEA,4CAA4C;AAC5C,yDAAyD;AACzD,MAAMK,kBAAkB,IAAsD,CAAA;QAC5EC,OAAO;QACPC,KAAK;QACLC,KAAK;QACLC,QAAQ;QACRC,QAAQC;KACV,CAAA;AAEA,MAAMC,sBAAsB,CAACC,GAAcC;IACzC,MAAMC,uBAAuBF,MAAM,WAAWA,MAAM;IACpD,MAAMG,oBAAoBF,MAAM,SAASA,MAAM;IAE/C,OAAQC,wBAAwBC,qBAAuB,CAACD,wBAAwB,CAACC;AACnF;AAMO,8BAA8B,CAACE,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,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "toggleScrollListener", {
enumerable: true,
get: function() {
return toggleScrollListener;
}
});
const _reactutilities = require("@fluentui/react-utilities");
const _getScrollParent = require("./getScrollParent");
function toggleScrollListener(next, prev, handler) {
if (next === prev) {
return;
}
if ((0, _reactutilities.isHTMLElement)(prev)) {
const prevScrollParent = (0, _getScrollParent.getScrollParent)(prev);
prevScrollParent.removeEventListener('scroll', handler);
}
if ((0, _reactutilities.isHTMLElement)(next)) {
const scrollParent = (0, _getScrollParent.getScrollParent)(next);
scrollParent.addEventListener('scroll', handler);
}
}

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":";;;;+BAUgBE;;;;;;gCAVc,4BAA4B;iCAE1B,oBAAoB;AAQ7C,8BACLC,IAAoD,EACpDC,IAAoD,EACpDC,OAAsB;IAEtB,IAAIF,SAASC,MAAM;QACjB;IACF;IAEA,QAAIJ,6BAAAA,EAAcI,OAAO;QACvB,MAAME,uBAAmBL,gCAAAA,EAAgBG;QACzCE,iBAAiBC,mBAAmB,CAAC,UAAUF;IACjD;IACA,QAAIL,6BAAAA,EAAcG,OAAO;QACvB,MAAMK,mBAAeP,gCAAAA,EAAgBE;QACrCK,aAAaC,gBAAgB,CAAC,UAAUJ;IAC1C;AACF"}

View File

@@ -0,0 +1,45 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCallbackRef", {
enumerable: true,
get: function() {
return useCallbackRef;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
function useCallbackRef(initialValue, callback, skipInitialResolve) {
const isFirst = _react.useRef(true);
const [ref] = _react.useState(()=>({
// value
value: initialValue,
// last callback
callback,
// "memoized" public interface
facade: {
get current () {
return ref.value;
},
set current (value){
const last = ref.value;
if (last !== value) {
ref.value = value;
if (skipInitialResolve && isFirst.current) {
return;
}
ref.callback(value, last);
}
}
}
}));
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
isFirst.current = false;
}, []);
// update callback
ref.callback = callback;
return ref.facade;
}

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;;;;;+BAsBgBE;;;;;;;iEApBO,QAAQ;gCACW,4BAA4B;AAmB/D,wBACLC,YAAsB,EACtBC,QAA2D,EAC3DC,kBAA4B;IAG5B,MAAMC,UAAUN,OAAMO,MAAM,CAAC;IAC7B,MAAM,CAACC,IAAI,GAAGR,OAAMS,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;SACF,CAAA;QAEAZ,yCAAAA,EAA0B;QACxBK,QAAQM,OAAO,GAAG;IACpB,GAAG,EAAE;IAEL,kBAAkB;IAClBJ,IAAIJ,QAAQ,GAAGA;IAEf,OAAOI,IAAIG,MAAM;AACnB"}

View File

@@ -0,0 +1,23 @@
/**
* Writes all DOM element updates after position is computed
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "writeArrowUpdates", {
enumerable: true,
get: function() {
return writeArrowUpdates;
}
});
function writeArrowUpdates(options) {
const { arrow, middlewareData } = options;
if (!middlewareData.arrow || !arrow) {
return;
}
const { x: arrowX, y: arrowY } = middlewareData.arrow;
Object.assign(arrow.style, {
left: arrowX !== null && arrowX !== undefined ? `${arrowX}px` : '',
top: arrowY !== null && arrowY !== undefined ? `${arrowY}px` : ''
});
}

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;;;;;;;;;;AAAO,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