@atlaskit/link-picker 1.5.0 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/link-picker
 
+## 1.6.1
+
+### Patch Changes
+
+- [`e3f36b94557`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3f36b94557) - Inlines svg assets directly into the UI
+
+## 1.6.0
+
+### Minor Changes
+
+- [`c9c0a119587`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c9c0a119587) - [ux] EDM-3881: add onContentRezise prop to allow callbacks after contents changed in items, plugin, tabs, etc.
+
+## 1.5.1
+
+### Patch Changes
+
+- [`99dba1b6364`](https://bitbucket.org/atlassian/atlassian-frontend/commits/99dba1b6364) - [ux] Fix the tab margin in Link Picker
+
 ## 1.5.0
 
 ### Minor Changes

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

@@ -21,6 +21,16 @@ var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
+var _button = _interopRequireWildcard(require("@atlaskit/button"));
+
+var _form = require("@atlaskit/form");
+
+var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+
+var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
+
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+
 var _messages = require("./messages");
 
 var _textInput = _interopRequireDefault(require("./text-input"));
@@ -35,17 +45,7 @@ var _browser = require("./browser");
 
 var _transformTimeStamp = require("./transformTimeStamp");
 
-var _announcer = _interopRequireDefault(require(".//announcer"));
-
-var _button = _interopRequireWildcard(require("@atlaskit/button"));
-
-var _form = require("@atlaskit/form");
-
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
-
-var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
-
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _announcer = _interopRequireDefault(require("./announcer"));
 
 var _linkSearchNoResults = _interopRequireDefault(require("./link-search-no-results"));
 
@@ -102,6 +102,7 @@ function reducer(state, payload) {
 function LinkPicker(_ref) {
   var onSubmit = _ref.onSubmit,
       onCancel = _ref.onCancel,
+      onContentResize = _ref.onContentResize,
       plugins = _ref.plugins,
       initUrl = _ref.url,
       initDisplayText = _ref.displayText;
@@ -129,6 +130,11 @@ function LinkPicker(_ref) {
       isActivePlugin = _usePlugins.isActivePlugin,
       tabs = _usePlugins.tabs;
 
+  (0, _react.useLayoutEffect)(function () {
+    if (onContentResize) {
+      onContentResize();
+    }
+  }, [onContentResize, items, isLoading, isActivePlugin, tabs]);
   var handleChangeUrl = (0, _react.useCallback)(function (url) {
     dispatch({
       url: url
@@ -297,7 +303,9 @@ function LinkPicker(_ref) {
     onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
-  }), tabs.length > 0 && (0, _react2.jsx)(_tabs.default, {
+  }), tabs.length > 0 && (0, _react2.jsx)("div", {
+    css: _styled.tabsWrapperStyles
+  }, (0, _react2.jsx)(_tabs.default, {
     id: testIds.tabList,
     testId: testIds.tabList,
     onChange: function onChange(activeTab) {
@@ -313,7 +321,7 @@ function LinkPicker(_ref) {
       key: tab.tabTitle,
       testId: testIds.tabItem
     }, tab.tabTitle);
-  }))), !!items.length && (0, _react2.jsx)("div", {
+  })))), !!items.length && (0, _react2.jsx)("div", {
     css: _styled.listTitleStyles,
     id: testIds.resultListTitle,
     "data-testid": testIds.resultListTitle

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.rootContainerStylesForLoader = exports.rootContainerStyles = exports.listTitleStyles = void 0;
+exports.tabsWrapperStyles = exports.searchIconStyles = exports.rootContainerStylesForLoader = exports.rootContainerStyles = exports.listTitleStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,7 +19,7 @@ var _theme = require("@atlaskit/theme");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var LINK_PICKER_WIDTH_IN_PX = 342;
 var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
@@ -30,4 +30,6 @@ 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)(_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;
+exports.listTitleStyles = listTitleStyles;
+var tabsWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: -", "px;\n  margin-right: -", "px;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)());
+exports.tabsWrapperStyles = tabsWrapperStyles;

package/dist/cjs/version.json

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

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

@@ -1,22 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { useCallback, useReducer } from 'react';
+import { useCallback, useLayoutEffect, useReducer } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import { FormFooter } from '@atlaskit/form';
+import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
+import Tabs, { Tab, TabList } from '@atlaskit/tabs';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { messages } from './messages';
 import PanelTextInput from './text-input';
 import LinkSearchList from './link-search-list';
 import { normalizeUrl, isSafeUrl } from './url';
-import { rootContainerStyles, searchIconStyles, listTitleStyles } from './styled';
+import { rootContainerStyles, searchIconStyles, listTitleStyles, tabsWrapperStyles } from './styled';
 import { browser } from './browser';
 import { transformTimeStamp } from './transformTimeStamp';
-import Announcer from './/announcer';
-import Button, { ButtonGroup } from '@atlaskit/button';
-import { FormFooter } from '@atlaskit/form';
-import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
-import Tabs, { Tab, TabList } from '@atlaskit/tabs';
-import VisuallyHidden from '@atlaskit/visually-hidden';
+import Announcer from './announcer';
 import LinkSearchNoResults from './link-search-no-results';
 import { usePlugins } from '../../services/use-plugins';
 export const RECENT_SEARCH_LIST_SIZE = 5;
@@ -63,6 +63,7 @@ function reducer(state, payload) {
 function LinkPicker({
   onSubmit,
   onCancel,
+  onContentResize,
   plugins,
   url: initUrl,
   displayText: initDisplayText
@@ -87,6 +88,11 @@ function LinkPicker({
     isActivePlugin,
     tabs
   } = usePlugins(state, plugins);
+  useLayoutEffect(() => {
+    if (onContentResize) {
+      onContentResize();
+    }
+  }, [onContentResize, items, isLoading, isActivePlugin, tabs]);
   const handleChangeUrl = useCallback(url => {
     dispatch({
       url
@@ -256,7 +262,9 @@ function LinkPicker({
     onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
-  }), tabs.length > 0 && jsx(Tabs, {
+  }), tabs.length > 0 && jsx("div", {
+    css: tabsWrapperStyles
+  }, jsx(Tabs, {
     id: testIds.tabList,
     testId: testIds.tabList,
     onChange: activeTab => dispatch({
@@ -268,7 +276,7 @@ function LinkPicker({
   }, jsx(TabList, null, tabs.map(tab => jsx(Tab, {
     key: tab.tabTitle,
     testId: testIds.tabItem
-  }, tab.tabTitle)))), !!items.length && jsx("div", {
+  }, tab.tabTitle))))), !!items.length && jsx("div", {
     css: listTitleStyles,
     id: testIds.resultListTitle,
     "data-testid": testIds.resultListTitle

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

@@ -29,4 +29,8 @@ export const listTitleStyles = css`
   ${typography.h100()}
   text-transform: uppercase;
   margin-bottom: ${gridSize() / 2}px;
+`;
+export const tabsWrapperStyles = css`
+  margin-left: -${gridSize()}px;
+  margin-right: -${gridSize()}px;
 `;

package/dist/es2019/version.json

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

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

@@ -7,22 +7,22 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 { useCallback, useReducer } from 'react';
+import { useCallback, useLayoutEffect, useReducer } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import { FormFooter } from '@atlaskit/form';
+import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
+import Tabs, { Tab, TabList } from '@atlaskit/tabs';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { messages } from './messages';
 import PanelTextInput from './text-input';
 import LinkSearchList from './link-search-list';
 import { normalizeUrl, isSafeUrl } from './url';
-import { rootContainerStyles, searchIconStyles, listTitleStyles } from './styled';
+import { rootContainerStyles, searchIconStyles, listTitleStyles, tabsWrapperStyles } from './styled';
 import { browser } from './browser';
 import { transformTimeStamp } from './transformTimeStamp';
-import Announcer from './/announcer';
-import Button, { ButtonGroup } from '@atlaskit/button';
-import { FormFooter } from '@atlaskit/form';
-import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
-import Tabs, { Tab, TabList } from '@atlaskit/tabs';
-import VisuallyHidden from '@atlaskit/visually-hidden';
+import Announcer from './announcer';
 import LinkSearchNoResults from './link-search-no-results';
 import { usePlugins } from '../../services/use-plugins';
 export var RECENT_SEARCH_LIST_SIZE = 5;
@@ -66,6 +66,7 @@ function reducer(state, payload) {
 function LinkPicker(_ref) {
   var onSubmit = _ref.onSubmit,
       onCancel = _ref.onCancel,
+      onContentResize = _ref.onContentResize,
       plugins = _ref.plugins,
       initUrl = _ref.url,
       initDisplayText = _ref.displayText;
@@ -93,6 +94,11 @@ function LinkPicker(_ref) {
       isActivePlugin = _usePlugins.isActivePlugin,
       tabs = _usePlugins.tabs;
 
+  useLayoutEffect(function () {
+    if (onContentResize) {
+      onContentResize();
+    }
+  }, [onContentResize, items, isLoading, isActivePlugin, tabs]);
   var handleChangeUrl = useCallback(function (url) {
     dispatch({
       url: url
@@ -261,7 +267,9 @@ function LinkPicker(_ref) {
     onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
-  }), tabs.length > 0 && jsx(Tabs, {
+  }), tabs.length > 0 && jsx("div", {
+    css: tabsWrapperStyles
+  }, jsx(Tabs, {
     id: testIds.tabList,
     testId: testIds.tabList,
     onChange: function onChange(activeTab) {
@@ -277,7 +285,7 @@ function LinkPicker(_ref) {
       key: tab.tabTitle,
       testId: testIds.tabItem
     }, tab.tabTitle);
-  }))), !!items.length && jsx("div", {
+  })))), !!items.length && jsx("div", {
     css: listTitleStyles,
     id: testIds.resultListTitle,
     "data-testid": testIds.resultListTitle

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
@@ -14,4 +14,5 @@ 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 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);
+export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);
+export var tabsWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: -", "px;\n  margin-right: -", "px;\n"])), gridSize(), gridSize());

package/dist/esm/version.json

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

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

@@ -44,6 +44,8 @@ export interface LinkPickerProps {
     onSubmit: (arg: OnSubmitParameter) => void;
     /** Callback to fire when the cancel button is clicked. */
     onCancel: () => void;
+    /** Callback to fire when content is changed inside the link picker e.g. items, when loading, tabs */
+    onContentResize?: () => void;
     /** The url of the linked resource for editing. */
     url?: string;
     /** The desired text to be displayed alternatively to the title of the linked resource for editing. */
@@ -59,5 +61,5 @@ export interface PickerState {
     invalidUrl: boolean;
     activeTab: number;
 }
-declare function LinkPicker({ onSubmit, onCancel, plugins, url: initUrl, displayText: initDisplayText, }: LinkPickerProps): jsx.JSX.Element;
+declare function LinkPicker({ onSubmit, onCancel, onContentResize, plugins, url: initUrl, displayText: initDisplayText, }: LinkPickerProps): jsx.JSX.Element;
 export default LinkPicker;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -55,13 +55,14 @@
     "@atlaskit/activity-provider": "^2.3.2",
     "@atlaskit/docs": "*",
     "@atlaskit/link-test-helpers": "^1.3.0",
-    "@atlaskit/popup": "^1.3.5",
+    "@atlaskit/popup": "^1.4.0",
     "@atlaskit/ssr": "*",
+    "@atlaskit/toggle": "^12.4.0",
     "@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": "^15.0.0",
-    "@atlassian/link-picker-plugins": "^2.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^16.0.0",
+    "@atlassian/link-picker-plugins": "^3.0.0",
     "@atlassian/search-provider": "^2.3.0",
     "@testing-library/dom": "^7.7.3",
     "@testing-library/jest-dom": "^4.1.0",

package/report.api.md

@@ -1,26 +1,26 @@
-## API Report File for "@atlaskit/link-picker"
+## API Report File for "@atlaskit/link-picker".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
 
 import { MessageDescriptor } from 'react-intl-next';
 import { default as React_2 } from 'react';
-import { WithIntlProps } from 'react-intl-next';
-import { WrappedComponentProps } from 'react-intl-next';
 
 export declare type LinkInputType = 'manual' | 'typeAhead';
 
-export declare const LinkPicker: React_2.FC<
-  WithIntlProps<WrappedComponentProps<'intl'> & LinkPickerProps>
-> & {
-  WrappedComponent: React_2.ComponentType<
-    WrappedComponentProps<'intl'> & LinkPickerProps
-  >;
-};
+export declare const LinkPicker: React_2.MemoExoticComponent<(
+  props: LinkPickerProps,
+) => JSX.Element>;
 
 export declare interface LinkPickerPlugin {
+  /** Uniquely identify the tab */
+  tabKey?: string;
+  /** Human-readable label for the plugin */
+  tabTitle?: string;
   resolve: (
     state: LinkPickerState,
   ) => Promise<ResolveResult> | AsyncGenerator<ResolveResult, ResolveResult>;
@@ -31,6 +31,8 @@ export declare interface LinkPickerProps {
   onSubmit: (arg: OnSubmitParameter) => void;
   /** Callback to fire when the cancel button is clicked. */
   onCancel: () => void;
+  /** Callback to fire when content is changed inside the link picker e.g. items, when loading, tabs */
+  onContentResize?: () => void;
   /** The url of the linked resource for editing. */
   url?: string;
   /** The desired text to be displayed alternatively to the title of the linked resource for editing. */