@atlaskit/link-datasource 1.1.2 → 1.1.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.1.3
+
+### Patch Changes
+
+- [`96c9b7127b1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/96c9b7127b1) - Do not load more then 200 fields in dropdown, instead show message explaining limitation and how to move forward
+
 ## 1.1.2
 
 ### Patch Changes

package/dist/cjs/analytics/constants.js

@@ -8,6 +8,6 @@ var EVENT_CHANNEL = 'media';
 exports.EVENT_CHANNEL = EVENT_CHANNEL;
 var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.1.2"
+  packageVersion: "1.1.3"
 };
 exports.packageMetaData = packageMetaData;

package/dist/cjs/ui/assets-modal/modal/index.js

@@ -231,7 +231,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.1.2",
+  packageVersion: "1.1.3",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

package/dist/cjs/ui/issue-like-table/column-picker/concatenated-menu-list.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SELECT_ITEMS_MAXIMUM_THRESHOLD = exports.ConcatenatedMenuList = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _select = require("@atlaskit/select");
+var _messages = require("./messages");
+var _excluded = ["children"];
+/** @jsx jsx */
+var SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
+exports.SELECT_ITEMS_MAXIMUM_THRESHOLD = SELECT_ITEMS_MAXIMUM_THRESHOLD;
+var messageStyles = (0, _react.css)({
+  color: "var(--ds-text-subtle, #44546F)",
+  fontSize: "var(--ds-font-size-050, 11px)",
+  fontWeight: "var(--ds-font-weight-regular, 400)",
+  lineHeight: "var(--ds-font-lineHeight-100, 14px)"
+});
+var ConcatenatedMenuList = function ConcatenatedMenuList(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var shouldUseDefaultMenuList = !children || !Array.isArray(children) || children.length <= SELECT_ITEMS_MAXIMUM_THRESHOLD;
+  if (shouldUseDefaultMenuList) {
+    return (0, _react.jsx)(_select.components.MenuList, props, children);
+  }
+  var optionStyle = {
+    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-200, 16px)"),
+    height: 'auto'
+  };
+  var maximumLimitReachedMessage = (0, _react.jsx)("div", {
+    css: messageStyles,
+    style: optionStyle
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({
+    tagName: 'div'
+  }, _messages.columnPickerMessages.maximumItemsShownLine1)), (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({
+    tagName: 'div'
+  }, _messages.columnPickerMessages.maximumItemsShownLine2)));
+  return (0, _react.jsx)(_select.components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
+};
+exports.ConcatenatedMenuList = ConcatenatedMenuList;

package/dist/cjs/ui/issue-like-table/column-picker/index.js

@@ -16,6 +16,7 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 var _board = _interopRequireDefault(require("@atlaskit/icon/glyph/board"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _select = require("@atlaskit/select");
+var _concatenatedMenuList = require("./concatenated-menu-list");
 var _messages = require("./messages");
 var _excluded = ["isOpen"];
 /** @jsx jsx */
@@ -105,8 +106,12 @@ var ColumnPicker = function ColumnPicker(_ref) {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
     components: {
-      Option: _select.CheckboxOption
+      Option: _select.CheckboxOption,
+      MenuList: _concatenatedMenuList.ConcatenatedMenuList
     },
+    filterOption: (0, _select.createFilter)({
+      ignoreAccents: false
+    }),
     options: allOptions,
     value: selectedOptions,
     onOpen: handleOpen,

package/dist/cjs/ui/issue-like-table/column-picker/messages.js

@@ -6,6 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.columnPickerMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var columnPickerMessages = (0, _reactIntlNext.defineMessages)({
+  maximumItemsShownLine1: {
+    id: 'linkDataSource.column-picker.no-all-items-shown-message.line-1',
+    description: 'First line of the messages shown at the bottom of column dropdown options explaining why not all available options are shown and how to get to them.',
+    defaultMessage: 'Your search returned too many results.'
+  },
+  maximumItemsShownLine2: {
+    id: 'linkDataSource.column-picker.no-all-items-shown-message.line-2',
+    description: 'Second line of the messages shown at the bottom of column dropdown options explaining why not all available options are shown and how to get to them.',
+    defaultMessage: 'Try again with more specific keywords.'
+  },
   search: {
     id: 'linkDataSource.column-picker.search',
     description: 'Search bar message to look for more fields',

package/dist/es2019/analytics/constants.js

@@ -1,5 +1,5 @@
 export const EVENT_CHANNEL = 'media';
 export const packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.1.2"
+  packageVersion: "1.1.3"
 };

package/dist/es2019/ui/assets-modal/modal/index.js

@@ -205,7 +205,7 @@ const analyticsContextAttributes = {
 };
 const analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.1.2",
+  packageVersion: "1.1.3",
   source: 'datasourceConfigModal'
 };
 const contextData = {

package/dist/es2019/ui/issue-like-table/column-picker/concatenated-menu-list.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { components } from '@atlaskit/select';
+import { columnPickerMessages } from './messages';
+export const SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
+const messageStyles = css({
+  color: "var(--ds-text-subtle, #44546F)",
+  fontSize: "var(--ds-font-size-050, 11px)",
+  fontWeight: "var(--ds-font-weight-regular, 400)",
+  lineHeight: "var(--ds-font-lineHeight-100, 14px)"
+});
+export const ConcatenatedMenuList = ({
+  children,
+  ...props
+}) => {
+  const shouldUseDefaultMenuList = !children || !Array.isArray(children) || children.length <= SELECT_ITEMS_MAXIMUM_THRESHOLD;
+  if (shouldUseDefaultMenuList) {
+    return jsx(components.MenuList, props, children);
+  }
+  const optionStyle = {
+    padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-200, 16px)"}`,
+    height: 'auto'
+  };
+  const maximumLimitReachedMessage = jsx("div", {
+    css: messageStyles,
+    style: optionStyle
+  }, jsx(FormattedMessage, _extends({
+    tagName: 'div'
+  }, columnPickerMessages.maximumItemsShownLine1)), jsx(FormattedMessage, _extends({
+    tagName: 'div'
+  }, columnPickerMessages.maximumItemsShownLine2)));
+  return jsx(components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
+};

package/dist/es2019/ui/issue-like-table/column-picker/index.js

@@ -6,7 +6,8 @@ import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import BoardIcon from '@atlaskit/icon/glyph/board';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
-import { CheckboxOption, PopupSelect } from '@atlaskit/select';
+import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
+import { ConcatenatedMenuList } from './concatenated-menu-list';
 import { columnPickerMessages } from './messages';
 export const ColumnPicker = ({
   columns,
@@ -80,8 +81,12 @@ export const ColumnPicker = ({
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
     components: {
-      Option: CheckboxOption
+      Option: CheckboxOption,
+      MenuList: ConcatenatedMenuList
     },
+    filterOption: createFilter({
+      ignoreAccents: false
+    }),
     options: allOptions,
     value: selectedOptions,
     onOpen: handleOpen,

package/dist/es2019/ui/issue-like-table/column-picker/messages.js

@@ -1,5 +1,15 @@
 import { defineMessages } from 'react-intl-next';
 export const columnPickerMessages = defineMessages({
+  maximumItemsShownLine1: {
+    id: 'linkDataSource.column-picker.no-all-items-shown-message.line-1',
+    description: 'First line of the messages shown at the bottom of column dropdown options explaining why not all available options are shown and how to get to them.',
+    defaultMessage: 'Your search returned too many results.'
+  },
+  maximumItemsShownLine2: {
+    id: 'linkDataSource.column-picker.no-all-items-shown-message.line-2',
+    description: 'Second line of the messages shown at the bottom of column dropdown options explaining why not all available options are shown and how to get to them.',
+    defaultMessage: 'Try again with more specific keywords.'
+  },
   search: {
     id: 'linkDataSource.column-picker.search',
     description: 'Search bar message to look for more fields',

package/dist/esm/analytics/constants.js

@@ -1,5 +1,5 @@
 export var EVENT_CHANNEL = 'media';
 export var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.1.2"
+  packageVersion: "1.1.3"
 };

package/dist/esm/ui/assets-modal/modal/index.js

@@ -222,7 +222,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.1.2",
+  packageVersion: "1.1.3",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

package/dist/esm/ui/issue-like-table/column-picker/concatenated-menu-list.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { components } from '@atlaskit/select';
+import { columnPickerMessages } from './messages';
+export var SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
+var messageStyles = css({
+  color: "var(--ds-text-subtle, #44546F)",
+  fontSize: "var(--ds-font-size-050, 11px)",
+  fontWeight: "var(--ds-font-weight-regular, 400)",
+  lineHeight: "var(--ds-font-lineHeight-100, 14px)"
+});
+export var ConcatenatedMenuList = function ConcatenatedMenuList(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var shouldUseDefaultMenuList = !children || !Array.isArray(children) || children.length <= SELECT_ITEMS_MAXIMUM_THRESHOLD;
+  if (shouldUseDefaultMenuList) {
+    return jsx(components.MenuList, props, children);
+  }
+  var optionStyle = {
+    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-200, 16px)"),
+    height: 'auto'
+  };
+  var maximumLimitReachedMessage = jsx("div", {
+    css: messageStyles,
+    style: optionStyle
+  }, jsx(FormattedMessage, _extends({
+    tagName: 'div'
+  }, columnPickerMessages.maximumItemsShownLine1)), jsx(FormattedMessage, _extends({
+    tagName: 'div'
+  }, columnPickerMessages.maximumItemsShownLine2)));
+  return jsx(components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
+};

package/dist/esm/ui/issue-like-table/column-picker/index.js

@@ -10,7 +10,8 @@ import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import BoardIcon from '@atlaskit/icon/glyph/board';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
-import { CheckboxOption, PopupSelect } from '@atlaskit/select';
+import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
+import { ConcatenatedMenuList } from './concatenated-menu-list';
 import { columnPickerMessages } from './messages';
 export var ColumnPicker = function ColumnPicker(_ref) {
   var columns = _ref.columns,
@@ -98,8 +99,12 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
     components: {
-      Option: CheckboxOption
+      Option: CheckboxOption,
+      MenuList: ConcatenatedMenuList
     },
+    filterOption: createFilter({
+      ignoreAccents: false
+    }),
     options: allOptions,
     value: selectedOptions,
     onOpen: handleOpen,

package/dist/esm/ui/issue-like-table/column-picker/messages.js

@@ -1,5 +1,15 @@
 import { defineMessages } from 'react-intl-next';
 export var columnPickerMessages = defineMessages({
+  maximumItemsShownLine1: {
+    id: 'linkDataSource.column-picker.no-all-items-shown-message.line-1',
+    description: 'First line of the messages shown at the bottom of column dropdown options explaining why not all available options are shown and how to get to them.',
+    defaultMessage: 'Your search returned too many results.'
+  },
+  maximumItemsShownLine2: {
+    id: 'linkDataSource.column-picker.no-all-items-shown-message.line-2',
+    description: 'Second line of the messages shown at the bottom of column dropdown options explaining why not all available options are shown and how to get to them.',
+    defaultMessage: 'Try again with more specific keywords.'
+  },
   search: {
     id: 'linkDataSource.column-picker.search',
     description: 'Search bar message to look for more fields',

package/dist/types/ui/issue-like-table/column-picker/concatenated-menu-list.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { MenuListComponentProps, OptionType } from '@atlaskit/select';
+export declare const SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
+export declare const ConcatenatedMenuList: ({ children, ...props }: MenuListComponentProps<OptionType, true>) => jsx.JSX.Element;

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

@@ -1,4 +1,14 @@
 export declare const columnPickerMessages: {
+    maximumItemsShownLine1: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    maximumItemsShownLine2: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     search: {
         id: string;
         description: string;

package/dist/types-ts4.5/ui/issue-like-table/column-picker/concatenated-menu-list.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { MenuListComponentProps, OptionType } from '@atlaskit/select';
+export declare const SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
+export declare const ConcatenatedMenuList: ({ children, ...props }: MenuListComponentProps<OptionType, true>) => jsx.JSX.Element;

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

@@ -1,4 +1,14 @@
 export declare const columnPickerMessages: {
+    maximumItemsShownLine1: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    maximumItemsShownLine2: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     search: {
         id: string;
         description: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -79,6 +79,7 @@
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@faker-js/faker": "^7.5.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -87,6 +88,7 @@
     "jest-fetch-mock": "^3.0.3",
     "json-ld-types": "3.8.0",
     "typescript": "~4.9.5",
+    "uuid": "^3.1.0",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {