@atlaskit/link-picker 3.1.0 → 3.1.2

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

@@ -0,0 +1,40 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var SIZE = 96;
+var noResultsSVGStyles = null;
+export var NoResultsV2SVG = function NoResultsV2SVG() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 96 96",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: ax(["_1bsbwdok _4t3iwdok _1e0c1ule"]),
+    style: {
+      "--_cjikvn": ix("".concat(SIZE, "px"))
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M64.861 32.06a27.747 27.747 0 0 0-2.667-4.133 28.188 28.188 0 0 0-3.376-3.669c-6.985-6.311-15.57-6.89-23.609-2.53a30.246 30.246 0 0 0-4.056 2.656 30.624 30.624 0 0 0-3.735 3.4c-6.225 6.717-7.82 15.154-3.505 23.463a28.103 28.103 0 0 0 2.698 4.192 27.67 27.67 0 0 0 3.33 3.62c6.94 6.267 15.518 6.85 23.596 2.507a30.502 30.502 0 0 0 4.23-2.758 30.071 30.071 0 0 0 3.593-3.257c6.252-6.692 7.847-15.161 3.494-23.49h.007Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M43.092 66.774c-5.306 0-10.382-1.997-14.75-5.938a30.405 30.405 0 0 1-3.62-3.93 30.222 30.222 0 0 1-2.928-4.553c-4.657-8.96-3.247-18.509 3.871-26.192a33.27 33.27 0 0 1 4.025-3.669 32.825 32.825 0 0 1 4.378-2.87c9.209-4.995 18.816-3.951 26.353 2.86a30.96 30.96 0 0 1 3.665 3.98 30.302 30.302 0 0 1 2.898 4.489c4.706 9.003 3.295 18.564-3.868 26.23a32.157 32.157 0 0 1-3.879 3.516 33.436 33.436 0 0 1-4.562 2.974c-3.858 2.073-7.781 3.1-11.583 3.1v.003Zm2.53-45.486c-3.019 0-6.147.841-9.274 2.541a28.43 28.43 0 0 0-3.736 2.447 28.058 28.058 0 0 0-3.442 3.135c-5.746 6.203-6.86 13.566-3.135 20.736a25.4 25.4 0 0 0 2.472 3.83 25.297 25.297 0 0 0 3.044 3.309c5.99 5.41 13.398 6.182 20.862 2.175a28.01 28.01 0 0 0 3.9-2.545 28.04 28.04 0 0 0 3.308-2.999c5.778-6.182 6.885-13.552 3.125-20.75a25.545 25.545 0 0 0-2.44-3.777 25.854 25.854 0 0 0-3.086-3.358c-3.491-3.152-7.443-4.744-11.59-4.744h-.007Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M62.822 59.695c-1.235-1.721-2.562-1.71-3.857-.709-1.215.939-1.54 2.21-.244 3.882l1.48 1.913 4.102-3.173-1.48-1.913Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "m65.334 60.811-6.158 4.762 11.573 14.969 6.159-4.762L65.334 60.81Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#B7B9BE",
+    d: "m64.344 61.577-4.178 3.23 3.925 5.076 4.178-3.23-3.925-5.076Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    d: "M46.496 47.476h-3.492v-.221c-.119-2.484 1.29-5.174 3.295-6.274l.038-.02c.054-.028.107-.061.157-.095 1.094-.705 1.717-1.92 1.678-3.257-.038-1.326-.722-2.49-1.829-3.117a4.596 4.596 0 0 0-2.256-.605c-2.365 0-4.289 1.938-4.289 4.319h-3.492c0-4.32 3.49-7.835 7.78-7.835 1.375 0 2.747.365 3.967 1.055 2.186 1.237 3.536 3.51 3.61 6.082.074 2.583-1.15 4.943-3.272 6.312-.143.093-.289.18-.433.256-.832.468-1.529 1.907-1.465 3.033l.003.367Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#DDDEE1",
+    fillRule: "evenodd",
+    d: "M44.413 49.492a3.465 3.465 0 0 1 1.119-.003c1.138.187 2.064.985 2.289 2.229l.002.009.001.01a3.419 3.419 0 0 1-.001 1.126v.004c-.22 1.256-1.161 2.052-2.295 2.236a3.5 3.5 0 0 1-1.108-.003h-.001c-1.14-.184-2.07-.981-2.296-2.224l-.002-.01-.001-.01a3.37 3.37 0 0 1 0-1.12l.001-.01.002-.01c.227-1.249 1.161-2.034 2.288-2.223h.002Z",
+    clipRule: "evenodd"
+  }));
+};

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

@@ -21,6 +21,7 @@
 ._otyridpf{margin-bottom:0}
 ._p12fpxbi{max-width:var(--ds-space-200,1pc)}
 ._syaz121t{color:var(--_1pseksa)}
+._syaz1svm{color:var(--_1trgtlr)}
 ._syazct01{color:var(--_khvm95)}
 ._syazpsu8{color:var(--_vrm7dk)}
 ._u5f3kq6n{padding-right:var(--_1kucder)}

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

