@atlaskit/link-datasource 0.33.0 → 0.33.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-datasource
 
+## 0.33.2
+
+### Patch Changes
+
+- [`7e77ad40512`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e77ad40512) - [ux] Add question mark to search field with link to aql docs
+
+## 0.33.1
+
+### Patch Changes
+
+- [`3c77a5b1377`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c77a5b1377) - Change behaviour of Assets Config Modal schema select to fetch on mount
+
 ## 0.33.0
 
 ### Minor Changes

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

@@ -16,8 +16,11 @@ var _form = require("@atlaskit/form");
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _colors = require("@atlaskit/theme/colors");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useValidateAqlText2 = require("../../../../hooks/useValidateAqlText");
 var _types = require("../../../../types/assets/types");
 var _styled = require("../styled");
@@ -27,6 +30,16 @@ var _messages = require("./messages");
 /* Meta isn't exported in @atlaskit/form
 Taken from packages/design-system/form/src/field.tsx */
 
+var buttonBaseStyles = (0, _react2.css)({
+  display: 'flex',
+  height: '100%',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  marginRight: "var(--ds-space-100, 0.5em)"
+});
+var AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
 var searchButtonStyles = (0, _react2.css)({
   marginRight: "var(--ds-space-075, 6px)"
 });
@@ -143,7 +156,19 @@ var AqlSearchInput = function AqlSearchInput(_ref) {
           width: 24
         }
       }, renderValidatorIcon(fieldProps.value, error, meta)),
-      elemAfterInput: (0, _react2.jsx)(_button.LoadingButton, {
+      elemAfterInput: (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_tooltip.default, {
+        content: formatMessage(_messages.searchInputMessages.helpTooltipText),
+        position: "bottom"
+      }, (0, _react2.jsx)("a", {
+        href: AQLSupportDocumentLink,
+        target: "_blank",
+        css: buttonBaseStyles
+      }, (0, _react2.jsx)(_questionCircle.default, {
+        label: "label",
+        primaryColor: "var(--ds-icon, ".concat(_colors.N500, ")"),
+        size: "medium",
+        testId: "assets-datasource-modal-help"
+      }))), (0, _react2.jsx)(_button.LoadingButton, {
         appearance: "primary",
         css: searchButtonStyles,
         iconBefore: (0, _react2.jsx)(_search.default, {
@@ -154,7 +179,7 @@ var AqlSearchInput = function AqlSearchInput(_ref) {
         spacing: "none",
         testId: "assets-datasource-modal--aql-search-button",
         type: "submit"
-      }),
+      })),
       placeholder: formatMessage(_messages.searchInputMessages.placeholder),
       testId: testId
     }));

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

@@ -10,6 +10,11 @@ var searchInputMessages = (0, _reactIntlNext.defineMessages)({
     id: 'linkDataSource.assets.configModal.aqlSearchInput.placeholder',
     description: 'Display text for AQL search button',
     defaultMessage: 'Search via AQL'
+  },
+  helpTooltipText: {
+    id: 'linkDataSource.assets.configModal.aqlSearchInput.helpTooltipText',
+    description: 'Link to AQL Syntax help document',
+    defaultMessage: 'Syntax help'
   }
 });
 exports.searchInputMessages = searchInputMessages;

package/dist/cjs/ui/assets-modal/search-container/object-schema-select/index.js

@@ -4,27 +4,44 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SEARCH_DEBOUNCE_MS = exports.AssetsObjectSchemaSelect = void 0;
+exports.selectInAModalStyleFixProps = exports.SEARCH_DEBOUNCE_MS = exports.AssetsObjectSchemaSelect = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
 var _debouncePromise = _interopRequireDefault(require("debounce-promise"));
 var _reactIntlNext = require("react-intl-next");
 var _form = require("@atlaskit/form");
 var _select = require("@atlaskit/select");
+var _constants = require("@atlaskit/theme/constants");
 var _useObjectSchemas2 = require("../../../../hooks/useObjectSchemas");
 var _types = require("../../../../types/assets/types");
 var _styled = require("../styled");
 var _messages = require("./messages");
 var _utils = require("./utils");
 var _excluded = ["onChange", "onFocus"];
