@dreamcommerce/aurora 2.7.1 → 2.7.2-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/build/cjs/packages/aurora/src/components/dropdown/components/content.js +13 -12
  2. package/build/cjs/packages/aurora/src/components/dropdown/components/content.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/dropdown/constants.js +3 -1
  4. package/build/cjs/packages/aurora/src/components/dropdown/constants.js.map +1 -1
  5. package/build/esm/packages/aurora/src/components/dropdown/components/content.js +14 -13
  6. package/build/esm/packages/aurora/src/components/dropdown/components/content.js.map +1 -1
  7. package/build/esm/packages/aurora/src/components/dropdown/constants.d.ts +1 -0
  8. package/build/esm/packages/aurora/src/components/dropdown/constants.js +3 -2
  9. package/build/esm/packages/aurora/src/components/dropdown/constants.js.map +1 -1
  10. package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/dropdown/components/content.js CHANGED
@@ -37,6 +37,7 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
37
37
  const [t] = useTranslation.useTranslation();
38
38
  const contentRef = React.useRef(null);
39
39
  const { wrapperRef, toggleDropdown, isOpen } = index.useDropdownContext();
40
+ const [bounding, setBounding] = React.useState();
40
41
  const [styles, setStyles] = React.useState({
41
42
  top: '0px',
42
43
  bottom: '0px',
@@ -45,18 +46,21 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
45
46
  });
46
47
  const windowYScroll = window.scrollY;
47
48
  const windowHeightMinusYOffset = window.innerHeight - windowYScroll;
49
+ React.useEffect(() => {
50
+ contentRef.current && setBounding(utilities.getBounding(contentRef.current));
51
+ return () => {
52
+ setBounding(undefined);
53
+ };
54
+ }, [contentRef.current]);
48
55
  const checkIfIsOutsideTopViewport = () => {
49
- if (!contentRef.current)
56
+ if (!contentRef.current || !bounding || !isOpen)
50
57
  return;
51
- const bounding = utilities.getBounding(contentRef.current);
52
58
  return bounding.top <= 0;
53
59
  };
54
60
  const checkIfIsOutsideBottomViewport = () => {
55
- if (!contentRef.current)
61
+ if (!contentRef.current || !bounding || !isOpen)
56
62
  return;
57
- const element = contentRef.current;
58
- const elementHeight = utilities.getBounding(element).height;
59
- return elementHeight + element.offsetTop > window.innerHeight + windowYScroll;
63
+ return bounding.height + bounding.top + constants.DROPDOWN_CONTENT_ARROW_HEIGHT > window.innerHeight;
60
64
  };
61
65
  const dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
62
66
  const dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
@@ -128,12 +132,9 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
128
132
  if (!(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) || !isOpen)
129
133
  return;
130
134
  const scrollableParent = (_a = utilities$1.UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _a !== void 0 ? _a : document.body;
131
- const handleWindowScroll = () => {
132
- if (typeof toggleDropdown === 'function') {
133
- toggleDropdown();
134
- }
135
- };
136
- scrollableParent.addEventListener('scroll', handleWindowScroll, { once: true });
135
+ console.log('scrollableParent', scrollableParent);
136
+ // scrollableParent.addEventListener('scroll', handleWindowScroll, { once: true });
137
+ scrollableParent.addEventListener('scroll', () => console.log('elo'), { once: true });
137
138
  }, [isOpen]);
