@atlaskit/link-datasource 7.12.2 → 7.13.0

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

@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+const VIEWPORT_PADDING = 8;
+const TRIGGER_GAP = 8;
+const MAX_MENU_HEIGHT = 300;
+const MIN_PREFERRED_SPACE = 180;
+// Reserve the footer and container padding until the open popup can be measured.
+const INITIAL_EXTRA_HEIGHT = 72;
+const INITIAL_CONTROL_HEIGHT = 48;
+const 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) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [layout, setLayout] = useState({
+    maxMenuHeight: MAX_MENU_HEIGHT,
+    placement: 'bottom-start'
+  });
+  const updateLayout = useCallback(() => {
+    var _viewport$offsetTop, _viewport$height, _popup$selectRef$sele, _popup$selectRef, _popup$selectRef$sele2, _popup$selectRef$sele3;
+    const popup = popupRef.current;
+    const trigger = popup === null || popup === void 0 ? void 0 : popup.targetRef;
+    if (!isInline || !trigger) {
+      return;
+    }
+    const viewport = window.visualViewport;
+    const viewportTop = (_viewport$offsetTop = viewport === null || viewport === void 0 ? void 0 : viewport.offsetTop) !== null && _viewport$offsetTop !== void 0 ? _viewport$offsetTop : 0;
+    const viewportBottom = viewportTop + ((_viewport$height = viewport === null || viewport === void 0 ? void 0 : viewport.height) !== null && _viewport$height !== void 0 ? _viewport$height : window.innerHeight);
+    const rect = trigger.getBoundingClientRect();
+    const below = Math.max(0, viewportBottom - rect.bottom - TRIGGER_GAP - VIEWPORT_PADDING);
+    const above = Math.max(0, rect.top - viewportTop - TRIGGER_GAP - VIEWPORT_PADDING);
+    const placement = below >= MIN_PREFERRED_SPACE || below >= above ? 'bottom-start' : 'top-start';
+    const available = placement === 'bottom-start' ? below : above;
+    const menu = popup.menuRef;
+    const list = menu === null || menu === void 0 ? void 0 : menu.querySelector('[role="listbox"]');
+    const controlHeight = (_popup$selectRef$sele = (_popup$selectRef = popup.selectRef) === null || _popup$selectRef === void 0 ? void 0 : (_popup$selectRef$sele2 = _popup$selectRef.select) === null || _popup$selectRef$sele2 === void 0 ? void 0 : (_popup$selectRef$sele3 = _popup$selectRef$sele2.controlRef) === null || _popup$selectRef$sele3 === void 0 ? void 0 : _popup$selectRef$sele3.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.
+    const extraHeight = menu && list ? Math.max(0, menu.offsetHeight - list.offsetHeight - controlHeight) : INITIAL_EXTRA_HEIGHT;
+    const maxMenuHeight = Math.max(controlHeight, Math.min(MAX_MENU_HEIGHT, available - extraHeight));
+    setLayout(previous => previous.placement === placement && previous.maxMenuHeight === maxMenuHeight ? previous : {
+      placement,
+      maxMenuHeight
+    });
+  }, [isInline, popupRef]);
+  useEffect(() => {
+    var _popupRef$current;
+    if (!isInline || !isOpen) {
+      return;
+    }
+    updateLayout();
+    const viewport = window.visualViewport;
+    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateLayout);
+    const menu = (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.menuRef;
+    if (menu) {
+      observer === null || observer === void 0 ? void 0 : observer.observe(menu);
+    }
+    window.addEventListener('resize', updateLayout);
+    window.addEventListener('scroll', updateLayout, true);
+    viewport === null || viewport === void 0 ? void 0 : viewport.addEventListener('resize', updateLayout);
+    viewport === null || viewport === void 0 ? void 0 : viewport.addEventListener('scroll', updateLayout);
+    return () => {
+      observer === null || observer === void 0 ? void 0 : observer.disconnect();
+      window.removeEventListener('resize', updateLayout);
+      window.removeEventListener('scroll', updateLayout, true);
+      viewport === null || viewport === void 0 ? void 0 : viewport.removeEventListener('resize', updateLayout);
+      viewport === null || viewport === void 0 ? void 0 : viewport.removeEventListener('scroll', updateLayout);
+    };
+  }, [isInline, isOpen, popupRef, updateLayout]);
+  const onOpen = useCallback(() => {
+    if (isInline) {
+      updateLayout();
+      setIsOpen(true);
+    }
+  }, [isInline, updateLayout]);
+  const onClose = useCallback(() => setIsOpen(false), []);
+  const popperProps = useMemo(() => ({
+    placement: layout.placement,
+    modifiers: viewportModifiers
+  }), [layout.placement]);
+  return {
+    onOpen,
+    onClose,
+    maxMenuHeight: isInline ? layout.maxMenuHeight : undefined,
+    popperProps: isInline ? popperProps : undefined
+  };
+}

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

