@trackunit/react-components 0.1.157 → 0.1.158
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/index.cjs.js +1174 -1105
- package/index.esm.js +1174 -1105
- package/package.json +2 -2
- package/src/components/Popover/Popover.d.ts +23 -18
- package/src/components/Popover/usePopover.d.ts +25 -20
package/index.cjs.js
CHANGED
|
@@ -1888,7 +1888,7 @@ function _typeof$2(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "func
|
|
|
1888
1888
|
* //=> Sun Jul 02 1995 00:00:00
|
|
1889
1889
|
*/
|
|
1890
1890
|
|
|
1891
|
-
function max$
|
|
1891
|
+
function max$1(dirtyDatesArray) {
|
|
1892
1892
|
requiredArgs(1, arguments);
|
|
1893
1893
|
var datesArray; // `dirtyDatesArray` is Array, Set or Map, or object with custom `forEach` method
|
|
1894
1894
|
|
|
@@ -1936,7 +1936,7 @@ function _typeof$1(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "func
|
|
|
1936
1936
|
* //=> Wed Feb 11 1987 00:00:00
|
|
1937
1937
|
*/
|
|
1938
1938
|
|
|
1939
|
-
function min$
|
|
1939
|
+
function min$1(dirtyDatesArray) {
|
|
1940
1940
|
requiredArgs(1, arguments);
|
|
1941
1941
|
var datesArray; // `dirtyDatesArray` is Array, Set or Map, or object with custom `forEach` method
|
|
1942
1942
|
|
|
@@ -13948,10 +13948,10 @@ function getNextFocus(focusedDay, options) {
|
|
|
13948
13948
|
};
|
|
13949
13949
|
var newFocusedDay = moveFns[moveBy](focusedDay, direction === 'after' ? 1 : -1);
|
|
13950
13950
|
if (direction === 'before' && fromDate) {
|
|
13951
|
-
newFocusedDay = max$
|
|
13951
|
+
newFocusedDay = max$1([fromDate, newFocusedDay]);
|
|
13952
13952
|
}
|
|
13953
13953
|
else if (direction === 'after' && toDate) {
|
|
13954
|
-
newFocusedDay = min$
|
|
13954
|
+
newFocusedDay = min$1([toDate, newFocusedDay]);
|
|
13955
13955
|
}
|
|
13956
13956
|
var isFocusable = true;
|
|
13957
13957
|
if (modifiers) {
|
|
@@ -14813,20 +14813,372 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
|
|
|
14813
14813
|
return (jsxRuntime.jsx(DayPicker$1, { onDayClick: onDaySelect, selected: selectedDays, locale: locale, disabled: disabledDays, className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, max: max, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }) }));
|
|
14814
14814
|
};
|
|
14815
14815
|
|
|
14816
|
+
const min = Math.min;
|
|
14817
|
+
const max = Math.max;
|
|
14818
|
+
const round = Math.round;
|
|
14819
|
+
const floor = Math.floor;
|
|
14820
|
+
const createCoords = v => ({
|
|
14821
|
+
x: v,
|
|
14822
|
+
y: v
|
|
14823
|
+
});
|
|
14824
|
+
const oppositeSideMap = {
|
|
14825
|
+
left: 'right',
|
|
14826
|
+
right: 'left',
|
|
14827
|
+
bottom: 'top',
|
|
14828
|
+
top: 'bottom'
|
|
14829
|
+
};
|
|
14830
|
+
const oppositeAlignmentMap = {
|
|
14831
|
+
start: 'end',
|
|
14832
|
+
end: 'start'
|
|
14833
|
+
};
|
|
14834
|
+
function clamp(start, value, end) {
|
|
14835
|
+
return max(start, min(value, end));
|
|
14836
|
+
}
|
|
14837
|
+
function evaluate(value, param) {
|
|
14838
|
+
return typeof value === 'function' ? value(param) : value;
|
|
14839
|
+
}
|
|
14840
|
+
function getSide(placement) {
|
|
14841
|
+
return placement.split('-')[0];
|
|
14842
|
+
}
|
|
14816
14843
|
function getAlignment(placement) {
|
|
14817
14844
|
return placement.split('-')[1];
|
|
14818
14845
|
}
|
|
14819
|
-
|
|
14820
|
-
|
|
14846
|
+
function getOppositeAxis(axis) {
|
|
14847
|
+
return axis === 'x' ? 'y' : 'x';
|
|
14848
|
+
}
|
|
14849
|
+
function getAxisLength(axis) {
|
|
14821
14850
|
return axis === 'y' ? 'height' : 'width';
|
|
14822
14851
|
}
|
|
14852
|
+
function getSideAxis(placement) {
|
|
14853
|
+
return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
|
|
14854
|
+
}
|
|
14855
|
+
function getAlignmentAxis(placement) {
|
|
14856
|
+
return getOppositeAxis(getSideAxis(placement));
|
|
14857
|
+
}
|
|
14858
|
+
function getAlignmentSides(placement, rects, rtl) {
|
|
14859
|
+
if (rtl === void 0) {
|
|
14860
|
+
rtl = false;
|
|
14861
|
+
}
|
|
14862
|
+
const alignment = getAlignment(placement);
|
|
14863
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
14864
|
+
const length = getAxisLength(alignmentAxis);
|
|
14865
|
+
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
14866
|
+
if (rects.reference[length] > rects.floating[length]) {
|
|
14867
|
+
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
14868
|
+
}
|
|
14869
|
+
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
14870
|
+
}
|
|
14871
|
+
function getExpandedPlacements(placement) {
|
|
14872
|
+
const oppositePlacement = getOppositePlacement(placement);
|
|
14873
|
+
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
14874
|
+
}
|
|
14875
|
+
function getOppositeAlignmentPlacement(placement) {
|
|
14876
|
+
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
|
14877
|
+
}
|
|
14878
|
+
function getSideList(side, isStart, rtl) {
|
|
14879
|
+
const lr = ['left', 'right'];
|
|
14880
|
+
const rl = ['right', 'left'];
|
|
14881
|
+
const tb = ['top', 'bottom'];
|
|
14882
|
+
const bt = ['bottom', 'top'];
|
|
14883
|
+
switch (side) {
|
|
14884
|
+
case 'top':
|
|
14885
|
+
case 'bottom':
|
|
14886
|
+
if (rtl) return isStart ? rl : lr;
|
|
14887
|
+
return isStart ? lr : rl;
|
|
14888
|
+
case 'left':
|
|
14889
|
+
case 'right':
|
|
14890
|
+
return isStart ? tb : bt;
|
|
14891
|
+
default:
|
|
14892
|
+
return [];
|
|
14893
|
+
}
|
|
14894
|
+
}
|
|
14895
|
+
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
14896
|
+
const alignment = getAlignment(placement);
|
|
14897
|
+
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
14898
|
+
if (alignment) {
|
|
14899
|
+
list = list.map(side => side + "-" + alignment);
|
|
14900
|
+
if (flipAlignment) {
|
|
14901
|
+
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
14902
|
+
}
|
|
14903
|
+
}
|
|
14904
|
+
return list;
|
|
14905
|
+
}
|
|
14906
|
+
function getOppositePlacement(placement) {
|
|
14907
|
+
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
|
14908
|
+
}
|
|
14909
|
+
function expandPaddingObject(padding) {
|
|
14910
|
+
return {
|
|
14911
|
+
top: 0,
|
|
14912
|
+
right: 0,
|
|
14913
|
+
bottom: 0,
|
|
14914
|
+
left: 0,
|
|
14915
|
+
...padding
|
|
14916
|
+
};
|
|
14917
|
+
}
|
|
14918
|
+
function getPaddingObject(padding) {
|
|
14919
|
+
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
14920
|
+
top: padding,
|
|
14921
|
+
right: padding,
|
|
14922
|
+
bottom: padding,
|
|
14923
|
+
left: padding
|
|
14924
|
+
};
|
|
14925
|
+
}
|
|
14926
|
+
function rectToClientRect(rect) {
|
|
14927
|
+
return {
|
|
14928
|
+
...rect,
|
|
14929
|
+
top: rect.y,
|
|
14930
|
+
left: rect.x,
|
|
14931
|
+
right: rect.x + rect.width,
|
|
14932
|
+
bottom: rect.y + rect.height
|
|
14933
|
+
};
|
|
14934
|
+
}
|
|
14823
14935
|
|
|
14824
|
-
function
|
|
14825
|
-
|
|
14936
|
+
function getNodeName(node) {
|
|
14937
|
+
if (isNode(node)) {
|
|
14938
|
+
return (node.nodeName || '').toLowerCase();
|
|
14939
|
+
}
|
|
14940
|
+
// Mocked nodes in testing environments may not be instances of Node. By
|
|
14941
|
+
// returning `#document` an infinite loop won't occur.
|
|
14942
|
+
// https://github.com/floating-ui/floating-ui/issues/2317
|
|
14943
|
+
return '#document';
|
|
14944
|
+
}
|
|
14945
|
+
function getWindow(node) {
|
|
14946
|
+
var _node$ownerDocument;
|
|
14947
|
+
return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
14948
|
+
}
|
|
14949
|
+
function getDocumentElement(node) {
|
|
14950
|
+
var _ref;
|
|
14951
|
+
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
14952
|
+
}
|
|
14953
|
+
function isNode(value) {
|
|
14954
|
+
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
14955
|
+
}
|
|
14956
|
+
function isElement(value) {
|
|
14957
|
+
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
14958
|
+
}
|
|
14959
|
+
function isHTMLElement(value) {
|
|
14960
|
+
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
14961
|
+
}
|
|
14962
|
+
function isShadowRoot(value) {
|
|
14963
|
+
// Browsers without `ShadowRoot` support.
|
|
14964
|
+
if (typeof ShadowRoot === 'undefined') {
|
|
14965
|
+
return false;
|
|
14966
|
+
}
|
|
14967
|
+
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
14968
|
+
}
|
|
14969
|
+
function isOverflowElement(element) {
|
|
14970
|
+
const {
|
|
14971
|
+
overflow,
|
|
14972
|
+
overflowX,
|
|
14973
|
+
overflowY,
|
|
14974
|
+
display
|
|
14975
|
+
} = getComputedStyle$1(element);
|
|
14976
|
+
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
|
|
14977
|
+
}
|
|
14978
|
+
function isTableElement(element) {
|
|
14979
|
+
return ['table', 'td', 'th'].includes(getNodeName(element));
|
|
14980
|
+
}
|
|
14981
|
+
function isContainingBlock(element) {
|
|
14982
|
+
const webkit = isWebKit();
|
|
14983
|
+
const css = getComputedStyle$1(element);
|
|
14984
|
+
|
|
14985
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
14986
|
+
return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
|
|
14987
|
+
}
|
|
14988
|
+
function getContainingBlock(element) {
|
|
14989
|
+
let currentNode = getParentNode(element);
|
|
14990
|
+
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
14991
|
+
if (isContainingBlock(currentNode)) {
|
|
14992
|
+
return currentNode;
|
|
14993
|
+
} else {
|
|
14994
|
+
currentNode = getParentNode(currentNode);
|
|
14995
|
+
}
|
|
14996
|
+
}
|
|
14997
|
+
return null;
|
|
14998
|
+
}
|
|
14999
|
+
function isWebKit() {
|
|
15000
|
+
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
|
15001
|
+
return CSS.supports('-webkit-backdrop-filter', 'none');
|
|
15002
|
+
}
|
|
15003
|
+
function isLastTraversableNode(node) {
|
|
15004
|
+
return ['html', 'body', '#document'].includes(getNodeName(node));
|
|
15005
|
+
}
|
|
15006
|
+
function getComputedStyle$1(element) {
|
|
15007
|
+
return getWindow(element).getComputedStyle(element);
|
|
15008
|
+
}
|
|
15009
|
+
function getNodeScroll(element) {
|
|
15010
|
+
if (isElement(element)) {
|
|
15011
|
+
return {
|
|
15012
|
+
scrollLeft: element.scrollLeft,
|
|
15013
|
+
scrollTop: element.scrollTop
|
|
15014
|
+
};
|
|
15015
|
+
}
|
|
15016
|
+
return {
|
|
15017
|
+
scrollLeft: element.pageXOffset,
|
|
15018
|
+
scrollTop: element.pageYOffset
|
|
15019
|
+
};
|
|
15020
|
+
}
|
|
15021
|
+
function getParentNode(node) {
|
|
15022
|
+
if (getNodeName(node) === 'html') {
|
|
15023
|
+
return node;
|
|
15024
|
+
}
|
|
15025
|
+
const result =
|
|
15026
|
+
// Step into the shadow DOM of the parent of a slotted node.
|
|
15027
|
+
node.assignedSlot ||
|
|
15028
|
+
// DOM Element detected.
|
|
15029
|
+
node.parentNode ||
|
|
15030
|
+
// ShadowRoot detected.
|
|
15031
|
+
isShadowRoot(node) && node.host ||
|
|
15032
|
+
// Fallback.
|
|
15033
|
+
getDocumentElement(node);
|
|
15034
|
+
return isShadowRoot(result) ? result.host : result;
|
|
15035
|
+
}
|
|
15036
|
+
function getNearestOverflowAncestor(node) {
|
|
15037
|
+
const parentNode = getParentNode(node);
|
|
15038
|
+
if (isLastTraversableNode(parentNode)) {
|
|
15039
|
+
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
15040
|
+
}
|
|
15041
|
+
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
15042
|
+
return parentNode;
|
|
15043
|
+
}
|
|
15044
|
+
return getNearestOverflowAncestor(parentNode);
|
|
15045
|
+
}
|
|
15046
|
+
function getOverflowAncestors(node, list) {
|
|
15047
|
+
var _node$ownerDocument2;
|
|
15048
|
+
if (list === void 0) {
|
|
15049
|
+
list = [];
|
|
15050
|
+
}
|
|
15051
|
+
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
15052
|
+
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
15053
|
+
const win = getWindow(scrollableAncestor);
|
|
15054
|
+
if (isBody) {
|
|
15055
|
+
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
|
|
15056
|
+
}
|
|
15057
|
+
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
|
|
14826
15058
|
}
|
|
14827
15059
|
|
|
14828
|
-
function
|
|
14829
|
-
|
|
15060
|
+
function activeElement(doc) {
|
|
15061
|
+
let activeElement = doc.activeElement;
|
|
15062
|
+
while (((_activeElement = activeElement) == null ? void 0 : (_activeElement$shadow = _activeElement.shadowRoot) == null ? void 0 : _activeElement$shadow.activeElement) != null) {
|
|
15063
|
+
var _activeElement, _activeElement$shadow;
|
|
15064
|
+
activeElement = activeElement.shadowRoot.activeElement;
|
|
15065
|
+
}
|
|
15066
|
+
return activeElement;
|
|
15067
|
+
}
|
|
15068
|
+
function contains(parent, child) {
|
|
15069
|
+
if (!parent || !child) {
|
|
15070
|
+
return false;
|
|
15071
|
+
}
|
|
15072
|
+
const rootNode = child.getRootNode && child.getRootNode();
|
|
15073
|
+
|
|
15074
|
+
// First, attempt with faster native method
|
|
15075
|
+
if (parent.contains(child)) {
|
|
15076
|
+
return true;
|
|
15077
|
+
}
|
|
15078
|
+
|
|
15079
|
+
// then fallback to custom implementation with Shadow DOM support
|
|
15080
|
+
if (rootNode && isShadowRoot(rootNode)) {
|
|
15081
|
+
let next = child;
|
|
15082
|
+
while (next) {
|
|
15083
|
+
if (parent === next) {
|
|
15084
|
+
return true;
|
|
15085
|
+
}
|
|
15086
|
+
// @ts-ignore
|
|
15087
|
+
next = next.parentNode || next.host;
|
|
15088
|
+
}
|
|
15089
|
+
}
|
|
15090
|
+
|
|
15091
|
+
// Give up, the result is false
|
|
15092
|
+
return false;
|
|
15093
|
+
}
|
|
15094
|
+
// Avoid Chrome DevTools blue warning.
|
|
15095
|
+
function getPlatform() {
|
|
15096
|
+
const uaData = navigator.userAgentData;
|
|
15097
|
+
if (uaData != null && uaData.platform) {
|
|
15098
|
+
return uaData.platform;
|
|
15099
|
+
}
|
|
15100
|
+
return navigator.platform;
|
|
15101
|
+
}
|
|
15102
|
+
function getUserAgent() {
|
|
15103
|
+
const uaData = navigator.userAgentData;
|
|
15104
|
+
if (uaData && Array.isArray(uaData.brands)) {
|
|
15105
|
+
return uaData.brands.map(_ref => {
|
|
15106
|
+
let {
|
|
15107
|
+
brand,
|
|
15108
|
+
version
|
|
15109
|
+
} = _ref;
|
|
15110
|
+
return brand + "/" + version;
|
|
15111
|
+
}).join(' ');
|
|
15112
|
+
}
|
|
15113
|
+
return navigator.userAgent;
|
|
15114
|
+
}
|
|
15115
|
+
|
|
15116
|
+
// License: https://github.com/adobe/react-spectrum/blob/b35d5c02fe900badccd0cf1a8f23bb593419f238/packages/@react-aria/utils/src/isVirtualEvent.ts
|
|
15117
|
+
function isVirtualClick(event) {
|
|
15118
|
+
if (event.mozInputSource === 0 && event.isTrusted) {
|
|
15119
|
+
return true;
|
|
15120
|
+
}
|
|
15121
|
+
const androidRe = /Android/i;
|
|
15122
|
+
if ((androidRe.test(getPlatform()) || androidRe.test(getUserAgent())) && event.pointerType) {
|
|
15123
|
+
return event.type === 'click' && event.buttons === 1;
|
|
15124
|
+
}
|
|
15125
|
+
return event.detail === 0 && !event.pointerType;
|
|
15126
|
+
}
|
|
15127
|
+
function isVirtualPointerEvent(event) {
|
|
15128
|
+
return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType !== 'mouse' ||
|
|
15129
|
+
// iOS VoiceOver returns 0.333• for width/height.
|
|
15130
|
+
event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0;
|
|
15131
|
+
}
|
|
15132
|
+
function isSafari() {
|
|
15133
|
+
// Chrome DevTools does not complain about navigator.vendor
|
|
15134
|
+
return /apple/i.test(navigator.vendor);
|
|
15135
|
+
}
|
|
15136
|
+
function isMouseLikePointerType(pointerType, strict) {
|
|
15137
|
+
// On some Linux machines with Chromium, mouse inputs return a `pointerType`
|
|
15138
|
+
// of "pen": https://github.com/floating-ui/floating-ui/issues/2015
|
|
15139
|
+
const values = ['mouse', 'pen'];
|
|
15140
|
+
if (!strict) {
|
|
15141
|
+
values.push('', undefined);
|
|
15142
|
+
}
|
|
15143
|
+
return values.includes(pointerType);
|
|
15144
|
+
}
|
|
15145
|
+
function isReactEvent(event) {
|
|
15146
|
+
return 'nativeEvent' in event;
|
|
15147
|
+
}
|
|
15148
|
+
function isRootElement(element) {
|
|
15149
|
+
return element.matches('html,body');
|
|
15150
|
+
}
|
|
15151
|
+
function getDocument(node) {
|
|
15152
|
+
return (node == null ? void 0 : node.ownerDocument) || document;
|
|
15153
|
+
}
|
|
15154
|
+
function isEventTargetWithin(event, node) {
|
|
15155
|
+
if (node == null) {
|
|
15156
|
+
return false;
|
|
15157
|
+
}
|
|
15158
|
+
if ('composedPath' in event) {
|
|
15159
|
+
return event.composedPath().includes(node);
|
|
15160
|
+
}
|
|
15161
|
+
|
|
15162
|
+
// TS thinks `event` is of type never as it assumes all browsers support composedPath, but browsers without shadow dom don't
|
|
15163
|
+
const e = event;
|
|
15164
|
+
return e.target != null && node.contains(e.target);
|
|
15165
|
+
}
|
|
15166
|
+
function getTarget(event) {
|
|
15167
|
+
if ('composedPath' in event) {
|
|
15168
|
+
return event.composedPath()[0];
|
|
15169
|
+
}
|
|
15170
|
+
|
|
15171
|
+
// TS thinks `event` is of type never as it assumes all browsers support
|
|
15172
|
+
// `composedPath()`, but browsers without shadow DOM don't.
|
|
15173
|
+
return event.target;
|
|
15174
|
+
}
|
|
15175
|
+
const TYPEABLE_SELECTOR = "input:not([type='hidden']):not([disabled])," + "[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";
|
|
15176
|
+
function isTypeableElement(element) {
|
|
15177
|
+
return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
|
|
15178
|
+
}
|
|
15179
|
+
function stopEvent(event) {
|
|
15180
|
+
event.preventDefault();
|
|
15181
|
+
event.stopPropagation();
|
|
14830
15182
|
}
|
|
14831
15183
|
|
|
14832
15184
|
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
@@ -14834,13 +15186,14 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
|
14834
15186
|
reference,
|
|
14835
15187
|
floating
|
|
14836
15188
|
} = _ref;
|
|
15189
|
+
const sideAxis = getSideAxis(placement);
|
|
15190
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
15191
|
+
const alignLength = getAxisLength(alignmentAxis);
|
|
15192
|
+
const side = getSide(placement);
|
|
15193
|
+
const isVertical = sideAxis === 'y';
|
|
14837
15194
|
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
14838
15195
|
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
14839
|
-
const
|
|
14840
|
-
const length = getLengthFromAxis(mainAxis);
|
|
14841
|
-
const commonAlign = reference[length] / 2 - floating[length] / 2;
|
|
14842
|
-
const side = getSide(placement);
|
|
14843
|
-
const isVertical = mainAxis === 'x';
|
|
15196
|
+
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
14844
15197
|
let coords;
|
|
14845
15198
|
switch (side) {
|
|
14846
15199
|
case 'top':
|
|
@@ -14875,10 +15228,10 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
|
14875
15228
|
}
|
|
14876
15229
|
switch (getAlignment(placement)) {
|
|
14877
15230
|
case 'start':
|
|
14878
|
-
coords[
|
|
15231
|
+
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
14879
15232
|
break;
|
|
14880
15233
|
case 'end':
|
|
14881
|
-
coords[
|
|
15234
|
+
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
14882
15235
|
break;
|
|
14883
15236
|
}
|
|
14884
15237
|
return coords;
|
|
@@ -14900,22 +15253,6 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
14900
15253
|
} = config;
|
|
14901
15254
|
const validMiddleware = middleware.filter(Boolean);
|
|
14902
15255
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
14903
|
-
if (process.env.NODE_ENV !== "production") {
|
|
14904
|
-
if (platform == null) {
|
|
14905
|
-
console.error(['Floating UI: `platform` property was not passed to config. If you', 'want to use Floating UI on the web, install @floating-ui/dom', 'instead of the /core package. Otherwise, you can create your own', '`platform`: https://floating-ui.com/docs/platform'].join(' '));
|
|
14906
|
-
}
|
|
14907
|
-
if (validMiddleware.filter(_ref => {
|
|
14908
|
-
let {
|
|
14909
|
-
name
|
|
14910
|
-
} = _ref;
|
|
14911
|
-
return name === 'autoPlacement' || name === 'flip';
|
|
14912
|
-
}).length > 1) {
|
|
14913
|
-
throw new Error(['Floating UI: duplicate `flip` and/or `autoPlacement` middleware', 'detected. This will lead to an infinite loop. Ensure only one of', 'either has been passed to the `middleware` array.'].join(' '));
|
|
14914
|
-
}
|
|
14915
|
-
if (!reference || !floating) {
|
|
14916
|
-
console.error(['Floating UI: The reference and/or floating element was not defined', 'when `computePosition()` was called. Ensure that both elements have', 'been created and can be measured.'].join(' '));
|
|
14917
|
-
}
|
|
14918
|
-
}
|
|
14919
15256
|
let rects = await platform.getElementRects({
|
|
14920
15257
|
reference,
|
|
14921
15258
|
floating,
|
|
@@ -14961,11 +15298,6 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
14961
15298
|
...data
|
|
14962
15299
|
}
|
|
14963
15300
|
};
|
|
14964
|
-
if (process.env.NODE_ENV !== "production") {
|
|
14965
|
-
if (resetCount > 50) {
|
|
14966
|
-
console.warn(['Floating UI: The middleware lifecycle appears to be running in an', 'infinite loop. This is usually caused by a `reset` continually', 'being returned without a break condition.'].join(' '));
|
|
14967
|
-
}
|
|
14968
|
-
}
|
|
14969
15301
|
if (reset && resetCount <= 50) {
|
|
14970
15302
|
resetCount++;
|
|
14971
15303
|
if (typeof reset === 'object') {
|
|
@@ -14997,35 +15329,6 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
14997
15329
|
};
|
|
14998
15330
|
};
|
|
14999
15331
|
|
|
15000
|
-
function expandPaddingObject(padding) {
|
|
15001
|
-
return {
|
|
15002
|
-
top: 0,
|
|
15003
|
-
right: 0,
|
|
15004
|
-
bottom: 0,
|
|
15005
|
-
left: 0,
|
|
15006
|
-
...padding
|
|
15007
|
-
};
|
|
15008
|
-
}
|
|
15009
|
-
|
|
15010
|
-
function getSideObjectFromPadding(padding) {
|
|
15011
|
-
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
15012
|
-
top: padding,
|
|
15013
|
-
right: padding,
|
|
15014
|
-
bottom: padding,
|
|
15015
|
-
left: padding
|
|
15016
|
-
};
|
|
15017
|
-
}
|
|
15018
|
-
|
|
15019
|
-
function rectToClientRect(rect) {
|
|
15020
|
-
return {
|
|
15021
|
-
...rect,
|
|
15022
|
-
top: rect.y,
|
|
15023
|
-
left: rect.x,
|
|
15024
|
-
right: rect.x + rect.width,
|
|
15025
|
-
bottom: rect.y + rect.height
|
|
15026
|
-
};
|
|
15027
|
-
}
|
|
15028
|
-
|
|
15029
15332
|
/**
|
|
15030
15333
|
* Resolves with an object of overflow side offsets that determine how much the
|
|
15031
15334
|
* element is overflowing a given clipping boundary on each side.
|
|
@@ -15053,8 +15356,8 @@ async function detectOverflow(state, options) {
|
|
|
15053
15356
|
elementContext = 'floating',
|
|
15054
15357
|
altBoundary = false,
|
|
15055
15358
|
padding = 0
|
|
15056
|
-
} = options;
|
|
15057
|
-
const paddingObject =
|
|
15359
|
+
} = evaluate(options, state);
|
|
15360
|
+
const paddingObject = getPaddingObject(padding);
|
|
15058
15361
|
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
15059
15362
|
const element = elements[altBoundary ? altContext : elementContext];
|
|
15060
15363
|
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
@@ -15072,98 +15375,21 @@ async function detectOverflow(state, options) {
|
|
|
15072
15375
|
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
15073
15376
|
x: 1,
|
|
15074
15377
|
y: 1
|
|
15075
|
-
} : {
|
|
15076
|
-
x: 1,
|
|
15077
|
-
y: 1
|
|
15078
|
-
};
|
|
15079
|
-
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
15080
|
-
rect,
|
|
15081
|
-
offsetParent,
|
|
15082
|
-
strategy
|
|
15083
|
-
}) : rect);
|
|
15084
|
-
|
|
15085
|
-
|
|
15086
|
-
|
|
15087
|
-
|
|
15088
|
-
|
|
15089
|
-
|
|
15090
|
-
};
|
|
15091
|
-
}
|
|
15092
|
-
|
|
15093
|
-
const min$1 = Math.min;
|
|
15094
|
-
const max$1 = Math.max;
|
|
15095
|
-
|
|
15096
|
-
function within(min$1$1, value, max$1$1) {
|
|
15097
|
-
return max$1(min$1$1, min$1(value, max$1$1));
|
|
15098
|
-
}
|
|
15099
|
-
|
|
15100
|
-
const oppositeSideMap = {
|
|
15101
|
-
left: 'right',
|
|
15102
|
-
right: 'left',
|
|
15103
|
-
bottom: 'top',
|
|
15104
|
-
top: 'bottom'
|
|
15105
|
-
};
|
|
15106
|
-
function getOppositePlacement(placement) {
|
|
15107
|
-
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
|
15108
|
-
}
|
|
15109
|
-
|
|
15110
|
-
function getAlignmentSides(placement, rects, rtl) {
|
|
15111
|
-
if (rtl === void 0) {
|
|
15112
|
-
rtl = false;
|
|
15113
|
-
}
|
|
15114
|
-
const alignment = getAlignment(placement);
|
|
15115
|
-
const mainAxis = getMainAxisFromPlacement(placement);
|
|
15116
|
-
const length = getLengthFromAxis(mainAxis);
|
|
15117
|
-
let mainAlignmentSide = mainAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
15118
|
-
if (rects.reference[length] > rects.floating[length]) {
|
|
15119
|
-
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
15120
|
-
}
|
|
15121
|
-
return {
|
|
15122
|
-
main: mainAlignmentSide,
|
|
15123
|
-
cross: getOppositePlacement(mainAlignmentSide)
|
|
15124
|
-
};
|
|
15125
|
-
}
|
|
15126
|
-
|
|
15127
|
-
const oppositeAlignmentMap = {
|
|
15128
|
-
start: 'end',
|
|
15129
|
-
end: 'start'
|
|
15130
|
-
};
|
|
15131
|
-
function getOppositeAlignmentPlacement(placement) {
|
|
15132
|
-
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
|
15133
|
-
}
|
|
15134
|
-
|
|
15135
|
-
function getExpandedPlacements(placement) {
|
|
15136
|
-
const oppositePlacement = getOppositePlacement(placement);
|
|
15137
|
-
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
15138
|
-
}
|
|
15139
|
-
|
|
15140
|
-
function getSideList(side, isStart, rtl) {
|
|
15141
|
-
const lr = ['left', 'right'];
|
|
15142
|
-
const rl = ['right', 'left'];
|
|
15143
|
-
const tb = ['top', 'bottom'];
|
|
15144
|
-
const bt = ['bottom', 'top'];
|
|
15145
|
-
switch (side) {
|
|
15146
|
-
case 'top':
|
|
15147
|
-
case 'bottom':
|
|
15148
|
-
if (rtl) return isStart ? rl : lr;
|
|
15149
|
-
return isStart ? lr : rl;
|
|
15150
|
-
case 'left':
|
|
15151
|
-
case 'right':
|
|
15152
|
-
return isStart ? tb : bt;
|
|
15153
|
-
default:
|
|
15154
|
-
return [];
|
|
15155
|
-
}
|
|
15156
|
-
}
|
|
15157
|
-
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
15158
|
-
const alignment = getAlignment(placement);
|
|
15159
|
-
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
15160
|
-
if (alignment) {
|
|
15161
|
-
list = list.map(side => side + "-" + alignment);
|
|
15162
|
-
if (flipAlignment) {
|
|
15163
|
-
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
15164
|
-
}
|
|
15165
|
-
}
|
|
15166
|
-
return list;
|
|
15378
|
+
} : {
|
|
15379
|
+
x: 1,
|
|
15380
|
+
y: 1
|
|
15381
|
+
};
|
|
15382
|
+
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
15383
|
+
rect,
|
|
15384
|
+
offsetParent,
|
|
15385
|
+
strategy
|
|
15386
|
+
}) : rect);
|
|
15387
|
+
return {
|
|
15388
|
+
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
15389
|
+
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
15390
|
+
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
15391
|
+
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
15392
|
+
};
|
|
15167
15393
|
}
|
|
15168
15394
|
|
|
15169
15395
|
/**
|
|
@@ -15197,7 +15423,7 @@ const flip = function (options) {
|
|
|
15197
15423
|
fallbackAxisSideDirection = 'none',
|
|
15198
15424
|
flipAlignment = true,
|
|
15199
15425
|
...detectOverflowOptions
|
|
15200
|
-
} = options;
|
|
15426
|
+
} = evaluate(options, state);
|
|
15201
15427
|
const side = getSide(placement);
|
|
15202
15428
|
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
15203
15429
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
@@ -15213,11 +15439,8 @@ const flip = function (options) {
|
|
|
15213
15439
|
overflows.push(overflow[side]);
|
|
15214
15440
|
}
|
|
15215
15441
|
if (checkCrossAxis) {
|
|
15216
|
-
const
|
|
15217
|
-
|
|
15218
|
-
cross
|
|
15219
|
-
} = getAlignmentSides(placement, rects, rtl);
|
|
15220
|
-
overflows.push(overflow[main], overflow[cross]);
|
|
15442
|
+
const sides = getAlignmentSides(placement, rects, rtl);
|
|
15443
|
+
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
15221
15444
|
}
|
|
15222
15445
|
overflowsData = [...overflowsData, {
|
|
15223
15446
|
placement,
|
|
@@ -15276,7 +15499,9 @@ const flip = function (options) {
|
|
|
15276
15499
|
};
|
|
15277
15500
|
};
|
|
15278
15501
|
|
|
15279
|
-
|
|
15502
|
+
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
15503
|
+
// Derivable.
|
|
15504
|
+
async function convertValueToCoords(state, options) {
|
|
15280
15505
|
const {
|
|
15281
15506
|
placement,
|
|
15282
15507
|
platform,
|
|
@@ -15285,10 +15510,10 @@ async function convertValueToCoords(state, value) {
|
|
|
15285
15510
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
15286
15511
|
const side = getSide(placement);
|
|
15287
15512
|
const alignment = getAlignment(placement);
|
|
15288
|
-
const isVertical =
|
|
15513
|
+
const isVertical = getSideAxis(placement) === 'y';
|
|
15289
15514
|
const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
|
|
15290
15515
|
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
15291
|
-
const rawValue =
|
|
15516
|
+
const rawValue = evaluate(options, state);
|
|
15292
15517
|
|
|
15293
15518
|
// eslint-disable-next-line prefer-const
|
|
15294
15519
|
let {
|
|
@@ -15324,19 +15549,19 @@ async function convertValueToCoords(state, value) {
|
|
|
15324
15549
|
* object may be passed.
|
|
15325
15550
|
* @see https://floating-ui.com/docs/offset
|
|
15326
15551
|
*/
|
|
15327
|
-
const offset = function (
|
|
15328
|
-
if (
|
|
15329
|
-
|
|
15552
|
+
const offset = function (options) {
|
|
15553
|
+
if (options === void 0) {
|
|
15554
|
+
options = 0;
|
|
15330
15555
|
}
|
|
15331
15556
|
return {
|
|
15332
15557
|
name: 'offset',
|
|
15333
|
-
options
|
|
15558
|
+
options,
|
|
15334
15559
|
async fn(state) {
|
|
15335
15560
|
const {
|
|
15336
15561
|
x,
|
|
15337
15562
|
y
|
|
15338
15563
|
} = state;
|
|
15339
|
-
const diffCoords = await convertValueToCoords(state,
|
|
15564
|
+
const diffCoords = await convertValueToCoords(state, options);
|
|
15340
15565
|
return {
|
|
15341
15566
|
x: x + diffCoords.x,
|
|
15342
15567
|
y: y + diffCoords.y,
|
|
@@ -15346,10 +15571,6 @@ const offset = function (value) {
|
|
|
15346
15571
|
};
|
|
15347
15572
|
};
|
|
15348
15573
|
|
|
15349
|
-
function getCrossAxis(axis) {
|
|
15350
|
-
return axis === 'x' ? 'y' : 'x';
|
|
15351
|
-
}
|
|
15352
|
-
|
|
15353
15574
|
/**
|
|
15354
15575
|
* Optimizes the visibility of the floating element by shifting it in order to
|
|
15355
15576
|
* keep it in view when it will overflow the clipping boundary.
|
|
@@ -15384,14 +15605,14 @@ const shift = function (options) {
|
|
|
15384
15605
|
}
|
|
15385
15606
|
},
|
|
15386
15607
|
...detectOverflowOptions
|
|
15387
|
-
} = options;
|
|
15608
|
+
} = evaluate(options, state);
|
|
15388
15609
|
const coords = {
|
|
15389
15610
|
x,
|
|
15390
15611
|
y
|
|
15391
15612
|
};
|
|
15392
15613
|
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
15393
|
-
const
|
|
15394
|
-
const
|
|
15614
|
+
const crossAxis = getSideAxis(getSide(placement));
|
|
15615
|
+
const mainAxis = getOppositeAxis(crossAxis);
|
|
15395
15616
|
let mainAxisCoord = coords[mainAxis];
|
|
15396
15617
|
let crossAxisCoord = coords[crossAxis];
|
|
15397
15618
|
if (checkMainAxis) {
|
|
@@ -15399,14 +15620,14 @@ const shift = function (options) {
|
|
|
15399
15620
|
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
15400
15621
|
const min = mainAxisCoord + overflow[minSide];
|
|
15401
15622
|
const max = mainAxisCoord - overflow[maxSide];
|
|
15402
|
-
mainAxisCoord =
|
|
15623
|
+
mainAxisCoord = clamp(min, mainAxisCoord, max);
|
|
15403
15624
|
}
|
|
15404
15625
|
if (checkCrossAxis) {
|
|
15405
15626
|
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
15406
15627
|
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
15407
15628
|
const min = crossAxisCoord + overflow[minSide];
|
|
15408
15629
|
const max = crossAxisCoord - overflow[maxSide];
|
|
15409
|
-
crossAxisCoord =
|
|
15630
|
+
crossAxisCoord = clamp(min, crossAxisCoord, max);
|
|
15410
15631
|
}
|
|
15411
15632
|
const limitedCoords = limiter.fn({
|
|
15412
15633
|
...state,
|
|
@@ -15447,12 +15668,11 @@ const size = function (options) {
|
|
|
15447
15668
|
const {
|
|
15448
15669
|
apply = () => {},
|
|
15449
15670
|
...detectOverflowOptions
|
|
15450
|
-
} = options;
|
|
15671
|
+
} = evaluate(options, state);
|
|
15451
15672
|
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
15452
15673
|
const side = getSide(placement);
|
|
15453
15674
|
const alignment = getAlignment(placement);
|
|
15454
|
-
const
|
|
15455
|
-
const isXAxis = axis === 'x';
|
|
15675
|
+
const isYAxis = getSideAxis(placement) === 'y';
|
|
15456
15676
|
const {
|
|
15457
15677
|
width,
|
|
15458
15678
|
height
|
|
@@ -15468,26 +15688,25 @@ const size = function (options) {
|
|
|
15468
15688
|
}
|
|
15469
15689
|
const overflowAvailableHeight = height - overflow[heightSide];
|
|
15470
15690
|
const overflowAvailableWidth = width - overflow[widthSide];
|
|
15691
|
+
const noShift = !state.middlewareData.shift;
|
|
15471
15692
|
let availableHeight = overflowAvailableHeight;
|
|
15472
15693
|
let availableWidth = overflowAvailableWidth;
|
|
15473
|
-
if (
|
|
15474
|
-
|
|
15475
|
-
|
|
15476
|
-
width - overflow.right - overflow.left, overflowAvailableWidth);
|
|
15694
|
+
if (isYAxis) {
|
|
15695
|
+
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
15696
|
+
availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
|
|
15477
15697
|
} else {
|
|
15478
|
-
|
|
15479
|
-
|
|
15480
|
-
|
|
15481
|
-
|
|
15482
|
-
|
|
15483
|
-
const
|
|
15484
|
-
const
|
|
15485
|
-
const
|
|
15486
|
-
|
|
15487
|
-
|
|
15488
|
-
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max$1(overflow.left, overflow.right));
|
|
15698
|
+
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
15699
|
+
availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
|
|
15700
|
+
}
|
|
15701
|
+
if (noShift && !alignment) {
|
|
15702
|
+
const xMin = max(overflow.left, 0);
|
|
15703
|
+
const xMax = max(overflow.right, 0);
|
|
15704
|
+
const yMin = max(overflow.top, 0);
|
|
15705
|
+
const yMax = max(overflow.bottom, 0);
|
|
15706
|
+
if (isYAxis) {
|
|
15707
|
+
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
15489
15708
|
} else {
|
|
15490
|
-
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max
|
|
15709
|
+
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
15491
15710
|
}
|
|
15492
15711
|
}
|
|
15493
15712
|
await apply({
|
|
@@ -15508,106 +15727,13 @@ const size = function (options) {
|
|
|
15508
15727
|
};
|
|
15509
15728
|
};
|
|
15510
15729
|
|
|
15511
|
-
function getWindow$1(node) {
|
|
15512
|
-
var _node$ownerDocument;
|
|
15513
|
-
return ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
15514
|
-
}
|
|
15515
|
-
|
|
15516
|
-
function getComputedStyle$1(element) {
|
|
15517
|
-
return getWindow$1(element).getComputedStyle(element);
|
|
15518
|
-
}
|
|
15519
|
-
|
|
15520
|
-
function isNode(value) {
|
|
15521
|
-
return value instanceof getWindow$1(value).Node;
|
|
15522
|
-
}
|
|
15523
|
-
function getNodeName(node) {
|
|
15524
|
-
return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
|
|
15525
|
-
}
|
|
15526
|
-
|
|
15527
|
-
let uaString;
|
|
15528
|
-
function getUAString() {
|
|
15529
|
-
if (uaString) {
|
|
15530
|
-
return uaString;
|
|
15531
|
-
}
|
|
15532
|
-
const uaData = navigator.userAgentData;
|
|
15533
|
-
if (uaData && Array.isArray(uaData.brands)) {
|
|
15534
|
-
uaString = uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
|
|
15535
|
-
return uaString;
|
|
15536
|
-
}
|
|
15537
|
-
return navigator.userAgent;
|
|
15538
|
-
}
|
|
15539
|
-
|
|
15540
|
-
function isHTMLElement$1(value) {
|
|
15541
|
-
return value instanceof getWindow$1(value).HTMLElement;
|
|
15542
|
-
}
|
|
15543
|
-
function isElement$1(value) {
|
|
15544
|
-
return value instanceof getWindow$1(value).Element;
|
|
15545
|
-
}
|
|
15546
|
-
function isShadowRoot$1(node) {
|
|
15547
|
-
// Browsers without `ShadowRoot` support.
|
|
15548
|
-
if (typeof ShadowRoot === 'undefined') {
|
|
15549
|
-
return false;
|
|
15550
|
-
}
|
|
15551
|
-
const OwnElement = getWindow$1(node).ShadowRoot;
|
|
15552
|
-
return node instanceof OwnElement || node instanceof ShadowRoot;
|
|
15553
|
-
}
|
|
15554
|
-
function isOverflowElement(element) {
|
|
15555
|
-
const {
|
|
15556
|
-
overflow,
|
|
15557
|
-
overflowX,
|
|
15558
|
-
overflowY,
|
|
15559
|
-
display
|
|
15560
|
-
} = getComputedStyle$1(element);
|
|
15561
|
-
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
|
|
15562
|
-
}
|
|
15563
|
-
function isTableElement(element) {
|
|
15564
|
-
return ['table', 'td', 'th'].includes(getNodeName(element));
|
|
15565
|
-
}
|
|
15566
|
-
function isContainingBlock(element) {
|
|
15567
|
-
// TODO: Try to use feature detection here instead.
|
|
15568
|
-
const isFirefox = /firefox/i.test(getUAString());
|
|
15569
|
-
const css = getComputedStyle$1(element);
|
|
15570
|
-
const backdropFilter = css.backdropFilter || css.WebkitBackdropFilter;
|
|
15571
|
-
|
|
15572
|
-
// This is non-exhaustive but covers the most common CSS properties that
|
|
15573
|
-
// create a containing block.
|
|
15574
|
-
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
15575
|
-
return css.transform !== 'none' || css.perspective !== 'none' || (backdropFilter ? backdropFilter !== 'none' : false) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => {
|
|
15576
|
-
// Add type check for old browsers.
|
|
15577
|
-
const contain = css.contain;
|
|
15578
|
-
return contain != null ? contain.includes(value) : false;
|
|
15579
|
-
});
|
|
15580
|
-
}
|
|
15581
|
-
|
|
15582
|
-
/**
|
|
15583
|
-
* Determines whether or not `.getBoundingClientRect()` is affected by visual
|
|
15584
|
-
* viewport offsets. In Safari, the `x`/`y` offsets are values relative to the
|
|
15585
|
-
* visual viewport, while in other engines, they are values relative to the
|
|
15586
|
-
* layout viewport.
|
|
15587
|
-
*/
|
|
15588
|
-
function isClientRectVisualViewportBased() {
|
|
15589
|
-
// TODO: Try to use feature detection here instead. Feature detection for
|
|
15590
|
-
// this can fail in various ways, making the userAgent check the most
|
|
15591
|
-
// reliable:
|
|
15592
|
-
// • Always-visible scrollbar or not
|
|
15593
|
-
// • Width of <html>
|
|
15594
|
-
|
|
15595
|
-
// Is Safari.
|
|
15596
|
-
return /^((?!chrome|android).)*safari/i.test(getUAString());
|
|
15597
|
-
}
|
|
15598
|
-
function isLastTraversableNode(node) {
|
|
15599
|
-
return ['html', 'body', '#document'].includes(getNodeName(node));
|
|
15600
|
-
}
|
|
15601
|
-
|
|
15602
|
-
const min = Math.min;
|
|
15603
|
-
const max = Math.max;
|
|
15604
|
-
const round = Math.round;
|
|
15605
|
-
|
|
15606
15730
|
function getCssDimensions(element) {
|
|
15607
15731
|
const css = getComputedStyle$1(element);
|
|
15608
|
-
|
|
15609
|
-
|
|
15610
|
-
|
|
15732
|
+
// In testing environments, the `width` and `height` properties are empty
|
|
15733
|
+
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
15734
|
+
let width = parseFloat(css.width) || 0;
|
|
15735
|
+
let height = parseFloat(css.height) || 0;
|
|
15736
|
+
const hasOffset = isHTMLElement(element);
|
|
15611
15737
|
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
15612
15738
|
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
15613
15739
|
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
@@ -15618,31 +15744,27 @@ function getCssDimensions(element) {
|
|
|
15618
15744
|
return {
|
|
15619
15745
|
width,
|
|
15620
15746
|
height,
|
|
15621
|
-
|
|
15747
|
+
$: shouldFallback
|
|
15622
15748
|
};
|
|
15623
15749
|
}
|
|
15624
15750
|
|
|
15625
15751
|
function unwrapElement(element) {
|
|
15626
|
-
return !isElement
|
|
15752
|
+
return !isElement(element) ? element.contextElement : element;
|
|
15627
15753
|
}
|
|
15628
15754
|
|
|
15629
|
-
const FALLBACK_SCALE = {
|
|
15630
|
-
x: 1,
|
|
15631
|
-
y: 1
|
|
15632
|
-
};
|
|
15633
15755
|
function getScale(element) {
|
|
15634
15756
|
const domElement = unwrapElement(element);
|
|
15635
|
-
if (!isHTMLElement
|
|
15636
|
-
return
|
|
15757
|
+
if (!isHTMLElement(domElement)) {
|
|
15758
|
+
return createCoords(1);
|
|
15637
15759
|
}
|
|
15638
15760
|
const rect = domElement.getBoundingClientRect();
|
|
15639
15761
|
const {
|
|
15640
15762
|
width,
|
|
15641
15763
|
height,
|
|
15642
|
-
|
|
15764
|
+
$
|
|
15643
15765
|
} = getCssDimensions(domElement);
|
|
15644
|
-
let x = (
|
|
15645
|
-
let y = (
|
|
15766
|
+
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
15767
|
+
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
15646
15768
|
|
|
15647
15769
|
// 0, NaN, or Infinity should always fallback to 1.
|
|
15648
15770
|
|
|
@@ -15658,8 +15780,28 @@ function getScale(element) {
|
|
|
15658
15780
|
};
|
|
15659
15781
|
}
|
|
15660
15782
|
|
|
15783
|
+
const noOffsets = /*#__PURE__*/createCoords(0);
|
|
15784
|
+
function getVisualOffsets(element) {
|
|
15785
|
+
const win = getWindow(element);
|
|
15786
|
+
if (!isWebKit() || !win.visualViewport) {
|
|
15787
|
+
return noOffsets;
|
|
15788
|
+
}
|
|
15789
|
+
return {
|
|
15790
|
+
x: win.visualViewport.offsetLeft,
|
|
15791
|
+
y: win.visualViewport.offsetTop
|
|
15792
|
+
};
|
|
15793
|
+
}
|
|
15794
|
+
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
15795
|
+
if (isFixed === void 0) {
|
|
15796
|
+
isFixed = false;
|
|
15797
|
+
}
|
|
15798
|
+
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
15799
|
+
return false;
|
|
15800
|
+
}
|
|
15801
|
+
return isFixed;
|
|
15802
|
+
}
|
|
15803
|
+
|
|
15661
15804
|
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
15662
|
-
var _win$visualViewport, _win$visualViewport2;
|
|
15663
15805
|
if (includeScale === void 0) {
|
|
15664
15806
|
includeScale = false;
|
|
15665
15807
|
}
|
|
@@ -15668,39 +15810,38 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
15668
15810
|
}
|
|
15669
15811
|
const clientRect = element.getBoundingClientRect();
|
|
15670
15812
|
const domElement = unwrapElement(element);
|
|
15671
|
-
let scale =
|
|
15813
|
+
let scale = createCoords(1);
|
|
15672
15814
|
if (includeScale) {
|
|
15673
15815
|
if (offsetParent) {
|
|
15674
|
-
if (isElement
|
|
15816
|
+
if (isElement(offsetParent)) {
|
|
15675
15817
|
scale = getScale(offsetParent);
|
|
15676
15818
|
}
|
|
15677
15819
|
} else {
|
|
15678
15820
|
scale = getScale(element);
|
|
15679
15821
|
}
|
|
15680
15822
|
}
|
|
15681
|
-
const
|
|
15682
|
-
|
|
15683
|
-
let
|
|
15684
|
-
let y = (clientRect.top + (addVisualOffsets ? ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0 : 0)) / scale.y;
|
|
15823
|
+
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
15824
|
+
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
15825
|
+
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
15685
15826
|
let width = clientRect.width / scale.x;
|
|
15686
15827
|
let height = clientRect.height / scale.y;
|
|
15687
15828
|
if (domElement) {
|
|
15688
|
-
const win = getWindow
|
|
15689
|
-
const offsetWin = offsetParent && isElement
|
|
15829
|
+
const win = getWindow(domElement);
|
|
15830
|
+
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
15690
15831
|
let currentIFrame = win.frameElement;
|
|
15691
15832
|
while (currentIFrame && offsetParent && offsetWin !== win) {
|
|
15692
15833
|
const iframeScale = getScale(currentIFrame);
|
|
15693
15834
|
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
15694
|
-
const css = getComputedStyle(currentIFrame);
|
|
15695
|
-
iframeRect.
|
|
15696
|
-
iframeRect.
|
|
15835
|
+
const css = getComputedStyle$1(currentIFrame);
|
|
15836
|
+
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
15837
|
+
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
15697
15838
|
x *= iframeScale.x;
|
|
15698
15839
|
y *= iframeScale.y;
|
|
15699
15840
|
width *= iframeScale.x;
|
|
15700
15841
|
height *= iframeScale.y;
|
|
15701
|
-
x +=
|
|
15702
|
-
y +=
|
|
15703
|
-
currentIFrame = getWindow
|
|
15842
|
+
x += left;
|
|
15843
|
+
y += top;
|
|
15844
|
+
currentIFrame = getWindow(currentIFrame).frameElement;
|
|
15704
15845
|
}
|
|
15705
15846
|
}
|
|
15706
15847
|
return rectToClientRect({
|
|
@@ -15711,30 +15852,13 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
15711
15852
|
});
|
|
15712
15853
|
}
|
|
15713
15854
|
|
|
15714
|
-
function getDocumentElement(node) {
|
|
15715
|
-
return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
|
|
15716
|
-
}
|
|
15717
|
-
|
|
15718
|
-
function getNodeScroll(element) {
|
|
15719
|
-
if (isElement$1(element)) {
|
|
15720
|
-
return {
|
|
15721
|
-
scrollLeft: element.scrollLeft,
|
|
15722
|
-
scrollTop: element.scrollTop
|
|
15723
|
-
};
|
|
15724
|
-
}
|
|
15725
|
-
return {
|
|
15726
|
-
scrollLeft: element.pageXOffset,
|
|
15727
|
-
scrollTop: element.pageYOffset
|
|
15728
|
-
};
|
|
15729
|
-
}
|
|
15730
|
-
|
|
15731
15855
|
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
15732
15856
|
let {
|
|
15733
15857
|
rect,
|
|
15734
15858
|
offsetParent,
|
|
15735
15859
|
strategy
|
|
15736
15860
|
} = _ref;
|
|
15737
|
-
const isOffsetParentAnElement = isHTMLElement
|
|
15861
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
15738
15862
|
const documentElement = getDocumentElement(offsetParent);
|
|
15739
15863
|
if (offsetParent === documentElement) {
|
|
15740
15864
|
return rect;
|
|
@@ -15743,19 +15867,13 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
15743
15867
|
scrollLeft: 0,
|
|
15744
15868
|
scrollTop: 0
|
|
15745
15869
|
};
|
|
15746
|
-
let scale =
|
|
15747
|
-
|
|
15748
|
-
y: 1
|
|
15749
|
-
};
|
|
15750
|
-
const offsets = {
|
|
15751
|
-
x: 0,
|
|
15752
|
-
y: 0
|
|
15753
|
-
};
|
|
15870
|
+
let scale = createCoords(1);
|
|
15871
|
+
const offsets = createCoords(0);
|
|
15754
15872
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
|
|
15755
15873
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
15756
15874
|
scroll = getNodeScroll(offsetParent);
|
|
15757
15875
|
}
|
|
15758
|
-
if (isHTMLElement
|
|
15876
|
+
if (isHTMLElement(offsetParent)) {
|
|
15759
15877
|
const offsetRect = getBoundingClientRect(offsetParent);
|
|
15760
15878
|
scale = getScale(offsetParent);
|
|
15761
15879
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
@@ -15770,6 +15888,10 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
15770
15888
|
};
|
|
15771
15889
|
}
|
|
15772
15890
|
|
|
15891
|
+
function getClientRects(element) {
|
|
15892
|
+
return Array.from(element.getClientRects());
|
|
15893
|
+
}
|
|
15894
|
+
|
|
15773
15895
|
function getWindowScrollBarX(element) {
|
|
15774
15896
|
// If <html> has a CSS width greater than the viewport, then this will be
|
|
15775
15897
|
// incorrect for RTL.
|
|
@@ -15797,51 +15919,8 @@ function getDocumentRect(element) {
|
|
|
15797
15919
|
};
|
|
15798
15920
|
}
|
|
15799
15921
|
|
|
15800
|
-
function getParentNode(node) {
|
|
15801
|
-
if (getNodeName(node) === 'html') {
|
|
15802
|
-
return node;
|
|
15803
|
-
}
|
|
15804
|
-
const result =
|
|
15805
|
-
// Step into the shadow DOM of the parent of a slotted node.
|
|
15806
|
-
node.assignedSlot ||
|
|
15807
|
-
// DOM Element detected.
|
|
15808
|
-
node.parentNode ||
|
|
15809
|
-
// ShadowRoot detected.
|
|
15810
|
-
isShadowRoot$1(node) && node.host ||
|
|
15811
|
-
// Fallback.
|
|
15812
|
-
getDocumentElement(node);
|
|
15813
|
-
return isShadowRoot$1(result) ? result.host : result;
|
|
15814
|
-
}
|
|
15815
|
-
|
|
15816
|
-
function getNearestOverflowAncestor(node) {
|
|
15817
|
-
const parentNode = getParentNode(node);
|
|
15818
|
-
if (isLastTraversableNode(parentNode)) {
|
|
15819
|
-
// `getParentNode` will never return a `Document` due to the fallback
|
|
15820
|
-
// check, so it's either the <html> or <body> element.
|
|
15821
|
-
return parentNode.ownerDocument.body;
|
|
15822
|
-
}
|
|
15823
|
-
if (isHTMLElement$1(parentNode) && isOverflowElement(parentNode)) {
|
|
15824
|
-
return parentNode;
|
|
15825
|
-
}
|
|
15826
|
-
return getNearestOverflowAncestor(parentNode);
|
|
15827
|
-
}
|
|
15828
|
-
|
|
15829
|
-
function getOverflowAncestors(node, list) {
|
|
15830
|
-
var _node$ownerDocument;
|
|
15831
|
-
if (list === void 0) {
|
|
15832
|
-
list = [];
|
|
15833
|
-
}
|
|
15834
|
-
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
15835
|
-
const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
|
|
15836
|
-
const win = getWindow$1(scrollableAncestor);
|
|
15837
|
-
if (isBody) {
|
|
15838
|
-
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
|
|
15839
|
-
}
|
|
15840
|
-
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
|
|
15841
|
-
}
|
|
15842
|
-
|
|
15843
15922
|
function getViewportRect(element, strategy) {
|
|
15844
|
-
const win = getWindow
|
|
15923
|
+
const win = getWindow(element);
|
|
15845
15924
|
const html = getDocumentElement(element);
|
|
15846
15925
|
const visualViewport = win.visualViewport;
|
|
15847
15926
|
let width = html.clientWidth;
|
|
@@ -15851,7 +15930,7 @@ function getViewportRect(element, strategy) {
|
|
|
15851
15930
|
if (visualViewport) {
|
|
15852
15931
|
width = visualViewport.width;
|
|
15853
15932
|
height = visualViewport.height;
|
|
15854
|
-
const visualViewportBased =
|
|
15933
|
+
const visualViewportBased = isWebKit();
|
|
15855
15934
|
if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
|
|
15856
15935
|
x = visualViewport.offsetLeft;
|
|
15857
15936
|
y = visualViewport.offsetTop;
|
|
@@ -15870,10 +15949,7 @@ function getInnerBoundingClientRect(element, strategy) {
|
|
|
15870
15949
|
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
15871
15950
|
const top = clientRect.top + element.clientTop;
|
|
15872
15951
|
const left = clientRect.left + element.clientLeft;
|
|
15873
|
-
const scale = isHTMLElement
|
|
15874
|
-
x: 1,
|
|
15875
|
-
y: 1
|
|
15876
|
-
};
|
|
15952
|
+
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
15877
15953
|
const width = element.clientWidth * scale.x;
|
|
15878
15954
|
const height = element.clientHeight * scale.y;
|
|
15879
15955
|
const x = left * scale.x;
|
|
@@ -15891,22 +15967,25 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
|
|
|
15891
15967
|
rect = getViewportRect(element, strategy);
|
|
15892
15968
|
} else if (clippingAncestor === 'document') {
|
|
15893
15969
|
rect = getDocumentRect(getDocumentElement(element));
|
|
15894
|
-
} else if (isElement
|
|
15970
|
+
} else if (isElement(clippingAncestor)) {
|
|
15895
15971
|
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
15896
15972
|
} else {
|
|
15897
|
-
const
|
|
15898
|
-
|
|
15973
|
+
const visualOffsets = getVisualOffsets(element);
|
|
15974
|
+
rect = {
|
|
15975
|
+
...clippingAncestor,
|
|
15976
|
+
x: clippingAncestor.x - visualOffsets.x,
|
|
15977
|
+
y: clippingAncestor.y - visualOffsets.y
|
|
15899
15978
|
};
|
|
15900
|
-
if (isClientRectVisualViewportBased()) {
|
|
15901
|
-
var _win$visualViewport, _win$visualViewport2;
|
|
15902
|
-
const win = getWindow$1(element);
|
|
15903
|
-
mutableRect.x -= ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0;
|
|
15904
|
-
mutableRect.y -= ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0;
|
|
15905
|
-
}
|
|
15906
|
-
rect = mutableRect;
|
|
15907
15979
|
}
|
|
15908
15980
|
return rectToClientRect(rect);
|
|
15909
15981
|
}
|
|
15982
|
+
function hasFixedPositionAncestor(element, stopNode) {
|
|
15983
|
+
const parentNode = getParentNode(element);
|
|
15984
|
+
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
15985
|
+
return false;
|
|
15986
|
+
}
|
|
15987
|
+
return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
15988
|
+
}
|
|
15910
15989
|
|
|
15911
15990
|
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
15912
15991
|
// clipping (or hiding) child elements. This returns all clipping ancestors
|
|
@@ -15916,27 +15995,25 @@ function getClippingElementAncestors(element, cache) {
|
|
|
15916
15995
|
if (cachedResult) {
|
|
15917
15996
|
return cachedResult;
|
|
15918
15997
|
}
|
|
15919
|
-
let result = getOverflowAncestors(element).filter(el => isElement
|
|
15998
|
+
let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
15920
15999
|
let currentContainingBlockComputedStyle = null;
|
|
15921
16000
|
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
|
|
15922
16001
|
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
15923
16002
|
|
|
15924
16003
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
15925
|
-
while (isElement
|
|
16004
|
+
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
15926
16005
|
const computedStyle = getComputedStyle$1(currentNode);
|
|
15927
|
-
const
|
|
15928
|
-
|
|
15929
|
-
if (shouldIgnoreCurrentNode) {
|
|
16006
|
+
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
16007
|
+
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
15930
16008
|
currentContainingBlockComputedStyle = null;
|
|
16009
|
+
}
|
|
16010
|
+
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
16011
|
+
if (shouldDropCurrentNode) {
|
|
16012
|
+
// Drop non-containing blocks.
|
|
16013
|
+
result = result.filter(ancestor => ancestor !== currentNode);
|
|
15931
16014
|
} else {
|
|
15932
|
-
|
|
15933
|
-
|
|
15934
|
-
// Drop non-containing blocks.
|
|
15935
|
-
result = result.filter(ancestor => ancestor !== currentNode);
|
|
15936
|
-
} else {
|
|
15937
|
-
// Record last containing block for next iteration.
|
|
15938
|
-
currentContainingBlockComputedStyle = computedStyle;
|
|
15939
|
-
}
|
|
16015
|
+
// Record last containing block for next iteration.
|
|
16016
|
+
currentContainingBlockComputedStyle = computedStyle;
|
|
15940
16017
|
}
|
|
15941
16018
|
currentNode = getParentNode(currentNode);
|
|
15942
16019
|
}
|
|
@@ -15976,8 +16053,38 @@ function getDimensions(element) {
|
|
|
15976
16053
|
return getCssDimensions(element);
|
|
15977
16054
|
}
|
|
15978
16055
|
|
|
16056
|
+
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
16057
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
16058
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
16059
|
+
const isFixed = strategy === 'fixed';
|
|
16060
|
+
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
16061
|
+
let scroll = {
|
|
16062
|
+
scrollLeft: 0,
|
|
16063
|
+
scrollTop: 0
|
|
16064
|
+
};
|
|
16065
|
+
const offsets = createCoords(0);
|
|
16066
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
16067
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
16068
|
+
scroll = getNodeScroll(offsetParent);
|
|
16069
|
+
}
|
|
16070
|
+
if (isOffsetParentAnElement) {
|
|
16071
|
+
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
16072
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
16073
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
16074
|
+
} else if (documentElement) {
|
|
16075
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
16076
|
+
}
|
|
16077
|
+
}
|
|
16078
|
+
return {
|
|
16079
|
+
x: rect.left + scroll.scrollLeft - offsets.x,
|
|
16080
|
+
y: rect.top + scroll.scrollTop - offsets.y,
|
|
16081
|
+
width: rect.width,
|
|
16082
|
+
height: rect.height
|
|
16083
|
+
};
|
|
16084
|
+
}
|
|
16085
|
+
|
|
15979
16086
|
function getTrueOffsetParent(element, polyfill) {
|
|
15980
|
-
if (!isHTMLElement
|
|
16087
|
+
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
|
|
15981
16088
|
return null;
|
|
15982
16089
|
}
|
|
15983
16090
|
if (polyfill) {
|
|
@@ -15985,23 +16092,12 @@ function getTrueOffsetParent(element, polyfill) {
|
|
|
15985
16092
|
}
|
|
15986
16093
|
return element.offsetParent;
|
|
15987
16094
|
}
|
|
15988
|
-
function getContainingBlock(element) {
|
|
15989
|
-
let currentNode = getParentNode(element);
|
|
15990
|
-
while (isHTMLElement$1(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
15991
|
-
if (isContainingBlock(currentNode)) {
|
|
15992
|
-
return currentNode;
|
|
15993
|
-
} else {
|
|
15994
|
-
currentNode = getParentNode(currentNode);
|
|
15995
|
-
}
|
|
15996
|
-
}
|
|
15997
|
-
return null;
|
|
15998
|
-
}
|
|
15999
16095
|
|
|
16000
16096
|
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
16001
16097
|
// such as table ancestors and cross browser bugs.
|
|
16002
16098
|
function getOffsetParent(element, polyfill) {
|
|
16003
|
-
const window = getWindow
|
|
16004
|
-
if (!isHTMLElement
|
|
16099
|
+
const window = getWindow(element);
|
|
16100
|
+
if (!isHTMLElement(element)) {
|
|
16005
16101
|
return window;
|
|
16006
16102
|
}
|
|
16007
16103
|
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
@@ -16014,67 +16110,115 @@ function getOffsetParent(element, polyfill) {
|
|
|
16014
16110
|
return offsetParent || getContainingBlock(element) || window;
|
|
16015
16111
|
}
|
|
16016
16112
|
|
|
16017
|
-
function
|
|
16018
|
-
|
|
16019
|
-
|
|
16020
|
-
|
|
16021
|
-
|
|
16022
|
-
|
|
16023
|
-
|
|
16024
|
-
|
|
16025
|
-
const offsets = {
|
|
16026
|
-
x: 0,
|
|
16027
|
-
y: 0
|
|
16028
|
-
};
|
|
16029
|
-
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
|
|
16030
|
-
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
16031
|
-
scroll = getNodeScroll(offsetParent);
|
|
16032
|
-
}
|
|
16033
|
-
if (isHTMLElement$1(offsetParent)) {
|
|
16034
|
-
const offsetRect = getBoundingClientRect(offsetParent, true);
|
|
16035
|
-
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
16036
|
-
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
16037
|
-
} else if (documentElement) {
|
|
16038
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
16039
|
-
}
|
|
16040
|
-
}
|
|
16113
|
+
const getElementRects = async function (_ref) {
|
|
16114
|
+
let {
|
|
16115
|
+
reference,
|
|
16116
|
+
floating,
|
|
16117
|
+
strategy
|
|
16118
|
+
} = _ref;
|
|
16119
|
+
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
16120
|
+
const getDimensionsFn = this.getDimensions;
|
|
16041
16121
|
return {
|
|
16042
|
-
|
|
16043
|
-
|
|
16044
|
-
|
|
16045
|
-
|
|
16122
|
+
reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
|
|
16123
|
+
floating: {
|
|
16124
|
+
x: 0,
|
|
16125
|
+
y: 0,
|
|
16126
|
+
...(await getDimensionsFn(floating))
|
|
16127
|
+
}
|
|
16046
16128
|
};
|
|
16129
|
+
};
|
|
16130
|
+
|
|
16131
|
+
function isRTL(element) {
|
|
16132
|
+
return getComputedStyle$1(element).direction === 'rtl';
|
|
16047
16133
|
}
|
|
16048
16134
|
|
|
16049
16135
|
const platform = {
|
|
16050
|
-
getClippingRect,
|
|
16051
16136
|
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
16052
|
-
isElement: isElement$1,
|
|
16053
|
-
getDimensions,
|
|
16054
|
-
getOffsetParent,
|
|
16055
16137
|
getDocumentElement,
|
|
16138
|
+
getClippingRect,
|
|
16139
|
+
getOffsetParent,
|
|
16140
|
+
getElementRects,
|
|
16141
|
+
getClientRects,
|
|
16142
|
+
getDimensions,
|
|
16056
16143
|
getScale,
|
|
16057
|
-
|
|
16058
|
-
|
|
16059
|
-
reference,
|
|
16060
|
-
floating,
|
|
16061
|
-
strategy
|
|
16062
|
-
} = _ref;
|
|
16063
|
-
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
16064
|
-
const getDimensionsFn = this.getDimensions;
|
|
16065
|
-
return {
|
|
16066
|
-
reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
|
|
16067
|
-
floating: {
|
|
16068
|
-
x: 0,
|
|
16069
|
-
y: 0,
|
|
16070
|
-
...(await getDimensionsFn(floating))
|
|
16071
|
-
}
|
|
16072
|
-
};
|
|
16073
|
-
},
|
|
16074
|
-
getClientRects: element => Array.from(element.getClientRects()),
|
|
16075
|
-
isRTL: element => getComputedStyle$1(element).direction === 'rtl'
|
|
16144
|
+
isElement,
|
|
16145
|
+
isRTL
|
|
16076
16146
|
};
|
|
16077
16147
|
|
|
16148
|
+
// https://samthor.au/2021/observing-dom/
|
|
16149
|
+
function observeMove(element, onMove) {
|
|
16150
|
+
let io = null;
|
|
16151
|
+
let timeoutId;
|
|
16152
|
+
const root = getDocumentElement(element);
|
|
16153
|
+
function cleanup() {
|
|
16154
|
+
clearTimeout(timeoutId);
|
|
16155
|
+
io && io.disconnect();
|
|
16156
|
+
io = null;
|
|
16157
|
+
}
|
|
16158
|
+
function refresh(skip, threshold) {
|
|
16159
|
+
if (skip === void 0) {
|
|
16160
|
+
skip = false;
|
|
16161
|
+
}
|
|
16162
|
+
if (threshold === void 0) {
|
|
16163
|
+
threshold = 1;
|
|
16164
|
+
}
|
|
16165
|
+
cleanup();
|
|
16166
|
+
const {
|
|
16167
|
+
left,
|
|
16168
|
+
top,
|
|
16169
|
+
width,
|
|
16170
|
+
height
|
|
16171
|
+
} = element.getBoundingClientRect();
|
|
16172
|
+
if (!skip) {
|
|
16173
|
+
onMove();
|
|
16174
|
+
}
|
|
16175
|
+
if (!width || !height) {
|
|
16176
|
+
return;
|
|
16177
|
+
}
|
|
16178
|
+
const insetTop = floor(top);
|
|
16179
|
+
const insetRight = floor(root.clientWidth - (left + width));
|
|
16180
|
+
const insetBottom = floor(root.clientHeight - (top + height));
|
|
16181
|
+
const insetLeft = floor(left);
|
|
16182
|
+
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
|
|
16183
|
+
const options = {
|
|
16184
|
+
rootMargin,
|
|
16185
|
+
threshold: max(0, min(1, threshold)) || 1
|
|
16186
|
+
};
|
|
16187
|
+
let isFirstUpdate = true;
|
|
16188
|
+
function handleObserve(entries) {
|
|
16189
|
+
const ratio = entries[0].intersectionRatio;
|
|
16190
|
+
if (ratio !== threshold) {
|
|
16191
|
+
if (!isFirstUpdate) {
|
|
16192
|
+
return refresh();
|
|
16193
|
+
}
|
|
16194
|
+
if (!ratio) {
|
|
16195
|
+
timeoutId = setTimeout(() => {
|
|
16196
|
+
refresh(false, 1e-7);
|
|
16197
|
+
}, 100);
|
|
16198
|
+
} else {
|
|
16199
|
+
refresh(false, ratio);
|
|
16200
|
+
}
|
|
16201
|
+
}
|
|
16202
|
+
isFirstUpdate = false;
|
|
16203
|
+
}
|
|
16204
|
+
|
|
16205
|
+
// Older browsers don't support a `document` as the root and will throw an
|
|
16206
|
+
// error.
|
|
16207
|
+
try {
|
|
16208
|
+
io = new IntersectionObserver(handleObserve, {
|
|
16209
|
+
...options,
|
|
16210
|
+
// Handle <iframe>s
|
|
16211
|
+
root: root.ownerDocument
|
|
16212
|
+
});
|
|
16213
|
+
} catch (e) {
|
|
16214
|
+
io = new IntersectionObserver(handleObserve, options);
|
|
16215
|
+
}
|
|
16216
|
+
io.observe(element);
|
|
16217
|
+
}
|
|
16218
|
+
refresh(true);
|
|
16219
|
+
return cleanup;
|
|
16220
|
+
}
|
|
16221
|
+
|
|
16078
16222
|
/**
|
|
16079
16223
|
* Automatically updates the position of the floating element when necessary.
|
|
16080
16224
|
* Should only be called when the floating element is mounted on the DOM or
|
|
@@ -16088,29 +16232,41 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
16088
16232
|
options = {};
|
|
16089
16233
|
}
|
|
16090
16234
|
const {
|
|
16091
|
-
ancestorScroll
|
|
16235
|
+
ancestorScroll = true,
|
|
16092
16236
|
ancestorResize = true,
|
|
16093
|
-
elementResize =
|
|
16237
|
+
elementResize = typeof ResizeObserver === 'function',
|
|
16238
|
+
layoutShift = typeof IntersectionObserver === 'function',
|
|
16094
16239
|
animationFrame = false
|
|
16095
16240
|
} = options;
|
|
16096
|
-
const
|
|
16097
|
-
const ancestors = ancestorScroll || ancestorResize ? [...(
|
|
16241
|
+
const referenceEl = unwrapElement(reference);
|
|
16242
|
+
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
|
|
16098
16243
|
ancestors.forEach(ancestor => {
|
|
16099
16244
|
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
|
16100
16245
|
passive: true
|
|
16101
16246
|
});
|
|
16102
16247
|
ancestorResize && ancestor.addEventListener('resize', update);
|
|
16103
16248
|
});
|
|
16104
|
-
|
|
16249
|
+
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
16250
|
+
let reobserveFrame = -1;
|
|
16251
|
+
let resizeObserver = null;
|
|
16105
16252
|
if (elementResize) {
|
|
16106
|
-
|
|
16253
|
+
resizeObserver = new ResizeObserver(_ref => {
|
|
16254
|
+
let [firstEntry] = _ref;
|
|
16255
|
+
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
|
16256
|
+
// Prevent update loops when using the `size` middleware.
|
|
16257
|
+
// https://github.com/floating-ui/floating-ui/issues/1740
|
|
16258
|
+
resizeObserver.unobserve(floating);
|
|
16259
|
+
cancelAnimationFrame(reobserveFrame);
|
|
16260
|
+
reobserveFrame = requestAnimationFrame(() => {
|
|
16261
|
+
resizeObserver && resizeObserver.observe(floating);
|
|
16262
|
+
});
|
|
16263
|
+
}
|
|
16107
16264
|
update();
|
|
16108
16265
|
});
|
|
16109
|
-
|
|
16110
|
-
|
|
16111
|
-
observer.observe(reference.contextElement);
|
|
16266
|
+
if (referenceEl && !animationFrame) {
|
|
16267
|
+
resizeObserver.observe(referenceEl);
|
|
16112
16268
|
}
|
|
16113
|
-
|
|
16269
|
+
resizeObserver.observe(floating);
|
|
16114
16270
|
}
|
|
16115
16271
|
let frameId;
|
|
16116
16272
|
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
@@ -16127,13 +16283,13 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
16127
16283
|
}
|
|
16128
16284
|
update();
|
|
16129
16285
|
return () => {
|
|
16130
|
-
var _observer;
|
|
16131
16286
|
ancestors.forEach(ancestor => {
|
|
16132
16287
|
ancestorScroll && ancestor.removeEventListener('scroll', update);
|
|
16133
16288
|
ancestorResize && ancestor.removeEventListener('resize', update);
|
|
16134
16289
|
});
|
|
16135
|
-
|
|
16136
|
-
|
|
16290
|
+
cleanupIo && cleanupIo();
|
|
16291
|
+
resizeObserver && resizeObserver.disconnect();
|
|
16292
|
+
resizeObserver = null;
|
|
16137
16293
|
if (animationFrame) {
|
|
16138
16294
|
cancelAnimationFrame(frameId);
|
|
16139
16295
|
}
|
|
@@ -16196,7 +16352,7 @@ function deepEqual(a, b) {
|
|
|
16196
16352
|
return false;
|
|
16197
16353
|
}
|
|
16198
16354
|
for (i = length; i-- !== 0;) {
|
|
16199
|
-
if (!
|
|
16355
|
+
if (!{}.hasOwnProperty.call(b, keys[i])) {
|
|
16200
16356
|
return false;
|
|
16201
16357
|
}
|
|
16202
16358
|
}
|
|
@@ -16214,6 +16370,19 @@ function deepEqual(a, b) {
|
|
|
16214
16370
|
return a !== a && b !== b;
|
|
16215
16371
|
}
|
|
16216
16372
|
|
|
16373
|
+
function getDPR(element) {
|
|
16374
|
+
if (typeof window === 'undefined') {
|
|
16375
|
+
return 1;
|
|
16376
|
+
}
|
|
16377
|
+
const win = element.ownerDocument.defaultView || window;
|
|
16378
|
+
return win.devicePixelRatio || 1;
|
|
16379
|
+
}
|
|
16380
|
+
|
|
16381
|
+
function roundByDPR(element, value) {
|
|
16382
|
+
const dpr = getDPR(element);
|
|
16383
|
+
return Math.round(value * dpr) / dpr;
|
|
16384
|
+
}
|
|
16385
|
+
|
|
16217
16386
|
function useLatestRef$1(value) {
|
|
16218
16387
|
const ref = React__namespace.useRef(value);
|
|
16219
16388
|
index$1(() => {
|
|
@@ -16235,12 +16404,17 @@ function useFloating$1(options) {
|
|
|
16235
16404
|
strategy = 'absolute',
|
|
16236
16405
|
middleware = [],
|
|
16237
16406
|
platform,
|
|
16407
|
+
elements: {
|
|
16408
|
+
reference: externalReference,
|
|
16409
|
+
floating: externalFloating
|
|
16410
|
+
} = {},
|
|
16411
|
+
transform = true,
|
|
16238
16412
|
whileElementsMounted,
|
|
16239
16413
|
open
|
|
16240
16414
|
} = options;
|
|
16241
16415
|
const [data, setData] = React__namespace.useState({
|
|
16242
|
-
x:
|
|
16243
|
-
y:
|
|
16416
|
+
x: 0,
|
|
16417
|
+
y: 0,
|
|
16244
16418
|
strategy,
|
|
16245
16419
|
placement,
|
|
16246
16420
|
middlewareData: {},
|
|
@@ -16250,25 +16424,27 @@ function useFloating$1(options) {
|
|
|
16250
16424
|
if (!deepEqual(latestMiddleware, middleware)) {
|
|
16251
16425
|
setLatestMiddleware(middleware);
|
|
16252
16426
|
}
|
|
16253
|
-
const
|
|
16254
|
-
const
|
|
16255
|
-
const dataRef = React__namespace.useRef(data);
|
|
16256
|
-
const whileElementsMountedRef = useLatestRef$1(whileElementsMounted);
|
|
16257
|
-
const platformRef = useLatestRef$1(platform);
|
|
16258
|
-
const [reference, _setReference] = React__namespace.useState(null);
|
|
16259
|
-
const [floating, _setFloating] = React__namespace.useState(null);
|
|
16427
|
+
const [_reference, _setReference] = React__namespace.useState(null);
|
|
16428
|
+
const [_floating, _setFloating] = React__namespace.useState(null);
|
|
16260
16429
|
const setReference = React__namespace.useCallback(node => {
|
|
16261
|
-
if (referenceRef.current
|
|
16430
|
+
if (node != referenceRef.current) {
|
|
16262
16431
|
referenceRef.current = node;
|
|
16263
16432
|
_setReference(node);
|
|
16264
16433
|
}
|
|
16265
|
-
}, []);
|
|
16434
|
+
}, [_setReference]);
|
|
16266
16435
|
const setFloating = React__namespace.useCallback(node => {
|
|
16267
|
-
if (floatingRef.current
|
|
16436
|
+
if (node !== floatingRef.current) {
|
|
16268
16437
|
floatingRef.current = node;
|
|
16269
16438
|
_setFloating(node);
|
|
16270
16439
|
}
|
|
16271
|
-
}, []);
|
|
16440
|
+
}, [_setFloating]);
|
|
16441
|
+
const referenceEl = externalReference || _reference;
|
|
16442
|
+
const floatingEl = externalFloating || _floating;
|
|
16443
|
+
const referenceRef = React__namespace.useRef(null);
|
|
16444
|
+
const floatingRef = React__namespace.useRef(null);
|
|
16445
|
+
const dataRef = React__namespace.useRef(data);
|
|
16446
|
+
const whileElementsMountedRef = useLatestRef$1(whileElementsMounted);
|
|
16447
|
+
const platformRef = useLatestRef$1(platform);
|
|
16272
16448
|
const update = React__namespace.useCallback(() => {
|
|
16273
16449
|
if (!referenceRef.current || !floatingRef.current) {
|
|
16274
16450
|
return;
|
|
@@ -16311,14 +16487,16 @@ function useFloating$1(options) {
|
|
|
16311
16487
|
};
|
|
16312
16488
|
}, []);
|
|
16313
16489
|
index$1(() => {
|
|
16314
|
-
if (
|
|
16490
|
+
if (referenceEl) referenceRef.current = referenceEl;
|
|
16491
|
+
if (floatingEl) floatingRef.current = floatingEl;
|
|
16492
|
+
if (referenceEl && floatingEl) {
|
|
16315
16493
|
if (whileElementsMountedRef.current) {
|
|
16316
|
-
return whileElementsMountedRef.current(
|
|
16494
|
+
return whileElementsMountedRef.current(referenceEl, floatingEl, update);
|
|
16317
16495
|
} else {
|
|
16318
16496
|
update();
|
|
16319
16497
|
}
|
|
16320
16498
|
}
|
|
16321
|
-
}, [
|
|
16499
|
+
}, [referenceEl, floatingEl, update, whileElementsMountedRef]);
|
|
16322
16500
|
const refs = React__namespace.useMemo(() => ({
|
|
16323
16501
|
reference: referenceRef,
|
|
16324
16502
|
floating: floatingRef,
|
|
@@ -16326,147 +16504,44 @@ function useFloating$1(options) {
|
|
|
16326
16504
|
setFloating
|
|
16327
16505
|
}), [setReference, setFloating]);
|
|
16328
16506
|
const elements = React__namespace.useMemo(() => ({
|
|
16329
|
-
reference,
|
|
16330
|
-
floating
|
|
16331
|
-
}), [
|
|
16507
|
+
reference: referenceEl,
|
|
16508
|
+
floating: floatingEl
|
|
16509
|
+
}), [referenceEl, floatingEl]);
|
|
16510
|
+
const floatingStyles = React__namespace.useMemo(() => {
|
|
16511
|
+
const initialStyles = {
|
|
16512
|
+
position: strategy,
|
|
16513
|
+
left: 0,
|
|
16514
|
+
top: 0
|
|
16515
|
+
};
|
|
16516
|
+
if (!elements.floating) {
|
|
16517
|
+
return initialStyles;
|
|
16518
|
+
}
|
|
16519
|
+
const x = roundByDPR(elements.floating, data.x);
|
|
16520
|
+
const y = roundByDPR(elements.floating, data.y);
|
|
16521
|
+
if (transform) {
|
|
16522
|
+
return {
|
|
16523
|
+
...initialStyles,
|
|
16524
|
+
transform: "translate(" + x + "px, " + y + "px)",
|
|
16525
|
+
...(getDPR(elements.floating) >= 1.5 && {
|
|
16526
|
+
willChange: 'transform'
|
|
16527
|
+
})
|
|
16528
|
+
};
|
|
16529
|
+
}
|
|
16530
|
+
return {
|
|
16531
|
+
position: strategy,
|
|
16532
|
+
left: x,
|
|
16533
|
+
top: y
|
|
16534
|
+
};
|
|
16535
|
+
}, [strategy, transform, elements.floating, data.x, data.y]);
|
|
16332
16536
|
return React__namespace.useMemo(() => ({
|
|
16333
16537
|
...data,
|
|
16334
16538
|
update,
|
|
16335
16539
|
refs,
|
|
16336
16540
|
elements,
|
|
16337
|
-
|
|
16338
|
-
|
|
16339
|
-
}), [data, update, refs, elements, setReference, setFloating]);
|
|
16541
|
+
floatingStyles
|
|
16542
|
+
}), [data, update, refs, elements, floatingStyles]);
|
|
16340
16543
|
}
|
|
16341
16544
|
|
|
16342
|
-
var getDefaultParent = function (originalTarget) {
|
|
16343
|
-
if (typeof document === 'undefined') {
|
|
16344
|
-
return null;
|
|
16345
|
-
}
|
|
16346
|
-
var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget;
|
|
16347
|
-
return sampleTarget.ownerDocument.body;
|
|
16348
|
-
};
|
|
16349
|
-
var counterMap = new WeakMap();
|
|
16350
|
-
var uncontrolledNodes = new WeakMap();
|
|
16351
|
-
var markerMap = {};
|
|
16352
|
-
var lockCount = 0;
|
|
16353
|
-
var unwrapHost = function (node) {
|
|
16354
|
-
return node && (node.host || unwrapHost(node.parentNode));
|
|
16355
|
-
};
|
|
16356
|
-
var correctTargets = function (parent, targets) {
|
|
16357
|
-
return targets.map(function (target) {
|
|
16358
|
-
if (parent.contains(target)) {
|
|
16359
|
-
return target;
|
|
16360
|
-
}
|
|
16361
|
-
var correctedTarget = unwrapHost(target);
|
|
16362
|
-
if (correctedTarget && parent.contains(correctedTarget)) {
|
|
16363
|
-
return correctedTarget;
|
|
16364
|
-
}
|
|
16365
|
-
console.error('aria-hidden', target, 'in not contained inside', parent, '. Doing nothing');
|
|
16366
|
-
return null;
|
|
16367
|
-
}).filter(function (x) { return Boolean(x); });
|
|
16368
|
-
};
|
|
16369
|
-
/**
|
|
16370
|
-
* Marks everything except given node(or nodes) as aria-hidden
|
|
16371
|
-
* @param {Element | Element[]} originalTarget - elements to keep on the page
|
|
16372
|
-
* @param [parentNode] - top element, defaults to document.body
|
|
16373
|
-
* @param {String} [markerName] - a special attribute to mark every node
|
|
16374
|
-
* @param {String} [controlAttribute] - html Attribute to control
|
|
16375
|
-
* @return {Undo} undo command
|
|
16376
|
-
*/
|
|
16377
|
-
var applyAttributeToOthers = function (originalTarget, parentNode, markerName, controlAttribute) {
|
|
16378
|
-
var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
|
|
16379
|
-
if (!markerMap[markerName]) {
|
|
16380
|
-
markerMap[markerName] = new WeakMap();
|
|
16381
|
-
}
|
|
16382
|
-
var markerCounter = markerMap[markerName];
|
|
16383
|
-
var hiddenNodes = [];
|
|
16384
|
-
var elementsToKeep = new Set();
|
|
16385
|
-
var elementsToStop = new Set(targets);
|
|
16386
|
-
var keep = function (el) {
|
|
16387
|
-
if (!el || elementsToKeep.has(el)) {
|
|
16388
|
-
return;
|
|
16389
|
-
}
|
|
16390
|
-
elementsToKeep.add(el);
|
|
16391
|
-
keep(el.parentNode);
|
|
16392
|
-
};
|
|
16393
|
-
targets.forEach(keep);
|
|
16394
|
-
var deep = function (parent) {
|
|
16395
|
-
if (!parent || elementsToStop.has(parent)) {
|
|
16396
|
-
return;
|
|
16397
|
-
}
|
|
16398
|
-
Array.prototype.forEach.call(parent.children, function (node) {
|
|
16399
|
-
if (elementsToKeep.has(node)) {
|
|
16400
|
-
deep(node);
|
|
16401
|
-
}
|
|
16402
|
-
else {
|
|
16403
|
-
var attr = node.getAttribute(controlAttribute);
|
|
16404
|
-
var alreadyHidden = attr !== null && attr !== 'false';
|
|
16405
|
-
var counterValue = (counterMap.get(node) || 0) + 1;
|
|
16406
|
-
var markerValue = (markerCounter.get(node) || 0) + 1;
|
|
16407
|
-
counterMap.set(node, counterValue);
|
|
16408
|
-
markerCounter.set(node, markerValue);
|
|
16409
|
-
hiddenNodes.push(node);
|
|
16410
|
-
if (counterValue === 1 && alreadyHidden) {
|
|
16411
|
-
uncontrolledNodes.set(node, true);
|
|
16412
|
-
}
|
|
16413
|
-
if (markerValue === 1) {
|
|
16414
|
-
node.setAttribute(markerName, 'true');
|
|
16415
|
-
}
|
|
16416
|
-
if (!alreadyHidden) {
|
|
16417
|
-
node.setAttribute(controlAttribute, 'true');
|
|
16418
|
-
}
|
|
16419
|
-
}
|
|
16420
|
-
});
|
|
16421
|
-
};
|
|
16422
|
-
deep(parentNode);
|
|
16423
|
-
elementsToKeep.clear();
|
|
16424
|
-
lockCount++;
|
|
16425
|
-
return function () {
|
|
16426
|
-
hiddenNodes.forEach(function (node) {
|
|
16427
|
-
var counterValue = counterMap.get(node) - 1;
|
|
16428
|
-
var markerValue = markerCounter.get(node) - 1;
|
|
16429
|
-
counterMap.set(node, counterValue);
|
|
16430
|
-
markerCounter.set(node, markerValue);
|
|
16431
|
-
if (!counterValue) {
|
|
16432
|
-
if (!uncontrolledNodes.has(node)) {
|
|
16433
|
-
node.removeAttribute(controlAttribute);
|
|
16434
|
-
}
|
|
16435
|
-
uncontrolledNodes.delete(node);
|
|
16436
|
-
}
|
|
16437
|
-
if (!markerValue) {
|
|
16438
|
-
node.removeAttribute(markerName);
|
|
16439
|
-
}
|
|
16440
|
-
});
|
|
16441
|
-
lockCount--;
|
|
16442
|
-
if (!lockCount) {
|
|
16443
|
-
// clear
|
|
16444
|
-
counterMap = new WeakMap();
|
|
16445
|
-
counterMap = new WeakMap();
|
|
16446
|
-
uncontrolledNodes = new WeakMap();
|
|
16447
|
-
markerMap = {};
|
|
16448
|
-
}
|
|
16449
|
-
};
|
|
16450
|
-
};
|
|
16451
|
-
/**
|
|
16452
|
-
* Marks everything except given node(or nodes) as aria-hidden
|
|
16453
|
-
* @param {Element | Element[]} originalTarget - elements to keep on the page
|
|
16454
|
-
* @param [parentNode] - top element, defaults to document.body
|
|
16455
|
-
* @param {String} [markerName] - a special attribute to mark every node
|
|
16456
|
-
* @return {Undo} undo command
|
|
16457
|
-
*/
|
|
16458
|
-
var hideOthers = function (originalTarget, parentNode, markerName) {
|
|
16459
|
-
if (markerName === void 0) { markerName = 'data-aria-hidden'; }
|
|
16460
|
-
var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
|
|
16461
|
-
var activeParentNode = parentNode || getDefaultParent(originalTarget);
|
|
16462
|
-
if (!activeParentNode) {
|
|
16463
|
-
return function () { return null; };
|
|
16464
|
-
}
|
|
16465
|
-
// we should not hide ariaLive elements - https://github.com/theKashey/aria-hidden/issues/10
|
|
16466
|
-
targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live]')));
|
|
16467
|
-
return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden');
|
|
16468
|
-
};
|
|
16469
|
-
|
|
16470
16545
|
/*!
|
|
16471
16546
|
* tabbable 6.0.1
|
|
16472
16547
|
* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
|
|
@@ -16889,8 +16964,53 @@ var tabbable = function tabbable(el, options) {
|
|
|
16889
16964
|
return sortByOrder(candidates);
|
|
16890
16965
|
};
|
|
16891
16966
|
|
|
16967
|
+
/**
|
|
16968
|
+
* Merges an array of refs into a single memoized callback ref or `null`.
|
|
16969
|
+
* @see https://floating-ui.com/docs/useMergeRefs
|
|
16970
|
+
*/
|
|
16971
|
+
function useMergeRefs(refs) {
|
|
16972
|
+
return React__namespace.useMemo(() => {
|
|
16973
|
+
if (refs.every(ref => ref == null)) {
|
|
16974
|
+
return null;
|
|
16975
|
+
}
|
|
16976
|
+
return value => {
|
|
16977
|
+
refs.forEach(ref => {
|
|
16978
|
+
if (typeof ref === 'function') {
|
|
16979
|
+
ref(value);
|
|
16980
|
+
} else if (ref != null) {
|
|
16981
|
+
ref.current = value;
|
|
16982
|
+
}
|
|
16983
|
+
});
|
|
16984
|
+
};
|
|
16985
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
16986
|
+
}, refs);
|
|
16987
|
+
}
|
|
16988
|
+
|
|
16989
|
+
let rafId = 0;
|
|
16990
|
+
function enqueueFocus(el, options) {
|
|
16991
|
+
if (options === void 0) {
|
|
16992
|
+
options = {};
|
|
16993
|
+
}
|
|
16994
|
+
const {
|
|
16995
|
+
preventScroll = false,
|
|
16996
|
+
cancelPrevious = true,
|
|
16997
|
+
sync = false
|
|
16998
|
+
} = options;
|
|
16999
|
+
cancelPrevious && cancelAnimationFrame(rafId);
|
|
17000
|
+
const exec = () => el == null ? void 0 : el.focus({
|
|
17001
|
+
preventScroll
|
|
17002
|
+
});
|
|
17003
|
+
if (sync) {
|
|
17004
|
+
exec();
|
|
17005
|
+
} else {
|
|
17006
|
+
rafId = requestAnimationFrame(exec);
|
|
17007
|
+
}
|
|
17008
|
+
}
|
|
17009
|
+
|
|
17010
|
+
var index = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
17011
|
+
|
|
16892
17012
|
function _extends() {
|
|
16893
|
-
_extends = Object.assign
|
|
17013
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
16894
17014
|
for (var i = 1; i < arguments.length; i++) {
|
|
16895
17015
|
var source = arguments[i];
|
|
16896
17016
|
for (var key in source) {
|
|
@@ -16904,8 +17024,6 @@ function _extends() {
|
|
|
16904
17024
|
return _extends.apply(this, arguments);
|
|
16905
17025
|
}
|
|
16906
17026
|
|
|
16907
|
-
var index = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
16908
|
-
|
|
16909
17027
|
let serverHandoffComplete = false;
|
|
16910
17028
|
let count = 0;
|
|
16911
17029
|
const genId = () => "floating-ui-" + count++;
|
|
@@ -16961,105 +17079,8 @@ const useFloatingParentNodeId = () => {
|
|
|
16961
17079
|
};
|
|
16962
17080
|
const useFloatingTree = () => React__namespace.useContext(FloatingTreeContext);
|
|
16963
17081
|
|
|
16964
|
-
function
|
|
16965
|
-
return
|
|
16966
|
-
}
|
|
16967
|
-
|
|
16968
|
-
// Avoid Chrome DevTools blue warning.
|
|
16969
|
-
function getPlatform() {
|
|
16970
|
-
const uaData = navigator.userAgentData;
|
|
16971
|
-
if (uaData != null && uaData.platform) {
|
|
16972
|
-
return uaData.platform;
|
|
16973
|
-
}
|
|
16974
|
-
return navigator.platform;
|
|
16975
|
-
}
|
|
16976
|
-
function getUserAgent() {
|
|
16977
|
-
const uaData = navigator.userAgentData;
|
|
16978
|
-
if (uaData && Array.isArray(uaData.brands)) {
|
|
16979
|
-
return uaData.brands.map(_ref => {
|
|
16980
|
-
let {
|
|
16981
|
-
brand,
|
|
16982
|
-
version
|
|
16983
|
-
} = _ref;
|
|
16984
|
-
return brand + "/" + version;
|
|
16985
|
-
}).join(' ');
|
|
16986
|
-
}
|
|
16987
|
-
return navigator.userAgent;
|
|
16988
|
-
}
|
|
16989
|
-
|
|
16990
|
-
function getWindow(value) {
|
|
16991
|
-
return getDocument(value).defaultView || window;
|
|
16992
|
-
}
|
|
16993
|
-
function isElement(value) {
|
|
16994
|
-
return value ? value instanceof getWindow(value).Element : false;
|
|
16995
|
-
}
|
|
16996
|
-
function isHTMLElement(value) {
|
|
16997
|
-
return value ? value instanceof getWindow(value).HTMLElement : false;
|
|
16998
|
-
}
|
|
16999
|
-
function isShadowRoot(node) {
|
|
17000
|
-
// Browsers without `ShadowRoot` support
|
|
17001
|
-
if (typeof ShadowRoot === 'undefined') {
|
|
17002
|
-
return false;
|
|
17003
|
-
}
|
|
17004
|
-
const OwnElement = getWindow(node).ShadowRoot;
|
|
17005
|
-
return node instanceof OwnElement || node instanceof ShadowRoot;
|
|
17006
|
-
}
|
|
17007
|
-
|
|
17008
|
-
// License: https://github.com/adobe/react-spectrum/blob/b35d5c02fe900badccd0cf1a8f23bb593419f238/packages/@react-aria/utils/src/isVirtualEvent.ts
|
|
17009
|
-
function isVirtualClick(event) {
|
|
17010
|
-
if (event.mozInputSource === 0 && event.isTrusted) {
|
|
17011
|
-
return true;
|
|
17012
|
-
}
|
|
17013
|
-
const androidRe = /Android/i;
|
|
17014
|
-
if ((androidRe.test(getPlatform()) || androidRe.test(getUserAgent())) && event.pointerType) {
|
|
17015
|
-
return event.type === 'click' && event.buttons === 1;
|
|
17016
|
-
}
|
|
17017
|
-
return event.detail === 0 && !event.pointerType;
|
|
17018
|
-
}
|
|
17019
|
-
function isVirtualPointerEvent(event) {
|
|
17020
|
-
return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType !== 'mouse' ||
|
|
17021
|
-
// iOS VoiceOver returns 0.333• for width/height.
|
|
17022
|
-
event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0;
|
|
17023
|
-
}
|
|
17024
|
-
function isSafari() {
|
|
17025
|
-
// Chrome DevTools does not complain about navigator.vendor
|
|
17026
|
-
return /apple/i.test(navigator.vendor);
|
|
17027
|
-
}
|
|
17028
|
-
function isMouseLikePointerType(pointerType, strict) {
|
|
17029
|
-
// On some Linux machines with Chromium, mouse inputs return a `pointerType`
|
|
17030
|
-
// of "pen": https://github.com/floating-ui/floating-ui/issues/2015
|
|
17031
|
-
const values = ['mouse', 'pen'];
|
|
17032
|
-
if (!strict) {
|
|
17033
|
-
values.push('', undefined);
|
|
17034
|
-
}
|
|
17035
|
-
return values.includes(pointerType);
|
|
17036
|
-
}
|
|
17037
|
-
|
|
17038
|
-
function contains(parent, child) {
|
|
17039
|
-
if (!parent || !child) {
|
|
17040
|
-
return false;
|
|
17041
|
-
}
|
|
17042
|
-
const rootNode = child.getRootNode && child.getRootNode();
|
|
17043
|
-
|
|
17044
|
-
// First, attempt with faster native method
|
|
17045
|
-
if (parent.contains(child)) {
|
|
17046
|
-
return true;
|
|
17047
|
-
}
|
|
17048
|
-
|
|
17049
|
-
// then fallback to custom implementation with Shadow DOM support
|
|
17050
|
-
if (rootNode && isShadowRoot(rootNode)) {
|
|
17051
|
-
let next = child;
|
|
17052
|
-
while (next) {
|
|
17053
|
-
if (parent === next) {
|
|
17054
|
-
return true;
|
|
17055
|
-
}
|
|
17056
|
-
// @ts-ignore
|
|
17057
|
-
next = next.parentNode || next.host;
|
|
17058
|
-
}
|
|
17059
|
-
}
|
|
17060
|
-
|
|
17061
|
-
// Give up, the result is false
|
|
17062
|
-
return false;
|
|
17082
|
+
function createAttribute(name) {
|
|
17083
|
+
return "data-floating-ui-" + name;
|
|
17063
17084
|
}
|
|
17064
17085
|
|
|
17065
17086
|
function useLatestRef(value) {
|
|
@@ -17070,7 +17091,7 @@ function useLatestRef(value) {
|
|
|
17070
17091
|
return ref;
|
|
17071
17092
|
}
|
|
17072
17093
|
|
|
17073
|
-
const safePolygonIdentifier = '
|
|
17094
|
+
const safePolygonIdentifier = /*#__PURE__*/createAttribute('safe-polygon');
|
|
17074
17095
|
function getDelay(value, prop, pointerType) {
|
|
17075
17096
|
if (pointerType && !isMouseLikePointerType(pointerType)) {
|
|
17076
17097
|
return 0;
|
|
@@ -17085,7 +17106,7 @@ function getDelay(value, prop, pointerType) {
|
|
|
17085
17106
|
* CSS `:hover`.
|
|
17086
17107
|
* @see https://floating-ui.com/docs/useHover
|
|
17087
17108
|
*/
|
|
17088
|
-
|
|
17109
|
+
function useHover$1(context, props) {
|
|
17089
17110
|
if (props === void 0) {
|
|
17090
17111
|
props = {};
|
|
17091
17112
|
}
|
|
@@ -17145,9 +17166,9 @@ const useHover$1 = function (context, props) {
|
|
|
17145
17166
|
if (!enabled || !handleCloseRef.current || !open) {
|
|
17146
17167
|
return;
|
|
17147
17168
|
}
|
|
17148
|
-
function onLeave() {
|
|
17169
|
+
function onLeave(event) {
|
|
17149
17170
|
if (isHoverOpen()) {
|
|
17150
|
-
onOpenChange(false);
|
|
17171
|
+
onOpenChange(false, event);
|
|
17151
17172
|
}
|
|
17152
17173
|
}
|
|
17153
17174
|
const html = getDocument(floating).documentElement;
|
|
@@ -17156,17 +17177,17 @@ const useHover$1 = function (context, props) {
|
|
|
17156
17177
|
html.removeEventListener('mouseleave', onLeave);
|
|
17157
17178
|
};
|
|
17158
17179
|
}, [floating, open, onOpenChange, enabled, handleCloseRef, dataRef, isHoverOpen]);
|
|
17159
|
-
const closeWithDelay = React__namespace.useCallback(function (runElseBranch) {
|
|
17180
|
+
const closeWithDelay = React__namespace.useCallback(function (event, runElseBranch) {
|
|
17160
17181
|
if (runElseBranch === void 0) {
|
|
17161
17182
|
runElseBranch = true;
|
|
17162
17183
|
}
|
|
17163
17184
|
const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
|
|
17164
17185
|
if (closeDelay && !handlerRef.current) {
|
|
17165
17186
|
clearTimeout(timeoutRef.current);
|
|
17166
|
-
timeoutRef.current = setTimeout(() => onOpenChange(false), closeDelay);
|
|
17187
|
+
timeoutRef.current = setTimeout(() => onOpenChange(false, event), closeDelay);
|
|
17167
17188
|
} else if (runElseBranch) {
|
|
17168
17189
|
clearTimeout(timeoutRef.current);
|
|
17169
|
-
onOpenChange(false);
|
|
17190
|
+
onOpenChange(false, event);
|
|
17170
17191
|
}
|
|
17171
17192
|
}, [delayRef, onOpenChange]);
|
|
17172
17193
|
const cleanupMouseMoveHandler = React__namespace.useCallback(() => {
|
|
@@ -17198,14 +17219,13 @@ const useHover$1 = function (context, props) {
|
|
|
17198
17219
|
if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current) || restMs > 0 && getDelay(delayRef.current, 'open') === 0) {
|
|
17199
17220
|
return;
|
|
17200
17221
|
}
|
|
17201
|
-
dataRef.current.openEvent = event;
|
|
17202
17222
|
const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
|
|
17203
17223
|
if (openDelay) {
|
|
17204
17224
|
timeoutRef.current = setTimeout(() => {
|
|
17205
|
-
onOpenChange(true);
|
|
17225
|
+
onOpenChange(true, event);
|
|
17206
17226
|
}, openDelay);
|
|
17207
17227
|
} else {
|
|
17208
|
-
onOpenChange(true);
|
|
17228
|
+
onOpenChange(true, event);
|
|
17209
17229
|
}
|
|
17210
17230
|
}
|
|
17211
17231
|
function onMouseLeave(event) {
|
|
@@ -17228,7 +17248,8 @@ const useHover$1 = function (context, props) {
|
|
|
17228
17248
|
onClose() {
|
|
17229
17249
|
clearPointerEvents();
|
|
17230
17250
|
cleanupMouseMoveHandler();
|
|
17231
|
-
|
|
17251
|
+
// Should the event expose that it was closed by `safePolygon`?
|
|
17252
|
+
closeWithDelay(event);
|
|
17232
17253
|
}
|
|
17233
17254
|
});
|
|
17234
17255
|
const handler = handlerRef.current;
|
|
@@ -17244,7 +17265,7 @@ const useHover$1 = function (context, props) {
|
|
|
17244
17265
|
// consistently.
|
|
17245
17266
|
const shouldClose = pointerTypeRef.current === 'touch' ? !contains(floating, event.relatedTarget) : true;
|
|
17246
17267
|
if (shouldClose) {
|
|
17247
|
-
closeWithDelay();
|
|
17268
|
+
closeWithDelay(event);
|
|
17248
17269
|
}
|
|
17249
17270
|
}
|
|
17250
17271
|
|
|
@@ -17263,7 +17284,7 @@ const useHover$1 = function (context, props) {
|
|
|
17263
17284
|
onClose() {
|
|
17264
17285
|
clearPointerEvents();
|
|
17265
17286
|
cleanupMouseMoveHandler();
|
|
17266
|
-
closeWithDelay();
|
|
17287
|
+
closeWithDelay(event);
|
|
17267
17288
|
}
|
|
17268
17289
|
})(event);
|
|
17269
17290
|
}
|
|
@@ -17330,7 +17351,7 @@ const useHover$1 = function (context, props) {
|
|
|
17330
17351
|
clearTimeout(restTimeoutRef.current);
|
|
17331
17352
|
clearPointerEvents();
|
|
17332
17353
|
};
|
|
17333
|
-
}, [enabled, cleanupMouseMoveHandler, clearPointerEvents]);
|
|
17354
|
+
}, [enabled, domReference, cleanupMouseMoveHandler, clearPointerEvents]);
|
|
17334
17355
|
return React__namespace.useMemo(() => {
|
|
17335
17356
|
if (!enabled) {
|
|
17336
17357
|
return {};
|
|
@@ -17342,14 +17363,14 @@ const useHover$1 = function (context, props) {
|
|
|
17342
17363
|
reference: {
|
|
17343
17364
|
onPointerDown: setPointerRef,
|
|
17344
17365
|
onPointerEnter: setPointerRef,
|
|
17345
|
-
onMouseMove() {
|
|
17366
|
+
onMouseMove(event) {
|
|
17346
17367
|
if (open || restMs === 0) {
|
|
17347
17368
|
return;
|
|
17348
17369
|
}
|
|
17349
17370
|
clearTimeout(restTimeoutRef.current);
|
|
17350
17371
|
restTimeoutRef.current = setTimeout(() => {
|
|
17351
17372
|
if (!blockMouseMoveRef.current) {
|
|
17352
|
-
onOpenChange(true);
|
|
17373
|
+
onOpenChange(true, event.nativeEvent);
|
|
17353
17374
|
}
|
|
17354
17375
|
}, restMs);
|
|
17355
17376
|
}
|
|
@@ -17358,51 +17379,18 @@ const useHover$1 = function (context, props) {
|
|
|
17358
17379
|
onMouseEnter() {
|
|
17359
17380
|
clearTimeout(timeoutRef.current);
|
|
17360
17381
|
},
|
|
17361
|
-
onMouseLeave() {
|
|
17382
|
+
onMouseLeave(event) {
|
|
17362
17383
|
events.emit('dismiss', {
|
|
17363
17384
|
type: 'mouseLeave',
|
|
17364
17385
|
data: {
|
|
17365
17386
|
returnFocus: false
|
|
17366
17387
|
}
|
|
17367
17388
|
});
|
|
17368
|
-
closeWithDelay(false);
|
|
17389
|
+
closeWithDelay(event.nativeEvent, false);
|
|
17369
17390
|
}
|
|
17370
17391
|
}
|
|
17371
17392
|
};
|
|
17372
17393
|
}, [events, enabled, restMs, open, onOpenChange, closeWithDelay]);
|
|
17373
|
-
};
|
|
17374
|
-
|
|
17375
|
-
/**
|
|
17376
|
-
* Find the real active element. Traverses into shadowRoots.
|
|
17377
|
-
*/
|
|
17378
|
-
function activeElement(doc) {
|
|
17379
|
-
let activeElement = doc.activeElement;
|
|
17380
|
-
while (((_activeElement = activeElement) == null ? void 0 : (_activeElement$shadow = _activeElement.shadowRoot) == null ? void 0 : _activeElement$shadow.activeElement) != null) {
|
|
17381
|
-
var _activeElement, _activeElement$shadow;
|
|
17382
|
-
activeElement = activeElement.shadowRoot.activeElement;
|
|
17383
|
-
}
|
|
17384
|
-
return activeElement;
|
|
17385
|
-
}
|
|
17386
|
-
|
|
17387
|
-
let rafId = 0;
|
|
17388
|
-
function enqueueFocus(el, options) {
|
|
17389
|
-
if (options === void 0) {
|
|
17390
|
-
options = {};
|
|
17391
|
-
}
|
|
17392
|
-
const {
|
|
17393
|
-
preventScroll = false,
|
|
17394
|
-
cancelPrevious = true,
|
|
17395
|
-
sync = false
|
|
17396
|
-
} = options;
|
|
17397
|
-
cancelPrevious && cancelAnimationFrame(rafId);
|
|
17398
|
-
const exec = () => el == null ? void 0 : el.focus({
|
|
17399
|
-
preventScroll
|
|
17400
|
-
});
|
|
17401
|
-
if (sync) {
|
|
17402
|
-
exec();
|
|
17403
|
-
} else {
|
|
17404
|
-
rafId = requestAnimationFrame(exec);
|
|
17405
|
-
}
|
|
17406
17394
|
}
|
|
17407
17395
|
|
|
17408
17396
|
function getAncestors(nodes, id) {
|
|
@@ -17438,24 +17426,107 @@ function getChildren(nodes, id) {
|
|
|
17438
17426
|
return allChildren;
|
|
17439
17427
|
}
|
|
17440
17428
|
|
|
17441
|
-
|
|
17442
|
-
|
|
17443
|
-
|
|
17429
|
+
// Modified to add conditional `aria-hidden` support:
|
|
17430
|
+
// https://github.com/theKashey/aria-hidden/blob/9220c8f4a4fd35f63bee5510a9f41a37264382d4/src/index.ts
|
|
17431
|
+
let counterMap = /*#__PURE__*/new WeakMap();
|
|
17432
|
+
let uncontrolledElementsSet = /*#__PURE__*/new WeakSet();
|
|
17433
|
+
let markerMap = {};
|
|
17434
|
+
let lockCount = 0;
|
|
17435
|
+
const supportsInert = () => typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
|
|
17436
|
+
const unwrapHost = node => node && (node.host || unwrapHost(node.parentNode));
|
|
17437
|
+
const correctElements = (parent, targets) => targets.map(target => {
|
|
17438
|
+
if (parent.contains(target)) {
|
|
17439
|
+
return target;
|
|
17444
17440
|
}
|
|
17445
|
-
|
|
17446
|
-
|
|
17447
|
-
|
|
17448
|
-
|
|
17449
|
-
|
|
17450
|
-
|
|
17451
|
-
|
|
17452
|
-
|
|
17453
|
-
|
|
17441
|
+
const correctedTarget = unwrapHost(target);
|
|
17442
|
+
if (parent.contains(correctedTarget)) {
|
|
17443
|
+
return correctedTarget;
|
|
17444
|
+
}
|
|
17445
|
+
return null;
|
|
17446
|
+
}).filter(x => x != null);
|
|
17447
|
+
function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, inert) {
|
|
17448
|
+
const markerName = 'data-floating-ui-inert';
|
|
17449
|
+
const controlAttribute = inert ? 'inert' : ariaHidden ? 'aria-hidden' : null;
|
|
17450
|
+
const avoidElements = correctElements(body, uncorrectedAvoidElements);
|
|
17451
|
+
const elementsToKeep = new Set();
|
|
17452
|
+
const elementsToStop = new Set(avoidElements);
|
|
17453
|
+
const hiddenElements = [];
|
|
17454
|
+
if (!markerMap[markerName]) {
|
|
17455
|
+
markerMap[markerName] = new WeakMap();
|
|
17456
|
+
}
|
|
17457
|
+
const markerCounter = markerMap[markerName];
|
|
17458
|
+
avoidElements.forEach(keep);
|
|
17459
|
+
deep(body);
|
|
17460
|
+
elementsToKeep.clear();
|
|
17461
|
+
function keep(el) {
|
|
17462
|
+
if (!el || elementsToKeep.has(el)) {
|
|
17463
|
+
return;
|
|
17464
|
+
}
|
|
17465
|
+
elementsToKeep.add(el);
|
|
17466
|
+
el.parentNode && keep(el.parentNode);
|
|
17467
|
+
}
|
|
17468
|
+
function deep(parent) {
|
|
17469
|
+
if (!parent || elementsToStop.has(parent)) {
|
|
17470
|
+
return;
|
|
17471
|
+
}
|
|
17472
|
+
Array.prototype.forEach.call(parent.children, node => {
|
|
17473
|
+
if (elementsToKeep.has(node)) {
|
|
17474
|
+
deep(node);
|
|
17475
|
+
} else {
|
|
17476
|
+
const attr = controlAttribute ? node.getAttribute(controlAttribute) : null;
|
|
17477
|
+
const alreadyHidden = attr !== null && attr !== 'false';
|
|
17478
|
+
const counterValue = (counterMap.get(node) || 0) + 1;
|
|
17479
|
+
const markerValue = (markerCounter.get(node) || 0) + 1;
|
|
17480
|
+
counterMap.set(node, counterValue);
|
|
17481
|
+
markerCounter.set(node, markerValue);
|
|
17482
|
+
hiddenElements.push(node);
|
|
17483
|
+
if (counterValue === 1 && alreadyHidden) {
|
|
17484
|
+
uncontrolledElementsSet.add(node);
|
|
17485
|
+
}
|
|
17486
|
+
if (markerValue === 1) {
|
|
17487
|
+
node.setAttribute(markerName, '');
|
|
17488
|
+
}
|
|
17489
|
+
if (!alreadyHidden && controlAttribute) {
|
|
17490
|
+
node.setAttribute(controlAttribute, 'true');
|
|
17491
|
+
}
|
|
17492
|
+
}
|
|
17493
|
+
});
|
|
17494
|
+
}
|
|
17495
|
+
lockCount++;
|
|
17496
|
+
return () => {
|
|
17497
|
+
hiddenElements.forEach(element => {
|
|
17498
|
+
const counterValue = (counterMap.get(element) || 0) - 1;
|
|
17499
|
+
const markerValue = (markerCounter.get(element) || 0) - 1;
|
|
17500
|
+
counterMap.set(element, counterValue);
|
|
17501
|
+
markerCounter.set(element, markerValue);
|
|
17502
|
+
if (!counterValue) {
|
|
17503
|
+
if (!uncontrolledElementsSet.has(element) && controlAttribute) {
|
|
17504
|
+
element.removeAttribute(controlAttribute);
|
|
17505
|
+
}
|
|
17506
|
+
uncontrolledElementsSet.delete(element);
|
|
17507
|
+
}
|
|
17508
|
+
if (!markerValue) {
|
|
17509
|
+
element.removeAttribute(markerName);
|
|
17510
|
+
}
|
|
17511
|
+
});
|
|
17512
|
+
lockCount--;
|
|
17513
|
+
if (!lockCount) {
|
|
17514
|
+
counterMap = new WeakMap();
|
|
17515
|
+
counterMap = new WeakMap();
|
|
17516
|
+
uncontrolledElementsSet = new WeakSet();
|
|
17517
|
+
markerMap = {};
|
|
17518
|
+
}
|
|
17519
|
+
};
|
|
17454
17520
|
}
|
|
17455
|
-
|
|
17456
|
-
|
|
17457
|
-
|
|
17458
|
-
|
|
17521
|
+
function markOthers(avoidElements, ariaHidden, inert) {
|
|
17522
|
+
if (ariaHidden === void 0) {
|
|
17523
|
+
ariaHidden = false;
|
|
17524
|
+
}
|
|
17525
|
+
if (inert === void 0) {
|
|
17526
|
+
inert = false;
|
|
17527
|
+
}
|
|
17528
|
+
const body = getDocument(avoidElements[0]).body;
|
|
17529
|
+
return applyAttributeToOthers(avoidElements.concat(Array.from(body.querySelectorAll('[aria-live]'))), body, ariaHidden, inert);
|
|
17459
17530
|
}
|
|
17460
17531
|
|
|
17461
17532
|
const getTabbableOptions = () => ({
|
|
@@ -17545,20 +17616,20 @@ const FocusGuard = /*#__PURE__*/React__namespace.forwardRef(function FocusGuard(
|
|
|
17545
17616
|
document.removeEventListener('keydown', setActiveElementOnTab);
|
|
17546
17617
|
};
|
|
17547
17618
|
}, []);
|
|
17548
|
-
|
|
17549
|
-
ref
|
|
17550
|
-
tabIndex: 0
|
|
17619
|
+
const restProps = {
|
|
17620
|
+
ref,
|
|
17621
|
+
tabIndex: 0,
|
|
17551
17622
|
// Role is only for VoiceOver
|
|
17552
|
-
,
|
|
17553
|
-
role:
|
|
17554
|
-
|
|
17555
|
-
"data-floating-ui-focus-guard": "",
|
|
17623
|
+
role,
|
|
17624
|
+
'aria-hidden': role ? undefined : true,
|
|
17625
|
+
[createAttribute('focus-guard')]: '',
|
|
17556
17626
|
style: HIDDEN_STYLES
|
|
17557
|
-
}
|
|
17627
|
+
};
|
|
17628
|
+
return /*#__PURE__*/React__namespace.createElement("span", _extends({}, props, restProps));
|
|
17558
17629
|
});
|
|
17559
17630
|
|
|
17560
17631
|
const PortalContext = /*#__PURE__*/React__namespace.createContext(null);
|
|
17561
|
-
|
|
17632
|
+
function useFloatingPortalNode(_temp) {
|
|
17562
17633
|
let {
|
|
17563
17634
|
id,
|
|
17564
17635
|
root
|
|
@@ -17566,20 +17637,39 @@ const useFloatingPortalNode = function (_temp) {
|
|
|
17566
17637
|
const [portalNode, setPortalNode] = React__namespace.useState(null);
|
|
17567
17638
|
const uniqueId = useId();
|
|
17568
17639
|
const portalContext = usePortalContext();
|
|
17640
|
+
const data = React__namespace.useMemo(() => ({
|
|
17641
|
+
id,
|
|
17642
|
+
root,
|
|
17643
|
+
portalContext,
|
|
17644
|
+
uniqueId
|
|
17645
|
+
}), [id, root, portalContext, uniqueId]);
|
|
17646
|
+
const dataRef = React__namespace.useRef();
|
|
17647
|
+
index(() => {
|
|
17648
|
+
return () => {
|
|
17649
|
+
portalNode == null ? void 0 : portalNode.remove();
|
|
17650
|
+
};
|
|
17651
|
+
}, [portalNode, data]);
|
|
17569
17652
|
index(() => {
|
|
17653
|
+
if (dataRef.current === data) return;
|
|
17654
|
+
dataRef.current = data;
|
|
17655
|
+
const {
|
|
17656
|
+
id,
|
|
17657
|
+
root,
|
|
17658
|
+
portalContext,
|
|
17659
|
+
uniqueId
|
|
17660
|
+
} = data;
|
|
17570
17661
|
const existingIdRoot = id ? document.getElementById(id) : null;
|
|
17571
|
-
const attr = '
|
|
17662
|
+
const attr = createAttribute('portal');
|
|
17572
17663
|
if (existingIdRoot) {
|
|
17573
17664
|
const subRoot = document.createElement('div');
|
|
17574
17665
|
subRoot.id = uniqueId;
|
|
17575
17666
|
subRoot.setAttribute(attr, '');
|
|
17576
17667
|
existingIdRoot.appendChild(subRoot);
|
|
17577
17668
|
setPortalNode(subRoot);
|
|
17578
|
-
return () => {
|
|
17579
|
-
subRoot.remove();
|
|
17580
|
-
};
|
|
17581
17669
|
} else {
|
|
17582
|
-
let container = (portalContext == null ? void 0 : portalContext.portalNode)
|
|
17670
|
+
let container = root || (portalContext == null ? void 0 : portalContext.portalNode);
|
|
17671
|
+
if (container && !isElement(container)) container = container.current;
|
|
17672
|
+
container = container || document.body;
|
|
17583
17673
|
let idWrapper = null;
|
|
17584
17674
|
if (id) {
|
|
17585
17675
|
idWrapper = document.createElement('div');
|
|
@@ -17589,25 +17679,19 @@ const useFloatingPortalNode = function (_temp) {
|
|
|
17589
17679
|
const subRoot = document.createElement('div');
|
|
17590
17680
|
subRoot.id = uniqueId;
|
|
17591
17681
|
subRoot.setAttribute(attr, '');
|
|
17592
|
-
setPortalNode(subRoot);
|
|
17593
17682
|
container = idWrapper || container;
|
|
17594
17683
|
container.appendChild(subRoot);
|
|
17595
|
-
|
|
17596
|
-
var _idWrapper;
|
|
17597
|
-
subRoot.remove();
|
|
17598
|
-
(_idWrapper = idWrapper) == null ? void 0 : _idWrapper.remove();
|
|
17599
|
-
};
|
|
17684
|
+
setPortalNode(subRoot);
|
|
17600
17685
|
}
|
|
17601
|
-
}, [
|
|
17686
|
+
}, [data]);
|
|
17602
17687
|
return portalNode;
|
|
17603
|
-
}
|
|
17604
|
-
|
|
17688
|
+
}
|
|
17605
17689
|
/**
|
|
17606
17690
|
* Portals the floating element into a given container element — by default,
|
|
17607
17691
|
* outside of the app root and into the body.
|
|
17608
17692
|
* @see https://floating-ui.com/docs/FloatingPortal
|
|
17609
17693
|
*/
|
|
17610
|
-
|
|
17694
|
+
function FloatingPortal(_ref) {
|
|
17611
17695
|
let {
|
|
17612
17696
|
children,
|
|
17613
17697
|
id,
|
|
@@ -17628,7 +17712,9 @@ const FloatingPortal = _ref => {
|
|
|
17628
17712
|
// rendered.
|
|
17629
17713
|
!!focusManagerState &&
|
|
17630
17714
|
// Guards are only for non-modal focus management.
|
|
17631
|
-
!focusManagerState.modal &&
|
|
17715
|
+
!focusManagerState.modal &&
|
|
17716
|
+
// Don't render if unmount is transitioning.
|
|
17717
|
+
focusManagerState.open && preserveTabOrder && !!(root || portalNode);
|
|
17632
17718
|
|
|
17633
17719
|
// https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/TabbablePortal.tsx
|
|
17634
17720
|
React__namespace.useEffect(() => {
|
|
@@ -17690,11 +17776,11 @@ const FloatingPortal = _ref => {
|
|
|
17690
17776
|
} else {
|
|
17691
17777
|
const nextTabbable = getNextTabbable() || (focusManagerState == null ? void 0 : focusManagerState.refs.domReference.current);
|
|
17692
17778
|
nextTabbable == null ? void 0 : nextTabbable.focus();
|
|
17693
|
-
(focusManagerState == null ? void 0 : focusManagerState.closeOnFocusOut) && (focusManagerState == null ? void 0 : focusManagerState.onOpenChange(false));
|
|
17779
|
+
(focusManagerState == null ? void 0 : focusManagerState.closeOnFocusOut) && (focusManagerState == null ? void 0 : focusManagerState.onOpenChange(false, event.nativeEvent));
|
|
17694
17780
|
}
|
|
17695
17781
|
}
|
|
17696
17782
|
}));
|
|
17697
|
-
}
|
|
17783
|
+
}
|
|
17698
17784
|
const usePortalContext = () => React__namespace.useContext(PortalContext);
|
|
17699
17785
|
|
|
17700
17786
|
const VisuallyHiddenDismiss = /*#__PURE__*/React__namespace.forwardRef(function VisuallyHiddenDismiss(props, ref) {
|
|
@@ -17709,18 +17795,19 @@ const VisuallyHiddenDismiss = /*#__PURE__*/React__namespace.forwardRef(function
|
|
|
17709
17795
|
* Provides focus management for the floating element.
|
|
17710
17796
|
* @see https://floating-ui.com/docs/FloatingFocusManager
|
|
17711
17797
|
*/
|
|
17712
|
-
function FloatingFocusManager(
|
|
17713
|
-
|
|
17798
|
+
function FloatingFocusManager(props) {
|
|
17799
|
+
const {
|
|
17714
17800
|
context,
|
|
17715
17801
|
children,
|
|
17802
|
+
disabled = false,
|
|
17716
17803
|
order = ['content'],
|
|
17717
|
-
guards = true,
|
|
17804
|
+
guards: _guards = true,
|
|
17718
17805
|
initialFocus = 0,
|
|
17719
17806
|
returnFocus = true,
|
|
17720
17807
|
modal = true,
|
|
17721
17808
|
visuallyHiddenDismiss = false,
|
|
17722
17809
|
closeOnFocusOut = true
|
|
17723
|
-
} =
|
|
17810
|
+
} = props;
|
|
17724
17811
|
const {
|
|
17725
17812
|
open,
|
|
17726
17813
|
refs,
|
|
@@ -17733,12 +17820,14 @@ function FloatingFocusManager(_ref) {
|
|
|
17733
17820
|
floating
|
|
17734
17821
|
}
|
|
17735
17822
|
} = context;
|
|
17823
|
+
|
|
17824
|
+
// Force the guards to be rendered if the `inert` attribute is not supported.
|
|
17825
|
+
const guards = supportsInert() ? _guards : true;
|
|
17736
17826
|
const orderRef = useLatestRef(order);
|
|
17737
17827
|
const initialFocusRef = useLatestRef(initialFocus);
|
|
17738
17828
|
const returnFocusRef = useLatestRef(returnFocus);
|
|
17739
17829
|
const tree = useFloatingTree();
|
|
17740
17830
|
const portalContext = usePortalContext();
|
|
17741
|
-
const [tabbableContentLength, setTabbableContentLength] = React__namespace.useState(null);
|
|
17742
17831
|
|
|
17743
17832
|
// Controlled by `useListNavigation`.
|
|
17744
17833
|
const ignoreInitialFocus = typeof initialFocus === 'number' && initialFocus < 0;
|
|
@@ -17754,7 +17843,7 @@ function FloatingFocusManager(_ref) {
|
|
|
17754
17843
|
// aria-hidden should be applied to all nodes still. Further, the visually
|
|
17755
17844
|
// hidden dismiss button should only appear at the end of the list, not the
|
|
17756
17845
|
// start.
|
|
17757
|
-
const
|
|
17846
|
+
const isUntrappedTypeableCombobox = domReference && domReference.getAttribute('role') === 'combobox' && isTypeableElement(domReference) && ignoreInitialFocus;
|
|
17758
17847
|
const getTabbableContent = React__namespace.useCallback(function (container) {
|
|
17759
17848
|
if (container === void 0) {
|
|
17760
17849
|
container = floating;
|
|
@@ -17774,13 +17863,11 @@ function FloatingFocusManager(_ref) {
|
|
|
17774
17863
|
}).filter(Boolean).flat();
|
|
17775
17864
|
}, [domReference, floating, orderRef, getTabbableContent]);
|
|
17776
17865
|
React__namespace.useEffect(() => {
|
|
17777
|
-
if (!modal)
|
|
17778
|
-
return;
|
|
17779
|
-
}
|
|
17866
|
+
if (disabled || !modal) return;
|
|
17780
17867
|
function onKeyDown(event) {
|
|
17781
17868
|
if (event.key === 'Tab') {
|
|
17782
17869
|
// The focus guards have nothing to focus, so we need to stop the event.
|
|
17783
|
-
if (getTabbableContent().length === 0 && !
|
|
17870
|
+
if (contains(floating, activeElement(getDocument(floating))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
|
|
17784
17871
|
stopEvent(event);
|
|
17785
17872
|
}
|
|
17786
17873
|
const els = getTabbableElements();
|
|
@@ -17804,11 +17891,9 @@ function FloatingFocusManager(_ref) {
|
|
|
17804
17891
|
return () => {
|
|
17805
17892
|
doc.removeEventListener('keydown', onKeyDown);
|
|
17806
17893
|
};
|
|
17807
|
-
}, [domReference, floating, modal, orderRef, refs,
|
|
17894
|
+
}, [disabled, domReference, floating, modal, orderRef, refs, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
|
|
17808
17895
|
React__namespace.useEffect(() => {
|
|
17809
|
-
if (!closeOnFocusOut)
|
|
17810
|
-
return;
|
|
17811
|
-
}
|
|
17896
|
+
if (disabled || !closeOnFocusOut) return;
|
|
17812
17897
|
|
|
17813
17898
|
// In Safari, buttons lose focus when pressing them.
|
|
17814
17899
|
function handlePointerDown() {
|
|
@@ -17819,22 +17904,24 @@ function FloatingFocusManager(_ref) {
|
|
|
17819
17904
|
}
|
|
17820
17905
|
function handleFocusOutside(event) {
|
|
17821
17906
|
const relatedTarget = event.relatedTarget;
|
|
17822
|
-
|
|
17823
|
-
|
|
17824
|
-
|
|
17825
|
-
|
|
17826
|
-
|
|
17827
|
-
|
|
17828
|
-
|
|
17829
|
-
|
|
17830
|
-
|
|
17831
|
-
|
|
17832
|
-
|
|
17833
|
-
|
|
17834
|
-
|
|
17835
|
-
|
|
17836
|
-
|
|
17837
|
-
|
|
17907
|
+
queueMicrotask(() => {
|
|
17908
|
+
const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext == null ? void 0 : portalContext.portalNode, relatedTarget) || relatedTarget != null && relatedTarget.hasAttribute(createAttribute('focus-guard')) || tree && (getChildren(tree.nodesRef.current, nodeId).find(node => {
|
|
17909
|
+
var _node$context, _node$context2;
|
|
17910
|
+
return contains((_node$context = node.context) == null ? void 0 : _node$context.elements.floating, relatedTarget) || contains((_node$context2 = node.context) == null ? void 0 : _node$context2.elements.domReference, relatedTarget);
|
|
17911
|
+
}) || getAncestors(tree.nodesRef.current, nodeId).find(node => {
|
|
17912
|
+
var _node$context3, _node$context4;
|
|
17913
|
+
return ((_node$context3 = node.context) == null ? void 0 : _node$context3.elements.floating) === relatedTarget || ((_node$context4 = node.context) == null ? void 0 : _node$context4.elements.domReference) === relatedTarget;
|
|
17914
|
+
})));
|
|
17915
|
+
|
|
17916
|
+
// Focus did not move inside the floating tree, and there are no tabbable
|
|
17917
|
+
// portal guards to handle closing.
|
|
17918
|
+
if (relatedTarget && movedToUnrelatedNode && !isPointerDownRef.current &&
|
|
17919
|
+
// Fix React 18 Strict Mode returnFocus due to double rendering.
|
|
17920
|
+
relatedTarget !== previouslyFocusedElementRef.current) {
|
|
17921
|
+
preventReturnFocusRef.current = true;
|
|
17922
|
+
onOpenChange(false, event);
|
|
17923
|
+
}
|
|
17924
|
+
});
|
|
17838
17925
|
}
|
|
17839
17926
|
if (floating && isHTMLElement(domReference)) {
|
|
17840
17927
|
domReference.addEventListener('focusout', handleFocusOutside);
|
|
@@ -17846,63 +17933,46 @@ function FloatingFocusManager(_ref) {
|
|
|
17846
17933
|
!modal && floating.removeEventListener('focusout', handleFocusOutside);
|
|
17847
17934
|
};
|
|
17848
17935
|
}
|
|
17849
|
-
}, [domReference, floating, modal, nodeId, tree, portalContext, onOpenChange, closeOnFocusOut]);
|
|
17936
|
+
}, [disabled, domReference, floating, modal, nodeId, tree, portalContext, onOpenChange, closeOnFocusOut]);
|
|
17850
17937
|
React__namespace.useEffect(() => {
|
|
17851
17938
|
var _portalContext$portal;
|
|
17939
|
+
if (disabled) return;
|
|
17940
|
+
|
|
17852
17941
|
// Don't hide portals nested within the parent portal.
|
|
17853
|
-
const portalNodes = Array.from((portalContext == null ? void 0 : (_portalContext$portal = portalContext.portalNode) == null ? void 0 : _portalContext$portal.querySelectorAll('
|
|
17854
|
-
|
|
17855
|
-
|
|
17856
|
-
|
|
17857
|
-
if (floating && modal) {
|
|
17858
|
-
const insideNodes = [floating, ...portalNodes, ...getDismissButtons()];
|
|
17859
|
-
const cleanup = hideOthers(orderRef.current.includes('reference') || isTypeableCombobox ? insideNodes.concat(domReference || []) : insideNodes);
|
|
17942
|
+
const portalNodes = Array.from((portalContext == null ? void 0 : (_portalContext$portal = portalContext.portalNode) == null ? void 0 : _portalContext$portal.querySelectorAll("[" + createAttribute('portal') + "]")) || []);
|
|
17943
|
+
if (floating) {
|
|
17944
|
+
const insideElements = [floating, ...portalNodes, startDismissButtonRef.current, endDismissButtonRef.current, orderRef.current.includes('reference') || isUntrappedTypeableCombobox ? domReference : null].filter(x => x != null);
|
|
17945
|
+
const cleanup = modal ? markOthers(insideElements, guards, !guards) : markOthers(insideElements);
|
|
17860
17946
|
return () => {
|
|
17861
17947
|
cleanup();
|
|
17862
17948
|
};
|
|
17863
17949
|
}
|
|
17864
|
-
}, [domReference, floating, modal, orderRef, portalContext,
|
|
17865
|
-
React__namespace.useEffect(() => {
|
|
17866
|
-
if (modal && !guards && floating) {
|
|
17867
|
-
const tabIndexValues = [];
|
|
17868
|
-
const options = getTabbableOptions();
|
|
17869
|
-
const allTabbable = tabbable(getDocument(floating).body, options);
|
|
17870
|
-
const floatingTabbable = getTabbableElements();
|
|
17871
|
-
|
|
17872
|
-
// Exclude all tabbable elements that are part of the order
|
|
17873
|
-
const elements = allTabbable.filter(el => !floatingTabbable.includes(el));
|
|
17874
|
-
elements.forEach((el, i) => {
|
|
17875
|
-
tabIndexValues[i] = el.getAttribute('tabindex');
|
|
17876
|
-
el.setAttribute('tabindex', '-1');
|
|
17877
|
-
});
|
|
17878
|
-
return () => {
|
|
17879
|
-
elements.forEach((el, i) => {
|
|
17880
|
-
const value = tabIndexValues[i];
|
|
17881
|
-
if (value == null) {
|
|
17882
|
-
el.removeAttribute('tabindex');
|
|
17883
|
-
} else {
|
|
17884
|
-
el.setAttribute('tabindex', value);
|
|
17885
|
-
}
|
|
17886
|
-
});
|
|
17887
|
-
};
|
|
17888
|
-
}
|
|
17889
|
-
}, [floating, modal, guards, getTabbableElements]);
|
|
17950
|
+
}, [disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, guards]);
|
|
17890
17951
|
index(() => {
|
|
17891
|
-
if (!floating) return;
|
|
17952
|
+
if (disabled || !floating) return;
|
|
17892
17953
|
const doc = getDocument(floating);
|
|
17954
|
+
const previouslyFocusedElement = activeElement(doc);
|
|
17955
|
+
|
|
17956
|
+
// Wait for any layout effect state setters to execute to set `tabIndex`.
|
|
17957
|
+
queueMicrotask(() => {
|
|
17958
|
+
const focusableElements = getTabbableElements(floating);
|
|
17959
|
+
const initialFocusValue = initialFocusRef.current;
|
|
17960
|
+
const elToFocus = (typeof initialFocusValue === 'number' ? focusableElements[initialFocusValue] : initialFocusValue.current) || floating;
|
|
17961
|
+
const focusAlreadyInsideFloatingEl = contains(floating, previouslyFocusedElement);
|
|
17962
|
+
if (!ignoreInitialFocus && !focusAlreadyInsideFloatingEl && open) {
|
|
17963
|
+
enqueueFocus(elToFocus, {
|
|
17964
|
+
preventScroll: elToFocus === floating
|
|
17965
|
+
});
|
|
17966
|
+
}
|
|
17967
|
+
});
|
|
17968
|
+
}, [disabled, open, floating, ignoreInitialFocus, getTabbableElements, initialFocusRef]);
|
|
17969
|
+
index(() => {
|
|
17970
|
+
if (disabled || !floating) return;
|
|
17893
17971
|
let preventReturnFocusScroll = false;
|
|
17972
|
+
const doc = getDocument(floating);
|
|
17894
17973
|
const previouslyFocusedElement = activeElement(doc);
|
|
17895
17974
|
const contextData = dataRef.current;
|
|
17896
|
-
const initialFocusValue = initialFocusRef.current;
|
|
17897
17975
|
previouslyFocusedElementRef.current = previouslyFocusedElement;
|
|
17898
|
-
const focusableElements = getTabbableElements(floating);
|
|
17899
|
-
const elToFocus = (typeof initialFocusValue === 'number' ? focusableElements[initialFocusValue] : initialFocusValue.current) || floating;
|
|
17900
|
-
|
|
17901
|
-
// If the `useListNavigation` hook is active, always ignore `initialFocus`
|
|
17902
|
-
// because it has its own handling of the initial focus.
|
|
17903
|
-
!ignoreInitialFocus && open && enqueueFocus(elToFocus, {
|
|
17904
|
-
preventScroll: elToFocus === floating
|
|
17905
|
-
});
|
|
17906
17976
|
|
|
17907
17977
|
// Dismissing via outside press should always ignore `returnFocus` to
|
|
17908
17978
|
// prevent unwanted scrolling.
|
|
@@ -17935,8 +18005,6 @@ function FloatingFocusManager(_ref) {
|
|
|
17935
18005
|
if (
|
|
17936
18006
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
17937
18007
|
returnFocusRef.current && isHTMLElement(previouslyFocusedElementRef.current) && !preventReturnFocusRef.current) {
|
|
17938
|
-
// `isPointerDownRef.current` to avoid the focus ring from appearing on
|
|
17939
|
-
// the reference element when click-toggling it.
|
|
17940
18008
|
enqueueFocus(previouslyFocusedElementRef.current, {
|
|
17941
18009
|
// When dismissing nested floating elements, by the time the rAF has
|
|
17942
18010
|
// executed, the menus will all have been unmounted. When they try
|
|
@@ -17947,49 +18015,58 @@ function FloatingFocusManager(_ref) {
|
|
|
17947
18015
|
});
|
|
17948
18016
|
}
|
|
17949
18017
|
};
|
|
17950
|
-
}, [
|
|
18018
|
+
}, [disabled, floating, returnFocusRef, dataRef, refs, events, tree, nodeId]);
|
|
17951
18019
|
|
|
17952
18020
|
// Synchronize the `context` & `modal` value to the FloatingPortal context.
|
|
17953
18021
|
// It will decide whether or not it needs to render its own guards.
|
|
17954
18022
|
index(() => {
|
|
17955
|
-
if (!portalContext) return;
|
|
18023
|
+
if (disabled || !portalContext) return;
|
|
17956
18024
|
portalContext.setFocusManagerState({
|
|
17957
|
-
...context,
|
|
17958
18025
|
modal,
|
|
17959
|
-
closeOnFocusOut
|
|
17960
|
-
|
|
18026
|
+
closeOnFocusOut,
|
|
18027
|
+
open,
|
|
18028
|
+
onOpenChange,
|
|
18029
|
+
refs
|
|
17961
18030
|
});
|
|
17962
|
-
|
|
17963
18031
|
return () => {
|
|
17964
18032
|
portalContext.setFocusManagerState(null);
|
|
17965
18033
|
};
|
|
17966
|
-
}, [portalContext, modal,
|
|
18034
|
+
}, [disabled, portalContext, modal, open, onOpenChange, refs, closeOnFocusOut]);
|
|
17967
18035
|
index(() => {
|
|
17968
|
-
if (
|
|
17969
|
-
function
|
|
17970
|
-
|
|
17971
|
-
|
|
17972
|
-
|
|
17973
|
-
|
|
17974
|
-
|
|
17975
|
-
|
|
17976
|
-
|
|
18036
|
+
if (disabled) return;
|
|
18037
|
+
if (floating && typeof MutationObserver === 'function' && !ignoreInitialFocus) {
|
|
18038
|
+
const handleMutation = () => {
|
|
18039
|
+
const tabIndex = floating.getAttribute('tabindex');
|
|
18040
|
+
if (orderRef.current.includes('floating') || activeElement(getDocument(floating)) !== refs.domReference.current && getTabbableContent().length === 0) {
|
|
18041
|
+
if (tabIndex !== '0') {
|
|
18042
|
+
floating.setAttribute('tabindex', '0');
|
|
18043
|
+
}
|
|
18044
|
+
} else if (tabIndex !== '-1') {
|
|
18045
|
+
floating.setAttribute('tabindex', '-1');
|
|
18046
|
+
}
|
|
18047
|
+
};
|
|
18048
|
+
handleMutation();
|
|
18049
|
+
const observer = new MutationObserver(handleMutation);
|
|
17977
18050
|
observer.observe(floating, {
|
|
17978
18051
|
childList: true,
|
|
17979
|
-
subtree: true
|
|
18052
|
+
subtree: true,
|
|
18053
|
+
attributes: true
|
|
17980
18054
|
});
|
|
17981
18055
|
return () => {
|
|
17982
18056
|
observer.disconnect();
|
|
17983
18057
|
};
|
|
17984
18058
|
}
|
|
17985
|
-
}, [floating, getTabbableContent, ignoreInitialFocus
|
|
17986
|
-
const shouldRenderGuards = guards && (isInsidePortal || modal) && !isTypeableCombobox;
|
|
18059
|
+
}, [disabled, floating, refs, orderRef, getTabbableContent, ignoreInitialFocus]);
|
|
17987
18060
|
function renderDismissButton(location) {
|
|
17988
|
-
|
|
18061
|
+
if (disabled || !visuallyHiddenDismiss || !modal) {
|
|
18062
|
+
return null;
|
|
18063
|
+
}
|
|
18064
|
+
return /*#__PURE__*/React__namespace.createElement(VisuallyHiddenDismiss, {
|
|
17989
18065
|
ref: location === 'start' ? startDismissButtonRef : endDismissButtonRef,
|
|
17990
|
-
onClick:
|
|
17991
|
-
}, typeof visuallyHiddenDismiss === 'string' ? visuallyHiddenDismiss : 'Dismiss')
|
|
18066
|
+
onClick: event => onOpenChange(false, event.nativeEvent)
|
|
18067
|
+
}, typeof visuallyHiddenDismiss === 'string' ? visuallyHiddenDismiss : 'Dismiss');
|
|
17992
18068
|
}
|
|
18069
|
+
const shouldRenderGuards = !disabled && guards && !isUntrappedTypeableCombobox && (isInsidePortal || modal);
|
|
17993
18070
|
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, shouldRenderGuards && /*#__PURE__*/React__namespace.createElement(FocusGuard, {
|
|
17994
18071
|
"data-type": "inside",
|
|
17995
18072
|
ref: portalContext == null ? void 0 : portalContext.beforeInsideRef,
|
|
@@ -18008,9 +18085,7 @@ function FloatingFocusManager(_ref) {
|
|
|
18008
18085
|
}
|
|
18009
18086
|
}
|
|
18010
18087
|
}
|
|
18011
|
-
}),
|
|
18012
|
-
tabIndex: 0
|
|
18013
|
-
} : {}), renderDismissButton('end'), shouldRenderGuards && /*#__PURE__*/React__namespace.createElement(FocusGuard, {
|
|
18088
|
+
}), !isUntrappedTypeableCombobox && renderDismissButton('start'), children, renderDismissButton('end'), shouldRenderGuards && /*#__PURE__*/React__namespace.createElement(FocusGuard, {
|
|
18014
18089
|
"data-type": "inside",
|
|
18015
18090
|
ref: portalContext == null ? void 0 : portalContext.afterInsideRef,
|
|
18016
18091
|
onFocus: event => {
|
|
@@ -18042,7 +18117,7 @@ function isSpaceIgnored(element) {
|
|
|
18042
18117
|
* Opens or closes the floating element when clicking the reference element.
|
|
18043
18118
|
* @see https://floating-ui.com/docs/useClick
|
|
18044
18119
|
*/
|
|
18045
|
-
|
|
18120
|
+
function useClick(context, props) {
|
|
18046
18121
|
if (props === void 0) {
|
|
18047
18122
|
props = {};
|
|
18048
18123
|
}
|
|
@@ -18062,10 +18137,9 @@ const useClick = function (context, props) {
|
|
|
18062
18137
|
keyboardHandlers = true
|
|
18063
18138
|
} = props;
|
|
18064
18139
|
const pointerTypeRef = React__namespace.useRef();
|
|
18140
|
+
const didKeyDownRef = React__namespace.useRef(false);
|
|
18065
18141
|
return React__namespace.useMemo(() => {
|
|
18066
|
-
if (!enabled) {
|
|
18067
|
-
return {};
|
|
18068
|
-
}
|
|
18142
|
+
if (!enabled) return {};
|
|
18069
18143
|
return {
|
|
18070
18144
|
reference: {
|
|
18071
18145
|
onPointerDown(event) {
|
|
@@ -18083,16 +18157,13 @@ const useClick = function (context, props) {
|
|
|
18083
18157
|
if (eventOption === 'click') {
|
|
18084
18158
|
return;
|
|
18085
18159
|
}
|
|
18086
|
-
if (open) {
|
|
18087
|
-
|
|
18088
|
-
onOpenChange(false);
|
|
18089
|
-
}
|
|
18160
|
+
if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'mousedown' : true)) {
|
|
18161
|
+
onOpenChange(false, event.nativeEvent);
|
|
18090
18162
|
} else {
|
|
18091
18163
|
// Prevent stealing focus from the floating element
|
|
18092
18164
|
event.preventDefault();
|
|
18093
|
-
onOpenChange(true);
|
|
18165
|
+
onOpenChange(true, event.nativeEvent);
|
|
18094
18166
|
}
|
|
18095
|
-
dataRef.current.openEvent = event.nativeEvent;
|
|
18096
18167
|
},
|
|
18097
18168
|
onClick(event) {
|
|
18098
18169
|
if (eventOption === 'mousedown' && pointerTypeRef.current) {
|
|
@@ -18102,63 +18173,52 @@ const useClick = function (context, props) {
|
|
|
18102
18173
|
if (isMouseLikePointerType(pointerTypeRef.current, true) && ignoreMouse) {
|
|
18103
18174
|
return;
|
|
18104
18175
|
}
|
|
18105
|
-
if (open) {
|
|
18106
|
-
|
|
18107
|
-
onOpenChange(false);
|
|
18108
|
-
}
|
|
18176
|
+
if (open && toggle && (dataRef.current.openEvent ? dataRef.current.openEvent.type === 'click' : true)) {
|
|
18177
|
+
onOpenChange(false, event.nativeEvent);
|
|
18109
18178
|
} else {
|
|
18110
|
-
onOpenChange(true);
|
|
18179
|
+
onOpenChange(true, event.nativeEvent);
|
|
18111
18180
|
}
|
|
18112
|
-
dataRef.current.openEvent = event.nativeEvent;
|
|
18113
18181
|
},
|
|
18114
18182
|
onKeyDown(event) {
|
|
18115
18183
|
pointerTypeRef.current = undefined;
|
|
18116
|
-
if (!keyboardHandlers) {
|
|
18117
|
-
return;
|
|
18118
|
-
}
|
|
18119
|
-
if (isButtonTarget(event)) {
|
|
18184
|
+
if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {
|
|
18120
18185
|
return;
|
|
18121
18186
|
}
|
|
18122
18187
|
if (event.key === ' ' && !isSpaceIgnored(domReference)) {
|
|
18123
18188
|
// Prevent scrolling
|
|
18124
18189
|
event.preventDefault();
|
|
18190
|
+
didKeyDownRef.current = true;
|
|
18125
18191
|
}
|
|
18126
18192
|
if (event.key === 'Enter') {
|
|
18127
|
-
if (open) {
|
|
18128
|
-
|
|
18129
|
-
onOpenChange(false);
|
|
18130
|
-
}
|
|
18193
|
+
if (open && toggle) {
|
|
18194
|
+
onOpenChange(false, event.nativeEvent);
|
|
18131
18195
|
} else {
|
|
18132
|
-
onOpenChange(true);
|
|
18196
|
+
onOpenChange(true, event.nativeEvent);
|
|
18133
18197
|
}
|
|
18134
18198
|
}
|
|
18135
18199
|
},
|
|
18136
18200
|
onKeyUp(event) {
|
|
18137
|
-
if (!keyboardHandlers) {
|
|
18138
|
-
return;
|
|
18139
|
-
}
|
|
18140
|
-
if (isButtonTarget(event) || isSpaceIgnored(domReference)) {
|
|
18201
|
+
if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event) || isSpaceIgnored(domReference)) {
|
|
18141
18202
|
return;
|
|
18142
18203
|
}
|
|
18143
|
-
if (event.key === ' ') {
|
|
18144
|
-
|
|
18145
|
-
|
|
18146
|
-
|
|
18147
|
-
}
|
|
18204
|
+
if (event.key === ' ' && didKeyDownRef.current) {
|
|
18205
|
+
didKeyDownRef.current = false;
|
|
18206
|
+
if (open && toggle) {
|
|
18207
|
+
onOpenChange(false, event.nativeEvent);
|
|
18148
18208
|
} else {
|
|
18149
|
-
onOpenChange(true);
|
|
18209
|
+
onOpenChange(true, event.nativeEvent);
|
|
18150
18210
|
}
|
|
18151
18211
|
}
|
|
18152
18212
|
}
|
|
18153
18213
|
}
|
|
18154
18214
|
};
|
|
18155
18215
|
}, [enabled, dataRef, eventOption, ignoreMouse, keyboardHandlers, domReference, toggle, open, onOpenChange]);
|
|
18156
|
-
}
|
|
18216
|
+
}
|
|
18157
18217
|
|
|
18158
18218
|
// `toString()` prevents bundlers from trying to `import { useInsertionEffect } from 'react'`
|
|
18159
18219
|
const useInsertionEffect = React__namespace[/*#__PURE__*/'useInsertionEffect'.toString()];
|
|
18160
18220
|
const useSafeInsertionEffect = useInsertionEffect || (fn => fn());
|
|
18161
|
-
function
|
|
18221
|
+
function useEffectEvent(callback) {
|
|
18162
18222
|
const ref = React__namespace.useRef(() => {
|
|
18163
18223
|
if (process.env.NODE_ENV !== "production") {
|
|
18164
18224
|
throw new Error('Cannot call an event handler while rendering.');
|
|
@@ -18175,26 +18235,6 @@ function useEvent(callback) {
|
|
|
18175
18235
|
}, []);
|
|
18176
18236
|
}
|
|
18177
18237
|
|
|
18178
|
-
/**
|
|
18179
|
-
* Check whether the event.target is within the provided node. Uses event.composedPath if available for custom element support.
|
|
18180
|
-
*
|
|
18181
|
-
* @param event The event whose target/composedPath to check
|
|
18182
|
-
* @param node The node to check against
|
|
18183
|
-
* @returns Whether the event.target/composedPath is within the node.
|
|
18184
|
-
*/
|
|
18185
|
-
function isEventTargetWithin(event, node) {
|
|
18186
|
-
if (node == null) {
|
|
18187
|
-
return false;
|
|
18188
|
-
}
|
|
18189
|
-
if ('composedPath' in event) {
|
|
18190
|
-
return event.composedPath().includes(node);
|
|
18191
|
-
}
|
|
18192
|
-
|
|
18193
|
-
// TS thinks `event` is of type never as it assumes all browsers support composedPath, but browsers without shadow dom don't
|
|
18194
|
-
const e = event;
|
|
18195
|
-
return e.target != null && node.contains(e.target);
|
|
18196
|
-
}
|
|
18197
|
-
|
|
18198
18238
|
const bubbleHandlerKeys = {
|
|
18199
18239
|
pointerdown: 'onPointerDown',
|
|
18200
18240
|
mousedown: 'onMouseDown',
|
|
@@ -18217,7 +18257,7 @@ const normalizeBubblesProp = bubbles => {
|
|
|
18217
18257
|
* the user presses the `escape` key or outside of the floating element.
|
|
18218
18258
|
* @see https://floating-ui.com/docs/useDismiss
|
|
18219
18259
|
*/
|
|
18220
|
-
|
|
18260
|
+
function useDismiss(context, props) {
|
|
18221
18261
|
if (props === void 0) {
|
|
18222
18262
|
props = {};
|
|
18223
18263
|
}
|
|
@@ -18245,14 +18285,14 @@ const useDismiss = function (context, props) {
|
|
|
18245
18285
|
} = props;
|
|
18246
18286
|
const tree = useFloatingTree();
|
|
18247
18287
|
const nested = useFloatingParentNodeId() != null;
|
|
18248
|
-
const outsidePressFn =
|
|
18288
|
+
const outsidePressFn = useEffectEvent(typeof unstable_outsidePress === 'function' ? unstable_outsidePress : () => false);
|
|
18249
18289
|
const outsidePress = typeof unstable_outsidePress === 'function' ? outsidePressFn : unstable_outsidePress;
|
|
18250
18290
|
const insideReactTreeRef = React__namespace.useRef(false);
|
|
18251
18291
|
const {
|
|
18252
18292
|
escapeKeyBubbles,
|
|
18253
18293
|
outsidePressBubbles
|
|
18254
18294
|
} = normalizeBubblesProp(bubbles);
|
|
18255
|
-
const closeOnEscapeKeyDown =
|
|
18295
|
+
const closeOnEscapeKeyDown = useEffectEvent(event => {
|
|
18256
18296
|
if (!open || !enabled || !escapeKey || event.key !== 'Escape') {
|
|
18257
18297
|
return;
|
|
18258
18298
|
}
|
|
@@ -18281,9 +18321,9 @@ const useDismiss = function (context, props) {
|
|
|
18281
18321
|
}
|
|
18282
18322
|
}
|
|
18283
18323
|
});
|
|
18284
|
-
onOpenChange(false);
|
|
18324
|
+
onOpenChange(false, isReactEvent(event) ? event.nativeEvent : event);
|
|
18285
18325
|
});
|
|
18286
|
-
const closeOnPressOutside =
|
|
18326
|
+
const closeOnPressOutside = useEffectEvent(event => {
|
|
18287
18327
|
// Given developers can stop the propagation of the synthetic event,
|
|
18288
18328
|
// we can only be confident with a positive value.
|
|
18289
18329
|
const insideReactTree = insideReactTreeRef.current;
|
|
@@ -18295,6 +18335,28 @@ const useDismiss = function (context, props) {
|
|
|
18295
18335
|
return;
|
|
18296
18336
|
}
|
|
18297
18337
|
const target = getTarget(event);
|
|
18338
|
+
const inertSelector = "[" + createAttribute('inert') + "]";
|
|
18339
|
+
const markers = getDocument(floating).querySelectorAll(inertSelector);
|
|
18340
|
+
let targetRootAncestor = isElement(target) ? target : null;
|
|
18341
|
+
while (targetRootAncestor && !isLastTraversableNode(targetRootAncestor)) {
|
|
18342
|
+
const nextParent = getParentNode(targetRootAncestor);
|
|
18343
|
+
if (nextParent === getDocument(floating).body || !isElement(nextParent)) {
|
|
18344
|
+
break;
|
|
18345
|
+
} else {
|
|
18346
|
+
targetRootAncestor = nextParent;
|
|
18347
|
+
}
|
|
18348
|
+
}
|
|
18349
|
+
|
|
18350
|
+
// Check if the click occurred on a third-party element injected after the
|
|
18351
|
+
// floating element rendered.
|
|
18352
|
+
if (markers.length && isElement(target) && !isRootElement(target) &&
|
|
18353
|
+
// Clicked on a direct ancestor (e.g. FloatingOverlay).
|
|
18354
|
+
!contains(target, floating) &&
|
|
18355
|
+
// If the target root element contains none of the markers, then the
|
|
18356
|
+
// element was injected after the floating element rendered.
|
|
18357
|
+
Array.from(markers).every(marker => !contains(targetRootAncestor, marker))) {
|
|
18358
|
+
return;
|
|
18359
|
+
}
|
|
18298
18360
|
|
|
18299
18361
|
// Check if the click occurred on the scrollbar
|
|
18300
18362
|
if (isHTMLElement(target) && floating) {
|
|
@@ -18309,7 +18371,7 @@ const useDismiss = function (context, props) {
|
|
|
18309
18371
|
// check for. Plus, for modal dialogs with backdrops, it is more
|
|
18310
18372
|
// important that the backdrop is checked but not so much the window.
|
|
18311
18373
|
if (canScrollY) {
|
|
18312
|
-
const isRTL =
|
|
18374
|
+
const isRTL = getComputedStyle$1(target).direction === 'rtl';
|
|
18313
18375
|
if (isRTL) {
|
|
18314
18376
|
xCond = event.offsetX <= target.offsetWidth - target.clientWidth;
|
|
18315
18377
|
}
|
|
@@ -18347,7 +18409,7 @@ const useDismiss = function (context, props) {
|
|
|
18347
18409
|
} : isVirtualClick(event) || isVirtualPointerEvent(event)
|
|
18348
18410
|
}
|
|
18349
18411
|
});
|
|
18350
|
-
onOpenChange(false);
|
|
18412
|
+
onOpenChange(false, event);
|
|
18351
18413
|
});
|
|
18352
18414
|
React__namespace.useEffect(() => {
|
|
18353
18415
|
if (!open || !enabled) {
|
|
@@ -18355,8 +18417,8 @@ const useDismiss = function (context, props) {
|
|
|
18355
18417
|
}
|
|
18356
18418
|
dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
|
|
18357
18419
|
dataRef.current.__outsidePressBubbles = outsidePressBubbles;
|
|
18358
|
-
function onScroll() {
|
|
18359
|
-
onOpenChange(false);
|
|
18420
|
+
function onScroll(event) {
|
|
18421
|
+
onOpenChange(false, event);
|
|
18360
18422
|
}
|
|
18361
18423
|
const doc = getDocument(floating);
|
|
18362
18424
|
escapeKey && doc.addEventListener('keydown', closeOnEscapeKeyDown);
|
|
@@ -18402,7 +18464,7 @@ const useDismiss = function (context, props) {
|
|
|
18402
18464
|
return {
|
|
18403
18465
|
reference: {
|
|
18404
18466
|
onKeyDown: closeOnEscapeKeyDown,
|
|
18405
|
-
[bubbleHandlerKeys[referencePressEvent]]:
|
|
18467
|
+
[bubbleHandlerKeys[referencePressEvent]]: event => {
|
|
18406
18468
|
if (referencePress) {
|
|
18407
18469
|
events.emit('dismiss', {
|
|
18408
18470
|
type: 'referencePress',
|
|
@@ -18410,7 +18472,7 @@ const useDismiss = function (context, props) {
|
|
|
18410
18472
|
returnFocus: false
|
|
18411
18473
|
}
|
|
18412
18474
|
});
|
|
18413
|
-
onOpenChange(false);
|
|
18475
|
+
onOpenChange(false, event.nativeEvent);
|
|
18414
18476
|
}
|
|
18415
18477
|
}
|
|
18416
18478
|
},
|
|
@@ -18422,91 +18484,19 @@ const useDismiss = function (context, props) {
|
|
|
18422
18484
|
}
|
|
18423
18485
|
};
|
|
18424
18486
|
}, [enabled, events, referencePress, outsidePressEvent, referencePressEvent, onOpenChange, closeOnEscapeKeyDown]);
|
|
18425
|
-
};
|
|
18426
|
-
|
|
18427
|
-
/**
|
|
18428
|
-
* Merges an array of refs into a single memoized callback ref or `null`.
|
|
18429
|
-
* @see https://floating-ui.com/docs/useMergeRefs
|
|
18430
|
-
*/
|
|
18431
|
-
function useMergeRefs(refs) {
|
|
18432
|
-
return React__namespace.useMemo(() => {
|
|
18433
|
-
if (refs.every(ref => ref == null)) {
|
|
18434
|
-
return null;
|
|
18435
|
-
}
|
|
18436
|
-
return value => {
|
|
18437
|
-
refs.forEach(ref => {
|
|
18438
|
-
if (typeof ref === 'function') {
|
|
18439
|
-
ref(value);
|
|
18440
|
-
} else if (ref != null) {
|
|
18441
|
-
ref.current = value;
|
|
18442
|
-
}
|
|
18443
|
-
});
|
|
18444
|
-
};
|
|
18445
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
18446
|
-
}, refs);
|
|
18447
18487
|
}
|
|
18448
18488
|
|
|
18449
|
-
|
|
18450
|
-
|
|
18451
|
-
|
|
18452
|
-
|
|
18453
|
-
*/
|
|
18454
|
-
const useRole = function (context, props) {
|
|
18455
|
-
if (props === void 0) {
|
|
18456
|
-
props = {};
|
|
18457
|
-
}
|
|
18458
|
-
const {
|
|
18459
|
-
open,
|
|
18460
|
-
floatingId
|
|
18461
|
-
} = context;
|
|
18462
|
-
const {
|
|
18463
|
-
enabled = true,
|
|
18464
|
-
role = 'dialog'
|
|
18465
|
-
} = props;
|
|
18466
|
-
const referenceId = useId();
|
|
18467
|
-
return React__namespace.useMemo(() => {
|
|
18468
|
-
const floatingProps = {
|
|
18469
|
-
id: floatingId,
|
|
18470
|
-
role
|
|
18471
|
-
};
|
|
18472
|
-
if (!enabled) {
|
|
18473
|
-
return {};
|
|
18474
|
-
}
|
|
18475
|
-
if (role === 'tooltip') {
|
|
18476
|
-
return {
|
|
18477
|
-
reference: {
|
|
18478
|
-
'aria-describedby': open ? floatingId : undefined
|
|
18479
|
-
},
|
|
18480
|
-
floating: floatingProps
|
|
18481
|
-
};
|
|
18482
|
-
}
|
|
18483
|
-
return {
|
|
18484
|
-
reference: {
|
|
18485
|
-
'aria-expanded': open ? 'true' : 'false',
|
|
18486
|
-
'aria-haspopup': role === 'alertdialog' ? 'dialog' : role,
|
|
18487
|
-
'aria-controls': open ? floatingId : undefined,
|
|
18488
|
-
...(role === 'listbox' && {
|
|
18489
|
-
role: 'combobox'
|
|
18490
|
-
}),
|
|
18491
|
-
...(role === 'menu' && {
|
|
18492
|
-
id: referenceId
|
|
18493
|
-
})
|
|
18494
|
-
},
|
|
18495
|
-
floating: {
|
|
18496
|
-
...floatingProps,
|
|
18497
|
-
...(role === 'menu' && {
|
|
18498
|
-
'aria-labelledby': referenceId
|
|
18499
|
-
})
|
|
18500
|
-
}
|
|
18501
|
-
};
|
|
18502
|
-
}, [enabled, role, open, floatingId, referenceId]);
|
|
18503
|
-
};
|
|
18489
|
+
let devMessageSet;
|
|
18490
|
+
if (process.env.NODE_ENV !== "production") {
|
|
18491
|
+
devMessageSet = /*#__PURE__*/new Set();
|
|
18492
|
+
}
|
|
18504
18493
|
|
|
18505
18494
|
/**
|
|
18506
18495
|
* Provides data to position a floating element and context to add interactions.
|
|
18507
18496
|
* @see https://floating-ui.com/docs/react
|
|
18508
18497
|
*/
|
|
18509
18498
|
function useFloating(options) {
|
|
18499
|
+
var _options$elements2;
|
|
18510
18500
|
if (options === void 0) {
|
|
18511
18501
|
options = {};
|
|
18512
18502
|
}
|
|
@@ -18515,13 +18505,32 @@ function useFloating(options) {
|
|
|
18515
18505
|
onOpenChange: unstable_onOpenChange,
|
|
18516
18506
|
nodeId
|
|
18517
18507
|
} = options;
|
|
18508
|
+
if (process.env.NODE_ENV !== "production") {
|
|
18509
|
+
var _options$elements;
|
|
18510
|
+
const err = 'Floating UI: Cannot pass a virtual element to the ' + '`elements.reference` option, as it must be a real DOM element. ' + 'Use `refs.setPositionReference` instead.';
|
|
18511
|
+
if ((_options$elements = options.elements) != null && _options$elements.reference && !isElement(options.elements.reference)) {
|
|
18512
|
+
var _devMessageSet;
|
|
18513
|
+
if (!((_devMessageSet = devMessageSet) != null && _devMessageSet.has(err))) {
|
|
18514
|
+
var _devMessageSet2;
|
|
18515
|
+
(_devMessageSet2 = devMessageSet) == null ? void 0 : _devMessageSet2.add(err);
|
|
18516
|
+
console.error(err);
|
|
18517
|
+
}
|
|
18518
|
+
}
|
|
18519
|
+
}
|
|
18520
|
+
const [_domReference, setDomReference] = React__namespace.useState(null);
|
|
18521
|
+
const domReference = ((_options$elements2 = options.elements) == null ? void 0 : _options$elements2.reference) || _domReference;
|
|
18518
18522
|
const position = useFloating$1(options);
|
|
18519
18523
|
const tree = useFloatingTree();
|
|
18524
|
+
const onOpenChange = useEffectEvent((open, event) => {
|
|
18525
|
+
if (open) {
|
|
18526
|
+
dataRef.current.openEvent = event;
|
|
18527
|
+
}
|
|
18528
|
+
unstable_onOpenChange == null ? void 0 : unstable_onOpenChange(open, event);
|
|
18529
|
+
});
|
|
18520
18530
|
const domReferenceRef = React__namespace.useRef(null);
|
|
18521
18531
|
const dataRef = React__namespace.useRef({});
|
|
18522
18532
|
const events = React__namespace.useState(() => createPubSub())[0];
|
|
18523
18533
|
const floatingId = useId();
|
|
18524
|
-
const [domReference, setDomReference] = React__namespace.useState(null);
|
|
18525
18534
|
const setPositionReference = React__namespace.useCallback(node => {
|
|
18526
18535
|
const positionReference = isElement(node) ? {
|
|
18527
18536
|
getBoundingClientRect: () => node.getBoundingClientRect(),
|
|
@@ -18555,7 +18564,6 @@ function useFloating(options) {
|
|
|
18555
18564
|
...position.elements,
|
|
18556
18565
|
domReference: domReference
|
|
18557
18566
|
}), [position.elements, domReference]);
|
|
18558
|
-
const onOpenChange = useEvent(unstable_onOpenChange);
|
|
18559
18567
|
const context = React__namespace.useMemo(() => ({
|
|
18560
18568
|
...position,
|
|
18561
18569
|
refs,
|
|
@@ -18577,10 +18585,8 @@ function useFloating(options) {
|
|
|
18577
18585
|
...position,
|
|
18578
18586
|
context,
|
|
18579
18587
|
refs,
|
|
18580
|
-
elements
|
|
18581
|
-
|
|
18582
|
-
positionReference: setPositionReference
|
|
18583
|
-
}), [position, refs, elements, context, setReference, setPositionReference]);
|
|
18588
|
+
elements
|
|
18589
|
+
}), [position, refs, elements, context]);
|
|
18584
18590
|
}
|
|
18585
18591
|
|
|
18586
18592
|
function mergeProps(userProps, propsList, elementKey) {
|
|
@@ -18619,7 +18625,14 @@ function mergeProps(userProps, propsList, elementKey) {
|
|
|
18619
18625
|
}, {})
|
|
18620
18626
|
};
|
|
18621
18627
|
}
|
|
18622
|
-
|
|
18628
|
+
|
|
18629
|
+
/**
|
|
18630
|
+
* Merges an array of interaction hooks' props into prop getters, allowing
|
|
18631
|
+
* event handler functions to be composed together without overwriting one
|
|
18632
|
+
* another.
|
|
18633
|
+
* @see https://floating-ui.com/docs/react#interaction-hooks
|
|
18634
|
+
*/
|
|
18635
|
+
function useInteractions(propsList) {
|
|
18623
18636
|
if (propsList === void 0) {
|
|
18624
18637
|
propsList = [];
|
|
18625
18638
|
}
|
|
@@ -18644,7 +18657,63 @@ const useInteractions = function (propsList) {
|
|
|
18644
18657
|
getFloatingProps,
|
|
18645
18658
|
getItemProps
|
|
18646
18659
|
}), [getReferenceProps, getFloatingProps, getItemProps]);
|
|
18647
|
-
}
|
|
18660
|
+
}
|
|
18661
|
+
|
|
18662
|
+
/**
|
|
18663
|
+
* Adds base screen reader props to the reference and floating elements for a
|
|
18664
|
+
* given floating element `role`.
|
|
18665
|
+
* @see https://floating-ui.com/docs/useRole
|
|
18666
|
+
*/
|
|
18667
|
+
function useRole(context, props) {
|
|
18668
|
+
if (props === void 0) {
|
|
18669
|
+
props = {};
|
|
18670
|
+
}
|
|
18671
|
+
const {
|
|
18672
|
+
open,
|
|
18673
|
+
floatingId
|
|
18674
|
+
} = context;
|
|
18675
|
+
const {
|
|
18676
|
+
enabled = true,
|
|
18677
|
+
role = 'dialog'
|
|
18678
|
+
} = props;
|
|
18679
|
+
const referenceId = useId();
|
|
18680
|
+
return React__namespace.useMemo(() => {
|
|
18681
|
+
const floatingProps = {
|
|
18682
|
+
id: floatingId,
|
|
18683
|
+
role
|
|
18684
|
+
};
|
|
18685
|
+
if (!enabled) {
|
|
18686
|
+
return {};
|
|
18687
|
+
}
|
|
18688
|
+
if (role === 'tooltip') {
|
|
18689
|
+
return {
|
|
18690
|
+
reference: {
|
|
18691
|
+
'aria-describedby': open ? floatingId : undefined
|
|
18692
|
+
},
|
|
18693
|
+
floating: floatingProps
|
|
18694
|
+
};
|
|
18695
|
+
}
|
|
18696
|
+
return {
|
|
18697
|
+
reference: {
|
|
18698
|
+
'aria-expanded': open ? 'true' : 'false',
|
|
18699
|
+
'aria-haspopup': role === 'alertdialog' ? 'dialog' : role,
|
|
18700
|
+
'aria-controls': open ? floatingId : undefined,
|
|
18701
|
+
...(role === 'listbox' && {
|
|
18702
|
+
role: 'combobox'
|
|
18703
|
+
}),
|
|
18704
|
+
...(role === 'menu' && {
|
|
18705
|
+
id: referenceId
|
|
18706
|
+
})
|
|
18707
|
+
},
|
|
18708
|
+
floating: {
|
|
18709
|
+
...floatingProps,
|
|
18710
|
+
...(role === 'menu' && {
|
|
18711
|
+
'aria-labelledby': referenceId
|
|
18712
|
+
})
|
|
18713
|
+
}
|
|
18714
|
+
};
|
|
18715
|
+
}, [enabled, role, open, floatingId, referenceId]);
|
|
18716
|
+
}
|
|
18648
18717
|
|
|
18649
18718
|
/**
|
|
18650
18719
|
* The hook that powers the Popover component.
|