vrembem 1.36.0 → 1.39.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dev/scripts.esm.js +207 -88
- package/dev/scripts.esm.js.map +1 -1
- package/dev/scripts.js +207 -88
- package/dev/scripts.js.map +1 -1
- package/dev/scripts.modern.js +201 -84
- package/dev/scripts.modern.js.map +1 -1
- package/dev/scripts.umd.js +207 -88
- package/dev/scripts.umd.js.map +1 -1
- package/dev/styles.css +54 -203
- package/dev/styles.css.map +1 -1
- package/dist/scripts.esm.js +1 -1
- package/dist/scripts.esm.js.map +1 -1
- package/dist/scripts.js +1 -1
- package/dist/scripts.js.map +1 -1
- package/dist/scripts.modern.js +1 -1
- package/dist/scripts.modern.js.map +1 -1
- package/dist/scripts.umd.js +1 -1
- package/dist/scripts.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/index.scss +0 -1
- package/package.json +26 -27
package/dev/scripts.umd.js
CHANGED
|
@@ -66,6 +66,8 @@
|
|
|
66
66
|
});
|
|
67
67
|
};
|
|
68
68
|
|
|
69
|
+
var focusableSelectors = ['a[href]:not([tabindex^="-"])', 'area[href]:not([tabindex^="-"])', 'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])', 'input[type="radio"]:not([disabled]):not([tabindex^="-"])', 'select:not([disabled]):not([tabindex^="-"])', 'textarea:not([disabled]):not([tabindex^="-"])', 'button:not([disabled]):not([tabindex^="-"])', 'iframe:not([tabindex^="-"])', 'audio[controls]:not([tabindex^="-"])', 'video[controls]:not([tabindex^="-"])', '[contenteditable]:not([tabindex^="-"])', '[tabindex]:not([tabindex^="-"])'];
|
|
70
|
+
|
|
69
71
|
var focusTarget = function focusTarget(target, settings) {
|
|
70
72
|
var innerFocus = target.querySelector("[data-" + settings.dataFocus + "]");
|
|
71
73
|
|
|
@@ -118,6 +120,28 @@
|
|
|
118
120
|
this.target = null;
|
|
119
121
|
};
|
|
120
122
|
|
|
123
|
+
_proto.refresh = function refresh() {
|
|
124
|
+
// Check if a target has been set
|
|
125
|
+
if (!this.target) return; // Remove existing events
|
|
126
|
+
|
|
127
|
+
this.target.removeEventListener('keydown', this.__handlerFocusTrap);
|
|
128
|
+
this.target.removeEventListener('keydown', this.handlerFocusLock); // Get the focusable elements
|
|
129
|
+
|
|
130
|
+
this.focusable = this.getFocusable(); // Setup the focus handlers based on focusable length
|
|
131
|
+
|
|
132
|
+
if (this.focusable.length) {
|
|
133
|
+
// If there are focusable elements, setup focus trap
|
|
134
|
+
this.focusableFirst = this.focusable[0];
|
|
135
|
+
this.focusableLast = this.focusable[this.focusable.length - 1];
|
|
136
|
+
this.target.addEventListener('keydown', this.__handlerFocusTrap);
|
|
137
|
+
} else {
|
|
138
|
+
// If there are no focusable elements, setup focus lock
|
|
139
|
+
this.focusableFirst = null;
|
|
140
|
+
this.focusableLast = null;
|
|
141
|
+
this.target.addEventListener('keydown', this.handlerFocusLock);
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
|
|
121
145
|
_proto.handlerFocusTrap = function handlerFocusTrap(event) {
|
|
122
146
|
var isTab = event.key === 'Tab' || event.keyCode === 9;
|
|
123
147
|
if (!isTab) return;
|
|
@@ -144,7 +168,7 @@
|
|
|
144
168
|
var focusable = [];
|
|
145
169
|
var initFocus = document.activeElement;
|
|
146
170
|
var initScrollTop = this.inner ? this.inner.scrollTop : 0;
|
|
147
|
-
this.target.querySelectorAll('
|
|
171
|
+
this.target.querySelectorAll(focusableSelectors.join(',')).forEach(function (el) {
|
|
148
172
|
el.focus();
|
|
149
173
|
|
|
150
174
|
if (el === document.activeElement) {
|
|
@@ -332,14 +356,6 @@
|
|
|
332
356
|
});
|
|
333
357
|
};
|
|
334
358
|
|
|
335
|
-
var breakpoints = {
|
|
336
|
-
xs: '480px',
|
|
337
|
-
sm: '620px',
|
|
338
|
-
md: '760px',
|
|
339
|
-
lg: '990px',
|
|
340
|
-
xl: '1380px'
|
|
341
|
-
};
|
|
342
|
-
|
|
343
359
|
var index = {
|
|
344
360
|
__proto__: null,
|
|
345
361
|
setInert: setInert,
|
|
@@ -357,8 +373,7 @@
|
|
|
357
373
|
removeClass: removeClass,
|
|
358
374
|
toggleClass: toggleClass,
|
|
359
375
|
openTransition: openTransition,
|
|
360
|
-
closeTransition: closeTransition
|
|
361
|
-
breakpoints: breakpoints
|
|
376
|
+
closeTransition: closeTransition
|
|
362
377
|
};
|
|
363
378
|
|
|
364
379
|
function _extends() {
|
|
@@ -476,7 +491,7 @@
|
|
|
476
491
|
selectorInert: null,
|
|
477
492
|
selectorOverflow: null,
|
|
478
493
|
// Feature toggles
|
|
479
|
-
breakpoints:
|
|
494
|
+
breakpoints: null,
|
|
480
495
|
customEventPrefix: 'drawer:',
|
|
481
496
|
eventListeners: true,
|
|
482
497
|
stateSave: true,
|
|
@@ -538,6 +553,7 @@
|
|
|
538
553
|
function Breakpoint(parent) {
|
|
539
554
|
this.mediaQueryLists = [];
|
|
540
555
|
this.parent = parent;
|
|
556
|
+
this.prefix = this.getVariablePrefix();
|
|
541
557
|
this.__check = this.check.bind(this);
|
|
542
558
|
}
|
|
543
559
|
|
|
@@ -550,7 +566,9 @@
|
|
|
550
566
|
drawers.forEach(function (drawer) {
|
|
551
567
|
var id = drawer.getAttribute("data-" + _this.parent.settings.dataDrawer);
|
|
552
568
|
var key = drawer.getAttribute("data-" + _this.parent.settings.dataBreakpoint);
|
|
553
|
-
|
|
569
|
+
|
|
570
|
+
var bp = _this.getBreakpoint(key);
|
|
571
|
+
|
|
554
572
|
var mql = window.matchMedia('(min-width:' + bp + ')');
|
|
555
573
|
|
|
556
574
|
_this.match(mql, drawer);
|
|
@@ -606,6 +624,25 @@
|
|
|
606
624
|
}
|
|
607
625
|
};
|
|
608
626
|
|
|
627
|
+
_proto.getBreakpoint = function getBreakpoint(key) {
|
|
628
|
+
var breakpoint = key;
|
|
629
|
+
|
|
630
|
+
if (this.parent.settings.breakpoints && this.parent.settings.breakpoints[key]) {
|
|
631
|
+
breakpoint = this.parent.settings.breakpoints[key];
|
|
632
|
+
} else if (getComputedStyle(document.body).getPropertyValue(this.prefix + key)) {
|
|
633
|
+
breakpoint = getComputedStyle(document.body).getPropertyValue(this.prefix + key);
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
return breakpoint;
|
|
637
|
+
};
|
|
638
|
+
|
|
639
|
+
_proto.getVariablePrefix = function getVariablePrefix() {
|
|
640
|
+
var prefix = '--';
|
|
641
|
+
prefix += getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
|
|
642
|
+
prefix += 'breakpoint-';
|
|
643
|
+
return prefix;
|
|
644
|
+
};
|
|
645
|
+
|
|
609
646
|
return Breakpoint;
|
|
610
647
|
}();
|
|
611
648
|
|
|
@@ -879,6 +916,7 @@
|
|
|
879
916
|
|
|
880
917
|
focusTarget(drawer, _this4.settings);
|
|
881
918
|
drawer.dispatchEvent(new CustomEvent(_this4.settings.customEventPrefix + 'opened', {
|
|
919
|
+
detail: _this4,
|
|
882
920
|
bubbles: true
|
|
883
921
|
}));
|
|
884
922
|
_this4.working = false;
|
|
@@ -917,6 +955,7 @@
|
|
|
917
955
|
_this6.focusTrap.destroy();
|
|
918
956
|
|
|
919
957
|
drawer.dispatchEvent(new CustomEvent(_this6.settings.customEventPrefix + 'closed', {
|
|
958
|
+
detail: _this6,
|
|
920
959
|
bubbles: true
|
|
921
960
|
}));
|
|
922
961
|
_this6.working = false;
|
|
@@ -963,10 +1002,6 @@
|
|
|
963
1002
|
|
|
964
1003
|
var handlerClick$1 = function handlerClick(event) {
|
|
965
1004
|
try {
|
|
966
|
-
var _exit2;
|
|
967
|
-
|
|
968
|
-
var _this2 = this;
|
|
969
|
-
|
|
970
1005
|
var _temp3 = function _temp3(_result) {
|
|
971
1006
|
if (_exit2) return _result;
|
|
972
1007
|
|
|
@@ -985,6 +1020,10 @@
|
|
|
985
1020
|
}
|
|
986
1021
|
};
|
|
987
1022
|
|
|
1023
|
+
var _exit2;
|
|
1024
|
+
|
|
1025
|
+
var _this2 = this;
|
|
1026
|
+
|
|
988
1027
|
// Working catch
|
|
989
1028
|
if (_this2.working) return Promise.resolve(); // Trigger click
|
|
990
1029
|
|
|
@@ -1151,6 +1190,7 @@
|
|
|
1151
1190
|
focusTarget(modal, _this2.settings);
|
|
1152
1191
|
setInert(true, _this2.settings.selectorInert);
|
|
1153
1192
|
modal.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'opened', {
|
|
1193
|
+
detail: _this2,
|
|
1154
1194
|
bubbles: true
|
|
1155
1195
|
}));
|
|
1156
1196
|
_this2.working = false;
|
|
@@ -1184,6 +1224,7 @@
|
|
|
1184
1224
|
_this4.focusTrap.destroy();
|
|
1185
1225
|
|
|
1186
1226
|
modal.dispatchEvent(new CustomEvent(_this4.settings.customEventPrefix + 'closed', {
|
|
1227
|
+
detail: _this4,
|
|
1187
1228
|
bubbles: true
|
|
1188
1229
|
}));
|
|
1189
1230
|
_this4.working = false;
|
|
@@ -1278,7 +1319,8 @@
|
|
|
1278
1319
|
|
|
1279
1320
|
for (var prop in config) {
|
|
1280
1321
|
// Get the CSS variable property values
|
|
1281
|
-
var
|
|
1322
|
+
var prefix = getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
|
|
1323
|
+
var val = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim(); // If a value was found, replace the default in config obj
|
|
1282
1324
|
|
|
1283
1325
|
if (val) {
|
|
1284
1326
|
config[prop] = val;
|
|
@@ -1599,17 +1641,42 @@
|
|
|
1599
1641
|
return placement.split('-')[0];
|
|
1600
1642
|
}
|
|
1601
1643
|
|
|
1602
|
-
|
|
1644
|
+
var max = Math.max;
|
|
1645
|
+
var min = Math.min;
|
|
1646
|
+
var round = Math.round;
|
|
1647
|
+
|
|
1648
|
+
function getBoundingClientRect(element, includeScale) {
|
|
1649
|
+
if (includeScale === void 0) {
|
|
1650
|
+
includeScale = false;
|
|
1651
|
+
}
|
|
1652
|
+
|
|
1603
1653
|
var rect = element.getBoundingClientRect();
|
|
1654
|
+
var scaleX = 1;
|
|
1655
|
+
var scaleY = 1;
|
|
1656
|
+
|
|
1657
|
+
if (isHTMLElement(element) && includeScale) {
|
|
1658
|
+
var offsetHeight = element.offsetHeight;
|
|
1659
|
+
var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
|
|
1660
|
+
// Fallback to 1 in case both values are `0`
|
|
1661
|
+
|
|
1662
|
+
if (offsetWidth > 0) {
|
|
1663
|
+
scaleX = round(rect.width) / offsetWidth || 1;
|
|
1664
|
+
}
|
|
1665
|
+
|
|
1666
|
+
if (offsetHeight > 0) {
|
|
1667
|
+
scaleY = round(rect.height) / offsetHeight || 1;
|
|
1668
|
+
}
|
|
1669
|
+
}
|
|
1670
|
+
|
|
1604
1671
|
return {
|
|
1605
|
-
width: rect.width,
|
|
1606
|
-
height: rect.height,
|
|
1607
|
-
top: rect.top,
|
|
1608
|
-
right: rect.right,
|
|
1609
|
-
bottom: rect.bottom,
|
|
1610
|
-
left: rect.left,
|
|
1611
|
-
x: rect.left,
|
|
1612
|
-
y: rect.top
|
|
1672
|
+
width: rect.width / scaleX,
|
|
1673
|
+
height: rect.height / scaleY,
|
|
1674
|
+
top: rect.top / scaleY,
|
|
1675
|
+
right: rect.right / scaleX,
|
|
1676
|
+
bottom: rect.bottom / scaleY,
|
|
1677
|
+
left: rect.left / scaleX,
|
|
1678
|
+
x: rect.left / scaleX,
|
|
1679
|
+
y: rect.top / scaleY
|
|
1613
1680
|
};
|
|
1614
1681
|
}
|
|
1615
1682
|
|
|
@@ -1754,13 +1821,13 @@
|
|
|
1754
1821
|
return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
|
|
1755
1822
|
}
|
|
1756
1823
|
|
|
1757
|
-
var max = Math.max;
|
|
1758
|
-
var min = Math.min;
|
|
1759
|
-
var round = Math.round;
|
|
1760
|
-
|
|
1761
1824
|
function within(min$1, value, max$1) {
|
|
1762
1825
|
return max(min$1, min(value, max$1));
|
|
1763
1826
|
}
|
|
1827
|
+
function withinMaxClamp(min, value, max) {
|
|
1828
|
+
var v = within(min, value, max);
|
|
1829
|
+
return v > max ? max : v;
|
|
1830
|
+
}
|
|
1764
1831
|
|
|
1765
1832
|
function getFreshSideObject() {
|
|
1766
1833
|
return {
|
|
@@ -1864,6 +1931,10 @@
|
|
|
1864
1931
|
requiresIfExists: ['preventOverflow']
|
|
1865
1932
|
};
|
|
1866
1933
|
|
|
1934
|
+
function getVariation(placement) {
|
|
1935
|
+
return placement.split('-')[1];
|
|
1936
|
+
}
|
|
1937
|
+
|
|
1867
1938
|
var unsetSides = {
|
|
1868
1939
|
top: 'auto',
|
|
1869
1940
|
right: 'auto',
|
|
@@ -1879,8 +1950,8 @@
|
|
|
1879
1950
|
var win = window;
|
|
1880
1951
|
var dpr = win.devicePixelRatio || 1;
|
|
1881
1952
|
return {
|
|
1882
|
-
x: round(
|
|
1883
|
-
y: round(
|
|
1953
|
+
x: round(x * dpr) / dpr || 0,
|
|
1954
|
+
y: round(y * dpr) / dpr || 0
|
|
1884
1955
|
};
|
|
1885
1956
|
}
|
|
1886
1957
|
|
|
@@ -1890,18 +1961,28 @@
|
|
|
1890
1961
|
var popper = _ref2.popper,
|
|
1891
1962
|
popperRect = _ref2.popperRect,
|
|
1892
1963
|
placement = _ref2.placement,
|
|
1964
|
+
variation = _ref2.variation,
|
|
1893
1965
|
offsets = _ref2.offsets,
|
|
1894
1966
|
position = _ref2.position,
|
|
1895
1967
|
gpuAcceleration = _ref2.gpuAcceleration,
|
|
1896
1968
|
adaptive = _ref2.adaptive,
|
|
1897
|
-
roundOffsets = _ref2.roundOffsets
|
|
1898
|
-
|
|
1899
|
-
var
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1969
|
+
roundOffsets = _ref2.roundOffsets,
|
|
1970
|
+
isFixed = _ref2.isFixed;
|
|
1971
|
+
var _offsets$x = offsets.x,
|
|
1972
|
+
x = _offsets$x === void 0 ? 0 : _offsets$x,
|
|
1973
|
+
_offsets$y = offsets.y,
|
|
1974
|
+
y = _offsets$y === void 0 ? 0 : _offsets$y;
|
|
1975
|
+
|
|
1976
|
+
var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
|
|
1977
|
+
x: x,
|
|
1978
|
+
y: y
|
|
1979
|
+
}) : {
|
|
1980
|
+
x: x,
|
|
1981
|
+
y: y
|
|
1982
|
+
};
|
|
1904
1983
|
|
|
1984
|
+
x = _ref3.x;
|
|
1985
|
+
y = _ref3.y;
|
|
1905
1986
|
var hasX = offsets.hasOwnProperty('x');
|
|
1906
1987
|
var hasY = offsets.hasOwnProperty('y');
|
|
1907
1988
|
var sideX = left;
|
|
@@ -1916,7 +1997,7 @@
|
|
|
1916
1997
|
if (offsetParent === getWindow(popper)) {
|
|
1917
1998
|
offsetParent = getDocumentElement(popper);
|
|
1918
1999
|
|
|
1919
|
-
if (getComputedStyle$1(offsetParent).position !== 'static') {
|
|
2000
|
+
if (getComputedStyle$1(offsetParent).position !== 'static' && position === 'absolute') {
|
|
1920
2001
|
heightProp = 'scrollHeight';
|
|
1921
2002
|
widthProp = 'scrollWidth';
|
|
1922
2003
|
}
|
|
@@ -1925,17 +2006,19 @@
|
|
|
1925
2006
|
|
|
1926
2007
|
offsetParent = offsetParent;
|
|
1927
2008
|
|
|
1928
|
-
if (placement === top) {
|
|
1929
|
-
sideY = bottom;
|
|
1930
|
-
|
|
1931
|
-
|
|
2009
|
+
if (placement === top || (placement === left || placement === right) && variation === end) {
|
|
2010
|
+
sideY = bottom;
|
|
2011
|
+
var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
|
|
2012
|
+
offsetParent[heightProp];
|
|
2013
|
+
y -= offsetY - popperRect.height;
|
|
1932
2014
|
y *= gpuAcceleration ? 1 : -1;
|
|
1933
2015
|
}
|
|
1934
2016
|
|
|
1935
|
-
if (placement === left) {
|
|
1936
|
-
sideX = right;
|
|
1937
|
-
|
|
1938
|
-
|
|
2017
|
+
if (placement === left || (placement === top || placement === bottom) && variation === end) {
|
|
2018
|
+
sideX = right;
|
|
2019
|
+
var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
|
|
2020
|
+
offsetParent[widthProp];
|
|
2021
|
+
x -= offsetX - popperRect.width;
|
|
1939
2022
|
x *= gpuAcceleration ? 1 : -1;
|
|
1940
2023
|
}
|
|
1941
2024
|
}
|
|
@@ -1944,18 +2027,29 @@
|
|
|
1944
2027
|
position: position
|
|
1945
2028
|
}, adaptive && unsetSides);
|
|
1946
2029
|
|
|
2030
|
+
var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
|
|
2031
|
+
x: x,
|
|
2032
|
+
y: y
|
|
2033
|
+
}) : {
|
|
2034
|
+
x: x,
|
|
2035
|
+
y: y
|
|
2036
|
+
};
|
|
2037
|
+
|
|
2038
|
+
x = _ref4.x;
|
|
2039
|
+
y = _ref4.y;
|
|
2040
|
+
|
|
1947
2041
|
if (gpuAcceleration) {
|
|
1948
2042
|
var _Object$assign;
|
|
1949
2043
|
|
|
1950
|
-
return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1)
|
|
2044
|
+
return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
|
|
1951
2045
|
}
|
|
1952
2046
|
|
|
1953
2047
|
return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
|
|
1954
2048
|
}
|
|
1955
2049
|
|
|
1956
|
-
function computeStyles(
|
|
1957
|
-
var state =
|
|
1958
|
-
options =
|
|
2050
|
+
function computeStyles(_ref5) {
|
|
2051
|
+
var state = _ref5.state,
|
|
2052
|
+
options = _ref5.options;
|
|
1959
2053
|
var _options$gpuAccelerat = options.gpuAcceleration,
|
|
1960
2054
|
gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
|
|
1961
2055
|
_options$adaptive = options.adaptive,
|
|
@@ -1965,9 +2059,11 @@
|
|
|
1965
2059
|
|
|
1966
2060
|
var commonStyles = {
|
|
1967
2061
|
placement: getBasePlacement(state.placement),
|
|
2062
|
+
variation: getVariation(state.placement),
|
|
1968
2063
|
popper: state.elements.popper,
|
|
1969
2064
|
popperRect: state.rects.popper,
|
|
1970
|
-
gpuAcceleration: gpuAcceleration
|
|
2065
|
+
gpuAcceleration: gpuAcceleration,
|
|
2066
|
+
isFixed: state.options.strategy === 'fixed'
|
|
1971
2067
|
};
|
|
1972
2068
|
|
|
1973
2069
|
if (state.modifiersData.popperOffsets != null) {
|
|
@@ -2225,7 +2321,7 @@
|
|
|
2225
2321
|
}
|
|
2226
2322
|
|
|
2227
2323
|
function getClientRectFromMixedType(element, clippingParent) {
|
|
2228
|
-
return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) :
|
|
2324
|
+
return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
|
|
2229
2325
|
} // A "clipping parent" is an overflowable container with the characteristic of
|
|
2230
2326
|
// clipping (or hiding) overflowing elements with a position different from
|
|
2231
2327
|
// `initial`
|
|
@@ -2267,10 +2363,6 @@
|
|
|
2267
2363
|
return clippingRect;
|
|
2268
2364
|
}
|
|
2269
2365
|
|
|
2270
|
-
function getVariation(placement) {
|
|
2271
|
-
return placement.split('-')[1];
|
|
2272
|
-
}
|
|
2273
|
-
|
|
2274
2366
|
function computeOffsets(_ref) {
|
|
2275
2367
|
var reference = _ref.reference,
|
|
2276
2368
|
element = _ref.element,
|
|
@@ -2356,11 +2448,10 @@
|
|
|
2356
2448
|
padding = _options$padding === void 0 ? 0 : _options$padding;
|
|
2357
2449
|
var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
|
|
2358
2450
|
var altContext = elementContext === popper ? reference : popper;
|
|
2359
|
-
var referenceElement = state.elements.reference;
|
|
2360
2451
|
var popperRect = state.rects.popper;
|
|
2361
2452
|
var element = state.elements[altBoundary ? altContext : elementContext];
|
|
2362
2453
|
var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
|
|
2363
|
-
var referenceClientRect = getBoundingClientRect(
|
|
2454
|
+
var referenceClientRect = getBoundingClientRect(state.elements.reference);
|
|
2364
2455
|
var popperOffsets = computeOffsets({
|
|
2365
2456
|
reference: referenceClientRect,
|
|
2366
2457
|
element: popperRect,
|
|
@@ -2743,6 +2834,14 @@
|
|
|
2743
2834
|
var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
|
|
2744
2835
|
placement: state.placement
|
|
2745
2836
|
})) : tetherOffset;
|
|
2837
|
+
var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
|
|
2838
|
+
mainAxis: tetherOffsetValue,
|
|
2839
|
+
altAxis: tetherOffsetValue
|
|
2840
|
+
} : Object.assign({
|
|
2841
|
+
mainAxis: 0,
|
|
2842
|
+
altAxis: 0
|
|
2843
|
+
}, tetherOffsetValue);
|
|
2844
|
+
var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
|
|
2746
2845
|
var data = {
|
|
2747
2846
|
x: 0,
|
|
2748
2847
|
y: 0
|
|
@@ -2752,13 +2851,15 @@
|
|
|
2752
2851
|
return;
|
|
2753
2852
|
}
|
|
2754
2853
|
|
|
2755
|
-
if (checkMainAxis
|
|
2854
|
+
if (checkMainAxis) {
|
|
2855
|
+
var _offsetModifierState$;
|
|
2856
|
+
|
|
2756
2857
|
var mainSide = mainAxis === 'y' ? top : left;
|
|
2757
2858
|
var altSide = mainAxis === 'y' ? bottom : right;
|
|
2758
2859
|
var len = mainAxis === 'y' ? 'height' : 'width';
|
|
2759
2860
|
var offset = popperOffsets[mainAxis];
|
|
2760
|
-
var min$1 =
|
|
2761
|
-
var max$1 =
|
|
2861
|
+
var min$1 = offset + overflow[mainSide];
|
|
2862
|
+
var max$1 = offset - overflow[altSide];
|
|
2762
2863
|
var additive = tether ? -popperRect[len] / 2 : 0;
|
|
2763
2864
|
var minLen = variation === start ? referenceRect[len] : popperRect[len];
|
|
2764
2865
|
var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
|
|
@@ -2778,36 +2879,45 @@
|
|
|
2778
2879
|
// width or height)
|
|
2779
2880
|
|
|
2780
2881
|
var arrowLen = within(0, referenceRect[len], arrowRect[len]);
|
|
2781
|
-
var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin -
|
|
2782
|
-
var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax +
|
|
2882
|
+
var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
|
|
2883
|
+
var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
|
|
2783
2884
|
var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
|
|
2784
2885
|
var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
|
|
2785
|
-
var offsetModifierValue =
|
|
2786
|
-
var tetherMin =
|
|
2787
|
-
var tetherMax =
|
|
2886
|
+
var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
|
|
2887
|
+
var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
|
|
2888
|
+
var tetherMax = offset + maxOffset - offsetModifierValue;
|
|
2889
|
+
var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
|
|
2890
|
+
popperOffsets[mainAxis] = preventedOffset;
|
|
2891
|
+
data[mainAxis] = preventedOffset - offset;
|
|
2892
|
+
}
|
|
2788
2893
|
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
popperOffsets[mainAxis] = preventedOffset;
|
|
2792
|
-
data[mainAxis] = preventedOffset - offset;
|
|
2793
|
-
}
|
|
2894
|
+
if (checkAltAxis) {
|
|
2895
|
+
var _offsetModifierState$2;
|
|
2794
2896
|
|
|
2795
|
-
|
|
2796
|
-
var _mainSide = mainAxis === 'x' ? top : left;
|
|
2897
|
+
var _mainSide = mainAxis === 'x' ? top : left;
|
|
2797
2898
|
|
|
2798
|
-
|
|
2899
|
+
var _altSide = mainAxis === 'x' ? bottom : right;
|
|
2799
2900
|
|
|
2800
|
-
|
|
2901
|
+
var _offset = popperOffsets[altAxis];
|
|
2801
2902
|
|
|
2802
|
-
|
|
2903
|
+
var _len = altAxis === 'y' ? 'height' : 'width';
|
|
2803
2904
|
|
|
2804
|
-
|
|
2905
|
+
var _min = _offset + overflow[_mainSide];
|
|
2805
2906
|
|
|
2806
|
-
|
|
2907
|
+
var _max = _offset - overflow[_altSide];
|
|
2807
2908
|
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2909
|
+
var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
|
|
2910
|
+
|
|
2911
|
+
var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
|
|
2912
|
+
|
|
2913
|
+
var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
|
|
2914
|
+
|
|
2915
|
+
var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
|
|
2916
|
+
|
|
2917
|
+
var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
|
|
2918
|
+
|
|
2919
|
+
popperOffsets[altAxis] = _preventedOffset;
|
|
2920
|
+
data[altAxis] = _preventedOffset - _offset;
|
|
2811
2921
|
}
|
|
2812
2922
|
|
|
2813
2923
|
state.modifiersData[name] = data;
|
|
@@ -2837,16 +2947,24 @@
|
|
|
2837
2947
|
}
|
|
2838
2948
|
}
|
|
2839
2949
|
|
|
2950
|
+
function isElementScaled(element) {
|
|
2951
|
+
var rect = element.getBoundingClientRect();
|
|
2952
|
+
var scaleX = round(rect.width) / element.offsetWidth || 1;
|
|
2953
|
+
var scaleY = round(rect.height) / element.offsetHeight || 1;
|
|
2954
|
+
return scaleX !== 1 || scaleY !== 1;
|
|
2955
|
+
} // Returns the composite rect of an element relative to its offsetParent.
|
|
2840
2956
|
// Composite means it takes into account transforms as well as layout.
|
|
2841
2957
|
|
|
2958
|
+
|
|
2842
2959
|
function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
|
|
2843
2960
|
if (isFixed === void 0) {
|
|
2844
2961
|
isFixed = false;
|
|
2845
2962
|
}
|
|
2846
2963
|
|
|
2847
|
-
var documentElement = getDocumentElement(offsetParent);
|
|
2848
|
-
var rect = getBoundingClientRect(elementOrVirtualElement);
|
|
2849
2964
|
var isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
2965
|
+
var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
|
|
2966
|
+
var documentElement = getDocumentElement(offsetParent);
|
|
2967
|
+
var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
|
|
2850
2968
|
var scroll = {
|
|
2851
2969
|
scrollLeft: 0,
|
|
2852
2970
|
scrollTop: 0
|
|
@@ -2863,7 +2981,7 @@
|
|
|
2863
2981
|
}
|
|
2864
2982
|
|
|
2865
2983
|
if (isHTMLElement(offsetParent)) {
|
|
2866
|
-
offsets = getBoundingClientRect(offsetParent);
|
|
2984
|
+
offsets = getBoundingClientRect(offsetParent, true);
|
|
2867
2985
|
offsets.x += offsetParent.clientLeft;
|
|
2868
2986
|
offsets.y += offsetParent.clientTop;
|
|
2869
2987
|
} else if (documentElement) {
|
|
@@ -3000,7 +3118,8 @@
|
|
|
3000
3118
|
var isDestroyed = false;
|
|
3001
3119
|
var instance = {
|
|
3002
3120
|
state: state,
|
|
3003
|
-
setOptions: function setOptions(
|
|
3121
|
+
setOptions: function setOptions(setOptionsAction) {
|
|
3122
|
+
var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
|
|
3004
3123
|
cleanupModifierEffects();
|
|
3005
3124
|
state.options = Object.assign({}, defaultOptions, state.options, options);
|
|
3006
3125
|
state.scrollParents = {
|