@atlaskit/link-datasource 4.5.0 → 4.7.0

package/dist/esm/ui/jira-issues-modal/jira-search-container/index.compiled.css

@@ -1,4 +1,7 @@
 ._16jlkb7n{flex-grow:1}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
 ._1tket9kd{min-height:72px}
-._4cvr1q9y{align-items:baseline}
+._4cvr1q9y{align-items:baseline}
+._4cvr1y6m{align-items:flex-start}

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

@@ -10,7 +10,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
@@ -23,8 +24,11 @@ import { JiraJQLEditor } from '../jql-editor';
 import { buildJQL } from './buildJQL';
 import { modeSwitcherMessages } from './messages';
 var styles = {
+  basicSearchInputBoxStyles: "_1bsb1osq",
   basicSearchInputContainerStyles: "_16jlkb7n",
-  inputContainerStyles: "_4cvr1q9y _1e0c1txw _1tket9kd"
+  inputContainerStylesOld: "_4cvr1q9y _1e0c1txw _1tket9kd",
+  inputContainerStyles: "_4cvr1y6m _1e0c1txw _1tket9kd",
+  modeSwitcherContainerStyles: "_19pk1b66"
 };
 export var DEFAULT_JQL_QUERY = 'ORDER BY created DESC';
 export var ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
@@ -196,9 +200,51 @@ export var JiraSearchContainer = function 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
@@ -208,6 +254,7 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
     onSearch: handleSearch,
     searchTerm: basicSearchTerm,
     placeholder: basicSearchInputMessages.basicTextSearchLabel,
