@atlaskit/link-datasource 7.12.3 → 7.13.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @atlaskit/link-datasource
 
+## 7.13.0
+
+### Minor Changes
+
+- [`d72c778a8a606`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d72c778a8a606) -
+  Keep inline Basic filter dropdowns within the visible viewport, including the search control and
+  pagination footer, and resize their scrollable option lists on window or viewport changes.
+
+  Reuse the work-item picker's search and no-results illustrations in a stable in-card search area.
+  Use its native table skeleton for every retry, hold the measured card height and keep loading
+  perceptible for fast unchanged-query requests, preserve the existing result table, and remove the
+  explanatory Basic/JQL helper copy.
+
+  Ease the loading-to-no-results content change with a short opacity entrance using ADS motion
+  tokens, disabled when reduced motion is requested.
+
+  Use a smaller illustrated area for the recovery card, remove the duplicate visible no-results
+  message above the toolbar while retaining accessible status announcements, and preserve the
+  measured area during retries. The compact illustrated layout is optional and leaves the shared
+  default intact.
+
+  Expose the existing Jira Basic/JQL search controls through a supported, localized subpath with an
+  optional inline layout, keyword prefill, and preserved drafts when complex JQL needs a separate
+  Basic search. Add an optional full empty-table renderer that keeps datasource requests active.
+
+  Implement in-card Jira no-result recovery for `JiraCardNoResultsVariant: jql-search` in the
+  existing SAIN UX Hello/customer layers. Reuse `kd_sain_jira_card_no_results_rollout` and preserve
+  its collapse override. Keyword intent starts in Basic; natural-language intent starts with the
+  generated JQL. Keep the card frame, feedback, hide/reveal, and result expansion, and attribute
+  retries and a deduplicated recovery interaction to the original FPS search.
+
+  Keep existing modal search behavior on its original component path. Mount draft preservation and
+  viewport-aware popup hooks only for explicitly opted-in embedded consumers, preserve the default
+  JQL focus lifecycle, and separate optional completion reporting from empty-state rendering through
+  `enableRequestSettled`. Match the configured Arm 2 experiment value, `jql-search`.
+
+  Preserve the original gate-controlled Jira result interaction reporting after recovery. Keep
+  Basic/JQL toolbar clicks and retries separate from the existing answer-click and SAIN usage
+  signals, and include the retry attempt in submission activity events. Experiment metric
+  definitions remain downstream.
+
+  Share the existing Jira search default query and allowed sort keys between modal and embedded
+  controls without changing their values or the existing exported entry points.
+
+  Add optional `noResultsVariant: jql-search` metadata to the existing Search AI work-item click and
+  edit-start events after a recovery retry returns results. Preserve normal result payloads, event
+  names/counts and existing usage gates; toolbar, retry and table-refresh activity are not tagged as
+  recovered work-item interactions.
+
+  Keep embedded debounced Basic filter search metadata aligned with the submitted JQL by using the
+  scheduled filter selection snapshot, even when pending hydration updates the displayed selections.
+
+  Use compact Basic/JQL inputs in the opt-in inline recovery toolbar to align with the mode toggle
+  and filter buttons, and omit the keyword helper line in this layout. Keep the standard input size
+  and helper text for existing modal consumers.
+
+  Add an optional Basic submit-button visibility setting. Search AI recovery opts out of the button
+  and retains Enter-to-search; other consumers keep the existing button and submission behavior.
+
 ## 7.12.3
 
 ### Patch Changes

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

