@dreamcommerce/aurora 2.23.5 → 2.23.6-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.
Files changed (7) hide show
  1. package/build/cjs/packages/aurora/src/components/dropdown/components/content.js +41 -6
  2. package/build/cjs/packages/aurora/src/components/dropdown/components/content.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/css/image_picker/main.module.less.js +1 -1
  4. package/build/esm/packages/aurora/src/components/dropdown/components/content.js +41 -6
  5. package/build/esm/packages/aurora/src/components/dropdown/components/content.js.map +1 -1
  6. package/build/esm/packages/aurora/src/css/image_picker/main.module.less.js +1 -1
  7. package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/dropdown/components/content.js CHANGED
@@ -81,6 +81,21 @@ var Content = function Content(_ref) {
81
81
  parentScrollTop = _useState4[0],
82
82
  setParentScrollTop = _useState4[1];
83
83
 
84
+ var _useState5 = React.useState(false),
85
+ _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
86
+ contentShouldAppearOnTop = _useState6[0],
87
+ setContentShouldAppearOnTop = _useState6[1];
88
+
89
+ var _useState7 = React.useState(false),
90
+ _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
91
+ contentShouldAppearOnBottom = _useState8[0],
92
+ setContentShouldAppearOnBottom = _useState8[1];
93
+
94
+ var _useState9 = React.useState(false),
95
+ _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
96
+ fitOnBottomOfScrollableParent = _useState10[0],
97
+ setFitOnBottomOfScrollableParent = _useState10[1];
98
+
84
99
  var dropdownIdRef = React.useRef("dropdown-".concat(v4['default']()));
85
100
 
86
101
  var _useDropdownsManagerC = use_dropdowns_manager_context.useDropdownsManagerContext(),
@@ -90,15 +105,15 @@ var Content = function Content(_ref) {
90
105
 
91
106
  var dropdown = getDropdown(dropdownIdRef.current);
92
107
 
93
- var _useState5 = React.useState({
108
+ var _useState11 = React.useState({
94
109
  top: '0px',
95
110
  bottom: '0px',
96
111
  left: '0px',
97
112
  zIndex: constants.DROPDOWN_Z_INDEX
98
113
  }),
99
- _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
100
- styles = _useState6[0],
101
- setStyles = _useState6[1];
114
+ _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
115
+ styles = _useState12[0],
116
+ setStyles = _useState12[1];
102
117
 
103
118
  var windowYScroll = window.scrollY;
104
119
  var windowHeightMinusYOffset = window.innerHeight - windowYScroll;
@@ -138,8 +153,6 @@ var Content = function Content(_ref) {
138
153
 
139
154
  var dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
140
155
  var dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
141
- var contentShouldAppearOnTop = dropdownIsOutsideBottomViewport || verticalPosition === 'top' && !dropdownIsOutsideTopViewport;
142
- var contentShouldAppearOnBottom = dropdownIsOutsideTopViewport || verticalPosition === 'bottom' && !dropdownIsOutsideBottomViewport;
143
156
  var contentClassName = classnames__default['default'](css_classes.jsDropdownContentClass, main_module['default'][css_classes.cssDropdownContent], contentShouldAppearOnTop && "".concat(main_module$1['default'][css_classes.cssDropdownContentOnTop], " ").concat(main_module$2['default'][css_classes.cssDropdownContentOnTop]), contentShouldAppearOnBottom && "".concat(main_module$1['default'][css_classes.cssDropdownContentOnBottom], " ").concat(main_module$2['default'][css_classes.cssDropdownContentOnBottom]), arrowSide === 'right' && main_module['default'][css_classes.cssDropdownArrowHorizontalDirectionRight], contentShouldAppearOnTop && main_module['default'][css_classes.cssDropdownArrowVerticalDirectionBottom], cssClass);
144
157
  var screenWidthName = use_screen_detect.useScreenDetect();
145
158
  var refs = [contentRef];
@@ -223,6 +236,7 @@ var Content = function Content(_ref) {
223
236
 
224
237
  if (!(wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current) || !isOpen) return;
225
238
  var scrollableParent = (_UiDomUtils$getFirstS = utilities$1.UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _UiDomUtils$getFirstS !== void 0 ? _UiDomUtils$getFirstS : document.body;
239
+ var wrapperRect = wrapperRef.current.getBoundingClientRect();
226
240
 
227
241
  var handleWindowScroll = function handleWindowScroll() {
228
242
  if (typeof toggleDropdown === 'function' && shouldCloseOnScroll) {
@@ -238,11 +252,32 @@ var Content = function Content(_ref) {
238
252
  once: true
239
253
  });
240
254
  scrollableParent.addEventListener('scroll', setParentScrollTopValue);
255
+ var checkIfFitInScrollableParent = setTimeout(function () {
256
+ var _contentRef$current;
257
+
258
+ var scrollableParentHeight = scrollableParent === null || scrollableParent === void 0 ? void 0 : scrollableParent.scrollHeight;
259
+ var scrollableParentBottomSpace = scrollableParentHeight - (wrapperRect.bottom - scrollableParent.offsetTop + scrollableParent.scrollTop);
260
+ var dropdownHeight = contentRef === null || contentRef === void 0 || (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.offsetHeight;
261
+ console.log('----------------------');
262
+ console.log('scrollableParent', scrollableParent);
263
+ console.log('scrollableParentHeight', scrollableParentHeight);
264
+ console.log('scrollableParentBottomSpace', scrollableParentBottomSpace);
265
+ console.log('wrapperRef.current', wrapperRef.current);
266
+ console.log('wrapperRect - bottom', wrapperRect.bottom + scrollableParent.scrollTop);
267
+ console.log('----------------------');
268
+ if (dropdownHeight) setFitOnBottomOfScrollableParent(scrollableParentBottomSpace > dropdownHeight);
269
+ });
270
+ setContentShouldAppearOnTop((dropdownIsOutsideBottomViewport || verticalPosition === 'top' && !dropdownIsOutsideTopViewport) && !fitOnBottomOfScrollableParent);
271
+ setContentShouldAppearOnBottom(dropdownIsOutsideTopViewport || verticalPosition === 'bottom' && !dropdownIsOutsideBottomViewport);
241
272
  return function () {
242
273
  scrollableParent.removeEventListener('scroll', handleWindowScroll);
243
274
  scrollableParent.removeEventListener('scroll', setParentScrollTopValue);
275
+ clearTimeout(checkIfFitInScrollableParent);
244
276
  };
245
277
  }, [isOpen]);
278
+ React.useEffect(function () {
279
+ console.log('fitOnBottomOfScrollableParent', fitOnBottomOfScrollableParent);
280
+ }, [fitOnBottomOfScrollableParent, isOpen]);
246
281
  return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.TransitionGroup, {
247
282
  component: null
248
283
  }, isOpen === true ? /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.CSSTransition, {
package/build/cjs/packages/aurora/src/components/dropdown/components/content.js.map CHANGED
@@ -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,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/aurora/src/css/image_picker/main.module.less.js CHANGED
@@ -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.main-module_image-picker__wrapper__2RK3f {\n position: relative;\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 46px;\n left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n top: 1rem;\n right: 1rem;\n z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n display: flex;\n align-items: center;\n gap: 4px;\n background-color: #ffffff;\n background-image: none;\n border: 1px solid #3c83ec;\n border-radius: 2px;\n padding: 0.5rem;\n color: #3c83ec;\n cursor: pointer;\n}\n.main-module_image-picker__edit-button__3O-iq svg {\n fill: #3c83ec;\n}\n.main-module_image-picker__edit-button__3O-iq:hover {\n border-color: #135cc8;\n color: #135cc8;\n}\n.main-module_image-picker__edit-button__3O-iq:hover svg {\n fill: #135cc8;\n}\n.main-module_image-picker__label__1i_Fq {\n cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n display: none;\n}\n.main-module_image-picker__description__1v13N {\n padding: 2rem 0;\n text-align: center;\n color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n font-size: 12px;\n color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n width: 1rem;\n height: auto;\n margin-bottom: 1rem;\n fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n display: flex;\n align-items: center;\n font-size: 12px;\n color: #3c83ec;\n cursor: pointer;\n background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n margin: 2rem 0 0.5rem;\n fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n fill: #3c83ec;\n margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n display: flex;\n justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 130px;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n max-width: 100%;\n max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n margin-top: 0.5rem;\n color: #e60c54;\n}\n.main-module_image-picker__loading-wrapper__gBtlh {\n position: relative;\n}\n.main-module_image-picker__loading-wrapper-content__21jzx {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: #ffffff;\n width: 100%;\n height: 100%;\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__loading-wrapper-content-text__2-Fup {\n color: #5c657e;\n margin-top: 0.5rem;\n}\n";
7
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n position: relative;\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 46px;\n left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n top: 1rem;\n right: 1rem;\n z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n display: flex;\n align-items: center;\n gap: 4px;\n background-color: #ffffff;\n background-image: none;\n border: 1px solid #3c83ec;\n border-radius: 2px;\n padding: 0.5rem;\n color: #3c83ec;\n cursor: pointer;\n}\n.main-module_image-picker__edit-button__3O-iq svg {\n fill: #3c83ec;\n}\n.main-module_image-picker__edit-button__3O-iq:hover {\n border-color: #135cc8;\n color: #135cc8;\n}\n.main-module_image-picker__edit-button__3O-iq:hover svg {\n fill: #135cc8;\n}\n.main-module_image-picker__label__1i_Fq {\n cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n display: none;\n}\n.main-module_image-picker__description__1v13N {\n padding: 2rem 0;\n text-align: center;\n color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n font-size: 12px;\n color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n width: 1rem;\n height: auto;\n margin-bottom: 1rem;\n fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n display: flex;\n align-items: center;\n color: #3c83ec;\n cursor: pointer;\n background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n margin: 2rem 0 0.5rem;\n fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n fill: #3c83ec;\n margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n display: flex;\n justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 130px;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n max-width: 100%;\n max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n margin-top: 0.5rem;\n color: #e60c54;\n}\n.main-module_image-picker__loading-wrapper__gBtlh {\n position: relative;\n}\n.main-module_image-picker__loading-wrapper-content__21jzx {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: #ffffff;\n width: 100%;\n height: 100%;\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__loading-wrapper-content-text__2-Fup {\n color: #5c657e;\n margin-top: 0.5rem;\n}\n";
8
8
  var styles = {
9
9
  "image-picker__wrapper": "main-module_image-picker__wrapper__2RK3f",
10
10
  "image-picker__wrapper-error": "main-module_image-picker__wrapper-error__kCZeA",
package/build/esm/packages/aurora/src/components/dropdown/components/content.js CHANGED
@@ -72,6 +72,21 @@ var Content = function Content(_ref) {
72
72
  parentScrollTop = _useState4[0],
73
73
  setParentScrollTop = _useState4[1];
74
74
 
75
+ var _useState5 = useState(false),
76
+ _useState6 = _slicedToArray(_useState5, 2),
77
+ contentShouldAppearOnTop = _useState6[0],
78
+ setContentShouldAppearOnTop = _useState6[1];
79
+
80
+ var _useState7 = useState(false),
81
+ _useState8 = _slicedToArray(_useState7, 2),
82
+ contentShouldAppearOnBottom = _useState8[0],
83
+ setContentShouldAppearOnBottom = _useState8[1];
84
+
85
+ var _useState9 = useState(false),
86
+ _useState10 = _slicedToArray(_useState9, 2),
87
+ fitOnBottomOfScrollableParent = _useState10[0],
88
+ setFitOnBottomOfScrollableParent = _useState10[1];
89
+
75
90
  var dropdownIdRef = useRef("dropdown-".concat(v4()));
76
91
 
77
92
  var _useDropdownsManagerC = useDropdownsManagerContext(),
@@ -81,15 +96,15 @@ var Content = function Content(_ref) {
81
96
 
82
97
  var dropdown = getDropdown(dropdownIdRef.current);
83
98
 
84
- var _useState5 = useState({
99
+ var _useState11 = useState({
85
100
  top: '0px',
86
101
  bottom: '0px',
87
102
  left: '0px',
88
103
  zIndex: DROPDOWN_Z_INDEX
89
104
  }),
90
- _useState6 = _slicedToArray(_useState5, 2),
91
- styles = _useState6[0],
92
- setStyles = _useState6[1];
105
+ _useState12 = _slicedToArray(_useState11, 2),
106
+ styles = _useState12[0],
107
+ setStyles = _useState12[1];
93
108
 
94
109
  var windowYScroll = window.scrollY;
95
110
  var windowHeightMinusYOffset = window.innerHeight - windowYScroll;
@@ -129,8 +144,6 @@ var Content = function Content(_ref) {
129
144
 
130
145
  var dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
131
146
  var dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
132
- var contentShouldAppearOnTop = dropdownIsOutsideBottomViewport || verticalPosition === 'top' && !dropdownIsOutsideTopViewport;
133
- var contentShouldAppearOnBottom = dropdownIsOutsideTopViewport || verticalPosition === 'bottom' && !dropdownIsOutsideBottomViewport;
134
147
  var contentClassName = classnames(jsDropdownContentClass, cssClasses[cssDropdownContent], contentShouldAppearOnTop && "".concat(cssClasses$1[cssDropdownContentOnTop], " ").concat(cssClasses$2[cssDropdownContentOnTop]), contentShouldAppearOnBottom && "".concat(cssClasses$1[cssDropdownContentOnBottom], " ").concat(cssClasses$2[cssDropdownContentOnBottom]), arrowSide === 'right' && cssClasses[cssDropdownArrowHorizontalDirectionRight], contentShouldAppearOnTop && cssClasses[cssDropdownArrowVerticalDirectionBottom], cssClass);
135
148
  var screenWidthName = useScreenDetect();
136
149
  var refs = [contentRef];
@@ -214,6 +227,7 @@ var Content = function Content(_ref) {
214
227
 
215
228
  if (!(wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current) || !isOpen) return;
216
229
  var scrollableParent = (_UiDomUtils$getFirstS = UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _UiDomUtils$getFirstS !== void 0 ? _UiDomUtils$getFirstS : document.body;
230
+ var wrapperRect = wrapperRef.current.getBoundingClientRect();
217
231
 
218
232
  var handleWindowScroll = function handleWindowScroll() {
219
233
  if (typeof toggleDropdown === 'function' && shouldCloseOnScroll) {
@@ -229,11 +243,32 @@ var Content = function Content(_ref) {
229
243
  once: true
230
244
  });
231
245
  scrollableParent.addEventListener('scroll', setParentScrollTopValue);
246
+ var checkIfFitInScrollableParent = setTimeout(function () {
247
+ var _contentRef$current;
248
+
249
+ var scrollableParentHeight = scrollableParent === null || scrollableParent === void 0 ? void 0 : scrollableParent.scrollHeight;
250
+ var scrollableParentBottomSpace = scrollableParentHeight - (wrapperRect.bottom - scrollableParent.offsetTop + scrollableParent.scrollTop);
251
+ var dropdownHeight = contentRef === null || contentRef === void 0 || (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.offsetHeight;
252
+ console.log('----------------------');
253
+ console.log('scrollableParent', scrollableParent);
254
+ console.log('scrollableParentHeight', scrollableParentHeight);
255
+ console.log('scrollableParentBottomSpace', scrollableParentBottomSpace);
256
+ console.log('wrapperRef.current', wrapperRef.current);
257
+ console.log('wrapperRect - bottom', wrapperRect.bottom + scrollableParent.scrollTop);
258
+ console.log('----------------------');
259
+ if (dropdownHeight) setFitOnBottomOfScrollableParent(scrollableParentBottomSpace > dropdownHeight);
260
+ });
261
+ setContentShouldAppearOnTop((dropdownIsOutsideBottomViewport || verticalPosition === 'top' && !dropdownIsOutsideTopViewport) && !fitOnBottomOfScrollableParent);
262
+ setContentShouldAppearOnBottom(dropdownIsOutsideTopViewport || verticalPosition === 'bottom' && !dropdownIsOutsideBottomViewport);
232
263
  return function () {
233
264
  scrollableParent.removeEventListener('scroll', handleWindowScroll);
234
265
  scrollableParent.removeEventListener('scroll', setParentScrollTopValue);
266
+ clearTimeout(checkIfFitInScrollableParent);
235
267
  };
236
268
  }, [isOpen]);
269
+ useEffect(function () {
270
+ console.log('fitOnBottomOfScrollableParent', fitOnBottomOfScrollableParent);
271
+ }, [fitOnBottomOfScrollableParent, isOpen]);
237
272
  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(TransitionGroup, {
238
273
  component: null
239
274
  }, isOpen === true ? /*#__PURE__*/React.createElement(CSSTransition, {
package/build/esm/packages/aurora/src/components/dropdown/components/content.js.map CHANGED
@@ -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,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/aurora/src/css/image_picker/main.module.less.js CHANGED
@@ -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.main-module_image-picker__wrapper__2RK3f {\n position: relative;\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 46px;\n left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n top: 1rem;\n right: 1rem;\n z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n display: flex;\n align-items: center;\n gap: 4px;\n background-color: #ffffff;\n background-image: none;\n border: 1px solid #3c83ec;\n border-radius: 2px;\n padding: 0.5rem;\n color: #3c83ec;\n cursor: pointer;\n}\n.main-module_image-picker__edit-button__3O-iq svg {\n fill: #3c83ec;\n}\n.main-module_image-picker__edit-button__3O-iq:hover {\n border-color: #135cc8;\n color: #135cc8;\n}\n.main-module_image-picker__edit-button__3O-iq:hover svg {\n fill: #135cc8;\n}\n.main-module_image-picker__label__1i_Fq {\n cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n display: none;\n}\n.main-module_image-picker__description__1v13N {\n padding: 2rem 0;\n text-align: center;\n color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n font-size: 12px;\n color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n width: 1rem;\n height: auto;\n margin-bottom: 1rem;\n fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n display: flex;\n align-items: center;\n font-size: 12px;\n color: #3c83ec;\n cursor: pointer;\n background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n margin: 2rem 0 0.5rem;\n fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n fill: #3c83ec;\n margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n display: flex;\n justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 130px;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n max-width: 100%;\n max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n margin-top: 0.5rem;\n color: #e60c54;\n}\n.main-module_image-picker__loading-wrapper__gBtlh {\n position: relative;\n}\n.main-module_image-picker__loading-wrapper-content__21jzx {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: #ffffff;\n width: 100%;\n height: 100%;\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__loading-wrapper-content-text__2-Fup {\n color: #5c657e;\n margin-top: 0.5rem;\n}\n";
3
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n position: relative;\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 46px;\n left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n top: 1rem;\n right: 1rem;\n z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n display: flex;\n align-items: center;\n gap: 4px;\n background-color: #ffffff;\n background-image: none;\n border: 1px solid #3c83ec;\n border-radius: 2px;\n padding: 0.5rem;\n color: #3c83ec;\n cursor: pointer;\n}\n.main-module_image-picker__edit-button__3O-iq svg {\n fill: #3c83ec;\n}\n.main-module_image-picker__edit-button__3O-iq:hover {\n border-color: #135cc8;\n color: #135cc8;\n}\n.main-module_image-picker__edit-button__3O-iq:hover svg {\n fill: #135cc8;\n}\n.main-module_image-picker__label__1i_Fq {\n cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n display: none;\n}\n.main-module_image-picker__description__1v13N {\n padding: 2rem 0;\n text-align: center;\n color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n font-size: 12px;\n color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n width: 1rem;\n height: auto;\n margin-bottom: 1rem;\n fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n display: flex;\n align-items: center;\n color: #3c83ec;\n cursor: pointer;\n background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n margin: 2rem 0 0.5rem;\n fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n fill: #3c83ec;\n margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n display: flex;\n justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 130px;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n max-width: 100%;\n max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n margin-top: 0.5rem;\n color: #e60c54;\n}\n.main-module_image-picker__loading-wrapper__gBtlh {\n position: relative;\n}\n.main-module_image-picker__loading-wrapper-content__21jzx {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: #ffffff;\n width: 100%;\n height: 100%;\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__loading-wrapper-content-text__2-Fup {\n color: #5c657e;\n margin-top: 0.5rem;\n}\n";
4
4
  var styles = {
5
5
  "image-picker__wrapper": "main-module_image-picker__wrapper__2RK3f",
6
6
  "image-picker__wrapper-error": "main-module_image-picker__wrapper-error__kCZeA",
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dreamcommerce/aurora",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "2.23.5",
5
+ "version": "2.23.6-11",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",