-/** @jsx jsx */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
 var SEARCH_DEBOUNCE_MS = 350;
+
+/**
+ * Rendering a `<Select>` in a `<Modal>` results in the select options getting cut off by the bottom of the modal and
+ * scrolling. This is a work-around for that, see https://atlassian.slack.com/archives/CFJ9DU39U/p1623179496484100
+ */
 exports.SEARCH_DEBOUNCE_MS = SEARCH_DEBOUNCE_MS;
+var selectInAModalStyleFixProps = {
+  styles: {
+    menuPortal: function menuPortal(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        zIndex: _constants.layers.modal()
+      });
+    }
+  },
+  menuPortalTarget: document.body
+};
+exports.selectInAModalStyleFixProps = selectInAModalStyleFixProps;
 var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
   var value = _ref.value,
     workspaceId = _ref.workspaceId,
@@ -35,10 +52,6 @@ var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
   var _useObjectSchemas = (0, _useObjectSchemas2.useObjectSchemas)(workspaceId),
     fetchObjectSchemas = _useObjectSchemas.fetchObjectSchemas,
     objectSchemasLoading = _useObjectSchemas.objectSchemasLoading;
-  var _useState = (0, _react.useState)(undefined),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    defaultOptions = _useState2[0],
-    setDefaultOptions = _useState2[1];
   var selectedObjectSchema = value ? (0, _utils.objectSchemaToSelectOption)(value) : undefined;
   var loadOptions = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(inputValue) {
@@ -71,7 +84,7 @@ var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
     }
     return undefined;
   };
-  return (0, _react2.jsx)(_styled.FieldContainer, null, (0, _react2.jsx)(_form.Field, {
+  return (0, _react.jsx)(_styled.FieldContainer, null, (0, _react.jsx)(_form.Field, {
     name: _types.objectSchemaKey,
     defaultValue: selectedObjectSchema,
     validate: function validate(value) {
@@ -82,22 +95,18 @@ var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
       _onChange = _ref3$fieldProps.onChange,
       onFocus = _ref3$fieldProps.onFocus,
       restFieldProps = (0, _objectWithoutProperties2.default)(_ref3$fieldProps, _excluded);
-    return (0, _react2.jsx)(_select.AsyncSelect, (0, _extends2.default)({
+    return (0, _react.jsx)(_select.AsyncSelect, (0, _extends2.default)({
       classNamePrefix: classNamePrefix,
       isLoading: objectSchemasLoading,
-      defaultOptions: defaultOptions || [],
+      defaultOptions: true // setting to true causes the loadOptions to be called on mount
+      ,
       isSearchable: true,
       loadOptions: debouncedLoadOptions,
       placeholder: formatMessage(_messages.objectSchemaSelectMessages.placeholder),
       onChange: function onChange(newOption) {
         return newOption && _onChange(newOption);
-      },
-      onFocus: function onFocus() {
-        if (!defaultOptions) {
-          loadOptions('').then(setDefaultOptions);
-        }
       }
-    }, restFieldProps));
+    }, selectInAModalStyleFixProps, restFieldProps));
   }));
 };
 exports.AssetsObjectSchemaSelect = AssetsObjectSchemaSelect;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.33.0",
+	"version": "0.33.2",
 	"sideEffects": false
 }

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useCallback, useRef } from 'react';
+import { Fragment, useCallback, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
@@ -8,8 +8,11 @@ import { Field } from '@atlaskit/form';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import Spinner from '@atlaskit/spinner';
 import Textfield from '@atlaskit/textfield';
+import { N500 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
 import { useValidateAqlText } from '../../../../hooks/useValidateAqlText';
 import { aqlKey } from '../../../../types/assets/types';
 import { FieldContainer } from '../styled';
@@ -18,6 +21,16 @@ import { searchInputMessages } from './messages';
 /* Meta isn't exported in @atlaskit/form
 Taken from packages/design-system/form/src/field.tsx */
 
+const buttonBaseStyles = css({
+  display: 'flex',
+  height: '100%',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  marginRight: "var(--ds-space-100, 0.5em)"
+});
+const AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
 const searchButtonStyles = css({
   marginRight: "var(--ds-space-075, 6px)"
 });
@@ -113,7 +126,19 @@ export const AqlSearchInput = ({
         width: 24
       }
     }, renderValidatorIcon(fieldProps.value, error, meta)),
-    elemAfterInput: jsx(LoadingButton, {
+    elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
+      content: formatMessage(searchInputMessages.helpTooltipText),
+      position: "bottom"
+    }, jsx("a", {
+      href: AQLSupportDocumentLink,
+      target: "_blank",
+      css: buttonBaseStyles
+    }, jsx(QuestionCircleIcon, {
+      label: "label",
+      primaryColor: `var(--ds-icon, ${N500})`,
+      size: "medium",
+      testId: "assets-datasource-modal-help"
+    }))), jsx(LoadingButton, {
       appearance: "primary",
       css: searchButtonStyles,
       iconBefore: jsx(SearchIcon, {
@@ -124,7 +149,7 @@ export const AqlSearchInput = ({
       spacing: "none",
       testId: "assets-datasource-modal--aql-search-button",
       type: "submit"
-    }),
+    })),
     placeholder: formatMessage(searchInputMessages.placeholder),
     testId: testId
   }))));

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

