@atlaskit/link-datasource 4.5.0 → 4.7.0

package/dist/es2019/ui/jira-issues-modal/jira-search-container/index.js

@@ -4,7 +4,8 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
-import { Flex } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Flex, Text } from '@atlaskit/primitives/compiled';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { BasicSearchInput } from '../../common/modal/basic-search-input';
 import { basicSearchInputMessages } from '../../common/modal/basic-search-input/messages';
@@ -17,8 +18,11 @@ import { JiraJQLEditor } from '../jql-editor';
 import { buildJQL } from './buildJQL';
 import { modeSwitcherMessages } from './messages';
 const styles = {
+  basicSearchInputBoxStyles: "_1bsb1osq",
   basicSearchInputContainerStyles: "_16jlkb7n",
-  inputContainerStyles: "_4cvr1q9y _1e0c1txw _1tket9kd"
+  inputContainerStylesOld: "_4cvr1q9y _1e0c1txw _1tket9kd",
+  inputContainerStyles: "_4cvr1y6m _1e0c1txw _1tket9kd",
+  modeSwitcherContainerStyles: "_19pk1b66"
 };
 export const DEFAULT_JQL_QUERY = 'ORDER BY created DESC';
 export const ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
@@ -171,9 +175,51 @@ export const JiraSearchContainer = props => {
       setCloudId(currentCloudId);
     }
   }, [currentCloudId, cloudId, setSearchBarJql]);
+  if (fg('platform-linking-visual-refresh-sllv')) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "jira-search-container",
+      className: ax([styles.inputContainerStyles])
+    }, currentSearchMethod === 'basic' && /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.basicSearchInputBoxStyles
+    }, /*#__PURE__*/React.createElement(Flex, {
+      alignItems: "center",
+      xcss: styles.basicSearchInputContainerStyles
+    }, /*#__PURE__*/React.createElement(BasicSearchInput, {
+      isSearching: isSearching,
+      onChange: handleBasicSearchChange,
+      onSearch: handleSearch,
+      searchTerm: basicSearchTerm,
+      placeholder: basicSearchInputMessages.basicTextSearchLabel,
+      ariaLabel: basicSearchInputMessages.basicTextSearchLabel,
+      testId: "jira-datasource-modal",
+      fullWidth: false
+    }), /*#__PURE__*/React.createElement(BasicFilters, {
+      jql: searchBarJql,
+      site: site,
+      onChange: handleBasicFilterSelectionChange,
+      selections: filterSelections,
+      isJQLHydrating: basicFilterHydrationStatus === 'loading'
+    })), currentSearchMethod === 'basic' && /*#__PURE__*/React.createElement(Text, {
+      size: "small",
+      color: "color.text.subtlest",
+      testId: "jira-search-placeholder"
+    }, formatMessage(basicSearchInputMessages.basicTextSearchLabel))), currentSearchMethod === 'jql' && /*#__PURE__*/React.createElement(JiraJQLEditor, {
+      cloudId: cloudId || '',
+      isSearching: isSearching,
+      onChange: onQueryChange,
+      onSearch: handleSearch,
+      query: searchBarJql
+    }), /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.modeSwitcherContainerStyles
+    }, /*#__PURE__*/React.createElement(ModeSwitcher, {
+      onOptionValueChange: onSearchMethodChange,
+      selectedOptionValue: currentSearchMethod,
+      options: modeSwitcherOptions
+    })));
+  }
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "jira-search-container",
-    className: ax([styles.inputContainerStyles])
+    className: ax([styles.inputContainerStylesOld])
   }, currentSearchMethod === 'basic' && /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     xcss: styles.basicSearchInputContainerStyles
