@atlaskit/link-datasource 0.33.0 → 0.33.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 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/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.1",
 	"sideEffects": false
 }

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.1",
 	"sideEffects": false
 }

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.1",
 	"sideEffects": false
 }

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/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.1",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"