@atlaskit/react-select 1.5.1 → 1.5.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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/components/menu.js +7 -3
  3. package/dist/es2019/components/menu.js +7 -3
  4. package/dist/esm/components/menu.js +7 -3
  5. package/package.json +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/react-select
2
2
 
3
+ ## 1.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#167291](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167291)
8
+ [`4645a4d115b15`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4645a4d115b15) -
9
+ Fix the calculation of scroll space below to place menu bottom as much as possible
10
+
3
11
  ## 1.5.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/components/menu.js CHANGED
@@ -16,6 +16,7 @@ var _react2 = require("@emotion/react");
16
16
  var _dom = require("@floating-ui/dom");
17
17
  var _reactDom = require("react-dom");
18
18
  var _useIsomorphicLayoutEffect = _interopRequireDefault(require("use-isomorphic-layout-effect"));
19
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
20
  var _utils = require("../utils");
20
21
  var _excluded = ["children", "innerProps"],
21
22
  _excluded2 = ["children", "innerProps"];
@@ -53,7 +54,8 @@ function getMenuPlacement(_ref) {
53
54
  // we can't trust `scrollParent.scrollHeight` --> it may increase when
54
55
  // the menu is rendered
55
56
  var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
56
- scrollHeight = _scrollParent$getBoun.height;
57
+ scrollHeight = _scrollParent$getBoun.height,
58
+ scrollParentTop = _scrollParent$getBoun.top;
57
59
  var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),
58
60
  menuBottom = _menuEl$getBoundingCl.bottom,
59
61
  menuHeight = _menuEl$getBoundingCl.height,
@@ -62,12 +64,14 @@ function getMenuPlacement(_ref) {
62
64
  containerTop = _menuEl$offsetParent$.top;
63
65
  var viewHeight = isFixedPosition ? window.innerHeight : (0, _utils.normalizedHeight)(scrollParent);
64
66
  var scrollTop = (0, _utils.getScrollTop)(scrollParent);
67
+ // use menuTop - scrollParentTop for the actual top space of menu in the scroll container
68
+ var menuTopFromParent = (0, _platformFeatureFlags.fg)('design-system-select-fix-placement') ? menuTop - scrollParentTop : menuTop;
65
69
  var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
66
70
  var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
67
71
  var viewSpaceAbove = containerTop - marginTop;
68
- var viewSpaceBelow = viewHeight - menuTop;
72
+ var viewSpaceBelow = viewHeight - menuTopFromParent;
69
73
  var scrollSpaceAbove = viewSpaceAbove + scrollTop;
70
- var scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
74
+ var scrollSpaceBelow = scrollHeight - scrollTop - menuTopFromParent;
71
75
  var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
72
76
  var scrollUp = scrollTop + menuTop - marginTop;
73
77
  var scrollDuration = 160;
package/dist/es2019/components/menu.js CHANGED
@@ -8,6 +8,7 @@ import { jsx } from '@emotion/react';
8
8
  import { autoUpdate } from '@floating-ui/dom';
9
9
  import { createPortal } from 'react-dom';
10
10
  import useLayoutEffect from 'use-isomorphic-layout-effect';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { animatedScrollTo, getBoundingClientObj, getScrollParent, getScrollTop, getStyleProps, normalizedHeight, scrollTo } from '../utils';
12
13
 
13
14
  // ==============================
@@ -40,7 +41,8 @@ export function getMenuPlacement({
40
41
  // we can't trust `scrollParent.scrollHeight` --> it may increase when
41
42
  // the menu is rendered
42
43
  const {
43
- height: scrollHeight
44
+ height: scrollHeight,
45
+ top: scrollParentTop
44
46
  } = scrollParent.getBoundingClientRect();
45
47
  const {
46
48
  bottom: menuBottom,
@@ -52,12 +54,14 @@ export function getMenuPlacement({
52
54
  } = menuEl.offsetParent.getBoundingClientRect();
53
55
  const viewHeight = isFixedPosition ? window.innerHeight : normalizedHeight(scrollParent);
54
56
  const scrollTop = getScrollTop(scrollParent);
57
+ // use menuTop - scrollParentTop for the actual top space of menu in the scroll container
58
+ const menuTopFromParent = fg('design-system-select-fix-placement') ? menuTop - scrollParentTop : menuTop;
55
59
  const marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
56
60
  const marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
57
61
  const viewSpaceAbove = containerTop - marginTop;
58
- const viewSpaceBelow = viewHeight - menuTop;
62
+ const viewSpaceBelow = viewHeight - menuTopFromParent;
59
63
  const scrollSpaceAbove = viewSpaceAbove + scrollTop;
60
- const scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
64
+ const scrollSpaceBelow = scrollHeight - scrollTop - menuTopFromParent;
61
65
  const scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
62
66
  const scrollUp = scrollTop + menuTop - marginTop;
63
67
  const scrollDuration = 160;
package/dist/esm/components/menu.js CHANGED
@@ -15,6 +15,7 @@ import { jsx } from '@emotion/react';
15
15
  import { autoUpdate } from '@floating-ui/dom';
16
16
  import { createPortal } from 'react-dom';
17
17
  import useLayoutEffect from 'use-isomorphic-layout-effect';
18
+ import { fg } from '@atlaskit/platform-feature-flags';
18
19
  import { animatedScrollTo, getBoundingClientObj, getScrollParent, getScrollTop, getStyleProps, normalizedHeight, scrollTo } from '../utils';
19
20
 
20
21
  // ==============================
@@ -46,7 +47,8 @@ export function getMenuPlacement(_ref) {
46
47
  // we can't trust `scrollParent.scrollHeight` --> it may increase when
47
48
  // the menu is rendered
48
49
  var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
49
- scrollHeight = _scrollParent$getBoun.height;
50
+ scrollHeight = _scrollParent$getBoun.height,
51
+ scrollParentTop = _scrollParent$getBoun.top;
50
52
  var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),
51
53
  menuBottom = _menuEl$getBoundingCl.bottom,
52
54
  menuHeight = _menuEl$getBoundingCl.height,
@@ -55,12 +57,14 @@ export function getMenuPlacement(_ref) {
55
57
  containerTop = _menuEl$offsetParent$.top;
56
58
  var viewHeight = isFixedPosition ? window.innerHeight : normalizedHeight(scrollParent);
57
59
  var scrollTop = getScrollTop(scrollParent);
60
+ // use menuTop - scrollParentTop for the actual top space of menu in the scroll container
61
+ var menuTopFromParent = fg('design-system-select-fix-placement') ? menuTop - scrollParentTop : menuTop;
58
62
  var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
59
63
  var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
60
64
  var viewSpaceAbove = containerTop - marginTop;
61
- var viewSpaceBelow = viewHeight - menuTop;
65
+ var viewSpaceBelow = viewHeight - menuTopFromParent;
62
66
  var scrollSpaceAbove = viewSpaceAbove + scrollTop;
63
- var scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
67
+ var scrollSpaceBelow = scrollHeight - scrollTop - menuTopFromParent;
64
68
  var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
65
69
  var scrollUp = scrollTop + menuTop - marginTop;
66
70
  var scrollDuration = 160;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/react-select",
3
- "version": "1.5.1",
3
+ "version": "1.5.2",
4
4
  "description": "A forked version of react-select to only be used in atlaskit/select",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -63,6 +63,9 @@
63
63
  },
64
64
  "platform_design_system_team_safari_input_fix": {
65
65
  "type": "boolean"
66
+ },
67
+ "design-system-select-fix-placement": {
68
+ "type": "boolean"
66
69
  }
67
70
  },
68
71
  "techstack": {