@@ -183,6 +229,7 @@ export const JiraSearchContainer = props => {
     onSearch: handleSearch,
     searchTerm: basicSearchTerm,
     placeholder: basicSearchInputMessages.basicTextSearchLabel,
+    ariaLabel: basicSearchInputMessages.basicTextSearchLabel,
     testId: "jira-datasource-modal",
     fullWidth: false
   }), /*#__PURE__*/React.createElement(BasicFilters, {

package/dist/es2019/ui/jira-issues-modal/modal/index.js

@@ -396,7 +396,11 @@ const PlainJiraIssuesConfigModal = props => {
     searchCount: totalCount,
     url: jqlUrl,
     prefixTextType: "issue",
-    testId: "jira-datasource-modal-total-issues-count"
+    testId: "jira-datasource-modal-total-issues-count",
+    styles: fg('platform-linking-visual-refresh-sllv') ? {
+      color: "var(--ds-text, #172B4D)",
+      font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+    } : undefined
   }), /*#__PURE__*/React.createElement(CancelButton, {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,

package/dist/esm/common/ui/spot/error-state/error/assets/dark.svg

@@ -1,5 +1,8 @@
-<svg width="275" height="275" viewBox="0 0 275 275" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M55.99 215.63L56.08 215.81H218.91L219.01 215.63L137.5 64.9902L55.99 215.63Z" fill="#4B4D51"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M134.115 173.95V118.94H141.445V173.95H134.115Z" fill="#101214"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M136.432 183.039C136.965 182.943 137.474 182.915 137.91 182.915C138.371 182.915 138.828 182.947 139.287 183.018L139.304 183.02L139.321 183.023C142.228 183.498 144.648 185.521 145.234 188.753C145.337 189.301 145.365 189.827 145.365 190.26C145.365 190.596 145.348 190.974 145.295 191.375V191.436L145.237 191.758C144.659 194.981 142.245 197.029 139.321 197.507L139.304 197.51L139.287 197.512C138.828 197.583 138.371 197.615 137.91 197.615C137.471 197.615 136.958 197.586 136.42 197.489C133.551 196.992 131.143 194.987 130.557 191.769C130.455 191.23 130.425 190.726 130.425 190.27C130.425 189.819 130.454 189.299 130.559 188.749C131.152 185.581 133.51 183.531 136.432 183.039ZM137.755 190.251C137.755 190.257 137.755 190.263 137.755 190.27C137.755 190.273 137.755 190.276 137.755 190.279C137.758 190.28 137.762 190.28 137.766 190.28C137.8 190.283 137.848 190.285 137.91 190.285C137.957 190.285 137.998 190.284 138.035 190.282C138.035 190.275 138.035 190.268 138.035 190.26C138.035 190.256 138.035 190.252 138.035 190.248C137.998 190.246 137.957 190.245 137.91 190.245C137.848 190.245 137.8 190.247 137.766 190.25C137.762 190.25 137.758 190.251 137.755 190.251Z" fill="#101214"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 275 275">
+	<path fill="#4B4D51" d="M191.87 88.67c-2.28-4.36-5.07-8.68-8.3-12.86-3.27-4.23-6.8-8.07-10.5-11.4-21.6-19.51-49.11-22.5-75.49-8.19a93.066 93.066 0 0 0-12.54 8.22 94.563 94.563 0 0 0-11.53 10.51c-20.39 22.01-24.43 49.35-11.09 75.03 2.3 4.42 5.12 8.81 8.39 13.04 3.23 4.18 6.72 7.96 10.37 11.26 12.5 11.29 27.05 17.01 42.25 17.01 10.9 0 22.13-2.94 33.18-8.88 4.46-2.4 8.86-5.26 13.07-8.52 4.06-3.14 7.79-6.53 11.11-10.07 20.52-21.96 24.56-49.35 11.08-75.14v-.01Zm-30.56 74.37c-3.61 2.79-7.37 5.25-11.17 7.29-21.38 11.48-42.6 9.27-59.76-6.23-3.05-2.76-5.98-5.94-8.72-9.48-2.77-3.59-5.16-7.28-7.08-10.97-10.67-20.53-7.48-41.63 8.98-59.4 2.93-3.17 6.25-6.19 9.86-8.98 3.47-2.69 7.07-5.04 10.7-7.01 8.96-4.86 17.91-7.28 26.57-7.28 11.89 0 23.21 4.56 33.2 13.59 3.09 2.79 6.07 6.03 8.84 9.62 2.73 3.54 5.09 7.18 6.99 10.82 10.77 20.62 7.6 41.73-8.95 59.44-2.81 3.01-6 5.9-9.48 8.59h.02Z"/>
+	<path fill="#4B4D51" d="M179.96 171c-3.54-4.93-7.34-4.9-11.05-2.03-3.48 2.69-4.41 6.33-.7 11.12l4.24 5.48 11.75-9.09-4.24-5.48Z"/>
+	<path fill="#4B4D51" d="m187.155 174.199-17.642 13.64 33.152 42.878 17.642-13.64-33.152-42.878Z"/>
+	<path fill="#7E8188" d="m184.32 176.391-11.97 9.255 11.243 14.54 11.969-9.254-11.242-14.541Z"/>
+	<path fill="#4B4D51" fill-rule="evenodd" d="m157.715 95.826-53.98 53.979-7.07-7.071 53.979-53.98 7.071 7.072Z" clip-rule="evenodd"/>
+	<path fill="#4B4D51" fill-rule="evenodd" d="m150.644 149.805-53.98-53.98 7.071-7.07 53.98 53.979-7.071 7.071Z" clip-rule="evenodd"/>
 </svg>

package/dist/esm/common/ui/spot/error-state/error/assets/light.svg

@@ -1,5 +1,8 @@
-<svg width="275" height="275" viewBox="0 0 275 275" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M55.99 215.63L56.08 215.81H218.91L219.01 215.63L137.5 64.9902L55.99 215.63Z" fill="#DDDEE1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M134.115 173.95V118.94H141.445V173.95H134.115Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M136.432 183.039C136.965 182.943 137.474 182.915 137.91 182.915C138.371 182.915 138.828 182.947 139.287 183.018L139.304 183.02L139.321 183.023C142.228 183.498 144.648 185.521 145.234 188.753C145.337 189.301 145.365 189.827 145.365 190.26C145.365 190.596 145.348 190.974 145.295 191.375V191.436L145.237 191.758C144.659 194.981 142.245 197.029 139.321 197.507L139.304 197.51L139.287 197.512C138.828 197.583 138.371 197.615 137.91 197.615C137.471 197.615 136.958 197.586 136.42 197.489C133.551 196.992 131.143 194.987 130.556 191.769C130.455 191.23 130.425 190.726 130.425 190.27C130.425 189.819 130.454 189.299 130.559 188.749C131.152 185.581 133.51 183.531 136.432 183.039ZM137.755 190.251C137.755 190.257 137.755 190.263 137.755 190.27C137.755 190.273 137.755 190.276 137.755 190.279C137.758 190.28 137.762 190.28 137.766 190.28C137.8 190.283 137.848 190.285 137.91 190.285C137.957 190.285 137.998 190.284 138.035 190.282C138.035 190.275 138.035 190.268 138.035 190.26C138.035 190.256 138.035 190.252 138.035 190.248C137.998 190.246 137.957 190.245 137.91 190.245C137.848 190.245 137.8 190.247 137.766 190.25C137.762 190.25 137.758 190.251 137.755 190.251Z" fill="white"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 275 275">
+	<path fill="#fff" d="M185.8 91.84c-2.07-3.97-4.61-7.92-7.64-11.84-3.07-3.97-6.31-7.47-9.67-10.51-20.01-18.08-44.6-19.74-67.63-7.25-3.93 2.13-7.81 4.67-11.62 7.61-3.97 3.07-7.54 6.33-10.7 9.74C60.71 98.83 56.14 123 68.5 146.8c2.09 4.02 4.66 8.03 7.73 12.01 3.03 3.92 6.22 7.37 9.54 10.37 19.88 17.95 44.45 19.62 67.59 7.18 4.1-2.2 8.15-4.83 12.12-7.9 3.81-2.94 7.24-6.07 10.29-9.33 17.91-19.17 22.48-43.43 10.01-67.29h.02Z"/>
+	<path fill="#DDDEE1" d="M123.44 191.28c-15.2 0-29.74-5.72-42.25-17.01-3.65-3.3-7.14-7.09-10.37-11.26-3.27-4.23-6.1-8.62-8.39-13.04-13.34-25.67-9.3-53.02 11.09-75.03 3.45-3.72 7.33-7.26 11.53-10.51 4.05-3.13 8.27-5.9 12.54-8.22 26.38-14.31 53.9-11.32 75.49 8.19 3.69 3.34 7.22 7.17 10.5 11.4 3.23 4.17 6.02 8.5 8.3 12.86 13.48 25.79 9.44 53.18-11.08 75.14-3.31 3.55-7.05 6.94-11.11 10.07-4.21 3.25-8.61 6.12-13.07 8.52-11.05 5.94-22.29 8.88-33.18 8.88v.01Zm7.25-130.3c-8.65 0-17.61 2.41-26.57 7.28-3.62 1.97-7.22 4.33-10.7 7.01-3.61 2.79-6.93 5.81-9.86 8.98-16.46 17.77-19.65 38.86-8.98 59.4 1.92 3.69 4.3 7.39 7.08 10.97 2.73 3.53 5.66 6.72 8.72 9.48 17.16 15.5 38.38 17.71 59.76 6.23 3.8-2.04 7.56-4.49 11.17-7.29 3.48-2.69 6.66-5.58 9.48-8.59 16.55-17.71 19.72-38.82 8.95-59.44-1.9-3.64-4.26-7.29-6.99-10.82-2.78-3.59-5.75-6.83-8.84-9.62-10-9.03-21.32-13.59-33.2-13.59h-.02Z"/><path fill="#DDDEE1" d="M179.96 171c-3.54-4.93-7.34-4.9-11.05-2.03-3.48 2.69-4.41 6.33-.7 11.12l4.24 5.48 11.75-9.09-4.24-5.48Z"/>
+	<path fill="#DDDEE1" d="m187.155 174.199-17.642 13.64 33.152 42.878 17.642-13.64-33.152-42.878Z"/>
+	<path fill="#B7B9BE" d="m184.32 176.391-11.97 9.255 11.243 14.54 11.969-9.254-11.242-14.541Z"/>
+	<path fill="#DDDEE1" fill-rule="evenodd" d="m157.715 95.826-53.98 53.979-7.07-7.071 53.979-53.98 7.071 7.072Z" clip-rule="evenodd"/>
+	<path fill="#DDDEE1" fill-rule="evenodd" d="m150.644 149.805-53.98-53.98 7.071-7.07 53.98 53.979-7.071 7.071Z" clip-rule="evenodd"/>
 </svg>

package/dist/esm/common/ui/spot/error-state/error-old/assets/dark.svg

@@ -0,0 +1,5 @@
+<svg width="275" height="275" viewBox="0 0 275 275" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.99 215.63L56.08 215.81H218.91L219.01 215.63L137.5 64.9902L55.99 215.63Z" fill="#4B4D51"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M134.115 173.95V118.94H141.445V173.95H134.115Z" fill="#101214"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M136.432 183.039C136.965 182.943 137.474 182.915 137.91 182.915C138.371 182.915 138.828 182.947 139.287 183.018L139.304 183.02L139.321 183.023C142.228 183.498 144.648 185.521 145.234 188.753C145.337 189.301 145.365 189.827 145.365 190.26C145.365 190.596 145.348 190.974 145.295 191.375V191.436L145.237 191.758C144.659 194.981 142.245 197.029 139.321 197.507L139.304 197.51L139.287 197.512C138.828 197.583 138.371 197.615 137.91 197.615C137.471 197.615 136.958 197.586 136.42 197.489C133.551 196.992 131.143 194.987 130.557 191.769C130.455 191.23 130.425 190.726 130.425 190.27C130.425 189.819 130.454 189.299 130.559 188.749C131.152 185.581 133.51 183.531 136.432 183.039ZM137.755 190.251C137.755 190.257 137.755 190.263 137.755 190.27C137.755 190.273 137.755 190.276 137.755 190.279C137.758 190.28 137.762 190.28 137.766 190.28C137.8 190.283 137.848 190.285 137.91 190.285C137.957 190.285 137.998 190.284 138.035 190.282C138.035 190.275 138.035 190.268 138.035 190.26C138.035 190.256 138.035 190.252 138.035 190.248C137.998 190.246 137.957 190.245 137.91 190.245C137.848 190.245 137.8 190.247 137.766 190.25C137.762 190.25 137.758 190.251 137.755 190.251Z" fill="#101214"/>
+</svg>

package/dist/esm/common/ui/spot/error-state/error-old/assets/light.svg

@@ -0,0 +1,5 @@
+<svg width="275" height="275" viewBox="0 0 275 275" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.99 215.63L56.08 215.81H218.91L219.01 215.63L137.5 64.9902L55.99 215.63Z" fill="#DDDEE1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M134.115 173.95V118.94H141.445V173.95H134.115Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M136.432 183.039C136.965 182.943 137.474 182.915 137.91 182.915C138.371 182.915 138.828 182.947 139.287 183.018L139.304 183.02L139.321 183.023C142.228 183.498 144.648 185.521 145.234 188.753C145.337 189.301 145.365 189.827 145.365 190.26C145.365 190.596 145.348 190.974 145.295 191.375V191.436L145.237 191.758C144.659 194.981 142.245 197.029 139.321 197.507L139.304 197.51L139.287 197.512C138.828 197.583 138.371 197.615 137.91 197.615C137.471 197.615 136.958 197.586 136.42 197.489C133.551 196.992 131.143 194.987 130.556 191.769C130.455 191.23 130.425 190.726 130.425 190.27C130.425 189.819 130.454 189.299 130.559 188.749C131.152 185.581 133.51 183.531 136.432 183.039ZM137.755 190.251C137.755 190.257 137.755 190.263 137.755 190.27C137.755 190.273 137.755 190.276 137.755 190.279C137.758 190.28 137.762 190.28 137.766 190.28C137.8 190.283 137.848 190.285 137.91 190.285C137.957 190.285 137.998 190.284 138.035 190.282C138.035 190.275 138.035 190.268 138.035 190.26C138.035 190.256 138.035 190.252 138.035 190.248C137.998 190.246 137.957 190.245 137.91 190.245C137.848 190.245 137.8 190.247 137.766 190.25C137.762 190.25 137.758 190.251 137.755 190.251Z" fill="white"/>
+</svg>

package/dist/esm/common/ui/spot/error-state/error-old/index.js

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { RenderSVG } from '../../../common/render-svg';
+import Dark from './assets/dark.svg';
+import Light from './assets/light.svg';
+export var SpotErrorOld = function SpotErrorOld(props) {
+  return /*#__PURE__*/React.createElement(RenderSVG, _extends({
+    src: Light,
+    srcDark: Dark
+  }, props));
+};

package/dist/esm/common/utils/withFeatureFlaggedComponent.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+/**
+ * This function is used to switch between two components based on a feature flag
+ * @param ComponentOld
+ * @param ComponentNext
+ * @param featureFlagFn function that returns a boolean value to switch to the next component, e.g. () => fg('my_flag_name')
+ * @returns
+ */
+export var withFeatureFlaggedComponent = function withFeatureFlaggedComponent(ComponentOld, ComponentNext, featureFlagFn) {
+  return function (props) {
+    // copied from packages/editor/editor-common/src/utils/withFeatureFlaggedComponent.tsx
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return featureFlagFn() ? /*#__PURE__*/React.createElement(ComponentNext, props) : /*#__PURE__*/React.createElement(ComponentOld, props);
+  };
+};

package/dist/esm/ui/assets-modal/search-container/object-schema-select/index.js

@@ -17,7 +17,7 @@ import debounce from 'debounce-promise';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { Field } from '@atlaskit/form';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { AsyncSelect, PopupSelect } from '@atlaskit/select';
 import { layers } from '@atlaskit/theme/constants';
@@ -132,7 +132,12 @@ export var AssetsObjectSchemaSelect = function AssetsObjectSchemaSelect(_ref2) {
           triggerProps = _objectWithoutProperties(_ref5, _excluded3);
         return /*#__PURE__*/React.createElement(Button, _extends({}, triggerProps, {
           isSelected: isOpen,
-          iconAfter: ChevronDownIcon
+          iconAfter: function iconAfter() {
+            return /*#__PURE__*/React.createElement(ChevronDownIcon, {
+              label: "",
+              color: "currentColor"
+            });
+          }
         }), ((_restFieldProps$value = restFieldProps.value) === null || _restFieldProps$value === void 0 ? void 0 : _restFieldProps$value.label) || formatMessage(objectSchemaSelectMessages.placeholder));
       }
     })) : /*#__PURE__*/React.createElement(AsyncSelect, _extends({

package/dist/esm/ui/common/modal/basic-search-input/index.compiled.css

@@ -2,4 +2,5 @@
 ._1o9zkb7n{flex-shrink:1}
 ._2hwx12x7{margin-right:var(--ds-space-075,6px)}
 ._i0dlf1ug{flex-basis:0%}
+._p12f1mjv{max-width:300px}
 ._p12fr0r7{max-width:250px}

package/dist/esm/ui/common/modal/basic-search-input/index.js

@@ -11,6 +11,7 @@ import { useDatasourceAnalyticsEvents } from '../../../../analytics';
 import { basicSearchInputMessages } from './messages';
 var searchButtonStyles = null;
 var formStyles = null;
+var formWithMaxWidthStylesOld = null;
 var formWithMaxWidthStyles = null;
 export var BasicSearchInput = function BasicSearchInput(_ref) {
   var isDisabled = _ref.isDisabled,
@@ -20,7 +21,8 @@ export var BasicSearchInput = function BasicSearchInput(_ref) {
     searchTerm = _ref.searchTerm,
     fullWidth = _ref.fullWidth,
     testId = _ref.testId,
-    placeholder = _ref.placeholder;
+    placeholder = _ref.placeholder,
+    ariaLabel = _ref.ariaLabel;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
@@ -35,7 +37,7 @@ export var BasicSearchInput = function BasicSearchInput(_ref) {
   };
   return /*#__PURE__*/React.createElement("form", {
     onSubmit: handleFormSubmit,
-    className: ax([fullWidth ? "_16jlkb7n _1o9zkb7n _i0dlf1ug" : "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12fr0r7"])
+    className: ax([fullWidth ? "_16jlkb7n _1o9zkb7n _i0dlf1ug" : fg('platform-linking-visual-refresh-sllv') ? "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12f1mjv" : "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12fr0r7"])
   }, /*#__PURE__*/React.createElement(Textfield, {
     elemAfterInput: /*#__PURE__*/React.createElement(LoadingButton, {
       appearance: "primary",
@@ -54,9 +56,9 @@ export var BasicSearchInput = function BasicSearchInput(_ref) {
     }),
     autoFocus: true,
     onChange: onChange,
-    placeholder: formatMessage(placeholder),
+    placeholder: fg('platform-linking-visual-refresh-sllv') ? undefined : formatMessage(placeholder),
     testId: "".concat(testId, "--basic-search-input"),
     value: searchTerm,
-    "aria-label": formatMessage(placeholder)
+    "aria-label": formatMessage(fg('platform-linking-visual-refresh-sllv') ? ariaLabel : placeholder)
   }));
 };

package/dist/esm/ui/common/modal/display-view-dropdown/display-view-drop-down.js

@@ -1,10 +1,14 @@
 /* display-view-drop-down.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["triggerRef"];
 import "./display-view-drop-down.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { cx } from '@compiled/react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { displayViewDropDownMessages } from './messages';
@@ -67,26 +71,62 @@ export var DisplayViewDropDown = function DisplayViewDropDown(_ref) {
     formatMessage = _useIntl.formatMessage;
   var isTable = viewMode === 'table';
   var triggerText = isTable ? formatMessage(displayViewDropDownMessages.viewModeListLabel) : formatMessage(displayViewDropDownMessages.viewModeInlineLinkLabel);
+  if (fg('platform-linking-visual-refresh-sllv')) {
+    return /*#__PURE__*/React.createElement(DropdownMenu, {
+      trigger: function trigger(_ref2) {
+        var triggerRef = _ref2.triggerRef,
+          triggerProps = _objectWithoutProperties(_ref2, _excluded);
+        return /*#__PURE__*/React.createElement(Button, _extends({}, triggerProps, {
+          ref: triggerRef,
+          iconAfter: function iconAfter() {
+            return /*#__PURE__*/React.createElement(ChevronDownIcon, {
+              label: "",
+              color: "currentColor"
+            });
+          }
+        }), triggerText);
+      },
+      testId: "datasource-modal--view-drop-down"
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.dropDownItemGroupStyles
+    }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
+      testId: "dropdown-item-table",
+      onClick: function onClick() {
+        return onViewModeChange('table');
+      },
+      isSelected: isTable,
+      description: formatMessage(displayViewDropDownMessages.viewModeListDescription),
+      elemBefore: ListIcon
+    }, /*#__PURE__*/React.createElement(FormattedMessage, displayViewDropDownMessages.viewModeListLabel)), /*#__PURE__*/React.createElement(DropdownItem, {
+      testId: "dropdown-item-inline-link",
+      onClick: function onClick() {
+        return onViewModeChange('inline');
+      },
+      isSelected: !isTable,
+      description: formatMessage(displayViewDropDownMessages.viewModeInlineLinkDescription),
+      elemBefore: InlineIcon
+    }, /*#__PURE__*/React.createElement(FormattedMessage, displayViewDropDownMessages.viewModeInlineLinkLabel)))));
+  }
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: triggerText,
     testId: "datasource-modal--view-drop-down"
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(fg('platform-linking-visual-refresh-sllv') ? styles.dropDownItemGroupStyles : styles.dropDownItemGroupStylesOld)
+    xcss: styles.dropDownItemGroupStylesOld
   }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
     testId: "dropdown-item-table",
     onClick: function onClick() {
       return onViewModeChange('table');
     },
     isSelected: isTable,
