@dreamcommerce/aurora 2.4.0-17 → 2.4.0-19
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/cjs/packages/aurora/src/components/dropdown/components/content.js +25 -12
- package/build/cjs/packages/aurora/src/components/dropdown/components/content.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/dropdown/utilities.js +4 -4
- package/build/cjs/packages/aurora/src/css/slide/main.module.less.js +1 -1
- package/build/cjs/packages/aurora/src/css/stack/main.module.less.js +1 -1
- package/build/esm/packages/aurora/src/components/dropdown/components/content.js +26 -13
- package/build/esm/packages/aurora/src/components/dropdown/components/content.js.map +1 -1
- package/build/esm/packages/aurora/src/components/dropdown/utilities.js +4 -4
- package/build/esm/packages/aurora/src/components/stack/stack_types.d.ts +2 -2
- package/build/esm/packages/aurora/src/css/slide/main.module.less.js +1 -1
- package/build/esm/packages/aurora/src/css/stack/main.module.less.js +1 -1
- package/package.json +1 -1
|
@@ -60,23 +60,36 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
|
|
|
60
60
|
toggleDropdown();
|
|
61
61
|
}
|
|
62
62
|
});
|
|
63
|
+
const getDropdownPositionStyles = (isInModal, modalWrapperRect) => {
|
|
64
|
+
const { x, y, height, top } = modalWrapperRect;
|
|
65
|
+
const yOffset = 10;
|
|
66
|
+
const { xModifier, yModifier } = utilities.getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
|
|
67
|
+
const positionTop = top + height + yOffset - yModifier + window.scrollY;
|
|
68
|
+
const positionBottom = windowHeightMinusYOffset - y + yOffset;
|
|
69
|
+
const positionLeft = x - xModifier;
|
|
70
|
+
const zIndex = isInModal ? constants.DROPDOWN_ON_MODAL_Z_INDEX : constants.DROPDOWN_Z_INDEX;
|
|
71
|
+
const topPositionValue = !dropdownIsOutsideBottomViewport ? `${positionTop}px` : 'auto';
|
|
72
|
+
const bottomPositionValue = dropdownIsOutsideBottomViewport ? `${positionBottom}px` : 'auto';
|
|
73
|
+
return screenWidthName === responsive_breakpoints.SCREEN_XS
|
|
74
|
+
? { left: `0px`, top: `0px`, bottom: 'auto', zIndex }
|
|
75
|
+
: { left: `${positionLeft}px`, top: topPositionValue, bottom: bottomPositionValue, zIndex };
|
|
76
|
+
};
|
|
63
77
|
React.useEffect(() => {
|
|
64
78
|
if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
|
|
65
|
-
const { x, y, height } = wrapperRef.current.getBoundingClientRect();
|
|
66
|
-
const yOffset = 10;
|
|
67
|
-
const { xModifier, yModifier } = utilities.getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
|
|
68
|
-
const positionTop = height + y + yOffset - yModifier;
|
|
69
|
-
const positionBottom = windowHeightMinusYOffset - y + yOffset;
|
|
70
|
-
const positionLeft = x - xModifier;
|
|
71
79
|
const isInModal = utilities.isChildOfModal(wrapperRef);
|
|
72
|
-
|
|
73
|
-
const topPositionValue = !dropdownIsOutsideBottomViewport ? `${positionTop}px` : 'auto';
|
|
74
|
-
const bottomPositionValue = dropdownIsOutsideBottomViewport ? `${positionBottom}px` : 'auto';
|
|
75
|
-
screenWidthName === responsive_breakpoints.SCREEN_XS
|
|
76
|
-
? setStyles({ left: `0px`, top: `0px`, bottom: 'auto', zIndex })
|
|
77
|
-
: setStyles({ left: `${positionLeft}px`, top: topPositionValue, bottom: bottomPositionValue, zIndex });
|
|
80
|
+
setStyles(getDropdownPositionStyles(isInModal, wrapperRef.current.getBoundingClientRect()));
|
|
78
81
|
}
|
|
79
82
|
}, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideBottomViewport]);
|
|
83
|
+
React.useEffect(() => {
|
|
84
|
+
const handleWindowScroll = () => {
|
|
85
|
+
if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
|
|
86
|
+
const isInModal = utilities.isChildOfModal(wrapperRef);
|
|
87
|
+
setStyles(getDropdownPositionStyles(isInModal, wrapperRef.current.getBoundingClientRect()));
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
window.addEventListener('scroll', handleWindowScroll);
|
|
91
|
+
return () => window.removeEventListener('scroll', handleWindowScroll);
|
|
92
|
+
}, []);
|
|
80
93
|
return reactDom.createPortal(React__default['default'].createElement(reactTransitionGroup.TransitionGroup, { component: null }, isOpen === true ? (React__default['default'].createElement(reactTransitionGroup.CSSTransition, { timeout: 200, classNames: {
|
|
81
94
|
enter: main_module['default']['dropdown-enter'],
|
|
82
95
|
enterActive: main_module['default']['dropdown-enter-active'],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
require('react');
|
|
6
|
-
var main_module
|
|
6
|
+
var main_module = require('../../css/modal/main.module.less.js');
|
|
7
7
|
var css_classes = require('./css_classes.js');
|
|
8
8
|
var fuzzy_search = require('../../utilities/fuzzy_search/fuzzy_search.js');
|
|
9
|
-
var main_module = require('../../css/dropdown/main.module.less.js');
|
|
9
|
+
var main_module$1 = require('../../css/dropdown/main.module.less.js');
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* checks if the given option is selected within array of selectedValues array
|
|
@@ -47,7 +47,7 @@ const getXYModifiersForNestedDropdowns = (portalContainer) => {
|
|
|
47
47
|
let xModifier = 0;
|
|
48
48
|
let yModifier = 0;
|
|
49
49
|
if (portalContainer) {
|
|
50
|
-
const $parentDropdownContent = portalContainer.closest(`.${main_module['default'][css_classes.cssDropdownContent]}`);
|
|
50
|
+
const $parentDropdownContent = portalContainer.closest(`.${main_module$1['default'][css_classes.cssDropdownContent]}`);
|
|
51
51
|
if ($parentDropdownContent) {
|
|
52
52
|
const { x: portalX, y: portalY } = $parentDropdownContent.getBoundingClientRect();
|
|
53
53
|
xModifier = portalX;
|
|
@@ -63,7 +63,7 @@ const isChildOfModal = (ref) => {
|
|
|
63
63
|
var _a;
|
|
64
64
|
let currentParent = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
65
65
|
while (currentParent) {
|
|
66
|
-
if (currentParent.classList.contains(main_module
|
|
66
|
+
if (currentParent.classList.contains(main_module['default']['modal-window'])) {
|
|
67
67
|
return true;
|
|
68
68
|
}
|
|
69
69
|
currentParent = currentParent === null || currentParent === void 0 ? void 0 : currentParent.parentElement;
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
|
|
6
6
|
|
|
7
|
-
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@-webkit-keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@-webkit-keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n.main-module_slide__1kcca {\n position: absolute;\n top: 0;\n height: 100%;\n background-color: #fff;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n overflow-y: hidden;\n z-index: 1;\n}\n.main-module_slide__wrapper__3mC8j {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.main-module_slide__header__11UTh {\n width: 100%;\n border-bottom: 1px solid #abb4cd;\n background-color: #fff;\n display: flex;\n align-items: center;\n box-shadow: 0 0 9px 0 rgba(16, 47, 102, 0.16);\n}\n.main-module_slide__content__3KeZM {\n flex: 1;\n overflow-y: scroll;\n}\n.main-module_slide__footer__3wvMP {\n padding: 1.5rem 1rem 1.5rem 1rem;\n background-color: #
|
|
7
|
+
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@-webkit-keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@-webkit-keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n.main-module_slide__1kcca {\n position: absolute;\n top: 0;\n height: 100%;\n background-color: #fff;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n overflow-y: hidden;\n z-index: 1;\n}\n.main-module_slide__wrapper__3mC8j {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.main-module_slide__header__11UTh {\n width: 100%;\n border-bottom: 1px solid #abb4cd;\n background-color: #fff;\n display: flex;\n align-items: center;\n box-shadow: 0 0 9px 0 rgba(16, 47, 102, 0.16);\n}\n.main-module_slide__content__3KeZM {\n flex: 1;\n overflow-y: scroll;\n}\n.main-module_slide__footer__3wvMP {\n padding: 1.5rem 1rem 1.5rem 1rem;\n background-color: #fff;\n border-top: 1px solid #abb4cd;\n box-shadow: 0 1px 5px 0 rgba(171, 180, 205, 0.6);\n}\n.main-module_slide_direction-left__Rg5kV {\n right: 0;\n left: 0;\n -webkit-animation-name: main-module_directionLeftHide__QSuRw;\n animation-name: main-module_directionLeftHide__QSuRw;\n}\n.main-module_slide_direction-left__Rg5kV.main-module_slide_is-open__3twK9 {\n -webkit-animation-name: main-module_directionLeftShow__1VVi1;\n animation-name: main-module_directionLeftShow__1VVi1;\n}\n";
|
|
8
8
|
var cssClasses = {"slide":"main-module_slide__1kcca","slide__wrapper":"main-module_slide__wrapper__3mC8j","slide__header":"main-module_slide__header__11UTh","slide__content":"main-module_slide__content__3KeZM","slide__footer":"main-module_slide__footer__3wvMP","slide_direction-left":"main-module_slide_direction-left__Rg5kV","directionLeftHide":"main-module_directionLeftHide__QSuRw","slide_is-open":"main-module_slide_is-open__3twK9","directionLeftShow":"main-module_directionLeftShow__1VVi1"};
|
|
9
9
|
styleInject_es['default'](css_248z);
|
|
10
10
|
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
|
|
6
6
|
|
|
7
|
-
var css_248z = ".main-module_stack__3-jiz {\n display: flex;\n}\n.main-module_stack_inline__3_yIz {\n display: inline-flex;\n}\n.main-module_stack_align_baseline__3SbXR {\n align-items: baseline;\n}\n.main-module_stack_align_center__8Oiot {\n align-items: center;\n}\n.main-module_stack_align_start__1XZH7 {\n align-items: start;\n}\n.main-module_stack_align_end__3QU1b {\n align-items: end;\n}\n.main-module_stack_align_flex-start__2f9Wz {\n align-items: flex-start;\n}\n.main-module_stack_align_flex-end__3xf08 {\n align-items: flex-end;\n}\n.main-module_stack_align_inherit__xPQNE {\n align-items: inherit;\n}\n.main-module_stack_align_initial__1qB9J {\n align-items: initial;\n}\n.main-module_stack_align_normal__3V4Fe {\n align-items: normal;\n}\n.main-module_stack_align_revert__11jKE {\n align-items: revert;\n}\n.main-module_stack_align_self-start__3Yb8f {\n align-items: self-start;\n}\n.main-module_stack_align_self-end__3eK1k {\n align-items: self-end;\n}\n.main-module_stack_align_stretch__1Wqh9 {\n align-items: stretch;\n}\n.main-module_stack_align_unset__3MxA_ {\n align-items: unset;\n}\n.main-module_stack_justify_center__2yHEa {\n
|
|
7
|
+
var css_248z = ".main-module_stack__3-jiz {\n display: flex;\n}\n.main-module_stack_inline__3_yIz {\n display: inline-flex;\n}\n.main-module_stack_align_baseline__3SbXR {\n align-items: baseline;\n}\n.main-module_stack_align_center__8Oiot {\n align-items: center;\n}\n.main-module_stack_align_start__1XZH7 {\n align-items: start;\n}\n.main-module_stack_align_end__3QU1b {\n align-items: end;\n}\n.main-module_stack_align_flex-start__2f9Wz {\n align-items: flex-start;\n}\n.main-module_stack_align_flex-end__3xf08 {\n align-items: flex-end;\n}\n.main-module_stack_align_inherit__xPQNE {\n align-items: inherit;\n}\n.main-module_stack_align_initial__1qB9J {\n align-items: initial;\n}\n.main-module_stack_align_normal__3V4Fe {\n align-items: normal;\n}\n.main-module_stack_align_revert__11jKE {\n align-items: revert;\n}\n.main-module_stack_align_self-start__3Yb8f {\n align-items: self-start;\n}\n.main-module_stack_align_self-end__3eK1k {\n align-items: self-end;\n}\n.main-module_stack_align_stretch__1Wqh9 {\n align-items: stretch;\n}\n.main-module_stack_align_unset__3MxA_ {\n align-items: unset;\n}\n.main-module_stack_justify_center__2yHEa {\n justify-content: center;\n}\n.main-module_stack_justify_start__3-Xzo {\n justify-content: start;\n}\n.main-module_stack_justify_end__2bxER {\n justify-content: end;\n}\n.main-module_stack_justify_flex-start__37n5K {\n justify-content: flex-start;\n}\n.main-module_stack_justify_flex-end__1Bn86 {\n justify-content: flex-end;\n}\n.main-module_stack_justify_inherit__vBXE0 {\n justify-content: inherit;\n}\n.main-module_stack_justify_initial__1ZrSu {\n justify-content: initial;\n}\n.main-module_stack_justify_normal__oCHaG {\n justify-content: normal;\n}\n.main-module_stack_justify_revert__178VV {\n justify-content: revert;\n}\n.main-module_stack_justify_left__2OXyY {\n justify-content: left;\n}\n.main-module_stack_justify_right__SpZ4H {\n justify-content: right;\n}\n.main-module_stack_justify_space-around__3bdw0 {\n justify-content: space-around;\n}\n.main-module_stack_justify_space-between__3F8bw {\n justify-content: space-between;\n}\n.main-module_stack_justify_space-evenly__FJU9F {\n justify-content: space-evenly;\n}\n.main-module_stack_justify_stretch__1jlvC {\n justify-content: stretch;\n}\n.main-module_stack_justify_unset__2HlHd {\n justify-content: unset;\n}\n.main-module_stack_wrap_wrap__uKbM1 {\n flex-wrap: wrap;\n}\n.main-module_stack_wrap_nowrap__i2Afg {\n flex-wrap: nowrap;\n}\n.main-module_stack_wrap_wrap-reverse__d4f4t {\n flex-wrap: wrap-reverse;\n}\n.main-module_stack_wrap_inherit__14f1V {\n flex-wrap: inherit;\n}\n.main-module_stack_wrap_initial__12dgJ {\n flex-wrap: initial;\n}\n.main-module_stack_wrap_revert__2rF92 {\n flex-wrap: revert;\n}\n.main-module_stack_wrap_unset__3D9Go {\n flex-wrap: unset;\n}\n.main-module_stack_direction_column__1lGtW {\n flex-direction: column;\n}\n.main-module_stack_direction_column-reverse__2ZEqE {\n flex-direction: column-reverse;\n}\n.main-module_stack_direction_inherit__3-x4i {\n flex-direction: inherit;\n}\n.main-module_stack_direction_initial__jieCo {\n flex-direction: initial;\n}\n.main-module_stack_direction_row__1I2OC {\n flex-direction: row;\n}\n.main-module_stack_direction_row-reverse__2wnjd {\n flex-direction: row-reverse;\n}\n.main-module_stack_direction_unset__q3yaL {\n flex-direction: unset;\n}\n";
|
|
8
8
|
var cssClasses = {"stack":"main-module_stack__3-jiz","stack_inline":"main-module_stack_inline__3_yIz","stack_align_baseline":"main-module_stack_align_baseline__3SbXR","stack_align_center":"main-module_stack_align_center__8Oiot","stack_align_start":"main-module_stack_align_start__1XZH7","stack_align_end":"main-module_stack_align_end__3QU1b","stack_align_flex-start":"main-module_stack_align_flex-start__2f9Wz","stack_align_flex-end":"main-module_stack_align_flex-end__3xf08","stack_align_inherit":"main-module_stack_align_inherit__xPQNE","stack_align_initial":"main-module_stack_align_initial__1qB9J","stack_align_normal":"main-module_stack_align_normal__3V4Fe","stack_align_revert":"main-module_stack_align_revert__11jKE","stack_align_self-start":"main-module_stack_align_self-start__3Yb8f","stack_align_self-end":"main-module_stack_align_self-end__3eK1k","stack_align_stretch":"main-module_stack_align_stretch__1Wqh9","stack_align_unset":"main-module_stack_align_unset__3MxA_","stack_justify_center":"main-module_stack_justify_center__2yHEa","stack_justify_start":"main-module_stack_justify_start__3-Xzo","stack_justify_end":"main-module_stack_justify_end__2bxER","stack_justify_flex-start":"main-module_stack_justify_flex-start__37n5K","stack_justify_flex-end":"main-module_stack_justify_flex-end__1Bn86","stack_justify_inherit":"main-module_stack_justify_inherit__vBXE0","stack_justify_initial":"main-module_stack_justify_initial__1ZrSu","stack_justify_normal":"main-module_stack_justify_normal__oCHaG","stack_justify_revert":"main-module_stack_justify_revert__178VV","stack_justify_left":"main-module_stack_justify_left__2OXyY","stack_justify_right":"main-module_stack_justify_right__SpZ4H","stack_justify_space-around":"main-module_stack_justify_space-around__3bdw0","stack_justify_space-between":"main-module_stack_justify_space-between__3F8bw","stack_justify_space-evenly":"main-module_stack_justify_space-evenly__FJU9F","stack_justify_stretch":"main-module_stack_justify_stretch__1jlvC","stack_justify_unset":"main-module_stack_justify_unset__2HlHd","stack_wrap_wrap":"main-module_stack_wrap_wrap__uKbM1","stack_wrap_nowrap":"main-module_stack_wrap_nowrap__i2Afg","stack_wrap_wrap-reverse":"main-module_stack_wrap_wrap-reverse__d4f4t","stack_wrap_inherit":"main-module_stack_wrap_inherit__14f1V","stack_wrap_initial":"main-module_stack_wrap_initial__12dgJ","stack_wrap_revert":"main-module_stack_wrap_revert__2rF92","stack_wrap_unset":"main-module_stack_wrap_unset__3D9Go","stack_direction_column":"main-module_stack_direction_column__1lGtW","stack_direction_column-reverse":"main-module_stack_direction_column-reverse__2ZEqE","stack_direction_inherit":"main-module_stack_direction_inherit__3-x4i","stack_direction_initial":"main-module_stack_direction_initial__jieCo","stack_direction_row":"main-module_stack_direction_row__1I2OC","stack_direction_row-reverse":"main-module_stack_direction_row-reverse__2wnjd","stack_direction_unset":"main-module_stack_direction_unset__q3yaL"};
|
|
9
9
|
styleInject_es['default'](css_248z);
|
|
10
10
|
|
|
@@ -11,7 +11,7 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
|
11
11
|
import { DROPDOWN_Z_INDEX, DROPDOWN_ON_MODAL_Z_INDEX } from '../constants.js';
|
|
12
12
|
import { cssDropdownContent, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
|
|
13
13
|
import cssClasses from '../../../css/dropdown/main.module.less.js';
|
|
14
|
-
import {
|
|
14
|
+
import { isChildOfModal, getXYModifiersForNestedDropdowns } from '../utilities.js';
|
|
15
15
|
import { useClickOutside } from '../../../hooks/use_click_outside.js';
|
|
16
16
|
import IconArrow from '../../../assets/icon_arrow.js';
|
|
17
17
|
|
|
@@ -52,23 +52,36 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
|
|
|
52
52
|
toggleDropdown();
|
|
53
53
|
}
|
|
54
54
|
});
|
|
55
|
+
const getDropdownPositionStyles = (isInModal, modalWrapperRect) => {
|
|
56
|
+
const { x, y, height, top } = modalWrapperRect;
|
|
57
|
+
const yOffset = 10;
|
|
58
|
+
const { xModifier, yModifier } = getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
|
|
59
|
+
const positionTop = top + height + yOffset - yModifier + window.scrollY;
|
|
60
|
+
const positionBottom = windowHeightMinusYOffset - y + yOffset;
|
|
61
|
+
const positionLeft = x - xModifier;
|
|
62
|
+
const zIndex = isInModal ? DROPDOWN_ON_MODAL_Z_INDEX : DROPDOWN_Z_INDEX;
|
|
63
|
+
const topPositionValue = !dropdownIsOutsideBottomViewport ? `${positionTop}px` : 'auto';
|
|
64
|
+
const bottomPositionValue = dropdownIsOutsideBottomViewport ? `${positionBottom}px` : 'auto';
|
|
65
|
+
return screenWidthName === SCREEN_XS
|
|
66
|
+
? { left: `0px`, top: `0px`, bottom: 'auto', zIndex }
|
|
67
|
+
: { left: `${positionLeft}px`, top: topPositionValue, bottom: bottomPositionValue, zIndex };
|
|
68
|
+
};
|
|
55
69
|
useEffect(() => {
|
|
56
70
|
if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
|
|
57
|
-
const { x, y, height } = wrapperRef.current.getBoundingClientRect();
|
|
58
|
-
const yOffset = 10;
|
|
59
|
-
const { xModifier, yModifier } = getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
|
|
60
|
-
const positionTop = height + y + yOffset - yModifier;
|
|
61
|
-
const positionBottom = windowHeightMinusYOffset - y + yOffset;
|
|
62
|
-
const positionLeft = x - xModifier;
|
|
63
71
|
const isInModal = isChildOfModal(wrapperRef);
|
|
64
|
-
|
|
65
|
-
const topPositionValue = !dropdownIsOutsideBottomViewport ? `${positionTop}px` : 'auto';
|
|
66
|
-
const bottomPositionValue = dropdownIsOutsideBottomViewport ? `${positionBottom}px` : 'auto';
|
|
67
|
-
screenWidthName === SCREEN_XS
|
|
68
|
-
? setStyles({ left: `0px`, top: `0px`, bottom: 'auto', zIndex })
|
|
69
|
-
: setStyles({ left: `${positionLeft}px`, top: topPositionValue, bottom: bottomPositionValue, zIndex });
|
|
72
|
+
setStyles(getDropdownPositionStyles(isInModal, wrapperRef.current.getBoundingClientRect()));
|
|
70
73
|
}
|
|
71
74
|
}, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideBottomViewport]);
|
|
75
|
+
useEffect(() => {
|
|
76
|
+
const handleWindowScroll = () => {
|
|
77
|
+
if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
|
|
78
|
+
const isInModal = isChildOfModal(wrapperRef);
|
|
79
|
+
setStyles(getDropdownPositionStyles(isInModal, wrapperRef.current.getBoundingClientRect()));
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
window.addEventListener('scroll', handleWindowScroll);
|
|
83
|
+
return () => window.removeEventListener('scroll', handleWindowScroll);
|
|
84
|
+
}, []);
|
|
72
85
|
return createPortal(React.createElement(TransitionGroup, { component: null }, isOpen === true ? (React.createElement(CSSTransition, { timeout: 200, classNames: {
|
|
73
86
|
enter: cssClasses['dropdown-enter'],
|
|
74
87
|
enterActive: cssClasses['dropdown-enter-active'],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
import cssClasses
|
|
2
|
+
import cssClasses from '../../css/modal/main.module.less.js';
|
|
3
3
|
import { cssDropdownContent } from './css_classes.js';
|
|
4
4
|
import { fuzzySearch } from '../../utilities/fuzzy_search/fuzzy_search.js';
|
|
5
|
-
import cssClasses from '../../css/dropdown/main.module.less.js';
|
|
5
|
+
import cssClasses$1 from '../../css/dropdown/main.module.less.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* checks if the given option is selected within array of selectedValues array
|
|
@@ -43,7 +43,7 @@ const getXYModifiersForNestedDropdowns = (portalContainer) => {
|
|
|
43
43
|
let xModifier = 0;
|
|
44
44
|
let yModifier = 0;
|
|
45
45
|
if (portalContainer) {
|
|
46
|
-
const $parentDropdownContent = portalContainer.closest(`.${cssClasses[cssDropdownContent]}`);
|
|
46
|
+
const $parentDropdownContent = portalContainer.closest(`.${cssClasses$1[cssDropdownContent]}`);
|
|
47
47
|
if ($parentDropdownContent) {
|
|
48
48
|
const { x: portalX, y: portalY } = $parentDropdownContent.getBoundingClientRect();
|
|
49
49
|
xModifier = portalX;
|
|
@@ -59,7 +59,7 @@ const isChildOfModal = (ref) => {
|
|
|
59
59
|
var _a;
|
|
60
60
|
let currentParent = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
61
61
|
while (currentParent) {
|
|
62
|
-
if (currentParent.classList.contains(cssClasses
|
|
62
|
+
if (currentParent.classList.contains(cssClasses['modal-window'])) {
|
|
63
63
|
return true;
|
|
64
64
|
}
|
|
65
65
|
currentParent = currentParent === null || currentParent === void 0 ? void 0 : currentParent.parentElement;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Any } from 'ts-toolbelt';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP,
|
|
3
|
+
import { STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP, STACK_DIRECTIONS_TO_CSS_CLASSES_MAP, STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP, STACK_WRAP_TO_CSS_CLASSES_MAP } from "./stack_constants";
|
|
4
4
|
export declare type TStackProps = {
|
|
5
5
|
direction?: TStackDirection;
|
|
6
6
|
justify?: TStackJustify;
|
|
@@ -13,6 +13,6 @@ export declare type TStackProps = {
|
|
|
13
13
|
inline?: boolean;
|
|
14
14
|
};
|
|
15
15
|
export declare type TStackJustify = Any.Keys<typeof STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP>;
|
|
16
|
-
export declare type TStackDirection = Any.Keys<typeof
|
|
16
|
+
export declare type TStackDirection = Any.Keys<typeof STACK_DIRECTIONS_TO_CSS_CLASSES_MAP>;
|
|
17
17
|
export declare type TStackAlign = Any.Keys<typeof STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP>;
|
|
18
18
|
export declare type TStackWrap = Any.Keys<typeof STACK_WRAP_TO_CSS_CLASSES_MAP>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@-webkit-keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@-webkit-keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n.main-module_slide__1kcca {\n position: absolute;\n top: 0;\n height: 100%;\n background-color: #fff;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n overflow-y: hidden;\n z-index: 1;\n}\n.main-module_slide__wrapper__3mC8j {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.main-module_slide__header__11UTh {\n width: 100%;\n border-bottom: 1px solid #abb4cd;\n background-color: #fff;\n display: flex;\n align-items: center;\n box-shadow: 0 0 9px 0 rgba(16, 47, 102, 0.16);\n}\n.main-module_slide__content__3KeZM {\n flex: 1;\n overflow-y: scroll;\n}\n.main-module_slide__footer__3wvMP {\n padding: 1.5rem 1rem 1.5rem 1rem;\n background-color: #
|
|
3
|
+
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@-webkit-keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@-webkit-keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n.main-module_slide__1kcca {\n position: absolute;\n top: 0;\n height: 100%;\n background-color: #fff;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n overflow-y: hidden;\n z-index: 1;\n}\n.main-module_slide__wrapper__3mC8j {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.main-module_slide__header__11UTh {\n width: 100%;\n border-bottom: 1px solid #abb4cd;\n background-color: #fff;\n display: flex;\n align-items: center;\n box-shadow: 0 0 9px 0 rgba(16, 47, 102, 0.16);\n}\n.main-module_slide__content__3KeZM {\n flex: 1;\n overflow-y: scroll;\n}\n.main-module_slide__footer__3wvMP {\n padding: 1.5rem 1rem 1.5rem 1rem;\n background-color: #fff;\n border-top: 1px solid #abb4cd;\n box-shadow: 0 1px 5px 0 rgba(171, 180, 205, 0.6);\n}\n.main-module_slide_direction-left__Rg5kV {\n right: 0;\n left: 0;\n -webkit-animation-name: main-module_directionLeftHide__QSuRw;\n animation-name: main-module_directionLeftHide__QSuRw;\n}\n.main-module_slide_direction-left__Rg5kV.main-module_slide_is-open__3twK9 {\n -webkit-animation-name: main-module_directionLeftShow__1VVi1;\n animation-name: main-module_directionLeftShow__1VVi1;\n}\n";
|
|
4
4
|
var cssClasses = {"slide":"main-module_slide__1kcca","slide__wrapper":"main-module_slide__wrapper__3mC8j","slide__header":"main-module_slide__header__11UTh","slide__content":"main-module_slide__content__3KeZM","slide__footer":"main-module_slide__footer__3wvMP","slide_direction-left":"main-module_slide_direction-left__Rg5kV","directionLeftHide":"main-module_directionLeftHide__QSuRw","slide_is-open":"main-module_slide_is-open__3twK9","directionLeftShow":"main-module_directionLeftShow__1VVi1"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".main-module_stack__3-jiz {\n display: flex;\n}\n.main-module_stack_inline__3_yIz {\n display: inline-flex;\n}\n.main-module_stack_align_baseline__3SbXR {\n align-items: baseline;\n}\n.main-module_stack_align_center__8Oiot {\n align-items: center;\n}\n.main-module_stack_align_start__1XZH7 {\n align-items: start;\n}\n.main-module_stack_align_end__3QU1b {\n align-items: end;\n}\n.main-module_stack_align_flex-start__2f9Wz {\n align-items: flex-start;\n}\n.main-module_stack_align_flex-end__3xf08 {\n align-items: flex-end;\n}\n.main-module_stack_align_inherit__xPQNE {\n align-items: inherit;\n}\n.main-module_stack_align_initial__1qB9J {\n align-items: initial;\n}\n.main-module_stack_align_normal__3V4Fe {\n align-items: normal;\n}\n.main-module_stack_align_revert__11jKE {\n align-items: revert;\n}\n.main-module_stack_align_self-start__3Yb8f {\n align-items: self-start;\n}\n.main-module_stack_align_self-end__3eK1k {\n align-items: self-end;\n}\n.main-module_stack_align_stretch__1Wqh9 {\n align-items: stretch;\n}\n.main-module_stack_align_unset__3MxA_ {\n align-items: unset;\n}\n.main-module_stack_justify_center__2yHEa {\n
|
|
3
|
+
var css_248z = ".main-module_stack__3-jiz {\n display: flex;\n}\n.main-module_stack_inline__3_yIz {\n display: inline-flex;\n}\n.main-module_stack_align_baseline__3SbXR {\n align-items: baseline;\n}\n.main-module_stack_align_center__8Oiot {\n align-items: center;\n}\n.main-module_stack_align_start__1XZH7 {\n align-items: start;\n}\n.main-module_stack_align_end__3QU1b {\n align-items: end;\n}\n.main-module_stack_align_flex-start__2f9Wz {\n align-items: flex-start;\n}\n.main-module_stack_align_flex-end__3xf08 {\n align-items: flex-end;\n}\n.main-module_stack_align_inherit__xPQNE {\n align-items: inherit;\n}\n.main-module_stack_align_initial__1qB9J {\n align-items: initial;\n}\n.main-module_stack_align_normal__3V4Fe {\n align-items: normal;\n}\n.main-module_stack_align_revert__11jKE {\n align-items: revert;\n}\n.main-module_stack_align_self-start__3Yb8f {\n align-items: self-start;\n}\n.main-module_stack_align_self-end__3eK1k {\n align-items: self-end;\n}\n.main-module_stack_align_stretch__1Wqh9 {\n align-items: stretch;\n}\n.main-module_stack_align_unset__3MxA_ {\n align-items: unset;\n}\n.main-module_stack_justify_center__2yHEa {\n justify-content: center;\n}\n.main-module_stack_justify_start__3-Xzo {\n justify-content: start;\n}\n.main-module_stack_justify_end__2bxER {\n justify-content: end;\n}\n.main-module_stack_justify_flex-start__37n5K {\n justify-content: flex-start;\n}\n.main-module_stack_justify_flex-end__1Bn86 {\n justify-content: flex-end;\n}\n.main-module_stack_justify_inherit__vBXE0 {\n justify-content: inherit;\n}\n.main-module_stack_justify_initial__1ZrSu {\n justify-content: initial;\n}\n.main-module_stack_justify_normal__oCHaG {\n justify-content: normal;\n}\n.main-module_stack_justify_revert__178VV {\n justify-content: revert;\n}\n.main-module_stack_justify_left__2OXyY {\n justify-content: left;\n}\n.main-module_stack_justify_right__SpZ4H {\n justify-content: right;\n}\n.main-module_stack_justify_space-around__3bdw0 {\n justify-content: space-around;\n}\n.main-module_stack_justify_space-between__3F8bw {\n justify-content: space-between;\n}\n.main-module_stack_justify_space-evenly__FJU9F {\n justify-content: space-evenly;\n}\n.main-module_stack_justify_stretch__1jlvC {\n justify-content: stretch;\n}\n.main-module_stack_justify_unset__2HlHd {\n justify-content: unset;\n}\n.main-module_stack_wrap_wrap__uKbM1 {\n flex-wrap: wrap;\n}\n.main-module_stack_wrap_nowrap__i2Afg {\n flex-wrap: nowrap;\n}\n.main-module_stack_wrap_wrap-reverse__d4f4t {\n flex-wrap: wrap-reverse;\n}\n.main-module_stack_wrap_inherit__14f1V {\n flex-wrap: inherit;\n}\n.main-module_stack_wrap_initial__12dgJ {\n flex-wrap: initial;\n}\n.main-module_stack_wrap_revert__2rF92 {\n flex-wrap: revert;\n}\n.main-module_stack_wrap_unset__3D9Go {\n flex-wrap: unset;\n}\n.main-module_stack_direction_column__1lGtW {\n flex-direction: column;\n}\n.main-module_stack_direction_column-reverse__2ZEqE {\n flex-direction: column-reverse;\n}\n.main-module_stack_direction_inherit__3-x4i {\n flex-direction: inherit;\n}\n.main-module_stack_direction_initial__jieCo {\n flex-direction: initial;\n}\n.main-module_stack_direction_row__1I2OC {\n flex-direction: row;\n}\n.main-module_stack_direction_row-reverse__2wnjd {\n flex-direction: row-reverse;\n}\n.main-module_stack_direction_unset__q3yaL {\n flex-direction: unset;\n}\n";
|
|
4
4
|
var cssClasses = {"stack":"main-module_stack__3-jiz","stack_inline":"main-module_stack_inline__3_yIz","stack_align_baseline":"main-module_stack_align_baseline__3SbXR","stack_align_center":"main-module_stack_align_center__8Oiot","stack_align_start":"main-module_stack_align_start__1XZH7","stack_align_end":"main-module_stack_align_end__3QU1b","stack_align_flex-start":"main-module_stack_align_flex-start__2f9Wz","stack_align_flex-end":"main-module_stack_align_flex-end__3xf08","stack_align_inherit":"main-module_stack_align_inherit__xPQNE","stack_align_initial":"main-module_stack_align_initial__1qB9J","stack_align_normal":"main-module_stack_align_normal__3V4Fe","stack_align_revert":"main-module_stack_align_revert__11jKE","stack_align_self-start":"main-module_stack_align_self-start__3Yb8f","stack_align_self-end":"main-module_stack_align_self-end__3eK1k","stack_align_stretch":"main-module_stack_align_stretch__1Wqh9","stack_align_unset":"main-module_stack_align_unset__3MxA_","stack_justify_center":"main-module_stack_justify_center__2yHEa","stack_justify_start":"main-module_stack_justify_start__3-Xzo","stack_justify_end":"main-module_stack_justify_end__2bxER","stack_justify_flex-start":"main-module_stack_justify_flex-start__37n5K","stack_justify_flex-end":"main-module_stack_justify_flex-end__1Bn86","stack_justify_inherit":"main-module_stack_justify_inherit__vBXE0","stack_justify_initial":"main-module_stack_justify_initial__1ZrSu","stack_justify_normal":"main-module_stack_justify_normal__oCHaG","stack_justify_revert":"main-module_stack_justify_revert__178VV","stack_justify_left":"main-module_stack_justify_left__2OXyY","stack_justify_right":"main-module_stack_justify_right__SpZ4H","stack_justify_space-around":"main-module_stack_justify_space-around__3bdw0","stack_justify_space-between":"main-module_stack_justify_space-between__3F8bw","stack_justify_space-evenly":"main-module_stack_justify_space-evenly__FJU9F","stack_justify_stretch":"main-module_stack_justify_stretch__1jlvC","stack_justify_unset":"main-module_stack_justify_unset__2HlHd","stack_wrap_wrap":"main-module_stack_wrap_wrap__uKbM1","stack_wrap_nowrap":"main-module_stack_wrap_nowrap__i2Afg","stack_wrap_wrap-reverse":"main-module_stack_wrap_wrap-reverse__d4f4t","stack_wrap_inherit":"main-module_stack_wrap_inherit__14f1V","stack_wrap_initial":"main-module_stack_wrap_initial__12dgJ","stack_wrap_revert":"main-module_stack_wrap_revert__2rF92","stack_wrap_unset":"main-module_stack_wrap_unset__3D9Go","stack_direction_column":"main-module_stack_direction_column__1lGtW","stack_direction_column-reverse":"main-module_stack_direction_column-reverse__2ZEqE","stack_direction_inherit":"main-module_stack_direction_inherit__3-x4i","stack_direction_initial":"main-module_stack_direction_initial__jieCo","stack_direction_row":"main-module_stack_direction_row__1I2OC","stack_direction_row-reverse":"main-module_stack_direction_row-reverse__2wnjd","stack_direction_unset":"main-module_stack_direction_unset__q3yaL"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|