@@ -4,5 +4,10 @@ export const searchInputMessages = defineMessages({
     id: 'linkDataSource.assets.configModal.aqlSearchInput.placeholder',
     description: 'Display text for AQL search button',
     defaultMessage: 'Search via AQL'
+  },
+  helpTooltipText: {
+    id: 'linkDataSource.assets.configModal.aqlSearchInput.helpTooltipText',
+    description: 'Link to AQL Syntax help document',
+    defaultMessage: 'Syntax help'
   }
 });

package/dist/es2019/ui/assets-modal/search-container/object-schema-select/index.js

@@ -1,17 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useState } from 'react';
+
 import { jsx } from '@emotion/react';
 import debounce from 'debounce-promise';
 import { useIntl } from 'react-intl-next';
 import { Field } from '@atlaskit/form';
 import { AsyncSelect } from '@atlaskit/select';
+import { layers } from '@atlaskit/theme/constants';
 import { useObjectSchemas } from '../../../../hooks/useObjectSchemas';
 import { objectSchemaKey } from '../../../../types/assets/types';
 import { FieldContainer } from '../styled';
 import { objectSchemaSelectMessages } from './messages';
 import { objectSchemaToSelectOption } from './utils';
 export const SEARCH_DEBOUNCE_MS = 350;
+
+/**
+ * Rendering a `<Select>` in a `<Modal>` results in the select options getting cut off by the bottom of the modal and
+ * scrolling. This is a work-around for that, see https://atlassian.slack.com/archives/CFJ9DU39U/p1623179496484100
+ */
+export const selectInAModalStyleFixProps = {
+  styles: {
+    menuPortal: base => ({
+      ...base,
+      zIndex: layers.modal()
+    })
+  },
+  menuPortalTarget: document.body
+};
 export const AssetsObjectSchemaSelect = ({
   value,
   workspaceId,
@@ -24,7 +39,6 @@ export const AssetsObjectSchemaSelect = ({
     fetchObjectSchemas,
     objectSchemasLoading
   } = useObjectSchemas(workspaceId);
-  const [defaultOptions, setDefaultOptions] = useState(undefined);
   const selectedObjectSchema = value ? objectSchemaToSelectOption(value) : undefined;
   const loadOptions = async inputValue => {
     const objectSchemas = await fetchObjectSchemas(inputValue);
@@ -51,15 +65,11 @@ export const AssetsObjectSchemaSelect = ({
   }) => jsx(AsyncSelect, _extends({
     classNamePrefix: classNamePrefix,
     isLoading: objectSchemasLoading,
-    defaultOptions: defaultOptions || [],
+    defaultOptions: true // setting to true causes the loadOptions to be called on mount
+    ,
     isSearchable: true,
     loadOptions: debouncedLoadOptions,
     placeholder: formatMessage(objectSchemaSelectMessages.placeholder),
-    onChange: newOption => newOption && onChange(newOption),
-    onFocus: () => {
-      if (!defaultOptions) {
-        loadOptions('').then(setDefaultOptions);
-      }
-    }
-  }, restFieldProps))));
+    onChange: newOption => newOption && onChange(newOption)
+  }, selectInAModalStyleFixProps, restFieldProps))));
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.33.0",
+	"version": "0.33.2",
 	"sideEffects": false
 }

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
-import { useCallback, useRef } from 'react';
+import { Fragment, useCallback, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
@@ -10,8 +10,11 @@ import { Field } from '@atlaskit/form';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
+import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
 import Spinner from '@atlaskit/spinner';
 import Textfield from '@atlaskit/textfield';
+import { N500 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
 import { useValidateAqlText } from '../../../../hooks/useValidateAqlText';
 import { aqlKey } from '../../../../types/assets/types';
 import { FieldContainer } from '../styled';
@@ -20,6 +23,16 @@ import { searchInputMessages } from './messages';
 /* Meta isn't exported in @atlaskit/form
 Taken from packages/design-system/form/src/field.tsx */
 
+var buttonBaseStyles = css({
+  display: 'flex',
+  height: '100%',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  marginRight: "var(--ds-space-100, 0.5em)"
+});
+var AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
 var searchButtonStyles = css({
   marginRight: "var(--ds-space-075, 6px)"
 });
@@ -135,7 +148,19 @@ export var AqlSearchInput = function AqlSearchInput(_ref) {
           width: 24
         }
       }, renderValidatorIcon(fieldProps.value, error, meta)),
