@crystaldesign/diva-core 25.14.0-beta.10 → 25.14.0-beta.11
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/esm/{ModalsWrapper-e10c6d2e.js → ModalsWrapper-4b0cc7ca.js} +1 -2
- package/build/esm/{index-5c47a06e.js → index-a200a30a.js} +338 -127
- package/build/esm/{index-80b53700.js → index-b38c8754.js} +1 -2
- package/build/esm/index.js +2 -3
- package/build/types/core/src/elements/DrawerMenu/index.d.ts +1 -2
- package/build/types/core/src/elements/DrawerMenu/index.d.ts.map +1 -1
- package/build/types/core/src/elements/DrawerMenu/useSwipeToDismiss.d.ts +11 -0
- package/build/types/core/src/elements/DrawerMenu/useSwipeToDismiss.d.ts.map +1 -0
- package/build/types/core/src/elements/HeightAnimator/index.d.ts +9 -0
- package/build/types/core/src/elements/HeightAnimator/index.d.ts.map +1 -0
- package/build/types/core/src/externalTypes.d.ts +1 -1
- package/build/types/core/src/externalTypes.d.ts.map +1 -1
- package/build/types/core/src/index.d.ts +2 -0
- package/build/types/core/src/index.d.ts.map +1 -1
- package/build/types/core/src/store/ConfigurationStore.d.ts.map +1 -1
- package/build/umd/469.diva-core.umd.min.js +2 -0
- package/build/umd/469.diva-core.umd.min.js.LICENSE.txt +1 -0
- package/build/umd/diva-core.umd.min.js +6 -6
- package/build/umd/report.html +1 -1
- package/package.json +11 -12
- package/build/umd/515.diva-core.umd.min.js +0 -2
- package/build/umd/515.diva-core.umd.min.js.LICENSE.txt +0 -1
- package/build/umd/558.diva-core.umd.min.js +0 -2
- package/build/umd/558.diva-core.umd.min.js.LICENSE.txt +0 -1
|
@@ -34,9 +34,8 @@ import axios from 'axios';
|
|
|
34
34
|
import { ProductHandlerAbstract } from '@crystaldesign/product-handler';
|
|
35
35
|
import classnames from 'classnames';
|
|
36
36
|
import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
|
|
37
|
-
import {
|
|
37
|
+
import { SwipeableDrawer, Button, Snackbar, SnackbarContent, IconButton, Card, CardHeader, CardContent } from '@mui/material';
|
|
38
38
|
import { ContentBoxComponent } from '@crystaldesign/content-box';
|
|
39
|
-
import { Button, Snackbar, SnackbarContent, IconButton, Card, CardHeader, CardContent } from '@mui/material';
|
|
40
39
|
import { useTranslation as useTranslation$1, useDivaCore as useDivaCore$1 } from '@crystaldesign/diva-core';
|
|
41
40
|
import QRCode from 'react-qr-code';
|
|
42
41
|
import CloseIcon from '@mui/icons-material/Close';
|
|
@@ -46,7 +45,7 @@ import { actions } from '@storybook/addon-actions';
|
|
|
46
45
|
import * as Styles from '@mui/styles';
|
|
47
46
|
|
|
48
47
|
(function() {
|
|
49
|
-
const env = {"STAGE":"production","VERSION":"25.14.0-beta.
|
|
48
|
+
const env = {"STAGE":"production","VERSION":"25.14.0-beta.11"};
|
|
50
49
|
try {
|
|
51
50
|
if (process) {
|
|
52
51
|
process.env = Object.assign({}, process.env);
|
|
@@ -870,31 +869,31 @@ var ConfigurationStore = /*#__PURE__*/function () {
|
|
|
870
869
|
}, {
|
|
871
870
|
key: "theme",
|
|
872
871
|
get: function get() {
|
|
873
|
-
var _this$_configuration9, _this$root$dataStore$,
|
|
872
|
+
var _this$_configuration9, _this$root$dataStore$, _theme$palette, _theme$palette2, _theme$palette3, _theme$palette4, _theme$palette5, _theme$palette6, _theme$palette7, _theme$palette8, _theme$palette9, _theme$palette10, _theme$palette11, _theme$palette12, _theme$palette13, _theme$palette14, _theme$typography, _theme$components;
|
|
874
873
|
var theme = (_this$_configuration9 = this._configuration) === null || _this$_configuration9 === void 0 ? void 0 : _this$_configuration9.theme;
|
|
875
874
|
var orgTheme = (_this$root$dataStore$ = this.root.dataStore.organization) === null || _this$root$dataStore$ === void 0 || (_this$root$dataStore$ = _this$root$dataStore$.settings) === null || _this$root$dataStore$ === void 0 ? void 0 : _this$root$dataStore$.theme;
|
|
876
875
|
|
|
877
876
|
// Apply organization theme overrides if they exist
|
|
878
877
|
var palette = {
|
|
879
878
|
primary: {
|
|
880
|
-
main: (
|
|
881
|
-
light: (
|
|
882
|
-
dark: (
|
|
883
|
-
contrastText: (
|
|
879
|
+
main: (orgTheme === null || orgTheme === void 0 ? void 0 : orgTheme.main) || (theme === null || theme === void 0 || (_theme$palette = theme.palette) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.primary) === null || _theme$palette === void 0 ? void 0 : _theme$palette.main) || defaultTheme.palette.primary.main,
|
|
880
|
+
light: (orgTheme === null || orgTheme === void 0 ? void 0 : orgTheme.light) || (theme === null || theme === void 0 || (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 || (_theme$palette2 = _theme$palette2.primary) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.light) || defaultTheme.palette.primary.light,
|
|
881
|
+
dark: (orgTheme === null || orgTheme === void 0 ? void 0 : orgTheme.dark) || (theme === null || theme === void 0 || (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.primary) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.dark) || defaultTheme.palette.primary.dark,
|
|
882
|
+
contrastText: (theme === null || theme === void 0 || (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.primary) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.contrastText) || defaultTheme.palette.primary.contrastText
|
|
884
883
|
},
|
|
885
884
|
secondary: {
|
|
886
|
-
main: (
|
|
887
|
-
light: (
|
|
888
|
-
dark: (
|
|
889
|
-
contrastText: (
|
|
885
|
+
main: (theme === null || theme === void 0 || (_theme$palette5 = theme.palette) === null || _theme$palette5 === void 0 || (_theme$palette5 = _theme$palette5.secondary) === null || _theme$palette5 === void 0 ? void 0 : _theme$palette5.main) || (orgTheme === null || orgTheme === void 0 ? void 0 : orgTheme.main) || (theme === null || theme === void 0 || (_theme$palette6 = theme.palette) === null || _theme$palette6 === void 0 || (_theme$palette6 = _theme$palette6.primary) === null || _theme$palette6 === void 0 ? void 0 : _theme$palette6.main) || defaultTheme.palette.secondary.main,
|
|
886
|
+
light: (theme === null || theme === void 0 || (_theme$palette7 = theme.palette) === null || _theme$palette7 === void 0 || (_theme$palette7 = _theme$palette7.secondary) === null || _theme$palette7 === void 0 ? void 0 : _theme$palette7.light) || (orgTheme === null || orgTheme === void 0 ? void 0 : orgTheme.light) || (theme === null || theme === void 0 || (_theme$palette8 = theme.palette) === null || _theme$palette8 === void 0 || (_theme$palette8 = _theme$palette8.primary) === null || _theme$palette8 === void 0 ? void 0 : _theme$palette8.light) || defaultTheme.palette.secondary.light,
|
|
887
|
+
dark: (theme === null || theme === void 0 || (_theme$palette9 = theme.palette) === null || _theme$palette9 === void 0 || (_theme$palette9 = _theme$palette9.secondary) === null || _theme$palette9 === void 0 ? void 0 : _theme$palette9.dark) || (orgTheme === null || orgTheme === void 0 ? void 0 : orgTheme.dark) || (theme === null || theme === void 0 || (_theme$palette10 = theme.palette) === null || _theme$palette10 === void 0 || (_theme$palette10 = _theme$palette10.primary) === null || _theme$palette10 === void 0 ? void 0 : _theme$palette10.dark) || defaultTheme.palette.secondary.dark,
|
|
888
|
+
contrastText: (theme === null || theme === void 0 || (_theme$palette11 = theme.palette) === null || _theme$palette11 === void 0 || (_theme$palette11 = _theme$palette11.secondary) === null || _theme$palette11 === void 0 ? void 0 : _theme$palette11.contrastText) || (theme === null || theme === void 0 || (_theme$palette12 = theme.palette) === null || _theme$palette12 === void 0 || (_theme$palette12 = _theme$palette12.primary) === null || _theme$palette12 === void 0 ? void 0 : _theme$palette12.contrastText) || defaultTheme.palette.secondary.contrastText
|
|
890
889
|
},
|
|
891
890
|
text: {
|
|
892
|
-
primary: (
|
|
893
|
-
secondary: (
|
|
891
|
+
primary: (theme === null || theme === void 0 || (_theme$palette13 = theme.palette) === null || _theme$palette13 === void 0 || (_theme$palette13 = _theme$palette13.text) === null || _theme$palette13 === void 0 ? void 0 : _theme$palette13.primary) || defaultTheme.palette.text.primary,
|
|
892
|
+
secondary: (theme === null || theme === void 0 || (_theme$palette14 = theme.palette) === null || _theme$palette14 === void 0 || (_theme$palette14 = _theme$palette14.text) === null || _theme$palette14 === void 0 ? void 0 : _theme$palette14.secondary) || defaultTheme.palette.text.secondary
|
|
894
893
|
}
|
|
895
894
|
};
|
|
896
895
|
var typography = {
|
|
897
|
-
fontFamily: (
|
|
896
|
+
fontFamily: (theme === null || theme === void 0 || (_theme$typography = theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.fontFamily) || defaultTheme.typography.fontFamily
|
|
898
897
|
};
|
|
899
898
|
var components = (_theme$components = theme === null || theme === void 0 ? void 0 : theme.components) !== null && _theme$components !== void 0 ? _theme$components : defaultTheme.components;
|
|
900
899
|
|
|
@@ -917,10 +916,10 @@ var ConfigurationStore = /*#__PURE__*/function () {
|
|
|
917
916
|
var root = document.documentElement;
|
|
918
917
|
|
|
919
918
|
// Apply custom variables without prefix
|
|
920
|
-
Object.entries(customCssVariables).forEach(function (
|
|
921
|
-
var
|
|
922
|
-
key =
|
|
923
|
-
value =
|
|
919
|
+
Object.entries(customCssVariables).forEach(function (_ref) {
|
|
920
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
|
921
|
+
key = _ref2[0],
|
|
922
|
+
value = _ref2[1];
|
|
924
923
|
if (key && value) {
|
|
925
924
|
// Ensure variable name starts with --
|
|
926
925
|
var varName = key.startsWith('--') ? key : "--".concat(key);
|
|
@@ -1054,9 +1053,7 @@ var ConfigurationStore = /*#__PURE__*/function () {
|
|
|
1054
1053
|
}, {
|
|
1055
1054
|
key: "priceFormat",
|
|
1056
1055
|
get: function get() {
|
|
1057
|
-
var _this$root$dataStore$3,
|
|
1058
|
-
_this$_configuration55,
|
|
1059
|
-
_this = this;
|
|
1056
|
+
var _this$root$dataStore$3, _this$_configuration55;
|
|
1060
1057
|
var fallbackPriceFormat = {
|
|
1061
1058
|
currency: '€',
|
|
1062
1059
|
spacing: true,
|
|
@@ -1072,8 +1069,7 @@ var ConfigurationStore = /*#__PURE__*/function () {
|
|
|
1072
1069
|
if (Array.isArray((_this$_configuration56 = this._configuration) === null || _this$_configuration56 === void 0 ? void 0 : _this$_configuration56.priceFormat)) {
|
|
1073
1070
|
var _this$_configuration$6, _this$_configuration57;
|
|
1074
1071
|
return (_this$_configuration$6 = (_this$_configuration57 = this._configuration) === null || _this$_configuration57 === void 0 ? void 0 : _this$_configuration57.priceFormat.find(function (pf) {
|
|
1075
|
-
|
|
1076
|
-
return pf.currency === ((_this$root$dataStore$4 = _this.root.dataStore.organization) === null || _this$root$dataStore$4 === void 0 ? void 0 : _this$root$dataStore$4.settings.defaultCurrency);
|
|
1072
|
+
return pf.currency === currency;
|
|
1077
1073
|
})) !== null && _this$_configuration$6 !== void 0 ? _this$_configuration$6 : _objectSpread$d(_objectSpread$d({}, fallbackPriceFormat), {}, {
|
|
1078
1074
|
currency: currency
|
|
1079
1075
|
});
|
|
@@ -1112,12 +1108,12 @@ var ConfigurationStore = /*#__PURE__*/function () {
|
|
|
1112
1108
|
}, {
|
|
1113
1109
|
key: "fetchConfiguration",
|
|
1114
1110
|
value: function () {
|
|
1115
|
-
var _fetchConfiguration = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(
|
|
1116
|
-
var identifier, type, domain,
|
|
1111
|
+
var _fetchConfiguration = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
|
|
1112
|
+
var identifier, type, domain, _ref3$organizationId, organizationId, configuration, types, settingsKeys, _i, _types, subType;
|
|
1117
1113
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
1118
1114
|
while (1) switch (_context.prev = _context.next) {
|
|
1119
1115
|
case 0:
|
|
1120
|
-
identifier =
|
|
1116
|
+
identifier = _ref3.identifier, type = _ref3.type, domain = _ref3.domain, _ref3$organizationId = _ref3.organizationId, organizationId = _ref3$organizationId === void 0 ? this.root.dataStore.organizationId : _ref3$organizationId;
|
|
1121
1117
|
LOG$d.debug("Fetching configuration for ".concat(type, " ").concat(identifier !== null && identifier !== void 0 ? identifier : '', " ").concat(domain !== null && domain !== void 0 ? domain : '', " ").concat(organizationId));
|
|
1122
1118
|
configuration = this.configurationCache.get(type + identifier + organizationId);
|
|
1123
1119
|
if (!configuration) {
|
|
@@ -9497,10 +9493,7 @@ var closeIcon = "close-icon-1kDyU";
|
|
|
9497
9493
|
var css_248z$4 = ".overlay-34l68 {\n height: 100%;\n width: 100%;\n display: flex;\n background-color: #fff;\n z-index: 999;\n justify-content: center;\n align-items: center;\n position: absolute;\n}\n\n.absolute-overlay-cG7uO {\n height: 100% !important;\n}\n\n.absolute-overlay-cG7uO {\n background-color: #fff;\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n overflow: hidden;\n z-index: 1000000;\n display: block;\n width: 100vw;\n}\n\n.diva-pseudo-fullscreen body {\n height: auto !important;\n}\n.diva-pseudo-fullscreen, .diva-pseudo-fullscreen body {\n overflow: hidden !important;\n}\n\n.close-icon-1kDyU {\n position: absolute;\n right: 32px;\n top: 32px;\n width: 50px;\n height: 40px;\n opacity: 0.3;\n z-index: 700;\n cursor: pointer;\n}\n\n.close-icon-1kDyU:before {\n transform: rotate(45deg);\n}\n\n.close-icon-1kDyU:after {\n transform: rotate(-45deg);\n}\n\n.close-icon-1kDyU:before,\n.close-icon-1kDyU:after {\n position: absolute;\n left: 23px;\n top: 5px;\n content: ' ';\n height: 33px;\n width: 3px;\n background-color: #4b4b4b;\n}\n\n.close-icon-1kDyU:hover {\n opacity: 0.8;\n transition: opacity 0.2s ease-in-out;\n}\n";
|
|
9498
9494
|
styleInject(css_248z$4);
|
|
9499
9495
|
|
|
9500
|
-
var
|
|
9501
|
-
var left = "left-SicAa";
|
|
9502
|
-
var right = "right-p1mpA";
|
|
9503
|
-
var handle = "handle-5tzN-";
|
|
9496
|
+
var drawerContent = "drawer-content-3-85N";
|
|
9504
9497
|
var overlay = "overlay-vhpU9";
|
|
9505
9498
|
var drawerHandleLine = "drawer-handle-line-65wJw";
|
|
9506
9499
|
var drawerHandle = "drawer-handle-zhmPW";
|
|
@@ -9509,39 +9502,224 @@ var drawerHeader = "drawer-header-FOHFa";
|
|
|
9509
9502
|
var scrollWrapper = "scroll-wrapper-f27j2";
|
|
9510
9503
|
var closeButton = "close-button-Tg2c5";
|
|
9511
9504
|
var bottom = "bottom-VZZjn";
|
|
9505
|
+
var left = "left-SicAa";
|
|
9506
|
+
var right = "right-p1mpA";
|
|
9512
9507
|
var top = "top-o1Wjp";
|
|
9513
9508
|
var bottomSpacer = "bottom-spacer-kdhiH";
|
|
9514
9509
|
var onSide = "on-side-JUQWn";
|
|
9515
|
-
var css_248z$3 = ".drawer-
|
|
9510
|
+
var css_248z$3 = ".drawer-content-3-85N {\n outline: medium none invert;\n outline: initial;\n position: absolute;\n z-index: 14000;\n pointer-events: auto;\n opacity: 1;\n overscroll-behavior: contain;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n transform: translateZ(0);\n -webkit-transform: translateZ(0);\n /* Optimize for smooth swiping animations */\n contain: layout style paint;\n}\n.MuiDrawer-anchorRight.MuiDrawer-root.MuiDrawer-modal.MuiModal-root,\n.MuiDrawer-anchorLeft.MuiDrawer-root.MuiDrawer-modal.MuiModal-root {\n position: absolute;\n}\n\n/* Fix for mobile browser address bar showing/hiding */\n@supports (height: 100dvh) {\n .drawer-content-3-85N {\n max-height: 100dvh;\n }\n}\n\n.overlay-vhpU9 {\n background-color: rgba(0, 0, 0, 0.4);\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n opacity: 0;\n animation: fadeIn-W2rJo 0.3s ease-in forwards;\n z-index: 10000;\n}\n\n@keyframes fadeIn-W2rJo {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.drawer-handle-line-65wJw {\n width: calc(36px);\n height: 4px;\n background-color: rgba(234, 234, 234, 0.9);\n border-radius: 2px;\n}\n\n.drawer-handle-zhmPW {\n position: absolute;\n left: 50%;\n transform: translate(-50%, -32px);\n width: 40px;\n height: 40px;\n touch-action: none;\n display: flex;\n align-items: center;\n justify-content: center;\n border-top-right-radius: 10px;\n border-top-left-radius: 10px;\n cursor: grab;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n\n.drawer-P-5-0 {\n display: flex;\n flex-direction: column;\n z-index: 20000;\n background-color: rgba(255, 255, 255, 0.95);\n overflow: hidden;\n flex: 1;\n min-height: 0;\n}\n\n.drawer-header-FOHFa {\n padding: 8px 32px;\n flex-shrink: 0;\n}\n\n.drawer-open #Diva-content-wrapper {\n overflow: visible !important;\n z-index: 3 !important;\n}\n\n.scroll-wrapper-f27j2 {\n overflow-y: auto;\n overflow-x: hidden;\n overscroll-behavior: contain;\n padding: 0px 32px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-height: 0;\n /* Smooth scrolling on iOS */\n -webkit-overflow-scrolling: touch;\n /* Prevent pull-to-refresh interference */\n touch-action: pan-y;\n}\n\n.close-button-Tg2c5 {\n position: absolute;\n top: 18px;\n right: 18px;\n width: 32px;\n height: 32px;\n background: center / 70% no-repeat url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23ccc%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n transition:\n border-color 0.2s ease-in,\n background-image 0.2s ease-in;\n cursor: pointer;\n z-index: 500;\n border: 1px solid transparent;\n border-radius: 50%;\n padding: 0px;\n}\n\n.close-button-Tg2c5:hover {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23aaa%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n border: 1px solid #aaa;\n}\n\n.bottom-VZZjn {\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.left-SicAa {\n left: 0;\n bottom: 0;\n top: 0;\n}\n\n.right-p1mpA {\n right: 0;\n bottom: 0;\n top: 0;\n}\n\n.top-o1Wjp {\n top: 0;\n left: 0;\n right: 0;\n}\n\nhtml body[data-scroll-locked] {\n position: static !important;\n}\n\n.bottom-spacer-kdhiH {\n min-height: 12px;\n}\n\n.on-side-JUQWn {\n width: 100%;\n}\n";
|
|
9516
9511
|
styleInject(css_248z$3);
|
|
9517
9512
|
|
|
9513
|
+
var useSwipeToDismiss = function useSwipeToDismiss(direction, onDismiss) {
|
|
9514
|
+
var _useState = useState(false),
|
|
9515
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
9516
|
+
isDragging = _useState2[0],
|
|
9517
|
+
setIsDragging = _useState2[1];
|
|
9518
|
+
var _useState3 = useState(0),
|
|
9519
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
9520
|
+
dragOffset = _useState4[0],
|
|
9521
|
+
setDragOffset = _useState4[1];
|
|
9522
|
+
var wrapperRef = useRef(null);
|
|
9523
|
+
var startPos = useRef(null);
|
|
9524
|
+
var scrollAtBoundary = useRef(false);
|
|
9525
|
+
var startTime = useRef(0);
|
|
9526
|
+
var scrollableElement = useRef(null);
|
|
9527
|
+
var lastSwipeTime = useRef(0);
|
|
9528
|
+
var lastSwipeDistance = useRef(0);
|
|
9529
|
+
var hasConfirmedFastSwipe = useRef(false);
|
|
9530
|
+
var isVertical = direction === 'top' || direction === 'bottom';
|
|
9531
|
+
|
|
9532
|
+
// Velocity threshold: minimum pixels per second for a "fast swipe"
|
|
9533
|
+
// Lower thresholds for horizontal swipes as they're less common and more intentional
|
|
9534
|
+
var MIN_VELOCITY = isVertical ? 800 : 100; // 800px/s for vertical, 500px/s for horizontal
|
|
9535
|
+
var CONFIRMATION_DISTANCE = isVertical ? 150 : 15; // 150px for vertical, 100px for horizontal
|
|
9536
|
+
|
|
9537
|
+
var checkScrollBoundary = useCallback(function (element) {
|
|
9538
|
+
if (isVertical) {
|
|
9539
|
+
var scrollTop = element.scrollTop,
|
|
9540
|
+
scrollHeight = element.scrollHeight,
|
|
9541
|
+
clientHeight = element.clientHeight;
|
|
9542
|
+
if (direction === 'bottom') {
|
|
9543
|
+
// For bottom drawer, check if at top
|
|
9544
|
+
return scrollTop <= 1; // Small tolerance for floating point
|
|
9545
|
+
} else {
|
|
9546
|
+
// For top drawer, check if at bottom
|
|
9547
|
+
return scrollTop + clientHeight >= scrollHeight - 1;
|
|
9548
|
+
}
|
|
9549
|
+
} else {
|
|
9550
|
+
var scrollLeft = element.scrollLeft,
|
|
9551
|
+
scrollWidth = element.scrollWidth,
|
|
9552
|
+
clientWidth = element.clientWidth;
|
|
9553
|
+
if (direction === 'left') {
|
|
9554
|
+
// For left drawer, check if at left edge
|
|
9555
|
+
return scrollLeft <= 1;
|
|
9556
|
+
} else {
|
|
9557
|
+
// For right drawer, check if at right edge
|
|
9558
|
+
return scrollLeft + clientWidth >= scrollWidth - 1;
|
|
9559
|
+
}
|
|
9560
|
+
}
|
|
9561
|
+
}, [direction, isVertical]);
|
|
9562
|
+
var findScrollableParent = function findScrollableParent(element) {
|
|
9563
|
+
if (!element) return null;
|
|
9564
|
+
var isScrollable = function isScrollable(el) {
|
|
9565
|
+
var style = window.getComputedStyle(el);
|
|
9566
|
+
var overflowY = style.overflowY;
|
|
9567
|
+
var overflowX = style.overflowX;
|
|
9568
|
+
return isVertical && (overflowY === 'auto' || overflowY === 'scroll') || !isVertical && (overflowX === 'auto' || overflowX === 'scroll');
|
|
9569
|
+
};
|
|
9570
|
+
var current = element;
|
|
9571
|
+
while (current && current !== wrapperRef.current) {
|
|
9572
|
+
if (isScrollable(current)) {
|
|
9573
|
+
return current;
|
|
9574
|
+
}
|
|
9575
|
+
current = current.parentElement;
|
|
9576
|
+
}
|
|
9577
|
+
return wrapperRef.current;
|
|
9578
|
+
};
|
|
9579
|
+
var handleTouchStart = useCallback(function (e) {
|
|
9580
|
+
var target = e.target;
|
|
9581
|
+
|
|
9582
|
+
// Ignore swipe if touch starts on or within an element with diva-stop-swipe-detection
|
|
9583
|
+
if (target.closest('.diva-stop-swipe-detection')) {
|
|
9584
|
+
return;
|
|
9585
|
+
}
|
|
9586
|
+
var touch = e.touches[0];
|
|
9587
|
+
startPos.current = {
|
|
9588
|
+
x: touch.clientX,
|
|
9589
|
+
y: touch.clientY
|
|
9590
|
+
};
|
|
9591
|
+
startTime.current = Date.now();
|
|
9592
|
+
lastSwipeTime.current = Date.now();
|
|
9593
|
+
lastSwipeDistance.current = 0;
|
|
9594
|
+
hasConfirmedFastSwipe.current = false; // Reset confirmation
|
|
9595
|
+
setIsDragging(false);
|
|
9596
|
+
setDragOffset(0);
|
|
9597
|
+
|
|
9598
|
+
// Find scrollable element
|
|
9599
|
+
var element = findScrollableParent(target);
|
|
9600
|
+
scrollableElement.current = element;
|
|
9601
|
+
if (element) {
|
|
9602
|
+
scrollAtBoundary.current = checkScrollBoundary(element);
|
|
9603
|
+
} else {
|
|
9604
|
+
scrollAtBoundary.current = false;
|
|
9605
|
+
}
|
|
9606
|
+
}, [checkScrollBoundary]);
|
|
9607
|
+
var handleTouchMove = useCallback(function (e) {
|
|
9608
|
+
if (!startPos.current) return;
|
|
9609
|
+
var touch = e.touches[0];
|
|
9610
|
+
var deltaX = touch.clientX - startPos.current.x;
|
|
9611
|
+
var deltaY = touch.clientY - startPos.current.y;
|
|
9612
|
+
var currentTime = Date.now();
|
|
9613
|
+
|
|
9614
|
+
// Calculate current velocity
|
|
9615
|
+
var timeDelta = currentTime - lastSwipeTime.current;
|
|
9616
|
+
var currentDistance = isVertical ? Math.abs(deltaY) : Math.abs(deltaX);
|
|
9617
|
+
var distanceDelta = currentDistance - lastSwipeDistance.current;
|
|
9618
|
+
var velocity = timeDelta > 0 ? distanceDelta / timeDelta * 1000 : 0; // pixels per second
|
|
9619
|
+
|
|
9620
|
+
// Update tracking
|
|
9621
|
+
lastSwipeTime.current = currentTime;
|
|
9622
|
+
lastSwipeDistance.current = currentDistance;
|
|
9623
|
+
|
|
9624
|
+
// Determine if gesture is in dismiss direction
|
|
9625
|
+
var dismissDirection = false;
|
|
9626
|
+
var offset = 0;
|
|
9627
|
+
if (isVertical) {
|
|
9628
|
+
offset = deltaY;
|
|
9629
|
+
if (direction === 'bottom') {
|
|
9630
|
+
dismissDirection = deltaY > 0; // Swipe down
|
|
9631
|
+
} else {
|
|
9632
|
+
dismissDirection = deltaY < 0; // Swipe up
|
|
9633
|
+
}
|
|
9634
|
+
} else {
|
|
9635
|
+
offset = deltaX;
|
|
9636
|
+
if (direction === 'left') {
|
|
9637
|
+
dismissDirection = deltaX < 0; // Swipe left
|
|
9638
|
+
} else {
|
|
9639
|
+
dismissDirection = deltaX > 0; // Swipe right
|
|
9640
|
+
}
|
|
9641
|
+
}
|
|
9642
|
+
var absOffset = Math.abs(offset);
|
|
9643
|
+
var isFastSwipe = velocity > MIN_VELOCITY;
|
|
9644
|
+
var isMainlyVertical = Math.abs(deltaY) > Math.abs(deltaX) * 1.5;
|
|
9645
|
+
var isMainlyHorizontal = Math.abs(deltaX) > Math.abs(deltaY) * 1.5;
|
|
9646
|
+
var correctAxis = isVertical ? isMainlyVertical : isMainlyHorizontal;
|
|
9647
|
+
|
|
9648
|
+
// PESSIMISTIC: Only confirm fast swipe once we've traveled enough distance at high velocity
|
|
9649
|
+
if (!hasConfirmedFastSwipe.current && scrollAtBoundary.current && dismissDirection && correctAxis && isFastSwipe && absOffset > CONFIRMATION_DISTANCE) {
|
|
9650
|
+
hasConfirmedFastSwipe.current = true;
|
|
9651
|
+
}
|
|
9652
|
+
|
|
9653
|
+
// Only show visual feedback AFTER confirmation
|
|
9654
|
+
if (hasConfirmedFastSwipe.current && scrollAtBoundary.current && dismissDirection && correctAxis) {
|
|
9655
|
+
e.preventDefault();
|
|
9656
|
+
setIsDragging(true);
|
|
9657
|
+
// Visual feedback during fast swipe
|
|
9658
|
+
var resistance = Math.min(absOffset / 3, 100);
|
|
9659
|
+
setDragOffset(offset > 0 ? resistance : -resistance);
|
|
9660
|
+
} else if (isDragging) {
|
|
9661
|
+
// Reset if conditions no longer met
|
|
9662
|
+
setIsDragging(false);
|
|
9663
|
+
setDragOffset(0);
|
|
9664
|
+
}
|
|
9665
|
+
}, [direction, isVertical, isDragging]);
|
|
9666
|
+
var handleTouchEnd = useCallback(function () {
|
|
9667
|
+
if (!startPos.current) {
|
|
9668
|
+
setIsDragging(false);
|
|
9669
|
+
setDragOffset(0);
|
|
9670
|
+
return;
|
|
9671
|
+
}
|
|
9672
|
+
|
|
9673
|
+
// Calculate final velocity
|
|
9674
|
+
var duration = Date.now() - startTime.current;
|
|
9675
|
+
var totalDistance = lastSwipeDistance.current;
|
|
9676
|
+
var avgVelocity = duration > 0 ? totalDistance / duration * 1000 : 0; // pixels per second
|
|
9677
|
+
|
|
9678
|
+
// Dismiss only if it was confirmed as a fast swipe
|
|
9679
|
+
var wasFastSwipe = hasConfirmedFastSwipe.current && avgVelocity > MIN_VELOCITY * 0.7 && scrollAtBoundary.current;
|
|
9680
|
+
if (wasFastSwipe) {
|
|
9681
|
+
onDismiss();
|
|
9682
|
+
}
|
|
9683
|
+
|
|
9684
|
+
// Reset state
|
|
9685
|
+
setIsDragging(false);
|
|
9686
|
+
setDragOffset(0);
|
|
9687
|
+
startPos.current = null;
|
|
9688
|
+
scrollAtBoundary.current = false;
|
|
9689
|
+
lastSwipeDistance.current = 0;
|
|
9690
|
+
lastSwipeTime.current = 0;
|
|
9691
|
+
hasConfirmedFastSwipe.current = false;
|
|
9692
|
+
}, [onDismiss]);
|
|
9693
|
+
return {
|
|
9694
|
+
isDragging: isDragging,
|
|
9695
|
+
dragOffset: dragOffset,
|
|
9696
|
+
handleTouchStart: handleTouchStart,
|
|
9697
|
+
handleTouchMove: handleTouchMove,
|
|
9698
|
+
handleTouchEnd: handleTouchEnd,
|
|
9699
|
+
wrapperRef: wrapperRef
|
|
9700
|
+
};
|
|
9701
|
+
};
|
|
9702
|
+
|
|
9518
9703
|
function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
9519
9704
|
function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
9520
|
-
var
|
|
9521
|
-
var _contentStore$drawerM
|
|
9705
|
+
var DrawerMenu = function DrawerMenu(_ref) {
|
|
9706
|
+
var _contentStore$drawerM;
|
|
9522
9707
|
_objectDestructuringEmpty(_ref);
|
|
9523
9708
|
var _useDivaCoreContext = useDivaCoreContext(),
|
|
9524
9709
|
contentStore = _useDivaCoreContext.contentStore;
|
|
9525
|
-
var _useState = useState(0),
|
|
9526
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
9527
|
-
activeSnapPoint = _useState2[0],
|
|
9528
|
-
_setActiveSnapPoint = _useState2[1];
|
|
9529
9710
|
var useMove = useMemo(function () {
|
|
9530
9711
|
return function (ev) {
|
|
9531
9712
|
return ev.preventDefault();
|
|
9532
9713
|
};
|
|
9533
9714
|
}, []);
|
|
9534
|
-
var
|
|
9535
|
-
var _ref2 = (_contentStore$drawerM = contentStore.drawerMenu) !== null && _contentStore$drawerM !== void 0 ? _contentStore$drawerM : {},
|
|
9715
|
+
var _ref2 = (_contentStore$drawerM = contentStore === null || contentStore === void 0 ? void 0 : contentStore.drawerMenu) !== null && _contentStore$drawerM !== void 0 ? _contentStore$drawerM : {},
|
|
9536
9716
|
showOverlay = _ref2.showOverlay,
|
|
9537
|
-
|
|
9538
|
-
mountElementId = _ref2$mountElementId === void 0 ? 'DivaCore' : _ref2$mountElementId,
|
|
9717
|
+
mountElement = _ref2.mountElement,
|
|
9539
9718
|
onClose = _ref2.onClose,
|
|
9540
9719
|
open = _ref2.open,
|
|
9541
9720
|
_ref2$direction = _ref2.direction,
|
|
9542
9721
|
direction = _ref2$direction === void 0 ? 'bottom' : _ref2$direction,
|
|
9543
9722
|
title = _ref2.title,
|
|
9544
|
-
snapPoints = _ref2.snapPoints,
|
|
9545
9723
|
noModal = _ref2.noModal,
|
|
9546
9724
|
handleInternScroll = _ref2.handleInternScroll,
|
|
9547
9725
|
hideCloseButton = _ref2.hideCloseButton,
|
|
@@ -9549,7 +9727,12 @@ var MobileDrawer = function MobileDrawer(_ref) {
|
|
|
9549
9727
|
backgroundColor = _ref2.backgroundColor,
|
|
9550
9728
|
drawerStyle = _ref2.drawerStyle,
|
|
9551
9729
|
wrapperStyle = _ref2.wrapperStyle;
|
|
9730
|
+
var _useState = useState(open !== null && open !== void 0 ? open : false),
|
|
9731
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
9732
|
+
isOpen = _useState2[0],
|
|
9733
|
+
setIsOpen = _useState2[1];
|
|
9552
9734
|
useEffect(function () {
|
|
9735
|
+
setIsOpen(open !== null && open !== void 0 ? open : false);
|
|
9553
9736
|
//when drawer is open, prevent swipe to refresh the page on android
|
|
9554
9737
|
if (open) {
|
|
9555
9738
|
window.addEventListener('touchmove', useMove, {
|
|
@@ -9564,102 +9747,130 @@ var MobileDrawer = function MobileDrawer(_ref) {
|
|
|
9564
9747
|
window.removeEventListener('touchmove', useMove);
|
|
9565
9748
|
if (!noModal) document.body.classList.remove('drawer-open');
|
|
9566
9749
|
};
|
|
9567
|
-
}, [
|
|
9568
|
-
if (!contentStore.drawerMenu) return /*#__PURE__*/jsx(Fragment, {});
|
|
9569
|
-
var mountElement = mountElementId ? document.getElementById(mountElementId) : undefined;
|
|
9570
|
-
if (!mountElement) {
|
|
9571
|
-
return /*#__PURE__*/jsx(Fragment, {});
|
|
9572
|
-
}
|
|
9750
|
+
}, [open]);
|
|
9573
9751
|
var close = function close() {
|
|
9574
|
-
|
|
9752
|
+
setIsOpen(false);
|
|
9575
9753
|
//delay the state changes so the animation of the drawer is not interrupted
|
|
9576
9754
|
setTimeout(function () {
|
|
9577
9755
|
onClose === null || onClose === void 0 || onClose();
|
|
9578
9756
|
}, 400);
|
|
9579
9757
|
};
|
|
9580
|
-
var
|
|
9581
|
-
|
|
9582
|
-
|
|
9583
|
-
|
|
9584
|
-
|
|
9585
|
-
|
|
9586
|
-
|
|
9587
|
-
|
|
9588
|
-
|
|
9589
|
-
|
|
9590
|
-
|
|
9591
|
-
|
|
9592
|
-
|
|
9593
|
-
|
|
9594
|
-
|
|
9595
|
-
|
|
9758
|
+
var anchor = direction === 'left' ? 'left' : direction === 'right' ? 'right' : direction === 'top' ? 'top' : 'bottom';
|
|
9759
|
+
var isVertical = ['bottom', 'top'].includes(direction);
|
|
9760
|
+
var maxWidth = !isVertical ? 400 : undefined;
|
|
9761
|
+
|
|
9762
|
+
// Swipe to dismiss functionality
|
|
9763
|
+
var _useSwipeToDismiss = useSwipeToDismiss(direction, close),
|
|
9764
|
+
isDragging = _useSwipeToDismiss.isDragging,
|
|
9765
|
+
dragOffset = _useSwipeToDismiss.dragOffset,
|
|
9766
|
+
handleTouchStart = _useSwipeToDismiss.handleTouchStart,
|
|
9767
|
+
handleTouchMove = _useSwipeToDismiss.handleTouchMove,
|
|
9768
|
+
handleTouchEnd = _useSwipeToDismiss.handleTouchEnd,
|
|
9769
|
+
wrapperRef = _useSwipeToDismiss.wrapperRef;
|
|
9770
|
+
var iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
|
|
9771
|
+
if (!(contentStore !== null && contentStore !== void 0 && contentStore.drawerMenu)) return /*#__PURE__*/jsx(Fragment, {});
|
|
9772
|
+
return /*#__PURE__*/jsxs(SwipeableDrawer, {
|
|
9773
|
+
anchor: anchor,
|
|
9774
|
+
open: !!isOpen,
|
|
9596
9775
|
onClose: close,
|
|
9597
|
-
|
|
9598
|
-
|
|
9599
|
-
|
|
9600
|
-
|
|
9776
|
+
disableBackdropTransition: !iOS,
|
|
9777
|
+
disableDiscovery: iOS,
|
|
9778
|
+
hideBackdrop: !showOverlay,
|
|
9779
|
+
onOpen: function onOpen() {},
|
|
9780
|
+
disableSwipeToOpen: true,
|
|
9781
|
+
container: mountElement,
|
|
9782
|
+
variant: 'temporary',
|
|
9783
|
+
ModalProps: {
|
|
9784
|
+
keepMounted: true,
|
|
9785
|
+
style: _objectSpread$5(_objectSpread$5({}, noModal ? {
|
|
9786
|
+
pointerEvents: 'none'
|
|
9787
|
+
} : undefined), (drawerStyle === null || drawerStyle === void 0 ? void 0 : drawerStyle.zIndex) !== undefined ? {
|
|
9788
|
+
zIndex: drawerStyle.zIndex
|
|
9789
|
+
} : undefined),
|
|
9790
|
+
disableEnforceFocus: !showOverlay,
|
|
9791
|
+
// Allow focus outside drawer when no overlay
|
|
9792
|
+
disableAutoFocus: !showOverlay // Don't auto-focus drawer content when no overlay
|
|
9601
9793
|
},
|
|
9602
|
-
|
|
9603
|
-
|
|
9604
|
-
|
|
9605
|
-
|
|
9606
|
-
|
|
9607
|
-
|
|
9608
|
-
|
|
9609
|
-
|
|
9610
|
-
|
|
9794
|
+
slotProps: _objectSpread$5(_objectSpread$5({}, showOverlay ? {
|
|
9795
|
+
backdrop: {
|
|
9796
|
+
className: overlay,
|
|
9797
|
+
style: {
|
|
9798
|
+
position: 'absolute'
|
|
9799
|
+
}
|
|
9800
|
+
}
|
|
9801
|
+
} : {}), {}, {
|
|
9802
|
+
paper: {
|
|
9803
|
+
className: classnames(drawerContent, direction === 'bottom' ? bottom : direction === 'left' ? left : direction === 'right' ? right : direction === 'top' ? top : undefined),
|
|
9611
9804
|
style: _objectSpread$5({
|
|
9612
|
-
height:
|
|
9613
|
-
maxHeight:
|
|
9614
|
-
maxWidth: maxWidth
|
|
9805
|
+
height: isVertical ? 'auto' : '100%',
|
|
9806
|
+
maxHeight: isVertical ? '85%' : undefined,
|
|
9807
|
+
maxWidth: maxWidth,
|
|
9808
|
+
position: 'absolute',
|
|
9809
|
+
borderTopRightRadius: ['bottom', 'left'].includes(direction) ? '10px' : '0px',
|
|
9810
|
+
borderTopLeftRadius: ['bottom', 'right'].includes(direction) ? '10px' : '0px',
|
|
9811
|
+
borderBottomRightRadius: ['top', 'right'].includes(direction) ? '10px' : '0px',
|
|
9812
|
+
borderBottomLeftRadius: ['top', 'left'].includes(direction) ? '10px' : '0px',
|
|
9813
|
+
display: 'flex',
|
|
9814
|
+
flexDirection: 'column',
|
|
9815
|
+
transform: isDragging ? "translate".concat(isVertical ? 'Y' : 'X', "(").concat(dragOffset, "px)") : undefined,
|
|
9816
|
+
transition: isDragging ? 'none' : 'transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1)',
|
|
9817
|
+
willChange: isDragging ? 'transform' : 'auto'
|
|
9615
9818
|
}, drawerStyle),
|
|
9616
|
-
|
|
9617
|
-
|
|
9618
|
-
|
|
9619
|
-
|
|
9620
|
-
|
|
9621
|
-
|
|
9622
|
-
|
|
9623
|
-
|
|
9624
|
-
|
|
9625
|
-
|
|
9626
|
-
|
|
9627
|
-
|
|
9628
|
-
|
|
9629
|
-
|
|
9630
|
-
|
|
9631
|
-
|
|
9632
|
-
|
|
9633
|
-
|
|
9634
|
-
|
|
9635
|
-
|
|
9636
|
-
|
|
9637
|
-
|
|
9638
|
-
|
|
9639
|
-
|
|
9640
|
-
|
|
9641
|
-
|
|
9642
|
-
|
|
9643
|
-
|
|
9644
|
-
|
|
9645
|
-
|
|
9646
|
-
|
|
9647
|
-
className: classnames(scrollWrapper),
|
|
9648
|
-
children: [content, /*#__PURE__*/jsx("div", {
|
|
9649
|
-
className: bottomSpacer
|
|
9650
|
-
})]
|
|
9651
|
-
}) : content]
|
|
9819
|
+
elevation: 0
|
|
9820
|
+
}
|
|
9821
|
+
}),
|
|
9822
|
+
children: [isVertical && /*#__PURE__*/jsx("div", {
|
|
9823
|
+
className: drawerHandle,
|
|
9824
|
+
children: /*#__PURE__*/jsx("div", {
|
|
9825
|
+
className: drawerHandleLine
|
|
9826
|
+
})
|
|
9827
|
+
}), title !== undefined && /*#__PURE__*/jsx("div", {
|
|
9828
|
+
className: classnames(drawerHeader),
|
|
9829
|
+
children: title
|
|
9830
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
9831
|
+
className: classnames(drawer, !isVertical ? onSide : undefined),
|
|
9832
|
+
onTouchMove: function onTouchMove(e) {
|
|
9833
|
+
if (!e.target.closest('.diva-stop-swipe-detection')) e.stopPropagation();
|
|
9834
|
+
},
|
|
9835
|
+
style: _objectSpread$5({
|
|
9836
|
+
maxWidth: maxWidth,
|
|
9837
|
+
backgroundColor: backgroundColor
|
|
9838
|
+
}, wrapperStyle),
|
|
9839
|
+
children: [!hideCloseButton && /*#__PURE__*/jsx("button", {
|
|
9840
|
+
className: closeButton,
|
|
9841
|
+
onClick: close
|
|
9842
|
+
}), !handleInternScroll ? /*#__PURE__*/jsxs("div", {
|
|
9843
|
+
ref: wrapperRef,
|
|
9844
|
+
className: classnames(scrollWrapper),
|
|
9845
|
+
onTouchStart: handleTouchStart,
|
|
9846
|
+
onTouchMove: handleTouchMove,
|
|
9847
|
+
onTouchEnd: handleTouchEnd,
|
|
9848
|
+
children: [content, /*#__PURE__*/jsx("div", {
|
|
9849
|
+
className: bottomSpacer
|
|
9652
9850
|
})]
|
|
9851
|
+
}) : /*#__PURE__*/jsx("div", {
|
|
9852
|
+
ref: wrapperRef,
|
|
9853
|
+
style: {
|
|
9854
|
+
flex: 1,
|
|
9855
|
+
minHeight: 0,
|
|
9856
|
+
overflow: 'hidden',
|
|
9857
|
+
display: 'flex',
|
|
9858
|
+
flexDirection: 'column'
|
|
9859
|
+
},
|
|
9860
|
+
onTouchStart: handleTouchStart,
|
|
9861
|
+
onTouchMove: handleTouchMove,
|
|
9862
|
+
onTouchEnd: handleTouchEnd,
|
|
9863
|
+
children: content
|
|
9653
9864
|
})]
|
|
9654
|
-
})
|
|
9865
|
+
})]
|
|
9655
9866
|
});
|
|
9656
9867
|
};
|
|
9657
|
-
var DrawerMenu = observer(
|
|
9868
|
+
var DrawerMenu$1 = observer(DrawerMenu);
|
|
9658
9869
|
|
|
9659
9870
|
function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
9660
9871
|
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
9661
9872
|
var LazyModals$1 = /*#__PURE__*/React.lazy(function () {
|
|
9662
|
-
return import('./ModalsWrapper-
|
|
9873
|
+
return import('./ModalsWrapper-4b0cc7ca.js');
|
|
9663
9874
|
});
|
|
9664
9875
|
function Fullscreen(_ref) {
|
|
9665
9876
|
var inAbsoluteFullscreen = _ref.inAbsoluteFullscreen;
|
|
@@ -9755,7 +9966,7 @@ function Fullscreen(_ref) {
|
|
|
9755
9966
|
style: isMobile ? (_c$state$absoluteFull = c.state.absoluteFullscreenStyle) === null || _c$state$absoluteFull === void 0 ? void 0 : _c$state$absoluteFull.mobile : (_c$state$absoluteFull2 = c.state.absoluteFullscreenStyle) === null || _c$state$absoluteFull2 === void 0 ? void 0 : _c$state$absoluteFull2.desktop,
|
|
9756
9967
|
children: [/*#__PURE__*/jsx(Fullscreen, {
|
|
9757
9968
|
inAbsoluteFullscreen: true
|
|
9758
|
-
}), /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(DrawerMenu, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), /*#__PURE__*/jsx(Suspense, {
|
|
9969
|
+
}), /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(DrawerMenu$1, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), /*#__PURE__*/jsx(Suspense, {
|
|
9759
9970
|
fallback: /*#__PURE__*/jsx(Fallback, {}),
|
|
9760
9971
|
children: /*#__PURE__*/jsx(C, _objectSpread$4({}, c.state))
|
|
9761
9972
|
})]
|
|
@@ -9768,7 +9979,7 @@ function Fullscreen(_ref) {
|
|
|
9768
9979
|
style: {
|
|
9769
9980
|
zIndex: contentStore.fullscreen.overwrittenZIndex
|
|
9770
9981
|
},
|
|
9771
|
-
children: [!contentStore.fullscreen.hideSpinner && /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(DrawerMenu, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), !contentStore.fullscreen.hideClose && /*#__PURE__*/jsx("div", {
|
|
9982
|
+
children: [!contentStore.fullscreen.hideSpinner && /*#__PURE__*/jsx(Spinner$1, {}), /*#__PURE__*/jsx(DrawerMenu$1, {}), configurationStore.enableModals && /*#__PURE__*/jsx(LazyModals$1, {}), !contentStore.fullscreen.hideClose && /*#__PURE__*/jsx("div", {
|
|
9772
9983
|
className: closeIcon,
|
|
9773
9984
|
onClick: onClose,
|
|
9774
9985
|
"data-test-id": "closeFullscreenBtn",
|
|
@@ -10119,10 +10330,10 @@ function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
|
|
|
10119
10330
|
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
10120
10331
|
var LOG$2 = getLogger('Framework', 'Root');
|
|
10121
10332
|
var LazyAuth = /*#__PURE__*/React.lazy(function () {
|
|
10122
|
-
return import('./index-
|
|
10333
|
+
return import('./index-b38c8754.js');
|
|
10123
10334
|
});
|
|
10124
10335
|
var LazyModals = /*#__PURE__*/React.lazy(function () {
|
|
10125
|
-
return import('./ModalsWrapper-
|
|
10336
|
+
return import('./ModalsWrapper-4b0cc7ca.js');
|
|
10126
10337
|
});
|
|
10127
10338
|
function ContentComponent() {
|
|
10128
10339
|
var context = useDivaCoreContext();
|
|
@@ -10133,7 +10344,7 @@ function ContentComponent() {
|
|
|
10133
10344
|
children: [/*#__PURE__*/jsxs(Suspense, {
|
|
10134
10345
|
fallback: /*#__PURE__*/jsx(Fragment, {}),
|
|
10135
10346
|
children: [context.configurationStore.hasAuthentication && /*#__PURE__*/jsx(LazyAuth, {}), context.configurationStore.enableModals && !context.contentStore.fullscreen && !context.contentStore.isFullscreenComponentDefined && /*#__PURE__*/jsx(LazyModals, {})]
|
|
10136
|
-
}), /*#__PURE__*/jsx(Banner$1, {}), /*#__PURE__*/jsx(Fullscreen$1, {}), /*#__PURE__*/jsx(SnackBar, {}), !context.contentStore.isFullscreenComponentDefined && /*#__PURE__*/jsx(DrawerMenu, {}), /*#__PURE__*/jsxs("div", {
|
|
10347
|
+
}), /*#__PURE__*/jsx(Banner$1, {}), /*#__PURE__*/jsx(Fullscreen$1, {}), /*#__PURE__*/jsx(SnackBar, {}), !context.contentStore.isFullscreenComponentDefined && /*#__PURE__*/jsx(DrawerMenu$1, {}), /*#__PURE__*/jsxs("div", {
|
|
10137
10348
|
style: {
|
|
10138
10349
|
position: 'relative',
|
|
10139
10350
|
width: '100%',
|
|
@@ -11103,4 +11314,4 @@ LOG.startTransaction({
|
|
|
11103
11314
|
});
|
|
11104
11315
|
window.DIVA_VERSION = "v".concat(process.env.VERSION);
|
|
11105
11316
|
|
|
11106
|
-
export { AuthorizationHandler as A, Content as C,
|
|
11317
|
+
export { AuthorizationHandler as A, Content as C, DrawerMenu$1 as D, HelpButton as H, ONE_DAY_UNIX as O, ProductHandler as P, RequestStatus as R, SupportHandler as S, useDivaCore as a, DivaCore as b, AnalyticsHandler as c, OrganizationHandler as d, ClientArticleHandler as e, DivaMockProvider as f, getLogger as g, storyBookCoreMock as h, styleInject as s, useDivaCoreContext as u };
|