138
139
  return reactDom.createPortal(React__default['default'].createElement(reactTransitionGroup.TransitionGroup, { component: null }, isOpen === true ? (React__default['default'].createElement(reactTransitionGroup.CSSTransition, { timeout: 200, classNames: {
139
140
  enter: main_module['default']['dropdown-enter'],
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/dropdown/constants.js CHANGED
@@ -9,8 +9,10 @@ const DROPDOWN_TEST_ID = {
9
9
  label: DROPDOWN_LABEL_TEST_ID
10
10
  };
11
11
  const DROPDOWN_Z_INDEX = 1200;
12
- const DROPDOWN_ON_MODAL_Z_INDEX = 2200;
12
+ const DROPDOWN_ON_MODAL_Z_INDEX = 2200;
13
+ const DROPDOWN_CONTENT_ARROW_HEIGHT = 13;
13
14
 
15
+ exports.DROPDOWN_CONTENT_ARROW_HEIGHT = DROPDOWN_CONTENT_ARROW_HEIGHT;
14
16
  exports.DROPDOWN_ON_MODAL_Z_INDEX = DROPDOWN_ON_MODAL_Z_INDEX;
15
17
  exports.DROPDOWN_TEST_ID = DROPDOWN_TEST_ID;
16
18
  exports.DROPDOWN_Z_INDEX = DROPDOWN_Z_INDEX;
package/build/cjs/packages/aurora/src/components/dropdown/constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/aurora/src/components/dropdown/components/content.js CHANGED
@@ -9,7 +9,7 @@ import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
9
9
  import { UiDomUtils } from '@dreamcommerce/utilities';
10
10
  import withTranslation from '../../../utilities/translation/with_translation.js';
11
11
  import { TransitionGroup, CSSTransition } from 'react-transition-group';
12
- import { DROPDOWN_Z_INDEX, DROPDOWN_ON_MODAL_Z_INDEX } from '../constants.js';
12
+ import { DROPDOWN_Z_INDEX, DROPDOWN_CONTENT_ARROW_HEIGHT, DROPDOWN_ON_MODAL_Z_INDEX } from '../constants.js';
13
13
  import { cssDropdownContent, cssDropdownContentOnTop, cssDropdownContentOnBottom, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
14
14
  import cssClasses from '../../../css/dropdown/main.module.less.js';
15
15
  import { getBounding, getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities.js';
@@ -28,6 +28,7 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
28
28
  const [t] = useTranslation();
29
29
  const contentRef = useRef(null);
30
30
  const { wrapperRef, toggleDropdown, isOpen } = useDropdownContext();
31
+ const [bounding, setBounding] = useState();
31
32
  const [styles, setStyles] = useState({
32
33
  top: '0px',
33
34
  bottom: '0px',
@@ -36,18 +37,21 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
36
37
  });
37
38
  const windowYScroll = window.scrollY;
38
39
  const windowHeightMinusYOffset = window.innerHeight - windowYScroll;
40
+ useEffect(() => {
41
+ contentRef.current && setBounding(getBounding(contentRef.current));
42
+ return () => {
43
+ setBounding(undefined);
44
+ };
45
+ }, [contentRef.current]);
39
46
  const checkIfIsOutsideTopViewport = () => {
40
- if (!contentRef.current)
47
+ if (!contentRef.current || !bounding || !isOpen)
41
48
  return;
42
- const bounding = getBounding(contentRef.current);
43
49
  return bounding.top <= 0;
44
50
  };
45
51
  const checkIfIsOutsideBottomViewport = () => {
46
- if (!contentRef.current)
52
+ if (!contentRef.current || !bounding || !isOpen)
47
53
  return;
48
- const element = contentRef.current;
49
- const elementHeight = getBounding(element).height;
50
- return elementHeight + element.offsetTop > window.innerHeight + windowYScroll;
54
+ return bounding.height + bounding.top + DROPDOWN_CONTENT_ARROW_HEIGHT > window.innerHeight;
51
55
  };
52
56
  const dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
53
57
  const dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
@@ -119,12 +123,9 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
119
123
  if (!(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) || !isOpen)
120
124
  return;
121
125
  const scrollableParent = (_a = UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _a !== void 0 ? _a : document.body;
122
- const handleWindowScroll = () => {
123
- if (typeof toggleDropdown === 'function') {
124
- toggleDropdown();
125
- }
126
- };
127
- scrollableParent.addEventListener('scroll', handleWindowScroll, { once: true });
126
+ console.log('scrollableParent', scrollableParent);
127
+ // scrollableParent.addEventListener('scroll', handleWindowScroll, { once: true });
128
+ scrollableParent.addEventListener('scroll', () => console.log('elo'), { once: true });
128
129
  }, [isOpen]);
129
130
  return createPortal(React.createElement(TransitionGroup, { component: null }, isOpen === true ? (React.createElement(CSSTransition, { timeout: 200, classNames: {
130
131
  enter: cssClasses['dropdown-enter'],
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/dropdown/constants.d.ts CHANGED
@@ -4,3 +4,4 @@ export declare const DROPDOWN_TEST_ID: {
4
4
  };
5
5
  export declare const DROPDOWN_Z_INDEX = 1200;
6
6
  export declare const DROPDOWN_ON_MODAL_Z_INDEX = 2200;
7
+ export declare const DROPDOWN_CONTENT_ARROW_HEIGHT = 13;
package/build/esm/packages/aurora/src/components/dropdown/constants.js CHANGED
@@ -5,7 +5,8 @@ const DROPDOWN_TEST_ID = {
5
5
  label: DROPDOWN_LABEL_TEST_ID
6
6
  };
7
7
  const DROPDOWN_Z_INDEX = 1200;
8
- const DROPDOWN_ON_MODAL_Z_INDEX = 2200;
8
+ const DROPDOWN_ON_MODAL_Z_INDEX = 2200;
9
+ const DROPDOWN_CONTENT_ARROW_HEIGHT = 13;
9
10
 
10
- export { DROPDOWN_ON_MODAL_Z_INDEX, DROPDOWN_TEST_ID, DROPDOWN_Z_INDEX };
11
+ export { DROPDOWN_CONTENT_ARROW_HEIGHT, DROPDOWN_ON_MODAL_Z_INDEX, DROPDOWN_TEST_ID, DROPDOWN_Z_INDEX };
11
12
  //# sourceMappingURL=constants.js.map
package/build/esm/packages/aurora/src/components/dropdown/constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;AACA;AACA;AACA;AACA;AACA;"}
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.7.1",
5
+ "version": "2.7.2-1",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",