-      elemAfterInput: jsx(LoadingButton, {
+      elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
+        content: formatMessage(searchInputMessages.helpTooltipText),
+        position: "bottom"
+      }, jsx("a", {
+        href: AQLSupportDocumentLink,
+        target: "_blank",
+        css: buttonBaseStyles
+      }, jsx(QuestionCircleIcon, {
+        label: "label",
+        primaryColor: "var(--ds-icon, ".concat(N500, ")"),
+        size: "medium",
+        testId: "assets-datasource-modal-help"
+      }))), jsx(LoadingButton, {
         appearance: "primary",
         css: searchButtonStyles,
         iconBefore: jsx(SearchIcon, {
@@ -146,7 +171,7 @@ export var AqlSearchInput = function AqlSearchInput(_ref) {
         spacing: "none",
         testId: "assets-datasource-modal--aql-search-button",
         type: "submit"
-      }),
+      })),
       placeholder: formatMessage(searchInputMessages.placeholder),
       testId: testId
     }));

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

@@ -4,5 +4,10 @@ export var searchInputMessages = defineMessages({
     id: 'linkDataSource.assets.configModal.aqlSearchInput.placeholder',
     description: 'Display text for AQL search button',
     defaultMessage: 'Search via AQL'
+  },
+  helpTooltipText: {
+    id: 'linkDataSource.assets.configModal.aqlSearchInput.helpTooltipText',
+    description: 'Link to AQL Syntax help document',
+    defaultMessage: 'Syntax help'
   }
 });

package/dist/esm/ui/assets-modal/search-container/object-schema-select/index.js

@@ -1,22 +1,40 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["onChange", "onFocus"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
-import { useState } from 'react';
+
 import { jsx } from '@emotion/react';
 import debounce from 'debounce-promise';
 import { useIntl } from 'react-intl-next';
 import { Field } from '@atlaskit/form';
 import { AsyncSelect } from '@atlaskit/select';
+import { layers } from '@atlaskit/theme/constants';
 import { useObjectSchemas } from '../../../../hooks/useObjectSchemas';
 import { objectSchemaKey } from '../../../../types/assets/types';
 import { FieldContainer } from '../styled';
 import { objectSchemaSelectMessages } from './messages';
 import { objectSchemaToSelectOption } from './utils';
 export var SEARCH_DEBOUNCE_MS = 350;
+
+/**
+ * Rendering a `<Select>` in a `<Modal>` results in the select options getting cut off by the bottom of the modal and
+ * scrolling. This is a work-around for that, see https://atlassian.slack.com/archives/CFJ9DU39U/p1623179496484100
+ */
+export var selectInAModalStyleFixProps = {
+  styles: {
+    menuPortal: function menuPortal(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        zIndex: layers.modal()
+      });
+    }
+  },
+  menuPortalTarget: document.body
+};
 export var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
   var value = _ref.value,
     workspaceId = _ref.workspaceId,
