@atlaskit/link-datasource 7.12.3 → 7.13.0

package/dist/es2019/ui/jira-search-state/index.js

@@ -0,0 +1,82 @@
+/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { cx } from '@atlaskit/css';
+import Heading from '@atlaskit/heading/heading';
+import IntlMessagesProvider from '@atlaskit/intl-messages-provider/main';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Flex } from '@atlaskit/primitives/compiled/flex';
+import { Text } from '@atlaskit/primitives/compiled/text';
+import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
+import { RichIconSearch } from '../../common/ui/rich-icon/search';
+import { SpotSearchNoResult } from '../../common/ui/spot/error-state/search-no-result';
+import { fetchMessagesForLocale } from '../../common/utils/locale/fetch-messages-for-locale';
+import i18nEN from '../../i18n/en';
+import { loadingErrorMessages } from '../common/error-state/messages';
+import { initialStateViewMessages } from '../common/initial-state-view/messages';
+import EmptyState from '../issue-like-table/empty-state';
+const messages = defineMessages({
+  loading: {
+    id: 'link-datasource.jira-search-state.loading',
+    defaultMessage: 'Searching for work items…',
+    description: 'Loading label while an embedded Jira work-item search is running.'
+  }
+});
+const styles = {
+  loading: "_1reo15vq _18m915vq _4t3i1osq",
+  canvas: "_1rjcpxbi _18zrpxbi _1tkeva7c",
+  compactCanvas: "_1tke194s",
+  resolvedEmpty: "_j7hq1bym _5sag1ign _1pglindk _bl8aglyw",
+  content: "_p12f1gwv _y3gn1h6o"
+};
+const SearchState = ({
+  variant,
+  isCompact = false
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const isEmpty = variant === 'empty';
+  if (variant === 'loading') {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.loading,
+      testId: "jira-search-state-loading"
+    }, /*#__PURE__*/React.createElement(VisuallyHidden, null, formatMessage(messages.loading)), /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement(EmptyState, {
+      isCompact: true,
+      testId: "jira-search-table-skeleton"
+    })));
+  }
+  return /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: isCompact ? 'space.100' : 'space.200',
+    xcss: cx(styles.canvas, isCompact && styles.compactCanvas, isEmpty && styles.resolvedEmpty),
+    testId: `jira-search-state-${variant}`
+  }, isEmpty ? /*#__PURE__*/React.createElement(SpotSearchNoResult, {
+    size: isCompact ? 'large' : 'xlarge',
+    alt: ""
+  }) : /*#__PURE__*/React.createElement(RichIconSearch, {
+    size: isCompact ? 'large' : 'xlarge',
+    alt: ""
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.content
+  }, /*#__PURE__*/React.createElement(Heading, {
+    as: "h3",
+    size: "small"
+  }, formatMessage(isEmpty ? loadingErrorMessages.noResultsFound : initialStateViewMessages.jiraSearchTitle))), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.content
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, formatMessage(isEmpty ? loadingErrorMessages.noResultsFoundDescription : initialStateViewMessages.searchDescriptionForBasicSearchSllv))));
+};
+
+/** Reuses the work-item picker's illustrations and copy without emitting datasource analytics. */
+export const JiraSearchState = props => /*#__PURE__*/React.createElement(IntlMessagesProvider, {
+  defaultMessages: i18nEN,
+  loaderFn: fetchMessagesForLocale
+}, /*#__PURE__*/React.createElement(SearchState, props));

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

