@atlaskit/link-datasource 3.19.1 → 3.20.0

package/dist/es2019/ui/assets-modal/search-container/aql-search-input/index.js

@@ -1,12 +1,10 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { LoadingButton } from '@atlaskit/button';
 import { ErrorMessage, Field } from '@atlaskit/form';
@@ -14,36 +12,43 @@ import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
 import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
 import SearchIcon from '@atlaskit/icon/core/migration/search--editor-search';
 import CheckCircleIcon from '@atlaskit/icon/core/migration/success--check-circle';
+import { fg } from "@atlaskit/platform-feature-flags";
 import Spinner from '@atlaskit/spinner';
 import Textfield from '@atlaskit/textfield';
 import { G300, N500, R400 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { useValidateAqlText } from '../../../../hooks/useValidateAqlText';
 import { aqlKey } from '../../../../types/assets/types';
-import { FieldContainer } from '../styled';
+import { AqlSearchInputOld } from './aql-search-input-old';
 import { searchInputMessages } from './messages';
-const buttonBaseStyles = css({
-  display: 'flex',
-  height: '100%',
-  position: 'relative',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  marginRight: "var(--ds-space-100, 0.5em)"
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const FieldContainer = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _19pkx0bf", __cmplp.className])
+  }));
 });
+if (process.env.NODE_ENV !== 'production') {
+  FieldContainer.displayName = 'FieldContainer';
+}
+const buttonBaseStyles = null;
 const AQLSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-assets-query-language-aql/';