@@ -27,10 +45,6 @@ export var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
   var _useObjectSchemas = useObjectSchemas(workspaceId),
     fetchObjectSchemas = _useObjectSchemas.fetchObjectSchemas,
     objectSchemasLoading = _useObjectSchemas.objectSchemasLoading;
-  var _useState = useState(undefined),
-    _useState2 = _slicedToArray(_useState, 2),
-    defaultOptions = _useState2[0],
-    setDefaultOptions = _useState2[1];
   var selectedObjectSchema = value ? objectSchemaToSelectOption(value) : undefined;
   var loadOptions = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(inputValue) {
@@ -77,18 +91,14 @@ export var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref) {
     return jsx(AsyncSelect, _extends({
       classNamePrefix: classNamePrefix,
       isLoading: objectSchemasLoading,
-      defaultOptions: defaultOptions || [],
+      defaultOptions: true // setting to true causes the loadOptions to be called on mount
+      ,
       isSearchable: true,
       loadOptions: debouncedLoadOptions,
       placeholder: formatMessage(objectSchemaSelectMessages.placeholder),
       onChange: function onChange(newOption) {
         return newOption && _onChange(newOption);
-      },
-      onFocus: function onFocus() {
-        if (!defaultOptions) {
-          loadOptions('').then(setDefaultOptions);
-        }
       }
-    }, restFieldProps));
+    }, selectInAModalStyleFixProps, restFieldProps));
   }));
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.33.0",
+	"version": "0.33.2",
 	"sideEffects": false
 }

package/dist/types/ui/assets-modal/search-container/aql-search-input/messages.d.ts

@@ -4,4 +4,9 @@ export declare const searchInputMessages: {
         description: string;
         defaultMessage: string;
     };
+    helpTooltipText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/types/ui/assets-modal/search-container/object-schema-select/index.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { ObjectSchema } from '../../../../types/assets/types';
 type AssetsObjectSchemaSelectProps = {
@@ -6,5 +7,15 @@ type AssetsObjectSchemaSelectProps = {
     classNamePrefix?: string;
 };
 export declare const SEARCH_DEBOUNCE_MS = 350;
+/**
+ * Rendering a `<Select>` in a `<Modal>` results in the select options getting cut off by the bottom of the modal and
+ * scrolling. This is a work-around for that, see https://atlassian.slack.com/archives/CFJ9DU39U/p1623179496484100
+ */
+export declare const selectInAModalStyleFixProps: {
+    styles: {
+        menuPortal: (base: any) => any;
+    };
+    menuPortalTarget: HTMLElement;
+};
 export declare const AssetsObjectSchemaSelect: ({ value, workspaceId, classNamePrefix, }: AssetsObjectSchemaSelectProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/assets-modal/search-container/aql-search-input/messages.d.ts

@@ -4,4 +4,9 @@ export declare const searchInputMessages: {
         description: string;
         defaultMessage: string;
     };
+    helpTooltipText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/types-ts4.5/ui/assets-modal/search-container/object-schema-select/index.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { ObjectSchema } from '../../../../types/assets/types';
 type AssetsObjectSchemaSelectProps = {
@@ -6,5 +7,15 @@ type AssetsObjectSchemaSelectProps = {
     classNamePrefix?: string;
 };
 export declare const SEARCH_DEBOUNCE_MS = 350;
+/**
+ * Rendering a `<Select>` in a `<Modal>` results in the select options getting cut off by the bottom of the modal and
+ * scrolling. This is a work-around for that, see https://atlassian.slack.com/archives/CFJ9DU39U/p1623179496484100
+ */
+export declare const selectInAModalStyleFixProps: {
+    styles: {
+        menuPortal: (base: any) => any;
+    };
+    menuPortalTarget: HTMLElement;
+};
 export declare const AssetsObjectSchemaSelect: ({ value, workspaceId, classNamePrefix, }: AssetsObjectSchemaSelectProps) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -56,6 +56,7 @@
     "@atlaskit/textfield": "5.6.3",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tooltip": "^17.8.0",
     "@atlassianlabs/jql-editor": "^2.0.1",
     "@atlassianlabs/jql-editor-autocomplete-rest": "^1.1.2",
     "@babel/runtime": "^7.0.0",