@@ -7,7 +7,7 @@ import { forwardRef, Fragment } from 'react';
 import { useIntl } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
-import { B100, B400, B50, N20, N200, N300, N400 } from '@atlaskit/theme/colors';
+import { B100, B400, B50, N20, N200, N300, N400, N40A } from '@atlaskit/theme/colors';
 /* eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports */
 import { transformTimeStamp } from '../../../transformTimeStamp';
 export var testIds = {
@@ -25,6 +25,7 @@ var listItemContextStyles = null;
 var listItemContainerStyles = null;
 var listItemContainerInnerStyles = null;
 var listItemContainerInnerStylesA11yRefresh = null;
+var listItemContainerInnerStylesSeparatorLinkPickerRefresh = null;
 var itemNameStyles = null;
 var imgStyles = null;
 var listItemBaseStyles = null;
@@ -79,7 +80,12 @@ var ListItemSubtitle = function ListItemSubtitle(_ref) {
       "--_1pseksa": ix("var(--ds-text-subtle, ".concat(N400, ")")),
       "--_vrm7dk": ix("var(--ds-text-subtlest, ".concat(N200, ")"))
     }
-  }, /*#__PURE__*/React.createElement(Fragment, null, "\xA0 \u2022\xA0 "), /*#__PURE__*/React.createElement(Fragment, null, secondItem)));
+  }, fg('platform-linking-visual-refresh-link-picker') ? /*#__PURE__*/React.createElement("span", {
+    className: ax(["_syaz1svm"]),
+    style: {
+      "--_1trgtlr": ix("var(--ds-border, ".concat(N40A, ")"))
+    }
+  }, /*#__PURE__*/React.createElement(Fragment, null, "\xA0 \u2022\xA0 ")) : /*#__PURE__*/React.createElement(Fragment, null, "\xA0 \u2022\xA0 "), /*#__PURE__*/React.createElement(Fragment, null, secondItem)));
 };
 var getDefaultSubtitleItems = function getDefaultSubtitleItems(item, intl) {
   var container = item.container;

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

@@ -3,6 +3,7 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useLayoutEffect, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MinHeightContainer } from '../../../../common/ui/min-height-container';
 var flexColumn = null;
 export var SearchResultsContainer = function SearchResultsContainer(_ref) {
@@ -12,7 +13,7 @@ export var SearchResultsContainer = function SearchResultsContainer(_ref) {
     children = _ref.children;
   var ref = useRef(null);
   var currentHeight = useRef(null);
-  var fixedMinHeight = hasTabs ? '347px' : '302px';
+  var fixedMinHeight = fg('platform-linking-visual-refresh-link-picker') ? hasTabs ? '296px' : '251px' : hasTabs ? '347px' : '302px';
   var adaptiveMinHeight = isLoadingResults && !!currentHeight.current ? "".concat(currentHeight.current, "px") : 'auto';
   var minheight = adaptiveHeight ? adaptiveMinHeight : fixedMinHeight;
   useLayoutEffect(function () {

package/dist/esm/ui/main.js

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

package/dist/types/common/generic-error-svg-v2/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const GenericErrorSVGV2: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

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

@@ -122,6 +122,8 @@ export interface LinkPickerProps {
     url?: string;
     /** The desired text to be displayed alternatively to the title of the linked resource for editing. */
     displayText?: string | null;
+    /** The desired text to be displayed below the display text input field. Only displayed when `platform-linking-visual-refresh-link-picker` gate is enabled. */
+    displayHelperText?: string | null;
     /** Plugins that provide link suggestions / search capabilities. */
     plugins?: LinkPickerPlugin[];
     /** If set true, Link picker will show the loading spinner where the tabs and results will show. */
@@ -163,6 +165,8 @@ type CustomLinkPickerMessages = {
     linkTextLabel?: MessageDescriptor;
     /** Placeholder for the link display text field */
     linkTextPlaceholder?: MessageDescriptor;
+    /** Helper text for the link display text field */
+    linkHelperTextLabel?: MessageDescriptor;
     /** Label for the submit button */
     submitButtonLabel?: MessageDescriptor;
 };

package/dist/types/common/ui/empty-state/index.d.ts

@@ -4,6 +4,8 @@ type EmptyStateProps = {
     testId?: string;
     description?: React.ReactNode;
     renderImage?: () => React.ReactNode;
+    /** Only rendered if fg `platform-linking-visual-refresh-link-picker` is enabled */
+    action?: React.ReactNode;
 };
-export declare const EmptyState: ({ testId, header, description, renderImage }: EmptyStateProps) => JSX.Element;
+export declare const EmptyState: ({ testId, header, description, action, renderImage, }: EmptyStateProps) => JSX.Element;
 export {};

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

@@ -21,5 +21,6 @@ export declare const testIds: {
     readonly linkPicker: "link-picker";
     readonly urlInputField: "link-url";
     readonly textInputField: "link-text";
+    readonly linkHelperText: "link-helper-text";
 };
 export declare const LinkPicker: import("react").ComponentType<LinkPickerProps>;

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

@@ -65,6 +65,16 @@ export declare const linkTextMessages: {
         defaultMessage: string;
         description: string;
     };
+    linkHelperTextLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkHelperTextAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export declare const timeMessages: {
     updated: {

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

@@ -12,8 +12,18 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    searchErrorAction: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export declare const testIds: {
     searchError: string;
 };
-export declare const LinkSearchError: () => React.JSX.Element;
+type LinkSearchErrorProps = {
+    /** Only used if fg `platform-linking-visual-refresh-link-picker` is enabled */
+    onRetry?: () => void;
+};
+export declare const LinkSearchError: ({ onRetry }: LinkSearchErrorProps) => React.JSX.Element;
+export {};

package/dist/types/ui/link-picker/search-results/link-search-list/link-search-no-results/no-results-svg-v2/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const NoResultsV2SVG: () => JSX.Element;

package/dist/types-ts4.5/common/generic-error-svg-v2/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const GenericErrorSVGV2: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

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

@@ -125,6 +125,8 @@ export interface LinkPickerProps {
     url?: string;
     /** The desired text to be displayed alternatively to the title of the linked resource for editing. */
     displayText?: string | null;
+    /** The desired text to be displayed below the display text input field. Only displayed when `platform-linking-visual-refresh-link-picker` gate is enabled. */
+    displayHelperText?: string | null;
     /** Plugins that provide link suggestions / search capabilities. */
     plugins?: LinkPickerPlugin[];
     /** If set true, Link picker will show the loading spinner where the tabs and results will show. */
@@ -166,6 +168,8 @@ type CustomLinkPickerMessages = {
     linkTextLabel?: MessageDescriptor;
     /** Placeholder for the link display text field */
     linkTextPlaceholder?: MessageDescriptor;
+    /** Helper text for the link display text field */
+    linkHelperTextLabel?: MessageDescriptor;
     /** Label for the submit button */
     submitButtonLabel?: MessageDescriptor;
 };

package/dist/types-ts4.5/common/ui/empty-state/index.d.ts

@@ -4,6 +4,8 @@ type EmptyStateProps = {
     testId?: string;
     description?: React.ReactNode;
     renderImage?: () => React.ReactNode;
+    /** Only rendered if fg `platform-linking-visual-refresh-link-picker` is enabled */
+    action?: React.ReactNode;
 };
-export declare const EmptyState: ({ testId, header, description, renderImage }: EmptyStateProps) => JSX.Element;
+export declare const EmptyState: ({ testId, header, description, action, renderImage, }: EmptyStateProps) => JSX.Element;
 export {};

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

@@ -21,5 +21,6 @@ export declare const testIds: {
     readonly linkPicker: "link-picker";
     readonly urlInputField: "link-url";
     readonly textInputField: "link-text";
+    readonly linkHelperText: "link-helper-text";
 };
 export declare const LinkPicker: import("react").ComponentType<LinkPickerProps>;

package/dist/types-ts4.5/ui/link-picker/messages.d.ts

@@ -65,6 +65,16 @@ export declare const linkTextMessages: {
         defaultMessage: string;
         description: string;
     };
+    linkHelperTextLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkHelperTextAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export declare const timeMessages: {
     updated: {

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

@@ -12,8 +12,18 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    searchErrorAction: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export declare const testIds: {
     searchError: string;
 };
-export declare const LinkSearchError: () => React.JSX.Element;
+type LinkSearchErrorProps = {
+    /** Only used if fg `platform-linking-visual-refresh-link-picker` is enabled */
+    onRetry?: () => void;
+};
+export declare const LinkSearchError: ({ onRetry }: LinkSearchErrorProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const NoResultsV2SVG: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "3.1.0",
+	"version": "3.1.2",
 	"description": "Standalone link picker",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {
@@ -42,6 +42,9 @@
 		},
 		"bandicoots-a11y-link-picker-styling": {
 			"type": "boolean"
+		},
+		"platform-linking-visual-refresh-link-picker": {
+			"type": "boolean"
 		}
 	},
 	"scripts": {
@@ -50,12 +53,12 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/atlassian-context": "^0.2.0",
-		"@atlaskit/button": "^21.1.0",
+		"@atlaskit/button": "^22.0.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/frontend-utilities": "^3.0.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/icon": "^25.0.0",
+		"@atlaskit/icon": "^25.2.0",
 		"@atlaskit/intl-messages-provider": "^2.0.0",
 		"@atlaskit/linking-common": "^8.0.0",
 		"@atlaskit/onboarding": "^13.0.0",
@@ -70,7 +73,7 @@
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.2",
+		"@compiled/react": "^0.18.3",
 		"@react-loosely-lazy/manifest": "^1.0.0",
 		"date-fns": "^2.17.0",
 		"react-loosely-lazy": "^1.0.0",