-const searchButtonStyles = css({
-  marginRight: "var(--ds-space-075, 6px)"
-});
+const searchButtonStyles = null;
 const renderValidatorIcon = lastValidationResult => {
   if (lastValidationResult.type === 'loading') {
-    return jsx(Spinner, {
+    return /*#__PURE__*/React.createElement(Spinner, {
       size: "medium",
       testId: "assets-datasource-modal--aql-validating"
     });
   }
   if (lastValidationResult.type === 'invalid') {
-    return jsx(CrossCircleIcon, {
+    return /*#__PURE__*/React.createElement(CrossCircleIcon, {
       label: "label",
       color: `var(--ds-icon-danger, ${R400})`,
       LEGACY_size: "medium",
@@ -52,7 +57,7 @@ const renderValidatorIcon = lastValidationResult => {
     });
   }
   if (lastValidationResult.type === 'valid') {
-    return jsx(CheckCircleIcon, {
+    return /*#__PURE__*/React.createElement(CheckCircleIcon, {
       label: "label",
       color: `var(--ds-icon-success, ${G300})`,
       LEGACY_size: "medium",
@@ -60,7 +65,7 @@ const renderValidatorIcon = lastValidationResult => {
       spacing: "spacious"
     });
   }
-  return jsx(SearchIcon, {
+  return /*#__PURE__*/React.createElement(SearchIcon, {
     label: "label",
     LEGACY_size: "medium",
     testId: "assets-datasource-modal--aql-idle",
@@ -68,7 +73,7 @@ const renderValidatorIcon = lastValidationResult => {
     spacing: "spacious"
   });
 };
-export const AqlSearchInput = ({
+export const AqlSearchInputNew = ({
   value,
   workspaceId,
   testId = 'assets-datasource-modal--aql-search-input',
@@ -81,14 +86,14 @@ export const AqlSearchInput = ({
     debouncedValidation,
     lastValidationResult
   } = useValidateAqlText(workspaceId, value);
-  return jsx(FieldContainer, null, jsx(Field, {
+  return /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Field, {
     name: aqlKey,
     defaultValue: value,
     validate: debouncedValidation
   }, ({
     fieldProps
-  }) => jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, {
-    elemBeforeInput: jsx("span", {
+  }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Textfield, _extends({}, fieldProps, {
+    elemBeforeInput: /*#__PURE__*/React.createElement("span", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: {
         paddingLeft: "var(--ds-space-075, 6px)",
@@ -96,23 +101,22 @@ export const AqlSearchInput = ({
         display: 'flex'
       }
     }, renderValidatorIcon(lastValidationResult)),
-    elemAfterInput: jsx(Fragment, null, jsx(Tooltip, {
+    elemAfterInput: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
       content: formatMessage(searchInputMessages.helpTooltipText),
       position: "bottom"
-    }, jsx("a", {
+    }, /*#__PURE__*/React.createElement("a", {
       href: AQLSupportDocumentLink,
       target: "_blank",
-      css: buttonBaseStyles
-    }, jsx(QuestionCircleIcon, {
+      className: ax(["_1e0c1txw _4t3i1osq _kqswh2mm _4cvr1h6o _1bah1h6o _2lx21bp4 _2hwx1f3t"])
+    }, /*#__PURE__*/React.createElement(QuestionCircleIcon, {
       label: "label",
       color: `var(--ds-icon, ${N500})`,
       LEGACY_size: "medium",
       testId: "assets-datasource-modal-help",
       spacing: "spacious"
-    }))), jsx(LoadingButton, {
+    }))), /*#__PURE__*/React.createElement(LoadingButton, {
       appearance: "primary",
-      css: searchButtonStyles,
-      iconBefore: jsx(SearchIcon, {
+      iconBefore: /*#__PURE__*/React.createElement(SearchIcon, {
         label: formatMessage(searchInputMessages.placeholder),
         LEGACY_size: "medium",
         color: "currentColor",
@@ -122,9 +126,17 @@ export const AqlSearchInput = ({
       spacing: "none",
       testId: "assets-datasource-modal--aql-search-button",
       type: "submit",
-      isDisabled: lastValidationResult.type !== 'valid'
+      isDisabled: lastValidationResult.type !== 'valid',
+      className: ax(["_2hwx12x7"])
     })),
     placeholder: formatMessage(searchInputMessages.placeholder),
     testId: testId
-  })), lastValidationResult.type === 'invalid' && lastValidationResult.error && jsx(ErrorMessage, null, lastValidationResult.error))));
+  })), lastValidationResult.type === 'invalid' && lastValidationResult.error && /*#__PURE__*/React.createElement(ErrorMessage, null, lastValidationResult.error))));
+};
+export const AqlSearchInput = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(AqlSearchInputNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(AqlSearchInputOld, props);
+  }
 };

package/dist/es2019/ui/assets-modal/search-container/aql-search-input/loading-state.js

@@ -1,11 +1,6 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { Skeleton } from '@atlaskit/linking-common';
-export const AssetsAqlSearchInputSkeleton = () => jsx(Skeleton, {
+export const AssetsAqlSearchInputSkeleton = () => /*#__PURE__*/React.createElement(Skeleton, {
   width: "100%",
   height: "40px",
   testId: "assets-datasource-modal--aql-search-input-skeleton"

package/dist/es2019/ui/assets-modal/search-container/index.compiled.css

@@ -0,0 +1,4 @@
+._1bsb1osq{width:100%}
+._1e0c11p5{display:grid}
+._1p57pxbi{row-gap:var(--ds-space-200,1pc)}
+._p12ffkat{max-width:386px}

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

@@ -1,18 +1,51 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import Form from '@atlaskit/form';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { AqlSearchInput } from './aql-search-input';
 import { AssetsObjectSchemaSelect } from './object-schema-select';
-import { FormContainer, FormRowContainer, SchemaSelectContainer } from './styled';
+import { AssetsSearchContainerOld } from './search-container-old';
+import { FormRowContainer } from './styled';
 const DEFAULT_AQL_QUERY = '';
 const SEARCH_FORM_ID = 'linkDataSource.assets.configModal.searchContainer-form';
-export const AssetsSearchContainer = props => {
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const SchemaSelectContainer = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1bsb1osq _p12ffkat", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  SchemaSelectContainer.displayName = 'SchemaSelectContainer';
+}
+const FormContainer = forwardRef(({
+  as: C = "form",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c11p5 _1p57pxbi _1bsb1osq", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  FormContainer.displayName = 'FormContainer';
+}
+export const AssetsSearchContainerNew = props => {
   const {
     onSearch,
     workspaceId,
@@ -34,25 +67,32 @@ export const AssetsSearchContainer = props => {
       onSearch(aql, objectSchema.value);
     }
   };
-  return jsx(Form, {
+  return /*#__PURE__*/React.createElement(Form, {
     onSubmit: onFormSubmit
   }, ({
     formProps
   }) => {
     var _initialSearchData$ob, _initialSearchData$ob2, _initialSearchData$aq;
-    return jsx(FormContainer, _extends({}, formProps, {
+    return /*#__PURE__*/React.createElement(FormContainer, _extends({}, formProps, {
       id: SEARCH_FORM_ID
-    }), jsx(FormRowContainer, {
+    }), /*#__PURE__*/React.createElement(FormRowContainer, {
       isNarrowGap: true
-    }, modalTitle, jsx(SchemaSelectContainer, null, jsx(AssetsObjectSchemaSelect, {
+    }, modalTitle, /*#__PURE__*/React.createElement(SchemaSelectContainer, null, /*#__PURE__*/React.createElement(AssetsObjectSchemaSelect, {
       value: (_initialSearchData$ob = initialSearchData.objectSchema) !== null && _initialSearchData$ob !== void 0 ? _initialSearchData$ob : undefined,
       workspaceId: workspaceId,
       initialObjectSchemas: (_initialSearchData$ob2 = initialSearchData.objectSchemas) !== null && _initialSearchData$ob2 !== void 0 ? _initialSearchData$ob2 : undefined,
       classNamePrefix: "assets-datasource-modal--object-schema-select"
-    }))), jsx(FormRowContainer, null, jsx(AqlSearchInput, {
+    }))), /*#__PURE__*/React.createElement(FormRowContainer, null, /*#__PURE__*/React.createElement(AqlSearchInput, {
       value: (_initialSearchData$aq = initialSearchData.aql) !== null && _initialSearchData$aq !== void 0 ? _initialSearchData$aq : DEFAULT_AQL_QUERY,
       workspaceId: workspaceId,
       isSearching: isSearching
     })));
   });
+};
+export const AssetsSearchContainer = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(AssetsSearchContainerNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(AssetsSearchContainerOld, props);
+  }
 };

package/dist/es2019/ui/assets-modal/search-container/loading-state-old.js

@@ -0,0 +1,18 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { AssetsAqlSearchInputSkeleton } from './aql-search-input/loading-state';
+import { AssetsObjectSchemaSelectSkeleton } from './object-schema-select/loading-state';
+import { FormContainer, FormRowContainer, SchemaSelectContainer } from './styled-old';
+export const AssetsSearchContainerLoadingOld = ({
+  modalTitle
+}) => {
+  return jsx(FormContainer, {
+    "data-testid": "assets-datasource-modal--search-container-skeleton"
+  }, jsx(FormRowContainer, {
+    isNarrowGap: true
+  }, modalTitle, jsx(SchemaSelectContainer, null, jsx(AssetsObjectSchemaSelectSkeleton, null))), jsx(FormRowContainer, null, jsx(AssetsAqlSearchInputSkeleton, null)));
+};

package/dist/es2019/ui/assets-modal/search-container/loading-state.compiled.css

@@ -0,0 +1,4 @@
+._1bsb1osq{width:100%}
+._1e0c11p5{display:grid}
+._1p57pxbi{row-gap:var(--ds-space-200,1pc)}
+._p12ffkat{max-width:386px}

package/dist/es2019/ui/assets-modal/search-container/loading-state.js

@@ -1,18 +1,57 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* loading-state.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./loading-state.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from "@atlaskit/platform-feature-flags";
 import { AssetsAqlSearchInputSkeleton } from './aql-search-input/loading-state';
+import { AssetsSearchContainerLoadingOld } from './loading-state-old';
 import { AssetsObjectSchemaSelectSkeleton } from './object-schema-select/loading-state';
-import { FormContainer, FormRowContainer, SchemaSelectContainer } from './styled';
-export const AssetsSearchContainerLoading = ({
+import { FormRowContainer } from './styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const SchemaSelectContainer = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1bsb1osq _p12ffkat", __cmplp.className])
+  }));
+});
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+if (process.env.NODE_ENV !== 'production') {
+  SchemaSelectContainer.displayName = 'SchemaSelectContainer';
+}
+const FormContainer = forwardRef(({
+  as: C = "form",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c11p5 _1p57pxbi _1bsb1osq", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  FormContainer.displayName = 'FormContainer';
+}
+const AssetsSearchContainerLoadingNew = ({
   modalTitle
 }) => {
-  return jsx(FormContainer, {
+  return /*#__PURE__*/React.createElement(FormContainer, {
     "data-testid": "assets-datasource-modal--search-container-skeleton"
-  }, jsx(FormRowContainer, {
+  }, /*#__PURE__*/React.createElement(FormRowContainer, {
     isNarrowGap: true
-  }, modalTitle, jsx(SchemaSelectContainer, null, jsx(AssetsObjectSchemaSelectSkeleton, null))), jsx(FormRowContainer, null, jsx(AssetsAqlSearchInputSkeleton, null)));
+  }, modalTitle, /*#__PURE__*/React.createElement(SchemaSelectContainer, null, /*#__PURE__*/React.createElement(AssetsObjectSchemaSelectSkeleton, null))), /*#__PURE__*/React.createElement(FormRowContainer, null, /*#__PURE__*/React.createElement(AssetsAqlSearchInputSkeleton, null)));
+};
+export const AssetsSearchContainerLoading = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(AssetsSearchContainerLoadingNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(AssetsSearchContainerLoadingOld, props);
+  }
 };

package/dist/es2019/ui/assets-modal/search-container/object-schema-select/index.compiled.css

@@ -0,0 +1,4 @@
+._16jlkb7n{flex-grow:1}
+._19pkx0bf{margin-top:var(--ds-space-negative-100,-8px)}
+._1o9zkb7n{flex-shrink:1}
+._i0dlf1ug{flex-basis:0%}

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

@@ -1,11 +1,9 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import debounce from 'debounce-promise';
 import { useIntl } from 'react-intl-next';
 import { Field } from '@atlaskit/form';
@@ -13,9 +11,24 @@ import { AsyncSelect } from '@atlaskit/select';
 import { layers } from '@atlaskit/theme/constants';
 import { useObjectSchemas } from '../../../../hooks/useObjectSchemas';
 import { objectSchemaKey } from '../../../../types/assets/types';
-import { FieldContainer } from '../styled';
 import { objectSchemaSelectMessages } from './messages';
 import { objectSchemaToSelectOption } from './utils';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const FieldContainer = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _19pkx0bf", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  FieldContainer.displayName = 'FieldContainer';
+}
 export const SEARCH_DEBOUNCE_MS = 350;
 const mapObjectSchemasToOptions = objectSchemas => {
   return objectSchemas ? objectSchemas.map(objectSchema => objectSchemaToSelectOption(objectSchema)) : [];
@@ -61,7 +74,7 @@ export const AssetsObjectSchemaSelect = ({
     }
     return undefined;
   };
-  return jsx(FieldContainer, null, jsx(Field, {
+  return /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Field, {
     name: objectSchemaKey,
     defaultValue: selectedObjectSchema,
     validate: value => validateSchema(value)
@@ -71,7 +84,7 @@ export const AssetsObjectSchemaSelect = ({
       onFocus,
       ...restFieldProps
     }
-  }) => jsx(AsyncSelect, _extends({
+  }) => /*#__PURE__*/React.createElement(AsyncSelect, _extends({
     autoFocus: true,
     classNamePrefix: classNamePrefix,
     isLoading: objectSchemasLoading,

package/dist/es2019/ui/assets-modal/search-container/object-schema-select/loading-state.js

@@ -1,11 +1,6 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { Skeleton } from '@atlaskit/linking-common';
-export const AssetsObjectSchemaSelectSkeleton = () => jsx(Skeleton, {
+export const AssetsObjectSchemaSelectSkeleton = () => /*#__PURE__*/React.createElement(Skeleton, {
   width: "100%",
   height: "40px",
   testId: "assets-datasource-modal--object-schema-select-skeleton"

package/dist/es2019/ui/assets-modal/search-container/search-container-old.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import Form from '@atlaskit/form';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { AqlSearchInput } from './aql-search-input';
+import { AssetsObjectSchemaSelect } from './object-schema-select';
+import { FormContainer, FormRowContainer, SchemaSelectContainer } from './styled-old';
+const DEFAULT_AQL_QUERY = '';
+const SEARCH_FORM_ID = 'linkDataSource.assets.configModal.searchContainer-form';
+export const AssetsSearchContainerOld = props => {
+  const {
+    onSearch,
+    workspaceId,
+    initialSearchData,
+    modalTitle,
+    isSearching
+  } = props;
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const onFormSubmit = searchFormValues => {
+    const {
+      aql,
+      objectSchema
+    } = searchFormValues;
+    if (aql && objectSchema) {
+      fireEvent('ui.aqlEditor.searched', {});
+      // Pass the validated aql and object schema back to modal
+      onSearch(aql, objectSchema.value);
+    }
+  };
+  return jsx(Form, {
+    onSubmit: onFormSubmit
+  }, ({
+    formProps
+  }) => {
+    var _initialSearchData$ob, _initialSearchData$ob2, _initialSearchData$aq;
+    return jsx(FormContainer, _extends({}, formProps, {
+      id: SEARCH_FORM_ID
+    }), jsx(FormRowContainer, {
+      isNarrowGap: true
+    }, modalTitle, jsx(SchemaSelectContainer, null, jsx(AssetsObjectSchemaSelect, {
+      value: (_initialSearchData$ob = initialSearchData.objectSchema) !== null && _initialSearchData$ob !== void 0 ? _initialSearchData$ob : undefined,
+      workspaceId: workspaceId,
+      initialObjectSchemas: (_initialSearchData$ob2 = initialSearchData.objectSchemas) !== null && _initialSearchData$ob2 !== void 0 ? _initialSearchData$ob2 : undefined,
+      classNamePrefix: "assets-datasource-modal--object-schema-select"
+    }))), jsx(FormRowContainer, null, jsx(AqlSearchInput, {
+      value: (_initialSearchData$aq = initialSearchData.aql) !== null && _initialSearchData$aq !== void 0 ? _initialSearchData$aq : DEFAULT_AQL_QUERY,
+      workspaceId: workspaceId,
+      isSearching: isSearching
+    })));
+  });
+};

package/dist/es2019/ui/assets-modal/search-container/styled-old.js

@@ -0,0 +1,59 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+export const FormRowContainer = styled.div(props => ({
+  alignItems: 'center',
+  display: 'flex',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  gap: props.isNarrowGap ? "var(--ds-space-100, 8px)" : "var(--ds-space-200, 16px)",
+  flexGrow: 1,
+  width: '100%'
+}));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const FormContainer = styled.form({
+  display: 'grid',
+  rowGap: "var(--ds-space-200, 16px)",
+  width: '100%'
+});
+
+// Override the top margin of fields
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const FieldContainer = styled.div({
+  flex: 1,
+  marginTop: "var(--ds-space-negative-100, -8px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const SchemaSelectContainer = styled.div({
+  width: '100%',
+  maxWidth: '386px'
+});
+`
+mv click-summary-column-dropdown-to-see-its-items--default--bandicoots-compiled-migration-smartcard-false.png click-summary-column-dropdown-to-see-its-items--default--bandicoots-compiled-migration-link-datasource-false.png
+mv click-summary-column-dropdown-to-see-its-items--default--bandicoots-compiled-migration-smartcard-true.png click-summary-column-dropdown-to-see-its-items--default--bandicoots-compiled-migration-link-datasource-true.png
+mv double-lined-date-of-creation-header-text-is-truncated-with-ellipses--default--bandicoots-compiled-migration-smartcard-false.png double-lined-date-of-creation-header-text-is-truncated-with-ellipses--default--bandicoots-compiled-migration-link-datasource-false.png
+mv double-lined-date-of-creation-header-text-is-truncated-with-ellipses--default--bandicoots-compiled-migration-smartcard-true.png double-lined-date-of-creation-header-text-is-truncated-with-ellipses--default--bandicoots-compiled-migration-link-datasource-true.png
+mv hovering-over-bug-icon--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-bug-icon--default--bandicoots-compiled-migration-link-datasource-false.png
+mv hovering-over-bug-icon--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-bug-icon--default--bandicoots-compiled-migration-link-datasource-true.png
+mv hovering-over-date--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-date--default--bandicoots-compiled-migration-link-datasource-false.png
+mv hovering-over-date--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-date--default--bandicoots-compiled-migration-link-datasource-true.png
+mv hovering-over-label-another-third-labels--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-label-another-third-labels--default--bandicoots-compiled-migration-link-datasource-false.png
+mv hovering-over-label-another-third-labels--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-label-another-third-labels--default--bandicoots-compiled-migration-link-datasource-true.png
+mv hovering-over-labels-header--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-labels-header--default--bandicoots-compiled-migration-link-datasource-false.png
+mv hovering-over-labels-header--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-labels-header--default--bandicoots-compiled-migration-link-datasource-true.png
+mv hovering-over-people--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-people--default--bandicoots-compiled-migration-link-datasource-false.png
+mv hovering-over-people--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-people--default--bandicoots-compiled-migration-link-datasource-true.png
+mv hovering-over-people-header--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-people-header--default--bandicoots-compiled-migration-link-datasource-false.png
+mv hovering-over-people-header--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-people-header--default--bandicoots-compiled-migration-link-datasource-true.png
+mv hovering-over-status-header--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-status-header--default--bandicoots-compiled-migration-link-datasource-false.png
+mv hovering-over-status-header--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-status-header--default--bandicoots-compiled-migration-link-datasource-true.png
+mv hovering-over-summary--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-summary--default--bandicoots-compiled-migration-link-datasource-false.png
+mv hovering-over-summary--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-summary--default--bandicoots-compiled-migration-link-datasource-true.png
+mv hovering-over-to-do-status--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-to-do-status--default--bandicoots-compiled-migration-link-datasource-false.png
+mv hovering-over-to-do-status--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-to-do-status--default--bandicoots-compiled-migration-link-datasource-true.png
+mv hovering-over-unassigned-assignee--default--bandicoots-compiled-migration-smartcard-false.png hovering-over-unassigned-assignee--default--bandicoots-compiled-migration-link-datasource-false.png
+mv hovering-over-unassigned-assignee--default--bandicoots-compiled-migration-smartcard-true.png hovering-over-unassigned-assignee--default--bandicoots-compiled-migration-link-datasource-true.png
+mv toggle-wrapping-on-several-columns--default--bandicoots-compiled-migration-smartcard-false.png toggle-wrapping-on-several-columns--default--bandicoots-compiled-migration-link-datasource-false.png
+mv toggle-wrapping-on-several-columns--default--bandicoots-compiled-migration-smartcard-true.png toggle-wrapping-on-several-columns--default--bandicoots-compiled-migration-link-datasource-true.png
+`;

package/dist/es2019/ui/assets-modal/search-container/styled.compiled.css

@@ -0,0 +1,6 @@
+
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}

package/dist/es2019/ui/assets-modal/search-container/styled.js

@@ -1,31 +1,10 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-export const FormRowContainer = styled.div(props => ({
-  alignItems: 'center',
-  display: 'flex',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  gap: props.isNarrowGap ? "var(--ds-space-100, 8px)" : "var(--ds-space-200, 16px)",
-  flexGrow: 1,
-  width: '100%'
-}));
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const FormContainer = styled.form({
-  display: 'grid',
-  rowGap: "var(--ds-space-200, 16px)",
-  width: '100%'
-});
-
-// Override the top margin of fields
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const FieldContainer = styled.div({
-  flex: 1,
-  marginTop: "var(--ds-space-negative-100, -8px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const SchemaSelectContainer = styled.div({
-  width: '100%',
-  maxWidth: '386px'
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./styled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const formRowContainerBaseStyles = null;
+const formRowContainerNarrowGapStyles = null;
+const formRowContainerWideGapStyles = null;
+export const FormRowContainer = props => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_4cvr1h6o _1e0c1txw _16jlkb7n _1bsb1osq", props.isNarrowGap ? "_zulpu2gc" : "_zulppxbi"])
+}, props.children);