@@ -17,11 +17,15 @@ var styles = {
 var formStyles = null;
 var formWithMaxWidthStyles = null;
 export var BasicSearchInput = function BasicSearchInput(_ref) {
-  var isDisabled = _ref.isDisabled,
+  var _ref$isCompact = _ref.isCompact,
+    isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
+    isDisabled = _ref.isDisabled,
     isSearching = _ref.isSearching,
     onChange = _ref.onChange,
     onSearch = _ref.onSearch,
     searchTerm = _ref.searchTerm,
+    _ref$showSearchButton = _ref.showSearchButton,
+    showSearchButton = _ref$showSearchButton === void 0 ? true : _ref$showSearchButton,
     fullWidth = _ref.fullWidth,
     testId = _ref.testId,
     ariaLabel = _ref.ariaLabel;
@@ -41,7 +45,8 @@ export var BasicSearchInput = function BasicSearchInput(_ref) {
     onSubmit: handleFormSubmit,
     className: ax([fullWidth ? "_16jlkb7n _1o9zkb7n _i0dlf1ug" : "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12f1mjv"])
   }, /*#__PURE__*/React.createElement(Textfield, {
-    elemAfterInput: /*#__PURE__*/React.createElement(Box, {
+    isCompact: isCompact,
+    elemAfterInput: showSearchButton ? /*#__PURE__*/React.createElement(Box, {
       xcss: styles.searchButtonContainer
     }, /*#__PURE__*/React.createElement(IconButton, {
       appearance: "primary",
@@ -58,7 +63,7 @@ export var BasicSearchInput = function BasicSearchInput(_ref) {
       isDisabled: isDisabled,
       testId: "".concat(testId, "--basic-search-button"),
       onClick: handleSearchWithAnalytics
-    })),
+    })) : undefined,
     autoFocus: true,
     onChange: onChange,
     testId: "".concat(testId, "--basic-search-input"),

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

@@ -7,6 +7,7 @@
 ._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
 ._1h6dq98m{border-color:var(--ds-border-selected,#1868db)}
 ._18u0v47k{margin-left:var(--ds-space-250,20px)}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1bah1h6o{justify-content:center}

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

@@ -6,6 +6,7 @@ import React from 'react';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
 var modeSwitcherStyles = null;
+var inlineModeSwitcherStyles = null;
 var compactModeSwitcherStyles = null;
 var modeFocusStyles = null;
 var modeSwitcherLabelStyles = null;
@@ -16,6 +17,7 @@ var compactModeSwitcherLabelStyles = null;
 export var ModeSwitcher = function ModeSwitcher(props) {
   var _options$;
   var isCompact = props.isCompact,
+    isInline = props.isInline,
     isDisabled = props.isDisabled,
     onOptionValueChange = props.onOptionValueChange,
     options = props.options,
@@ -27,7 +29,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 _1h6d1l7x _189ee4h9 _1dqonqa1 _4cvr1h6o _vchhusvi _1e0c116y _u5f31b66 _19bv1b66 _18u0v47k _4t3izwfg _1j55105o", isCompact && "_zulpv77o _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"])
+    className: ax(["_2rko1b66 _1h6d1l7x _189ee4h9 _1dqonqa1 _4cvr1h6o _vchhusvi _1e0c116y _u5f31b66 _19bv1b66 _18u0v47k _4t3izwfg _1j55105o", isCompact && "_zulpv77o _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66", isInline && "_18u0ze3t"])
   }, options.map(function (_ref) {
     var value = _ref.value,
       label = _ref.label,

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

@@ -1,9 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["isOpen"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -21,11 +21,40 @@ import formatOptionLabel from './formatOptionLabel';
 import CustomMenuList from './menu-list';
 import { asyncPopupSelectMessages } from './messages';
 import PopupTrigger from './trigger';
+import { useInlinePopupLayout } from './useInlinePopupLayout';
+
 // Needed to disable filtering from react-select
 var noFilterOptions = function noFilterOptions() {
   return true;
 };
-export var FilterPopupSelect = function FilterPopupSelect(_ref) {
+export var FilterPopupSelect = function FilterPopupSelect(props) {
+  return props.isInline ? /*#__PURE__*/React.createElement(InlineFilterPopupSelect, props) : /*#__PURE__*/React.createElement(FilterPopupSelectBase, props);
+};
+var InlineFilterPopupSelect = function InlineFilterPopupSelect(props) {
+  var popupRef = useRef(null);
+  var layout = useInlinePopupLayout(true, popupRef);
+  var onMenuOpen = props.onMenuOpen,
+    onMenuClose = props.onMenuClose;
+  var handleOpen = useCallback(function () {
+    layout.onOpen();
+    onMenuOpen === null || onMenuOpen === void 0 || onMenuOpen();
+  }, [layout.onOpen, onMenuOpen]);
+  var handleClose = useCallback(function () {
+    layout.onClose();
+    onMenuClose === null || onMenuClose === void 0 || onMenuClose();
+  }, [layout.onClose, onMenuClose]);
+  return /*#__PURE__*/React.createElement(FilterPopupSelectBase, _extends({}, props, {
+    onMenuOpen: handleOpen,
+    onMenuClose: handleClose,
+    inlinePopupProps: {
+      ref: popupRef,
+      maxMenuHeight: layout.maxMenuHeight,
+      minMenuHeight: 0,
+      popperProps: layout.popperProps
+    }
+  }));
+};
+var FilterPopupSelectBase = function FilterPopupSelectBase(_ref) {
   var filterName = _ref.filterName,
     _ref$totalCount = _ref.totalCount,
     totalCount = _ref$totalCount === void 0 ? 0 : _ref$totalCount,
@@ -46,7 +75,8 @@ export var FilterPopupSelect = function FilterPopupSelect(_ref) {
     onSelectionChange = _ref.onSelectionChange,
     onInputChange = _ref.onInputChange,
     onMenuClose = _ref.onMenuClose,
-    onMenuOpen = _ref.onMenuOpen;
+    onMenuOpen = _ref.onMenuOpen,
+    inlinePopupProps = _ref.inlinePopupProps;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
@@ -162,7 +192,7 @@ export var FilterPopupSelect = function FilterPopupSelect(_ref) {
       sortPaginatedResults.current = true;
     }
   }, [status]);
-  return /*#__PURE__*/React.createElement(PopupSelect, {
+  return /*#__PURE__*/React.createElement(PopupSelect, _extends({}, inlinePopupProps, {
     isMulti: true,
     maxMenuWidth: 300,
     minMenuWidth: 300,
@@ -230,5 +260,5 @@ export var FilterPopupSelect = function FilterPopupSelect(_ref) {
       totalCount: totalCount,
       filterName: filterName
     })
-  });
+  }));
 };

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

@@ -0,0 +1,116 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+var VIEWPORT_PADDING = 8;
+var TRIGGER_GAP = 8;
+var MAX_MENU_HEIGHT = 300;
+var MIN_PREFERRED_SPACE = 180;
+// Reserve the footer and container padding until the open popup can be measured.
+var INITIAL_EXTRA_HEIGHT = 72;
+var INITIAL_CONTROL_HEIGHT = 48;
+var viewportModifiers = [{
+  name: 'offset',
+  options: {
+    offset: [0, TRIGGER_GAP]
+  }
+},
+// Placement and height are calculated together; flipping independently can clip the search box.
+{
+  name: 'flip',
+  enabled: false
+}, {
+  name: 'preventOverflow',
+  enabled: true,
+  options: {
+    rootBoundary: 'viewport',
+    padding: VIEWPORT_PADDING,
+    altAxis: true,
+    tether: false
+  }
+}];
+export function useInlinePopupLayout(isInline, popupRef) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState({
+      maxMenuHeight: MAX_MENU_HEIGHT,
+      placement: 'bottom-start'
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    layout = _useState4[0],
+    setLayout = _useState4[1];
+  var updateLayout = useCallback(function () {
+    var _viewport$offsetTop, _viewport$height, _popup$selectRef$sele, _popup$selectRef;
+    var popup = popupRef.current;
+    var trigger = popup === null || popup === void 0 ? void 0 : popup.targetRef;
+    if (!isInline || !trigger) {
+      return;
+    }
+    var viewport = window.visualViewport;
+    var viewportTop = (_viewport$offsetTop = viewport === null || viewport === void 0 ? void 0 : viewport.offsetTop) !== null && _viewport$offsetTop !== void 0 ? _viewport$offsetTop : 0;
+    var viewportBottom = viewportTop + ((_viewport$height = viewport === null || viewport === void 0 ? void 0 : viewport.height) !== null && _viewport$height !== void 0 ? _viewport$height : window.innerHeight);
+    var rect = trigger.getBoundingClientRect();
+    var below = Math.max(0, viewportBottom - rect.bottom - TRIGGER_GAP - VIEWPORT_PADDING);
+    var above = Math.max(0, rect.top - viewportTop - TRIGGER_GAP - VIEWPORT_PADDING);
+    var placement = below >= MIN_PREFERRED_SPACE || below >= above ? 'bottom-start' : 'top-start';
+    var available = placement === 'bottom-start' ? below : above;
+    var menu = popup.menuRef;
+    var list = menu === null || menu === void 0 ? void 0 : menu.querySelector('[role="listbox"]');
+    var controlHeight = (_popup$selectRef$sele = (_popup$selectRef = popup.selectRef) === null || _popup$selectRef === void 0 || (_popup$selectRef = _popup$selectRef.select) === null || _popup$selectRef === void 0 || (_popup$selectRef = _popup$selectRef.controlRef) === null || _popup$selectRef === void 0 ? void 0 : _popup$selectRef.offsetHeight) !== null && _popup$selectRef$sele !== void 0 ? _popup$selectRef$sele : INITIAL_CONTROL_HEIGHT;
+    // PopupSelect already subtracts the search control from maxMenuHeight. Reserve the
+    // remaining chrome separately, including the pagination footer outside its scroll area.
+    var extraHeight = menu && list ? Math.max(0, menu.offsetHeight - list.offsetHeight - controlHeight) : INITIAL_EXTRA_HEIGHT;
+    var maxMenuHeight = Math.max(controlHeight, Math.min(MAX_MENU_HEIGHT, available - extraHeight));
+    setLayout(function (previous) {
+      return previous.placement === placement && previous.maxMenuHeight === maxMenuHeight ? previous : {
+        placement: placement,
+        maxMenuHeight: maxMenuHeight
+      };
+    });
+  }, [isInline, popupRef]);
+  useEffect(function () {
+    var _popupRef$current;
+    if (!isInline || !isOpen) {
+      return;
+    }
+    updateLayout();
+    var viewport = window.visualViewport;
+    var observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateLayout);
+    var menu = (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.menuRef;
+    if (menu) {
+      observer === null || observer === void 0 || observer.observe(menu);
+    }
+    window.addEventListener('resize', updateLayout);
+    window.addEventListener('scroll', updateLayout, true);
+    viewport === null || viewport === void 0 || viewport.addEventListener('resize', updateLayout);
+    viewport === null || viewport === void 0 || viewport.addEventListener('scroll', updateLayout);
+    return function () {
+      observer === null || observer === void 0 || observer.disconnect();
+      window.removeEventListener('resize', updateLayout);
+      window.removeEventListener('scroll', updateLayout, true);
+      viewport === null || viewport === void 0 || viewport.removeEventListener('resize', updateLayout);
+      viewport === null || viewport === void 0 || viewport.removeEventListener('scroll', updateLayout);
+    };
+  }, [isInline, isOpen, popupRef, updateLayout]);
+  var onOpen = useCallback(function () {
+    if (isInline) {
+      updateLayout();
+      setIsOpen(true);
+    }
+  }, [isInline, updateLayout]);
+  var onClose = useCallback(function () {
+    return setIsOpen(false);
+  }, []);
+  var popperProps = useMemo(function () {
+    return {
+      placement: layout.placement,
+      modifiers: viewportModifiers
+    };
+  }, [layout.placement]);
+  return {
+    onOpen: onOpen,
+    onClose: onClose,
+    maxMenuHeight: isInline ? layout.maxMenuHeight : undefined,
+    popperProps: isInline ? popperProps : undefined
+  };
+}

package/dist/esm/ui/datasource-table-view/datasourceTableView.js

@@ -46,7 +46,10 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     onWrappedColumnsChange = _ref.onWrappedColumnsChange,
     _ref$scrollableContai = _ref.scrollableContainerHeight,
     scrollableContainerHeight = _ref$scrollableContai === void 0 ? DefaultScrollableContainerHeight : _ref$scrollableContai,
-    onRequestSettled = _ref.onRequestSettled;
+    onRequestSettled = _ref.onRequestSettled,
+    _ref$enableRequestSet = _ref.enableRequestSettled,
+    enableRequestSettled = _ref$enableRequestSet === void 0 ? false : _ref$enableRequestSet,
+    renderEmptyState = _ref.renderEmptyState;
   // Local copy lets us apply in-session sort mutations without mutating external parameters.
   var _useState = useState(parameters),
     _useState2 = _slicedToArray(_useState, 2),
@@ -141,7 +144,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
   // settled request is reported exactly once.
   var lastSettledResultRef = useRef(null);
   useEffect(function () {
-    if (!fg('platform_lp_sllv_on_request_settled')) {
+    if (!fg('platform_lp_sllv_on_request_settled') && !enableRequestSettled) {
       return;
     }
     if (status !== 'resolved' && status !== 'rejected' && status !== 'unauthorized' && status !== 'forbidden') {
@@ -158,7 +161,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     }
     lastSettledResultRef.current = result;
     onRequestSettled === null || onRequestSettled === void 0 || onRequestSettled(result);
-  }, [status, responseItems.length, totalCount, onRequestSettled]);
+  }, [status, responseItems.length, totalCount, onRequestSettled, enableRequestSettled]);
   useEffect(function () {
     var shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
     if (shouldStartUfoExperience) {
@@ -206,6 +209,9 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     });
   }, [reset]);
   var isResolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  if (isResolvedWithNoResults && renderEmptyState) {
+    return renderEmptyState();
+  }
   // With columns available the table can keep its headers and footer and show the empty state
   // in place of the rows, instead of replacing the whole view with it.
   var shouldRenderTableWithNoResults = isResolvedWithNoResults && hasColumns;

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -17,7 +17,9 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     _ref$onSelectionChang = _ref.onSelectionChange,
     onSelectionChange = _ref$onSelectionChang === void 0 ? function () {} : _ref$onSelectionChang,
     _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isInline = _ref.isInline,
+    isInline = _ref$isInline === void 0 ? false : _ref$isInline;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useState = useState(''),
@@ -109,6 +111,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
   var shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
   var triggerButtonLabel = formatMessage(asyncPopupSelectMessages["".concat(filterType, "Label")]);
   return /*#__PURE__*/React.createElement(FilterPopupSelect, {
+    isInline: isInline,
     filterName: filterName,
     status: status,
     showLoading: isLoading,

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

@@ -14,7 +14,9 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
     site = _ref.site,
     onChange = _ref.onChange,
     selections = _ref.selections,
-    isJQLHydrating = _ref.isJQLHydrating;
+    isJQLHydrating = _ref.isJQLHydrating,
+    _ref$isInline = _ref.isInline,
+    isInline = _ref$isInline === void 0 ? false : _ref$isInline;
   var extractedFilterValues = useMemo(function () {
     return isJQLHydrating ? extractValuesFromNonComplexJQL(jql) : {};
   }, [isJQLHydrating, jql]);
@@ -23,11 +25,13 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: styles.basicFilterContainerStyles,
     gap: "space.100",
+    wrap: isInline ? 'wrap' : 'nowrap',
     testId: "jlol-basic-filter-container"
   }, availableBasicFilterTypes.map(function (filter) {
     var _extractedFilterValue;
     var shouldShowHydrationLoader = isJQLHydrating && ((_extractedFilterValue = extractedFilterValues[filter]) === null || _extractedFilterValue === void 0 ? void 0 : _extractedFilterValue.length) > 0;
     return /*#__PURE__*/React.createElement(AsyncPopupSelect, {
+      isInline: isInline,
       site: site,
       filterType: filter,
       key: filter,

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import IntlMessagesProvider from '@atlaskit/intl-messages-provider/main';
+import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+import i18nEN from '../../../i18n/en';
+import { JiraSearchContainer as SearchContainer } from './index';
+
+/** Embedded consumers need the same translated search controls as the configuration modal. */
+export var JiraSearchContainer = function JiraSearchContainer(props) {
+  return /*#__PURE__*/React.createElement(IntlMessagesProvider, {
+    defaultMessages: i18nEN,
+    loaderFn: fetchMessagesForLocale
+  }, /*#__PURE__*/React.createElement(SearchContainer, props));
+};

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

@@ -12,6 +12,12 @@ export var fuzzyCharacter = '*';
 var constructTerminalClause = function constructTerminalClause(field, operator, value) {
   return creators.terminalClause(creators.field(field), creators.operator(operator), creators.valueOperand(value));
 };
+
+// The generic AST string sanitizer quotes values but does not escape backslashes.
+// Embedded keyword search accepts literal user text, so quote both delimiters explicitly.
+var escapedValueOperand = function escapedValueOperand(value) {
+  return creators.byText.valueOperand("\"".concat(value.replace(/\\/g, '\\\\').replace(/"/g, '\\"'), "\""));
+};
 export var buildJQL = function buildJQL(input) {
   /**
    * Jql ast - Transforming the ast
@@ -20,6 +26,7 @@ export var buildJQL = function buildJQL(input) {
   var jast = new JastBuilder().build('');
   var query = jast.query;
   var rawSearch = input.rawSearch,
+    textSearchField = input.textSearchField,
     _input$orderDirection = input.orderDirection,
     orderDirection = _input$orderDirection === void 0 ? ORDER_BY_DIRECTION_DESC : _input$orderDirection,
     _input$orderKey = input.orderKey,
@@ -40,7 +47,10 @@ export var buildJQL = function buildJQL(input) {
   if (!query) {
     return '';
   }
-  if (trimmedRawSearch) {
+  if (trimmedRawSearch && textSearchField === 'textfields') {
+    var suffix = /["*?]$/.test(trimmedRawSearch) ? '' : fuzzyCharacter;
+    query.appendClause(creators.terminalClause(creators.field('textfields'), creators.operator(OPERATOR_LIKE), escapedValueOperand("".concat(trimmedRawSearch).concat(suffix))), COMPOUND_OPERATOR_AND);
+  } else if (trimmedRawSearch) {
     var fuzzy = !trimmedRawSearch.match(fuzzySearchRegExp) ? fuzzyCharacter : '';
     var basicSearch = trimmedRawSearch.replace(/['"?*]+/g, '');
     var text = constructTerminalClause('text', OPERATOR_LIKE, "".concat(basicSearch).concat(fuzzy));
@@ -62,7 +72,7 @@ export var buildJQL = function buildJQL(input) {
         return;
       }
       var filterInClause = creators.terminalClause(creators.field(key), creators.operator(OPERATOR_IN), creators.listOperand(filterFieldValues.map(function (filterFieldValue) {
-        return creators.valueOperand(filterFieldValue.value);
+        return textSearchField ? escapedValueOperand(filterFieldValue.value) : creators.valueOperand(filterFieldValue.value);
       })));
       query.appendClause(filterInClause, COMPOUND_OPERATOR_AND);
     });

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

@@ -0,0 +1,11 @@
+._16jlkb7n{flex-grow:1}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._1o9zidpf{flex-shrink:0}
+._1p57u2gc{row-gap:var(--ds-space-100,8px)}
+._1tket9kd{min-height:72px}
+._1ul9idpf{min-width:0}
+._4cvr1y6m{align-items:flex-start}
+._i0dlghg7{flex-basis:240px}