@fluentui/react-positioning 9.22.3 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -2
- package/dist/index.d.cts +409 -0
- package/lib/PositioningConfigurationContext.js +1 -1
- package/lib/createArrowStyles.js +1 -1
- package/lib/createPositionManager.js +6 -6
- package/lib/createPositionManager.js.map +1 -1
- package/lib/createSlideStyles.js +2 -2
- package/lib/createSlideStyles.js.map +1 -1
- package/lib/hooks/useSafeZoneArea/SafeZoneArea.js +9 -9
- package/lib/hooks/useSafeZoneArea/SafeZoneArea.js.map +1 -1
- package/lib/hooks/useSafeZoneArea/SafeZoneArea.styles.js +2 -2
- package/lib/hooks/useSafeZoneArea/SafeZoneArea.styles.js.map +1 -1
- package/lib/hooks/useSafeZoneArea/SafeZoneArea.styles.raw.js +2 -2
- package/lib/hooks/useSafeZoneArea/useSafeZoneArea.js +4 -4
- package/lib/hooks/useSafeZoneArea/useSafeZoneArea.js.map +1 -1
- package/lib/index.js +10 -10
- package/lib/index.js.map +1 -1
- package/lib/middleware/coverTarget.js +1 -1
- package/lib/middleware/coverTarget.js.map +1 -1
- package/lib/middleware/flip.js +2 -2
- package/lib/middleware/flip.js.map +1 -1
- package/lib/middleware/index.js +7 -7
- package/lib/middleware/index.js.map +1 -1
- package/lib/middleware/intersecting.js +1 -1
- package/lib/middleware/maxSize.js +3 -3
- package/lib/middleware/maxSize.js.map +1 -1
- package/lib/middleware/offset.js +2 -2
- package/lib/middleware/offset.js.map +1 -1
- package/lib/middleware/shift.js +2 -2
- package/lib/middleware/shift.js.map +1 -1
- package/lib/usePositioning.js +6 -6
- package/lib/usePositioning.js.map +1 -1
- package/lib/usePositioningMouseTarget.js +2 -2
- package/lib/usePositioningMouseTarget.js.map +1 -1
- package/lib/usePositioningOptions.js +8 -8
- package/lib/usePositioningOptions.js.map +1 -1
- package/lib/usePositioningSlideDirection.js +3 -3
- package/lib/usePositioningSlideDirection.js.map +1 -1
- package/lib/utils/devtools.js +3 -3
- package/lib/utils/devtools.js.map +1 -1
- package/lib/utils/fromFloatingUIPlacement.js +1 -1
- package/lib/utils/fromFloatingUIPlacement.js.map +1 -1
- package/lib/utils/getBoundary.js +1 -1
- package/lib/utils/getBoundary.js.map +1 -1
- package/lib/utils/getFloatingUIOffset.js +1 -1
- package/lib/utils/getFloatingUIOffset.js.map +1 -1
- package/lib/utils/hasAutoFocusFilter.js +1 -1
- package/lib/utils/hasAutoFocusFilter.js.map +1 -1
- package/lib/utils/index.js +16 -16
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/listScrollParents.js +1 -1
- package/lib/utils/listScrollParents.js.map +1 -1
- package/lib/utils/toggleScrollListener.js +2 -2
- package/lib/utils/toggleScrollListener.js.map +1 -1
- package/lib/utils/useCallbackRef.js +2 -2
- package/lib/utils/writeContainerupdates.js +1 -1
- package/lib/utils/writeContainerupdates.js.map +1 -1
- package/lib-commonjs/{createPositionManager.js → createPositionManager.cjs} +7 -7
- package/lib-commonjs/{createPositionManager.js.map → createPositionManager.cjs.map} +1 -1
- package/lib-commonjs/{createSlideStyles.js → createSlideStyles.cjs} +1 -1
- package/lib-commonjs/{createSlideStyles.js.map → createSlideStyles.cjs.map} +1 -1
- package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.js → SafeZoneArea.cjs} +5 -5
- package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.js.map → SafeZoneArea.cjs.map} +1 -1
- package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.styles.cjs.map +1 -0
- package/lib-commonjs/hooks/useSafeZoneArea/{useSafeZoneArea.js → useSafeZoneArea.cjs} +2 -2
- package/lib-commonjs/hooks/useSafeZoneArea/{useSafeZoneArea.js.map → useSafeZoneArea.cjs.map} +1 -1
- package/lib-commonjs/{index.js → index.cjs} +10 -10
- package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/middleware/{coverTarget.js → coverTarget.cjs} +1 -1
- package/lib-commonjs/middleware/{coverTarget.js.map → coverTarget.cjs.map} +1 -1
- package/lib-commonjs/middleware/{flip.js → flip.cjs} +1 -1
- package/lib-commonjs/middleware/{flip.js.map → flip.cjs.map} +1 -1
- package/lib-commonjs/middleware/{index.js → index.cjs} +7 -7
- package/lib-commonjs/middleware/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/middleware/{maxSize.js → maxSize.cjs} +3 -3
- package/lib-commonjs/middleware/{maxSize.js.map → maxSize.cjs.map} +1 -1
- package/lib-commonjs/middleware/{offset.js → offset.cjs} +1 -1
- package/lib-commonjs/middleware/{offset.js.map → offset.cjs.map} +1 -1
- package/lib-commonjs/middleware/{shift.js → shift.cjs} +1 -1
- package/lib-commonjs/middleware/{shift.js.map → shift.cjs.map} +1 -1
- package/lib-commonjs/{usePositioning.js → usePositioning.cjs} +8 -8
- package/lib-commonjs/{usePositioning.js.map → usePositioning.cjs.map} +1 -1
- package/lib-commonjs/{usePositioningMouseTarget.js → usePositioningMouseTarget.cjs} +1 -1
- package/lib-commonjs/{usePositioningMouseTarget.js.map → usePositioningMouseTarget.cjs.map} +1 -1
- package/lib-commonjs/{usePositioningOptions.js → usePositioningOptions.cjs} +15 -15
- package/lib-commonjs/{usePositioningOptions.js.map → usePositioningOptions.cjs.map} +1 -1
- package/lib-commonjs/{usePositioningSlideDirection.js → usePositioningSlideDirection.cjs} +1 -1
- package/lib-commonjs/{usePositioningSlideDirection.js.map → usePositioningSlideDirection.cjs.map} +1 -1
- package/lib-commonjs/utils/{devtools.js → devtools.cjs} +2 -2
- package/lib-commonjs/utils/{devtools.js.map → devtools.cjs.map} +1 -1
- package/lib-commonjs/utils/{fromFloatingUIPlacement.js → fromFloatingUIPlacement.cjs} +1 -1
- package/lib-commonjs/utils/{fromFloatingUIPlacement.js.map → fromFloatingUIPlacement.cjs.map} +1 -1
- package/lib-commonjs/utils/{getBoundary.js → getBoundary.cjs} +1 -1
- package/lib-commonjs/utils/{getBoundary.js.map → getBoundary.cjs.map} +1 -1
- package/lib-commonjs/utils/{getFloatingUIOffset.js → getFloatingUIOffset.cjs} +1 -1
- package/lib-commonjs/utils/{getFloatingUIOffset.js.map → getFloatingUIOffset.cjs.map} +1 -1
- package/lib-commonjs/utils/{hasAutoFocusFilter.js → hasAutoFocusFilter.cjs} +1 -1
- package/lib-commonjs/utils/{hasAutoFocusFilter.js.map → hasAutoFocusFilter.cjs.map} +1 -1
- package/lib-commonjs/utils/{index.js → index.cjs} +16 -16
- package/lib-commonjs/utils/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/utils/{listScrollParents.js → listScrollParents.cjs} +1 -1
- package/lib-commonjs/utils/{listScrollParents.js.map → listScrollParents.cjs.map} +1 -1
- package/lib-commonjs/utils/{toggleScrollListener.js → toggleScrollListener.cjs} +1 -1
- package/lib-commonjs/utils/{toggleScrollListener.js.map → toggleScrollListener.cjs.map} +1 -1
- package/lib-commonjs/utils/{writeContainerupdates.js → writeContainerupdates.cjs} +1 -1
- package/lib-commonjs/utils/{writeContainerupdates.js.map → writeContainerupdates.cjs.map} +1 -1
- package/package.json +17 -15
- package/lib-commonjs/hooks/useSafeZoneArea/SafeZoneArea.styles.js.map +0 -1
- /package/lib-commonjs/{PositioningConfigurationContext.js → PositioningConfigurationContext.cjs} +0 -0
- /package/lib-commonjs/{PositioningConfigurationContext.js.map → PositioningConfigurationContext.cjs.map} +0 -0
- /package/lib-commonjs/{constants.js → constants.cjs} +0 -0
- /package/lib-commonjs/{constants.js.map → constants.cjs.map} +0 -0
- /package/lib-commonjs/{createArrowStyles.js → createArrowStyles.cjs} +0 -0
- /package/lib-commonjs/{createArrowStyles.js.map → createArrowStyles.cjs.map} +0 -0
- /package/lib-commonjs/{createVirtualElementFromClick.js → createVirtualElementFromClick.cjs} +0 -0
- /package/lib-commonjs/{createVirtualElementFromClick.js.map → createVirtualElementFromClick.cjs.map} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.styles.js → SafeZoneArea.styles.cjs} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.styles.raw.js → SafeZoneArea.styles.raw.cjs} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{SafeZoneArea.styles.raw.js.map → SafeZoneArea.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{computeOutsideClipPath.js → computeOutsideClipPath.cjs} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{computeOutsideClipPath.js.map → computeOutsideClipPath.cjs.map} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{createSafeZoneAreaStateStore.js → createSafeZoneAreaStateStore.cjs} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{createSafeZoneAreaStateStore.js.map → createSafeZoneAreaStateStore.cjs.map} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{getMouseAnchor.js → getMouseAnchor.cjs} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{getMouseAnchor.js.map → getMouseAnchor.cjs.map} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{getRectCorners.js → getRectCorners.cjs} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{getRectCorners.js.map → getRectCorners.cjs.map} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{pointsToSvgPath.js → pointsToSvgPath.cjs} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{pointsToSvgPath.js.map → pointsToSvgPath.cjs.map} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{types.js → types.cjs} +0 -0
- /package/lib-commonjs/hooks/useSafeZoneArea/{types.js.map → types.cjs.map} +0 -0
- /package/lib-commonjs/middleware/{intersecting.js → intersecting.cjs} +0 -0
- /package/lib-commonjs/middleware/{intersecting.js.map → intersecting.cjs.map} +0 -0
- /package/lib-commonjs/middleware/{matchTargetSize.js → matchTargetSize.cjs} +0 -0
- /package/lib-commonjs/middleware/{matchTargetSize.js.map → matchTargetSize.cjs.map} +0 -0
- /package/lib-commonjs/{types.js → types.cjs} +0 -0
- /package/lib-commonjs/{types.js.map → types.cjs.map} +0 -0
- /package/lib-commonjs/utils/{createResizeObserver.js → createResizeObserver.cjs} +0 -0
- /package/lib-commonjs/utils/{createResizeObserver.js.map → createResizeObserver.cjs.map} +0 -0
- /package/lib-commonjs/utils/{debounce.js → debounce.cjs} +0 -0
- /package/lib-commonjs/utils/{debounce.js.map → debounce.cjs.map} +0 -0
- /package/lib-commonjs/utils/{getReactFiberFromNode.js → getReactFiberFromNode.cjs} +0 -0
- /package/lib-commonjs/utils/{getReactFiberFromNode.js.map → getReactFiberFromNode.cjs.map} +0 -0
- /package/lib-commonjs/utils/{getScrollParent.js → getScrollParent.cjs} +0 -0
- /package/lib-commonjs/utils/{getScrollParent.js.map → getScrollParent.cjs.map} +0 -0
- /package/lib-commonjs/utils/{mergeArrowOffset.js → mergeArrowOffset.cjs} +0 -0
- /package/lib-commonjs/utils/{mergeArrowOffset.js.map → mergeArrowOffset.cjs.map} +0 -0
- /package/lib-commonjs/utils/{normalizeAutoSize.js → normalizeAutoSize.cjs} +0 -0
- /package/lib-commonjs/utils/{normalizeAutoSize.js.map → normalizeAutoSize.cjs.map} +0 -0
- /package/lib-commonjs/utils/{parseFloatingUIPlacement.js → parseFloatingUIPlacement.cjs} +0 -0
- /package/lib-commonjs/utils/{parseFloatingUIPlacement.js.map → parseFloatingUIPlacement.cjs.map} +0 -0
- /package/lib-commonjs/utils/{resolvePositioningShorthand.js → resolvePositioningShorthand.cjs} +0 -0
- /package/lib-commonjs/utils/{resolvePositioningShorthand.js.map → resolvePositioningShorthand.cjs.map} +0 -0
- /package/lib-commonjs/utils/{toFloatingUIPadding.js → toFloatingUIPadding.cjs} +0 -0
- /package/lib-commonjs/utils/{toFloatingUIPadding.js.map → toFloatingUIPadding.cjs.map} +0 -0
- /package/lib-commonjs/utils/{toFloatingUIPlacement.js → toFloatingUIPlacement.cjs} +0 -0
- /package/lib-commonjs/utils/{toFloatingUIPlacement.js.map → toFloatingUIPlacement.cjs.map} +0 -0
- /package/lib-commonjs/utils/{useCallbackRef.js → useCallbackRef.cjs} +0 -0
- /package/lib-commonjs/utils/{useCallbackRef.js.map → useCallbackRef.cjs.map} +0 -0
- /package/lib-commonjs/utils/{writeArrowUpdates.js → writeArrowUpdates.cjs} +0 -0
- /package/lib-commonjs/utils/{writeArrowUpdates.js.map → writeArrowUpdates.cjs.map} +0 -0
|
@@ -37,10 +37,10 @@ _export(exports, {
|
|
|
37
37
|
return _shift.shift;
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
|
-
const _coverTarget = require("./coverTarget");
|
|
41
|
-
const _flip = require("./flip");
|
|
42
|
-
const _intersecting = require("./intersecting");
|
|
43
|
-
const _maxSize = require("./maxSize");
|
|
44
|
-
const _offset = require("./offset");
|
|
45
|
-
const _shift = require("./shift");
|
|
46
|
-
const _matchTargetSize = require("./matchTargetSize");
|
|
40
|
+
const _coverTarget = require("./coverTarget.cjs");
|
|
41
|
+
const _flip = require("./flip.cjs");
|
|
42
|
+
const _intersecting = require("./intersecting.cjs");
|
|
43
|
+
const _maxSize = require("./maxSize.cjs");
|
|
44
|
+
const _offset = require("./offset.cjs");
|
|
45
|
+
const _shift = require("./shift.cjs");
|
|
46
|
+
const _matchTargetSize = require("./matchTargetSize.cjs");
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,mBAAgB;sBAEvB,YAAS;8BACD,oBAAiB;yBAER,eAAY;wBAC3B,cAAW;uBAEZ,aAAU;iCACuB,uBAAoB"}
|
|
@@ -17,8 +17,8 @@ _export(exports, {
|
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
19
|
const _dom = require("@floating-ui/dom");
|
|
20
|
-
const _getBoundary = require("../utils/getBoundary");
|
|
21
|
-
const
|
|
20
|
+
const _getBoundary = require("../utils/getBoundary.cjs");
|
|
21
|
+
const _index = require("../utils/index.cjs");
|
|
22
22
|
const resetMaxSize = (autoSize)=>({
|
|
23
23
|
name: 'resetMaxSize',
|
|
24
24
|
fn ({ middlewareData, elements }) {
|
|
@@ -51,7 +51,7 @@ function maxSize(autoSize, options) {
|
|
|
51
51
|
const { container, overflowBoundary, overflowBoundaryPadding, isRtl } = options;
|
|
52
52
|
return (0, _dom.size)({
|
|
53
53
|
...overflowBoundaryPadding && {
|
|
54
|
-
padding: (0,
|
|
54
|
+
padding: (0, _index.toFloatingUIPadding)(overflowBoundaryPadding, isRtl)
|
|
55
55
|
},
|
|
56
56
|
...overflowBoundary && {
|
|
57
57
|
altBoundary: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/middleware/maxSize.ts"],"sourcesContent":["import { size } from '@floating-ui/dom';\nimport type { Middleware } from '@floating-ui/dom';\nimport type { NormalizedAutoSize, PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/getBoundary';\nimport { toFloatingUIPadding } from '../utils';\nexport interface MaxSizeMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding'> {\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * floating-ui `size` middleware uses floating element's height/width to calculate available height/width.\n * This middleware only runs once per lifecycle, resetting styles applied by maxSize from previous lifecycle.\n * Then floating element's original size is restored and `size` middleware can calculate available height/width correctly.\n */\nexport const resetMaxSize = (autoSize: NormalizedAutoSize): Middleware => ({\n name: 'resetMaxSize',\n fn({ middlewareData, elements }) {\n if (middlewareData.resetMaxSize?.maxSizeAlreadyReset) {\n return {};\n }\n\n const { applyMaxWidth, applyMaxHeight } = autoSize;\n if (applyMaxWidth) {\n elements.floating.style.removeProperty('box-sizing');\n elements.floating.style.removeProperty('max-width');\n elements.floating.style.removeProperty('width');\n }\n if (applyMaxHeight) {\n elements.floating.style.removeProperty('box-sizing');\n elements.floating.style.removeProperty('max-height');\n elements.floating.style.removeProperty('height');\n }\n\n return {\n data: { maxSizeAlreadyReset: true },\n reset: { rects: true },\n };\n },\n});\n\nexport function maxSize(autoSize: NormalizedAutoSize, options: MaxSizeMiddlewareOptions): Middleware {\n const { container, overflowBoundary, overflowBoundaryPadding, isRtl } = options;\n return size({\n ...(overflowBoundaryPadding && { padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl) }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n apply({ availableHeight, availableWidth, elements, rects }) {\n const applyMaxSizeStyles = (apply: boolean, dimension: 'width' | 'height', availableSize: number) => {\n if (!apply) {\n return;\n }\n\n elements.floating.style.setProperty('box-sizing', 'border-box');\n elements.floating.style.setProperty(`max-${dimension}`, `${availableSize}px`);\n\n if (rects.floating[dimension] > availableSize) {\n elements.floating.style.setProperty(dimension, `${availableSize}px`);\n\n const axis = dimension === 'width' ? 'x' : 'y';\n if (!elements.floating.style.getPropertyValue(`overflow-${axis}`)) {\n elements.floating.style.setProperty(`overflow-${axis}`, 'auto');\n }\n }\n };\n\n const { applyMaxWidth, applyMaxHeight } = autoSize;\n applyMaxSizeStyles(applyMaxWidth, 'width', availableWidth);\n applyMaxSizeStyles(applyMaxHeight, 'height', availableHeight);\n },\n });\n}\n"],"names":["size","getBoundary","toFloatingUIPadding","resetMaxSize","autoSize","name","fn","middlewareData","elements","maxSizeAlreadyReset","applyMaxWidth","applyMaxHeight","floating","style","removeProperty","data","reset","rects","maxSize","options","container","overflowBoundary","overflowBoundaryPadding","isRtl","padding","altBoundary","boundary","apply","availableHeight","availableWidth","applyMaxSizeStyles","dimension","availableSize","setProperty","axis","getPropertyValue"],"mappings":";;;;;;;;;;;IA0CgBkB,OAAAA;;;IA1BHf,YAAAA;;;;qBAhBQ,mBAAmB;6BAGZ,
|
|
1
|
+
{"version":3,"sources":["../src/middleware/maxSize.ts"],"sourcesContent":["import { size } from '@floating-ui/dom';\nimport type { Middleware } from '@floating-ui/dom';\nimport type { NormalizedAutoSize, PositioningOptions } from '../types';\nimport { getBoundary } from '../utils/getBoundary';\nimport { toFloatingUIPadding } from '../utils';\nexport interface MaxSizeMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding'> {\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * floating-ui `size` middleware uses floating element's height/width to calculate available height/width.\n * This middleware only runs once per lifecycle, resetting styles applied by maxSize from previous lifecycle.\n * Then floating element's original size is restored and `size` middleware can calculate available height/width correctly.\n */\nexport const resetMaxSize = (autoSize: NormalizedAutoSize): Middleware => ({\n name: 'resetMaxSize',\n fn({ middlewareData, elements }) {\n if (middlewareData.resetMaxSize?.maxSizeAlreadyReset) {\n return {};\n }\n\n const { applyMaxWidth, applyMaxHeight } = autoSize;\n if (applyMaxWidth) {\n elements.floating.style.removeProperty('box-sizing');\n elements.floating.style.removeProperty('max-width');\n elements.floating.style.removeProperty('width');\n }\n if (applyMaxHeight) {\n elements.floating.style.removeProperty('box-sizing');\n elements.floating.style.removeProperty('max-height');\n elements.floating.style.removeProperty('height');\n }\n\n return {\n data: { maxSizeAlreadyReset: true },\n reset: { rects: true },\n };\n },\n});\n\nexport function maxSize(autoSize: NormalizedAutoSize, options: MaxSizeMiddlewareOptions): Middleware {\n const { container, overflowBoundary, overflowBoundaryPadding, isRtl } = options;\n return size({\n ...(overflowBoundaryPadding && { padding: toFloatingUIPadding(overflowBoundaryPadding, isRtl) }),\n ...(overflowBoundary && { altBoundary: true, boundary: getBoundary(container, overflowBoundary) }),\n apply({ availableHeight, availableWidth, elements, rects }) {\n const applyMaxSizeStyles = (apply: boolean, dimension: 'width' | 'height', availableSize: number) => {\n if (!apply) {\n return;\n }\n\n elements.floating.style.setProperty('box-sizing', 'border-box');\n elements.floating.style.setProperty(`max-${dimension}`, `${availableSize}px`);\n\n if (rects.floating[dimension] > availableSize) {\n elements.floating.style.setProperty(dimension, `${availableSize}px`);\n\n const axis = dimension === 'width' ? 'x' : 'y';\n if (!elements.floating.style.getPropertyValue(`overflow-${axis}`)) {\n elements.floating.style.setProperty(`overflow-${axis}`, 'auto');\n }\n }\n };\n\n const { applyMaxWidth, applyMaxHeight } = autoSize;\n applyMaxSizeStyles(applyMaxWidth, 'width', availableWidth);\n applyMaxSizeStyles(applyMaxHeight, 'height', availableHeight);\n },\n });\n}\n"],"names":["size","getBoundary","toFloatingUIPadding","resetMaxSize","autoSize","name","fn","middlewareData","elements","maxSizeAlreadyReset","applyMaxWidth","applyMaxHeight","floating","style","removeProperty","data","reset","rects","maxSize","options","container","overflowBoundary","overflowBoundaryPadding","isRtl","padding","altBoundary","boundary","apply","availableHeight","availableWidth","applyMaxSizeStyles","dimension","availableSize","setProperty","axis","getPropertyValue"],"mappings":";;;;;;;;;;;IA0CgBkB,OAAAA;;;IA1BHf,YAAAA;;;;qBAhBQ,mBAAmB;6BAGZ,0BAAuB;uBACf,oBAAW;AAYxC,qBAAqB,CAACC,WAA8C,CAAA;QACzEC,MAAM;QACNC,IAAG,EAAEC,cAAc,EAAEC,QAAQ,EAAE;gBACzBD;YAAJ,IAAA,CAAIA,+BAAAA,eAAeJ,YAAAA,AAAY,MAAA,QAA3BI,iCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,6BAA6BE,mBAAmB,EAAE;gBACpD,OAAO,CAAC;YACV;YAEA,MAAM,EAAEC,aAAa,EAAEC,cAAc,EAAE,GAAGP;YAC1C,IAAIM,eAAe;gBACjBF,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;gBACvCN,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;gBACvCN,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;YACzC;YACA,IAAIH,gBAAgB;gBAClBH,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;gBACvCN,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;gBACvCN,SAASI,QAAQ,CAACC,KAAK,CAACC,cAAc,CAAC;YACzC;YAEA,OAAO;gBACLC,MAAM;oBAAEN,qBAAqB;gBAAK;gBAClCO,OAAO;oBAAEC,OAAO;gBAAK;YACvB;QACF;IACF,CAAA,EAAG;AAEI,iBAAiBb,QAA4B,EAAEe,OAAiC;IACrF,MAAM,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,uBAAuB,EAAEC,KAAK,EAAE,GAAGJ;IACxE,WAAOnB,SAAAA,EAAK;QACV,GAAIsB,2BAA2B;YAAEE,aAAStB,0BAAAA,EAAoBoB,yBAAyBC;QAAO,CAAC;QAC/F,GAAIF,oBAAoB;YAAEI,aAAa;YAAMC,cAAUzB,wBAAAA,EAAYmB,WAAWC;QAAkB,CAAC;QACjGM,OAAM,EAAEC,eAAe,EAAEC,cAAc,EAAErB,QAAQ,EAAES,KAAK,EAAE;YACxD,MAAMa,qBAAqB,CAACH,OAAgBI,WAA+BC;gBACzE,IAAI,CAACL,OAAO;oBACV;gBACF;gBAEAnB,SAASI,QAAQ,CAACC,KAAK,CAACoB,WAAW,CAAC,cAAc;gBAClDzB,SAASI,QAAQ,CAACC,KAAK,CAACoB,WAAW,CAAC,CAAC,IAAI,EAAEF,WAAW,EAAE,GAAGC,cAAc,EAAE,CAAC;gBAE5E,IAAIf,MAAML,QAAQ,CAACmB,UAAU,GAAGC,eAAe;oBAC7CxB,SAASI,QAAQ,CAACC,KAAK,CAACoB,WAAW,CAACF,WAAW,GAAGC,cAAc,EAAE,CAAC;oBAEnE,MAAME,OAAOH,cAAc,UAAU,MAAM;oBAC3C,IAAI,CAACvB,SAASI,QAAQ,CAACC,KAAK,CAACsB,gBAAgB,CAAC,CAAC,SAAS,EAAED,MAAM,GAAG;wBACjE1B,SAASI,QAAQ,CAACC,KAAK,CAACoB,WAAW,CAAC,CAAC,SAAS,EAAEC,MAAM,EAAE;oBAC1D;gBACF;YACF;YAEA,MAAM,EAAExB,aAAa,EAAEC,cAAc,EAAE,GAAGP;YAC1C0B,mBAAmBpB,eAAe,SAASmB;YAC3CC,mBAAmBnB,gBAAgB,UAAUiB;QAC/C;IACF;AACF"}
|
|
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "offset", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _dom = require("@floating-ui/dom");
|
|
12
|
-
const _getFloatingUIOffset = require("../utils/getFloatingUIOffset");
|
|
12
|
+
const _getFloatingUIOffset = require("../utils/getFloatingUIOffset.cjs");
|
|
13
13
|
function offset(offsetValue) {
|
|
14
14
|
const floatingUIOffset = (0, _getFloatingUIOffset.getFloatingUIOffset)(offsetValue);
|
|
15
15
|
return (0, _dom.offset)(floatingUIOffset);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/middleware/offset.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { offset as baseOffset } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getFloatingUIOffset } from '../utils/getFloatingUIOffset';\n\n/**\n * Wraps floating UI offset middleware to 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":";;;;;;;;;;qBACqC,mBAAmB;qCAEpB
|
|
1
|
+
{"version":3,"sources":["../src/middleware/offset.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { offset as baseOffset } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getFloatingUIOffset } from '../utils/getFloatingUIOffset';\n\n/**\n * Wraps floating UI offset middleware to 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":";;;;;;;;;;qBACqC,mBAAmB;qCAEpB,kCAA+B;AAK5D,SAASA,OAAOG,WAAyC;IAC9D,MAAMC,uBAAmBF,wCAAAA,EAAoBC;IAC7C,WAAOF,WAAAA,EAAWG;AACpB"}
|
|
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "shift", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _dom = require("@floating-ui/dom");
|
|
12
|
-
const _index = require("../utils/index");
|
|
12
|
+
const _index = require("../utils/index.cjs");
|
|
13
13
|
function shift(options) {
|
|
14
14
|
const { hasScrollableElement, shiftToCoverTarget, disableTether, overflowBoundary, container, overflowBoundaryPadding, isRtl } = options;
|
|
15
15
|
return (0, _dom.shift)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/middleware/shift.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, toFloatingUIPadding } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding' | 'shiftToCoverTarget'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions): 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":";;;;+BAgBgBA;;;;;;qBAf+B,mBAAmB;uBAEjB,
|
|
1
|
+
{"version":3,"sources":["../src/middleware/shift.ts"],"sourcesContent":["import type { Middleware } from '@floating-ui/dom';\nimport { shift as baseShift, limitShift } from '@floating-ui/dom';\nimport type { PositioningOptions } from '../types';\nimport { getBoundary, toFloatingUIPadding } from '../utils/index';\n\nexport interface ShiftMiddlewareOptions\n extends Pick<PositioningOptions, 'overflowBoundary' | 'overflowBoundaryPadding' | 'shiftToCoverTarget'> {\n hasScrollableElement?: boolean;\n disableTether?: PositioningOptions['unstable_disableTether'];\n container: HTMLElement | null;\n isRtl: boolean;\n}\n\n/**\n * Wraps the floating UI shift middleware for easier usage of our options\n */\nexport function shift(options: ShiftMiddlewareOptions): 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":";;;;+BAgBgBA;;;;;;qBAf+B,mBAAmB;uBAEjB,oBAAiB;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"}
|
|
@@ -12,10 +12,10 @@ Object.defineProperty(exports, "usePositioning", {
|
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
14
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
15
|
-
const _constants = require("./constants");
|
|
16
|
-
const _createPositionManager = require("./createPositionManager");
|
|
17
|
-
const _usePositioningOptions = require("./usePositioningOptions");
|
|
18
|
-
const
|
|
15
|
+
const _constants = require("./constants.cjs");
|
|
16
|
+
const _createPositionManager = require("./createPositionManager.cjs");
|
|
17
|
+
const _usePositioningOptions = require("./usePositioningOptions.cjs");
|
|
18
|
+
const _index = require("./utils/index.cjs");
|
|
19
19
|
function usePositioning(options) {
|
|
20
20
|
const managerRef = _react.useRef(null);
|
|
21
21
|
const targetRef = _react.useRef(null);
|
|
@@ -86,7 +86,7 @@ function usePositioning(options) {
|
|
|
86
86
|
var _contentNode_ownerDocument;
|
|
87
87
|
const contentNode = containerRef.current;
|
|
88
88
|
const treeWalker = (_contentNode_ownerDocument = contentNode.ownerDocument) === null || _contentNode_ownerDocument === void 0 ? void 0 : _contentNode_ownerDocument.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {
|
|
89
|
-
acceptNode:
|
|
89
|
+
acceptNode: _index.hasAutofocusFilter
|
|
90
90
|
});
|
|
91
91
|
while(treeWalker.nextNode()){
|
|
92
92
|
const node = treeWalker.currentNode;
|
|
@@ -116,7 +116,7 @@ function usePositioning(options) {
|
|
|
116
116
|
// TODO: Should be rework to handle options.enabled and contentRef updates
|
|
117
117
|
}, []);
|
|
118
118
|
}
|
|
119
|
-
const setTarget = (0,
|
|
119
|
+
const setTarget = (0, _index.useCallbackRef)(null, (target)=>{
|
|
120
120
|
if (targetRef.current !== target) {
|
|
121
121
|
targetRef.current = target;
|
|
122
122
|
updatePositionManager();
|
|
@@ -126,7 +126,7 @@ function usePositioning(options) {
|
|
|
126
126
|
var _options_onPositioningEnd;
|
|
127
127
|
return (_options_onPositioningEnd = options.onPositioningEnd) === null || _options_onPositioningEnd === void 0 ? void 0 : _options_onPositioningEnd.call(options, e);
|
|
128
128
|
});
|
|
129
|
-
const setContainer = (0,
|
|
129
|
+
const setContainer = (0, _index.useCallbackRef)(null, (container)=>{
|
|
130
130
|
if (containerRef.current !== container) {
|
|
131
131
|
var _containerRef_current;
|
|
132
132
|
(_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.removeEventListener(_constants.POSITIONING_END_EVENT, onPositioningEnd);
|
|
@@ -135,7 +135,7 @@ function usePositioning(options) {
|
|
|
135
135
|
updatePositionManager();
|
|
136
136
|
}
|
|
137
137
|
});
|
|
138
|
-
const setArrow = (0,
|
|
138
|
+
const setArrow = (0, _index.useCallbackRef)(null, (arrow)=>{
|
|
139
139
|
if (arrowRef.current !== arrow) {
|
|
140
140
|
arrowRef.current = arrow;
|
|
141
141
|
updatePositionManager();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/usePositioning.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createPositionManager } from './createPositionManager';\nimport type {\n OnPositioningEndEvent,\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { usePositioningOptions } from './usePositioningOptions';\nimport { useCallbackRef, hasAutofocusFilter } from './utils';\n\n/**\n * @internal\n */\nexport function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn {\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement | null) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('usePositioning():', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n 'usePositioning(): ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const onPositioningEnd = useEventCallback((e: OnPositioningEndEvent) => options.onPositioningEnd?.(e));\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n // Cast because CustomEvent<OnPositioningEndEventDetail> is not assignable to EventListener\n containerRef.current?.removeEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n container?.addEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n"],"names":["canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","POSITIONING_END_EVENT","createPositionManager","usePositioningOptions","useCallbackRef","hasAutofocusFilter","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","onPositioningEnd","e","setContainer","removeEventListener","addEventListener","setArrow"],"mappings":"AAAA;;;;;+BAqBgBS;;;;;;;gCAnBuD,4BAA4B;iEAC5E,QAAQ;2BAEO,cAAc;uCACd,0BAA0B;uCAS1B,0BAA0B;uBACb,UAAU;AAKtD,wBAAwBC,OAA8C;IAC3E,MAAMC,aAAaR,OAAMS,MAAM,CAAyB;IACxD,MAAMC,YAAYV,OAAMS,MAAM,CAAuB;IACrD,MAAME,oBAAoBX,OAAMS,MAAM,CAAuB;IAC7D,MAAMG,eAAeZ,OAAMS,MAAM,CAAqB;IACtD,MAAMI,WAAWb,OAAMS,MAAM,CAAqB;IAElD,MAAM,EAAEK,UAAU,IAAI,EAAE,GAAGP;IAC3B,MAAMQ,gCAA4BZ,4CAAAA,EAAsBI;IACxD,MAAMS,wBAAwBhB,OAAMiB,WAAW,CAAC;QAC9C,IAAIT,WAAWU,OAAO,EAAE;YACtBV,WAAWU,OAAO,CAACC,OAAO;QAC5B;QACAX,WAAWU,OAAO,GAAG;YAENP;QAAf,MAAMS,SAAST,CAAAA,6BAAAA,kBAAkBO,OAAAA,AAAO,MAAA,QAAzBP,+BAAAA,KAAAA,IAAAA,6BAA6BD,UAAUQ,OAAO;QAE7D,IAAIJ,eAAWjB,yBAAAA,OAAeuB,UAAUR,aAAaM,OAAO,EAAE;YAC5DV,WAAWU,OAAO,OAAGhB,4CAAAA,EAAsB;gBACzCmB,WAAWT,aAAaM,OAAO;gBAC/BE;gBACAE,OAAOT,SAASK,OAAO;gBACvB,GAAGH,0BAA0BH,aAAaM,OAAO,EAAEL,SAASK,OAAO,CAAC;YACtE;QACF;IACF,GAAG;QAACJ;QAASC;KAA0B;IAEvC,MAAMQ,wBAAoBzB,gCAAAA,EAAiB,CAACsB;QAC1CT,kBAAkBO,OAAO,GAAGE;QAC5BJ;IACF;IAEAhB,OAAMwB,mBAAmB,CACvBjB,QAAQkB,cAAc,EACtB,IAAO;YACLC,gBAAgB;oBAAMlB;wBAAAA,sBAAAA,WAAWU,OAAAA,AAAO,MAAA,QAAlBV,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBkB,cAAc;;YACxDC,WAAW,CAACP;gBACV,IAAIb,QAAQa,MAAM,IAAIQ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;oBAC3D,MAAMC,MAAM,IAAIC;oBAChB,sCAAsC;oBACtCC,QAAQC,IAAI,CAAC;oBACb,sCAAsC;oBACtCD,QAAQC,IAAI,CAACH,IAAII,KAAK;gBACxB;gBAEAZ,kBAAkBH;YACpB;SACF,CAAA,EACA;QAACb,QAAQa,MAAM;QAAEG;KAAkB;QAGrCxB,yCAAAA,EAA0B;YACNQ;QAAlBgB,kBAAkBhB,CAAAA,kBAAAA,QAAQa,MAAAA,AAAM,MAAA,QAAdb,oBAAAA,KAAAA,IAAAA,kBAAkB;IACtC,GAAG;QAACA,QAAQa,MAAM;QAAEG;KAAkB;QAEtCxB,yCAAAA,EAA0B;QACxBiB;IACF,GAAG;QAACA;KAAsB;IAE1B,IAAIY,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,mDAAmD;QACnD,sDAAsD;QACtD9B,OAAMoC,SAAS,CAAC;YACd,IAAIxB,aAAaM,OAAO,EAAE;oBAELmB;gBADnB,MAAMA,cAAczB,aAAaM,OAAO;gBACxC,MAAMoB,aAAAA,CAAaD,6BAAAA,YAAYE,aAAAA,AAAa,MAAA,QAAzBF,+BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,2BAA2BG,gBAAgB,CAACH,aAAaI,WAAWC,YAAY,EAAE;oBACnGC,YAAYtC,yBAAAA;gBACd;gBAEA,MAAOiC,WAAWM,QAAQ,GAAI;oBAC5B,MAAMC,OAAOP,WAAWQ,WAAW;oBACnC,sCAAsC;oBACtCb,QAAQC,IAAI,CAAC,qBAAqBW;oBAClC,sCAAsC;oBACtCZ,QAAQC,IAAI,CACV;wBACE;wBACA;wBACA;wBACA;wBACA;wBACA;wBACA;wBACA;wBACA;wBACA,CAAC,0FAA0F,CAAC;wBAC5F;wBACA;wBACA;wBACA;wBACA;qBACD,CAACa,IAAI,CAAC;gBAEX;YACF;QACA,mDAAmD;QACnD,0EAA0E;QAC5E,GAAG,EAAE;IACP;IAEA,MAAMpB,gBAAYvB,qBAAAA,EAA8B,MAAMgB,CAAAA;QACpD,IAAIV,UAAUQ,OAAO,KAAKE,QAAQ;YAChCV,UAAUQ,OAAO,GAAGE;YACpBJ;QACF;IACF;IAEA,MAAMgC,uBAAmBlD,gCAAAA,EAAiB,CAACmD;YAA6B1C;eAAAA,6BAAAA,QAAQyC,gBAAAA,AAAgB,MAAA,QAAxBzC,8BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,0BAAAA,IAAAA,CAAAA,SAA2B0C;;IACnG,MAAMC,mBAAe9C,qBAAAA,EAAmC,MAAMiB,CAAAA;QAC5D,IAAIT,aAAaM,OAAO,KAAKG,WAAW;gBACtC,AACAT,2FAD2F;aAC3FA,wBAAAA,aAAaM,OAAAA,AAAO,MAAA,QAApBN,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAsBuC,mBAAmB,CAAClD,gCAAAA,EAAuB+C;YACjE3B,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAW+B,gBAAgB,CAACnD,gCAAAA,EAAuB+C;YACnDpC,aAAaM,OAAO,GAAGG;YACvBL;QACF;IACF;IAEA,MAAMqC,eAAWjD,qBAAAA,EAAmC,MAAMkB,CAAAA;QACxD,IAAIT,SAASK,OAAO,KAAKI,OAAO;YAC9BT,SAASK,OAAO,GAAGI;YACnBN;QACF;IACF;IAEA,kEAAkE;IAClE,OAAO;QAAEN,WAAWiB;QAAWf,cAAcsC;QAAcrC,UAAUwC;IAAS;AAChF"}
|
|
1
|
+
{"version":3,"sources":["../src/usePositioning.ts"],"sourcesContent":["'use client';\n\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { POSITIONING_END_EVENT } from './constants';\nimport { createPositionManager } from './createPositionManager';\nimport type {\n OnPositioningEndEvent,\n PositioningOptions,\n PositioningProps,\n PositionManager,\n TargetElement,\n UsePositioningReturn,\n} from './types';\nimport { usePositioningOptions } from './usePositioningOptions';\nimport { useCallbackRef, hasAutofocusFilter } from './utils';\n\n/**\n * @internal\n */\nexport function usePositioning(options: PositioningProps & PositioningOptions): UsePositioningReturn {\n const managerRef = React.useRef<PositionManager | null>(null);\n const targetRef = React.useRef<TargetElement | null>(null);\n const overrideTargetRef = React.useRef<TargetElement | null>(null);\n const containerRef = React.useRef<HTMLElement | null>(null);\n const arrowRef = React.useRef<HTMLElement | null>(null);\n\n const { enabled = true } = options;\n const resolvePositioningOptions = usePositioningOptions(options);\n const updatePositionManager = React.useCallback(() => {\n if (managerRef.current) {\n managerRef.current.dispose();\n }\n managerRef.current = null;\n\n const target = overrideTargetRef.current ?? targetRef.current;\n\n if (enabled && canUseDOM() && target && containerRef.current) {\n managerRef.current = createPositionManager({\n container: containerRef.current,\n target,\n arrow: arrowRef.current,\n ...resolvePositioningOptions(containerRef.current, arrowRef.current),\n });\n }\n }, [enabled, resolvePositioningOptions]);\n\n const setOverrideTarget = useEventCallback((target: TargetElement | null) => {\n overrideTargetRef.current = target;\n updatePositionManager();\n });\n\n React.useImperativeHandle(\n options.positioningRef,\n () => ({\n updatePosition: () => managerRef.current?.updatePosition(),\n setTarget: (target: TargetElement | null) => {\n if (options.target && process.env.NODE_ENV !== 'production') {\n const err = new Error();\n // eslint-disable-next-line no-console\n console.warn('Imperative setTarget should not be used at the same time as target option');\n // eslint-disable-next-line no-console\n console.warn(err.stack);\n }\n\n setOverrideTarget(target);\n },\n }),\n [options.target, setOverrideTarget],\n );\n\n useIsomorphicLayoutEffect(() => {\n setOverrideTarget(options.target ?? null);\n }, [options.target, setOverrideTarget]);\n\n useIsomorphicLayoutEffect(() => {\n updatePositionManager();\n }, [updatePositionManager]);\n\n if (process.env.NODE_ENV !== 'production') {\n // This checked should run only in development mode\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (containerRef.current) {\n const contentNode = containerRef.current;\n const treeWalker = contentNode.ownerDocument?.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {\n acceptNode: hasAutofocusFilter,\n });\n\n while (treeWalker.nextNode()) {\n const node = treeWalker.currentNode;\n // eslint-disable-next-line no-console\n console.warn('usePositioning():', node);\n // eslint-disable-next-line no-console\n console.warn(\n [\n 'usePositioning(): ^ this node contains \"autoFocus\" prop on a React element. This can break the initial',\n 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',\n '\"autoFocus\" behavior to solve inconsistencies between different browsers:',\n 'https://github.com/facebook/react/issues/11851#issuecomment-351787078',\n '\\n',\n 'However, \".focus()\" in this case occurs before any other React effects will be executed',\n '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',\n 'want to use \"autoFocus\" please add \"position: fixed\" to styles of the element that is wrapped by',\n '\"Popper\".',\n `In general, it's not recommended to use \"autoFocus\" as it may break accessibility aspects:`,\n 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',\n '\\n',\n 'We suggest to use the \"trapFocus\" prop on Fluent components or a catch \"ref\" and then use',\n '\"ref.current.focus\" in React.useEffect():',\n 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',\n ].join(' '),\n );\n }\n }\n // We run this check once, no need to add deps here\n // TODO: Should be rework to handle options.enabled and contentRef updates\n }, []);\n }\n\n const setTarget = useCallbackRef<TargetElement>(null, target => {\n if (targetRef.current !== target) {\n targetRef.current = target;\n updatePositionManager();\n }\n });\n\n const onPositioningEnd = useEventCallback((e: OnPositioningEndEvent) => options.onPositioningEnd?.(e));\n const setContainer = useCallbackRef<HTMLElement | null>(null, container => {\n if (containerRef.current !== container) {\n // Cast because CustomEvent<OnPositioningEndEventDetail> is not assignable to EventListener\n containerRef.current?.removeEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n container?.addEventListener(POSITIONING_END_EVENT, onPositioningEnd as EventListener);\n containerRef.current = container;\n updatePositionManager();\n }\n });\n\n const setArrow = useCallbackRef<HTMLElement | null>(null, arrow => {\n if (arrowRef.current !== arrow) {\n arrowRef.current = arrow;\n updatePositionManager();\n }\n });\n\n // Let users use callback refs so they feel like 'normal' DOM refs\n return { targetRef: setTarget, containerRef: setContainer, arrowRef: setArrow };\n}\n"],"names":["canUseDOM","useEventCallback","useIsomorphicLayoutEffect","React","POSITIONING_END_EVENT","createPositionManager","usePositioningOptions","useCallbackRef","hasAutofocusFilter","usePositioning","options","managerRef","useRef","targetRef","overrideTargetRef","containerRef","arrowRef","enabled","resolvePositioningOptions","updatePositionManager","useCallback","current","dispose","target","container","arrow","setOverrideTarget","useImperativeHandle","positioningRef","updatePosition","setTarget","process","env","NODE_ENV","err","Error","console","warn","stack","useEffect","contentNode","treeWalker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","nextNode","node","currentNode","join","onPositioningEnd","e","setContainer","removeEventListener","addEventListener","setArrow"],"mappings":"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"}
|
|
@@ -11,7 +11,7 @@ Object.defineProperty(exports, "usePositioningMouseTarget", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _createVirtualElementFromClick = require("./createVirtualElementFromClick");
|
|
14
|
+
const _createVirtualElementFromClick = require("./createVirtualElementFromClick.cjs");
|
|
15
15
|
const usePositioningMouseTarget = (initialState)=>{
|
|
16
16
|
const [virtualElement, setVirtualElement] = _react.useState(initialState);
|
|
17
17
|
const setVirtualMouseTarget = (event)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/usePositioningMouseTarget.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createVirtualElementFromClick } from './createVirtualElementFromClick';\nimport type { PositioningVirtualElement, SetVirtualMouseTarget } from './types';\n\n/**\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 * @internal\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,
|
|
1
|
+
{"version":3,"sources":["../src/usePositioningMouseTarget.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createVirtualElementFromClick } from './createVirtualElementFromClick';\nimport type { PositioningVirtualElement, SetVirtualMouseTarget } from './types';\n\n/**\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 * @internal\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,qCAAkC;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"}
|
|
@@ -14,10 +14,10 @@ const _devtools = require("@floating-ui/devtools");
|
|
|
14
14
|
const _dom = require("@floating-ui/dom");
|
|
15
15
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
16
16
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
const _devtools1 = require("./utils/devtools");
|
|
20
|
-
const _PositioningConfigurationContext = require("./PositioningConfigurationContext");
|
|
17
|
+
const _index = require("./middleware/index.cjs");
|
|
18
|
+
const _index1 = require("./utils/index.cjs");
|
|
19
|
+
const _devtools1 = require("./utils/devtools.cjs");
|
|
20
|
+
const _PositioningConfigurationContext = require("./PositioningConfigurationContext.cjs");
|
|
21
21
|
/**
|
|
22
22
|
* This is redundant and exists only to manage React dependencies properly & avoid leaking individual options to the
|
|
23
23
|
* scope of `usePositioningOptions`.
|
|
@@ -77,23 +77,23 @@ function usePositioningOptions(options) {
|
|
|
77
77
|
const configFn = usePositioningConfigFn((0, _PositioningConfigurationContext.usePositioningConfiguration)(), options);
|
|
78
78
|
const { positionFixed } = options;
|
|
79
79
|
return _react.useCallback((container, arrow)=>{
|
|
80
|
-
const hasScrollableElement = (0,
|
|
80
|
+
const hasScrollableElement = (0, _index1.hasScrollParent)(container);
|
|
81
81
|
const optionsAfterEnhancement = configFn(container, arrow);
|
|
82
82
|
const { autoSize, disableUpdateOnResize, matchTargetSize, offset, coverTarget, flipBoundary, overflowBoundary, useTransform, overflowBoundaryPadding, pinned, position, arrowPadding, strategy, align, fallbackPositions, shiftToCoverTarget, unstable_disableTether } = optionsAfterEnhancement;
|
|
83
|
-
const normalizedAutoSize = (0,
|
|
83
|
+
const normalizedAutoSize = (0, _index1.normalizeAutoSize)(autoSize);
|
|
84
84
|
const middleware = [
|
|
85
|
-
normalizedAutoSize && (0,
|
|
86
|
-
matchTargetSize && (0,
|
|
87
|
-
offset && (0,
|
|
88
|
-
coverTarget && (0,
|
|
89
|
-
!pinned && (0,
|
|
85
|
+
normalizedAutoSize && (0, _index.resetMaxSize)(normalizedAutoSize),
|
|
86
|
+
matchTargetSize && (0, _index.matchTargetSize)(),
|
|
87
|
+
offset && (0, _index.offset)(offset),
|
|
88
|
+
coverTarget && (0, _index.coverTarget)(),
|
|
89
|
+
!pinned && (0, _index.flip)({
|
|
90
90
|
container,
|
|
91
91
|
flipBoundary,
|
|
92
92
|
hasScrollableElement,
|
|
93
93
|
isRtl,
|
|
94
94
|
fallbackPositions
|
|
95
95
|
}),
|
|
96
|
-
(0,
|
|
96
|
+
(0, _index.shift)({
|
|
97
97
|
container,
|
|
98
98
|
hasScrollableElement,
|
|
99
99
|
overflowBoundary,
|
|
@@ -102,13 +102,13 @@ function usePositioningOptions(options) {
|
|
|
102
102
|
isRtl,
|
|
103
103
|
shiftToCoverTarget
|
|
104
104
|
}),
|
|
105
|
-
normalizedAutoSize && (0,
|
|
105
|
+
normalizedAutoSize && (0, _index.maxSize)(normalizedAutoSize, {
|
|
106
106
|
container,
|
|
107
107
|
overflowBoundary,
|
|
108
108
|
overflowBoundaryPadding,
|
|
109
109
|
isRtl
|
|
110
110
|
}),
|
|
111
|
-
(0,
|
|
111
|
+
(0, _index.intersecting)(),
|
|
112
112
|
arrow && (0, _dom.arrow)({
|
|
113
113
|
element: arrow,
|
|
114
114
|
padding: arrowPadding
|
|
@@ -121,7 +121,7 @@ function usePositioningOptions(options) {
|
|
|
121
121
|
}),
|
|
122
122
|
process.env.NODE_ENV !== 'production' && targetDocument && (0, _devtools.devtools)(targetDocument, (0, _devtools1.devtoolsCallback)(optionsAfterEnhancement))
|
|
123
123
|
].filter(Boolean);
|
|
124
|
-
const placement = (0,
|
|
124
|
+
const placement = (0, _index1.toFloatingUIPlacement)(align, position, isRtl);
|
|
125
125
|
return {
|
|
126
126
|
placement,
|
|
127
127
|
middleware,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/usePositioningOptions.ts"],"sourcesContent":["'use client';\n\nimport { devtools } from '@floating-ui/devtools';\nimport { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n resetMaxSize as resetMaxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n matchTargetSize as matchTargetSizeMiddleware,\n} from './middleware';\nimport type { PositioningConfigurationFn, PositioningConfigurationFnOptions, PositioningOptions } from './types';\nimport { toFloatingUIPlacement, hasScrollParent, normalizeAutoSize } from './utils';\nimport { devtoolsCallback } from './utils/devtools';\nimport { usePositioningConfiguration } from './PositioningConfigurationContext';\n\n/**\n * This is redundant and exists only to manage React dependencies properly & avoid leaking individual options to the\n * scope of `usePositioningOptions`.\n *\n * @internal\n */\nfunction usePositioningConfigFn(\n configFn: PositioningConfigurationFn,\n options: PositioningOptions,\n): (container: HTMLElement, arrow: HTMLElement | null) => PositioningConfigurationFnOptions {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableUpdateOnResize,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether,\n strategy,\n overflowBoundaryPadding,\n fallbackPositions,\n useTransform,\n matchTargetSize,\n shiftToCoverTarget,\n } = options;\n\n return React.useCallback(\n (container: HTMLElement, arrow: HTMLElement | null) => {\n return configFn({\n container,\n arrow,\n options: {\n autoSize,\n disableUpdateOnResize,\n matchTargetSize,\n offset,\n strategy,\n coverTarget,\n flipBoundary,\n overflowBoundary,\n useTransform,\n overflowBoundaryPadding,\n pinned,\n arrowPadding,\n align,\n fallbackPositions,\n shiftToCoverTarget,\n position,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether,\n },\n });\n },\n [\n autoSize,\n disableUpdateOnResize,\n matchTargetSize,\n offset,\n strategy,\n coverTarget,\n flipBoundary,\n overflowBoundary,\n useTransform,\n overflowBoundaryPadding,\n pinned,\n arrowPadding,\n align,\n fallbackPositions,\n shiftToCoverTarget,\n position,\n unstable_disableTether,\n configFn,\n ],\n );\n}\n\n/**\n * @internal\n */\nexport function usePositioningOptions(options: PositioningOptions): (\n container: HTMLElement,\n arrow: HTMLElement | null,\n) => {\n placement: Placement | undefined;\n middleware: Middleware[];\n strategy: Strategy;\n disableUpdateOnResize?: boolean;\n useTransform?: boolean;\n} {\n const { dir, targetDocument } = useFluent();\n const isRtl = dir === 'rtl';\n\n const configFn = usePositioningConfigFn(usePositioningConfiguration(), options);\n const {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n positionFixed,\n } = options;\n\n return React.useCallback(\n (container: HTMLElement, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const optionsAfterEnhancement = configFn(container, arrow);\n const {\n autoSize,\n disableUpdateOnResize,\n matchTargetSize,\n offset,\n coverTarget,\n flipBoundary,\n overflowBoundary,\n useTransform,\n overflowBoundaryPadding,\n pinned,\n position,\n arrowPadding,\n strategy,\n align,\n fallbackPositions,\n shiftToCoverTarget,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether,\n } = optionsAfterEnhancement;\n const normalizedAutoSize = normalizeAutoSize(autoSize);\n\n const middleware = [\n normalizedAutoSize && resetMaxSizeMiddleware(normalizedAutoSize),\n matchTargetSize && matchTargetSizeMiddleware(),\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement, isRtl, fallbackPositions }),\n shiftMiddleware({\n container,\n hasScrollableElement,\n overflowBoundary,\n disableTether: unstable_disableTether,\n overflowBoundaryPadding,\n isRtl,\n shiftToCoverTarget,\n }),\n normalizedAutoSize &&\n maxSizeMiddleware(normalizedAutoSize, { container, overflowBoundary, overflowBoundaryPadding, isRtl }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n process.env.NODE_ENV !== 'production' &&\n targetDocument &&\n devtools(targetDocument, devtoolsCallback(optionsAfterEnhancement)),\n ].filter(Boolean) as Middleware[];\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n\n return {\n placement,\n middleware,\n strategy: strategy ?? positionFixed ? ('fixed' as const) : ('absolute' as const),\n\n disableUpdateOnResize,\n useTransform,\n };\n },\n [configFn, isRtl, targetDocument, positionFixed],\n );\n}\n"],"names":["devtools","hide","hideMiddleware","arrow","arrowMiddleware","useFluent_unstable","useFluent","React","shift","shiftMiddleware","flip","flipMiddleware","coverTarget","coverTargetMiddleware","maxSize","maxSizeMiddleware","resetMaxSize","resetMaxSizeMiddleware","offset","offsetMiddleware","intersecting","intersectingMiddleware","matchTargetSize","matchTargetSizeMiddleware","toFloatingUIPlacement","hasScrollParent","normalizeAutoSize","devtoolsCallback","usePositioningConfiguration","usePositioningConfigFn","configFn","options","align","arrowPadding","autoSize","disableUpdateOnResize","flipBoundary","overflowBoundary","pinned","position","unstable_disableTether","strategy","overflowBoundaryPadding","fallbackPositions","useTransform","shiftToCoverTarget","useCallback","container","usePositioningOptions","dir","targetDocument","isRtl","positionFixed","hasScrollableElement","optionsAfterEnhancement","normalizedAutoSize","middleware","disableTether","element","padding","process","env","NODE_ENV","filter","Boolean","placement"],"mappings":"AAAA;;;;;+BA2GgBgD;;;;;;;0BAzGS,wBAAwB;qBACgB,mBAAmB;qCAEpC,kCAAkC;iEAC3D,QAAQ;
|
|
1
|
+
{"version":3,"sources":["../src/usePositioningOptions.ts"],"sourcesContent":["'use client';\n\nimport { devtools } from '@floating-ui/devtools';\nimport { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nimport {\n shift as shiftMiddleware,\n flip as flipMiddleware,\n coverTarget as coverTargetMiddleware,\n maxSize as maxSizeMiddleware,\n resetMaxSize as resetMaxSizeMiddleware,\n offset as offsetMiddleware,\n intersecting as intersectingMiddleware,\n matchTargetSize as matchTargetSizeMiddleware,\n} from './middleware';\nimport type { PositioningConfigurationFn, PositioningConfigurationFnOptions, PositioningOptions } from './types';\nimport { toFloatingUIPlacement, hasScrollParent, normalizeAutoSize } from './utils';\nimport { devtoolsCallback } from './utils/devtools';\nimport { usePositioningConfiguration } from './PositioningConfigurationContext';\n\n/**\n * This is redundant and exists only to manage React dependencies properly & avoid leaking individual options to the\n * scope of `usePositioningOptions`.\n *\n * @internal\n */\nfunction usePositioningConfigFn(\n configFn: PositioningConfigurationFn,\n options: PositioningOptions,\n): (container: HTMLElement, arrow: HTMLElement | null) => PositioningConfigurationFnOptions {\n const {\n align,\n arrowPadding,\n autoSize,\n coverTarget,\n disableUpdateOnResize,\n flipBoundary,\n offset,\n overflowBoundary,\n pinned,\n position,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether,\n strategy,\n overflowBoundaryPadding,\n fallbackPositions,\n useTransform,\n matchTargetSize,\n shiftToCoverTarget,\n } = options;\n\n return React.useCallback(\n (container: HTMLElement, arrow: HTMLElement | null) => {\n return configFn({\n container,\n arrow,\n options: {\n autoSize,\n disableUpdateOnResize,\n matchTargetSize,\n offset,\n strategy,\n coverTarget,\n flipBoundary,\n overflowBoundary,\n useTransform,\n overflowBoundaryPadding,\n pinned,\n arrowPadding,\n align,\n fallbackPositions,\n shiftToCoverTarget,\n position,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether,\n },\n });\n },\n [\n autoSize,\n disableUpdateOnResize,\n matchTargetSize,\n offset,\n strategy,\n coverTarget,\n flipBoundary,\n overflowBoundary,\n useTransform,\n overflowBoundaryPadding,\n pinned,\n arrowPadding,\n align,\n fallbackPositions,\n shiftToCoverTarget,\n position,\n unstable_disableTether,\n configFn,\n ],\n );\n}\n\n/**\n * @internal\n */\nexport function usePositioningOptions(options: PositioningOptions): (\n container: HTMLElement,\n arrow: HTMLElement | null,\n) => {\n placement: Placement | undefined;\n middleware: Middleware[];\n strategy: Strategy;\n disableUpdateOnResize?: boolean;\n useTransform?: boolean;\n} {\n const { dir, targetDocument } = useFluent();\n const isRtl = dir === 'rtl';\n\n const configFn = usePositioningConfigFn(usePositioningConfiguration(), options);\n const {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n positionFixed,\n } = options;\n\n return React.useCallback(\n (container: HTMLElement, arrow: HTMLElement | null) => {\n const hasScrollableElement = hasScrollParent(container);\n\n const optionsAfterEnhancement = configFn(container, arrow);\n const {\n autoSize,\n disableUpdateOnResize,\n matchTargetSize,\n offset,\n coverTarget,\n flipBoundary,\n overflowBoundary,\n useTransform,\n overflowBoundaryPadding,\n pinned,\n position,\n arrowPadding,\n strategy,\n align,\n fallbackPositions,\n shiftToCoverTarget,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_disableTether,\n } = optionsAfterEnhancement;\n const normalizedAutoSize = normalizeAutoSize(autoSize);\n\n const middleware = [\n normalizedAutoSize && resetMaxSizeMiddleware(normalizedAutoSize),\n matchTargetSize && matchTargetSizeMiddleware(),\n offset && offsetMiddleware(offset),\n coverTarget && coverTargetMiddleware(),\n !pinned && flipMiddleware({ container, flipBoundary, hasScrollableElement, isRtl, fallbackPositions }),\n shiftMiddleware({\n container,\n hasScrollableElement,\n overflowBoundary,\n disableTether: unstable_disableTether,\n overflowBoundaryPadding,\n isRtl,\n shiftToCoverTarget,\n }),\n normalizedAutoSize &&\n maxSizeMiddleware(normalizedAutoSize, { container, overflowBoundary, overflowBoundaryPadding, isRtl }),\n intersectingMiddleware(),\n arrow && arrowMiddleware({ element: arrow, padding: arrowPadding }),\n hideMiddleware({ strategy: 'referenceHidden' }),\n hideMiddleware({ strategy: 'escaped' }),\n process.env.NODE_ENV !== 'production' &&\n targetDocument &&\n devtools(targetDocument, devtoolsCallback(optionsAfterEnhancement)),\n ].filter(Boolean) as Middleware[];\n\n const placement = toFloatingUIPlacement(align, position, isRtl);\n\n return {\n placement,\n middleware,\n strategy: strategy ?? positionFixed ? ('fixed' as const) : ('absolute' as const),\n\n disableUpdateOnResize,\n useTransform,\n };\n },\n [configFn, isRtl, targetDocument, positionFixed],\n );\n}\n"],"names":["devtools","hide","hideMiddleware","arrow","arrowMiddleware","useFluent_unstable","useFluent","React","shift","shiftMiddleware","flip","flipMiddleware","coverTarget","coverTargetMiddleware","maxSize","maxSizeMiddleware","resetMaxSize","resetMaxSizeMiddleware","offset","offsetMiddleware","intersecting","intersectingMiddleware","matchTargetSize","matchTargetSizeMiddleware","toFloatingUIPlacement","hasScrollParent","normalizeAutoSize","devtoolsCallback","usePositioningConfiguration","usePositioningConfigFn","configFn","options","align","arrowPadding","autoSize","disableUpdateOnResize","flipBoundary","overflowBoundary","pinned","position","unstable_disableTether","strategy","overflowBoundaryPadding","fallbackPositions","useTransform","shiftToCoverTarget","useCallback","container","usePositioningOptions","dir","targetDocument","isRtl","positionFixed","hasScrollableElement","optionsAfterEnhancement","normalizedAutoSize","middleware","disableTether","element","padding","process","env","NODE_ENV","filter","Boolean","placement"],"mappings":"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"}
|
|
@@ -20,7 +20,7 @@ _export(exports, {
|
|
|
20
20
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
21
21
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
22
22
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
23
|
-
const _constants = require("./constants");
|
|
23
|
+
const _constants = require("./constants.cjs");
|
|
24
24
|
function getPlacementSlideDirections(placement) {
|
|
25
25
|
const side = placement.split('-')[0];
|
|
26
26
|
// Default to sliding down from the top side
|
package/lib-commonjs/{usePositioningSlideDirection.js.map → usePositioningSlideDirection.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/usePositioningSlideDirection.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport type { PositioningProps } from './types';\nimport { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';\n\n/**\n * Returns the slide direction unit vectors for a given Floating UI placement.\n * Values are -1, 0, or 1, representing the direction the element slides in from.\n */\nexport function getPlacementSlideDirections(placement: string): { x: number; y: number } {\n const side = placement.split('-')[0];\n // Default to sliding down from the top side\n let x = 0;\n let y = 1;\n\n if (side === 'right') {\n x = -1;\n y = 0;\n } else if (side === 'bottom') {\n x = 0;\n y = -1;\n } else if (side === 'left') {\n x = 1;\n y = 0;\n }\n\n return { x, y };\n}\n\ntype UsePositioningSlideDirectionOptions = {\n /** The target document for CSS.registerProperty. */\n targetDocument: Document | undefined;\n /** The user's original onPositioningEnd callback, if any. */\n onPositioningEnd?: PositioningProps['onPositioningEnd'];\n};\n\n/**\n * A hook that manages CSS custom properties for slide direction based on positioning placement.\n *\n * It wraps the `onPositioningEnd` callback to set `--fui-positioning-slide-direction-x` and\n * `--fui-positioning-slide-direction-y` CSS custom properties on the positioned element,\n * and registers them via `CSS.registerProperty` to avoid properties propagation down to a DOM tree.\n *\n * @returns The wrapped `onPositioningEnd` handler to pass to the positioning config.\n */\nexport function usePositioningSlideDirection(\n options: UsePositioningSlideDirectionOptions,\n): NonNullable<PositioningProps['onPositioningEnd']> {\n const { targetDocument, onPositioningEnd } = options;\n\n const handlePositionEnd: NonNullable<PositioningProps['onPositioningEnd']> = useEventCallback(e => {\n onPositioningEnd?.(e);\n\n const element = e.target;\n const placement = e.detail.placement;\n\n if (!isHTMLElement(element)) {\n return;\n }\n\n const { x, y } = getPlacementSlideDirections(placement);\n\n element.style.setProperty(POSITIONING_SLIDE_DIRECTION_VAR_X, `${x}px`);\n element.style.setProperty(POSITIONING_SLIDE_DIRECTION_VAR_Y, `${y}px`);\n });\n\n // Register the CSS custom properties so they can be interpolated during animations.\n // CSS.registerProperty is idempotent — the try/catch handles the case where\n // properties are already registered.\n React.useEffect(() => {\n const registerProperty =\n targetDocument?.defaultView?.CSS?.registerProperty ??\n (() => {\n // No-op if registerProperty is not supported\n });\n\n try {\n registerProperty({\n name: POSITIONING_SLIDE_DIRECTION_VAR_X,\n syntax: '<length>',\n inherits: false,\n initialValue: '0px',\n });\n registerProperty({\n name: POSITIONING_SLIDE_DIRECTION_VAR_Y,\n syntax: '<length>',\n inherits: false,\n initialValue: '0px',\n });\n } catch (e) {\n // Ignore errors from registerProperty, which can occur if the properties are already registered\n }\n }, [targetDocument]);\n\n return handlePositionEnd;\n}\n"],"names":["React","useEventCallback","isHTMLElement","POSITIONING_SLIDE_DIRECTION_VAR_X","POSITIONING_SLIDE_DIRECTION_VAR_Y","getPlacementSlideDirections","placement","side","split","x","y","usePositioningSlideDirection","options","targetDocument","onPositioningEnd","handlePositionEnd","e","element","target","detail","style","setProperty","useEffect","registerProperty","defaultView","CSS","name","syntax","inherits","initialValue"],"mappings":"AAAA;;;;;;;;;;;;IAWgBK,2BAAAA;;;IAoCAM,4BAAAA;;;;;iEA7CO,QAAQ;gCACiB,4BAA4B;2BAES,
|
|
1
|
+
{"version":3,"sources":["../src/usePositioningSlideDirection.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback, isHTMLElement } from '@fluentui/react-utilities';\nimport type { PositioningProps } from './types';\nimport { POSITIONING_SLIDE_DIRECTION_VAR_X, POSITIONING_SLIDE_DIRECTION_VAR_Y } from './constants';\n\n/**\n * Returns the slide direction unit vectors for a given Floating UI placement.\n * Values are -1, 0, or 1, representing the direction the element slides in from.\n */\nexport function getPlacementSlideDirections(placement: string): { x: number; y: number } {\n const side = placement.split('-')[0];\n // Default to sliding down from the top side\n let x = 0;\n let y = 1;\n\n if (side === 'right') {\n x = -1;\n y = 0;\n } else if (side === 'bottom') {\n x = 0;\n y = -1;\n } else if (side === 'left') {\n x = 1;\n y = 0;\n }\n\n return { x, y };\n}\n\ntype UsePositioningSlideDirectionOptions = {\n /** The target document for CSS.registerProperty. */\n targetDocument: Document | undefined;\n /** The user's original onPositioningEnd callback, if any. */\n onPositioningEnd?: PositioningProps['onPositioningEnd'];\n};\n\n/**\n * A hook that manages CSS custom properties for slide direction based on positioning placement.\n *\n * It wraps the `onPositioningEnd` callback to set `--fui-positioning-slide-direction-x` and\n * `--fui-positioning-slide-direction-y` CSS custom properties on the positioned element,\n * and registers them via `CSS.registerProperty` to avoid properties propagation down to a DOM tree.\n *\n * @returns The wrapped `onPositioningEnd` handler to pass to the positioning config.\n */\nexport function usePositioningSlideDirection(\n options: UsePositioningSlideDirectionOptions,\n): NonNullable<PositioningProps['onPositioningEnd']> {\n const { targetDocument, onPositioningEnd } = options;\n\n const handlePositionEnd: NonNullable<PositioningProps['onPositioningEnd']> = useEventCallback(e => {\n onPositioningEnd?.(e);\n\n const element = e.target;\n const placement = e.detail.placement;\n\n if (!isHTMLElement(element)) {\n return;\n }\n\n const { x, y } = getPlacementSlideDirections(placement);\n\n element.style.setProperty(POSITIONING_SLIDE_DIRECTION_VAR_X, `${x}px`);\n element.style.setProperty(POSITIONING_SLIDE_DIRECTION_VAR_Y, `${y}px`);\n });\n\n // Register the CSS custom properties so they can be interpolated during animations.\n // CSS.registerProperty is idempotent — the try/catch handles the case where\n // properties are already registered.\n React.useEffect(() => {\n const registerProperty =\n targetDocument?.defaultView?.CSS?.registerProperty ??\n (() => {\n // No-op if registerProperty is not supported\n });\n\n try {\n registerProperty({\n name: POSITIONING_SLIDE_DIRECTION_VAR_X,\n syntax: '<length>',\n inherits: false,\n initialValue: '0px',\n });\n registerProperty({\n name: POSITIONING_SLIDE_DIRECTION_VAR_Y,\n syntax: '<length>',\n inherits: false,\n initialValue: '0px',\n });\n } catch (e) {\n // Ignore errors from registerProperty, which can occur if the properties are already registered\n }\n }, [targetDocument]);\n\n return handlePositionEnd;\n}\n"],"names":["React","useEventCallback","isHTMLElement","POSITIONING_SLIDE_DIRECTION_VAR_X","POSITIONING_SLIDE_DIRECTION_VAR_Y","getPlacementSlideDirections","placement","side","split","x","y","usePositioningSlideDirection","options","targetDocument","onPositioningEnd","handlePositionEnd","e","element","target","detail","style","setProperty","useEffect","registerProperty","defaultView","CSS","name","syntax","inherits","initialValue"],"mappings":"AAAA;;;;;;;;;;;;IAWgBK,2BAAAA;;;IAoCAM,4BAAAA;;;;;iEA7CO,QAAQ;gCACiB,4BAA4B;2BAES,iBAAc;AAM5F,qCAAqCL,SAAiB;IAC3D,MAAMC,OAAOD,UAAUE,KAAK,CAAC,IAAI,CAAC,EAAE;IACpC,4CAA4C;IAC5C,IAAIC,IAAI;IACR,IAAIC,IAAI;IAER,IAAIH,SAAS,SAAS;QACpBE,IAAI,CAAC;QACLC,IAAI;IACN,OAAO,IAAIH,SAAS,UAAU;QAC5BE,IAAI;QACJC,IAAI,CAAC;IACP,OAAO,IAAIH,SAAS,QAAQ;QAC1BE,IAAI;QACJC,IAAI;IACN;IAEA,OAAO;QAAED;QAAGC;IAAE;AAChB;AAkBO,sCACLE,OAA4C;IAE5C,MAAM,EAAEC,cAAc,EAAEC,gBAAgB,EAAE,GAAGF;IAE7C,MAAMG,wBAAuEd,gCAAAA,EAAiBe,CAAAA;QAC5FF,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAmBE;QAEnB,MAAMC,UAAUD,EAAEE,MAAM;QACxB,MAAMZ,YAAYU,EAAEG,MAAM,CAACb,SAAS;QAEpC,IAAI,CAACJ,iCAAAA,EAAce,UAAU;YAC3B;QACF;QAEA,MAAM,EAAER,CAAC,EAAEC,CAAC,EAAE,GAAGL,4BAA4BC;QAE7CW,QAAQG,KAAK,CAACC,WAAW,CAAClB,4CAAAA,EAAmC,GAAGM,EAAE,EAAE,CAAC;QACrEQ,QAAQG,KAAK,CAACC,WAAW,CAACjB,4CAAAA,EAAmC,GAAGM,EAAE,EAAE,CAAC;IACvE;IAEA,oFAAoF;IACpF,4EAA4E;IAC5E,qCAAqC;IACrCV,OAAMsB,SAAS,CAAC;YAEZT,iCAAAA;YAAAA;QADF,MAAMU,mBACJV,oDAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,8BAAAA,eAAgBW,WAAAA,AAAW,MAAA,QAA3BX,gCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,kCAAAA,4BAA6BY,GAAAA,AAAG,MAAA,QAAhCZ,oCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gCAAkCU,gBAAAA,AAAgB,MAAA,QAAlDV,qDAAAA,KAAAA,IAAAA,mDACC;QACC,6CAA6C;QAC/C;QAEF,IAAI;YACFU,iBAAiB;gBACfG,MAAMvB,4CAAAA;gBACNwB,QAAQ;gBACRC,UAAU;gBACVC,cAAc;YAChB;YACAN,iBAAiB;gBACfG,MAAMtB,4CAAAA;gBACNuB,QAAQ;gBACRC,UAAU;gBACVC,cAAc;YAChB;QACF,EAAE,OAAOb,GAAG;QACV,gGAAgG;QAClG;IACF,GAAG;QAACH;KAAe;IAEnB,OAAOE;AACT"}
|
|
@@ -9,8 +9,8 @@ Object.defineProperty(exports, "devtoolsCallback", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
12
|
-
const _listScrollParents = require("./listScrollParents");
|
|
13
|
-
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement");
|
|
12
|
+
const _listScrollParents = require("./listScrollParents.cjs");
|
|
13
|
+
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement.cjs");
|
|
14
14
|
const devtoolsCallback = (options)=>(middlewareState)=>{
|
|
15
15
|
const { elements: { floating, reference } } = middlewareState;
|
|
16
16
|
const scrollParentsSet = new Set();
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,yBAAsB;yCAChB,+BAA4B;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"}
|
|
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "fromFloatingUIPlacement", {
|
|
|
8
8
|
return fromFloatingUIPlacement;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
const _parseFloatingUIPlacement = require("./parseFloatingUIPlacement");
|
|
11
|
+
const _parseFloatingUIPlacement = require("./parseFloatingUIPlacement.cjs");
|
|
12
12
|
const getPositionMap = ()=>({
|
|
13
13
|
top: 'above',
|
|
14
14
|
bottom: 'below',
|
package/lib-commonjs/utils/{fromFloatingUIPlacement.js.map → fromFloatingUIPlacement.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,gCAA6B;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"}
|
|
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "getBoundary", {
|
|
|
8
8
|
return getBoundary;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
const _getScrollParent = require("./getScrollParent");
|
|
11
|
+
const _getScrollParent = require("./getScrollParent.cjs");
|
|
12
12
|
function getBoundary(element, boundary) {
|
|
13
13
|
if (boundary === 'window') {
|
|
14
14
|
return element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,uBAAoB;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"}
|
|
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "getFloatingUIOffset", {
|
|
|
8
8
|
return getFloatingUIOffset;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement");
|
|
11
|
+
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement.cjs");
|
|
12
12
|
function getFloatingUIOffset(rawOffset) {
|
|
13
13
|
if (!rawOffset) {
|
|
14
14
|
return rawOffset;
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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,+BAA4B;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"}
|
|
@@ -11,7 +11,7 @@ Object.defineProperty(exports, "hasAutofocusFilter", {
|
|
|
11
11
|
return hasAutofocusFilter;
|
|
12
12
|
}
|
|
13
13
|
});
|
|
14
|
-
const _getReactFiberFromNode = require("./getReactFiberFromNode");
|
|
14
|
+
const _getReactFiberFromNode = require("./getReactFiberFromNode.cjs");
|
|
15
15
|
/**
|
|
16
16
|
* Detects if a passed HTML node has "autoFocus" prop on a React's fiber. Is needed as React handles autofocus behavior
|
|
17
17
|
* in React DOM and will not pass "autoFocus" to an actual HTML.
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,6BAA0B;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"}
|
|
@@ -64,19 +64,19 @@ _export(exports, {
|
|
|
64
64
|
return _writeContainerupdates.writeContainerUpdates;
|
|
65
65
|
}
|
|
66
66
|
});
|
|
67
|
-
const _parseFloatingUIPlacement = require("./parseFloatingUIPlacement");
|
|
68
|
-
const _getBoundary = require("./getBoundary");
|
|
69
|
-
const _getReactFiberFromNode = require("./getReactFiberFromNode");
|
|
70
|
-
const _getScrollParent = require("./getScrollParent");
|
|
71
|
-
const _mergeArrowOffset = require("./mergeArrowOffset");
|
|
72
|
-
const _toFloatingUIPadding = require("./toFloatingUIPadding");
|
|
73
|
-
const _toFloatingUIPlacement = require("./toFloatingUIPlacement");
|
|
74
|
-
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement");
|
|
75
|
-
const _resolvePositioningShorthand = require("./resolvePositioningShorthand");
|
|
76
|
-
const _useCallbackRef = require("./useCallbackRef");
|
|
77
|
-
const _debounce = require("./debounce");
|
|
78
|
-
const _toggleScrollListener = require("./toggleScrollListener");
|
|
79
|
-
const _hasAutoFocusFilter = require("./hasAutoFocusFilter");
|
|
80
|
-
const _writeArrowUpdates = require("./writeArrowUpdates");
|
|
81
|
-
const _writeContainerupdates = require("./writeContainerupdates");
|
|
82
|
-
const _normalizeAutoSize = require("./normalizeAutoSize");
|
|
67
|
+
const _parseFloatingUIPlacement = require("./parseFloatingUIPlacement.cjs");
|
|
68
|
+
const _getBoundary = require("./getBoundary.cjs");
|
|
69
|
+
const _getReactFiberFromNode = require("./getReactFiberFromNode.cjs");
|
|
70
|
+
const _getScrollParent = require("./getScrollParent.cjs");
|
|
71
|
+
const _mergeArrowOffset = require("./mergeArrowOffset.cjs");
|
|
72
|
+
const _toFloatingUIPadding = require("./toFloatingUIPadding.cjs");
|
|
73
|
+
const _toFloatingUIPlacement = require("./toFloatingUIPlacement.cjs");
|
|
74
|
+
const _fromFloatingUIPlacement = require("./fromFloatingUIPlacement.cjs");
|
|
75
|
+
const _resolvePositioningShorthand = require("./resolvePositioningShorthand.cjs");
|
|
76
|
+
const _useCallbackRef = require("./useCallbackRef.cjs");
|
|
77
|
+
const _debounce = require("./debounce.cjs");
|
|
78
|
+
const _toggleScrollListener = require("./toggleScrollListener.cjs");
|
|
79
|
+
const _hasAutoFocusFilter = require("./hasAutoFocusFilter.cjs");
|
|
80
|
+
const _writeArrowUpdates = require("./writeArrowUpdates.cjs");
|
|
81
|
+
const _writeContainerupdates = require("./writeContainerupdates.cjs");
|
|
82
|
+
const _normalizeAutoSize = require("./normalizeAutoSize.cjs");
|