@razorpay/blade 10.19.1 → 10.20.1
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/build/components/index.d.ts +5 -2
- package/build/components/index.development.web.js +197 -206
- package/build/components/index.development.web.js.map +1 -1
- package/build/components/index.native.d.ts +4 -1
- package/build/components/index.native.js +3 -3
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.production.web.js +197 -206
- package/build/components/index.production.web.js.map +1 -1
- package/build/css/bankingThemeDarkDesktop.css +1 -1
- package/build/css/bankingThemeDarkMobile.css +1 -1
- package/build/css/bankingThemeLightDesktop.css +1 -1
- package/build/css/bankingThemeLightMobile.css +1 -1
- package/build/css/paymentThemeDarkDesktop.css +1 -1
- package/build/css/paymentThemeDarkMobile.css +1 -1
- package/build/css/paymentThemeLightDesktop.css +1 -1
- package/build/css/paymentThemeLightMobile.css +1 -1
- package/package.json +2 -2
|
@@ -2,11 +2,11 @@ import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import React__default, { useMemo, useCallback, useState, useRef, useEffect, useContext, createContext, Fragment as Fragment$1, useImperativeHandle, forwardRef, Children, cloneElement } from 'react';
|
|
4
4
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
5
|
-
import styled, { ThemeProvider, css as css$1, keyframes } from 'styled-components';
|
|
5
|
+
import styled, { ThemeProvider, StyleSheetManager, css as css$1, keyframes } from 'styled-components';
|
|
6
6
|
import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
|
|
7
7
|
import { FloatingDelayGroup, useFloating, offset, flip, size as size$1, autoUpdate, useTransitionStyles, FloatingOverlay, FloatingPortal, FloatingFocusManager, CompositeItem, Composite, FloatingArrow, shift, arrow, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, useClick, useDismiss } from '@floating-ui/react';
|
|
8
8
|
import '@babel/runtime/helpers/typeof';
|
|
9
|
-
import _toConsumableArray
|
|
9
|
+
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
10
10
|
import { jsx as jsx$1, jsxs, Fragment } from 'react/jsx-runtime';
|
|
11
11
|
import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
|
|
12
12
|
import _createClass from '@babel/runtime/helpers/createClass';
|
|
@@ -3004,6 +3004,19 @@ var getBaseBoxStyles = function getBaseBoxStyles(props) {
|
|
|
3004
3004
|
return _objectSpread$6y(_objectSpread$6y({}, getAllProps(props)), getAllMediaQueries(props));
|
|
3005
3005
|
};
|
|
3006
3006
|
|
|
3007
|
+
function createStylisCSSHigherSpecificityPlugin() {
|
|
3008
|
+
var stylisCSSHigherSpecificity = function stylisCSSHigherSpecificity(context, _, selectors) {
|
|
3009
|
+
if (context !== -1) return;
|
|
3010
|
+
var _selectors = _slicedToArray(selectors, 1),
|
|
3011
|
+
selector = _selectors[0];
|
|
3012
|
+
selectors[0] = "".concat(selector.repeat(5));
|
|
3013
|
+
};
|
|
3014
|
+
Object.defineProperty(stylisCSSHigherSpecificity, 'name', {
|
|
3015
|
+
value: 'stylisCSSHigherSpecificity'
|
|
3016
|
+
});
|
|
3017
|
+
return stylisCSSHigherSpecificity;
|
|
3018
|
+
}
|
|
3019
|
+
|
|
3007
3020
|
function ownKeys$6y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3008
3021
|
function _objectSpread$6x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6y(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
3009
3022
|
/**
|
|
@@ -3063,12 +3076,12 @@ var BottomSheetStackProvider = function BottomSheetStackProvider(_ref) {
|
|
|
3063
3076
|
}, [stack]);
|
|
3064
3077
|
var addBottomSheetToStack = React__default.useCallback(function (id) {
|
|
3065
3078
|
setStack(function (prev) {
|
|
3066
|
-
return [id].concat(_toConsumableArray
|
|
3079
|
+
return [id].concat(_toConsumableArray(prev));
|
|
3067
3080
|
});
|
|
3068
3081
|
}, []);
|
|
3069
3082
|
var removeBottomSheetFromStack = React__default.useCallback(function (id) {
|
|
3070
3083
|
setStack(function (prev) {
|
|
3071
|
-
var newStack = _toConsumableArray
|
|
3084
|
+
var newStack = _toConsumableArray(prev);
|
|
3072
3085
|
var popped = newStack.shift();
|
|
3073
3086
|
// only pop the stack if the passed in id is matched to the top of the stack
|
|
3074
3087
|
if (popped === id) return newStack;
|
|
@@ -3119,8 +3132,11 @@ var BladeProvider = function BladeProvider(_ref) {
|
|
|
3119
3132
|
delay: tooltipDelays,
|
|
3120
3133
|
children: /*#__PURE__*/jsx$1(ThemeProvider, {
|
|
3121
3134
|
theme: theme,
|
|
3122
|
-
children: /*#__PURE__*/jsx$1(
|
|
3123
|
-
|
|
3135
|
+
children: /*#__PURE__*/jsx$1(StyleSheetManager, {
|
|
3136
|
+
stylisPlugins: [createStylisCSSHigherSpecificityPlugin()],
|
|
3137
|
+
children: /*#__PURE__*/jsx$1(BottomSheetStackProvider, {
|
|
3138
|
+
children: children
|
|
3139
|
+
})
|
|
3124
3140
|
})
|
|
3125
3141
|
})
|
|
3126
3142
|
})
|
|
@@ -12854,6 +12870,7 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
|
|
|
12854
12870
|
_ref$textDecorationLi = _ref.textDecorationLine,
|
|
12855
12871
|
textDecorationLine = _ref$textDecorationLi === void 0 ? 'none' : _ref$textDecorationLi,
|
|
12856
12872
|
numberOfLines = _ref.numberOfLines,
|
|
12873
|
+
wordBreak = _ref.wordBreak,
|
|
12857
12874
|
_ref$lineHeight = _ref.lineHeight,
|
|
12858
12875
|
lineHeight = _ref$lineHeight === void 0 ? 100 : _ref$lineHeight,
|
|
12859
12876
|
textAlign = _ref.textAlign,
|
|
@@ -12864,6 +12881,7 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
|
|
|
12864
12881
|
var themeFontWeight = theme.typography.fonts.weight[fontWeight];
|
|
12865
12882
|
var themeLineHeight = makeTypographySize(theme.typography.lineHeights[lineHeight]);
|
|
12866
12883
|
var truncateStyles = {};
|
|
12884
|
+
var wordBreakStyles = {};
|
|
12867
12885
|
if (numberOfLines !== undefined) {
|
|
12868
12886
|
if (isReactNative$4()) {
|
|
12869
12887
|
truncateStyles = {};
|
|
@@ -12877,7 +12895,16 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
|
|
|
12877
12895
|
};
|
|
12878
12896
|
}
|
|
12879
12897
|
}
|
|
12880
|
-
|
|
12898
|
+
if (wordBreak !== undefined) {
|
|
12899
|
+
if (isReactNative$4()) {
|
|
12900
|
+
wordBreakStyles = {};
|
|
12901
|
+
} else {
|
|
12902
|
+
wordBreakStyles = {
|
|
12903
|
+
wordBreak: wordBreak
|
|
12904
|
+
};
|
|
12905
|
+
}
|
|
12906
|
+
}
|
|
12907
|
+
return _objectSpread$21(_objectSpread$21(_objectSpread$21({
|
|
12881
12908
|
color: textColor,
|
|
12882
12909
|
fontFamily: themeFontFamily,
|
|
12883
12910
|
fontSize: themeFontSize,
|
|
@@ -12891,11 +12918,11 @@ var getBaseTextStyles = function getBaseTextStyles(_ref) {
|
|
|
12891
12918
|
textAlign: textAlign,
|
|
12892
12919
|
margin: 0,
|
|
12893
12920
|
padding: 0
|
|
12894
|
-
}, truncateStyles);
|
|
12921
|
+
}, truncateStyles), wordBreakStyles);
|
|
12895
12922
|
};
|
|
12896
12923
|
|
|
12897
|
-
var _excluded$R = ["color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "numberOfLines", "lineHeight", "textAlign"],
|
|
12898
|
-
_excluded2$1 = ["id", "color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "lineHeight", "as", "textAlign", "children", "truncateAfterLines", "className", "style", "accessibilityProps", "componentName", "testID"];
|
|
12924
|
+
var _excluded$R = ["color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "numberOfLines", "lineHeight", "textAlign", "wordBreak"],
|
|
12925
|
+
_excluded2$1 = ["id", "color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "textDecorationLine", "lineHeight", "as", "textAlign", "children", "truncateAfterLines", "wordBreak", "className", "style", "accessibilityProps", "componentName", "testID"];
|
|
12899
12926
|
function ownKeys$21(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
12900
12927
|
function _objectSpread$20(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$21(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$21(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
12901
12928
|
var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
|
|
@@ -12911,6 +12938,7 @@ var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
|
|
|
12911
12938
|
numberOfLines = _ref.numberOfLines,
|
|
12912
12939
|
lineHeight = _ref.lineHeight,
|
|
12913
12940
|
textAlign = _ref.textAlign,
|
|
12941
|
+
wordBreak = _ref.wordBreak,
|
|
12914
12942
|
props = _objectWithoutProperties$1(_ref, _excluded$R);
|
|
12915
12943
|
var styledPropsCSSObject = useStyledProps(props);
|
|
12916
12944
|
return _objectSpread$20(_objectSpread$20({}, getBaseTextStyles({
|
|
@@ -12923,6 +12951,7 @@ var StyledBaseText = /*#__PURE__*/styled.div.withConfig({
|
|
|
12923
12951
|
numberOfLines: numberOfLines,
|
|
12924
12952
|
lineHeight: lineHeight,
|
|
12925
12953
|
textAlign: textAlign,
|
|
12954
|
+
wordBreak: wordBreak,
|
|
12926
12955
|
theme: props.theme
|
|
12927
12956
|
})), styledPropsCSSObject);
|
|
12928
12957
|
});
|
|
@@ -12939,6 +12968,7 @@ var BaseText = function BaseText(_ref2) {
|
|
|
12939
12968
|
textAlign = _ref2.textAlign,
|
|
12940
12969
|
children = _ref2.children,
|
|
12941
12970
|
truncateAfterLines = _ref2.truncateAfterLines,
|
|
12971
|
+
wordBreak = _ref2.wordBreak,
|
|
12942
12972
|
className = _ref2.className,
|
|
12943
12973
|
style = _ref2.style,
|
|
12944
12974
|
_ref2$accessibilityPr = _ref2.accessibilityProps,
|
|
@@ -12958,6 +12988,7 @@ var BaseText = function BaseText(_ref2) {
|
|
|
12958
12988
|
as: as,
|
|
12959
12989
|
textAlign: textAlign,
|
|
12960
12990
|
numberOfLines: truncateAfterLines,
|
|
12991
|
+
wordBreak: wordBreak,
|
|
12961
12992
|
className: className,
|
|
12962
12993
|
style: style,
|
|
12963
12994
|
id: id
|
|
@@ -13157,7 +13188,7 @@ var Heading = function Heading(_ref2) {
|
|
|
13157
13188
|
}));
|
|
13158
13189
|
};
|
|
13159
13190
|
|
|
13160
|
-
var _excluded$O = ["as", "variant", "weight", "size", "type", "contrast", "truncateAfterLines", "children", "color", "testID", "textAlign", "textDecorationLine"];
|
|
13191
|
+
var _excluded$O = ["as", "variant", "weight", "size", "type", "contrast", "truncateAfterLines", "children", "color", "testID", "textAlign", "textDecorationLine", "wordBreak"];
|
|
13161
13192
|
function ownKeys$1_(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
13162
13193
|
function _objectSpread$1Z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1_(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1_(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
13163
13194
|
var validAsValues$1 = ['p', 'span', 'div', 'abbr', 'figcaption', 'cite', 'q'];
|
|
@@ -13236,10 +13267,12 @@ var _Text = function _Text(_ref2) {
|
|
|
13236
13267
|
testID = _ref2.testID,
|
|
13237
13268
|
textAlign = _ref2.textAlign,
|
|
13238
13269
|
textDecorationLine = _ref2.textDecorationLine,
|
|
13270
|
+
wordBreak = _ref2.wordBreak,
|
|
13239
13271
|
styledProps = _objectWithoutProperties$1(_ref2, _excluded$O);
|
|
13240
13272
|
var props = _objectSpread$1Z({
|
|
13241
13273
|
as: as,
|
|
13242
|
-
truncateAfterLines: truncateAfterLines
|
|
13274
|
+
truncateAfterLines: truncateAfterLines,
|
|
13275
|
+
wordBreak: wordBreak
|
|
13243
13276
|
}, getTextProps({
|
|
13244
13277
|
variant: variant,
|
|
13245
13278
|
type: type,
|
|
@@ -13574,7 +13607,7 @@ function getActionFromKey(e, isOpen, dropdownTriggerer) {
|
|
|
13574
13607
|
**/
|
|
13575
13608
|
function getIndexByLetter(options, filter) {
|
|
13576
13609
|
var startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
13577
|
-
var orderedOptions = [].concat(_toConsumableArray
|
|
13610
|
+
var orderedOptions = [].concat(_toConsumableArray(options.slice(startIndex)), _toConsumableArray(options.slice(0, startIndex)));
|
|
13578
13611
|
var firstMatch = filterOptions(orderedOptions, filter)[0];
|
|
13579
13612
|
var allSameLetter = function allSameLetter(array) {
|
|
13580
13613
|
return array.every(function (letter) {
|
|
@@ -13836,7 +13869,7 @@ var useDropdown = function useDropdown() {
|
|
|
13836
13869
|
if (existingItemIndex < 0) {
|
|
13837
13870
|
return;
|
|
13838
13871
|
}
|
|
13839
|
-
setIndices([].concat(_toConsumableArray
|
|
13872
|
+
setIndices([].concat(_toConsumableArray(selectedIndices.slice(0, existingItemIndex)), _toConsumableArray(selectedIndices.slice(existingItemIndex + 1))));
|
|
13840
13873
|
};
|
|
13841
13874
|
|
|
13842
13875
|
/**
|
|
@@ -13858,7 +13891,7 @@ var useDropdown = function useDropdown() {
|
|
|
13858
13891
|
removeOption(index);
|
|
13859
13892
|
isSelected = false;
|
|
13860
13893
|
} else {
|
|
13861
|
-
setIndices([].concat(_toConsumableArray
|
|
13894
|
+
setIndices([].concat(_toConsumableArray(selectedIndices), [index]));
|
|
13862
13895
|
isSelected = true;
|
|
13863
13896
|
}
|
|
13864
13897
|
} else {
|
|
@@ -14931,6 +14964,7 @@ var FormLabel = function FormLabel(_ref) {
|
|
|
14931
14964
|
size: isLabelLeftPositioned ? 'medium' : 'small',
|
|
14932
14965
|
truncateAfterLines: 2,
|
|
14933
14966
|
weight: "bold",
|
|
14967
|
+
wordBreak: isLabelLeftPositioned ? 'break-word' : undefined,
|
|
14934
14968
|
children: children
|
|
14935
14969
|
}), computedAccessibilityNode, necessityLabel]
|
|
14936
14970
|
});
|
|
@@ -20382,7 +20416,8 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
|
|
|
20382
20416
|
var children = _ref.children,
|
|
20383
20417
|
testID = _ref.testID,
|
|
20384
20418
|
_ref$zIndex = _ref.zIndex,
|
|
20385
|
-
zIndex = _ref$zIndex === void 0 ? OVERLAY_ZINDEX : _ref$zIndex
|
|
20419
|
+
zIndex = _ref$zIndex === void 0 ? OVERLAY_ZINDEX : _ref$zIndex,
|
|
20420
|
+
width = _ref.width;
|
|
20386
20421
|
var _useDropdown = useDropdown(),
|
|
20387
20422
|
isOpen = _useDropdown.isOpen,
|
|
20388
20423
|
triggererRef = _useDropdown.triggererRef,
|
|
@@ -20456,7 +20491,7 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
|
|
|
20456
20491
|
isInBottomSheet: bottomSheetAndDropdownGlue === null || bottomSheetAndDropdownGlue === void 0 ? void 0 : bottomSheetAndDropdownGlue.dropdownHasBottomSheet,
|
|
20457
20492
|
elevation: bottomSheetAndDropdownGlue !== null && bottomSheetAndDropdownGlue !== void 0 && bottomSheetAndDropdownGlue.dropdownHasBottomSheet ? undefined : 'midRaised',
|
|
20458
20493
|
style: _objectSpread$1d({}, styles),
|
|
20459
|
-
width:
|
|
20494
|
+
width: width ? width : '100%'
|
|
20460
20495
|
}, metaAttribute({
|
|
20461
20496
|
name: MetaConstants.DropdownOverlay,
|
|
20462
20497
|
testID: testID
|
|
@@ -32288,7 +32323,7 @@ var _TableRow = function _TableRow(_ref8) {
|
|
|
32288
32323
|
useEffect(function () {
|
|
32289
32324
|
if (isDisabled) {
|
|
32290
32325
|
setDisabledRows(function (prev) {
|
|
32291
|
-
return [].concat(_toConsumableArray
|
|
32326
|
+
return [].concat(_toConsumableArray(prev), [item.id]);
|
|
32292
32327
|
});
|
|
32293
32328
|
}
|
|
32294
32329
|
}, [isDisabled, item.id, setDisabledRows]);
|
|
@@ -34928,281 +34963,237 @@ function useDrag(handler, config) {
|
|
|
34928
34963
|
}, config || {}, 'drag');
|
|
34929
34964
|
}
|
|
34930
34965
|
|
|
34931
|
-
|
|
34932
|
-
|
|
34933
|
-
|
|
34934
|
-
|
|
34935
|
-
|
|
34936
|
-
|
|
34937
|
-
|
|
34938
|
-
|
|
34939
|
-
if (typeof window !== 'undefined') {
|
|
34940
|
-
var passiveTestOptions = {
|
|
34966
|
+
/**
|
|
34967
|
+
* name: body-scroll-lock-upgrade
|
|
34968
|
+
* version: v1.1.0
|
|
34969
|
+
* author: Rick.li
|
|
34970
|
+
*/
|
|
34971
|
+
let hasPassiveEvents = false;
|
|
34972
|
+
if (typeof window !== "undefined") {
|
|
34973
|
+
const passiveTestOptions = {
|
|
34941
34974
|
get passive() {
|
|
34942
34975
|
hasPassiveEvents = true;
|
|
34943
|
-
return
|
|
34976
|
+
return void 0;
|
|
34944
34977
|
}
|
|
34945
34978
|
};
|
|
34946
|
-
window.addEventListener(
|
|
34947
|
-
window.removeEventListener(
|
|
34979
|
+
window.addEventListener("testPassive", null, passiveTestOptions);
|
|
34980
|
+
window.removeEventListener("testPassive", null, passiveTestOptions);
|
|
34948
34981
|
}
|
|
34949
|
-
|
|
34950
|
-
|
|
34951
|
-
|
|
34952
|
-
|
|
34953
|
-
|
|
34954
|
-
|
|
34955
|
-
|
|
34956
|
-
|
|
34957
|
-
|
|
34958
|
-
|
|
34959
|
-
|
|
34960
|
-
|
|
34961
|
-
|
|
34962
|
-
return
|
|
34963
|
-
|
|
34964
|
-
|
|
34965
|
-
|
|
34966
|
-
|
|
34967
|
-
return false;
|
|
34968
|
-
});
|
|
34969
|
-
};
|
|
34970
|
-
|
|
34971
|
-
var preventDefault = function preventDefault(rawEvent) {
|
|
34972
|
-
var e = rawEvent || window.event;
|
|
34973
|
-
|
|
34974
|
-
// For the case whereby consumers adds a touchmove event listener to document.
|
|
34975
|
-
// Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
|
|
34976
|
-
// in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
|
|
34977
|
-
// the touchmove event on document will break.
|
|
34982
|
+
const isIosDevice = typeof window !== "undefined" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1);
|
|
34983
|
+
let locks = [];
|
|
34984
|
+
let locksIndex = /* @__PURE__ */ new Map();
|
|
34985
|
+
let documentListenerAdded = false;
|
|
34986
|
+
let initialClientY = -1;
|
|
34987
|
+
let previousBodyOverflowSetting;
|
|
34988
|
+
let htmlStyle;
|
|
34989
|
+
let bodyStyle;
|
|
34990
|
+
let previousBodyPaddingRight;
|
|
34991
|
+
const allowTouchMove = (el) => locks.some((lock) => {
|
|
34992
|
+
if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
|
|
34993
|
+
return true;
|
|
34994
|
+
}
|
|
34995
|
+
return false;
|
|
34996
|
+
});
|
|
34997
|
+
const preventDefault = (rawEvent) => {
|
|
34998
|
+
const e = rawEvent || window.event;
|
|
34978
34999
|
if (allowTouchMove(e.target)) {
|
|
34979
35000
|
return true;
|
|
34980
35001
|
}
|
|
34981
|
-
|
|
34982
|
-
|
|
34983
|
-
if (e.
|
|
34984
|
-
|
|
34985
|
-
if (e.preventDefault) e.preventDefault();
|
|
34986
|
-
|
|
35002
|
+
if (e.touches.length > 1)
|
|
35003
|
+
return true;
|
|
35004
|
+
if (e.preventDefault)
|
|
35005
|
+
e.preventDefault();
|
|
34987
35006
|
return false;
|
|
34988
35007
|
};
|
|
34989
|
-
|
|
34990
|
-
|
|
34991
|
-
|
|
34992
|
-
|
|
34993
|
-
|
|
34994
|
-
|
|
34995
|
-
|
|
34996
|
-
|
|
34997
|
-
|
|
35008
|
+
const setOverflowHidden = (options) => {
|
|
35009
|
+
if (previousBodyPaddingRight === void 0) {
|
|
35010
|
+
const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
|
|
35011
|
+
const scrollBarGap = window.innerWidth - document.documentElement.getBoundingClientRect().width;
|
|
35012
|
+
if (reserveScrollBarGap && scrollBarGap > 0) {
|
|
35013
|
+
const computedBodyPaddingRight = parseInt(
|
|
35014
|
+
window.getComputedStyle(document.body).getPropertyValue("padding-right"),
|
|
35015
|
+
10
|
|
35016
|
+
);
|
|
34998
35017
|
previousBodyPaddingRight = document.body.style.paddingRight;
|
|
34999
|
-
document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap
|
|
35018
|
+
document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`;
|
|
35000
35019
|
}
|
|
35001
35020
|
}
|
|
35002
|
-
|
|
35003
|
-
// If previousBodyOverflowSetting is already set, don't set it again.
|
|
35004
|
-
if (previousBodyOverflowSetting === undefined) {
|
|
35021
|
+
if (previousBodyOverflowSetting === void 0) {
|
|
35005
35022
|
previousBodyOverflowSetting = document.body.style.overflow;
|
|
35006
|
-
document.body.style.overflow =
|
|
35023
|
+
document.body.style.overflow = "hidden";
|
|
35007
35024
|
}
|
|
35008
35025
|
};
|
|
35009
|
-
|
|
35010
|
-
|
|
35011
|
-
if (previousBodyPaddingRight !== undefined) {
|
|
35026
|
+
const restoreOverflowSetting = () => {
|
|
35027
|
+
if (previousBodyPaddingRight !== void 0) {
|
|
35012
35028
|
document.body.style.paddingRight = previousBodyPaddingRight;
|
|
35013
|
-
|
|
35014
|
-
// Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
|
|
35015
|
-
// can be set again.
|
|
35016
|
-
previousBodyPaddingRight = undefined;
|
|
35029
|
+
previousBodyPaddingRight = void 0;
|
|
35017
35030
|
}
|
|
35018
|
-
|
|
35019
|
-
if (previousBodyOverflowSetting !== undefined) {
|
|
35031
|
+
if (previousBodyOverflowSetting !== void 0) {
|
|
35020
35032
|
document.body.style.overflow = previousBodyOverflowSetting;
|
|
35021
|
-
|
|
35022
|
-
|
|
35023
|
-
|
|
35024
|
-
|
|
35033
|
+
previousBodyOverflowSetting = void 0;
|
|
35034
|
+
}
|
|
35035
|
+
};
|
|
35036
|
+
const setPositionFixed = () => window.requestAnimationFrame(() => {
|
|
35037
|
+
const $html = document.documentElement;
|
|
35038
|
+
const $body = document.body;
|
|
35039
|
+
if (bodyStyle === void 0) {
|
|
35040
|
+
htmlStyle = { ...$html.style };
|
|
35041
|
+
bodyStyle = { ...$body.style };
|
|
35042
|
+
const { scrollY, scrollX, innerHeight } = window;
|
|
35043
|
+
$html.style.height = "100%";
|
|
35044
|
+
$html.style.overflow = "hidden";
|
|
35045
|
+
$body.style.position = "fixed";
|
|
35046
|
+
$body.style.top = `${-scrollY}px`;
|
|
35047
|
+
$body.style.left = `${-scrollX}px`;
|
|
35048
|
+
$body.style.width = "100%";
|
|
35049
|
+
$body.style.height = "auto";
|
|
35050
|
+
$body.style.overflow = "hidden";
|
|
35051
|
+
setTimeout(
|
|
35052
|
+
() => window.requestAnimationFrame(() => {
|
|
35053
|
+
const bottomBarHeight = innerHeight - window.innerHeight;
|
|
35054
|
+
if (bottomBarHeight && scrollY >= innerHeight) {
|
|
35055
|
+
$body.style.top = -(scrollY + bottomBarHeight) + "px";
|
|
35056
|
+
}
|
|
35057
|
+
}),
|
|
35058
|
+
300
|
|
35059
|
+
);
|
|
35025
35060
|
}
|
|
35026
|
-
};
|
|
35027
|
-
|
|
35028
|
-
|
|
35029
|
-
|
|
35030
|
-
|
|
35031
|
-
|
|
35032
|
-
|
|
35033
|
-
|
|
35034
|
-
|
|
35035
|
-
|
|
35036
|
-
|
|
35037
|
-
|
|
35038
|
-
|
|
35039
|
-
|
|
35040
|
-
|
|
35041
|
-
scrollX = _window.scrollX,
|
|
35042
|
-
innerHeight = _window.innerHeight;
|
|
35043
|
-
|
|
35044
|
-
document.body.style.position = 'fixed';
|
|
35045
|
-
document.body.style.top = -scrollY;
|
|
35046
|
-
document.body.style.left = -scrollX;
|
|
35047
|
-
|
|
35048
|
-
setTimeout(function () {
|
|
35049
|
-
return window.requestAnimationFrame(function () {
|
|
35050
|
-
// Attempt to check if the bottom bar appeared due to the position change
|
|
35051
|
-
var bottomBarHeight = innerHeight - window.innerHeight;
|
|
35052
|
-
if (bottomBarHeight && scrollY >= innerHeight) {
|
|
35053
|
-
// Move the content further up so that the bottom bar doesn't hide it
|
|
35054
|
-
document.body.style.top = -(scrollY + bottomBarHeight);
|
|
35055
|
-
}
|
|
35056
|
-
});
|
|
35057
|
-
}, 300);
|
|
35058
|
-
}
|
|
35059
|
-
});
|
|
35060
|
-
};
|
|
35061
|
-
|
|
35062
|
-
var restorePositionSetting = function restorePositionSetting() {
|
|
35063
|
-
if (previousBodyPosition !== undefined) {
|
|
35064
|
-
// Convert the position from "px" to Int
|
|
35065
|
-
var y = -parseInt(document.body.style.top, 10);
|
|
35066
|
-
var x = -parseInt(document.body.style.left, 10);
|
|
35067
|
-
|
|
35068
|
-
// Restore styles
|
|
35069
|
-
document.body.style.position = previousBodyPosition.position;
|
|
35070
|
-
document.body.style.top = previousBodyPosition.top;
|
|
35071
|
-
document.body.style.left = previousBodyPosition.left;
|
|
35072
|
-
|
|
35073
|
-
// Restore scroll
|
|
35061
|
+
});
|
|
35062
|
+
const restorePositionSetting = () => {
|
|
35063
|
+
if (bodyStyle !== void 0) {
|
|
35064
|
+
const y = -parseInt(document.body.style.top, 10);
|
|
35065
|
+
const x = -parseInt(document.body.style.left, 10);
|
|
35066
|
+
const $html = document.documentElement;
|
|
35067
|
+
const $body = document.body;
|
|
35068
|
+
$html.style.height = (htmlStyle == null ? void 0 : htmlStyle.height) || "";
|
|
35069
|
+
$html.style.overflow = (htmlStyle == null ? void 0 : htmlStyle.overflow) || "";
|
|
35070
|
+
$body.style.position = bodyStyle.position || "";
|
|
35071
|
+
$body.style.top = bodyStyle.top || "";
|
|
35072
|
+
$body.style.left = bodyStyle.left || "";
|
|
35073
|
+
$body.style.width = bodyStyle.width || "";
|
|
35074
|
+
$body.style.height = bodyStyle.height || "";
|
|
35075
|
+
$body.style.overflow = bodyStyle.overflow || "";
|
|
35074
35076
|
window.scrollTo(x, y);
|
|
35075
|
-
|
|
35076
|
-
previousBodyPosition = undefined;
|
|
35077
|
+
bodyStyle = void 0;
|
|
35077
35078
|
}
|
|
35078
35079
|
};
|
|
35079
|
-
|
|
35080
|
-
|
|
35081
|
-
|
|
35082
|
-
return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
|
|
35083
|
-
};
|
|
35084
|
-
|
|
35085
|
-
var handleScroll = function handleScroll(event, targetElement) {
|
|
35086
|
-
var clientY = event.targetTouches[0].clientY - initialClientY;
|
|
35087
|
-
|
|
35080
|
+
const isTargetElementTotallyScrolled = (targetElement) => targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
|
|
35081
|
+
const handleScroll = (event, targetElement) => {
|
|
35082
|
+
const clientY = event.targetTouches[0].clientY - initialClientY;
|
|
35088
35083
|
if (allowTouchMove(event.target)) {
|
|
35089
35084
|
return false;
|
|
35090
35085
|
}
|
|
35091
|
-
|
|
35092
35086
|
if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
|
|
35093
|
-
// element is at the top of its scroll.
|
|
35094
35087
|
return preventDefault(event);
|
|
35095
35088
|
}
|
|
35096
|
-
|
|
35097
35089
|
if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
|
|
35098
|
-
// element is at the bottom of its scroll.
|
|
35099
35090
|
return preventDefault(event);
|
|
35100
35091
|
}
|
|
35101
|
-
|
|
35102
35092
|
event.stopPropagation();
|
|
35103
35093
|
return true;
|
|
35104
35094
|
};
|
|
35105
|
-
|
|
35106
|
-
var disableBodyScroll = function disableBodyScroll(targetElement, options) {
|
|
35107
|
-
// targetElement must be provided
|
|
35095
|
+
const disableBodyScroll = (targetElement, options) => {
|
|
35108
35096
|
if (!targetElement) {
|
|
35109
|
-
|
|
35110
|
-
|
|
35097
|
+
console.error(
|
|
35098
|
+
"disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices."
|
|
35099
|
+
);
|
|
35111
35100
|
return;
|
|
35112
35101
|
}
|
|
35113
|
-
|
|
35114
|
-
|
|
35115
|
-
|
|
35116
|
-
|
|
35117
|
-
|
|
35102
|
+
locksIndex.set(
|
|
35103
|
+
targetElement,
|
|
35104
|
+
(locksIndex == null ? void 0 : locksIndex.get(targetElement)) ? (locksIndex == null ? void 0 : locksIndex.get(targetElement)) + 1 : 1
|
|
35105
|
+
);
|
|
35106
|
+
if (locks.some((lock2) => lock2.targetElement === targetElement)) {
|
|
35118
35107
|
return;
|
|
35119
35108
|
}
|
|
35120
|
-
|
|
35121
|
-
|
|
35122
|
-
targetElement: targetElement,
|
|
35109
|
+
const lock = {
|
|
35110
|
+
targetElement,
|
|
35123
35111
|
options: options || {}
|
|
35124
35112
|
};
|
|
35125
|
-
|
|
35126
|
-
locks = [].concat(_toConsumableArray(locks), [lock]);
|
|
35127
|
-
|
|
35113
|
+
locks = [...locks, lock];
|
|
35128
35114
|
if (isIosDevice) {
|
|
35129
35115
|
setPositionFixed();
|
|
35130
35116
|
} else {
|
|
35131
35117
|
setOverflowHidden(options);
|
|
35132
35118
|
}
|
|
35133
|
-
|
|
35134
35119
|
if (isIosDevice) {
|
|
35135
|
-
targetElement.ontouchstart =
|
|
35120
|
+
targetElement.ontouchstart = (event) => {
|
|
35136
35121
|
if (event.targetTouches.length === 1) {
|
|
35137
|
-
// detect single touch.
|
|
35138
35122
|
initialClientY = event.targetTouches[0].clientY;
|
|
35139
35123
|
}
|
|
35140
35124
|
};
|
|
35141
|
-
targetElement.ontouchmove =
|
|
35125
|
+
targetElement.ontouchmove = (event) => {
|
|
35142
35126
|
if (event.targetTouches.length === 1) {
|
|
35143
|
-
// detect single touch.
|
|
35144
35127
|
handleScroll(event, targetElement);
|
|
35145
35128
|
}
|
|
35146
35129
|
};
|
|
35147
|
-
|
|
35148
35130
|
if (!documentListenerAdded) {
|
|
35149
|
-
document.addEventListener(
|
|
35131
|
+
document.addEventListener(
|
|
35132
|
+
"touchmove",
|
|
35133
|
+
preventDefault,
|
|
35134
|
+
hasPassiveEvents ? { passive: false } : void 0
|
|
35135
|
+
);
|
|
35150
35136
|
documentListenerAdded = true;
|
|
35151
35137
|
}
|
|
35152
35138
|
}
|
|
35153
35139
|
};
|
|
35154
|
-
|
|
35155
|
-
var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() {
|
|
35140
|
+
const clearAllBodyScrollLocks = () => {
|
|
35156
35141
|
if (isIosDevice) {
|
|
35157
|
-
|
|
35158
|
-
locks.forEach(function (lock) {
|
|
35142
|
+
locks.forEach((lock) => {
|
|
35159
35143
|
lock.targetElement.ontouchstart = null;
|
|
35160
35144
|
lock.targetElement.ontouchmove = null;
|
|
35161
35145
|
});
|
|
35162
|
-
|
|
35163
35146
|
if (documentListenerAdded) {
|
|
35164
|
-
document.removeEventListener(
|
|
35147
|
+
document.removeEventListener(
|
|
35148
|
+
"touchmove",
|
|
35149
|
+
preventDefault,
|
|
35150
|
+
hasPassiveEvents ? { passive: false } : void 0
|
|
35151
|
+
);
|
|
35165
35152
|
documentListenerAdded = false;
|
|
35166
35153
|
}
|
|
35167
|
-
|
|
35168
|
-
// Reset initial clientY.
|
|
35169
35154
|
initialClientY = -1;
|
|
35170
35155
|
}
|
|
35171
|
-
|
|
35172
35156
|
if (isIosDevice) {
|
|
35173
35157
|
restorePositionSetting();
|
|
35174
35158
|
} else {
|
|
35175
35159
|
restoreOverflowSetting();
|
|
35176
35160
|
}
|
|
35177
|
-
|
|
35178
35161
|
locks = [];
|
|
35162
|
+
locksIndex.clear();
|
|
35179
35163
|
};
|
|
35180
|
-
|
|
35181
|
-
var enableBodyScroll = function enableBodyScroll(targetElement) {
|
|
35164
|
+
const enableBodyScroll = (targetElement) => {
|
|
35182
35165
|
if (!targetElement) {
|
|
35183
|
-
|
|
35184
|
-
|
|
35166
|
+
console.error(
|
|
35167
|
+
"enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices."
|
|
35168
|
+
);
|
|
35185
35169
|
return;
|
|
35186
35170
|
}
|
|
35187
|
-
|
|
35188
|
-
|
|
35189
|
-
|
|
35190
|
-
|
|
35191
|
-
|
|
35171
|
+
locksIndex.set(
|
|
35172
|
+
targetElement,
|
|
35173
|
+
(locksIndex == null ? void 0 : locksIndex.get(targetElement)) ? (locksIndex == null ? void 0 : locksIndex.get(targetElement)) - 1 : 0
|
|
35174
|
+
);
|
|
35175
|
+
if ((locksIndex == null ? void 0 : locksIndex.get(targetElement)) === 0) {
|
|
35176
|
+
locks = locks.filter((lock) => lock.targetElement !== targetElement);
|
|
35177
|
+
locksIndex == null ? void 0 : locksIndex.delete(targetElement);
|
|
35178
|
+
}
|
|
35192
35179
|
if (isIosDevice) {
|
|
35193
35180
|
targetElement.ontouchstart = null;
|
|
35194
35181
|
targetElement.ontouchmove = null;
|
|
35195
|
-
|
|
35196
35182
|
if (documentListenerAdded && locks.length === 0) {
|
|
35197
|
-
document.removeEventListener(
|
|
35183
|
+
document.removeEventListener(
|
|
35184
|
+
"touchmove",
|
|
35185
|
+
preventDefault,
|
|
35186
|
+
hasPassiveEvents ? { passive: false } : void 0
|
|
35187
|
+
);
|
|
35198
35188
|
documentListenerAdded = false;
|
|
35199
35189
|
}
|
|
35200
35190
|
}
|
|
35201
|
-
|
|
35202
|
-
|
|
35203
|
-
|
|
35204
|
-
|
|
35205
|
-
|
|
35191
|
+
if (locks.length === 0) {
|
|
35192
|
+
if (isIosDevice) {
|
|
35193
|
+
restorePositionSetting();
|
|
35194
|
+
} else {
|
|
35195
|
+
restoreOverflowSetting();
|
|
35196
|
+
}
|
|
35206
35197
|
}
|
|
35207
35198
|
};
|
|
35208
35199
|
|