@@ -44,7 +44,9 @@ const DatasourceTableViewWithoutAnalytics = ({
   onWrappedColumnChange,
   onWrappedColumnsChange,
   scrollableContainerHeight = DefaultScrollableContainerHeight,
-  onRequestSettled
+  onRequestSettled,
+  enableRequestSettled = false,
+  renderEmptyState
 }) => {
   // Local copy lets us apply in-session sort mutations without mutating external parameters.
   const [sessionParameters, setSessionParameters] = useState(parameters);
@@ -135,7 +137,7 @@ const DatasourceTableViewWithoutAnalytics = ({
   // settled request is reported exactly once.
   const lastSettledResultRef = useRef(null);
   useEffect(() => {
-    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') {
@@ -152,7 +154,7 @@ const DatasourceTableViewWithoutAnalytics = ({
     }
     lastSettledResultRef.current = result;
     onRequestSettled === null || onRequestSettled === void 0 ? void 0 : onRequestSettled(result);
-  }, [status, responseItems.length, totalCount, onRequestSettled]);
+  }, [status, responseItems.length, totalCount, onRequestSettled, enableRequestSettled]);
   useEffect(() => {
     const shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
     if (shouldStartUfoExperience) {
@@ -200,6 +202,9 @@ const DatasourceTableViewWithoutAnalytics = ({
     });
   }, [reset]);
   const 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.
   const shouldRenderTableWithNoResults = isResolvedWithNoResults && hasColumns;

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

@@ -12,7 +12,8 @@ const AsyncPopupSelect = ({
   selection,
   isJQLHydrating,
   onSelectionChange = () => {},
-  isDisabled = false
+  isDisabled = false,
+  isInline = false
 }) => {
   const {
     formatMessage
@@ -87,6 +88,7 @@ const AsyncPopupSelect = ({
   const shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
   const triggerButtonLabel = formatMessage(asyncPopupSelectMessages[`${filterType}Label`]);
   return /*#__PURE__*/React.createElement(FilterPopupSelect, {
+    isInline: isInline,
     filterName: filterName,
     status: status,
     showLoading: isLoading,

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

@@ -14,7 +14,8 @@ const BasicFilterContainer = ({
   site,
   onChange,
   selections,
-  isJQLHydrating
+  isJQLHydrating,
+  isInline = false
 }) => {
   const extractedFilterValues = useMemo(() => isJQLHydrating ? extractValuesFromNonComplexJQL(jql) : {}, [isJQLHydrating, jql]);
   const {
@@ -23,11 +24,13 @@ const BasicFilterContainer = ({
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: styles.basicFilterContainerStyles,
     gap: "space.100",
+    wrap: isInline ? 'wrap' : 'nowrap',
     testId: "jlol-basic-filter-container"
   }, availableBasicFilterTypes.map(filter => {
     var _extractedFilterValue;
     const 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/es2019/ui/jira-issues-modal/jira-search-container/JiraSearchContainerWithWrappers.js

@@ -0,0 +1,11 @@
+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 const JiraSearchContainer = props => /*#__PURE__*/React.createElement(IntlMessagesProvider, {
+  defaultMessages: i18nEN,
+  loaderFn: fetchMessagesForLocale
+}, /*#__PURE__*/React.createElement(SearchContainer, props));

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

@@ -9,6 +9,10 @@ const fuzzySearchRegExp = /^"(.+)"$/;
 const jiraIssueKeyRegExp = /[A-Z]+-\d+/;
 export const fuzzyCharacter = '*';
 const constructTerminalClause = (field, operator, value) => 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.
+const escapedValueOperand = value => creators.byText.valueOperand(`"${value.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`);
 export const buildJQL = input => {
   /**
    * Jql ast - Transforming the ast
@@ -20,6 +24,7 @@ export const buildJQL = input => {
   } = jast;
   const {
     rawSearch,
+    textSearchField,
     orderDirection = ORDER_BY_DIRECTION_DESC,
     orderKey = 'created',
     filterValues
@@ -33,7 +38,10 @@ export const buildJQL = input => {
   if (!query) {
     return '';
   }
-  if (trimmedRawSearch) {
+  if (trimmedRawSearch && textSearchField === 'textfields') {
+    const suffix = /["*?]$/.test(trimmedRawSearch) ? '' : fuzzyCharacter;
+    query.appendClause(creators.terminalClause(creators.field('textfields'), creators.operator(OPERATOR_LIKE), escapedValueOperand(`${trimmedRawSearch}${suffix}`)), COMPOUND_OPERATOR_AND);
+  } else if (trimmedRawSearch) {
     const fuzzy = !trimmedRawSearch.match(fuzzySearchRegExp) ? fuzzyCharacter : '';
     const basicSearch = trimmedRawSearch.replace(/['"?*]+/g, '');
     const text = constructTerminalClause('text', OPERATOR_LIKE, `${basicSearch}${fuzzy}`);
@@ -51,7 +59,7 @@ export const buildJQL = input => {
       if (filterFieldValues.length === 0) {
         return;
       }
-      const filterInClause = creators.terminalClause(creators.field(key), creators.operator(OPERATOR_IN), creators.listOperand(filterFieldValues.map(filterFieldValue => creators.valueOperand(filterFieldValue.value))));
+      const filterInClause = creators.terminalClause(creators.field(key), creators.operator(OPERATOR_IN), creators.listOperand(filterFieldValues.map(filterFieldValue => textSearchField ? escapedValueOperand(filterFieldValue.value) : creators.valueOperand(filterFieldValue.value))));
       query.appendClause(filterInClause, COMPOUND_OPERATOR_AND);
     });
   }

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

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

@@ -0,0 +1,283 @@
+/* embedded.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./embedded.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useDebouncedCallback } from 'use-debounce';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Flex } from '@atlaskit/primitives/compiled/flex';
+import { Text } from '@atlaskit/primitives/compiled/text';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import { basicSearchInputMessages } from '../../common/modal/basic-search-input/messages';
+import { ModeSwitcher } from '../../common/modal/mode-switcher/ModeSwitcher';
+import { FILTER_SELECTION_DEBOUNCE_MS } from '../../common/modal/popup-select/constants';
+import { useHydrateJqlQuery } from '../basic-filters/hooks/useHydrateJqlQuery';
+import { default as BasicFilters } from '../basic-filters/ui/index';
+import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
+import { JiraJQLEditor } from '../jql-editor';
+import { buildJQL } from './buildJQL';
+import { modeSwitcherMessages } from './messages';
+const styles = {
+  inlineSearch: "_16jlkb7n _i0dlghg7 _1ul9idpf",
+  inlineSwitcher: "_1o9zidpf",
+  basicSearchInputBoxStyles: "_1bsb1osq",
+  basicSearchInputContainerStyles: "_16jlkb7n _1n261g80 _1p57u2gc",
+  inputContainerStyles: "_4cvr1y6m _1e0c1txw _1tket9kd",
+  modeSwitcherContainerStyles: "_19pk1b66"
+};
+export const EmbeddedJiraSearchContainer = props => {
+  const {
+    defaultJql: DEFAULT_JQL_QUERY,
+    allowedOrderByKeys: ALLOWED_ORDER_BY_KEYS,
+    isSearching,
+    parameters,
+    onSearch,
+    onSearchMethodChange: onSearchMethodChangeCallback,
+    initialSearchMethod,
+    setSearchBarJql,
+    searchBarJql = DEFAULT_JQL_QUERY,
+    site,
+    setHasJqlSyntaxErrors,
+    layout = 'modal',
+    initialBasicSearchTerm = '',
+    allowBasicModeReset = false,
+    showBasicSearchButton = true,
+    textSearchField
+  } = props;
+  const {
+    cloudId: currentCloudId
+  } = parameters || {};
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const [basicSearchTerm, setBasicSearchTerm] = useState(initialBasicSearchTerm);
+  const [currentSearchMethod, setCurrentSearchMethod] = useState(initialSearchMethod);
+  const [cloudId, setCloudId] = useState(currentCloudId);
+  const [isComplexQuery, setIsComplexQuery] = useState(false);
+  const [orderKey, setOrderKey] = useState();
+  const [orderDirection, setOrderDirection] = useState();
+  const [filterSelections, setFilterSelections] = useState({});
+  const basicDraft = useRef({
+    jql: initialSearchMethod === 'basic' ? searchBarJql : buildJQL({
+      rawSearch: initialBasicSearchTerm,
+      textSearchField
+    }),
+    term: initialBasicSearchTerm,
+    selections: {}
+  });
+  const advancedDraft = useRef();
+  const modeSwitcherOptionsMap = useMemo(() => ({
+    jql: {
+      label: 'JQL',
+      value: 'jql'
+    },
+    basic: {
+      label: formatMessage(modeSwitcherMessages.basicTextSearchLabel),
+      value: 'basic',
+      disabled: isComplexQuery && !allowBasicModeReset,
+      tooltipText: isComplexQuery && !allowBasicModeReset ? formatMessage(modeSwitcherMessages.basicModeSwitchDisabledTooltipText) : ''
+    }
+  }), [formatMessage, isComplexQuery, allowBasicModeReset]);
+  const modeSwitcherOptions = useMemo(() => [modeSwitcherOptionsMap.basic, modeSwitcherOptionsMap.jql], [modeSwitcherOptionsMap]);
+  const {
+    hydratedOptions,
+    fetchHydratedJqlOptions,
+    status: basicFilterHydrationStatus
+  } = useHydrateJqlQuery(cloudId || '', searchBarJql);
+  const onSearchMethodChange = useCallback(searchMethod => {
+    if (allowBasicModeReset) {
+      if (searchMethod === 'jql') {
+        var _advancedDraft$curren;
+        basicDraft.current = {
+          jql: searchBarJql,
+          term: basicSearchTerm,
+          selections: filterSelections
+        };
+        setSearchBarJql((_advancedDraft$curren = advancedDraft.current) !== null && _advancedDraft$curren !== void 0 ? _advancedDraft$curren : searchBarJql);
+      } else if (isQueryTooComplex(searchBarJql)) {
+        advancedDraft.current = searchBarJql;
+        setSearchBarJql(basicDraft.current.jql);
+        setBasicSearchTerm(basicDraft.current.term);
+        setFilterSelections(basicDraft.current.selections);
+      }
+    }
+    onSearchMethodChangeCallback(searchMethod);
+    setCurrentSearchMethod(searchMethod);
+  }, [onSearchMethodChangeCallback, allowBasicModeReset, searchBarJql, basicSearchTerm, filterSelections, setSearchBarJql]);
+  const handleBasicSearchChange = useCallback(e => {
+    const rawSearch = e.currentTarget.value;
+    setBasicSearchTerm(rawSearch);
+    setSearchBarJql(buildJQL({
+      rawSearch,
+      textSearchField,
+      filterValues: filterSelections,
+      orderDirection,
+      orderKey
+    }));
+  }, [setSearchBarJql, filterSelections, orderDirection, orderKey, textSearchField]);
+  const onQueryChange = useCallback((query, jast) => {
+    var _query$split$map$filt, _fragments$at, _fragments$at2, _fragments$at3;
+    setHasJqlSyntaxErrors === null || setHasJqlSyntaxErrors === void 0 ? void 0 : setHasJqlSyntaxErrors(jast.errors.length > 0);
+    // determine if order keys have been set so they can be saved and persisted when changes occur in basic search
+    const fragments = (_query$split$map$filt = query === null || query === void 0 ? void 0 : query.split(/(^| )(order by)( |$)/i).map(item => item.trim()).filter(Boolean)) !== null && _query$split$map$filt !== void 0 ? _query$split$map$filt : [];
+    const hasOrder = ((_fragments$at = fragments.at(-2)) === null || _fragments$at === void 0 ? void 0 : _fragments$at.toLowerCase()) === 'order by';
+    const key = hasOrder ? (_fragments$at2 = fragments.at(-1)) === null || _fragments$at2 === void 0 ? void 0 : _fragments$at2.split(' ').at(-2) : undefined;
+    const order = hasOrder ? (_fragments$at3 = fragments.at(-1)) === null || _fragments$at3 === void 0 ? void 0 : _fragments$at3.split(' ').at(-1) : undefined;
+
+    // TODO: confirm if these are the only order keys we want to preserve - existing whiteboard logic
+    if (key && ALLOWED_ORDER_BY_KEYS.includes(key)) {
+      setOrderKey(key);
+      setOrderDirection(order);
+    }
+    setSearchBarJql(query);
+  }, [setSearchBarJql, setHasJqlSyntaxErrors]);
+  const handleSearch = useCallback(() => {
+    const isCurrentQueryComplex = isQueryTooComplex(searchBarJql);
+    if (currentSearchMethod === 'basic') {
+      advancedDraft.current = undefined;
+    }
+    onSearch({
+      jql: searchBarJql
+    }, {
+      searchMethod: currentSearchMethod,
+      basicFilterSelections: filterSelections,
+      isQueryComplex: isCurrentQueryComplex
+    });
+    if (currentSearchMethod === 'jql') {
+      fireEvent('ui.jqlEditor.searched', {
+        isQueryComplex: isCurrentQueryComplex
+      });
+      setIsComplexQuery(isCurrentQueryComplex);
+      if (!isCurrentQueryComplex) {
+        fetchHydratedJqlOptions();
+      }
+    }
+  }, [currentSearchMethod, fetchHydratedJqlOptions, filterSelections, fireEvent, searchBarJql, onSearch]);
+  const [debouncedBasicFilterSelectionChange] = useDebouncedCallback(filterValues => {
+    const jqlWithFilterValues = buildJQL({
+      rawSearch: basicSearchTerm,
+      textSearchField,
+      filterValues,
+      orderDirection,
+      orderKey
+    });
+    advancedDraft.current = undefined;
+    setSearchBarJql(jqlWithFilterValues);
+    const isCurrentQueryComplex = isQueryTooComplex(jqlWithFilterValues);
+    onSearch({
+      jql: jqlWithFilterValues
+    }, {
+      searchMethod: currentSearchMethod,
+      basicFilterSelections: filterValues,
+      isQueryComplex: isCurrentQueryComplex
+    });
+  }, FILTER_SELECTION_DEBOUNCE_MS);
+  const handleBasicFilterSelectionChange = useCallback((filterType, options) => {
+    const updatedSelection = {
+      ...filterSelections,
+      [filterType]: options
+    };
+    setFilterSelections(updatedSelection);
+    debouncedBasicFilterSelectionChange(updatedSelection);
+  }, [debouncedBasicFilterSelectionChange, filterSelections]);
+  useEffect(() => {
+    const isCurrentQueryComplex = isQueryTooComplex(searchBarJql);
+    setIsComplexQuery(isCurrentQueryComplex);
+    if (!isCurrentQueryComplex && searchBarJql !== DEFAULT_JQL_QUERY) {
+      fetchHydratedJqlOptions();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (basicFilterHydrationStatus === 'resolved') {
+      const {
+        basicInputTextValue,
+        ...hydratedFilterOptions
+      } = hydratedOptions;
+      setFilterSelections(hydratedFilterOptions);
+      if (basicInputTextValue) {
+        setBasicSearchTerm(basicInputTextValue);
+      }
+    }
+  }, [hydratedOptions, basicFilterHydrationStatus]);
+  useEffect(() => {
+    if (currentCloudId !== cloudId) {
+      basicDraft.current = {
+        jql: DEFAULT_JQL_QUERY,
+        term: '',
+        selections: {}
+      };
+      advancedDraft.current = undefined;
+      setBasicSearchTerm('');
+      setSearchBarJql(DEFAULT_JQL_QUERY);
+      setIsComplexQuery(false);
+      setOrderKey(undefined);
+      setOrderDirection(undefined);
+      setFilterSelections({});
+      setCloudId(currentCloudId);
+    }
+  }, [currentCloudId, cloudId, setSearchBarJql]);
+  const searchInput = currentSearchMethod === 'basic' ? /*#__PURE__*/React.createElement(Box, {
+    xcss: layout === 'inline' ? styles.inlineSearch : styles.basicSearchInputBoxStyles
+  }, /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    xcss: styles.basicSearchInputContainerStyles
+  }, /*#__PURE__*/React.createElement(BasicSearchInput, {
+    isCompact: layout === 'inline',
+    isSearching: isSearching,
+    onChange: handleBasicSearchChange,
+    onSearch: handleSearch,
+    searchTerm: basicSearchTerm,
+    showSearchButton: showBasicSearchButton,
+    ariaLabel: basicSearchInputMessages.basicTextSearchLabel,
+    testId: "jira-datasource-modal",
+    fullWidth: false
+  }), /*#__PURE__*/React.createElement(BasicFilters, {
+    jql: searchBarJql,
+    site: site,
+    onChange: handleBasicFilterSelectionChange,
+    selections: filterSelections,
+    isJQLHydrating: basicFilterHydrationStatus === 'loading',
+    isInline: layout === 'inline'
+  })), layout !== 'inline' && /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "color.text.subtlest",
+    testId: "jira-search-placeholder"
+  }, formatMessage(basicSearchInputMessages.basicTextSearchLabel))) : /*#__PURE__*/React.createElement(JiraJQLEditor, {
+    isCompact: layout === 'inline',
+    cloudId: cloudId || '',
+    autoFocus: layout !== 'inline',
+    isSearching: isSearching,
+    onChange: onQueryChange,
+    onSearch: handleSearch,
+    query: searchBarJql
+  });
+  const modeSwitcher = /*#__PURE__*/React.createElement(ModeSwitcher, {
+    isInline: layout === 'inline',
+    onOptionValueChange: onSearchMethodChange,
+    selectedOptionValue: currentSearchMethod,
+    options: modeSwitcherOptions
+  });
+  if (layout === 'inline') {
+    return /*#__PURE__*/React.createElement(Flex, {
+      alignItems: "start",
+      gap: "space.100",
+      wrap: "wrap",
+      testId: "jira-search-container"
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.inlineSwitcher
+    }, modeSwitcher), currentSearchMethod === 'basic' ? searchInput : /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.inlineSearch
+    }, searchInput));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "jira-search-container",
+    className: ax([styles.inputContainerStyles])
+  }, searchInput, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.modeSwitcherContainerStyles
+  }, modeSwitcher));
+};

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

@@ -1,4 +1,5 @@
 /* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -17,6 +18,7 @@ import { default as BasicFilters } from '../basic-filters/ui/index';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { JiraJQLEditor } from '../jql-editor';
 import { buildJQL } from './buildJQL';
+import { EmbeddedJiraSearchContainer } from './embedded';
 import { modeSwitcherMessages } from './messages';
 const styles = {
   basicSearchInputBoxStyles: "_1bsb1osq",
@@ -26,7 +28,17 @@ const styles = {
 };
 export const DEFAULT_JQL_QUERY = 'ORDER BY created DESC';
 export const ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
+/** Opt-in consumers use a separate component; the configuration modal retains its existing path. */
 export const JiraSearchContainer = props => {
+  if (props.layout === 'inline' || props.allowBasicModeReset || props.initialBasicSearchTerm !== undefined || props.showBasicSearchButton === false || props.textSearchField !== undefined) {
+    return /*#__PURE__*/React.createElement(EmbeddedJiraSearchContainer, _extends({}, props, {
+      defaultJql: DEFAULT_JQL_QUERY,
+      allowedOrderByKeys: ALLOWED_ORDER_BY_KEYS
+    }));
+  }
+  return /*#__PURE__*/React.createElement(ModalJiraSearchContainer, props);
+};
+const ModalJiraSearchContainer = props => {
   const {
     isSearching,
     parameters,

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

@@ -6,6 +6,8 @@ import { makeGetJqlAutocompleteData } from '../../../services/makeGetJqlAutocomp
 import { makeGetJqlSuggestionsData } from '../../../services/makeGetJqlSuggestionsData';
 export const JiraJQLEditor = ({
   cloudId,
+  autoFocus = true,
+  isCompact = false,
   isSearching,
   onChange,
   onSearch,
@@ -18,11 +20,14 @@ export const JiraJQLEditor = ({
     focus: () => {}
   });
   useEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
     requestAnimationFrame(() => {
       var _inputRef$current;
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     });
-  }, []);
+  }, [autoFocus]);
   const searchIfValidJql = (_, jast) => {
     if (jast.errors.length === 0) {
       onSearch();
@@ -34,6 +39,7 @@ export const JiraJQLEditor = ({
     onSearch: searchIfValidJql,
     onUpdate: onChange,
     isSearching: isSearching,
+    isCompact: isCompact,
     inputRef: inputRef,
     query: query,
     "aria-label": /*#__PURE__*/React.createElement(FormattedMessage, {

package/dist/es2019/ui/jira-search-state/index.compiled.css

@@ -0,0 +1,12 @@
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcpxbi{padding-block:var(--ds-space-200,1pc)}._18m915vq{overflow-y:hidden}
+._1pglindk{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
+._1reo15vq{overflow-x:hidden}
+._1tke194s{min-height:14pc}
+._1tkeva7c{min-height:281px}
+._4t3i1osq{height:100%}
+._5sag1ign{animation-duration:var(--ds-duration-short,.15s)}
+._j7hq1bym{animation-name:var(--ds-keyframe-fade-in,FadeIn0to100)}
+._p12f1gwv{max-width:360px}
+._y3gn1h6o{text-align:center}
+@media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}}