+    ariaLabel: basicSearchInputMessages.basicTextSearchLabel,
     testId: "jira-datasource-modal",
     fullWidth: false
   }), /*#__PURE__*/React.createElement(BasicFilters, {

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

@@ -406,7 +406,11 @@ var PlainJiraIssuesConfigModal = function 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/types/common/ui/spot/error-state/error-old/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type RenderSVGProps } from '../../../common/render-svg';
+export declare const SpotErrorOld: (props: RenderSVGProps) => React.JSX.Element;

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

@@ -0,0 +1,9 @@
+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 declare const withFeatureFlaggedComponent: <P extends object>(ComponentOld: React.ComponentType<P>, ComponentNext: React.ComponentType<P>, featureFlagFn: () => boolean) => (props: P) => React.JSX.Element;

package/dist/types/ui/common/modal/basic-search-input/index.d.ts

@@ -12,6 +12,11 @@ export interface BasicSearchInputProps {
     searchTerm: string;
     fullWidth?: boolean;
     testId: string;
+    /**
+     * @private
+     * @deprecated Remove on FG clean up of `platform-linking-visual-refresh-sllv`
+     */
     placeholder: MessageDescriptor;
+    ariaLabel: MessageDescriptor;
 }
-export declare const BasicSearchInput: ({ isDisabled, isSearching, onChange, onSearch, searchTerm, fullWidth, testId, placeholder, }: BasicSearchInputProps) => JSX.Element;
+export declare const BasicSearchInput: ({ isDisabled, isSearching, onChange, onSearch, searchTerm, fullWidth, testId, placeholder, ariaLabel, }: BasicSearchInputProps) => JSX.Element;

package/dist/types/ui/common/modal/popup-select/checkbox-option-visual-refresh-sllv.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { OptionProps } from '@atlaskit/react-select';
+import { SelectOption } from './types';
+export declare const CheckboxOptionVisualRefreshSllv: ({ children, ...props }: OptionProps<SelectOption, true>) => JSX.Element;

package/dist/types/ui/common/modal/popup-select/control.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { type ControlProps } from '@atlaskit/select';
 import { type SelectOption } from './types';
+export declare const CustomControlOld: ({ children, ...innerProps }: ControlProps<SelectOption, true>) => React.JSX.Element;
 export declare const CustomControl: ({ children, ...innerProps }: ControlProps<SelectOption, true>) => React.JSX.Element;
-export default CustomControl;
+declare const _default: (props: ControlProps<SelectOption, true>) => React.JSX.Element;
+export default _default;

package/dist/types/ui/common/modal/popup-select/index.d.ts

@@ -4,6 +4,11 @@ import { type CustomMenuListProps } from './menu-list';
 import { type SelectOption } from './types';
 export interface FilterPopupSelectProps {
     buttonLabel: string;
+    /**
+     * This attribute is only consumed and used when the fg
+     * `platform-linking-visual-refresh-sllv` is enabled
+     */
+    searchPlaceholder?: string;
     totalCount?: number;
     filterName: string;
     isDisabled: boolean;
@@ -19,4 +24,4 @@ export interface FilterPopupSelectProps {
     onMenuOpen?: () => void;
     onMenuClose?: () => void;
 }
-export declare const FilterPopupSelect: ({ filterName, totalCount, status, buttonLabel, showLoading, isDisabled, showHydrating, shouldShowFooter, menuListProps, options, selectedOptions, onSelectionChange, onInputChange, onMenuClose, onMenuOpen, }: FilterPopupSelectProps) => React.JSX.Element;
+export declare const FilterPopupSelect: ({ filterName, totalCount, status, buttonLabel, searchPlaceholder, showLoading, isDisabled, showHydrating, shouldShowFooter, menuListProps, options, selectedOptions, onSelectionChange, onInputChange, onMenuClose, onMenuOpen, }: FilterPopupSelectProps) => React.JSX.Element;

package/dist/types/ui/common/modal/popup-select/menu-list/messages.d.ts

@@ -9,11 +9,31 @@ export declare const asyncPopupSelectMessages: {
         defaultMessage: string;
         description: string;
     };
+    noOptionsMessageOld: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    noOptionsDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     errorMessage: {
         id: string;
         defaultMessage: string;
         description: string;
     };
+    errorMessageOld: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    errorDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     showMoreMessage: {
         id: string;
         defaultMessage: string;

package/dist/types/ui/common/modal/popup-select/menu-list/selectMessage.d.ts

@@ -3,7 +3,12 @@ import { type MessageDescriptor } from 'react-intl-next';
 interface CustomSelectMessageProps {
     icon: React.ReactNode;
     message: MessageDescriptor;
+    /**
+     * This attribute is only consumed when the fg `platform-linking-visual-refresh-sllv` is
+     * enabled.
+     */
+    description?: MessageDescriptor;
     testId: string;
 }
-declare const CustomSelectMessage: ({ icon, message, testId }: CustomSelectMessageProps) => React.JSX.Element;
+declare const CustomSelectMessage: ({ icon, message, description, testId }: CustomSelectMessageProps) => React.JSX.Element;
 export default CustomSelectMessage;

package/dist/types/ui/common/modal/search-count/index.d.ts

@@ -4,7 +4,12 @@ interface TableSearchCountProps {
     prefixTextType: 'issue' | 'result' | 'item';
     searchCount: number;
     testId?: string;
+    /**
+     * This attribute is only consumed when the fg
+     * `platform-linking-visual-refresh-sllv` is enabled.
+     */
+    styles?: React.CSSProperties;
 }
 export declare const AssetsItemCount: ({ searchCount, url, testId, }: Pick<TableSearchCountProps, 'testId' | 'url' | 'searchCount'>) => React.JSX.Element;
-declare const TableSearchCount: ({ url, searchCount, testId, prefixTextType, }: TableSearchCountProps) => React.JSX.Element;
+declare const TableSearchCount: ({ url, searchCount, styles: additionalStyles, testId, prefixTextType, }: TableSearchCountProps) => React.JSX.Element;
 export default TableSearchCount;

package/dist/types/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.d.ts

@@ -14,9 +14,34 @@ export declare const asyncPopupSelectMessages: {
         description: string;
         defaultMessage: string;
     };
+    typeLabelOld: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     assigneeLabel: {
         id: string;
         description: string;
         defaultMessage: string;
     };
+    projectSearchPlaceholder: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    statusSearchPlaceholder: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    typeSearchPlaceholder: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    assigneeSearchPlaceholder: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/types-ts4.5/common/ui/spot/error-state/error-old/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type RenderSVGProps } from '../../../common/render-svg';
+export declare const SpotErrorOld: (props: RenderSVGProps) => React.JSX.Element;

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

@@ -0,0 +1,9 @@
+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 declare const withFeatureFlaggedComponent: <P extends object>(ComponentOld: React.ComponentType<P>, ComponentNext: React.ComponentType<P>, featureFlagFn: () => boolean) => (props: P) => React.JSX.Element;

package/dist/types-ts4.5/ui/common/modal/basic-search-input/index.d.ts

@@ -12,6 +12,11 @@ export interface BasicSearchInputProps {
     searchTerm: string;
     fullWidth?: boolean;
     testId: string;
+    /**
+     * @private
+     * @deprecated Remove on FG clean up of `platform-linking-visual-refresh-sllv`
+     */
     placeholder: MessageDescriptor;
+    ariaLabel: MessageDescriptor;
 }
-export declare const BasicSearchInput: ({ isDisabled, isSearching, onChange, onSearch, searchTerm, fullWidth, testId, placeholder, }: BasicSearchInputProps) => JSX.Element;
+export declare const BasicSearchInput: ({ isDisabled, isSearching, onChange, onSearch, searchTerm, fullWidth, testId, placeholder, ariaLabel, }: BasicSearchInputProps) => JSX.Element;

package/dist/types-ts4.5/ui/common/modal/popup-select/checkbox-option-visual-refresh-sllv.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { OptionProps } from '@atlaskit/react-select';
+import { SelectOption } from './types';
+export declare const CheckboxOptionVisualRefreshSllv: ({ children, ...props }: OptionProps<SelectOption, true>) => JSX.Element;

package/dist/types-ts4.5/ui/common/modal/popup-select/control.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { type ControlProps } from '@atlaskit/select';
 import { type SelectOption } from './types';
+export declare const CustomControlOld: ({ children, ...innerProps }: ControlProps<SelectOption, true>) => React.JSX.Element;
 export declare const CustomControl: ({ children, ...innerProps }: ControlProps<SelectOption, true>) => React.JSX.Element;
-export default CustomControl;
+declare const _default: (props: ControlProps<SelectOption, true>) => React.JSX.Element;
+export default _default;

package/dist/types-ts4.5/ui/common/modal/popup-select/index.d.ts

@@ -4,6 +4,11 @@ import { type CustomMenuListProps } from './menu-list';
 import { type SelectOption } from './types';
 export interface FilterPopupSelectProps {
     buttonLabel: string;
+    /**
+     * This attribute is only consumed and used when the fg
+     * `platform-linking-visual-refresh-sllv` is enabled
+     */
+    searchPlaceholder?: string;
     totalCount?: number;
     filterName: string;
     isDisabled: boolean;
@@ -19,4 +24,4 @@ export interface FilterPopupSelectProps {
     onMenuOpen?: () => void;
     onMenuClose?: () => void;
 }
-export declare const FilterPopupSelect: ({ filterName, totalCount, status, buttonLabel, showLoading, isDisabled, showHydrating, shouldShowFooter, menuListProps, options, selectedOptions, onSelectionChange, onInputChange, onMenuClose, onMenuOpen, }: FilterPopupSelectProps) => React.JSX.Element;
+export declare const FilterPopupSelect: ({ filterName, totalCount, status, buttonLabel, searchPlaceholder, showLoading, isDisabled, showHydrating, shouldShowFooter, menuListProps, options, selectedOptions, onSelectionChange, onInputChange, onMenuClose, onMenuOpen, }: FilterPopupSelectProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/common/modal/popup-select/menu-list/messages.d.ts

@@ -9,11 +9,31 @@ export declare const asyncPopupSelectMessages: {
         defaultMessage: string;
         description: string;
     };
+    noOptionsMessageOld: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    noOptionsDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     errorMessage: {
         id: string;
         defaultMessage: string;
         description: string;
     };
+    errorMessageOld: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    errorDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     showMoreMessage: {
         id: string;
         defaultMessage: string;

package/dist/types-ts4.5/ui/common/modal/popup-select/menu-list/selectMessage.d.ts

@@ -3,7 +3,12 @@ import { type MessageDescriptor } from 'react-intl-next';
 interface CustomSelectMessageProps {
     icon: React.ReactNode;
     message: MessageDescriptor;
+    /**
+     * This attribute is only consumed when the fg `platform-linking-visual-refresh-sllv` is
+     * enabled.
+     */
+    description?: MessageDescriptor;
     testId: string;
 }
-declare const CustomSelectMessage: ({ icon, message, testId }: CustomSelectMessageProps) => React.JSX.Element;
+declare const CustomSelectMessage: ({ icon, message, description, testId }: CustomSelectMessageProps) => React.JSX.Element;
 export default CustomSelectMessage;

package/dist/types-ts4.5/ui/common/modal/search-count/index.d.ts

@@ -4,7 +4,12 @@ interface TableSearchCountProps {
     prefixTextType: 'issue' | 'result' | 'item';
     searchCount: number;
     testId?: string;
+    /**
+     * This attribute is only consumed when the fg
+     * `platform-linking-visual-refresh-sllv` is enabled.
+     */
+    styles?: React.CSSProperties;
 }
 export declare const AssetsItemCount: ({ searchCount, url, testId, }: Pick<TableSearchCountProps, 'testId' | 'url' | 'searchCount'>) => React.JSX.Element;
-declare const TableSearchCount: ({ url, searchCount, testId, prefixTextType, }: TableSearchCountProps) => React.JSX.Element;
+declare const TableSearchCount: ({ url, searchCount, styles: additionalStyles, testId, prefixTextType, }: TableSearchCountProps) => React.JSX.Element;
 export default TableSearchCount;

package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.d.ts

@@ -14,9 +14,34 @@ export declare const asyncPopupSelectMessages: {
         description: string;
         defaultMessage: string;
     };
+    typeLabelOld: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     assigneeLabel: {
         id: string;
         description: string;
         defaultMessage: string;
     };
+    projectSearchPlaceholder: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    statusSearchPlaceholder: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    typeSearchPlaceholder: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    assigneeSearchPlaceholder: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "4.5.0",
+	"version": "4.7.0",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/datetime-picker": "^17.0.0",
-		"@atlaskit/dropdown-menu": "^14.0.0",
+		"@atlaskit/dropdown-menu": "^14.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/empty-state": "^9.0.0",
 		"@atlaskit/flag": "^17.1.0",
@@ -77,8 +77,8 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.1.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/react-select": "^2.4.0",
-		"@atlaskit/select": "^20.3.0",
-		"@atlaskit/smart-card": "^36.8.0",
+		"@atlaskit/select": "^20.4.0",
+		"@atlaskit/smart-card": "^36.10.0",
 		"@atlaskit/smart-user-picker": "^8.0.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tag": "^14.0.0",
@@ -106,7 +106,7 @@
 	"devDependencies": {
 		"@af/integration-testing": "^0.5.0",
 		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/json-ld-types": "^1.1.0",
+		"@atlaskit/json-ld-types": "^1.2.0",
 		"@atlaskit/link-provider": "^2.1.0",
 		"@atlaskit/link-test-helpers": "^8.0.0",
 		"@atlaskit/ssr": "^0.4.0",