@atlaskit/react-select 1.5.0 → 1.5.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 1.5.2
+
+### Patch Changes
+
+- [#167291](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167291)
+  [`4645a4d115b15`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4645a4d115b15) -
+  Fix the calculation of scroll space below to place menu bottom as much as possible
+
+## 1.5.1
+
+### Patch Changes
+
+- [#174296](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174296)
+  [`b9f79083be192`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b9f79083be192) -
+  Adding extra semantics to listbox
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/cjs/components/menu.js

@@ -16,6 +16,7 @@ var _react2 = require("@emotion/react");
 var _dom = require("@floating-ui/dom");
 var _reactDom = require("react-dom");
 var _useIsomorphicLayoutEffect = _interopRequireDefault(require("use-isomorphic-layout-effect"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../utils");
 var _excluded = ["children", "innerProps"],
   _excluded2 = ["children", "innerProps"];
@@ -53,7 +54,8 @@ function getMenuPlacement(_ref) {
   // we can't trust `scrollParent.scrollHeight` --> it may increase when
   // the menu is rendered
   var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
-    scrollHeight = _scrollParent$getBoun.height;
+    scrollHeight = _scrollParent$getBoun.height,
+    scrollParentTop = _scrollParent$getBoun.top;
   var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),
     menuBottom = _menuEl$getBoundingCl.bottom,
     menuHeight = _menuEl$getBoundingCl.height,
@@ -62,12 +64,14 @@ function getMenuPlacement(_ref) {
     containerTop = _menuEl$offsetParent$.top;
   var viewHeight = isFixedPosition ? window.innerHeight : (0, _utils.normalizedHeight)(scrollParent);
   var scrollTop = (0, _utils.getScrollTop)(scrollParent);
+  // use menuTop - scrollParentTop for the actual top space of menu in the scroll container
+  var menuTopFromParent = (0, _platformFeatureFlags.fg)('design-system-select-fix-placement') ? menuTop - scrollParentTop : menuTop;
   var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
   var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
   var viewSpaceAbove = containerTop - marginTop;
-  var viewSpaceBelow = viewHeight - menuTop;
+  var viewSpaceBelow = viewHeight - menuTopFromParent;
   var scrollSpaceAbove = viewSpaceAbove + scrollTop;
-  var scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
+  var scrollSpaceBelow = scrollHeight - scrollTop - menuTopFromParent;
   var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
   var scrollUp = scrollTop + menuTop - marginTop;
   var scrollDuration = 160;

package/dist/cjs/select.js

@@ -1641,6 +1641,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
+          var _this4$inputRef;
           return /*#__PURE__*/_react.default.createElement(MenuList, (0, _extends2.default)({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
@@ -1652,7 +1653,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               id: _this4.getElementId('listbox')
             }, (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && {
               'aria-label': label,
-              'aria-labelledby': "".concat(labelId || _this4.getElementId('input'), " ").concat(commonProps.isMulti && (0, _helpers.isSafari)() ? _this4.getElementId('multi-message') : '')
+              'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'), " ").concat(commonProps.isMulti && (0, _helpers.isSafari)() ? _this4.getElementId('multi-message') : '')
             }),
             isLoading: isLoading,
             maxHeight: maxHeight,

package/dist/es2019/components/menu.js

@@ -8,6 +8,7 @@ import { jsx } from '@emotion/react';
 import { autoUpdate } from '@floating-ui/dom';
 import { createPortal } from 'react-dom';
 import useLayoutEffect from 'use-isomorphic-layout-effect';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { animatedScrollTo, getBoundingClientObj, getScrollParent, getScrollTop, getStyleProps, normalizedHeight, scrollTo } from '../utils';
 
 // ==============================
@@ -40,7 +41,8 @@ export function getMenuPlacement({
   // we can't trust `scrollParent.scrollHeight` --> it may increase when
   // the menu is rendered
   const {
-    height: scrollHeight
+    height: scrollHeight,
+    top: scrollParentTop
   } = scrollParent.getBoundingClientRect();
   const {
     bottom: menuBottom,
@@ -52,12 +54,14 @@ export function getMenuPlacement({
   } = menuEl.offsetParent.getBoundingClientRect();
   const viewHeight = isFixedPosition ? window.innerHeight : normalizedHeight(scrollParent);
   const scrollTop = getScrollTop(scrollParent);
+  // use menuTop - scrollParentTop for the actual top space of menu in the scroll container
+  const menuTopFromParent = fg('design-system-select-fix-placement') ? menuTop - scrollParentTop : menuTop;
   const marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
   const marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
   const viewSpaceAbove = containerTop - marginTop;
-  const viewSpaceBelow = viewHeight - menuTop;
+  const viewSpaceBelow = viewHeight - menuTopFromParent;
   const scrollSpaceAbove = viewSpaceAbove + scrollTop;
-  const scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
+  const scrollSpaceBelow = scrollHeight - scrollTop - menuTopFromParent;
   const scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
   const scrollUp = scrollTop + menuTop - marginTop;
   const scrollDuration = 160;

package/dist/es2019/select.js

@@ -1670,25 +1670,28 @@ export default class Select extends Component {
       onTopArrive: onMenuScrollToTop,
       onBottomArrive: onMenuScrollToBottom,
       lockEnabled: menuShouldBlockScroll
-    }, scrollTargetRef => /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
-      innerRef: instance => {
-        this.getMenuListRef(instance);
-        scrollTargetRef(instance);
-      },
-      innerProps: {
-        role: 'listbox',
-        'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
-        id: this.getElementId('listbox'),
-        // add aditional label on listbox when ff is on
-        ...(fg('design_system_select-a11y-improvement') && {
-          'aria-label': label,
-          'aria-labelledby': `${labelId || this.getElementId('input')} ${commonProps.isMulti && isSafari() ? this.getElementId('multi-message') : ''}`
-        })
-      },
-      isLoading: isLoading,
-      maxHeight: maxHeight,
-      focusedOption: focusedOption
-    }), menuUI))));
+    }, scrollTargetRef => {
+      var _this$inputRef;
+      return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
+        innerRef: instance => {
+          this.getMenuListRef(instance);
+          scrollTargetRef(instance);
+        },
+        innerProps: {
+          role: 'listbox',
+          'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
+          id: this.getElementId('listbox'),
+          // add aditional label on listbox when ff is on
+          ...(fg('design_system_select-a11y-improvement') && {
+            'aria-label': label,
+            'aria-labelledby': `${labelId || ((_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.id) || this.getElementId('input')} ${commonProps.isMulti && isSafari() ? this.getElementId('multi-message') : ''}`
+          })
+        },
+        isLoading: isLoading,
+        maxHeight: maxHeight,
+        focusedOption: focusedOption
+      }), menuUI);
+    })));
 
     // positioning behaviour is almost identical for portalled and fixed,
     // so we use the same component. the actual portalling logic is forked