-    description: formatMessage(fg('platform-linking-visual-refresh-sllv') ? displayViewDropDownMessages.viewModeListDescription : displayViewDropDownMessages.viewModeListDescriptionOld),
-    elemBefore: fg('platform-linking-visual-refresh-sllv') ? ListIcon : ListIconOld
+    description: formatMessage(displayViewDropDownMessages.viewModeListDescriptionOld),
+    elemBefore: ListIconOld
   }, /*#__PURE__*/React.createElement(FormattedMessage, displayViewDropDownMessages.viewModeListLabel)), /*#__PURE__*/React.createElement(DropdownItem, {
     testId: "dropdown-item-inline-link",
     onClick: function onClick() {
       return onViewModeChange('inline');
     },
     isSelected: !isTable,
-    description: formatMessage(fg('platform-linking-visual-refresh-sllv') ? displayViewDropDownMessages.viewModeInlineLinkDescription : displayViewDropDownMessages.viewModeInlineLinkDescriptionOld),
-    elemBefore: fg('platform-linking-visual-refresh-sllv') ? InlineIcon : InlineIconOld
+    description: formatMessage(displayViewDropDownMessages.viewModeInlineLinkDescriptionOld),
+    elemBefore: InlineIconOld
   }, /*#__PURE__*/React.createElement(FormattedMessage, displayViewDropDownMessages.viewModeInlineLinkLabel)))));
 };

