@atlaskit/link-picker 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/link-picker
 
+## 0.9.0
+
+### Minor Changes
+
+- [`c1c010c8ada`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c1c010c8ada) - Remove required container param
+
+## 0.8.1
+
+### Patch Changes
+
+- [`eef8c2da75b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eef8c2da75b) - [ux] Remove link-picker background color as it conflicts with floatingToobar borders
+
+## 0.8.0
+
+### Minor Changes
+
+- [`1e371fd8d23`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1e371fd8d23) - Updates link picker to support array of plugins. Removes intl prop from LinkPickerProps type.
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/cjs/styles.js

@@ -26,7 +26,7 @@ var _theme = require("@atlaskit/theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 var LINK_PICKER_WIDTH_IN_PX = 342;
-var recentListStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  background: ", ";\n"])), LINK_PICKER_WIDTH_IN_PX, (0, _tokens.token)('elevation.surface.overlay', _colors.N0));
+var recentListStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX);
 exports.recentListStyles = recentListStyles;
 
 var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  width: 100%;\n  overflow: hidden;\n  line-height: initial;\n  box-sizing: border-box;\n"])), (0, _constants.gridSize)() * 2);

package/dist/cjs/ui/LinkSearchListItem.js

@@ -52,7 +52,7 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
   }, (0, _core.jsx)(ListItemIcon, {
     item: item,
     intl: intl
-  }), (0, _core.jsx)(_styles.ItemNameWrapper, null, (0, _core.jsx)(_styles.ListItemName, null, item.name), (0, _core.jsx)(_styles.ListItemContext, null, item.container, (0, _core.jsx)(ItemTimeStamp, {
+  }), (0, _core.jsx)(_styles.ItemNameWrapper, null, (0, _core.jsx)(_styles.ListItemName, null, item.name), (0, _core.jsx)(_styles.ListItemContext, null, item.container && (0, _core.jsx)(_react.Fragment, null, item.container, "\xA0 \u2022"), (0, _core.jsx)(ItemTimeStamp, {
     date: (0, _transformTimeStamp.transformTimeStamp)(intl, item.lastViewedDate, item.lastUpdatedDate)
   }))));
 };
@@ -68,7 +68,7 @@ var ItemTimeStamp = function ItemTimeStamp(props) {
     return null;
   }
 
-  return (0, _core.jsx)(_react.Fragment, null, "\xA0 \u2022", (0, _core.jsx)("span", {
+  return (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)("span", {
     className: "link-search-timestamp",
     "data-test-id": "link-search-timestamp"
   }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));

package/dist/cjs/ui/link-picker.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 = exports.LinkPicker = void 0;
+exports.RECENT_SEARCH_LIST_SIZE = exports.LinkPickerWithIntl = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -155,7 +155,8 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
             lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
             lastViewedDate = _items$selectedIndex.lastViewedDate;
         var date = (0, _transformTimeStamp.transformTimeStamp)(intl, lastViewedDate, lastUpdatedDate);
-        return "".concat(name, ", ").concat(container, ", ").concat(date === null || date === void 0 ? void 0 : date.pageAction, " ").concat(date === null || date === void 0 ? void 0 : date.dateString, " ").concat((date === null || date === void 0 ? void 0 : date.timeSince) || '');
+        var formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
+        return [name, container, formattedDate].filter(Boolean).join(', ');
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isUrlPopulatedWithSelectedItem", function () {
@@ -342,7 +343,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "getActivePlugin",
     value: function getActivePlugin() {
-      if (!this.props.plugins) {
+      if (!this.props.plugins || this.props.plugins.length === 0) {
         return null;
       }
 
@@ -561,8 +562,6 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
   return LinkPicker;
 }(_react.PureComponent);
 
-exports.LinkPicker = LinkPicker;
-
 function findIndex(array, predicate) {
   var index = -1;
   array.some(function (item, i) {

package/dist/cjs/version.json

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

package/dist/es2019/styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/core';
-import { N500, N0, B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
+import { N500, B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { relativeFontSizeToBase16 } from './utils'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -10,7 +10,6 @@ import { fontSizeSmall, fontSize, typography } from '@atlaskit/theme';
 const LINK_PICKER_WIDTH_IN_PX = 342;
 export const recentListStyles = css`
   width: ${LINK_PICKER_WIDTH_IN_PX}px;
-  background: ${token('elevation.surface.overlay', N0)};
 `;
 export const Container = styled.div`
   padding: ${gridSize() * 2}px;

package/dist/es2019/ui/LinkSearchListItem.js

@@ -35,7 +35,7 @@ const LinkSearchListItem = ({
   }, jsx(ListItemIcon, {
     item: item,
     intl: intl
-  }), jsx(ItemNameWrapper, null, jsx(ListItemName, null, item.name), jsx(ListItemContext, null, item.container, jsx(ItemTimeStamp, {
+  }), jsx(ItemNameWrapper, null, jsx(ListItemName, null, item.name), jsx(ListItemContext, null, item.container && jsx(Fragment, null, item.container, "\xA0 \u2022"), jsx(ItemTimeStamp, {
     date: transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate)
   }))));
 };
@@ -51,7 +51,7 @@ const ItemTimeStamp = props => {
     return null;
   }
 
-  return jsx(Fragment, null, "\xA0 \u2022", jsx("span", {
+  return jsx(Fragment, null, jsx("span", {
     className: "link-search-timestamp",
     "data-test-id": "link-search-timestamp"
   }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));

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

@@ -17,7 +17,8 @@ import { FormFooter } from '@atlaskit/form';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 export const RECENT_SEARCH_LIST_SIZE = 5;
-export class LinkPicker extends PureComponent {
+
+class LinkPicker extends PureComponent {
   constructor(props) {
     super(props);
 
@@ -83,7 +84,8 @@ export class LinkPicker extends PureComponent {
           lastViewedDate
         } = items[selectedIndex];
         const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
-        return `${name}, ${container}, ${date === null || date === void 0 ? void 0 : date.pageAction} ${date === null || date === void 0 ? void 0 : date.dateString} ${(date === null || date === void 0 ? void 0 : date.timeSince) || ''}`;
+        const formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
+        return [name, container, formattedDate].filter(Boolean).join(', ');
       }
     });
 
@@ -288,7 +290,7 @@ export class LinkPicker extends PureComponent {
   }
 
   getActivePlugin() {
-    if (!this.props.plugins) {
+    if (!this.props.plugins || this.props.plugins.length === 0) {
       return null;
     }
 

package/dist/es2019/version.json

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

package/dist/esm/styles.js

@@ -5,14 +5,14 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import styled from 'styled-components';
 import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/core';
-import { N500, N0, B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
+import { N500, B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { relativeFontSizeToBase16 } from './utils'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { fontSizeSmall, fontSize, typography } from '@atlaskit/theme';
 var LINK_PICKER_WIDTH_IN_PX = 342;
-export var recentListStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  background: ", ";\n"])), LINK_PICKER_WIDTH_IN_PX, token('elevation.surface.overlay', N0));
+export var recentListStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX);
 export var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  width: 100%;\n  overflow: hidden;\n  line-height: initial;\n  box-sizing: border-box;\n"])), gridSize() * 2);
 export var ClearText = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin-right: ", "px;\n  color: ", ";\n  background: transparent;\n  border: none;\n  cursor: pointer;\n"])), gridSize() / 2, token('color.icon.subtle', N500));
 export var FieldWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n"])), gridSize() * 2);

package/dist/esm/ui/LinkSearchListItem.js

@@ -41,7 +41,7 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
   }, jsx(ListItemIcon, {
     item: item,
     intl: intl
-  }), jsx(ItemNameWrapper, null, jsx(ListItemName, null, item.name), jsx(ListItemContext, null, item.container, jsx(ItemTimeStamp, {
+  }), jsx(ItemNameWrapper, null, jsx(ListItemName, null, item.name), jsx(ListItemContext, null, item.container && jsx(Fragment, null, item.container, "\xA0 \u2022"), jsx(ItemTimeStamp, {
     date: transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate)
   }))));
 };
@@ -55,7 +55,7 @@ var ItemTimeStamp = function ItemTimeStamp(props) {
     return null;
   }
 
-  return jsx(Fragment, null, "\xA0 \u2022", jsx("span", {
+  return jsx(Fragment, null, jsx("span", {
     className: "link-search-timestamp",
     "data-test-id": "link-search-timestamp"
   }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));

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

@@ -33,7 +33,8 @@ import { FormFooter } from '@atlaskit/form';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 export var RECENT_SEARCH_LIST_SIZE = 5;
-export var LinkPicker = /*#__PURE__*/function (_PureComponent) {
+
+var LinkPicker = /*#__PURE__*/function (_PureComponent) {
   _inherits(LinkPicker, _PureComponent);
 
   var _super = _createSuper(LinkPicker);
@@ -122,7 +123,8 @@ export var LinkPicker = /*#__PURE__*/function (_PureComponent) {
             lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
             lastViewedDate = _items$selectedIndex.lastViewedDate;
         var date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
-        return "".concat(name, ", ").concat(container, ", ").concat(date === null || date === void 0 ? void 0 : date.pageAction, " ").concat(date === null || date === void 0 ? void 0 : date.dateString, " ").concat((date === null || date === void 0 ? void 0 : date.timeSince) || '');
+        var formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
+        return [name, container, formattedDate].filter(Boolean).join(', ');
       }
     });
 
@@ -319,7 +321,7 @@ export var LinkPicker = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "getActivePlugin",
     value: function getActivePlugin() {
-      if (!this.props.plugins) {
+      if (!this.props.plugins || this.props.plugins.length === 0) {
         return null;
       }
 

package/dist/esm/version.json

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

package/dist/types/types.d.ts

@@ -8,14 +8,14 @@ export interface LinkSearchListItemData {
     name: string;
     /** URL of the resource being linked to */
     url: string;
-    /** Context to display in link result */
-    container: string;
     /** Icon to display in link result */
     icon: string | React.ComponentType<{
         alt: string;
     }>;
     /** Alt text describing the icon */
     iconAlt: string | MessageDescriptor;
+    /** Context to display in link result */
+    container?: string;
     /** Optional last view date to display in link result */
     lastViewedDate?: Date;
     /** Optional last updated date to display in link result */

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { LinkSearchListItemData, LinkInputType, LinkPickerPlugin } from '../types';
 export declare const RECENT_SEARCH_LIST_SIZE = 5;
@@ -24,7 +24,7 @@ interface OnSubmitParameter {
      */
     rawUrl?: string;
 }
-interface BaseProps {
+export interface LinkPickerProps {
     /** Callback to fire on form submission. */
     onSubmit: (arg: OnSubmitParameter) => void;
     /** Callback to fire when the cancel button is clicked. */
@@ -34,9 +34,8 @@ interface BaseProps {
     /** The desired text to be displayed alternatively to the title of the linked resource for editing. */
     displayText?: string | null;
     /** Plugins that provide link suggestions / search capabilities. */
-    plugins?: [LinkPickerPlugin];
+    plugins?: LinkPickerPlugin[];
 }
-export declare type LinkPickerProps = WrappedComponentProps & BaseProps;
 export interface State {
     items: LinkSearchListItemData[];
     selectedIndex: number;
@@ -46,34 +45,7 @@ export interface State {
     displayText: string;
     invalidUrl: string | null;
 }
-export declare class LinkPicker extends PureComponent<LinkPickerProps, State> {
-    private wrapperRef;
-    private handleClearUrl;
-    private handleClearDisplayText;
-    private queryVersion;
-    constructor(props: LinkPickerProps);
-    componentDidMount(): void;
-    private loadInitialLinkSearchResult;
-    private getActivePlugin;
-    /**
-     * Interface between link picker and plugins to update results
-     */
-    private updateResults;
-    private updateInput;
-    private createClearHandler;
-    private getScreenReaderText;
-    render(): JSX.Element;
-    private isUrlPopulatedWithSelectedItem;
-    private handleSelected;
-    private handleInsert;
-    private handleMouseEnterResultItem;
-    private handleMouseLeaveResultItem;
-    private handleSubmit;
-    private handleKeyDown;
-    private handleCancel;
-    private updateTextInput;
-}
-export declare const LinkPickerWithIntl: React.FC<import("react-intl-next").WithIntlProps<LinkPickerProps>> & {
-    WrappedComponent: React.ComponentType<LinkPickerProps>;
+export declare const LinkPickerWithIntl: React.FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
+    WrappedComponent: React.ComponentType<WrappedComponentProps<"intl"> & LinkPickerProps>;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -56,7 +56,7 @@
     "@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": "^5.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^7.0.0",
     "@atlassian/search-provider": "^2.3.0",
     "@testing-library/react": "^8.0.1",
     "enzyme": "^3.10.0",