@atlaskit/link-datasource 0.32.0 → 0.33.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [`6ee82691c4e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6ee82691c4e) - [ux] Changed shimmer on empty state view to only occur when loading data initially
+
 ## 0.32.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/ui/datasource-table-view/datasourceTableView.js

@@ -72,7 +72,8 @@ var DatasourceTableView = function DatasourceTableView(_ref) {
     scrollableContainerHeight: 590
   }) : (0, _react2.jsx)(_emptyState.default, {
     testId: "datasource-table-view-skeleton",
-    isCompact: true
+    isCompact: true,
+    isLoading: !isDataReady || status === 'loading'
   }), (0, _react2.jsx)(_tableFooter.TableFooter, {
     issueCount: isDataReady ? totalCount : undefined,
     onRefresh: reset,

package/dist/cjs/ui/issue-like-table/empty-state/index.js

@@ -65,7 +65,7 @@ var cellStyles = (0, _react.css)({
     paddingRight: "var(--ds-space-100, 8px)"
   }
 });
-var renderItem = function renderItem(_ref, _ref2) {
+var renderItem = function renderItem(_ref, _ref2, isShimmering) {
   var key = _ref.key,
     width = _ref.width;
   var priority = _ref2.priority,
@@ -75,9 +75,11 @@ var renderItem = function renderItem(_ref, _ref2) {
   switch (key) {
     case 'assignee':
       return (0, _react.jsx)(_user.default, null, (0, _react.jsx)(_linkingCommon.Skeleton, {
-        width: width,
+        borderRadius: 8,
+        testId: "empty-state-skeleton",
         height: 13,
-        borderRadius: 8
+        isShimmering: isShimmering,
+        width: width
       }));
     case 'priority':
       return (0, _react.jsx)(_priority.default, {
@@ -90,27 +92,35 @@ var renderItem = function renderItem(_ref, _ref2) {
     case 'summary':
       return (0, _react.jsx)(_linkingCommon.Skeleton, {
         appearance: "blue",
-        width: summaryWidth,
         borderRadius: 10,
-        height: 13
+        testId: "empty-state-skeleton",
+        height: 13,
+        isShimmering: isShimmering,
+        width: summaryWidth
       });
     case 'status':
       return (0, _react.jsx)(_linkingCommon.Skeleton, {
         appearance: "blue",
-        width: statusWidth,
+        borderRadius: 3,
+        testId: "empty-state-skeleton",
         height: 16,
-        borderRadius: 3
+        isShimmering: isShimmering,
+        width: statusWidth
       });
     default:
       return (0, _react.jsx)(_linkingCommon.Skeleton, {
-        width: width,
+        borderRadius: 8,
+        testId: "empty-state-skeleton",
         height: 13,
-        borderRadius: 8
+        isShimmering: isShimmering,
+        width: width
       });
   }
 };
 var _default = function _default(_ref3) {
   var isCompact = _ref3.isCompact,
+    _ref3$isLoading = _ref3.isLoading,
+    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
     testId = _ref3.testId;
   var columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
   return (0, _react.jsx)("table", {
@@ -125,9 +135,11 @@ var _default = function _default(_ref3) {
       }
     }, (0, _react.jsx)(_linkingCommon.Skeleton, {
       appearance: "darkGray",
-      width: width,
+      borderRadius: 8,
+      testId: "empty-state-skeleton",
+      isShimmering: isLoading,
       height: 13,
-      borderRadius: 8
+      width: width
     }));
   }))), (0, _react.jsx)("tbody", {
     css: tableBodyStyles
@@ -138,7 +150,7 @@ var _default = function _default(_ref3) {
       return (0, _react.jsx)("td", {
         css: cellStyles,
         key: column.key
-      }, renderItem(column, row));
+      }, renderItem(column, row, isLoading));
     }));
   })));
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.32.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/ui/datasource-table-view/datasourceTableView.js

@@ -66,7 +66,8 @@ export const DatasourceTableView = ({
     scrollableContainerHeight: 590
   }) : jsx(EmptyState, {
     testId: "datasource-table-view-skeleton",
-    isCompact: true
+    isCompact: true,
+    isLoading: !isDataReady || status === 'loading'
   }), jsx(TableFooter, {
     issueCount: isDataReady ? totalCount : undefined,
     onRefresh: reset,

package/dist/es2019/ui/issue-like-table/empty-state/index.js

@@ -63,13 +63,15 @@ const renderItem = ({
   type,
   summaryWidth,
   statusWidth
-}) => {
+}, isShimmering) => {
   switch (key) {
     case 'assignee':
       return jsx(UserType, null, jsx(Skeleton, {
-        width: width,
+        borderRadius: 8,
+        testId: "empty-state-skeleton",
         height: 13,
-        borderRadius: 8
+        isShimmering: isShimmering,
+        width: width
       }));
     case 'priority':
       return jsx(Priority, {
@@ -82,27 +84,34 @@ const renderItem = ({
     case 'summary':
       return jsx(Skeleton, {
         appearance: "blue",
-        width: summaryWidth,
         borderRadius: 10,
-        height: 13
+        testId: "empty-state-skeleton",
+        height: 13,
+        isShimmering: isShimmering,
+        width: summaryWidth
       });
     case 'status':
       return jsx(Skeleton, {
         appearance: "blue",
-        width: statusWidth,
+        borderRadius: 3,
+        testId: "empty-state-skeleton",
         height: 16,
-        borderRadius: 3
+        isShimmering: isShimmering,
+        width: statusWidth
       });
     default:
       return jsx(Skeleton, {
-        width: width,
+        borderRadius: 8,
+        testId: "empty-state-skeleton",
         height: 13,
-        borderRadius: 8
+        isShimmering: isShimmering,
+        width: width
       });
   }
 };
 export default (({
   isCompact,
+  isLoading = false,
   testId
 }) => {
   const columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
@@ -118,9 +127,11 @@ export default (({
     }
   }, jsx(Skeleton, {
     appearance: "darkGray",
-    width: width,
+    borderRadius: 8,
+    testId: "empty-state-skeleton",
+    isShimmering: isLoading,
     height: 13,
-    borderRadius: 8
+    width: width
   }))))), jsx("tbody", {
     css: tableBodyStyles
   }, rows.map(row => jsx("tr", {
@@ -128,5 +139,5 @@ export default (({
   }, columnsToRender.map(column => jsx("td", {
     css: cellStyles,
     key: column.key
-  }, renderItem(column, row)))))));
+  }, renderItem(column, row, isLoading)))))));
 });

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.32.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/ui/datasource-table-view/datasourceTableView.js

@@ -64,7 +64,8 @@ export var DatasourceTableView = function DatasourceTableView(_ref) {
     scrollableContainerHeight: 590
   }) : jsx(EmptyState, {
     testId: "datasource-table-view-skeleton",
-    isCompact: true
+    isCompact: true,
+    isLoading: !isDataReady || status === 'loading'
   }), jsx(TableFooter, {
     issueCount: isDataReady ? totalCount : undefined,
     onRefresh: reset,

package/dist/esm/ui/issue-like-table/empty-state/index.js

@@ -57,7 +57,7 @@ var cellStyles = css({
     paddingRight: "var(--ds-space-100, 8px)"
   }
 });
-var renderItem = function renderItem(_ref, _ref2) {
+var renderItem = function renderItem(_ref, _ref2, isShimmering) {
   var key = _ref.key,
     width = _ref.width;
   var priority = _ref2.priority,
@@ -67,9 +67,11 @@ var renderItem = function renderItem(_ref, _ref2) {
   switch (key) {
     case 'assignee':
       return jsx(UserType, null, jsx(Skeleton, {
-        width: width,
+        borderRadius: 8,
+        testId: "empty-state-skeleton",
         height: 13,
-        borderRadius: 8
+        isShimmering: isShimmering,
+        width: width
       }));
     case 'priority':
       return jsx(Priority, {
@@ -82,27 +84,35 @@ var renderItem = function renderItem(_ref, _ref2) {
     case 'summary':
       return jsx(Skeleton, {
         appearance: "blue",
-        width: summaryWidth,
         borderRadius: 10,
-        height: 13
+        testId: "empty-state-skeleton",
+        height: 13,
+        isShimmering: isShimmering,
+        width: summaryWidth
       });
     case 'status':
       return jsx(Skeleton, {
         appearance: "blue",
-        width: statusWidth,
+        borderRadius: 3,
+        testId: "empty-state-skeleton",
         height: 16,
-        borderRadius: 3
+        isShimmering: isShimmering,
+        width: statusWidth
       });
     default:
       return jsx(Skeleton, {
-        width: width,
+        borderRadius: 8,
+        testId: "empty-state-skeleton",
         height: 13,
-        borderRadius: 8
+        isShimmering: isShimmering,
+        width: width
       });
   }
 };
 export default (function (_ref3) {
   var isCompact = _ref3.isCompact,
+    _ref3$isLoading = _ref3.isLoading,
+    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
     testId = _ref3.testId;
   var columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
   return jsx("table", {
@@ -117,9 +127,11 @@ export default (function (_ref3) {
       }
     }, jsx(Skeleton, {
       appearance: "darkGray",
-      width: width,
+      borderRadius: 8,
+      testId: "empty-state-skeleton",
+      isShimmering: isLoading,
       height: 13,
-      borderRadius: 8
+      width: width
     }));
   }))), jsx("tbody", {
     css: tableBodyStyles
@@ -130,7 +142,7 @@ export default (function (_ref3) {
       return jsx("td", {
         css: cellStyles,
         key: column.key
-      }, renderItem(column, row));
+      }, renderItem(column, row, isLoading));
     }));
   })));
 });

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.32.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/ui/issue-like-table/empty-state/index.d.ts

@@ -2,7 +2,8 @@
 import { jsx } from '@emotion/react';
 export interface Props {
     isCompact?: boolean;
+    isLoading?: boolean;
     testId?: string;
 }
-declare const _default: ({ isCompact, testId }: Props) => jsx.JSX.Element;
+declare const _default: ({ isCompact, isLoading, testId }: Props) => jsx.JSX.Element;
 export default _default;

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

@@ -13,4 +13,4 @@ export interface RowCellType {
     maxWidth?: number;
 }
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
-export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;
+export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;

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/dist/types-ts4.5/ui/issue-like-table/empty-state/index.d.ts

@@ -2,7 +2,8 @@
 import { jsx } from '@emotion/react';
 export interface Props {
     isCompact?: boolean;
+    isLoading?: boolean;
     testId?: string;
 }
-declare const _default: ({ isCompact, testId }: Props) => jsx.JSX.Element;
+declare const _default: ({ isCompact, isLoading, testId }: Props) => jsx.JSX.Element;
 export default _default;

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

@@ -13,4 +13,4 @@ export interface RowCellType {
     maxWidth?: number;
 }
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
-export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;
+export declare const EmptyState: ({ isCompact, isLoading, testId }: import("./empty-state").Props) => jsx.JSX.Element;

package/package.json

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