package/dist/esm/ui/common/modal/mode-switcher/index.compiled.css

@@ -1,28 +1,44 @@
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko1b66{border-radius:var(--ds-space-050,4px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
 ._zulpv77o{gap:var(--ds-space-025,2px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._1h6d1yqz{border-color:var(--ds-border-selected,#0c66e4)}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
 ._16qs1jze{box-shadow:var(--ds-shadow-overflow,0 0 1px rgba(9,30,66,.12),0 0 8px rgba(9,30,66,.16))}
 ._18u0v47k{margin-left:var(--ds-space-250,20px)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1bah1h6o{justify-content:center}
 ._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
 ._1j55105o:disabled{opacity:.5}
 ._1p1dangw{text-transform:uppercase}
+._1tke1tcg{min-height:24px}
 ._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhkkwt5{background-color:var(--_t0vtv2)}
 ._bfhklslw{background-color:var(--_1jkcdu5)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._syaz111d{color:var(--_uz32ib)}
+._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
 ._syaziwyp{color:var(--_k4gmmg)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
 ._vchhusvi{box-sizing:border-box}
 ._d0al13gf:hover{cursor:not-allowed}
 ._d0altlke:hover{cursor:pointer}
 ._irr31j28:hover{background-color:transparent}
+._irr3fg4m:hover{background-color:var(--ds-background-selected,#e9f2ff)}
 ._irr3kwt5:hover{background-color:var(--_t0vtv2)}
 ._irr3u7au:hover{background-color:var(--_15egq0b)}

package/dist/esm/ui/common/modal/mode-switcher/index.js

@@ -3,16 +3,20 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N20, N30A, N60, N700 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DatasourceAction } from '../../../../analytics/types';
 import { useUserInteractions } from '../../../../contexts/user-interactions';
 import { DisplayViewDropDown } from '../display-view-dropdown/display-view-drop-down';
 import { useViewModeContext } from './useViewModeContext';
+var modeSwitcherStylesOld = null;
 var modeSwitcherStyles = null;
 var compactModeSwitcherStyles = null;
 var modeInputStyles = null;
+var modeSwitcherLabelStylesOld = null;
 var modeSwitcherLabelStyles = null;
+var modeSwitcherLabelSelectedStylesOld = null;
 var modeSwitcherLabelSelectedStyles = null;
 var modeSwitcherLabelDisabledStyles = null;
 var modeSwitcherDisabledStyles = null;
@@ -31,7 +35,7 @@ export var ModeSwitcher = function ModeSwitcher(props) {
   return options.length > 0 ? /*#__PURE__*/React.createElement("fieldset", {
     "data-testid": "mode-toggle-container",
     disabled: isDisabled,
-    className: ax(["_2rko1b66 _zulp1b66 _4cvr1h6o _bfhklslw _vchhusvi _1e0c116y _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _18u0v47k _1j55105o", isCompact && "_zulpv77o _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"]),
+    className: ax([fg('platform-linking-visual-refresh-sllv') ? "_2rko1b66 _1h6dmuej _189ee4h9 _1dqonqa1 _4cvr1h6o _vchhusvi _1e0c116y _u5f31b66 _19bv1b66 _18u0v47k _4t3izwfg _1j55105o" : "_2rko1b66 _zulp1b66 _4cvr1h6o _bfhklslw _vchhusvi _1e0c116y _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _18u0v47k _1j55105o", isCompact && "_zulpv77o _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"]),
     style: {
       "--_1jkcdu5": ix("var(--ds-background-neutral, ".concat(N20, ")"))
     }
@@ -45,7 +49,25 @@ export var ModeSwitcher = function ModeSwitcher(props) {
       key: value,
       content: tooltipText
     }, function (tooltipProps) {
-      return /*#__PURE__*/React.createElement("label", _extends({}, tooltipProps, {
+      return fg('platform-linking-visual-refresh-sllv') ? /*#__PURE__*/React.createElement("label", _extends({}, tooltipProps, {
+        key: value,
+        "data-testid": "mode-toggle-".concat(value),
+        className: ax(["_11c82smr _2rko1b66 _1h6d1j28 _189ee4h9 _1dqonqa1 _syaziwyp _vchhusvi _k48p1wq8 _u5f3utpp _19bvutpp _1tke1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _d0altlke _irr3u7au", isCompact && "_ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66", isSelected && "_2rko1b66 _1h6d1yqz _bfhkfg4m _syazaqb7 _d0altlke _irr3fg4m", isDisabled && "_irr31j28 _d0al13gf", isOptionDisabled && "_syaz111d", isOptionDisabled && "_irr31j28 _d0al13gf"]),
+        style: {
+          "--_k4gmmg": ix("var(--ds-text-subtlest, ".concat(N700, ")")),
+          "--_15egq0b": ix("var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")),
+          "--_uz32ib": ix("var(--ds-text-disabled, ".concat(N60, ")"))
+        }
+      }), label, /*#__PURE__*/React.createElement("input", {
+        "aria-checked": isSelected,
+        "aria-disabled": isOptionDisabled,
+        checked: isSelected,
+        disabled: isOptionDisabled,
+        onChange: handleModeChange,
+        type: "radio",
+        value: value,
+        className: ax(["_1e0cglyw"])
+      })) : /*#__PURE__*/React.createElement("label", _extends({}, tooltipProps, {
         key: value,
         "data-testid": "mode-toggle-".concat(value),
         className: ax(["_11c8dcr7 _2rko1b66 _syaziwyp _k48p1pd9 _1p1dangw _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _d0altlke _irr3u7au", isCompact && "_ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66", isSelected && "_2rko1b66 _bfhkkwt5 _16qs1jze _d0altlke _irr3kwt5", isDisabled && "_irr31j28 _d0al13gf", isOptionDisabled && "_syaz111d", isOptionDisabled && "_irr31j28 _d0al13gf"]),

package/dist/esm/ui/common/modal/popup-select/checkbox-option-visual-refresh-sllv.compiled.css

@@ -0,0 +1,15 @@
+
+._189eyh40{border-width:2px}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}._16qsglyw{box-shadow:none}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._y4tipxbi{padding-inline-end:var(--ds-space-200,1pc)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
+._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}

package/dist/esm/ui/common/modal/popup-select/checkbox-option-visual-refresh-sllv.js

@@ -0,0 +1,20 @@
+/* checkbox-option-visual-refresh-sllv.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import "./checkbox-option-visual-refresh-sllv.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { CheckboxOption } from '@atlaskit/select';
+var checkboxStyles = null;
+var checkboxSelectedStyles = null;
+var checkboxFocusedStyles = null;
+export var CheckboxOptionVisualRefreshSllv = function CheckboxOptionVisualRefreshSllv(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(CheckboxOption
+  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+  , _extends({}, props, {
+    className: ax(["_189eyh40 _1dqonqa1 _1h6d1j28 _16qsglyw _bfhk1j9a _1q511b66 _85i51b66 _bozgpxbi _y4tipxbi _irr3166n _1di61dty", props.isSelected && "_bfhkfg4m _irr3i1yw _1di619ru", props.isFocused && "_1h6d1p6i"])
+  }), children);
+};

package/dist/esm/ui/common/modal/popup-select/control.compiled.css

@@ -0,0 +1,4 @@
+._19bvh9hh{padding-left:var(--ds-space-100,4px)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f3h9hh{padding-right:var(--ds-space-100,4px)}

package/dist/esm/ui/common/modal/popup-select/control.js

@@ -1,10 +1,17 @@
+/* control.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children"];
+var _excluded = ["children"],
+  _excluded2 = ["children"];
+import "./control.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { components } from '@atlaskit/select';
 import { N40 } from '@atlaskit/theme/colors';
-var popupCustomControlStyles = function popupCustomControlStyles() {
+import { withFeatureFlaggedComponent } from '../../../../common/utils/withFeatureFlaggedComponent';
+var popupCustomControlStylesOld = function popupCustomControlStylesOld() {
   return {
     display: 'flex',
     padding: "var(--ds-space-050, 4px)",
@@ -13,12 +20,32 @@ var popupCustomControlStyles = function popupCustomControlStyles() {
     minHeight: 'auto'
   };
 };
-export var CustomControl = function CustomControl(_ref) {
+var popupCustomControlStyles = function popupCustomControlStyles() {
+  return {
+    display: 'flex',
+    borderRadius: '3px',
+    border: "solid 1px ".concat("var(--ds-border-input, #8C8F97)")
+  };
+};
+var popupCustomControlVisualRefreshStyles = {
+  container: "_ca0q1b66 _n3td1b66 _19bvh9hh _u5f3h9hh"
+};
+export var CustomControlOld = function CustomControlOld(_ref) {
   var children = _ref.children,
     innerProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(components.Control, _extends({}, innerProps, {
-    getStyles: popupCustomControlStyles,
-    appearance: "none"
+    getStyles: popupCustomControlStylesOld
   }), children);
 };
-export default CustomControl;
+export var CustomControl = function CustomControl(_ref2) {
+  var children = _ref2.children,
+    innerProps = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: popupCustomControlVisualRefreshStyles.container
+  }, /*#__PURE__*/React.createElement(components.Control, _extends({}, innerProps, {
+    getStyles: popupCustomControlStyles
+  }), children));
+};
+export default withFeatureFlaggedComponent(CustomControlOld, CustomControl, function () {
+  return fg('platform-linking-visual-refresh-sllv');
+});

package/dist/esm/ui/common/modal/popup-select/dropdownIndicator.js

@@ -2,8 +2,11 @@
 import "./dropdownIndicator.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import CloseIcon from '@atlaskit/icon/core/migration/cross-circle';
-import SearchIcon from '@atlaskit/icon/core/migration/search';
+import CloseIcon from '@atlaskit/icon/core/cross-circle';
+import CloseIconOld from '@atlaskit/icon/core/migration/cross-circle';
+import SearchIconOld from '@atlaskit/icon/core/migration/search';
+import SearchIcon from '@atlaskit/icon/core/search';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { components } from '@atlaskit/select';
 var styles = {
@@ -11,6 +14,20 @@ var styles = {
 };
 var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
   var selectProps = props.selectProps;
+  var closeIcon = fg('platform-linking-visual-refresh-sllv') ? /*#__PURE__*/React.createElement(CloseIcon, {
+    label: ""
+  }) : /*#__PURE__*/React.createElement(CloseIconOld, {
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
+  });
+  var searchIcon = fg('platform-linking-visual-refresh-sllv') ? /*#__PURE__*/React.createElement(SearchIcon, {
+    label: ""
+  }) : /*#__PURE__*/React.createElement(SearchIconOld, {
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
+  });
   return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(Box, {
     xcss: styles.customDropdownIndicatorStyles,
     onClick: function onClick() {
@@ -21,14 +38,6 @@ var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
         });
       }
     }
-  }, selectProps.inputValue ? /*#__PURE__*/React.createElement(CloseIcon, {
-    LEGACY_size: "small",
-    label: "",
-    color: "currentColor"
-  }) : /*#__PURE__*/React.createElement(SearchIcon, {
-    LEGACY_size: "small",
-    label: "",
-    color: "currentColor"
-  })));
+  }, selectProps.inputValue ? closeIcon : searchIcon));
 };
 export default CustomDropdownIndicator;

package/dist/esm/ui/common/modal/popup-select/footer.compiled.css

@@ -1,8 +1,12 @@
 
 ._195gutpp{margin-inline:var(--ds-space-150,9pt)}
 ._1mouu2gc{margin-block:var(--ds-space-100,8px)}._15a5nqa1{border-top-style:solid}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._1i53b5v6{border-top-color:var(--ds-border,#dfe1e6)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
 ._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
 ._uwhke4h9{border-top-width:var(--ds-border-width,1px)}