@@ -26,11 +26,15 @@ var styles = {
 var formStyles = null;
 var formWithMaxWidthStyles = null;
 var BasicSearchInput = exports.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;
@@ -50,7 +54,8 @@ var BasicSearchInput = exports.BasicSearchInput = function BasicSearchInput(_ref
     onSubmit: handleFormSubmit,
     className: (0, _runtime.ax)([fullWidth ? "_16jlkb7n _1o9zkb7n _i0dlf1ug" : "_16jlkb7n _1o9zkb7n _i0dlf1ug _p12f1mjv"])
   }, /*#__PURE__*/React.createElement(_textField.default, {
-    elemAfterInput: /*#__PURE__*/React.createElement(_box.Box, {
+    isCompact: isCompact,
+    elemAfterInput: showSearchButton ? /*#__PURE__*/React.createElement(_box.Box, {
       xcss: styles.searchButtonContainer
     }, /*#__PURE__*/React.createElement(_button.default, {
       appearance: "primary",
@@ -67,7 +72,7 @@ var BasicSearchInput = exports.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/cjs/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/cjs/ui/common/modal/mode-switcher/ModeSwitcher.js

@@ -13,6 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
 var modeSwitcherStyles = null;
+var inlineModeSwitcherStyles = null;
 var compactModeSwitcherStyles = null;
 var modeFocusStyles = null;
 var modeSwitcherLabelStyles = null;
@@ -23,6 +24,7 @@ var compactModeSwitcherLabelStyles = null;
 var ModeSwitcher = exports.ModeSwitcher = function ModeSwitcher(props) {
   var _options$;
   var isCompact = props.isCompact,
+    isInline = props.isInline,
     isDisabled = props.isDisabled,
     onOptionValueChange = props.onOptionValueChange,
     options = props.options,
@@ -34,7 +36,7 @@ var ModeSwitcher = exports.ModeSwitcher = function ModeSwitcher(props) {
   return options.length > 0 ? /*#__PURE__*/_react.default.createElement("fieldset", {
     "data-testid": "mode-toggle-container",
     disabled: isDisabled,
-    className: (0, _runtime.ax)(["_2rko1b66 _1h6d1l7x _189ee4h9 _1dqonqa1 _4cvr1h6o _vchhusvi _1e0c116y _u5f31b66 _19bv1b66 _18u0v47k _4t3izwfg _1j55105o", isCompact && "_zulpv77o _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"])
+    className: (0, _runtime.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/cjs/ui/common/modal/popup-select/index.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FilterPopupSelect = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _reactIntl = require("react-intl");
@@ -26,6 +26,7 @@ var _formatOptionLabel = _interopRequireDefault(require("./formatOptionLabel"));
 var _menuList = _interopRequireDefault(require("./menu-list"));
 var _messages = require("./messages");
 var _trigger = _interopRequireDefault(require("./trigger"));
+var _useInlinePopupLayout = require("./useInlinePopupLayout");
 var _excluded = ["isOpen"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -34,7 +35,34 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var noFilterOptions = function noFilterOptions() {
   return true;
 };
-var FilterPopupSelect = exports.FilterPopupSelect = function FilterPopupSelect(_ref) {
+var FilterPopupSelect = exports.FilterPopupSelect = function FilterPopupSelect(props) {
+  return props.isInline ? /*#__PURE__*/_react.default.createElement(InlineFilterPopupSelect, props) : /*#__PURE__*/_react.default.createElement(FilterPopupSelectBase, props);
+};
+var InlineFilterPopupSelect = function InlineFilterPopupSelect(props) {
+  var popupRef = (0, _react.useRef)(null);
+  var layout = (0, _useInlinePopupLayout.useInlinePopupLayout)(true, popupRef);
+  var onMenuOpen = props.onMenuOpen,
+    onMenuClose = props.onMenuClose;
+  var handleOpen = (0, _react.useCallback)(function () {
+    layout.onOpen();
+    onMenuOpen === null || onMenuOpen === void 0 || onMenuOpen();
+  }, [layout.onOpen, onMenuOpen]);
+  var handleClose = (0, _react.useCallback)(function () {
+    layout.onClose();
+    onMenuClose === null || onMenuClose === void 0 || onMenuClose();
+  }, [layout.onClose, onMenuClose]);
+  return /*#__PURE__*/_react.default.createElement(FilterPopupSelectBase, (0, _extends2.default)({}, 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,
@@ -55,7 +83,8 @@ var FilterPopupSelect = exports.FilterPopupSelect = function FilterPopupSelect(_
     onSelectionChange = _ref.onSelectionChange,
     onInputChange = _ref.onInputChange,
     onMenuClose = _ref.onMenuClose,
-    onMenuOpen = _ref.onMenuOpen;
+    onMenuOpen = _ref.onMenuOpen,
+    inlinePopupProps = _ref.inlinePopupProps;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
@@ -171,7 +200,7 @@ var FilterPopupSelect = exports.FilterPopupSelect = function FilterPopupSelect(_
       sortPaginatedResults.current = true;
     }
   }, [status]);
-  return /*#__PURE__*/_react.default.createElement(_popupSelect.PopupSelect, {
+  return /*#__PURE__*/_react.default.createElement(_popupSelect.PopupSelect, (0, _extends2.default)({}, inlinePopupProps, {
     isMulti: true,
     maxMenuWidth: 300,
     minMenuWidth: 300,
@@ -239,5 +268,5 @@ var FilterPopupSelect = exports.FilterPopupSelect = function FilterPopupSelect(_
       totalCount: totalCount,
       filterName: filterName
     })
-  });
+  }));
 };

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

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInlinePopupLayout = useInlinePopupLayout;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("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
+  }
+}];
+function useInlinePopupLayout(isInline, popupRef) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      maxMenuHeight: MAX_MENU_HEIGHT,
+      placement: 'bottom-start'
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    layout = _useState4[0],
+    setLayout = _useState4[1];
+  var updateLayout = (0, _react.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]);
+  (0, _react.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 = (0, _react.useCallback)(function () {
+    if (isInline) {
+      updateLayout();
+      setIsOpen(true);
+    }
+  }, [isInline, updateLayout]);
+  var onClose = (0, _react.useCallback)(function () {
+    return setIsOpen(false);
+  }, []);
+  var popperProps = (0, _react.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/cjs/ui/datasource-table-view/datasourceTableView.js

@@ -55,7 +55,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 = (0, _react.useState)(parameters),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -150,7 +153,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
   // settled request is reported exactly once.
   var lastSettledResultRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    if (!(0, _fg.fg)('platform_lp_sllv_on_request_settled')) {
+    if (!(0, _fg.fg)('platform_lp_sllv_on_request_settled') && !enableRequestSettled) {
       return;
     }
     if (status !== 'resolved' && status !== 'rejected' && status !== 'unauthorized' && status !== 'forbidden') {
@@ -167,7 +170,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]);
   (0, _react.useEffect)(function () {
     var shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
     if (shouldStartUfoExperience) {
@@ -215,6 +218,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/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -26,7 +26,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 = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useState = (0, _react.useState)(''),
@@ -118,6 +120,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
   var shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
   var triggerButtonLabel = formatMessage(_messages.asyncPopupSelectMessages["".concat(filterType, "Label")]);
   return /*#__PURE__*/_react.default.createElement(_popupSelect.FilterPopupSelect, {
+    isInline: isInline,
     filterName: filterName,
     status: status,
     showLoading: isLoading,

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

@@ -23,7 +23,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 = (0, _react.useMemo)(function () {
     return isJQLHydrating ? (0, _extractValuesFromNonComplexJQL.extractValuesFromNonComplexJQL)(jql) : {};
   }, [isJQLHydrating, jql]);
@@ -32,11 +34,13 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
   return /*#__PURE__*/_react.default.createElement(_flex.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.default.createElement(_asyncPopupSelect.default, {
+      isInline: isInline,
       site: site,
       filterType: filter,
       key: filter,

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JiraSearchContainer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _main = _interopRequireDefault(require("@atlaskit/intl-messages-provider/main"));
+var _fetchMessagesForLocale = require("../../../common/utils/locale/fetch-messages-for-locale");
+var _en = _interopRequireDefault(require("../../../i18n/en"));
+var _index = require("./index");
+/** Embedded consumers need the same translated search controls as the configuration modal. */
+var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchContainer(props) {
+  return /*#__PURE__*/_react.default.createElement(_main.default, {
+    defaultMessages: _en.default,
+    loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
+  }, /*#__PURE__*/_react.default.createElement(_index.JiraSearchContainer, props));
+};

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

@@ -19,6 +19,12 @@ var fuzzyCharacter = exports.fuzzyCharacter = '*';
 var constructTerminalClause = function constructTerminalClause(field, operator, value) {
   return _creators.default.terminalClause(_creators.default.field(field), _creators.default.operator(operator), _creators.default.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.default.byText.valueOperand("\"".concat(value.replace(/\\/g, '\\\\').replace(/"/g, '\\"'), "\""));
+};
 var buildJQL = exports.buildJQL = function buildJQL(input) {
   /**
    * Jql ast - Transforming the ast
@@ -27,6 +33,7 @@ var buildJQL = exports.buildJQL = function buildJQL(input) {
   var jast = new _jastBuilder.JastBuilder().build('');
   var query = jast.query;
   var rawSearch = input.rawSearch,
+    textSearchField = input.textSearchField,
     _input$orderDirection = input.orderDirection,
     orderDirection = _input$orderDirection === void 0 ? _orderBy.ORDER_BY_DIRECTION_DESC : _input$orderDirection,
     _input$orderKey = input.orderKey,
@@ -47,7 +54,10 @@ var buildJQL = exports.buildJQL = function buildJQL(input) {
   if (!query) {
     return '';
   }
-  if (trimmedRawSearch) {
+  if (trimmedRawSearch && textSearchField === 'textfields') {
+    var suffix = /["*?]$/.test(trimmedRawSearch) ? '' : fuzzyCharacter;
+    query.appendClause(_creators.default.terminalClause(_creators.default.field('textfields'), _creators.default.operator(_operator.OPERATOR_LIKE), escapedValueOperand("".concat(trimmedRawSearch).concat(suffix))), _compound.COMPOUND_OPERATOR_AND);
+  } else if (trimmedRawSearch) {
     var fuzzy = !trimmedRawSearch.match(fuzzySearchRegExp) ? fuzzyCharacter : '';
     var basicSearch = trimmedRawSearch.replace(/['"?*]+/g, '');
     var text = constructTerminalClause('text', _operator.OPERATOR_LIKE, "".concat(basicSearch).concat(fuzzy));
@@ -69,7 +79,7 @@ var buildJQL = exports.buildJQL = function buildJQL(input) {
         return;
       }
       var filterInClause = _creators.default.terminalClause(_creators.default.field(key), _creators.default.operator(_operator.OPERATOR_IN), _creators.default.listOperand(filterFieldValues.map(function (filterFieldValue) {
-        return _creators.default.valueOperand(filterFieldValue.value);
+        return textSearchField ? escapedValueOperand(filterFieldValue.value) : _creators.default.valueOperand(filterFieldValue.value);
       })));
       query.appendClause(filterInClause, _compound.COMPOUND_OPERATOR_AND);
     });

package/dist/cjs/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}