@atlaskit/link-picker 1.42.5 → 1.44.0

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.42.5" || '',
+  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;
@@ -137,6 +148,12 @@ export interface LinkPickerProps {
     featureFlags?: Record<string, unknown>;
     /** Controls showing a "submission in-progres" UX */
     isSubmitting?: boolean;
+    /**
+     * Do not utilize this! This is a temporary prop that is being used for a specific experiment.
+     * This prop controls where the submit button appears. When true the submit button will move below the input field and be full width
+     * @internal
+     * */
+    UNSAFE_moveSubmitButton?: boolean;
 }
 type CustomLinkPickerMessages = {
     /** Label for the link input field */

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/form-footer/index.d.ts

@@ -8,16 +8,6 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    saveButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    insertButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
     submittingStatusMessage: {
         id: string;
         defaultMessage: string;
@@ -46,6 +36,8 @@ interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
     action?: LinkPickerPluginAction;
     createFeatureDiscovery?: boolean;
     customSubmitButtonLabel?: MessageDescriptor;
+    submitMessageId?: string;
+    hideSubmitButton?: boolean;
 }
-export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, isSubmitting, error, url, queryState, items, isEditing, onCancel, action, createFeatureDiscovery, customSubmitButtonLabel, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
+export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, isSubmitting, error, url, queryState, items, isEditing, onCancel, action, createFeatureDiscovery, customSubmitButtonLabel, submitMessageId, hideSubmitButton, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
 export {};

package/dist/types/ui/link-picker/form-footer/link-picker-submit-button/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import { type MessageDescriptor } from 'react-intl-next';
+import type { LinkPickerState, LinkSearchListItemData } from '../../../../common/types';
+type LinkPickerButtonGroupProps = {
+    isEditing?: boolean;
+    isLoading: boolean;
+    isSubmitting: boolean;
+    customSubmitButtonLabel?: MessageDescriptor;
+    error: unknown | null;
+    items: LinkSearchListItemData[] | null;
+    queryState: LinkPickerState | null;
+    submitMessageId?: string;
+    testId?: string;
+    url: string;
+};
+export declare const messages: {
+    saveButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    insertButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const LinkPickerSubmitButton: ({ isEditing, isLoading, isSubmitting, customSubmitButtonLabel, error, items, queryState, submitMessageId, testId, url, }: LinkPickerButtonGroupProps) => jsx.JSX.Element;
+export {};

package/dist/{types-ts4.5/ui/link-picker/form-footer → types/ui/link-picker/form-footer/link-picker-submit-button}/utils.d.ts

@@ -1,2 +1,2 @@
-import { type LinkPickerState, type LinkSearchListItemData } from '../../../common/types';
+import { type LinkPickerState, type LinkSearchListItemData } from '../../../../common/types';
 export declare const checkSubmitDisabled: (isLoading: boolean, isSubmitting: boolean, error: unknown | null, url: string, queryState: LinkPickerState | null, items: LinkSearchListItemData[] | null) => boolean;

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;
@@ -137,6 +151,12 @@ export interface LinkPickerProps {
     featureFlags?: Record<string, unknown>;
     /** Controls showing a "submission in-progres" UX */
     isSubmitting?: boolean;
+    /**
+     * Do not utilize this! This is a temporary prop that is being used for a specific experiment.
+     * This prop controls where the submit button appears. When true the submit button will move below the input field and be full width
+     * @internal
+     * */
+    UNSAFE_moveSubmitButton?: boolean;
 }
 type CustomLinkPickerMessages = {
     /** Label for the link input field */

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/form-footer/index.d.ts

@@ -8,16 +8,6 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    saveButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    insertButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
     submittingStatusMessage: {
         id: string;
         defaultMessage: string;
@@ -46,6 +36,8 @@ interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
     action?: LinkPickerPluginAction;
     createFeatureDiscovery?: boolean;
     customSubmitButtonLabel?: MessageDescriptor;
+    submitMessageId?: string;
+    hideSubmitButton?: boolean;
 }
-export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, isSubmitting, error, url, queryState, items, isEditing, onCancel, action, createFeatureDiscovery, customSubmitButtonLabel, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
+export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, isSubmitting, error, url, queryState, items, isEditing, onCancel, action, createFeatureDiscovery, customSubmitButtonLabel, submitMessageId, hideSubmitButton, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
 export {};

package/dist/types-ts4.5/ui/link-picker/form-footer/link-picker-submit-button/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import { type MessageDescriptor } from 'react-intl-next';
+import type { LinkPickerState, LinkSearchListItemData } from '../../../../common/types';
+type LinkPickerButtonGroupProps = {
+    isEditing?: boolean;
+    isLoading: boolean;
+    isSubmitting: boolean;
+    customSubmitButtonLabel?: MessageDescriptor;
+    error: unknown | null;
+    items: LinkSearchListItemData[] | null;
+    queryState: LinkPickerState | null;
+    submitMessageId?: string;
+    testId?: string;
+    url: string;
+};
+export declare const messages: {
+    saveButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    insertButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const LinkPickerSubmitButton: ({ isEditing, isLoading, isSubmitting, customSubmitButtonLabel, error, items, queryState, submitMessageId, testId, url, }: LinkPickerButtonGroupProps) => jsx.JSX.Element;
+export {};

package/dist/{types/ui/link-picker/form-footer → types-ts4.5/ui/link-picker/form-footer/link-picker-submit-button}/utils.d.ts

@@ -1,2 +1,2 @@
-import { type LinkPickerState, type LinkSearchListItemData } from '../../../common/types';
+import { type LinkPickerState, type LinkSearchListItemData } from '../../../../common/types';
 export declare const checkSubmitDisabled: (isLoading: boolean, isSubmitting: boolean, error: unknown | null, url: string, queryState: LinkPickerState | null, items: LinkSearchListItemData[] | null) => boolean;

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.42.5",
+	"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",