package/dist/esm/components/menu.js

@@ -15,6 +15,7 @@ import { jsx } from '@emotion/react';
 import { autoUpdate } from '@floating-ui/dom';
 import { createPortal } from 'react-dom';
 import useLayoutEffect from 'use-isomorphic-layout-effect';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { animatedScrollTo, getBoundingClientObj, getScrollParent, getScrollTop, getStyleProps, normalizedHeight, scrollTo } from '../utils';
 
 // ==============================
@@ -46,7 +47,8 @@ export function getMenuPlacement(_ref) {
   // we can't trust `scrollParent.scrollHeight` --> it may increase when
   // the menu is rendered
   var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
-    scrollHeight = _scrollParent$getBoun.height;
+    scrollHeight = _scrollParent$getBoun.height,
+    scrollParentTop = _scrollParent$getBoun.top;
   var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),
     menuBottom = _menuEl$getBoundingCl.bottom,
     menuHeight = _menuEl$getBoundingCl.height,
@@ -55,12 +57,14 @@ export function getMenuPlacement(_ref) {
     containerTop = _menuEl$offsetParent$.top;
   var viewHeight = isFixedPosition ? window.innerHeight : normalizedHeight(scrollParent);
   var scrollTop = getScrollTop(scrollParent);
+  // use menuTop - scrollParentTop for the actual top space of menu in the scroll container
+  var menuTopFromParent = fg('design-system-select-fix-placement') ? menuTop - scrollParentTop : menuTop;
   var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
   var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
   var viewSpaceAbove = containerTop - marginTop;
-  var viewSpaceBelow = viewHeight - menuTop;
+  var viewSpaceBelow = viewHeight - menuTopFromParent;
   var scrollSpaceAbove = viewSpaceAbove + scrollTop;
-  var scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
+  var scrollSpaceBelow = scrollHeight - scrollTop - menuTopFromParent;
   var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
   var scrollUp = scrollTop + menuTop - marginTop;
   var scrollDuration = 160;

package/dist/esm/select.js

@@ -1632,6 +1632,7 @@ var Select = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
+          var _this4$inputRef;
           return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
@@ -1643,7 +1644,7 @@ var Select = /*#__PURE__*/function (_Component) {
               id: _this4.getElementId('listbox')
             }, fg('design_system_select-a11y-improvement') && {
               'aria-label': label,
-              'aria-labelledby': "".concat(labelId || _this4.getElementId('input'), " ").concat(commonProps.isMulti && isSafari() ? _this4.getElementId('multi-message') : '')
+              'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'), " ").concat(commonProps.isMulti && isSafari() ? _this4.getElementId('multi-message') : '')
             }),
             isLoading: isLoading,
             maxHeight: maxHeight,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "1.5.0",
+	"version": "1.5.2",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -63,6 +63,9 @@
 		},
 		"platform_design_system_team_safari_input_fix": {
 			"type": "boolean"
+		},
+		"design-system-select-fix-placement": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {