@atlaskit/link-picker 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-picker
 
+## 1.3.0
+
+### Minor Changes
+
+- [`0ddad39a369`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ddad39a369) - [ux] Lazy load the link-picker instead. The lazily loaded picker is now the default that's exported
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/cjs/ui/index.js

@@ -1,25 +1,29 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ComposedLinkPicker = void 0;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
+var _reactLooselyLazy = require("react-loosely-lazy");
+
 var _version = require("../version.json");
 
 var _errorBoundaryFallback = require("./error-boundary-fallback");
 
-var _linkPicker = require("./link-picker");
+var _loaderFallback = require("./loader-fallback");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var COMPONENT_NAME = 'LinkPicker';
 var ANALYTICS_CHANNEL = 'media';
@@ -28,11 +32,18 @@ var PACKAGE_DATA = {
   packageVersion: _version.version,
   componentName: COMPONENT_NAME
 };
+var LazyLinkPicker = (0, _reactLooselyLazy.lazyForPaint)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./link-picker'));
+  });
+});
 var ComposedLinkPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsErrorBoundary, {
     channel: ANALYTICS_CHANNEL,
     data: PACKAGE_DATA,
     ErrorComponent: _errorBoundaryFallback.ErrorBoundaryFallback
-  }, /*#__PURE__*/_react.default.createElement(_linkPicker.LinkPickerWithIntl, props));
+  }, /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
+    fallback: _loaderFallback.LoaderFallback
+  }, /*#__PURE__*/_react.default.createElement(LazyLinkPicker, props)));
 });
 exports.ComposedLinkPicker = ComposedLinkPicker;

package/dist/cjs/ui/link-picker/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RECENT_SEARCH_LIST_SIZE = exports.LinkPickerWithIntl = void 0;
+exports.default = exports.RECENT_SEARCH_LIST_SIZE = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -602,5 +602,6 @@ function limit(items) {
   return items.slice(0, RECENT_SEARCH_LIST_SIZE);
 }
 
-var LinkPickerWithIntl = (0, _reactIntlNext.injectIntl)(LinkPicker);
-exports.LinkPickerWithIntl = LinkPickerWithIntl;
+var _default = (0, _reactIntlNext.injectIntl)(LinkPicker);
+
+exports.default = _default;

package/dist/cjs/ui/link-picker/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.searchIconStyles = exports.rootContainerStyles = exports.listTitleStyles = void 0;
+exports.searchIconStyles = exports.rootContainerStylesForLoader = exports.rootContainerStyles = exports.listTitleStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,13 +19,15 @@ var _theme = require("@atlaskit/theme");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var LINK_PICKER_WIDTH_IN_PX = 342;
 var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
 var rootContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  padding: ", "px;\n  box-sizing: border-box;\n  line-height: initial;\n  min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, (0, _constants.gridSize)() * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
 exports.rootContainerStyles = rootContainerStyles;
-var searchIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon', _colors.N500));
+var rootContainerStylesForLoader = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), rootContainerStyles);
+exports.rootContainerStylesForLoader = rootContainerStylesForLoader;
+var searchIconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon', _colors.N500));
 exports.searchIconStyles = searchIconStyles;
-var listTitleStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
+var listTitleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
 exports.listTitleStyles = listTitleStyles;

package/dist/cjs/ui/loader-fallback/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoaderFallback = void 0;
+
+var _react = require("@emotion/react");
+
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+var _styled = require("../link-picker/styled");
+
+/** @jsx jsx */
+var LoaderFallback = (0, _react.jsx)("div", {
+  css: _styled.rootContainerStylesForLoader,
+  "data-testid": "link-picker-root-loader-boundary-ui"
+}, (0, _react.jsx)(_spinner.default, {
+  testId: "link-picker.component-loading-indicator",
+  size: "medium"
+}));
+exports.LoaderFallback = LoaderFallback;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.2.1",
+	"version": "1.3.0",
 	"sideEffects": false
 }

package/dist/es2019/ui/index.js

@@ -1,8 +1,9 @@
 import React, { memo } from 'react';
 import { AnalyticsErrorBoundary } from '@atlaskit/analytics-next';
+import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
 import { name as packageName, version as packageVersion } from '../version.json';
 import { ErrorBoundaryFallback } from './error-boundary-fallback';
-import { LinkPickerWithIntl } from './link-picker';
+import { LoaderFallback } from './loader-fallback';
 const COMPONENT_NAME = 'LinkPicker';
 const ANALYTICS_CHANNEL = 'media';
 const PACKAGE_DATA = {
@@ -10,8 +11,13 @@ const PACKAGE_DATA = {
   packageVersion,
   componentName: COMPONENT_NAME
 };
+const LazyLinkPicker = lazyForPaint(() => import(
+/* webpackChunkName: "@atlaskit-internal_link-picker" */
+'./link-picker'));
 export const ComposedLinkPicker = /*#__PURE__*/memo(props => /*#__PURE__*/React.createElement(AnalyticsErrorBoundary, {
   channel: ANALYTICS_CHANNEL,
   data: PACKAGE_DATA,
   ErrorComponent: ErrorBoundaryFallback
-}, /*#__PURE__*/React.createElement(LinkPickerWithIntl, props)));
+}, /*#__PURE__*/React.createElement(LazySuspense, {
+  fallback: LoaderFallback
+}, /*#__PURE__*/React.createElement(LazyLinkPicker, props))));

package/dist/es2019/ui/link-picker/index.js

