@dreamcommerce/aurora 2.7.1 → 2.7.2-2

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 +11 -6
  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 +12 -7
  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();
@@ -129,6 +133,7 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
129
133
  return;
130
134
  const scrollableParent = (_a = utilities$1.UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _a !== void 0 ? _a : document.body;
131
135
  const handleWindowScroll = () => {
136
+ console.log('handleWindowScroll', isOpen);
132
137
  if (typeof toggleDropdown === 'function') {
133
138
  toggleDropdown();
134
139
  }
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;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();
@@ -120,6 +124,7 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
120
124
  return;
121
125
  const scrollableParent = (_a = UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _a !== void 0 ? _a : document.body;
122
126
  const handleWindowScroll = () => {
127
+ console.log('handleWindowScroll', isOpen);
123
128
  if (typeof toggleDropdown === 'function') {
124
129
  toggleDropdown();
125
130
  }
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;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-2",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",