@atlaskit/link-picker 1.43.0 → 1.44.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/link-picker
 
+## 1.44.0
+
+### Minor Changes
+
+- [#132649](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/132649)
+  [`b99bd2fb0aeeb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b99bd2fb0aeeb) -
+  Fixes support for plugin empty state behind ff. If successful will be made available in future
+  release.
+- [#131548](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131548)
+  [`282ddb3575504`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/282ddb3575504) -
+  [ux] Allow custom subtitle content in the link picker, and allow link item names to extend over
+  multiple lines. Both changes are opt-in via a LinkPickerPlugin, so these new features will only
+  appear if the plugin is changed to consume them.
+
 ## 1.43.0
 
 ### Minor Changes

package/dist/cjs/ui/link-picker/search-results/link-search-list/index.js

@@ -12,6 +12,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _minHeightContainer = require("../../../../common/ui/min-height-container");
@@ -49,10 +50,11 @@ var testIds = exports.testIds = _objectSpread(_objectSpread(_objectSpread({}, _l
   searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
   tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
 });
-var emptyStateNoResultsWrapper = (0, _react2.css)({
-  minHeight: "var(--ds-space-200, 16px)"
+var emptyStateNoResultsWrapper = (0, _primitives.xcss)({
+  minHeight: 'space.200'
 });
 var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _activePlugin$uiOptio;
   var onChange = _ref.onChange,
     onSelect = _ref.onSelect,
     onKeyDown = _ref.onKeyDown,
@@ -108,20 +110,19 @@ var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef
   }, [activeIndex, items, onKeyDown]);
   if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
     if ((0, _platformFeatureFlags.fg)('platform.linking-platform.link-picker.enable-empty-state')) {
-      if (hasSearchTerm) {
-        return (0, _react2.jsx)(_linkSearchNoResults.NoResults, null);
-      } else {
-        return (
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          (0, _react2.jsx)("div", {
-            css: emptyStateNoResultsWrapper
-          }, activePlugin !== null && activePlugin !== void 0 && activePlugin.emptyStateNoResults ? activePlugin.emptyStateNoResults() : null)
-        );
+      if (!hasSearchTerm) {
+        var _activePlugin$emptySt;
+        var emptyState = activePlugin === null || activePlugin === void 0 || (_activePlugin$emptySt = activePlugin.emptyStateNoResults) === null || _activePlugin$emptySt === void 0 ? void 0 : _activePlugin$emptySt.call(activePlugin);
+        if (emptyState) {
+          return (0, _react2.jsx)(_primitives.Box, {
+            xcss: emptyStateNoResultsWrapper
+          }, emptyState);
+        }
       }
-    } else {
-      return (0, _react2.jsx)(_linkSearchNoResults.NoResults, null);
     }
+    return (0, _react2.jsx)(_linkSearchNoResults.NoResults, null);
   }
+  var listItemNameMaxLines = activePlugin === null || activePlugin === void 0 || (_activePlugin$uiOptio = activePlugin.uiOptions) === null || _activePlugin$uiOptio === void 0 ? void 0 : _activePlugin$uiOptio.listItemNameMaxLines;
   if (items && items.length > 0) {
     itemsContent = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -162,7 +163,8 @@ var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef
         tabIndex: getTabIndex(index),
         ref: function ref(el) {
           return itemRefCallback(el, item.objectId);
-        }
+        },
+        nameMaxLines: listItemNameMaxLines
       });
     })));
   }

package/dist/cjs/ui/link-picker/search-results/link-search-list/list-item/index.js

@@ -1,12 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.testIds = exports.LinkSearchListItem = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
 var _transformTimeStamp = require("../../../transformTimeStamp");
 var _styled = require("./styled");
 /**
@@ -63,21 +66,54 @@ var ListItemIcon = function ListItemIcon(props) {
     }))
   );
 };
-var LinkSearchListItem = exports.LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var item = _ref.item,
-    selected = _ref.selected,
-    id = _ref.id,
-    role = _ref.role,
-    onSelect = _ref.onSelect,
-    tabIndex = _ref.tabIndex,
-    onKeyDown = _ref.onKeyDown,
-    onFocus = _ref.onFocus;
+var ListItemSubtitle = function ListItemSubtitle(_ref) {
+  var _ref$items = (0, _slicedToArray2.default)(_ref.items, 2),
+    firstItem = _ref$items[0],
+    secondItem = _ref$items[1];
+  return /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */(
+    (0, _react2.jsx)("div", {
+      "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
+      css: _styled.listItemContextStyles
+    }, (0, _react2.jsx)("div", {
+      css: _styled.listItemContainerStyles
+    }, (0, _react2.jsx)("span", {
+      css: _styled.listItemContainerInnerStyles
+    }, firstItem)), secondItem && (0, _react2.jsx)("div", {
+      css: _styled.listItemContainerInnerStyles
+    }, (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), (0, _react2.jsx)(_react.Fragment, null, secondItem)))
+  );
+  /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */
+};
+var getDefaultSubtitleItems = function getDefaultSubtitleItems(item, intl) {
+  var container = item.container;
+  var date = (0, _transformTimeStamp.transformTimeStamp)(intl, item.lastViewedDate, item.lastUpdatedDate);
+  if (container) {
+    if (date) {
+      return [container, date];
+    }
+    return [container];
+  }
+  if (date) {
+    return [date];
+  }
+  return undefined;
+};
+var LinkSearchListItem = exports.LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var item = _ref2.item,
+    selected = _ref2.selected,
+    id = _ref2.id,
+    role = _ref2.role,
+    onSelect = _ref2.onSelect,
+    tabIndex = _ref2.tabIndex,
+    onKeyDown = _ref2.onKeyDown,
+    onFocus = _ref2.onFocus,
+    _ref2$nameMaxLines = _ref2.nameMaxLines,
+    nameMaxLines = _ref2$nameMaxLines === void 0 ? 1 : _ref2$nameMaxLines;
   var intl = (0, _reactIntlNext.useIntl)();
   var handleSelect = function handleSelect() {
     return onSelect(item.objectId);
   };
-  var container = item.container || null;
-  var date = (0, _transformTimeStamp.transformTimeStamp)(intl, item.lastViewedDate, item.lastUpdatedDate);
+  var subtitleItems = item.subtitleItems || getDefaultSubtitleItems(item, intl);
   return (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: (0, _styled.composeListItemStyles)(selected),
@@ -95,24 +131,12 @@ var LinkSearchListItem = exports.LinkSearchListItem = /*#__PURE__*/(0, _react.fo
     intl: intl
   }), (0, _react2.jsx)("div", {
     css: _styled.itemNameStyles
-  }, (0, _react2.jsx)("div", {
-    "data-testid": "".concat(testIds.searchResultItem, "-title")
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: _styled.listItemNameStyles,
-    title: item.name
-  }, item.name), (0, _react2.jsx)("div", {
-    "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
-    css: _styled.listItemContextStyles
-  }, container &&
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  (0, _react2.jsx)("div", {
-    css: _styled.listItemContainerStyles
+  }, (0, _react2.jsx)(_primitives.Text, {
+    maxLines: nameMaxLines
   }, (0, _react2.jsx)("span", {
-    css: _styled.listItemContainerInnerStyles
-  }, container)), date &&
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  (0, _react2.jsx)("div", {
-    css: _styled.listItemContainerInnerStyles
-  }, container && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), (0, _react2.jsx)(_react.Fragment, null, date)))));
+    "data-testid": "".concat(testIds.searchResultItem, "-title"),
+    title: item.name
+  }, item.name)), subtitleItems && (0, _react2.jsx)(ListItemSubtitle, {
+    items: subtitleItems
+  })));
 });

package/dist/cjs/ui/link-picker/search-results/link-search-list/list-item/styled.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.relativeFontSizeToBase16 = exports.listItemNameStyles = exports.listItemContextStyles = exports.listItemContainerStyles = exports.listItemContainerInnerStyles = exports.itemNameStyles = exports.itemIconStyles = exports.imgStyles = exports.composeListItemStyles = void 0;
+exports.relativeFontSizeToBase16 = exports.listItemContextStyles = exports.listItemContainerStyles = exports.listItemContainerInnerStyles = exports.itemNameStyles = exports.itemIconStyles = exports.imgStyles = exports.composeListItemStyles = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -68,16 +68,8 @@ var composeListItemStyles = exports.composeListItemStyles = function composeList
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var itemNameStyles = exports.itemNameStyles = (0, _react.css)({
   overflow: 'hidden',
-  alignContent: 'center'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var listItemNameStyles = exports.listItemNameStyles = (0, _react.css)({
-  color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  lineHeight: '20px'
+  alignContent: 'center',
+  width: '100%'
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/cjs/ui/main.js

@@ -32,7 +32,7 @@ var testIds = exports.testIds = {
 };
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "1.43.0" || '',
+  packageVersion: "1.44.0" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };

package/dist/es2019/ui/link-picker/search-results/link-search-list/index.js

@@ -6,9 +6,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef, Fragment, useCallback, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { MinHeightContainer } from '../../../../common/ui/min-height-container';
@@ -42,8 +43,8 @@ export const testIds = {
   searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
   tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
 };
-const emptyStateNoResultsWrapper = css({
-  minHeight: "var(--ds-space-200, 16px)"
+const emptyStateNoResultsWrapper = xcss({
+  minHeight: 'space.200'
 });
 export const LinkSearchList = /*#__PURE__*/forwardRef(({
   onChange,
@@ -62,6 +63,7 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
   activePlugin,
   ...restProps
 }, ref) => {
+  var _activePlugin$uiOptio;
   let itemsContent;
   let loadingContent;
   const linkListTitle = hasSearchTerm ? messages.titleResults : messages.titleRecentlyViewed;
@@ -102,20 +104,19 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
   }, [activeIndex, items, onKeyDown]);
   if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
     if (fg('platform.linking-platform.link-picker.enable-empty-state')) {
-      if (hasSearchTerm) {
-        return jsx(NoResults, null);
-      } else {
-        return (
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          jsx("div", {
-            css: emptyStateNoResultsWrapper
-          }, activePlugin !== null && activePlugin !== void 0 && activePlugin.emptyStateNoResults ? activePlugin.emptyStateNoResults() : null)
-        );
+      if (!hasSearchTerm) {
+        var _activePlugin$emptySt;
+        const emptyState = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$emptySt = activePlugin.emptyStateNoResults) === null || _activePlugin$emptySt === void 0 ? void 0 : _activePlugin$emptySt.call(activePlugin);
+        if (emptyState) {
+          return jsx(Box, {
+            xcss: emptyStateNoResultsWrapper
+          }, emptyState);
+        }
       }
-    } else {
-      return jsx(NoResults, null);
     }
+    return jsx(NoResults, null);
   }
+  const listItemNameMaxLines = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$uiOptio = activePlugin.uiOptions) === null || _activePlugin$uiOptio === void 0 ? void 0 : _activePlugin$uiOptio.listItemNameMaxLines;
   if (items && items.length > 0) {
     itemsContent = jsx(Fragment, null, jsx("div", {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -151,7 +152,8 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
       onSelect: onSelect,
       key: item.objectId,
       tabIndex: getTabIndex(index),
-      ref: el => itemRefCallback(el, item.objectId)
+      ref: el => itemRefCallback(el, item.objectId),
+      nameMaxLines: listItemNameMaxLines
     }))));
   }
   if (isLoading) {

package/dist/es2019/ui/link-picker/search-results/link-search-list/list-item/index.js

@@ -7,9 +7,10 @@ import { forwardRef, Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
+import { Text } from '@atlaskit/primitives';
 /* eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports */
 import { transformTimeStamp } from '../../../transformTimeStamp';
-import { composeListItemStyles, imgStyles, itemIconStyles, itemNameStyles, listItemContainerInnerStyles, listItemContainerStyles, listItemContextStyles, listItemNameStyles } from './styled';
+import { composeListItemStyles, imgStyles, itemIconStyles, itemNameStyles, listItemContainerInnerStyles, listItemContainerStyles, listItemContextStyles } from './styled';
 export const testIds = {
   searchResultItem: 'link-search-list-item',
   searchResultIcon: 'link-search-list-item-icon'
@@ -55,6 +56,37 @@ const ListItemIcon = props => {
     }))
   );
 };
+const ListItemSubtitle = ({
+  items: [firstItem, secondItem]
+}) => {
+  return /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */(
+    jsx("div", {
+      "data-testid": `${testIds.searchResultItem}-subtitle`,
+      css: listItemContextStyles
+    }, jsx("div", {
+      css: listItemContainerStyles
+    }, jsx("span", {
+      css: listItemContainerInnerStyles
+    }, firstItem)), secondItem && jsx("div", {
+      css: listItemContainerInnerStyles
+    }, jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, secondItem)))
+  );
+  /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */
+};
+const getDefaultSubtitleItems = (item, intl) => {
+  const container = item.container;
+  const date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+  if (container) {
+    if (date) {
+      return [container, date];
+    }
+    return [container];
+  }
+  if (date) {
+    return [date];
+  }
+  return undefined;
+};
 export const LinkSearchListItem = /*#__PURE__*/forwardRef(({
   item,
   selected,
@@ -63,12 +95,12 @@ export const LinkSearchListItem = /*#__PURE__*/forwardRef(({
   onSelect,
   tabIndex,
   onKeyDown,
-  onFocus
+  onFocus,
+  nameMaxLines = 1
 }, ref) => {
   const intl = useIntl();
   const handleSelect = () => onSelect(item.objectId);
-  const container = item.container || null;
-  const date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+  const subtitleItems = item.subtitleItems || getDefaultSubtitleItems(item, intl);
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: composeListItemStyles(selected),
@@ -86,24 +118,12 @@ export const LinkSearchListItem = /*#__PURE__*/forwardRef(({
     intl: intl
   }), jsx("div", {
     css: itemNameStyles
-  }, jsx("div", {
-    "data-testid": `${testIds.searchResultItem}-title`
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: listItemNameStyles,
-    title: item.name
-  }, item.name), jsx("div", {
-    "data-testid": `${testIds.searchResultItem}-subtitle`,
-    css: listItemContextStyles
-  }, container &&
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: listItemContainerStyles
+  }, jsx(Text, {
+    maxLines: nameMaxLines
   }, jsx("span", {
-    css: listItemContainerInnerStyles
-  }, container)), date &&
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: listItemContainerInnerStyles
-  }, container && jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, date)))));
+    "data-testid": `${testIds.searchResultItem}-title`,
+    title: item.name
+  }, item.name)), subtitleItems && jsx(ListItemSubtitle, {
+    items: subtitleItems
+  })));
 });

package/dist/es2019/ui/link-picker/search-results/link-search-list/list-item/styled.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { B100, B400, B50, N20, N200, N300, N800 } from '@atlaskit/theme/colors';
+import { B100, B400, B50, N20, N200, N300 } from '@atlaskit/theme/colors';
 import { fontSize, fontSizeSmall } from '@atlaskit/theme/constants';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -60,16 +60,8 @@ export const composeListItemStyles = (selected = false) => {
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const itemNameStyles = css({
   overflow: 'hidden',
-  alignContent: 'center'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const listItemNameStyles = css({
-  color: `var(--ds-text, ${N800})`,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  lineHeight: '20px'
+  alignContent: 'center',
+  width: '100%'
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/es2019/ui/main.js

@@ -20,7 +20,7 @@ export const testIds = {
 };
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "1.43.0" || '',
+  packageVersion: "1.44.0" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/esm/ui/link-picker/search-results/link-search-list/index.js

@@ -11,9 +11,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { forwardRef, Fragment, useCallback, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { MinHeightContainer } from '../../../../common/ui/min-height-container';
@@ -45,10 +46,11 @@ export var testIds = _objectSpread(_objectSpread(_objectSpread({}, noResultsTest
   searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
   tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
 });
-var emptyStateNoResultsWrapper = css({
-  minHeight: "var(--ds-space-200, 16px)"
+var emptyStateNoResultsWrapper = xcss({
+  minHeight: 'space.200'
 });
 export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _activePlugin$uiOptio;
   var onChange = _ref.onChange,
     onSelect = _ref.onSelect,
     onKeyDown = _ref.onKeyDown,
@@ -104,20 +106,19 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [activeIndex, items, onKeyDown]);
   if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
     if (fg('platform.linking-platform.link-picker.enable-empty-state')) {
-      if (hasSearchTerm) {
-        return jsx(NoResults, null);
-      } else {
-        return (
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          jsx("div", {
-            css: emptyStateNoResultsWrapper
-          }, activePlugin !== null && activePlugin !== void 0 && activePlugin.emptyStateNoResults ? activePlugin.emptyStateNoResults() : null)
-        );
+      if (!hasSearchTerm) {
+        var _activePlugin$emptySt;
+        var emptyState = activePlugin === null || activePlugin === void 0 || (_activePlugin$emptySt = activePlugin.emptyStateNoResults) === null || _activePlugin$emptySt === void 0 ? void 0 : _activePlugin$emptySt.call(activePlugin);
+        if (emptyState) {
+          return jsx(Box, {
+            xcss: emptyStateNoResultsWrapper
+          }, emptyState);
+        }
       }
-    } else {
-      return jsx(NoResults, null);
     }
+    return jsx(NoResults, null);
   }
+  var listItemNameMaxLines = activePlugin === null || activePlugin === void 0 || (_activePlugin$uiOptio = activePlugin.uiOptions) === null || _activePlugin$uiOptio === void 0 ? void 0 : _activePlugin$uiOptio.listItemNameMaxLines;
   if (items && items.length > 0) {
     itemsContent = jsx(Fragment, null, jsx("div", {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -158,7 +159,8 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
         tabIndex: getTabIndex(index),
         ref: function ref(el) {
           return itemRefCallback(el, item.objectId);
-        }
+        },
+        nameMaxLines: listItemNameMaxLines
       });
     })));
   }

package/dist/esm/ui/link-picker/search-results/link-search-list/list-item/index.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,9 +8,10 @@ import { forwardRef, Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
+import { Text } from '@atlaskit/primitives';
 /* eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports */
 import { transformTimeStamp } from '../../../transformTimeStamp';
-import { composeListItemStyles, imgStyles, itemIconStyles, itemNameStyles, listItemContainerInnerStyles, listItemContainerStyles, listItemContextStyles, listItemNameStyles } from './styled';
+import { composeListItemStyles, imgStyles, itemIconStyles, itemNameStyles, listItemContainerInnerStyles, listItemContainerStyles, listItemContextStyles } from './styled';
 export var testIds = {
   searchResultItem: 'link-search-list-item',
   searchResultIcon: 'link-search-list-item-icon'
@@ -55,21 +57,54 @@ var ListItemIcon = function ListItemIcon(props) {
     }))
   );
 };
-export var LinkSearchListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var item = _ref.item,
-    selected = _ref.selected,
-    id = _ref.id,
-    role = _ref.role,
-    onSelect = _ref.onSelect,
-    tabIndex = _ref.tabIndex,
-    onKeyDown = _ref.onKeyDown,
-    onFocus = _ref.onFocus;
+var ListItemSubtitle = function ListItemSubtitle(_ref) {
+  var _ref$items = _slicedToArray(_ref.items, 2),
+    firstItem = _ref$items[0],
+    secondItem = _ref$items[1];
+  return /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */(
+    jsx("div", {
+      "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
+      css: listItemContextStyles
+    }, jsx("div", {
+      css: listItemContainerStyles
+    }, jsx("span", {
+      css: listItemContainerInnerStyles
+    }, firstItem)), secondItem && jsx("div", {
+      css: listItemContainerInnerStyles
+    }, jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, secondItem)))
+  );
+  /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */
+};
+var getDefaultSubtitleItems = function getDefaultSubtitleItems(item, intl) {
+  var container = item.container;
+  var date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+  if (container) {
+    if (date) {
+      return [container, date];
+    }
+    return [container];
+  }
+  if (date) {
+    return [date];
+  }
+  return undefined;
+};
+export var LinkSearchListItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var item = _ref2.item,
+    selected = _ref2.selected,
+    id = _ref2.id,
+    role = _ref2.role,
+    onSelect = _ref2.onSelect,
+    tabIndex = _ref2.tabIndex,
+    onKeyDown = _ref2.onKeyDown,
+    onFocus = _ref2.onFocus,
+    _ref2$nameMaxLines = _ref2.nameMaxLines,
+    nameMaxLines = _ref2$nameMaxLines === void 0 ? 1 : _ref2$nameMaxLines;
   var intl = useIntl();
   var handleSelect = function handleSelect() {
     return onSelect(item.objectId);
   };
-  var container = item.container || null;
-  var date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+  var subtitleItems = item.subtitleItems || getDefaultSubtitleItems(item, intl);
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: composeListItemStyles(selected),
@@ -87,24 +122,12 @@ export var LinkSearchListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     intl: intl
   }), jsx("div", {
     css: itemNameStyles
-  }, jsx("div", {
-    "data-testid": "".concat(testIds.searchResultItem, "-title")
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: listItemNameStyles,
-    title: item.name
-  }, item.name), jsx("div", {
-    "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
-    css: listItemContextStyles
-  }, container &&
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: listItemContainerStyles
+  }, jsx(Text, {
+    maxLines: nameMaxLines
   }, jsx("span", {
-    css: listItemContainerInnerStyles
-  }, container)), date &&
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: listItemContainerInnerStyles
-  }, container && jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, date)))));
+    "data-testid": "".concat(testIds.searchResultItem, "-title"),
+    title: item.name
+  }, item.name)), subtitleItems && jsx(ListItemSubtitle, {
+    items: subtitleItems
+  })));
 });

package/dist/esm/ui/link-picker/search-results/link-search-list/list-item/styled.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { B100, B400, B50, N20, N200, N300, N800 } from '@atlaskit/theme/colors';
+import { B100, B400, B50, N20, N200, N300 } from '@atlaskit/theme/colors';
 import { fontSize, fontSizeSmall } from '@atlaskit/theme/constants';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -61,16 +61,8 @@ export var composeListItemStyles = function composeListItemStyles() {
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var itemNameStyles = css({
   overflow: 'hidden',
-  alignContent: 'center'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var listItemNameStyles = css({
-  color: "var(--ds-text, ".concat(N800, ")"),
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  lineHeight: '20px'
+  alignContent: 'center',
+  width: '100%'
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/esm/ui/main.js

@@ -21,7 +21,7 @@ export var testIds = {
 };
 export var PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "1.43.0" || '',
+  packageVersion: "1.44.0" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/types/common/types.d.ts

@@ -28,6 +28,11 @@ export interface LinkSearchListItemData {
         /** The data source that provided the result */
         source?: string;
     };
+    /**
+     * Optionally override the strings shown in the link result's subtitle
+     * (by default, the subtitle is the container and date). Provide translated strings.
+     */
+    subtitleItems?: Readonly<[string, string?]>;
 }
 export interface LinkPickerState {
     /** Current query string / URL input field value */
@@ -36,6 +41,10 @@ export interface LinkPickerState {
 export interface ResolveResult {
     data: LinkSearchListItemData[];
 }
+export interface LinkPickerUiOptions {
+    /** Maximum number of lines to display for the item name */
+    listItemNameMaxLines?: number;
+}
 export interface LinkPickerPlugin {
     resolve: (state: LinkPickerState) => Promise<ResolveResult> | AsyncGenerator<ResolveResult, ResolveResult>;
     /** Uniquely identify the tab */
@@ -55,6 +64,8 @@ export interface LinkPickerPlugin {
     UNSAFE_onActivation?: () => void;
     /** Register Plugin Actions */
     action?: LinkPickerPluginAction;
+    /** Options to override certain configurable styles in the link picker */
+    uiOptions?: LinkPickerUiOptions;
 }
 export interface LinkPickerPluginAction {
     label: MessageDescriptor | string;

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 export { default } from './ui';
 export { DeprecatedLazyLinkPickerExport as LinkPicker } from './ui';
 export type { LinkPickerProps } from './common/types';
-export type { LinkInputType, LinkPickerPluginAction, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, LinkPickerPluginEmptyStateNoResults, } from './common/types';
+export type { LinkInputType, LinkPickerPluginAction, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, LinkPickerPluginEmptyStateNoResults, LinkPickerUiOptions, } from './common/types';
 export { UnauthenticatedError } from './common/utils/errors';
 export { LoaderFallback } from './ui/loader-fallback';

package/dist/types/ui/link-picker/search-results/link-search-list/list-item/index.d.ts

@@ -18,5 +18,6 @@ export interface LinkSearchListItemProps {
     onFocus: () => void;
     id?: string;
     role?: string;
+    nameMaxLines?: number;
 }
 export declare const LinkSearchListItem: import("react").ForwardRefExoticComponent<LinkSearchListItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/ui/link-picker/search-results/link-search-list/list-item/styled.d.ts

@@ -1,7 +1,6 @@
 export declare const relativeFontSizeToBase16: (px: number | string) => string;
 export declare const composeListItemStyles: (selected?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const itemNameStyles: import("@emotion/react").SerializedStyles;
-export declare const listItemNameStyles: import("@emotion/react").SerializedStyles;
 export declare const listItemContextStyles: import("@emotion/react").SerializedStyles;
 export declare const listItemContainerStyles: import("@emotion/react").SerializedStyles;
 export declare const listItemContainerInnerStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/common/types.d.ts

@@ -28,6 +28,14 @@ export interface LinkSearchListItemData {
         /** The data source that provided the result */
         source?: string;
     };
+    /**
+     * Optionally override the strings shown in the link result's subtitle
+     * (by default, the subtitle is the container and date). Provide translated strings.
+     */
+    subtitleItems?: Readonly<[
+        string,
+        string?
+    ]>;
 }
 export interface LinkPickerState {
     /** Current query string / URL input field value */
@@ -36,6 +44,10 @@ export interface LinkPickerState {
 export interface ResolveResult {
     data: LinkSearchListItemData[];
 }
+export interface LinkPickerUiOptions {
+    /** Maximum number of lines to display for the item name */
+    listItemNameMaxLines?: number;
+}
 export interface LinkPickerPlugin {
     resolve: (state: LinkPickerState) => Promise<ResolveResult> | AsyncGenerator<ResolveResult, ResolveResult>;
     /** Uniquely identify the tab */
@@ -55,6 +67,8 @@ export interface LinkPickerPlugin {
     UNSAFE_onActivation?: () => void;
     /** Register Plugin Actions */
     action?: LinkPickerPluginAction;
+    /** Options to override certain configurable styles in the link picker */
+    uiOptions?: LinkPickerUiOptions;
 }
 export interface LinkPickerPluginAction {
     label: MessageDescriptor | string;

package/dist/types-ts4.5/index.d.ts

@@ -1,6 +1,6 @@
 export { default } from './ui';
 export { DeprecatedLazyLinkPickerExport as LinkPicker } from './ui';
 export type { LinkPickerProps } from './common/types';
-export type { LinkInputType, LinkPickerPluginAction, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, LinkPickerPluginEmptyStateNoResults, } from './common/types';
+export type { LinkInputType, LinkPickerPluginAction, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, LinkPickerPluginEmptyStateNoResults, LinkPickerUiOptions, } from './common/types';
 export { UnauthenticatedError } from './common/utils/errors';
 export { LoaderFallback } from './ui/loader-fallback';

package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/list-item/index.d.ts

@@ -18,5 +18,6 @@ export interface LinkSearchListItemProps {
     onFocus: () => void;
     id?: string;
     role?: string;
+    nameMaxLines?: number;
 }
 export declare const LinkSearchListItem: import("react").ForwardRefExoticComponent<LinkSearchListItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/list-item/styled.d.ts

@@ -1,7 +1,6 @@
 export declare const relativeFontSizeToBase16: (px: number | string) => string;
 export declare const composeListItemStyles: (selected?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const itemNameStyles: import("@emotion/react").SerializedStyles;
-export declare const listItemNameStyles: import("@emotion/react").SerializedStyles;
 export declare const listItemContextStyles: import("@emotion/react").SerializedStyles;
 export declare const listItemContainerStyles: import("@emotion/react").SerializedStyles;
 export declare const listItemContainerInnerStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.43.0",
+	"version": "1.44.0",
 	"description": "Standalone link picker",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {
@@ -92,7 +92,7 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/dropdown-menu": "^12.17.0",
 		"@atlaskit/link-provider": "^1.14.0",
-		"@atlaskit/link-test-helpers": "^7.4.0",
+		"@atlaskit/link-test-helpers": "^7.5.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/dom": "^10.1.0",