@@ -491,4 +491,4 @@ function limit(items) {
   return items.slice(0, RECENT_SEARCH_LIST_SIZE);
 }
 
-export const LinkPickerWithIntl = injectIntl(LinkPicker);
+export default injectIntl(LinkPicker);

package/dist/es2019/ui/link-picker/styled.js

@@ -14,6 +14,12 @@ export const rootContainerStyles = css`
   line-height: initial;
   min-height: ${LINK_PICKER_MIN_HEIGHT_IN_PX}px;
 `;
+export const rootContainerStylesForLoader = css`
+  ${rootContainerStyles}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
 export const searchIconStyles = css`
   margin-left: ${gridSize() / 2}px;
   color: ${token('color.icon', N500)};

package/dist/es2019/ui/loader-fallback/index.js

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import { rootContainerStylesForLoader } from '../link-picker/styled';
+export const LoaderFallback = jsx("div", {
+  css: rootContainerStylesForLoader,
+  "data-testid": "link-picker-root-loader-boundary-ui"
+}, jsx(Spinner, {
+  testId: "link-picker.component-loading-indicator",
+  size: "medium"
+}));

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.2.1",
+	"version": "1.3.0",
 	"sideEffects": false
 }

package/dist/esm/ui/index.js

@@ -1,8 +1,9 @@
 import React, { memo } from 'react';
 import { AnalyticsErrorBoundary } from '@atlaskit/analytics-next';
+import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
 import { name as packageName, version as packageVersion } from '../version.json';
 import { ErrorBoundaryFallback } from './error-boundary-fallback';
-import { LinkPickerWithIntl } from './link-picker';
+import { LoaderFallback } from './loader-fallback';
 var COMPONENT_NAME = 'LinkPicker';
 var ANALYTICS_CHANNEL = 'media';
 var PACKAGE_DATA = {
@@ -10,10 +11,17 @@ var PACKAGE_DATA = {
   packageVersion: packageVersion,
   componentName: COMPONENT_NAME
 };
+var LazyLinkPicker = lazyForPaint(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_link-picker" */
+  './link-picker');
+});
 export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
   return /*#__PURE__*/React.createElement(AnalyticsErrorBoundary, {
     channel: ANALYTICS_CHANNEL,
     data: PACKAGE_DATA,
     ErrorComponent: ErrorBoundaryFallback
-  }, /*#__PURE__*/React.createElement(LinkPickerWithIntl, props));
+  }, /*#__PURE__*/React.createElement(LazySuspense, {
+    fallback: LoaderFallback
+  }, /*#__PURE__*/React.createElement(LazyLinkPicker, props)));
 });

package/dist/esm/ui/link-picker/index.js

@@ -580,4 +580,4 @@ function limit(items) {
   return items.slice(0, RECENT_SEARCH_LIST_SIZE);
 }
 
-export var LinkPickerWithIntl = injectIntl(LinkPicker);
+export default injectIntl(LinkPicker);

package/dist/esm/ui/link-picker/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
@@ -12,5 +12,6 @@ import { gridSize } from '@atlaskit/theme/constants';
 var LINK_PICKER_WIDTH_IN_PX = 342;
 var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
 export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  padding: ", "px;\n  box-sizing: border-box;\n  line-height: initial;\n  min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, gridSize() * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
-export var searchIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
-export var listTitleStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);
+export var rootContainerStylesForLoader = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), rootContainerStyles);
+export var searchIconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
+export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);

package/dist/esm/ui/loader-fallback/index.js

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import { rootContainerStylesForLoader } from '../link-picker/styled';
+export var LoaderFallback = jsx("div", {
+  css: rootContainerStylesForLoader,
+  "data-testid": "link-picker-root-loader-boundary-ui"
+}, jsx(Spinner, {
+  testId: "link-picker.component-loading-indicator",
+  size: "medium"
+}));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.2.1",
+	"version": "1.3.0",
 	"sideEffects": false
 }

package/dist/types/ui/link-picker/index.d.ts

@@ -45,7 +45,7 @@ export interface State {
     displayText: string;
     invalidUrl: string | null;
 }
-export declare const LinkPickerWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
     WrappedComponent: import("react").ComponentType<WrappedComponentProps<"intl"> & LinkPickerProps>;
 };
-export {};
+export default _default;

package/dist/types/ui/link-picker/styled.d.ts

@@ -1,3 +1,4 @@
 export declare const rootContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const rootContainerStylesForLoader: import("@emotion/react").SerializedStyles;
 export declare const searchIconStyles: import("@emotion/react").SerializedStyles;
 export declare const listTitleStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/loader-fallback/index.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const LoaderFallback: jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -43,7 +43,8 @@
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
-    "linkify-it": "^2.0.3"
+    "linkify-it": "^2.0.3",
+    "react-loosely-lazy": "^0.5.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -52,16 +53,18 @@
   "devDependencies": {
     "@atlaskit/activity-provider": "^2.3.2",
     "@atlaskit/docs": "*",
-    "@atlaskit/link-test-helpers": "^1.1.0",
+    "@atlaskit/link-test-helpers": "^1.2.0",
     "@atlaskit/popup": "^1.3.5",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
-    "@atlassian/link-picker-atlassian-plugin": "^12.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^13.0.0",
     "@atlassian/search-provider": "^2.3.0",
     "@testing-library/dom": "^7.7.3",
+    "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^8.0.1",
+    "@testing-library/user-event": "10.4.0",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",
     "mockdate": "^3.0.2",