@atlaskit/link-datasource 4.32.0 → 4.32.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/link-datasource
 
+## 4.32.2
+
+### Patch Changes
+
+- [`ebd1d53e42731`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ebd1d53e42731) -
+  [ux] Fix a bug where pressing escape when dropdowns inside modal dialog are opened is closing the
+  modal dialog itself. Behind platform_navx_sllv_dropdown_escape_and_focus_fix FG
+- Updated dependencies
+
+## 4.32.1
+
+### Patch Changes
+
+- [`1d8c8a19192b2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1d8c8a19192b2) -
+  [ux] For Jira inlne editing dropdown (status, assignee) are now show over the edge of scrallable
+  table. Behind FG platform_navx_sllv_j2ws_dropdown_for_single_row
+
 ## 4.32.0
 
 ### Minor Changes

package/dist/cjs/ui/assets-modal/search-container/aql-search-input/index.js

@@ -61,7 +61,6 @@ var renderValidatorIcon = function renderValidatorIcon(lastValidationResult) {
     return /*#__PURE__*/React.createElement(_crossCircle.default, {
       label: "label",
       color: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
-      LEGACY_size: "medium",
       testId: "assets-datasource-modal--aql-invalid",
       spacing: "spacious"
     });
@@ -70,14 +69,12 @@ var renderValidatorIcon = function renderValidatorIcon(lastValidationResult) {
     return /*#__PURE__*/React.createElement(_statusSuccess.default, {
       label: "label",
       color: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
-      LEGACY_size: "medium",
       testId: "assets-datasource-modal--aql-valid",
       spacing: "spacious"
     });
   }
   return /*#__PURE__*/React.createElement(_search.default, {
     label: "label",
-    LEGACY_size: "medium",
     testId: "assets-datasource-modal--aql-idle",
     color: "currentColor",
     spacing: "spacious"
@@ -119,7 +116,6 @@ var AqlSearchInput = exports.AqlSearchInput = function AqlSearchInput(_ref2) {
       }, /*#__PURE__*/React.createElement(_questionCircle.default, {
         label: "label",
         color: "var(--ds-icon, ".concat(_colors.N500, ")"),
-        LEGACY_size: "medium",
         testId: "assets-datasource-modal-help",
         spacing: "spacious"
       }))), /*#__PURE__*/React.createElement(_compiled.Box, {
@@ -129,7 +125,6 @@ var AqlSearchInput = exports.AqlSearchInput = function AqlSearchInput(_ref2) {
         isLoading: isSearching,
         icon: function icon(iconProps) {
           return /*#__PURE__*/React.createElement(_search.default, (0, _extends2.default)({}, iconProps, {
-            LEGACY_size: "medium",
             spacing: "spacious",
             color: "currentColor"
           }));

package/dist/cjs/ui/common/modal/basic-search-input/index.js

@@ -57,7 +57,6 @@ var BasicSearchInput = exports.BasicSearchInput = function BasicSearchInput(_ref
       isLoading: isSearching,
       icon: function icon(iconProps) {
         return /*#__PURE__*/React.createElement(_search.default, (0, _extends2.default)({}, iconProps, {
-          LEGACY_size: "medium",
           spacing: "spacious",
           color: "currentColor"
         }));

package/dist/cjs/ui/common/modal/popup-select/formatOptionLabel.js

@@ -59,7 +59,6 @@ var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
     xcss: styles.groupWrapperStyles
   }, /*#__PURE__*/_react.default.createElement(_peopleGroup.default, {
     color: "currentColor",
-    LEGACY_size: "small",
     label: ""
   })) : /*#__PURE__*/_react.default.createElement(_avatar.default, {
     appearance: data.isSquare ? 'square' : 'circle',

package/dist/cjs/ui/common/modal/popup-select/index.js

@@ -16,6 +16,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _analytics = require("../../../../analytics");
 var _control = _interopRequireDefault(require("./control"));
@@ -223,6 +224,7 @@ var FilterPopupSelect = exports.FilterPopupSelect = function FilterPopupSelect(_
     onInputChange: handleInputChange,
     onOpen: handleMenuOpen,
     onClose: handleMenuClose,
+    shouldPreventEscapePropagation: (0, _platformFeatureFlags.fg)('platform_navx_sllv_dropdown_escape_and_focus_fix'),
     target: function target(_ref3) {
       var isOpen = _ref3.isOpen,
         triggerProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);

package/dist/cjs/ui/common/modal/popup-select/trigger.js

@@ -17,6 +17,7 @@ var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _excluded = ["as", "style"];
@@ -62,6 +63,15 @@ var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       testId: "".concat(triggerButtonTestId, "--loading-button")
     }, label));
   }, [label, triggerButtonTestId]);
+  var loadingButton = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+      ref: ref,
+      iconAfter: /*#__PURE__*/_react.default.createElement(_spinner.default, {
+        size: 'xsmall'
+      }),
+      testId: "".concat(triggerButtonTestId, "--loading-button")
+    }, label));
+  }, [label, triggerButtonTestId, ref]);
   var DefaultButton = (0, _react.useCallback)(function () {
     return /*#__PURE__*/_react.default.createElement(_new.default, {
       isSelected: isSelected || hasOptions,
@@ -84,12 +94,37 @@ var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       appearance: "primary"
     }, "+", selectedOptions.length - 1))));
   }, [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, triggerButtonTestId]);
+  var defaultButton = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(_new.default, {
+      ref: ref,
+      isSelected: isSelected || hasOptions,
+      isDisabled: isDisabled,
+      iconAfter: function iconAfter() {
+        return /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+          label: "",
+          color: "currentColor",
+          size: "small"
+        });
+      },
+      testId: "".concat(triggerButtonTestId, "--button"),
+      "aria-expanded": isSelected
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.triggerButtonLabelStyles
+    }, label, firstOption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+      xcss: styles.badgeStyles,
+      alignItems: "center"
+    }, /*#__PURE__*/_react.default.createElement(_badge.default, {
+      appearance: "primary"
+    }, "+", selectedOptions.length - 1))));
+  }, [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, triggerButtonTestId, ref]);
 
   /**
    * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
    * Hence introducing a Box to make sure ref is always the same and only content is refreshed on re-renders
    */
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+  return (0, _platformFeatureFlags.fg)('platform_navx_sllv_dropdown_escape_and_focus_fix') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    testId: triggerButtonTestId
+  }, showButtonLoading ? loadingButton : defaultButton) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     ref: ref,
     testId: triggerButtonTestId
   }, showButtonLoading ? /*#__PURE__*/_react.default.createElement(LoadingButton, null) : /*#__PURE__*/_react.default.createElement(DefaultButton, null));

package/dist/cjs/ui/issue-like-table/edit-type/icon/index.js

@@ -48,6 +48,7 @@ var IconEditType = function IconEditType(props) {
   return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
     isDisabled: false
   }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, (0, _utils.getCleanedSelectProps)(props), {
+    menuPortalTarget: (0, _platformFeatureFlags.fg)('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
     autoFocus: true,
     blurInputOnSelect: true,
     defaultMenuIsOpen: true
@@ -86,7 +87,8 @@ var IconEditType = function IconEditType(props) {
         type: 'icon',
         values: e ? [e] : []
       });
-    }
+    },
+    shouldPreventEscapePropagation: (0, _platformFeatureFlags.fg)('platform_navx_sllv_dropdown_escape_and_focus_fix') ? true : undefined
   })));
 };
 

package/dist/cjs/ui/issue-like-table/edit-type/status/index.js

@@ -48,6 +48,7 @@ var StatusEditType = function StatusEditType(props) {
   return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
     isDisabled: false
   }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, (0, _utils.getCleanedSelectProps)(props), {
+    menuPortalTarget: (0, _platformFeatureFlags.fg)('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
     autoFocus: true,
     options: options,
     defaultMenuIsOpen: true,
@@ -79,7 +80,8 @@ var StatusEditType = function StatusEditType(props) {
         type: 'status',
         values: e ? [e] : []
       });
-    }
+    },
+    shouldPreventEscapePropagation: (0, _platformFeatureFlags.fg)('platform_navx_sllv_dropdown_escape_and_focus_fix') ? true : undefined
   })));
 };
 

package/dist/cjs/ui/issue-like-table/edit-type/user/index.js

@@ -78,6 +78,7 @@ var UserEditType = function UserEditType(props) {
   return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
     isDisabled: false
   }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, (0, _utils.getCleanedSelectProps)(props), {
+    menuPortalTarget: (0, _platformFeatureFlags.fg)('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
     autoFocus: true,
     defaultMenuIsOpen: true,
     blurInputOnSelect: true,
@@ -114,7 +115,8 @@ var UserEditType = function UserEditType(props) {
         type: 'user',
         values: e ? [e] : []
       });
-    }
+    },
+    shouldPreventEscapePropagation: (0, _platformFeatureFlags.fg)('platform_navx_sllv_dropdown_escape_and_focus_fix') ? true : undefined
   })));
 };
 

package/dist/es2019/ui/assets-modal/search-container/aql-search-input/index.js

@@ -52,7 +52,6 @@ const renderValidatorIcon = lastValidationResult => {
     return /*#__PURE__*/React.createElement(CrossCircleIcon, {
       label: "label",
       color: `var(--ds-icon-danger, ${R400})`,
-      LEGACY_size: "medium",
       testId: "assets-datasource-modal--aql-invalid",
       spacing: "spacious"
     });
@@ -61,14 +60,12 @@ const renderValidatorIcon = lastValidationResult => {
     return /*#__PURE__*/React.createElement(CheckCircleIcon, {
       label: "label",
       color: `var(--ds-icon-success, ${G300})`,
-      LEGACY_size: "medium",
       testId: "assets-datasource-modal--aql-valid",
       spacing: "spacious"
     });
   }
   return /*#__PURE__*/React.createElement(SearchIcon, {
     label: "label",
-    LEGACY_size: "medium",
     testId: "assets-datasource-modal--aql-idle",
     color: "currentColor",
     spacing: "spacious"
@@ -112,7 +109,6 @@ export const AqlSearchInput = ({
     }, /*#__PURE__*/React.createElement(QuestionCircleIcon, {
       label: "label",
       color: `var(--ds-icon, ${N500})`,
-      LEGACY_size: "medium",
       testId: "assets-datasource-modal-help",
       spacing: "spacious"
     }))), /*#__PURE__*/React.createElement(Box, {
@@ -121,7 +117,6 @@ export const AqlSearchInput = ({
       appearance: "primary",
       isLoading: isSearching,
       icon: iconProps => /*#__PURE__*/React.createElement(SearchIcon, _extends({}, iconProps, {
-        LEGACY_size: "medium",
         spacing: "spacious",
         color: "currentColor"
       })),

package/dist/es2019/ui/common/modal/basic-search-input/index.js

@@ -50,7 +50,6 @@ export const BasicSearchInput = ({
       appearance: "primary",
       isLoading: isSearching,
       icon: iconProps => /*#__PURE__*/React.createElement(SearchIcon, _extends({}, iconProps, {
-        LEGACY_size: "medium",
         spacing: "spacious",
         color: "currentColor"
       })),

package/dist/es2019/ui/common/modal/popup-select/formatOptionLabel.js

@@ -57,7 +57,6 @@ const AvatarOptionLabel = ({
     xcss: styles.groupWrapperStyles
   }, /*#__PURE__*/React.createElement(PeopleGroupIcon, {
     color: "currentColor",
-    LEGACY_size: "small",
     label: ""
   })) : /*#__PURE__*/React.createElement(Avatar, {
     appearance: data.isSquare ? 'square' : 'circle',

package/dist/es2019/ui/common/modal/popup-select/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
 import { useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupSelect } from '@atlaskit/select';
 import { useDatasourceAnalyticsEvents } from '../../../../analytics';
 import CustomControl from './control';
@@ -172,6 +173,7 @@ export const FilterPopupSelect = ({
     onInputChange: handleInputChange,
     onOpen: handleMenuOpen,
     onClose: handleMenuClose,
+    shouldPreventEscapePropagation: fg('platform_navx_sllv_dropdown_escape_and_focus_fix'),
     target: ({
       isOpen,
       ...triggerProps

package/dist/es2019/ui/common/modal/popup-select/trigger.js

@@ -2,11 +2,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import Badge from '@atlaskit/badge';
 import NewButton from '@atlaskit/button/new';
 import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 const styles = {
@@ -47,6 +48,13 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     }),
     testId: `${triggerButtonTestId}--loading-button`
   }, label)), [label, triggerButtonTestId]);
+  const loadingButton = useMemo(() => /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    ref: ref,
+    iconAfter: /*#__PURE__*/React.createElement(Spinner, {
+      size: 'xsmall'
+    }),
+    testId: `${triggerButtonTestId}--loading-button`
+  }, label)), [label, triggerButtonTestId, ref]);
   const DefaultButton = useCallback(() => /*#__PURE__*/React.createElement(NewButton, {
     isSelected: isSelected || hasOptions,
     isDisabled: isDisabled,
@@ -65,12 +73,33 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement(Badge, {
     appearance: "primary"
   }, "+", selectedOptions.length - 1)))), [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, triggerButtonTestId]);
+  const defaultButton = useMemo(() => /*#__PURE__*/React.createElement(NewButton, {
+    ref: ref,
+    isSelected: isSelected || hasOptions,
+    isDisabled: isDisabled,
+    iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      label: "",
+      color: "currentColor",
+      size: "small"
+    }),
+    testId: `${triggerButtonTestId}--button`,
+    "aria-expanded": isSelected
+  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.triggerButtonLabelStyles
+  }, label, firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.badgeStyles,
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    appearance: "primary"
+  }, "+", selectedOptions.length - 1)))), [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, triggerButtonTestId, ref]);
 
   /**
    * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
    * Hence introducing a Box to make sure ref is always the same and only content is refreshed on re-renders
    */
-  return /*#__PURE__*/React.createElement(Box, {
+  return fg('platform_navx_sllv_dropdown_escape_and_focus_fix') ? /*#__PURE__*/React.createElement(Box, {
+    testId: triggerButtonTestId
+  }, showButtonLoading ? loadingButton : defaultButton) : /*#__PURE__*/React.createElement(Box, {
     ref: ref,
     testId: triggerButtonTestId
   }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));

package/dist/es2019/ui/issue-like-table/edit-type/icon/index.js

@@ -42,6 +42,7 @@ const IconEditType = props => {
   return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
+    menuPortalTarget: fg('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
     autoFocus: true,
     blurInputOnSelect: true,
     defaultMenuIsOpen: true
@@ -71,7 +72,8 @@ const IconEditType = props => {
     onChange: e => props.setEditValues({
       type: 'icon',
       values: e ? [e] : []
-    })
+    }),
+    shouldPreventEscapePropagation: fg('platform_navx_sllv_dropdown_escape_and_focus_fix') ? true : undefined
   })));
 };
 

package/dist/es2019/ui/issue-like-table/edit-type/status/index.js

@@ -42,6 +42,7 @@ const StatusEditType = props => {
   return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
+    menuPortalTarget: fg('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
     autoFocus: true,
     options: options,
     defaultMenuIsOpen: true,
@@ -67,7 +68,8 @@ const StatusEditType = props => {
     onChange: e => props.setEditValues({
       type: 'status',
       values: e ? [e] : []
-    })
+    }),
+    shouldPreventEscapePropagation: fg('platform_navx_sllv_dropdown_escape_and_focus_fix') ? true : undefined
   })));
 };
 

package/dist/es2019/ui/issue-like-table/edit-type/user/index.js

@@ -63,6 +63,7 @@ const UserEditType = props => {
   return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
+    menuPortalTarget: fg('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
     autoFocus: true,
     defaultMenuIsOpen: true,
     blurInputOnSelect: true,
@@ -93,7 +94,8 @@ const UserEditType = props => {
     onChange: e => props.setEditValues({
       type: 'user',
       values: e ? [e] : []
-    })
+    }),
+    shouldPreventEscapePropagation: fg('platform_navx_sllv_dropdown_escape_and_focus_fix') ? true : undefined
   })));
 };
 

package/dist/esm/ui/assets-modal/search-container/aql-search-input/index.js

@@ -54,7 +54,6 @@ var renderValidatorIcon = function renderValidatorIcon(lastValidationResult) {
     return /*#__PURE__*/React.createElement(CrossCircleIcon, {
       label: "label",
       color: "var(--ds-icon-danger, ".concat(R400, ")"),
-      LEGACY_size: "medium",
       testId: "assets-datasource-modal--aql-invalid",
       spacing: "spacious"
     });
@@ -63,14 +62,12 @@ var renderValidatorIcon = function renderValidatorIcon(lastValidationResult) {
     return /*#__PURE__*/React.createElement(CheckCircleIcon, {
       label: "label",
       color: "var(--ds-icon-success, ".concat(G300, ")"),
-      LEGACY_size: "medium",
       testId: "assets-datasource-modal--aql-valid",
       spacing: "spacious"
     });
   }
   return /*#__PURE__*/React.createElement(SearchIcon, {
     label: "label",
-    LEGACY_size: "medium",
     testId: "assets-datasource-modal--aql-idle",
     color: "currentColor",
     spacing: "spacious"
@@ -112,7 +109,6 @@ export var AqlSearchInput = function AqlSearchInput(_ref2) {
       }, /*#__PURE__*/React.createElement(QuestionCircleIcon, {
         label: "label",
         color: "var(--ds-icon, ".concat(N500, ")"),
-        LEGACY_size: "medium",
         testId: "assets-datasource-modal-help",
         spacing: "spacious"
       }))), /*#__PURE__*/React.createElement(Box, {
@@ -122,7 +118,6 @@ export var AqlSearchInput = function AqlSearchInput(_ref2) {
         isLoading: isSearching,
         icon: function icon(iconProps) {
           return /*#__PURE__*/React.createElement(SearchIcon, _extends({}, iconProps, {
-            LEGACY_size: "medium",
             spacing: "spacious",
             color: "currentColor"
           }));

package/dist/esm/ui/common/modal/basic-search-input/index.js

@@ -48,7 +48,6 @@ export var BasicSearchInput = function BasicSearchInput(_ref) {
       isLoading: isSearching,
       icon: function icon(iconProps) {
         return /*#__PURE__*/React.createElement(SearchIcon, _extends({}, iconProps, {
-          LEGACY_size: "medium",
           spacing: "spacious",
           color: "currentColor"
         }));

package/dist/esm/ui/common/modal/popup-select/formatOptionLabel.js

@@ -52,7 +52,6 @@ var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
     xcss: styles.groupWrapperStyles
   }, /*#__PURE__*/React.createElement(PeopleGroupIcon, {
     color: "currentColor",
-    LEGACY_size: "small",
     label: ""
   })) : /*#__PURE__*/React.createElement(Avatar, {
     appearance: data.isSquare ? 'square' : 'circle',

package/dist/esm/ui/common/modal/popup-select/index.js

@@ -11,6 +11,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
 import { useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupSelect } from '@atlaskit/select';
 import { useDatasourceAnalyticsEvents } from '../../../../analytics';
 import CustomControl from './control';
@@ -214,6 +215,7 @@ export var FilterPopupSelect = function FilterPopupSelect(_ref) {
     onInputChange: handleInputChange,
     onOpen: handleMenuOpen,
     onClose: handleMenuClose,
+    shouldPreventEscapePropagation: fg('platform_navx_sllv_dropdown_escape_and_focus_fix'),
     target: function target(_ref3) {
       var isOpen = _ref3.isOpen,
         triggerProps = _objectWithoutProperties(_ref3, _excluded);

package/dist/esm/ui/common/modal/popup-select/trigger.js

@@ -5,11 +5,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["as", "style"];
 import "./trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import Badge from '@atlaskit/badge';
 import NewButton from '@atlaskit/button/new';
 import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 var styles = {
@@ -53,6 +54,15 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       testId: "".concat(triggerButtonTestId, "--loading-button")
     }, label));
   }, [label, triggerButtonTestId]);
+  var loadingButton = useMemo(function () {
+    return /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
+      ref: ref,
+      iconAfter: /*#__PURE__*/React.createElement(Spinner, {
+        size: 'xsmall'
+      }),
+      testId: "".concat(triggerButtonTestId, "--loading-button")
+    }, label));
+  }, [label, triggerButtonTestId, ref]);
   var DefaultButton = useCallback(function () {
     return /*#__PURE__*/React.createElement(NewButton, {
       isSelected: isSelected || hasOptions,
@@ -75,12 +85,37 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       appearance: "primary"
     }, "+", selectedOptions.length - 1))));
   }, [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, triggerButtonTestId]);
+  var defaultButton = useMemo(function () {
+    return /*#__PURE__*/React.createElement(NewButton, {
+      ref: ref,
+      isSelected: isSelected || hasOptions,
+      isDisabled: isDisabled,
+      iconAfter: function iconAfter() {
+        return /*#__PURE__*/React.createElement(ChevronDownIcon, {
+          label: "",
+          color: "currentColor",
+          size: "small"
+        });
+      },
+      testId: "".concat(triggerButtonTestId, "--button"),
+      "aria-expanded": isSelected
+    }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.triggerButtonLabelStyles
+    }, label, firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
+      xcss: styles.badgeStyles,
+      alignItems: "center"
+    }, /*#__PURE__*/React.createElement(Badge, {
+      appearance: "primary"
+    }, "+", selectedOptions.length - 1))));
+  }, [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, triggerButtonTestId, ref]);
 
   /**
    * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
    * Hence introducing a Box to make sure ref is always the same and only content is refreshed on re-renders
    */
-  return /*#__PURE__*/React.createElement(Box, {
+  return fg('platform_navx_sllv_dropdown_escape_and_focus_fix') ? /*#__PURE__*/React.createElement(Box, {
+    testId: triggerButtonTestId
+  }, showButtonLoading ? loadingButton : defaultButton) : /*#__PURE__*/React.createElement(Box, {
     ref: ref,
     testId: triggerButtonTestId
   }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));

package/dist/esm/ui/issue-like-table/edit-type/icon/index.js

@@ -39,6 +39,7 @@ var IconEditType = function IconEditType(props) {
   return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
+    menuPortalTarget: fg('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
     autoFocus: true,
     blurInputOnSelect: true,
     defaultMenuIsOpen: true
@@ -77,7 +78,8 @@ var IconEditType = function IconEditType(props) {
         type: 'icon',
         values: e ? [e] : []
       });
-    }
+    },
+    shouldPreventEscapePropagation: fg('platform_navx_sllv_dropdown_escape_and_focus_fix') ? true : undefined
   })));
 };
 

package/dist/esm/ui/issue-like-table/edit-type/status/index.js

@@ -39,6 +39,7 @@ var StatusEditType = function StatusEditType(props) {
   return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
+    menuPortalTarget: fg('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
     autoFocus: true,
     options: options,
     defaultMenuIsOpen: true,
@@ -70,7 +71,8 @@ var StatusEditType = function StatusEditType(props) {
         type: 'status',
         values: e ? [e] : []
       });
-    }
+    },
+    shouldPreventEscapePropagation: fg('platform_navx_sllv_dropdown_escape_and_focus_fix') ? true : undefined
   })));
 };
 

package/dist/esm/ui/issue-like-table/edit-type/user/index.js

@@ -69,6 +69,7 @@ var UserEditType = function UserEditType(props) {
   return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
+    menuPortalTarget: fg('platform_navx_sllv_j2ws_dropdown_for_single_row') ? document.body : undefined,
     autoFocus: true,
     defaultMenuIsOpen: true,
     blurInputOnSelect: true,
@@ -105,7 +106,8 @@ var UserEditType = function UserEditType(props) {
         type: 'user',
         values: e ? [e] : []
       });
-    }
+    },
+    shouldPreventEscapePropagation: fg('platform_navx_sllv_dropdown_escape_and_focus_fix') ? true : undefined
   })));
 };
 

package/dist/types/ui/common/modal/popup-select/trigger.d.ts

@@ -8,5 +8,5 @@ export interface PopupTriggerProps {
     selectedOptions?: ReadonlyArray<SelectOption>;
     testId?: string;
 }
-declare const PopupTrigger: React.ForwardRefExoticComponent<PopupTriggerProps & React.RefAttributes<HTMLElement>>;
+declare const PopupTrigger: React.ForwardRefExoticComponent<PopupTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export default PopupTrigger;

package/dist/types/ui/issue-like-table/types.d.ts

@@ -73,7 +73,7 @@ export interface IssueLikeDataTableViewProps {
     renderItem?: TableViewPropsRenderType;
     /**
      * If this number is set it will restrict (max-height) maximum size of the component AND make main container a scrollable container.
-     * It this number is undefined it will not restrict height and not make container scrollable.
+     * It this number is 0 it will not restrict height and not make container scrollable.
      */
     scrollableContainerHeight?: number;
     status: DatasourceTableStatusType;

package/dist/types-ts4.5/ui/common/modal/popup-select/trigger.d.ts

@@ -8,5 +8,5 @@ export interface PopupTriggerProps {
     selectedOptions?: ReadonlyArray<SelectOption>;
     testId?: string;
 }
-declare const PopupTrigger: React.ForwardRefExoticComponent<PopupTriggerProps & React.RefAttributes<HTMLElement>>;
+declare const PopupTrigger: React.ForwardRefExoticComponent<PopupTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export default PopupTrigger;

package/dist/types-ts4.5/ui/issue-like-table/types.d.ts

@@ -73,7 +73,7 @@ export interface IssueLikeDataTableViewProps {
     renderItem?: TableViewPropsRenderType;
     /**
      * If this number is set it will restrict (max-height) maximum size of the component AND make main container a scrollable container.
-     * It this number is undefined it will not restrict height and not make container scrollable.
+     * It this number is 0 it will not restrict height and not make container scrollable.
      */
     scrollableContainerHeight?: number;
     status: DatasourceTableStatusType;

package/examples-helpers/buildIssueLikeTable.tsx

@@ -23,16 +23,12 @@ import { useCommonTableProps } from './useCommonTableProps';
 type Props = {
 	canControlWrapping?: boolean;
 	canResizeColumns?: boolean;
+	cloudId?: string;
 	forceLoading?: boolean;
 	isReadonly?: boolean;
-	/**
-	 * Use infinity for an infinite delay (promise never resolves or rejects)
-	 * Default is 600ms
-	 */
-	mockExecutionDelay?: number;
 	skipIntl?: boolean;
 	visibleColumnKeys?: string[];
-};
+} & Parameters<typeof mockDatasourceFetchRequests>[0];
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const TableViewWrapper = styled.div({
@@ -50,13 +46,14 @@ const ExampleBody = ({
 	forceLoading = false,
 	visibleColumnKeys: overrideVisibleColumnKeys,
 	mockExecutionDelay = 600,
+	cloudId,
 }: Props) => {
 	const parameters = useMemo<JiraIssueDatasourceParameters>(
 		() => ({
-			cloudId: 'some-cloud-id',
+			cloudId: cloudId ?? 'some-cloud-id',
 			jql: 'some-jql',
 		}),
-		[],
+		[cloudId],
 	);
 
 	useEffect(() => {

package/examples-helpers/fakeModalDialogContainer.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { cssMap, cx } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+const styles = cssMap({
+	tableWrapper: {
+		marginInline: 'auto',
+		marginTop: token('space.200'),
+		width: '90%',
+		borderRadius: token('radius.large'),
+		borderWidth: token('border.width'),
+		borderStyle: 'solid',
+		borderColor: token('color.border'),
+	},
+	hasOverflow: {
+		overflow: 'hidden',
+	},
+});
+
+export const FakeModalDialogContainer = ({ children, hasOverflow = true }: { children: React.ReactNode, hasOverflow?: boolean }): React.JSX.Element => {
+	return (
+		<Box xcss={cx(styles.tableWrapper, hasOverflow && styles.hasOverflow)}>
+			{children}
+		</Box>
+	);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "4.32.0",
+	"version": "4.32.2",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -81,7 +81,7 @@
 		"@atlaskit/react-select": "^3.13.0",
 		"@atlaskit/select": "^21.6.0",
 		"@atlaskit/smart-card": "^43.20.0",
-		"@atlaskit/smart-user-picker": "^8.8.0",
+		"@atlaskit/smart-user-picker": "^8.9.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tag": "^14.2.0",
 		"@atlaskit/textfield": "^8.2.0",
@@ -186,6 +186,12 @@
 		},
 		"lp_disable_datasource_table_max_height_restriction": {
 			"type": "boolean"
+		},
+		"platform_navx_sllv_dropdown_escape_and_focus_fix": {
+			"type": "boolean"
+		},
+		"platform_navx_sllv_j2ws_dropdown_for_single_row": {
+			"type": "boolean"
 		}
 	},
 	"compassUnitTestMetricSourceId": "ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:metric-source/c5751cc6-3513-4070-9deb-af31e86aed34/9c893299-a527-4457-9b46-f3bc4c828766"